/**
 * GVA Features Block - CSS
 * 
 * Design moderne pour bloc de 5 features
 */

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
   --features-primary: #0f172a;       /* Dark Blue */
   --features-accent-blue: #0ea5e9;   /* Light Blue */
   --features-accent-green: #10b981;  /* Success Green */
   --features-bg-page: #f8fafc;
}

/* ============================================
   WRAPPER
   ============================================ */
.gva-features-block-wrapper {
   padding: 60px 0;
}

/* ============================================
   FEATURE CARD - Base
   ============================================ */
.feature-card {
   background: white;
   border-radius: 20px;
   padding: 40px 30px;
   border: 1px solid #f1f5f9;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
   height: 100%;
   text-align: center;
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
   border-color: var(--features-accent-blue);
}

.feature-card h5 {
   color: var(--features-primary);
}

/* ============================================
   FEATURE 1 : DRAPEAUX
   ============================================ */
.flag-container {
   display: flex;
   gap: 15px;
   margin-bottom: 20px;
   justify-content: center;
}

.flag-circle {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid #e2e8f0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   transition: 0.2s;
}

.flag-circle:hover {
   transform: scale(1.1);
   border-color: var(--features-accent-blue);
}

.flag-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ============================================
   FEATURE 2 : GÉOLOCALISATION
   ============================================ */
.geo-grid {
   display: flex;
   gap: 20px;
   justify-content: center;
}

.geo-item {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.geo-icon {
   font-size: 1.5rem;
   color: var(--features-accent-blue);
   background: #e0f2fe;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 8px;
}

.geo-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: #475569;
}

/* ============================================
   FEATURE 3 : VERSIONS (DEVICES)
   ============================================ */
.device-grid {
   display: flex;
   gap: 20px;
   justify-content: center;
}

.device-item {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.device-icon {
   font-size: 1.8rem;
   color: #64748b;
   margin-bottom: 8px;
   transition: 0.3s;
}

.device-item:hover .device-icon {
   color: var(--features-primary);
}

/* ============================================
   FEATURE 4 : DEVISES
   ============================================ */
.currency-box {
   background: #f0f9ff;
   color: var(--features-accent-blue);
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   margin: 0 auto 20px;
}

/* ============================================
   FEATURE 5 : E-SHOP LIST
   ============================================ */
.shop-list {
   list-style: none;
   padding: 0;
   text-align: left;
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
}

.shop-list li {
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   color: #334155;
   font-size: 0.95rem;
}

.shop-icon {
   color: var(--features-accent-green);
   margin-right: 12px;
   font-size: 1.1rem;
   background: #dcfce7;
   padding: 5px;
   border-radius: 6px;
   flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablette */
@media (max-width: 992px) {
   .feature-card {
      padding: 30px 20px;
   }
   
   .gva-features-block-wrapper {
      padding: 40px 0;
   }
}

/* Mobile */
@media (max-width: 768px) {
   .feature-card {
      padding: 25px 20px;
      margin-bottom: 20px;
   }
   
   .flag-container {
      gap: 10px;
   }
   
   .flag-circle {
      width: 45px;
      height: 45px;
   }
   
   .geo-grid,
   .device-grid {
      gap: 15px;
   }
   
   .currency-box {
      width: 70px;
      height: 70px;
      font-size: 1.5rem;
   }
   
   .shop-list {
      max-width: 100%;
   }
   
   .gva-features-block-wrapper {
      padding: 30px 0;
   }
}

@media (max-width: 576px) {
   .feature-card h5 {
      font-size: 1rem;
   }
   
   .geo-icon {
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
   }
   
   .device-icon {
      font-size: 1.5rem;
   }
   
   .geo-label {
      font-size: 0.75rem;
   }
   
   .shop-list li {
      font-size: 0.9rem;
   }
}