/**
 * GVA Navigation Cards - CSS
 * 
 * 5 Styles de navigation cards avec couleurs dynamiques
 * Compatible Bootstrap 5
 */

/* ============================================
   COULEURS PAR CARTE
   ============================================ */
:root {
   /* Style 1 - Modern Icon Cards */
   --nav-card-1-bg: rgba(52, 152, 219, 0.1);
   --nav-card-1-color: #3498db;
   --nav-card-1-hover: #3498db;
   
   --nav-card-2-bg: rgba(46, 204, 113, 0.1);
   --nav-card-2-color: #27ae60;
   --nav-card-2-hover: #27ae60;
   
   --nav-card-3-bg: rgba(243, 156, 18, 0.1);
   --nav-card-3-color: #f39c12;
   --nav-card-3-hover: #f39c12;
   
   --nav-card-4-bg: rgba(155, 89, 182, 0.1);
   --nav-card-4-color: #9b59b6;
   --nav-card-4-hover: #9b59b6;
   
   --nav-card-5-bg: rgba(231, 76, 60, 0.1);
   --nav-card-5-color: #e74c3c;
   --nav-card-5-hover: #e74c3c;
   
   --nav-card-6-bg: rgba(52, 73, 94, 0.1);
   --nav-card-6-color: #34495e;
   --nav-card-6-hover: #34495e;
   
   --nav-card-7-bg: rgba(26, 188, 156, 0.1);
   --nav-card-7-color: #1abc9c;
   --nav-card-7-hover: #1abc9c;
   
   --nav-card-8-bg: rgba(230, 126, 34, 0.1);
   --nav-card-8-color: #e67e22;
   --nav-card-8-hover: #e67e22;
}

/* ============================================
   STYLE 1 : MODERN ICON CARDS
   ============================================ */
.gva-nav-cards .nav-card {
   display: flex;
   align-items: center;
   background: white;
   border-radius: 16px;
   padding: 25px 30px;
   text-decoration: none;
   color: #2c3e50;
   position: relative;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0,0,0,0.05);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   border: 1px solid rgba(0,0,0,0.05);
   height: 100%;
}

.gva-nav-cards .nav-icon-box {
   width: 60px;
   height: 60px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   margin-right: 20px;
   flex-shrink: 0;
   transition: transform 0.3s ease;
}

.gva-nav-cards .nav-title {
   font-weight: 700;
   font-size: 1.1rem;
   margin: 0;
   line-height: 1.2;
}

.gva-nav-cards .nav-arrow {
   margin-left: auto;
   opacity: 0;
   transform: translateX(-10px);
   transition: all 0.3s ease;
   color: #ccc;
}

.gva-nav-cards .nav-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.gva-nav-cards .nav-card:hover .nav-icon-box {
   transform: scale(1.1) rotate(-5deg);
}

.gva-nav-cards .nav-card:hover .nav-arrow {
   opacity: 1;
   transform: translateX(0);
   color: inherit;
}

/* Couleurs par carte - Style 1 */
.gva-nav-cards .nav-card-1 .nav-icon-box {
   background-color: var(--nav-card-1-bg);
   color: var(--nav-card-1-color);
}
.gva-nav-cards .nav-card-1:hover {
   border-color: var(--nav-card-1-hover);
}
.gva-nav-cards .nav-card-1:hover .nav-icon-box {
   background-color: var(--nav-card-1-hover);
   color: white;
}

.gva-nav-cards .nav-card-2 .nav-icon-box {
   background-color: var(--nav-card-2-bg);
   color: var(--nav-card-2-color);
}
.gva-nav-cards .nav-card-2:hover {
   border-color: var(--nav-card-2-hover);
}
.gva-nav-cards .nav-card-2:hover .nav-icon-box {
   background-color: var(--nav-card-2-hover);
   color: white;
}

.gva-nav-cards .nav-card-3 .nav-icon-box {
   background-color: var(--nav-card-3-bg);
   color: var(--nav-card-3-color);
}
.gva-nav-cards .nav-card-3:hover {
   border-color: var(--nav-card-3-hover);
}
.gva-nav-cards .nav-card-3:hover .nav-icon-box {
   background-color: var(--nav-card-3-hover);
   color: white;
}

.gva-nav-cards .nav-card-4 .nav-icon-box {
   background-color: var(--nav-card-4-bg);
   color: var(--nav-card-4-color);
}
.gva-nav-cards .nav-card-4:hover {
   border-color: var(--nav-card-4-hover);
}
.gva-nav-cards .nav-card-4:hover .nav-icon-box {
   background-color: var(--nav-card-4-hover);
   color: white;
}

.gva-nav-cards .nav-card-5 .nav-icon-box {
   background-color: var(--nav-card-5-bg);
   color: var(--nav-card-5-color);
}
.gva-nav-cards .nav-card-5:hover {
   border-color: var(--nav-card-5-hover);
}
.gva-nav-cards .nav-card-5:hover .nav-icon-box {
   background-color: var(--nav-card-5-hover);
   color: white;
}

.gva-nav-cards .nav-card-6 .nav-icon-box {
   background-color: var(--nav-card-6-bg);
   color: var(--nav-card-6-color);
}
.gva-nav-cards .nav-card-6:hover {
   border-color: var(--nav-card-6-hover);
}
.gva-nav-cards .nav-card-6:hover .nav-icon-box {
   background-color: var(--nav-card-6-hover);
   color: white;
}

.gva-nav-cards .nav-card-7 .nav-icon-box {
   background-color: var(--nav-card-7-bg);
   color: var(--nav-card-7-color);
}
.gva-nav-cards .nav-card-7:hover {
   border-color: var(--nav-card-7-hover);
}
.gva-nav-cards .nav-card-7:hover .nav-icon-box {
   background-color: var(--nav-card-7-hover);
   color: white;
}

.gva-nav-cards .nav-card-8 .nav-icon-box {
   background-color: var(--nav-card-8-bg);
   color: var(--nav-card-8-color);
}
.gva-nav-cards .nav-card-8:hover {
   border-color: var(--nav-card-8-hover);
}
.gva-nav-cards .nav-card-8:hover .nav-icon-box {
   background-color: var(--nav-card-8-hover);
   color: white;
}

/* ============================================
   STYLE 2 : SOLID LEFT BORDER
   ============================================ */
.gva-solid-left .card-solid {
   background: white;
   padding: 20px;
   display: flex;
   align-items: center;
   border-radius: 6px;
   border-left: 5px solid #ccc;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   transition: 0.3s;
   text-decoration: none;
   color: inherit;
   height: 100%;
}

.gva-solid-left .card-solid:hover {
   box-shadow: 0 8px 15px rgba(0,0,0,0.1);
   padding-left: 25px;
}

.gva-solid-left .solid-icon { 
   font-size: 1.5rem; 
   margin-right: 15px; 
   color: #555; 
}

.gva-solid-left .solid-title { 
   font-weight: 700; 
   color: #333; 
   font-size: 1.1rem; 
}

/* Couleurs par carte - Style 2 */
.gva-solid-left .card-solid-1 { border-left-color: var(--nav-card-1-color); }
.gva-solid-left .card-solid-1 .solid-icon { color: var(--nav-card-1-color); }

.gva-solid-left .card-solid-2 { border-left-color: var(--nav-card-2-color); }
.gva-solid-left .card-solid-2 .solid-icon { color: var(--nav-card-2-color); }

.gva-solid-left .card-solid-3 { border-left-color: var(--nav-card-3-color); }
.gva-solid-left .card-solid-3 .solid-icon { color: var(--nav-card-3-color); }

.gva-solid-left .card-solid-4 { border-left-color: var(--nav-card-4-color); }
.gva-solid-left .card-solid-4 .solid-icon { color: var(--nav-card-4-color); }

.gva-solid-left .card-solid-5 { border-left-color: var(--nav-card-5-color); }
.gva-solid-left .card-solid-5 .solid-icon { color: var(--nav-card-5-color); }

.gva-solid-left .card-solid-6 { border-left-color: var(--nav-card-6-color); }
.gva-solid-left .card-solid-6 .solid-icon { color: var(--nav-card-6-color); }

.gva-solid-left .card-solid-7 { border-left-color: var(--nav-card-7-color); }
.gva-solid-left .card-solid-7 .solid-icon { color: var(--nav-card-7-color); }

.gva-solid-left .card-solid-8 { border-left-color: var(--nav-card-8-color); }
.gva-solid-left .card-solid-8 .solid-icon { color: var(--nav-card-8-color); }

/* ============================================
   STYLE 3 : SPLIT COLOR
   ============================================ */
.gva-split-color .card-split {
   background: white;
   border-radius: 16px;
   overflow: hidden;
   display: flex;
   align-items: stretch;
   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
   transition: transform 0.3s, box-shadow 0.3s;
   height: 100%;
   text-decoration: none;
   color: inherit;
}

.gva-split-color .card-split:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.gva-split-color .split-icon-box {
   width: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   color: white;
   transition: width 0.3s;
}

.gva-split-color .split-content {
   padding: 20px;
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.gva-split-color .split-title { 
   font-weight: 700; 
   font-size: 1.1rem; 
   color: #2d3436; 
   margin: 0; 
}

.gva-split-color .split-arrow {
   color: #bbb;
   transition: transform 0.3s;
}

.gva-split-color .card-split:hover .split-arrow {
   transform: translateX(5px);
}

/* Couleurs par carte - Style 3 */
.gva-split-color .card-split-1 .split-icon-box { background: var(--nav-card-1-color); }
.gva-split-color .card-split-2 .split-icon-box { background: var(--nav-card-2-color); }
.gva-split-color .card-split-3 .split-icon-box { background: var(--nav-card-3-color); }
.gva-split-color .card-split-4 .split-icon-box { background: var(--nav-card-4-color); }
.gva-split-color .card-split-5 .split-icon-box { background: var(--nav-card-5-color); }
.gva-split-color .card-split-6 .split-icon-box { background: var(--nav-card-6-color); }
.gva-split-color .card-split-7 .split-icon-box { background: var(--nav-card-7-color); }
.gva-split-color .card-split-8 .split-icon-box { background: var(--nav-card-8-color); }

/* ============================================
   STYLE 4 : FLOATING ACTION
   ============================================ */
.gva-floating .card-action {
   background: white;
   padding: 25px 30px;
   border-radius: 50px;
   box-shadow: 0 5px 20px rgba(0,0,0,0.08);
   transition: 0.3s;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
   color: inherit;
   height: 100%;
}

.gva-floating .card-action:hover {
   box-shadow: 0 10px 30px rgba(0,0,0,0.15);
   transform: translateY(-3px);
}

.gva-floating .action-left {
   display: flex;
   align-items: center;
   gap: 15px;
}

.gva-floating .action-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   color: white;
}

.gva-floating .action-title {
   font-weight: 700;
   font-size: 1.1rem;
   color: #333;
}

.gva-floating .action-btn {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   transition: transform 0.3s;
}

.gva-floating .card-action:hover .action-btn {
   transform: rotate(45deg);
}

/* Couleurs par carte - Style 4 */
.gva-floating .card-action-1 .action-icon,
.gva-floating .card-action-1 .action-btn { background: var(--nav-card-1-color); }

.gva-floating .card-action-2 .action-icon,
.gva-floating .card-action-2 .action-btn { background: var(--nav-card-2-color); }

.gva-floating .card-action-3 .action-icon,
.gva-floating .card-action-3 .action-btn { background: var(--nav-card-3-color); }

.gva-floating .card-action-4 .action-icon,
.gva-floating .card-action-4 .action-btn { background: var(--nav-card-4-color); }

.gva-floating .card-action-5 .action-icon,
.gva-floating .card-action-5 .action-btn { background: var(--nav-card-5-color); }

.gva-floating .card-action-6 .action-icon,
.gva-floating .card-action-6 .action-btn { background: var(--nav-card-6-color); }

.gva-floating .card-action-7 .action-icon,
.gva-floating .card-action-7 .action-btn { background: var(--nav-card-7-color); }

.gva-floating .card-action-8 .action-icon,
.gva-floating .card-action-8 .action-btn { background: var(--nav-card-8-color); }

/* ============================================
   STYLE 5 : PROFESSIONAL BORDER
   ============================================ */
.gva-professional .pro-card {
   background: white;
   padding: 25px;
   border-radius: 12px;
   border: 2px solid #e0e0e0;
   transition: all 0.3s;
   display: flex;
   align-items: center;
   gap: 20px;
   text-decoration: none;
   color: inherit;
   height: 100%;
}

.gva-professional .pro-card:hover {
   border-color: #999;
   box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.gva-professional .pro-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 2px solid;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   transition: all 0.3s;
}

.gva-professional .pro-title {
   font-weight: 700;
   font-size: 1.1rem;
   color: #333;
   flex-grow: 1;
}

.gva-professional .pro-arrow {
   color: #ccc;
   transition: transform 0.3s;
}

.gva-professional .pro-card:hover .pro-arrow {
   transform: translateX(5px);
   color: inherit;
}

/* Couleurs par carte - Style 5 */
.gva-professional .pro-card-1 { border-left: 3px solid var(--nav-card-1-color); }
.gva-professional .pro-card-1 .pro-icon { 
   color: var(--nav-card-1-color); 
   border-color: var(--nav-card-1-color); 
}
.gva-professional .pro-card-1:hover .pro-icon { 
   background: var(--nav-card-1-color); 
   color: white; 
}

.gva-professional .pro-card-2 { border-left: 3px solid var(--nav-card-2-color); }
.gva-professional .pro-card-2 .pro-icon { 
   color: var(--nav-card-2-color); 
   border-color: var(--nav-card-2-color); 
}
.gva-professional .pro-card-2:hover .pro-icon { 
   background: var(--nav-card-2-color); 
   color: white; 
}

.gva-professional .pro-card-3 { border-left: 3px solid var(--nav-card-3-color); }
.gva-professional .pro-card-3 .pro-icon { 
   color: var(--nav-card-3-color); 
   border-color: var(--nav-card-3-color); 
}
.gva-professional .pro-card-3:hover .pro-icon { 
   background: var(--nav-card-3-color); 
   color: white; 
}

.gva-professional .pro-card-4 { border-left: 3px solid var(--nav-card-4-color); }
.gva-professional .pro-card-4 .pro-icon { 
   color: var(--nav-card-4-color); 
   border-color: var(--nav-card-4-color); 
}
.gva-professional .pro-card-4:hover .pro-icon { 
   background: var(--nav-card-4-color); 
   color: white; 
}

.gva-professional .pro-card-5 { border-left: 3px solid var(--nav-card-5-color); }
.gva-professional .pro-card-5 .pro-icon { 
   color: var(--nav-card-5-color); 
   border-color: var(--nav-card-5-color); 
}
.gva-professional .pro-card-5:hover .pro-icon { 
   background: var(--nav-card-5-color); 
   color: white; 
}

.gva-professional .pro-card-6 { border-left: 3px solid var(--nav-card-6-color); }
.gva-professional .pro-card-6 .pro-icon { 
   color: var(--nav-card-6-color); 
   border-color: var(--nav-card-6-color); 
}
.gva-professional .pro-card-6:hover .pro-icon { 
   background: var(--nav-card-6-color); 
   color: white; 
}

.gva-professional .pro-card-7 { border-left: 3px solid var(--nav-card-7-color); }
.gva-professional .pro-card-7 .pro-icon { 
   color: var(--nav-card-7-color); 
   border-color: var(--nav-card-7-color); 
}
.gva-professional .pro-card-7:hover .pro-icon { 
   background: var(--nav-card-7-color); 
   color: white; 
}

.gva-professional .pro-card-8 { border-left: 3px solid var(--nav-card-8-color); }
.gva-professional .pro-card-8 .pro-icon { 
   color: var(--nav-card-8-color); 
   border-color: var(--nav-card-8-color); 
}
.gva-professional .pro-card-8:hover .pro-icon { 
   background: var(--nav-card-8-color); 
   color: white; 
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
   .gva-nav-cards .nav-card {
      padding: 20px 25px;
   }
   
   .gva-nav-cards .nav-icon-box {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
   }
   
   .gva-floating .card-action {
      padding: 20px 25px;
   }
   
   .gva-professional .pro-card {
      padding: 20px;
   }
}