/**
 * GVA Values - CSS Externe
 * 
 * 3 Styles de valeurs d'entreprise
 * Dégradé Vert Lime -> Bleu Cyan
 * Compatible Bootstrap 5
 */

/* ============================================
   VARIABLES
   ============================================ */
:root {
   /* Le dégradé exact (Vert Lime -> Bleu Cyan) */
   --gradient-value: linear-gradient(135deg, #84cc16 0%, #06b6d4 100%);
   --c-text: #1e293b;
   --bg-page: #fff;
}

/* ============================================
   COMMUN
   ============================================ */
.gva-values-wrapper {
   padding: 50px 0;
   background: var(--bg-page);
}

/* ============================================
   STYLE 1 : LINEAR GRADIENT (Style Image)
   Icônes dégradées et texte majuscule
   ============================================ */
.linear-gradient-style .value-linear {
   text-align: center;
   padding: 20px 10px;
   transition: 0.3s;
}

.linear-gradient-style .icon-gradient {
   font-size: 4.5rem;
   margin-bottom: 20px;
   /* La magie du dégradé sur l'icône */
   background: var(--gradient-value);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block;
   transition: transform 0.3s;
}

/* ⭐ Image uploadée (Style 1) */
.linear-gradient-style .value-image {
   max-width: 80px;
   max-height: 80px;
   object-fit: contain;
   margin-bottom: 20px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   transition: transform 0.3s;
}

.linear-gradient-style .value-linear-title {
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--c-text);
   line-height: 1.4;
}

.linear-gradient-style .value-linear:hover .icon-gradient { 
   transform: translateY(-10px) scale(1.1); 
}

.linear-gradient-style .value-linear:hover .value-image { 
   transform: translateY(-10px) scale(1.1); 
}

/* ============================================
   STYLE 2 : MODERN CARDS (Cartes Blanches)
   ============================================ */
.modern-cards-style .value-card {
   background: white;
   border-radius: 16px;
   padding: 30px 20px;
   text-align: center;
   border: 1px solid #e2e8f0;
   box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
   transition: all 0.3s ease;
   height: 100%;
   min-height: 180px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.modern-cards-style .value-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
   border-bottom: 5px solid #84cc16;
}

.modern-cards-style .card-icon {
   width: 70px;
   height: 70px;
   margin: 0 auto 20px;
   background: #f0fdf4;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   color: #16a34a;
   transition: 0.3s;
}

.modern-cards-style .value-card:hover .card-icon { 
   background: var(--gradient-value);
   color: white;
}

/* ⭐ Image uploadée (Style 2) */
.modern-cards-style .card-image {
   max-width: 50px;
   max-height: 50px;
   object-fit: contain;
}

.modern-cards-style .card-title { 
   font-weight: 800;
   font-size: 0.9rem;
   text-transform: uppercase;
   color: #334155;
   line-height: 1.3;
}

/* ============================================
   STYLE 3 : BUBBLE HOVER (Bulles Colorées)
   ============================================ */
.bubble-hover-style .bubble-item {
   text-align: center;
   cursor: pointer;
   padding: 10px;
}

.bubble-hover-style .bubble-icon {
   width: 100px;
   height: 100px;
   margin: 0 auto 25px;
   background: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   color: #64748b;
   box-shadow: 0 0 0 2px #e2e8f0;
   transition: 0.4s;
}

.bubble-hover-style .bubble-item:hover .bubble-icon {
   /* Effet d'onde */
   box-shadow: 0 0 0 0 white, 0 0 0 5px rgba(132, 204, 22, 0.2);
   background: var(--gradient-value);
   color: white;
   transform: scale(1.05);
}

/* ⭐ Image uploadée (Style 3) */
.bubble-hover-style .bubble-image {
   max-width: 60px;
   max-height: 60px;
   object-fit: contain;
}

.bubble-hover-style .bubble-title {
   font-weight: 700;
   color: #475569;
   font-size: 0.95rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
   .linear-gradient-style .icon-gradient {
      font-size: 3.5rem;
   }
   
   .linear-gradient-style .value-image {
      max-width: 60px;
      max-height: 60px;
   }
   
   .linear-gradient-style .value-linear-title {
      font-size: 0.75rem;
   }
   
   .modern-cards-style .value-card {
      min-height: 160px;
      padding: 25px 15px;
   }
   
   .modern-cards-style .card-icon {
      width: 60px;
      height: 60px;
      font-size: 1.5rem;
   }
   
   .modern-cards-style .card-image {
      max-width: 40px;
      max-height: 40px;
   }
   
   .modern-cards-style .card-title {
      font-size: 0.85rem;
   }
   
   .bubble-hover-style .bubble-icon {
      width: 80px;
      height: 80px;
      font-size: 2rem;
      margin-bottom: 15px;
   }
   
   .bubble-hover-style .bubble-image {
      max-width: 50px;
      max-height: 50px;
   }
   
   .bubble-hover-style .bubble-title {
      font-size: 0.85rem;
   }
}

@media (max-width: 576px) {
   .gva-values-wrapper {
      padding: 30px 0;
   }
   
   .linear-gradient-style .icon-gradient {
      font-size: 3rem;
   }
   
   .linear-gradient-style .value-image {
      max-width: 50px;
      max-height: 50px;
   }
   
   .modern-cards-style .value-card {
      min-height: 140px;
   }
   
   .modern-cards-style .card-image {
      max-width: 35px;
      max-height: 35px;
   }
   
   .bubble-hover-style .bubble-icon {
      width: 70px;
      height: 70px;
      font-size: 1.8rem;
   }
   
   .bubble-hover-style .bubble-image {
      max-width: 40px;
      max-height: 40px;
   }
}