/*  Styles pour le menu de navigation  */

/* Header et conteneur de navigation */
.gellies-header {
  position: relative; /* Position normale au lieu de fixed */
  width: 100%;
  background-color: #2E496A;
  z-index: 3000; /* au-dessus de l'overlay pour que le drawer reste devant */
}

/* Suppression des styles liés aux effets de scroll */

.gellies-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 30px;
}

/* Logo */
.gellies-logo {
  flex: 0 0 auto;
}

.gellies-logo-img {
  width: 70px;
  height: auto;
  transition: transform 0.3s ease;
}

/* Logo plus grand sur PC */
@media (min-width: 992px) {
  .gellies-logo-img {
    width: 100px;
  }
}

.gellies-logo a:hover .gellies-logo-img {
  transform: scale(1.05);
}

/* Navigation Desktop */
.gellies-nav-desktop {
  flex: 1;
  display: flex;
  justify-content: center;
}

.gellies-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px;
}

.gellies-menu-item a {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; /* Poids de police augmenté à 800 */
  font-size: 16px;
  color: white;
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.gellies-menu-item a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #74bdee;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.gellies-menu-item a:hover {
  color: #55beff; /* Nouvelle couleur de survol (bleu plus vif) */
}

.gellies-menu-item a:hover::after,
.gellies-menu-item.gellies-active a::after {
  transform: scaleX(1);
}

.gellies-menu-item.gellies-active a {
  color: #74bdee;
}

/* Bouton d'achat */
.gellies-cta {
  flex: 0 0 auto;
}

.gellies-button-nav {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #74bdee 0%, #5ba3d9 100%);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; /* Poids de police augmenté à 800 */
  font-size: 16px; /* aligné sur la nav */
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-transform: uppercase; /* Texte en majuscules */
  letter-spacing: 0.5px; /* Espacement des lettres pour améliorer la lisibilité */
}

.gellies-button-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(116, 189, 238, 0.4);
}

/* Bouton Menu Mobile */
.gellies-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  width: 52px;
  height: 52px;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.gellies-mobile-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Ne pas transformer le burger en croix quand le menu est ouvert, et masquer proprement le bouton */
.gellies-mobile-toggle.active { opacity: 0; pointer-events: none; z-index: 0; }
.gellies-mobile-toggle.active .gellies-burger-icon::before,
.gellies-mobile-toggle.active .gellies-burger-icon::after { transform: none !important; }

/* Nouvel icône de menu plus élégant */
.gellies-burger-icon {
  display: block;
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

.gellies-burger-icon::before,
.gellies-burger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 28px;
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.gellies-burger-icon::before {
  top: 7px;
  width: 20px;
  right: 0;
  left: auto;
}

.gellies-burger-icon::after {
  bottom: 7px;
}

/* Styles pour le menu burger actif */
.gellies-mobile-toggle.active .gellies-burger-icon::before { transform: none; }
.gellies-mobile-toggle.active .gellies-burger-icon::after { transform: none; }

/* Navigation Mobile */
.gellies-nav-mobile {
  display: none;
  position: fixed;
  top: 20px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100vh - 32px);
  /* Fond blanc avec dégradé en overlay */
  background: #ffffff;
  background-image: linear-gradient(135deg, rgba(116, 189, 238, 0.60) 0%, rgba(157, 189, 255, 0.70) 100%);
  overflow-y: auto;
  transition: transform 0.4s ease, visibility 0.4s ease;
  transform: translateX(-120%); /* cache entièrement le drawer */
  visibility: hidden; /* réellement invisible quand fermé */
  z-index: 2001;
  border-radius: 24px;
  box-shadow: none; /* pas d'ombre quand fermé */
  pointer-events: none; /* non cliquable quand fermé */
}

.gellies-nav-mobile.active {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 0 8px 24px rgba(46, 73, 106, 0.15);
  pointer-events: auto;
}

/* Overlay derrière le menu mobile */
.gellies-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999; /* sous le drawer mobile (1000) */
  pointer-events: none; /* inactif quand masqué */
}

.gellies-nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* capter le clic pour fermer */
}

/* Header du menu mobile */
.gellies-mobile-header {
  padding: 20px 20px 6px 40px; /* même marge gauche que les liens */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px; /* plus d'espace entre la flèche et le titre */
}

.gellies-mobile-back {
  background: none;
  border: none;
  padding: 6px; /* zone cliquable plus grande */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.gellies-mobile-back:hover {
  opacity: 0.7;
}

.gellies-mobile-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900; /* Black weight */
  font-size: 35px;
  color: #2E496A;
  margin: 0;
}

/* Contenu du menu */
.gellies-mobile-content {
  padding: 15px 24px 28px 40px; /* encore plus bas et un peu plus à droite */
  display: flex;
  flex-direction: column;
  /* Hauteur auto à l'intérieur du drawer arrondi */
}

.gellies-mobile-menu {
  list-style: none;
  margin: 10px 0 0 0; /* décale le bloc de liens sous la flèche/titre */
  padding: 0;
  flex: 1;
}

.gellies-mobile-item {
  margin-bottom: 24px; /* Espacement augmenté pour correspondre à l'image */
}

.gellies-mobile-item a {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; /* Plus gras */
  font-size: 22px; /* Plus grand */
  color: #2E496A;
  text-decoration: none;
  padding: 8px 0;
  display: block;
  transition: color 0.3s ease;
}

.gellies-mobile-item a:hover {
  color: #2E496A; /* Pas de bleu au survol */
}

/* Supprimer l'effet bleu moche au clic/visited/focus */
.gellies-mobile-item a:active,
.gellies-mobile-item a:visited,
.gellies-mobile-item a:focus {
  color: #2E496A;
}

/* Supprimer la surbrillance bleue iOS/Android au tap */
.gellies-nav-mobile a { -webkit-tap-highlight-color: transparent; }

/* Indiquer clairement la page actuelle */
.gellies-mobile-item.gellies-active a,
.gellies-mobile-item.active a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Bouton Acheter Gellies */
.gellies-mobile-cta {
  margin: 24px 0 12px 0; /* Espacement ajusté pour coller au mockup */
  text-align: left; /* Aligné à gauche comme dans l'image */
}

.gellies-mobile-buy-btn {
  display: inline-block;
  background-color: #74BDEE;
  color: #FFFFFF;
  font-family: 'Nunito', sans-serif;
  font-weight: 900; /* Bold */
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 12px; /* Arrondi plus prononcé */
  transition: background-color 0.3s ease;
  box-shadow: 0 0px 10px rgb(0 0 0 / 15%);
  min-width: 160px; /* Largeur minimale pour correspondre à l'image */
  text-align: center;
}

.gellies-mobile-buy-btn:hover {
  background-color: #5ba3d9;
}

/* Sélecteur de langue */
.gellies-mobile-language {
  margin-top: auto;
  padding-bottom: 20px;
}

.gellies-language-selector {
  background-color: #ffffff;
  border: 1.5px solid #d7e3f2;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 700; /* texte en gras */
  color: #2E496A;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232E496A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 18px;
  padding-right: 48px;
  min-width: 96px;
  box-shadow: 0 2px 6px rgba(46, 73, 106, 0.12);
}

.gellies-language-selector:focus {
  outline: 2px solid #74BDEE;
  outline-offset: 2px;
}

/* Tentatives de style du dropdown (limité selon navigateur) */
.gellies-language-selector option {
  font-weight: 700;
}

/* Custom select (amélioration esthétique et cohérente) */
.gselect { position: relative; display: inline-block; }
.gselect .visually-hidden-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gselect-trigger {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 96px;
  background: #fff; color: #2E496A; border: 1.5px solid #d7e3f2; border-radius: 12px;
  padding: 12px 16px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px;
  box-shadow: 0 2px 6px rgba(46, 73, 106, 0.12); cursor: pointer;
}
.gselect-trigger .chev { width: 18px; height: 18px; display:inline-block; }
.gselect-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1.5px solid #d7e3f2; border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 24px rgba(46,73,106,0.15); list-style: none; margin: 0; display: none;
  max-height: 220px; overflow-y: auto; /* scrollable pour éviter de dépasser */
  z-index: 2000;
}
.gselect.open .gselect-list { display: block; }
.gselect.drop-up .gselect-list { top: auto; bottom: calc(100% + 8px); }
.gselect-option { padding: 10px 12px; border-radius: 8px; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 700; color: #2E496A; cursor: pointer; }
.gselect-option:hover, .gselect-option[aria-selected="true"] { background: #f0f6fd; }

/* Alignement CTA sur desktop */
.gellies-cta { display: flex; align-items: center; }

/* Sélecteur de langue petit dans le header (PC uniquement) */
.header-language-selector {
  background-color: rgba(151, 203, 255, 0.1);
  border: 1px solid rgba(151, 203, 255, 0.3);
  border-radius: 6px;
  color: #cdcdcd;
  font-size: 14px;
  padding: 6px 10px;
  margin-left: 15px;
  font-family: 'Nunito', sans-serif;
}
@media (max-width: 1200px) { .header-language-selector { display: none !important; } }
@media (max-width: 1200px) { .gellies-header .header-language-selector, .gellies-header .gselect.gselect--header { display: none !important; } }

/* Dropdown custom pour le sélecteur de langue du header (bouton identique, liste styled footer) */
.gselect.gselect--header { display: inline-block; margin-left: 15px; }
.gselect--header .gselect-trigger {
  background-color: rgba(151, 203, 255, 0.1);
  border: 1px solid rgba(151, 203, 255, 0.3);
  border-radius: 6px;
  color: #cdcdcd;
  font-size: 14px;
  padding: 6px 10px;
  min-width: auto;
  gap: 8px;
  box-shadow: none;
}
.gselect--header .gselect-trigger .chev { width: 14px; height: 14px; }
.gselect--header .gselect-list { padding: 6px; border: 1.5px solid #d7e3f2; border-radius: 10px; }
.gselect--header .gselect-option { font-size: 14px; color: #2E496A; padding: 8px 10px; }

/* Cacher le sélecteur header custom sur mobile & tablette (spécificité >= règle de base) */
@media (max-width: 1200px) {
  .gselect.gselect--header { display: none !important; }
}

/* Améliorations tablette pour le drawer mobile (768px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Centrer le header nav avec marges 10% comme le contenu du site */
  .gellies-nav-container {
    margin: 0 10%;
    max-width: none; /* enlever la limite pour utiliser les marges en % */
  }
  
  /* Logo plus grand sur tablette (+25%) */
  .gellies-logo-img {
    width: 100px; /* 70px + 25% */
  }
  
  .gellies-nav-mobile {
    top: 0;
    left: 0; /* collé à gauche */
    width: min(480px, 80vw); /* largeur fixe/fluide pour un vrai drawer latéral */
    height: 100vh; /* pleine hauteur */
    border-radius: 0 24px 24px 0; /* coins arrondis côté droit seulement */
  }
  .gellies-mobile-header { padding: 24px 28px 10px clamp(40px, 10%, 72px); }
  .gellies-mobile-content { padding: 26px 28px 34px clamp(40px, 10%, 72px); }
  .gellies-mobile-title { font-size: 60px; }
  .gellies-mobile-item a { font-size: 26px; }
  .gellies-mobile-item { margin-bottom: 28px; }
  .gellies-mobile-buy-btn { font-size: 24px; padding: 14px 22px; }
}

/* Ajustement pour le contenu principal */
body {
  padding-top: 0; /* Suppression du padding puisque le header n'est plus fixe */
}


@media (min-width: 992px) {
  .gh-section {
    padding-top: 100px; /* Encore plus d'espace sur PC */
  }
}

/* Media Queries */
@media (max-width: 992px) {
  .gellies-menu {
    gap: 20px;
  }
  
  .gellies-button-nav {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap; /* Éviter le retour à la ligne */
  }
}

@media (max-width: 1024px) {
  .gellies-nav-desktop,
  .gellies-cta {
    display: none;
  }
  
  .gellies-mobile-toggle {
    display: block;
  }
  
  .gellies-nav-mobile {
    display: block;
  }
  
  .gellies-nav-container {
    padding: 12px 20px;
  }
}

/*  Styles pour le header  */

      /* Styles de base pour la section header */
      .gh-section {
        background-color: #2E496A;
        min-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        position: relative;
        overflow: visible;
        pointer-events: auto;
        user-select: auto;
        z-index: 1;
      }

      .gh-left-content {
        flex: 1;
        max-width: 40%;
        padding-left: 10%;
        padding-right: 2%;
        z-index: 2;
        pointer-events: auto;
      }

      .gh-intro-badge {
        color: white;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: clamp(14px, 1vw, 18px);
        text-align: left;
        margin: 0 0 clamp(40px, 6vh, 60px) 0; /* Espace sous le badge */
        line-height: 1.3;
        display: inline-block;
        padding: clamp(5px, 0.8vw, 8px) clamp(10px, 1.2vw, 15px);
        border-radius: 30px;
        position: relative;
        cursor: default;
        z-index: 1;
        opacity: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        animation: gh-fadeIn 0.6s ease-out 0.2s forwards;
        white-space: nowrap; /* Empêcher le retour à la ligne */
        border: 3px solid #9DBDFF;
        background-color: rgba(157, 190, 255, 0.30);
      }

      .gh-main-title {
        color: white;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: clamp(32px, 4vw, 60px); /* Valeurs plus progressives */
        text-align: left;
        line-height: 1.1; /* Ligne plus serrée pour éviter les cassures */
        margin: 0 0 clamp(40px, 7vh, 70px) 0; /* Espace sous le titre */
        opacity: 0;
        animation: gh-fadeInScale 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
        cursor: default;
        transform: scale(0.95);
        word-break: normal; /* Éviter les coupures de mots */
        hyphens: none; /* Désactiver les césures */
        overflow: visible;
        max-height: none;
      }
      
      /* Styles progressifs pour les différentes résolutions */
      
      /* Écrans moyens (1200px-1600px) */
      @media (min-width: 1200px) and (max-width: 1600px) {
        .gh-main-title {
          font-size: clamp(36px, 3.2vw, 52px);
          line-height: 1.1;
        }
        
        .gh-intro-badge {
          white-space: nowrap;
          font-size: clamp(15px, 1.2vw, 18px);
          padding: 6px 15px;
        }
        
        .gh-feature-item {
          font-size: clamp(15px, 1.1vw, 18px);
          margin-bottom: 15px;
        }
        
        .gh-button {
          font-size: clamp(15px, 1vw, 18px);
        }
        
        .gh-button-wrapper {
          margin-bottom: clamp(35px, 6vh, 60px);
        }
      }
      
      /* Écrans larges (1600px-1920px) */
      @media (min-width: 1600px) and (max-width: 1920px) {
        .gh-main-title {
          font-size: clamp(42px, 3.5vw, 60px);
        }
        
        .gh-intro-badge {
          font-size: clamp(16px, 1.3vw, 20px);
          padding: 7px 18px;
        }
        
        .gh-feature-item {
          font-size: clamp(16px, 1.2vw, 22px);
          margin-bottom: 18px;
        }
        
        .gh-button {
          font-size: clamp(16px, 1.1vw, 22px);
          padding: clamp(12px, 0.8vw, 18px) clamp(20px, 1.5vw, 30px);
        }
        
        .gh-button-wrapper {
          margin-bottom: clamp(40px, 7vh, 80px);
        }
      }
      
      /* Très grands écrans (>1920px) */
      @media (min-width: 1920px) {
        .gh-main-title {
          font-size: clamp(48px, 3.2vw, 80px);
        }
        
        .gh-intro-badge {
          font-size: clamp(18px, 1.2vw, 26px);
          padding: 8px 20px;
          border-width: 3px;
        }
        
        .gh-feature-item {
          font-size: clamp(20px, 1.4vw, 30px);
          margin-bottom: 22px;
        }
        
        .gh-features {
          margin-bottom: clamp(45px, 5vh, 70px);
        }
        
        .gh-button {
          font-size: clamp(20px, 1.3vw, 28px);
          padding: clamp(15px, 1vw, 20px) clamp(25px, 2vw, 40px);
        }
        
        .gh-button-wrapper {
          margin-bottom: clamp(50px, 8vh, 100px);
        }
      }
      
      /* Écrans géants (>2400px) */
      @media (min-width: 2400px) {
        .gh-main-title {
          font-size: clamp(60px, 3.5vw, 90px);
        }
        
        .gh-intro-badge {
          font-size: clamp(22px, 1.4vw, 30px);
          padding: 10px 25px;
          border-width: 4px;
        }
        
        .gh-feature-item {
          font-size: clamp(24px, 1.6vw, 36px);
          margin-bottom: 28px;
        }
        
        .gh-button {
          font-size: clamp(24px, 1.5vw, 34px);
          padding: clamp(18px, 1.2vw, 25px) clamp(30px, 2.2vw, 50px);
        }
      }
      
      @keyframes gh-fadeInScale {
        from { 
          opacity: 0;
          transform: scale(0.95);
        }
        to { 
          opacity: 1;
          transform: scale(1);
        }
      }

      /* Forcer exactement 3 lignes pour le titre */
      .gh-title-line {
        display: block;
        position: relative;
        white-space: nowrap; /* Empêcher le retour à la ligne au sein d'une ligne */
        max-width: 100%;
        margin-bottom: 0.1em;
      }

      /* Styles spécifiques pour chaque ligne */
      .gh-title-line-1 {
        display: block;
      }
      
      .gh-title-line-2 {
        display: block;
      }
      
      /* Style spécifique pour la dernière ligne avec "en friandises" */
      .gh-title-line-3 {
        display: block; /* Force cette ligne à être sur sa propre ligne */
      }
      
      /* Ajustements spécifiques pour les écrans moyens (1366-1600px) */
      @media (min-width: 1366px) and (max-width: 1600px) {
        .gh-main-title {
          font-size: clamp(32px, 3.2vw, 48px); /* Taille optimisée pour éviter 4 lignes */
          line-height: 1.2;
        }
      }

      .gh-highlight {
        position: relative;
        display: inline-block;
      }

      .gh-highlight-text {
        position: relative;
        z-index: 1;
      }

      .gh-highlight-bg {
        position: absolute;
        bottom: 0;
        left: -0.1em;
        right: -0.1em;
        height: 0.4em;
        background-color: #74bdee;
        border-radius: 0.35em;
        z-index: 0;
        transform: scaleX(0);
        transform-origin: left;
        opacity: 0;
        animation: gh-underlineExpand 0.6s ease-out 0.8s forwards;
        pointer-events: none;
      }

      .gh-features {
        margin: clamp(45px, 8vh, 80px) 0; /* Augmenter significativement l'espace autour des features */
        opacity: 0;
        animation: gh-fadeIn 0.6s ease-out 1s forwards;
      }

      .gh-feature-item {
        color: white;
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: clamp(13px, 1.6vw, 18px);
        margin-bottom: clamp(20px, 3vh, 25px); /* Augmenter davantage l'espace entre les avantages */
        display: flex;
        align-items: flex-start;
        cursor: default;
        line-height: 1.3;
      }

      .gh-feature-item strong {
        font-weight: 700;
      
      }

      .gh-check {
        color: #74bdee;
        margin-right: 10px;
        font-weight: 700;
        font-size: 1.2em;
        position: relative;
        animation: gh-sparkle 3s ease-in-out infinite;
        flex-shrink: 0;
        width: 1.2em; /* Largeur fixe pour éviter le décalage */
        text-align: center; /* Centrage du texte */
        display: inline-block; /* Affichage en bloc inline */
        transform-origin: center; /* Assurer que l'animation scale se fait depuis le centre */
        line-height: 1; /* Hauteur de ligne fixe pour éviter les sauts */
        height: 1.2em; /* Hauteur fixe pour éviter les sauts */
        vertical-align: middle; /* Alignement vertical stable */
      }
      
      /* Animation de scintillement des icônes check */
      @keyframes gh-sparkle {
        0%, 100% { 
          text-shadow: 0 0 0 rgba(116, 189, 238, 0); 
          transform: scale(1) translateY(0);
        }
        50% { 
          text-shadow: 0 0 10px rgba(116, 189, 238, 0.7); 
          transform: scale(1.1) translateY(0); /* Maintenir la position Y stable */
        }
      }
      
      /* Décalage des animations pour chaque icône check */
      .gh-feature-item:nth-child(1) .gh-check {
        animation-delay: 0s;
      }
      
      .gh-feature-item:nth-child(2) .gh-check {
        animation-delay: 1s;
      }
      
      .gh-feature-item:nth-child(3) .gh-check {
        animation-delay: 2s;
      }

      .gh-nowrap {
        white-space: nowrap;
      }

      .gh-button-wrapper {
  margin-top: clamp(45px, 8vh, 80px); /* Ajouter un espace avant le bouton */
  margin-bottom: clamp(30px, 5vh, 60px); /* Espace sous le bouton */
  opacity: 0;
  animation: gh-fadeIn 0.6s ease-out 1s forwards;
  display: flex; /* Pile verticale */
  flex-direction: column; /* Bouton puis texte */
  align-items: flex-start; /* Aligner à gauche sur desktop/tablette */
  gap: 10px; /* Espacement constant entre le bouton et le texte */
  text-align: left; /* Texte ferré à gauche */
}

/* Groupe CTA qui s'ajuste à la largeur du bouton */
.gh-cta-group {
  display: inline-flex;
  flex-direction: column;
  width: -moz-max-content; /* Firefox */
  width: -webkit-max-content; /* Safari */
  width: max-content; /* Standard: largeur = contenu le plus large (le bouton) */
}

/* Centre le texte partenaire exactement sous le bouton (dans le groupe shrink-wrap) */
.gh-cta-group .gh-partner-link-wrapper {
  align-self: center;
  text-align: center;
  margin-top: 20px; /* Espace exact sous le bouton */
}
.gh-cta-group .gh-partner-text {
  text-align: center;
}

      .gh-button {
        display: inline-block;
        background: linear-gradient(135deg, #74bdee 0%, #5ba3d9 100%);
        color: white;
        font-family: 'Nunito', sans-serif;
        font-weight: 800; /* Police plus épaisse */
        font-size: clamp(14px, 1.6vw, 18px);
        text-decoration: none;
        padding: clamp(12px, 2vh, 15px) clamp(20px, 3vw, 30px);
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(116, 189, 238, 0.3);
        transform: translateY(0);
        cursor: pointer;
        animation: gh-button-scale 3s ease-in-out infinite;
        letter-spacing: 0.03em; /* Légère augmentation de l'espacement des lettres */
      }
      
      @keyframes gh-button-scale {
        0%, 100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.03);
        }
      }
      
      /* Animation de pulsation améliorée pour le bouton avec gradient */
      .gh-button::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(120deg, #74bdee 30%, #5ba3d9, #74bdee 70%);
        background-size: 300% 300%;
        border-radius: 10px;
        z-index: -1;
        opacity: 0;
        filter: blur(1px);
        animation: gh-gradient-rotate 3s ease infinite, gh-pulse-glow 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
      }
      
      @keyframes gh-gradient-rotate {
        0% {
          background-position: 0% 0%;
        }
        50% {
          background-position: 100% 100%;
        }
        100% {
          background-position: 0% 0%;
        }
      }
      
      @keyframes gh-pulse-glow {
        0%, 100% {
          opacity: 0.2;
          transform: scale(0.98);
        }
        50% {
          opacity: 0.8;
          transform: scale(1.05);
        }
      }
      
      /* Overlay pour l'effet de pulse */
      .gh-button::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, rgba(157,189,255,0.2) 0%, rgba(255,255,255,0) 70%);
        border-radius: 8px;
        opacity: 0;
        animation: gh-pulse-overlay 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
      }
      
      @keyframes gh-pulse-overlay {
        0%, 100% {
          opacity: 0;
          transform: scale(0.95);
        }
        50% {
          opacity: 1;
          transform: scale(1.05);
        }
      }

      .gh-button:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(116, 189, 238, 0.5);
        background: linear-gradient(135deg, #5ba3d9 0%, #74bdee 100%);
        animation: none;
      }
      
      .gh-button:hover::after,
      .gh-button:hover::before {
        animation-play-state: paused;
      }

      .gh-button:active {
        transform: translateY(-1px) scale(0.98);
      }

      /* Styles pour le lien partenaire vétérinaire */
      .gh-partner-link-wrapper {
        margin: 0; /* L'espacement est géré par .gh-button-wrapper via gap */
        opacity: 0;
        animation: gh-fadeIn 0.6s ease-out 1.2s forwards;
        text-align: left; /* Aligné à gauche sur desktop/tablette */
      }

      .gh-partner-text {
        color: white;
        font-size: clamp(15px, 1.2vw, 17px);
        font-weight: 400;
        margin: 0;
        line-height: 1.4;
        white-space: nowrap; /* Évite le retour à la ligne, reste sur une ligne */
        text-align: left; /* Aligné à gauche sur desktop/tablette */
      }

      .gh-partner-link {
        color: white;
        text-decoration: underline;
        font-weight: 400;
        transition: all 0.3s ease;
      }

      .gh-partner-link:hover {
        color: #74bdee;
        text-decoration: underline;
      }

      .gh-right-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Ajustement pour espacement */
        position: relative;
        max-width: 60%;
        height: 100%;
        overflow: visible;
        padding: 0;
        margin: 0;
        pointer-events: auto;
      }
      
      /* Ajustement pour les très grands écrans */
      @media (min-width: 2400px) {
        .gh-right-content {
          max-width: 65%; /* Plus d'espace pour l'image sur grands écrans */
        }
      }

      .gh-image-container {
        position: absolute;
        right: 0;
        width: 100%;
        height: 120%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        overflow: visible;
        pointer-events: none;
      }

      .gh-image {
        width: 200%;
        max-width: none;
        height: auto;
        object-fit: contain;
        z-index: 2;
        position: relative;
        margin: 0;
        padding: 0;
        pointer-events: none;
        opacity: 0;
        animation: gh-fadeIn 1s ease-out forwards;
      }
      
      /* Ajustement de l'image pour les très grands écrans */
      @media (min-width: 2400px) {
        .gh-image {
          width: 300%; /* Image beaucoup plus grande sur très grands écrans */
          max-width: none; /* S'assurer qu'aucune autre règle ne limite la taille */
        }
      }
      
      /* Image mobile (cachée par défaut) */
      .gh-image-mobile {
        display: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        opacity: 0;
        animation: gh-fadeIn 1s ease-out forwards;
      }
      
      /* Animation de fade in simple et efficace */
      @keyframes gh-fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      /* Animations spécifiques à la section header */
      @keyframes gh-underlineExpand {
        from {
          transform: scaleX(0);
          opacity: 0;
        }
        to {
          transform: scaleX(1);
          opacity: 1;
        }
      }
      
      /* Nouvelles classes pour contrôler les sauts de ligne spécifiquement */
      .gh-title-line-1, .gh-title-line-2 {
        display: inline-block;
      }

      @media (min-width: 1400px) {
        /* Pour les très grands écrans, forcer 3 lignes spécifiques */
        .gh-main-title {
          display: flex;
          flex-direction: column;
        }
        
        .gh-title-line-1, .gh-title-line-2, .gh-title-line-3 {
          display: block;
          white-space: normal;
        }
      }

      @media (min-width: 901px) and (max-width: 1399px) {
        /* Sur desktop standard, aussi forcer 3 lignes */
        .gh-main-title {
          display: flex;
          flex-direction: column;
        }
        
        .gh-title-line-1, .gh-title-line-2, .gh-title-line-3 {
          display: block;
          white-space: normal;
        }
      }
      
      /* Responsive design spécifique à la section header */
      @media (max-width: 1400px) {
        .gh-left-content {
          padding-left: 5%;
        }
      }
      
      @media (max-width: 1200px) {
        .gh-left-content {
          max-width: 45%;
        }
        
        .gh-image {
          width: 220%;
        }
      }
      
      @media (max-width: 1024px) {
        .gh-left-content {
          max-width: 50%;
          padding-left: 4%;
        }
        
        .gh-image {
          width: 240%;
        }
        
        .gh-main-title {
          font-size: clamp(24px, 3.8vw, 46px);
        }
        
        .gh-feature-item {
          font-size: clamp(12px, 1.5vw, 16px);
        }
      }

      @media (max-width: 900px) and (min-width: 769px) {
        /* Sur tablette, on optimise pour 3 lignes */
        .gh-main-title {
          font-size: clamp(24px, 3.8vw, 46px);
          line-height: 1.2;
          margin-bottom: clamp(35px, 6vh, 50px);
        }
        
        .gh-features {
          margin: clamp(35px, 6vh, 50px) 0;
        }
        
        .gh-intro-badge {
          margin-bottom: clamp(30px, 5vh, 45px);
        }
        
        .gh-button-wrapper {
          margin-top: clamp(35px, 6vh, 50px);
        }
      }
      
      /* Masquer l'image mobile par défaut (desktop/tablette) */
      .gh-mobile-inline-image,
      .gh-image-mobile {
        display: none;
      }
      
      /* Styles spécifiques pour mobile */
      @media (max-width: 768px) {
        /* Sur mobile, on réorganise complètement le header */
        .gh-section {
          flex-direction: column;
          padding: 40px 28px 50px; /* Réduction du padding bottom pour rapprocher l'image du bouton */
          min-height: auto;
          overflow: visible;
          position: relative;
        }
      
        
        .gh-left-content {
          max-width: 100%;
          padding-left: 0;
          padding-right: 0;
          text-align: left; /* Aligner le texte à gauche sur mobile */
          z-index: 2;
        }
        
        .gh-intro-badge {
          text-align: left;
          margin: 0 0 16px; /* Moins d'espace sous le badge sur mobile */
          font-size: clamp(12px, 3.2vw, 14px); /* Badge plus petit sur mobile */
          display: inline-block;
          padding: 6px 12px; /* Réduction du padding pour prendre moins de place */
          border: 2px solid #74bdee; /* Bordure mobile */
          background-color: #74bdee66; /* Fond mobile */
        }
        
        .gh-main-title {
          font-size: clamp(38px, 10vw, 48px); /* Titre beaucoup plus grand, similaire à titlesection2 */
          text-align: left;
          margin-bottom: 20px; /* Réduction de l'espace entre le titre et l'image */
          line-height: 1.1; /* Ligne plus serrée pour éviter les cassures */
          max-width: 100%; /* Utiliser toute la largeur disponible */
          word-break: normal; /* Éviter les cassures de mots */
          hyphens: none; /* Désactiver les césures */
          overflow-wrap: normal;
          font-weight: 900; /* Très épais comme titlesection2 */
        }
        
        /* Forcer l'affichage sur 3 lignes maximum pour le titre mobile */
        .gh-title-line {
          display: block; /* Chaque ligne sur un bloc séparé */
          margin-bottom: 0.1em;
          white-space: normal;
        }
        
        /* Styles spécifiques pour chaque ligne */
        .gh-title-line-1 {
          margin-bottom: 0.05em;
        }
        
        .gh-title-line-2 {
          margin-bottom: 0.05em;
        }
        
        .gh-title-line-3 {
          display: inline-block;
        }
        
        .gh-features {
          margin: 0 0 40px; /* Réduction de l'espace après les features */
          text-align: left;
          width: 100%; 
          padding-top: 8px; /* Moins d'espace au-dessus des features pour rapprocher de l'image */
        }
        
        .gh-feature-item {
          justify-content: flex-start;
          text-align: left;
          margin-left: 0;
          margin-right: 0;
          max-width: 100%;
          margin-bottom: 24px; /* Augmentation de l'espacement entre les avantages */
          font-size: clamp(16px, 4.2vw, 20px); /* Avantages plus grands */
          padding-left: 8px; /* Léger padding pour aligner avec le checkmark */
          line-height: 1.4;
          display: flex;
          flex-wrap: nowrap;
          align-items: flex-start;
        }
        
        /* Style unifié pour tous les avantages sur mobile */
        .gh-feature-text {
          flex: 1;
          display: inline-block;
          white-space: normal;
        }
        
        .gh-check {
          color: #74bdee;
          margin-right: 12px; /* Plus d'espace après le checkmark */
          font-weight: 700;
          font-size: 1.4em; /* Checkmark plus grand */
          position: relative;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px; /* Taille fixe pour alignement */
          height: 24px;
          margin-left: -8px; /* Ajustement de l'alignement */
        }
        
        .gh-button-wrapper {
          margin-top: 80px; /* Espacement avant le bouton */
          text-align: center; /* Centrer le bouton */
          width: 100%;
          margin-bottom: 20px; /* Réduire l'espace entre le bouton et l'image */
          display: flex; /* Assure le centrage et l'espacement constant sous le bouton */
          flex-direction: column; /* Bouton au-dessus, texte en dessous */
          align-items: center; /* Centrer horizontalement */
          gap: 10px; /* Distance constante entre le bouton et le texte */
        }
        
        .gh-button {
          font-size: clamp(16px, 4.2vw, 18px); /* Bouton plus grand */
          padding: 18px 32px; /* Hauteur minimale de 54px avec le texte */
          display: inline-block;
          min-height: 54px; /* Hauteur minimale pour zone tactile */
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus visible */
          border-radius: 10px; /* Coins plus arrondis */
          min-width: 240px; /* Largeur minimale pour meilleure visibilité */
          text-align: center;
          font-weight: 900; /* Police très épaisse */
          letter-spacing: 0.05em; /* Plus d'espacement entre les lettres */
        }
        
        /* Styles mobiles pour le lien partenaire vétérinaire */
        .gh-partner-link-wrapper {
          margin: 0; /* Conserver un espacement constant sous le bouton */
          text-align: center;
        }

        .gh-partner-text {
          font-size: clamp(12px, 3.5vw, 14px);
          color: white;
          font-weight: 400;
          margin: 0;
          line-height: 1.4;
        }

        .gh-partner-link {
          color: white;
          text-decoration: underline;
          font-weight: 400;
        }

        .gh-partner-link:hover {
          color: #74bdee;
        }
        
        /* Repositionner l'image pour la version mobile */
        .gh-right-content {
          max-width: 100%;
          width: 100%;
          height: auto;
          position: relative;
          margin-top: 0; /* Plus nécessaire avec la nouvelle position de l'image */
          margin-bottom: 0; /* Supprime le décalage négatif lié à l'ancien placement */
          z-index: 1;
          display: flex;
          justify-content: center; /* Centrer l'image */
          align-items: center;
        }
        
        .gh-image-container {
          position: relative;
          width: 100%; /* Image plus grande */
          height: auto;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: visible;
        }
        
        /* Wrapper du visuel mobile inséré entre le titre et les features */
        .gh-mobile-inline-image {
          display: flex;
          justify-content: center;
          margin: 8px 0 10px; /* Légère respiration autour de l'image */
         
        }
        
        .gh-image {
          display: none; /* Cacher l'image desktop */
        }
        
        /* Afficher l'image mobile */
        .gh-image-mobile {
          display: block;
          width: 140%; /* Image ~150% sur mobile */
          max-width: 140%;
          height: auto;
          transform: translateY(-8px); /* Légèrement remontée */
          object-fit: contain;
          margin-bottom: 8px; /* Petit espacement positif sous l'image */
          pointer-events: none; /* Évite toute interaction involontaire */
        }
      }
      
      /* Optimisation pour très petits écrans */
      @media (max-width: 480px) {
        .gh-section {
          padding: 30px 24px 40px; /* Marges légèrement réduites mais toujours confortables */
        }
        
        .gh-main-title {
          font-size: clamp(32px, 9vw, 40px); /* Ajuster la taille du titre pour les petits écrans */
          margin-bottom: 20px; /* Rapproche le titre de l'image sur très petits écrans */
          width: 100%; /* Utiliser toute la largeur disponible */
        }
        
        /* Forcer l'affichage sur 3 lignes maximum pour les petits écrans */
        .gh-title-line {
          display: block;
        }
        
        .gh-feature-item {
          font-size: clamp(15px, 4vw, 18px);
          margin-bottom: 20px;
        }
        
        .gh-intro-badge {
          font-size: clamp(11px, 3.3vw, 13px); /* Encore plus compact sur <480px */
          margin-bottom: 14px; /* Moins d'espace sous le badge */
          padding: 5px 10px; /* Réduction supplémentaire du padding */
          border: 2px solid #74bdee; /* Bordure mobile */
          background-color: #74bdee66; /* Fond mobile */
        }
        
        .gh-button {
          font-size: clamp(15px, 4vw, 17px);
          padding: 16px 28px;
          min-width: 220px;
        }
        
        .gh-right-content {
          margin-bottom: 0; /* Plus de décalage négatif */
        }
        
        .gh-image-mobile {
          width: 140%;
          max-width: 140%;
          margin-bottom: 10px; /* Léger espacement sous l'image */
          transform: translateY(-8px);
          pointer-events: none;
        }
      }
      
      /* Optimisation pour iPhone SE et très petits écrans */
      @media (max-width: 375px) {
        .gh-section {
          padding: 25px 20px 60px;
        }
        
        .gh-main-title {
          font-size: clamp(32px, 8.5vw, 36px); /* Taille augmentée */
          width: 100%;
          line-height: 1.15;
        }
        
        /* Ajuster l'espacement des lignes du titre */
        .gh-title-line {
          margin-bottom: 0.15em;
        }
        
        .gh-title-line-1, .gh-title-line-2 {
          margin-bottom: 0.1em;
        }
        
        .gh-features {
          width: 95%;
          margin: 0 0 45px; /* Réduction de l'espace après les features (était 60px) */
          padding-top: 10px; /* Réduction du padding-top (était 20px) */
        }
        
        .gh-feature-item {
          margin-bottom: 18px; /* Réduction de l'espace entre les avantages (était 24px) */
        }
        
        .gh-intro-badge {
          font-size: clamp(12px, 3.5vw, 14px);
          margin-bottom: 20px;
        }
        
        .gh-button {
          min-width: 160px;
          width: 90%;
        }
      }
      
      /* Optimisation spécifique pour les très petits écrans (moins de 320px) */
      @media (max-width: 320px) {
        .gh-main-title {
          font-size: clamp(28px, 8vw, 32px);
          margin-bottom: 35px; /* Réduction supplémentaire pour les très petits écrans */
        }
        
        .gh-features {
          margin: 0 0 40px; /* Réduction supplémentaire pour les très petits écrans */
          padding-top: 5px; /* Réduction supplémentaire du padding-top */
        }
        
        .gh-feature-item {
          font-size: clamp(14px, 4vw, 16px);
          margin-bottom: 16px; /* Réduction supplémentaire de l'espace entre les avantages */
        }
      }
      
      /* Ajustements pour assurer la cohérence sur les écrans moyens */
      @media (min-width: 376px) and (max-width: 480px) {
        .gh-main-title {
          margin-bottom: 20px; /* Ajustement pour les écrans moyens */
        }
        
        .gh-features {
          margin: 0 0 55px; /* Ajustement pour les écrans moyens */
          padding-top: 20px; /* Ajustement du padding-top */
        }
        
        .gh-feature-item {
          margin-bottom: 20px; /* Ajustement de l'espace entre les avantages */
        }
      }
      
      /* Version landscape pour mobile */
      @media (max-width: 900px) and (max-height: 450px) and (orientation: landscape) {
        .gh-section {
          flex-direction: row; /* Disposition horizontale en mode paysage */
          padding: 30px 24px;
          min-height: auto;
        }
        
        .gh-left-content {
          max-width: 60%;
          margin-bottom: 0;
          padding-right: 20px;
        }
        
        .gh-right-content {
          max-width: 40%;
          margin-top: 0;
          margin-bottom: -40px;
        }
        
        .gh-main-title {
          font-size: clamp(20px, 4vw, 24px);
          margin-bottom: 16px;
        }
        
        .gh-intro-badge {
          margin-bottom: 16px;
        }
        
        .gh-features {
          margin: 0 0 20px;
        }
        
        .gh-feature-item {
          margin-bottom: 12px;
          font-size: clamp(12px, 2vw, 14px);
        }
        
        .gh-button-wrapper {
          margin-top: 20px;
          text-align: left;
        }
      }

      /* Ajout de nouvelles règles pour corriger les marges du header sur iPad/tablette */
      @media (min-width: 769px) and (max-width: 1100px) {
        /* Correction des marges de la section header sur iPad/tablette */
        .gh-section {
          min-height: 60vh; /* Réduction de la hauteur minimale (était 90vh) */
          padding-top: 60px; /* Réduction du padding en haut */
          padding-bottom: 30px; /* Réduction du padding en bas */
        }
        
        /* Ajustement de l'espacement vertical des éléments internes */
        .gh-left-content {
          padding-left: 6%; /* Reduction du padding sur les côtés */
          max-width: 45%; /* Légère augmentation pour équilibrer avec l'image plus grande */
        }
        
        .gh-intro-badge {
          margin-bottom: clamp(30px, 4vh, 40px); /* Réduction de l'espace sous le badge */
          font-size: clamp(14px, 1.6vw, 18px); /* CORRECTION: Réduction de la taille du badge pour éviter l'affichage sur 2 lignes */
          padding: clamp(6px, 0.8vw, 9px) clamp(10px, 1.2vw, 15px); /* Padding légèrement ajusté */
          white-space: nowrap; /* Forcer l'affichage sur une seule ligne */
          width: auto; /* S'assurer que la largeur s'adapte au contenu */
        }
        
        .gh-main-title {
          margin-bottom: clamp(30px, 5vh, 50px); /* Réduction de l'espace sous le titre */
          font-size: clamp(40px, 4.8vw, 54px); /* CORRECTION: Légère réduction de la taille du titre (était 46px, 5.5vw, 64px) */
          line-height: 1.15; /* Ajustement de l'interligne pour la nouvelle taille */
        }
        
        /* Amélioration de l'affichage du titre sur exactement 3 lignes pour iPad */
        .gh-title-line {
          display: block !important;
          margin-bottom: 0.1em;
          white-space: normal;
        }
        
        .gh-title-line-1, .gh-title-line-2, .gh-title-line-3 {
          display: block !important;
          white-space: normal;
        }
        
        .gh-features {
          margin: clamp(25px, 5vh, 40px) 0; /* Réduction des espaces avant et après les features */
        }
        
        /* Correction du bug d'affichage du premier avantage */
        .gh-feature-item {
          font-size: clamp(16px, 1.9vw, 20px); /* Légère réduction de la taille (était 18px, 2.2vw, 22px) */
          margin-bottom: 16px; /* Espacement entre les avantages */
          display: flex; /* Utiliser flexbox pour un meilleur alignement */
          align-items: flex-start; /* Aligner les éléments au début */
          flex-wrap: nowrap; /* Empêcher le retour à la ligne */
          width: 100%; /* Assurer que l'élément prend toute la largeur */
        }
        
        /* Wrapper pour le texte du feature pour empêcher le saut du mot comprimés */
        .gh-feature-text {
          flex: 1;
          width: 100%;
          white-space: normal;
          line-height: 1.3;
        }
        
        /* S'assurer que le texte des avantages ne se brise pas de façon inattendue */
        .gh-feature-item strong {
          
          white-space: nowrap; /* Éviter que les mots en gras se brisent */
        }
        
        .gh-check {
          font-size: 1.25em; /* Taille des checkmarks (légèrement réduite) */
          flex-shrink: 0; /* Empêche le checkmark de rétrécir */
          margin-right: 10px; /* Espacement consistant */
        }
        
        .gh-button {
          font-size: clamp(16px, 1.8vw, 19px); /* Légère réduction de la taille du bouton */
          padding: clamp(14px, 2.2vh, 18px) clamp(25px, 3.5vw, 35px); /* Padding inchangé */
        }
        
        /* Optimisation de l'image - augmentation de 30% */
        .gh-image {
          width: 234%; /* Ajustement de la taille de l'image (180% + 30% = 234%) */
          margin-top: -90px;
        }
        
        /* Ajustement pour le côté droit qui contient l'image */
        .gh-right-content {
          max-width: 65%; /* Augmentation de la largeur max (était implicitement 60%) */
        }
      }

      /* Correction du formulaire de précommande sur iPad/tablette */
      @media (min-width: 768px) and (max-width: 1024px) {
        /* Correction du problème d'alignement dû au texte "facultatif" */
        .gellies-form-optional {
          font-size: 10px; /* Taille beaucoup plus réduite */
          opacity: 0.8; /* Légèrement transparent */
          display: inline-block; /* Pour s'assurer qu'il reste sur la même ligne */
          margin-left: 5px; /* Petit espacement après le texte principal */
          vertical-align: middle; /* Alignement vertical */
          white-space: nowrap; /* Empêche le retour à la ligne */
          letter-spacing: -0.5px; /* Réduire l'espacement entre les lettres */
        }
        
        /* Adaptation du champ lui-même */
        #gp_compagnon {
          width: 100%; /* S'assurer qu'il prend toute la largeur disponible */
        }
        
        /* On s'assure que le label ne passe pas à la ligne */
        .gp-form-group label {
          white-space: nowrap; /* Empêche le retour à la ligne du label */
          display: flex; /* Utilise flexbox pour un meilleur contrôle */
          align-items: center; /* Centre verticalement */
          flex-wrap: nowrap; /* Empêche l'enveloppement */
        }
        
        /* Style pour le texte du label */
        .label-text {
          margin-right: 2px; /* Petit espacement avant le texte optionnel */
        }
      }

      /* Styles généraux pour le formulaire - toutes tailles d'écran */
      .label-text {
        display: inline; /* S'assure que c'est inline par défaut */
      }

      /* Fix supplémentaire pour Safari sur iPad */
      @supports (-webkit-touch-callout: none) {
        @media (min-width: 768px) and (max-width: 1024px) {
          .gp-form-group {
            width: 100%;
          }
          
          .gellies-form-optional {
            font-size: 9px; /* Encore plus petit sur Safari */
          }
        }
      }









      
/* Styles pour la section titre */
.gellies-title-highlight {
  position: relative;
  display: inline-block;
}

.gellies-title-text {
  position: relative; 
  z-index: 1;
}

.gellies-title-bg {
  position: absolute;
  bottom: 0;
  left: -0.1em;
  right: -0.1em;
  height: 0.4em;
  background-color: #9dbdff;
  border-radius: 0.35em;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: highlightExpand 1s ease-out 1s forwards;
  animation-timeline: view();
  animation-range-start: entry 0%;
  animation-range-end: entry 80%;
}

.gellies-title-bg-white {
  background-color: #ffffff;
}

.gellies-title-bg-blue {
  background-color: #74bdee;
}

.gellies-title-bg-lightblue {
  background-color: #9dbdff;
}

/* Styles pour les badges */
.gellies-badge {
  font-size: 30px; 
  background-color: #74bdee; 
  border-radius: 50px; 
  padding: 10px;
}

/* Styles pour les textes */
.gellies-text-normal {
  font-size: 20px;
  line-height: 1.6;
}

.gellies-text-bold {
  font-weight: bold;
  color: #2E496A;
  font-family: 'Nunito', sans-serif;
  margin: 0 auto;
}

.gellies-text-center {
  text-align: center;
}

.gellies-text-right {
  text-align: right;
}

.gellies-text-white {
  color: white;
}

/* Styles pour les marges et padding */
.gellies-no-padding-top {
  padding-top: 0px;
}

.gellies-mt-20 {
  margin-top: 20px;
}

.gellies-mt-30 {
  margin-top: 30px;
}

.gellies-mt-40 {
  margin-top: 40px;
}

.gellies-mb-20 {
  margin-bottom: 20px;
}

.gellies-mt-preorder-title {
  color: white;
  font-family: 'Nunito', sans-serif;
            font-weight: 900;
            text-align: left;
            line-height: 1.2;
            font-size: var(--font-size-hero);
            max-width: 1100px;
            margin-bottom: 60px;
            opacity: 0;
            animation: fadeInUp 0.8s ease-out 0.4s forwards;
            animation-timeline: view();
            animation-range-start: entry 0%;
            animation-range-end: entry 50%;
}

.gellies-pt-80 {
  padding-top: 80px;
}

/* Styles pour les formulaires */
.gellies-input {
  border-radius: 15px;
  font-size: 16px;
}

.gellies-form-optional {
  font-size: 15px;
  font-style: italic;
}

.gellies-form-note {
  font-size: 14px;
  color: #9DBDFF;
}

/* Styles pour les sections */
.gellies-section-blue {
  background-color: #2E496A;
}

.gellies-section-light-blue {
  background-color: #9dbdff;
}

/* Styles pour les animations */
.gellies-animate-pop-in {
  animation: popIn 0.5s ease forwards;
  animation-timeline: view();
  animation-range-start: entry 0%;
  animation-range-end: entry 50%;
}

/* Styles pour les titres spécifiques */
.gellies-welcome-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 5vw, 35px);
  color: #2E496A;
  margin: 0;
  padding-bottom: 25px;
}

.gellies-large-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(33px, 5vw, 72px);
  color: #2E496A;
  margin: 0;
  max-width: 1100px;
}

.gellies-mobile-text {
  line-height: 1.0;
}

/* Style pour signature */
.gellies-signature {
  margin-top: 30px;
  font-style: italic;
  text-align: right;
  font-size: 20px;
}

/* Style pour le groupe */
.gellies-group-text {
  font-size: 20px;
}

/* Style pour texte en gras */
.gellies-font-bold {
  font-weight: 900;
}

/* Style pour conteneur d'image */
.gellies-image-display-block {
  display: block;
} 

 /* Variables CSS centralisées */
 :root {
    --primary-blue: #74BDEE;
    --secondary-blue: #2E496A;
    --spacing-unit: 1rem;
    --border-radius: 0.5rem;
    --transition-standard: all 0.3s ease;
    
    /* Tailles de police standardisées */
    --font-size-hero: clamp(48px, 5vw, 72px);
    --font-size-title: clamp(28px, 4vw, 45px);
    --font-size-subtitle: clamp(22px, 3vw, 35px);
    --font-size-body: clamp(16px, 2vw, 20px);
    --font-size-small: clamp(14px, 1.5vw, 18px);
    --font-size-tiny: clamp(12px, 1.2vw, 15px);
    
    /* Espacements standardisés */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    --spacing-section: clamp(60px, 8vw, 120px);
    --spacing-element: clamp(24px, 4vw, 48px);
    --spacing-section-mobile: 80px;
    --spacing-element-mobile: 40px;
    
    /* Animations standardisées */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-delay-base: 0.1s;
}

/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--secondary-blue);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Système de grille cohérent */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

/* Styles de base pour les inputs */
.gp-input {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.9);
    color: var(--secondary-blue);
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition-standard);
    border-radius: var(--border-radius);
}

.gp-input::placeholder {
    color: rgba(46, 73, 106, 0.6);
    font-weight: 400;
}

/* Accessibilité améliorée pour les formulaires */
.gp-input:focus {
    outline: 2px solid var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(116, 189, 238, 0.3);
}

/* Style pour les labels de formulaire */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--secondary-blue);
}

/* Styles pour les titres */
.title-hero-standardized {
    font-size: var(--font-size-hero);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 60px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    animation-timeline: view();
    animation-range-start: entry 0%;
    animation-range-end: entry 50%;
}

@media (max-width: 600px) {
    .title-hero-standardized {
        margin-bottom: 40px;
    }
}

.subtitle-standardized {
    font-size: var(--font-size-title);
    font-weight: 800;
    margin-bottom: var(--spacing-element);
}

@media (max-width: 768px) {
    .subtitle-standardized {
        margin-bottom: var(--spacing-element-mobile);
    }
}

.body-text-standardized {
    font-size: var(--font-size-body);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .body-text-standardized {
        font-size: var(--font-size-body-mobile);
    }
}

.button-standardized {
    font-size: 18px;
    font-weight: 700;
    padding: 15px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button-standardized:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .button-standardized {
        font-size: 16px;
        padding: 12px 24px;
    }
}

/* Classes existantes mises à jour pour utiliser les variables */
.titlesection2-secondary {
    color: var(--secondary-blue);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    text-align: left;
    line-height: 1.2;
    font-size: var(--font-size-hero);
    max-width: 1100px;
    margin-bottom: 60px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    animation-timeline: view();
    animation-range-start: entry 0%;
    animation-range-end: entry 50%;
}

@media (max-width: 600px) {
    .titlesection2-secondary {
        margin-bottom: 40px;
    }
}

/* Animations centralisées */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utilitaires pour l'accessibilité */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.section-container {
padding-top: var(--spacing-section);
padding-bottom: var(--spacing-section);
padding-left: 10%;
padding-right: 10%;
}

@media (max-width: 768px) {
.section-container {
padding-top: var(--spacing-section-mobile);
padding-bottom: var(--spacing-section-mobile);
padding-left: 20px;
padding-right: 20px;
}
}
/* Container des 4 logos */
.soutiens {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 20px;
}

.soutiens-container {
  display: flex;
  flex-wrap: nowrap; /* Empêche le passage en colonne */
  justify-content: space-evenly; /* Espace les logos de manière égale avec plus d'espace */
  align-items: center;
  width: 100%;
  max-width: 1000px; /* Largeur maximale augmentée pour le conteneur */
}

/* Style pour les liens contenant les images */
.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px; /* Hauteur fixe standardisée réduite */
  width: 18%; /* Largeur fixe pour chaque logo réduite */
  margin: 0 15px; /* Marge entre les logos augmentée */
}

/* Style des logos */
.support-logo {
  width: 100%; /* Utilise toute la largeur disponible */
  height: auto;
  max-height: 35px; /* Hauteur maximale standardisée réduite */
  object-fit: contain; /* Garde les proportions */
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(0%) hue-rotate(153deg) brightness(107%) contrast(93%);
  /* Filtre pour obtenir la couleur #cdcdcd */
}

.logo-link:hover .support-logo {
  transform: scale(1.1);
  filter: none; /* Rétablit les couleurs originales au survol */
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
  .soutiens-container {
    justify-content: space-evenly;
    max-width: 100%;
  }
  
  .logo-link {
    width: 20%;
    height: 45px;
    margin: 0 8px;
  }
  
  .support-logo {
    max-height: 30px;
  }
}

/* Ajustement pour très petits écrans */
@media (max-width: 480px) {
  .soutiens-container {
    justify-content: space-between;
  }
  
  .logo-link {
    width: 22%;
    margin: 0 4px;
  }
}

.titlesection2 {
color: #2E496A;
font-family: 'Nunito', sans-serif;
font-weight: 900;
text-align: left;
line-height: 1.2;
font-size: var(--font-size-hero);
max-width: 1100px;
margin-bottom: var(--spacing-element); /* Espace harmonisé */
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.2s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

@media (max-width: 600px) {
.titlesection2 {
margin-bottom: var(--spacing-element-mobile); /* Espace mobile harmonisé */
}
}

/* Animation universelle d'apparition - optimisée */
@keyframes universalFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation du surlignage */
@keyframes highlightExpand {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}

/* Conteneur principal avec espaces harmonisés */
.gll-container-a1b2c3 {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 80px 0; /* Espace harmonisé après le texte */
padding: 0;
opacity: 0;
animation: fadeInLeft 0.8s ease-out 0.5s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

/* Animation du conteneur texte */
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* Bloc texte avec spacing cohérent */
.gll-text-a1b2c3 p {
color: #2E496A;
font-family: 'Nunito', sans-serif;
text-align: left;
padding-top: 0; /* Suppression du padding-top incohérent */
padding-bottom: 0; /* Suppression du padding-bottom incohérent */
margin: 0; /* Pas de margin par défaut */
line-height: 1.6;
font-size: 20px;
}

/* Mise en page sur grand écran */
@media (min-width: 768px) {
.gll-container-a1b2c3 {
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 100px; /* Espace desktop harmonisé */
}

.gll-text-a1b2c3 {
flex: 1;
margin-right: 20px;
}
}

@media (max-width: 767px) {
.gll-container-a1b2c3 {
margin-bottom: 60px; /* Espace mobile harmonisé */
}
}
.gellies-image-section {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 120px; /* Espace harmonisé après l'image */
opacity: 0;
animation: fadeInScale 0.8s ease-out 0.8s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

/* Animation de l'image */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}

.gellies-custom-image {
border-radius: 30px;
width: 70%;
max-width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.4s ease, filter 0.4s ease;
transform-origin: center center;
}

.gellies-custom-image:hover {
transform: scale(1.05);
filter: brightness(1.05);
z-index: 1;
}

@media screen and (max-width: 768px) {
.gellies-image-section {
margin-bottom: 80px; /* Espace mobile harmonisé */
}

.gellies-custom-image {
width: 90%;
border-radius: 15px;
}
}

@media screen and (max-width: 480px) {
.gellies-image-section {
margin-bottom: 60px; /* Espace très petit écran harmonisé */
}

.gellies-custom-image {
width: 95%;
border-radius: 15px;
}
}
/* Grid container avec spacing harmonisé */
.gellies-features-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap: 60px; /* Gap harmonisé (était 90px) */
max-width: 1200px;
margin: 0 auto 80px auto; /* Margin bottom harmonisé */
padding: 0 20px;
}

@media (max-width: 767px) {
.gellies-features-wrapper { 
gap: 40px;
margin-bottom: 60px; /* Mobile harmonisé */
}
}

@media (max-width: 480px) {
.gellies-features-wrapper { 
gap: 30px;
margin-bottom: 40px; /* Très petit écran harmonisé */
}
}

/* Card avec animations améliorées */
.gellies-feature-item {
position: relative;
padding: 32px 24px;
border-radius: 20px;
display: flex;
flex-direction: column;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.95) 0%, 
rgba(248, 250, 252, 0.90) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
opacity: 0;
transform: translateY(50px) scale(0.9);
animation: cardSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
animation-timeline: view(); /* Appliqué ici */
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

/* Animation d'apparition des cartes améliorée */
@keyframes cardSlideUp {
0% {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
60% {
opacity: 0.8;
transform: translateY(-10px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.gellies-feature-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.98) 0%, 
rgba(248, 250, 252, 0.95) 100%);
}

/* Emoji avec animation de rebond */
.gellies-emoji-badge {
font-size: 48px;
margin-bottom: 20px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
line-height: 1;
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
transform: scale(0);
/* animation-timeline view() sera hérité ou géré par le parent .gellies-feature-item pour son apparition */
/* Si bounceIn doit être lié au scroll indépendamment, il faudrait l'ajouter ici aussi. */
/* Pour l'instant, on laisse bounceIn se déclencher après cardSlideUp (via les délais existants sur le fallback) */
/* ou en même temps que cardSlideUp si scroll-driven */
animation-timeline: view(); /* Fait rebondir l'emoji quand il devient visible */
animation-range-start: entry 0%;
animation-range-end: entry 70%; /* Laisse un peu plus de temps pour le rebond */
}

@keyframes bounceIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

.gellies-feature-item:hover .gellies-emoji-badge {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Title et description avec spacing cohérent */
.gellies-feature-title {
font-size: 26px;
color: #2E496A;
margin: 0 0 16px 0; /* Margin harmonisé */
font-weight: 700;
line-height: 1.2;
transition: color 0.3s ease;
}

.gellies-feature-item:hover .gellies-feature-title {
color: #1a365d;
}

.gellies-feature-desc {
font-size: 17px;
line-height: 1.6;
color: #2E496A;
opacity: 0.9;
margin: 0; /* Pas de margin pour la description */
transition: color 0.3s ease;
}

.gellies-feature-item:hover .gellies-feature-desc {
opacity: 1;
color: #2d3748;
}

/* Même background pour toutes les cartes */
.gellies-feature-item--love,
.gellies-feature-item--joy,
.gellies-feature-item--success {
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.95) 0%, 
rgba(248, 250, 252, 0.90) 100%);
}

.gellies-feature-item--love:hover,
.gellies-feature-item--joy:hover,
.gellies-feature-item--success:hover {
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.98) 0%, 
rgba(248, 250, 252, 0.95) 100%);
}

/* Délais d'animation échelonnés pour les cartes */
.gellies-feature-item:nth-child(1) { 
animation-delay: 1.2s;
}
.gellies-feature-item:nth-child(1) .gellies-emoji-badge { 
animation-delay: 1.4s;
}

.gellies-feature-item:nth-child(2) { 
animation-delay: 1.4s;
}
.gellies-feature-item:nth-child(2) .gellies-emoji-badge { 
animation-delay: 1.6s;
}

.gellies-feature-item:nth-child(3) { 
animation-delay: 1.6s;
}
.gellies-feature-item:nth-child(3) .gellies-emoji-badge { 
animation-delay: 1.8s;
}

/* CTA avec spacing harmonisé */
.gellies-features-cta {
margin-top: 0; /* Suppression du margin-top car déjà géré dans wrapper */
text-align: center;
opacity: 0;
animation: fadeInUp 0.6s ease-out 2s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.gellies-cta-text {
display: block;
text-align: center;
margin: 0; /* Suppression du margin-top */
font-size: 17px;
color: #2E496A;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gellies-cta-text:hover {
color: #9DBDFF;
transform: translateY(-2px);
}

/* Responsive mobile avec spacing harmonisé */
@media (max-width: 768px) {
.gellies-feature-item {
padding: 24px 20px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.gellies-feature-item:hover {
transform: none;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.gellies-emoji-badge {
font-size: 40px;
margin-bottom: 15px;
}

.gellies-feature-title {
font-size: 22px;
margin-bottom: 14px; /* Harmonisé */
}

.gellies-feature-desc {
font-size: 15px;
}
}

@media (max-width: 480px) {
.gellies-feature-item {
padding: 20px 16px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.gellies-emoji-badge {
font-size: 36px;
margin-bottom: 12px;
}

.gellies-feature-title {
font-size: 20px;
margin-bottom: 12px; /* Harmonisé */
}

.gellies-feature-desc {
font-size: 14px;
}
}

/* Optimisation des performances */
.gellies-feature-item,
.gellies-emoji-badge {
will-change: transform;
}
:root {
--star-size-desktop: 32px;
--star-size-mobile: 26px;
--gold-gradient: linear-gradient(135deg, #ffd932 0%, #FFA500 50%, #FF8C00 100%);
--gold-shadow: 0 4px 8px rgba(255, 165, 0, 0.3);
}

.star-container {
margin: 70px 0 20px 20px;
text-align: left;
}

.stars {
display: inline-flex;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 16px 28px;
border-radius: 50px;
box-shadow: 
0 8px 25px rgba(46, 73, 106, 0.15),
0 2px 6px rgba(46, 73, 106, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}

.stars::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 3s infinite;
}

@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}

.star {
display: inline-block;
width: var(--star-size-desktop);
height: var(--star-size-desktop);
margin: 0 8px;
background: var(--gold-gradient);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
filter: drop-shadow(var(--gold-shadow));
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
opacity: 0;
transform: scale(0) rotate(180deg);
animation-name: starAppear, twinkle; /* Noms des animations */
animation-duration: 0.6s, 4s;
animation-timing-function: ease-out, ease-in-out;
animation-delay: 0s, 2s; /* Les délais individuels nth-child pour starAppear seront pour le fallback */
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
/* animation: starAppear 0.6s ease-out forwards, twinkle 4s ease-in-out 2s infinite; */ /* Remplacé par longhands pour clarté avec timeline */
animation-timeline: view(), auto; /* starAppear sur scroll, twinkle en auto (temps) */
animation-range-start: entry 0%;
animation-range-end: entry 60%; /* Pour starAppear */
}

@keyframes starAppear {
0% {
opacity: 0;
transform: scale(0) rotate(180deg);
}
70% {
transform: scale(1.2) rotate(10deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}

.star::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
clip-path: inherit;
}

.star:hover {
transform: scale(1.3) rotate(5deg);
filter: drop-shadow(0 6px 12px rgba(255, 165, 0, 0.5)) brightness(1.1);
animation: starPulse 0.6s ease-in-out;
}

.star:hover::before {
opacity: 1;
}

@keyframes starPulse {
0%, 100% { transform: scale(1.3) rotate(5deg); }
50% { transform: scale(1.4) rotate(8deg); }
}

/* Animation de scintillement aléatoire */
.star:nth-child(1) { animation: starAppear 0.6s ease-out 0.1s forwards, twinkle 4s ease-in-out 2s infinite; }
.star:nth-child(2) { animation: starAppear 0.6s ease-out 0.2s forwards, twinkle 4s ease-in-out 3s infinite; }
.star:nth-child(3) { animation: starAppear 0.6s ease-out 0.3s forwards, twinkle 4s ease-in-out 2.5s infinite; }
.star:nth-child(4) { animation: starAppear 0.6s ease-out 0.4s forwards, twinkle 4s ease-in-out 3.5s infinite; }
.star:nth-child(5) { animation: starAppear 0.6s ease-out 0.5s forwards, twinkle 4s ease-in-out 4s infinite; }

@keyframes twinkle {
0%, 100% { 
filter: drop-shadow(var(--gold-shadow)) brightness(1);
}
50% { 
filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.8)) brightness(1.3);
}
}

@media screen and (max-width: 767px) {
.star-container {
margin-left: 0px;
}
.stars {
padding: 5px 10px;
}
.star {
width: var(--star-size-mobile);
height: var(--star-size-mobile);
margin: 0 5px;
}
}

@keyframes popIn {
0% {
opacity: 0;
transform: scale(0) rotate(10deg);
}
70% {
transform: scale(1.2) rotate(10deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(10deg);
}
}
.quote-svg {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 2px 8px rgba(46, 73, 106, 0.15));
float: right;
/* Taille augmentée de 50% */
width: clamp(52px, 9vw, 120px); /* Augmenté de 50% */
max-width: 120px; /* Augmenté de 50% */
margin-left: auto;
margin-right: 1.5rem;
margin-top: -1.5rem;
position: relative;
z-index: 10;
}

/* Tailles spécifiques par breakpoint - augmentées de 50% */
@media (max-width: 768px) {
.quote-svg {
width: clamp(45px, 12vw, 75px); /* Augmenté de 50% */
margin-right: 1rem;
margin-top: -1rem;
}
}

@media (min-width: 769px) and (max-width: 1200px) {
.quote-svg {
width: clamp(75px, 10.5vw, 105px); /* Augmenté de 50% */
margin-right: 2rem;
margin-top: -1.8rem;
}
}

@media (min-width: 1201px) {
.quote-svg {
width: clamp(90px, 9vw, 135px); /* Augmenté de 50% */
margin-right: 2.5rem;
margin-top: -2.2rem;
}
}

.quote-svg:hover {
transform: scale(1.1) rotate(2deg);
filter: drop-shadow(0 4px 16px rgba(46, 73, 106, 0.25));
}

/* Styles pour le SVG avec animation de flottement */
.quote-svg {
  will-change: transform; /* Optimisation de performance pour l'animation */
}

.quote-svg defs {
  display: block;
}

/* Animation de pulsation très subtile */
@keyframes quotePulse {
0%, 100% { 
opacity: 0.9; 
transform: scale(1); 
}
50% { 
opacity: 1; 
transform: scale(1.02); 
}
}

.quote-svg {
animation: quotePulse 5s ease-in-out infinite;
}

/* Animation d'entrée */
@keyframes quoteSlideIn {
from {
opacity: 0;
transform: translateX(30px) rotate(10deg) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) rotate(0deg) scale(1);
}
}

.quote-svg {
animation: quoteSlideIn 0.8s ease-out, quotePulse 5s ease-in-out 1s infinite;
animation-timeline: view(), auto; /* quoteSlideIn sur scroll, quotePulse en auto */
animation-range-start: entry 0%;
animation-range-end: entry 50%; /* Pour quoteSlideIn */
}
/* Section Témoignages V2 - Carousel 3D Desktop + Slider Mobile */
.gellies-testimonials-section-v2 {
padding: 80px 20px;
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: transparent;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.gellies-testimonials-container-v2 {
max-width: 1400px;
margin: 0 auto;
position: relative;
width: 100%;
}

.gellies-testimonials-carousel-desktop {
display: block;
position: relative;
height: 520px;
perspective: 1200px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center; /* Centrage */
}

.gellies-carousel-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform-style: preserve-3d;
}

.gellies-testimonial-item {
position: absolute;
width: 450px;
height: 480px;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
left: 50%;
top: 50%;
transform-origin: center center;
}

/* Position centrale - carte active */
.gellies-testimonial-item.gellies-item-center {
transform: translate(-50%, -50%) scale(1) rotateY(0deg);
z-index: 10;
opacity: 1;
}

/* Position droite */
.gellies-testimonial-item.gellies-item-right {
transform: translate(calc(-50% + 280px), -50%) scale(0.85) rotateY(-25deg);
z-index: 5;
opacity: 0.6;
}

/* Position gauche */
.gellies-testimonial-item.gellies-item-left {
transform: translate(calc(-50% - 280px), -50%) scale(0.85) rotateY(25deg);
z-index: 5;
opacity: 0.6;
}

/* Cartes cachées */
.gellies-testimonial-item.gellies-item-hidden {
transform: translate(-50%, -50%) scale(0.5) rotateY(0);
z-index: 1;
opacity: 0;
pointer-events: none;
}

/* Carte testimonial */
.gellies-testimonial-card-v2 {
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.95) 0%, 
rgba(248, 250, 252, 0.90) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 45px 38px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.4s ease;
box-sizing: border-box;
}

.gellies-testimonial-item:hover .gellies-testimonial-card-v2 {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Avatar */
.gellies-testimonial-avatar-v2 {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 28px;
border: 4px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}

.gellies-testimonial-avatar-v2 img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Contenu */
.gellies-testimonial-content-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Modifié: aligne le contenu en haut */
  width: 100%;
  position: relative; /* Ajouté: pour positionner le bloc auteur en absolu */
  padding-bottom: 70px; /* Ajouté: espace pour le bloc auteur en bas */
}

.gellies-testimonial-text-v2 {
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: #2E496A;
  margin: 0;
  font-style: italic;
  flex: 1;
  display: flex;
  align-items: center;
}

.gellies-testimonial-author-v2 {
  position: absolute; /* Ajouté: position absolue */
  bottom: 0; /* Ajouté: ancré en bas */
  left: 0; /* Ajouté: aligné à gauche */
  width: 100%; /* Ajouté: prend toute la largeur */
  padding-top: 20px; /* Ajouté: espace entre le texte et l'auteur */
}

.gellies-author-name-v2 {
font-size: 20px;
font-weight: 700;
color: #2E496A;
margin: 0 0 6px 0;
}

.gellies-author-role-v2 {
font-size: 15px;
color: #64748b;
margin: 0;
}

/* FLÈCHES DESKTOP - Centrées par rapport au carousel */
.gellies-arrow-desktop {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
border: none;
color: #2E496A;
cursor: pointer;
z-index: 15;
padding: 12px;
width: 48px;
height: 48px;
transition: all 0.3s ease;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.gellies-arrow-desktop:hover {
color: #1a365d;
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.gellies-arrow-left-desktop {
left: 20px;
}

.gellies-arrow-right-desktop {
right: 20px;
}

/* VERSION MOBILE - Slider simple CENTRÉ */
.gellies-testimonials-mobile {
display: none;
position: relative;
overflow: hidden;
width: 100%;
max-width: 320px; /* Réduction de la largeur maximale (était 400px) */
margin: 0 auto; /* Centrage horizontal */
}

.gellies-mobile-slider {
position: relative;
width: 100%;
height: 420px;
overflow: hidden;
margin: 0 auto; /* Centrage supplémentaire */
}

.gellies-mobile-track {
display: flex;
width: 500%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateX(0%);
margin: 0 auto; /* Centrage du track */
}

.gellies-mobile-slide {
width: 100%;
flex: 0 0 20%;
padding: 0 15px; /* Augmentation du padding pour plus d'espace */
box-sizing: border-box;
display: flex;
justify-content: center; /* Centrage des cartes dans les slides */
}

.gellies-testimonial-card-mobile {
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.95) 0%, 
rgba(248, 250, 252, 0.90) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 32px 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: 100%;
width: 100%;
max-width: 350px; /* Largeur maximale pour éviter les cartes trop larges */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
margin: 0 auto; /* Centrage de la carte */
}

.gellies-testimonial-avatar-mobile {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 20px;
border: 3px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}

.gellies-testimonial-avatar-mobile img {
width: 100%;
height: 100%;
object-fit: cover;
}

.gellies-testimonial-content-mobile {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Modifié: aligne le contenu en haut */
  width: 100%;
  position: relative; /* Ajouté: pour positionner le bloc auteur en absolu */
  padding-bottom: 60px; /* Ajouté: espace pour le bloc auteur en bas (légèrement plus petit sur mobile) */
}

.gellies-testimonial-text-mobile {
  font-size: var(--font-size-small);
  line-height: 1.5;
  color: #2E496A;
  margin: 0;
  font-style: italic;
  flex: 1;
  display: flex;
  align-items: center;
}

.gellies-testimonial-author-mobile {
  position: absolute; /* Ajouté: position absolue */
  bottom: 0; /* Ajouté: ancré en bas */
  left: 0; /* Ajouté: aligné à gauche */
  width: 100%; /* Ajouté: prend toute la largeur */
  padding-top: 15px; /* Ajouté: espace entre le texte et l'auteur (légèrement plus petit sur mobile) */
}

.gellies-author-name-mobile {
font-size: var(--font-size-body-mobile);
font-weight: 700;
color: #2E496A;
margin: 0 0 4px 0;
}

.gellies-author-role-mobile {
font-size: 13px;
color: #64748b;
margin: 0;
}

/* FLÈCHES MOBILE - En dessous des cartes */
.gellies-arrows-mobile {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 20px;
margin-bottom: 12px;
}

.gellies-arrow-mobile {
background: rgba(255, 255, 255, 0.8);
border: none;
color: #2E496A;
cursor: pointer;
padding: 10px;
width: 40px;
height: 40px;
transition: color 0.3s ease;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.gellies-arrow-mobile:hover {
color: #1a365d;
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Dots de navigation */
.gellies-testimonials-dots-v2 {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 32px;
width: 100%;
}

.gellies-dot-v2 {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(46, 73, 106, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}

.gellies-dot-v2.gellies-dot-active-v2 {
background: #2E496A;
transform: scale(1.4);
}

/* RESPONSIVE AMÉLIORÉ - Desktop vers mobile plus fluide */
/* Grande tablette / Petit écran - Mode hybride */
@media (max-width: 1024px) and (min-width: 769px) {
.gellies-testimonials-carousel-desktop {
  height: 480px;
  perspective: 1000px;
}

.gellies-testimonial-item {
  width: 400px;
  height: 440px;
}

/* Ajustement des positions pour s'adapter à l'écran plus petit */
.gellies-testimonial-item.gellies-item-right {
  transform: translate(calc(-50% + 230px), -50%) scale(0.85) rotateY(-25deg);
}

.gellies-testimonial-item.gellies-item-left {
  transform: translate(calc(-50% - 230px), -50%) scale(0.85) rotateY(25deg);
}

.gellies-testimonial-card-v2 {
  padding: 35px 28px;
}

.gellies-testimonial-text-v2 {
  font-size: 16px;
  margin: 0 0 20px 0;
}
}

/* Tablette mode portrait - Transition vers mobile */
@media (max-width: 900px) and (min-width: 769px) {
.gellies-testimonial-item.gellies-item-right {
  transform: translate(calc(-50% + 200px), -50%) scale(0.8) rotateY(-20deg);
}

.gellies-testimonial-item.gellies-item-left {
  transform: translate(calc(-50% - 200px), -50%) scale(0.8) rotateY(20deg);
}
}

@media (max-width: 768px) {
.gellies-testimonials-carousel-desktop {
  display: none;
}

.gellies-testimonials-mobile {
  display: block;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-timeline: view();
  animation-range-start: entry 0%;
  animation-range-end: entry 50%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gellies-testimonials-section-v2 {
  padding: 40px 15px;
}

.gellies-mobile-slider {
  height: 400px;
  transition: height 0.3s ease-out;
}

.gellies-mobile-slide {
  padding: 0 10px; /* Augmenté pour plus d'espacement */
}

.gellies-testimonial-card-mobile {
  padding: 28px 20px;
  max-width: 320px; /* Légèrement réduit pour s'adapter aux petits écrans */
  transition: all 0.3s ease;
}

.gellies-testimonial-avatar-mobile {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.gellies-testimonial-text-mobile {
  font-size: 14px;
  margin-bottom: 16px;
}

.gellies-author-name-mobile {
  font-size: 15px;
}

.gellies-author-role-mobile {
  font-size: 12px;
}

.gellies-testimonials-dots-v2 {
  margin-top: 20px;
}

.gellies-dot-v2 {
  width: 8px;
  height: 8px;
}

/* Améliorations des flèches mobile */
.gellies-arrows-mobile {
  margin-top: 16px;
  gap: 30px;
}

.gellies-arrow-mobile {
  padding: 8px;
  width: 36px;
  height: 36px;
}
}

/* Très petit mobile - ajustements fins */
@media (max-width: 480px) {
.gellies-mobile-slider {
  height: 380px;
}

.gellies-testimonial-card-mobile {
  padding: 24px 18px;
  max-width: 290px;
  border-radius: 16px;
}

.gellies-testimonial-avatar-mobile {
  width: 55px;
  height: 55px;
  margin-bottom: 14px;
}

.gellies-testimonial-text-mobile {
  font-size: 13px;
}

/* Meilleures interactions tactiles sur petit écran */
.gellies-arrow-mobile {
  width: 34px;
  height: 34px;
  padding: 7px;
}

.gellies-arrows-mobile {
  gap: 24px;
}

.gellies-dot-v2 {
  width: 7px;
  height: 7px;
}
}

/* Correction des transitions pour les appareils ayant une préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
.gellies-mobile-track,
.gellies-testimonial-item {
  transition-duration: 0.1s;
}
}

/* Optimisation des performances */
.gellies-testimonial-item,
.gellies-mobile-track {
will-change: transform;
}


/* Titre principal harmonisé avec la section précédente */
.titlesection3 {
color: #74bdee;
font-family: 'Nunito', sans-serif;
font-weight: 900;
text-align: left;
line-height: 1.2;
font-size: 72px;
max-width: 1100px;
margin-bottom: 20px; /* Espace harmonisé */
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.2s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

@media (max-width: 600px) {
.titlesection3 {
font-size: 41px;
margin-bottom: 15px; /* Mobile harmonisé */
}
}

/* Sous-titre harmonisé */
.gellies-hero-title-responsive-59 {
color: #2e496a;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 25px;
margin: 0 0 80px 0; /* Espace harmonisé après le sous-titre */
opacity: 0;
animation: fadeInLeft 0.8s ease-out 0.5s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

@media (min-width: 768px) {
.gellies-hero-title-responsive-59 {
font-size: 45px;
margin-bottom: 100px; /* Desktop harmonisé */
}
}

@media (max-width: 600px) {
.gellies-hero-title-responsive-59 {
margin-bottom: 60px; /* Mobile harmonisé */
}
}

/* Animations du titre et sous-titre */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* Section vidéo harmonisée */
.gellies-video-section {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 120px; /* Espace harmonisé après la vidéo */
opacity: 0;
animation: fadeInScale 0.8s ease-out 0.8s forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}

.gellies-custom-video {
border-radius: 30px;
width: 70%;
max-width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.4s ease, filter 0.4s ease;
}

.gellies-custom-video:hover {
transform: scale(1.02);
filter: brightness(1.05);
}

@media screen and (max-width: 768px) {
.gellies-video-section {
margin-bottom: 80px; /* Mobile harmonisé */
}

.gellies-custom-video {
width: 90%;
border-radius: 15px;
}
}

@media screen and (max-width: 480px) {
.gellies-video-section {
margin-bottom: 60px; /* Très petit écran harmonisé */
}

.gellies-custom-video {
width: 95%;
border-radius: 15px;
}
}

/* Section stats harmonisée */
.gellies-stats-section {
max-width: 1200px;
margin: 0 auto 0px auto; /* Margin bottom harmonisé */
padding: 0 20px;
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
position: relative;
}

/* Légende sous les statistiques */
.gellies-stats-caption {
color: #2E496A; /* Bleu foncé de la marque */
font-family: 'Nunito', sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: left;
margin: 30px 0 0; /* Petit espace au-dessus */
font-style: italic;
}

.gellies-stats-item {
margin-bottom: 60px; /* Espace harmonisé entre les barres */
position: relative;
opacity: 0;
transform: translateY(30px);
animation: gellies-unique-slideUp 0.8s ease-out forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.gellies-stats-item:last-child {
margin-bottom: 0; /* Pas de margin sur la dernière barre */
}

.gellies-stats-item:nth-child(1) { animation-delay: 1.2s; }
.gellies-stats-item:nth-child(2) { animation-delay: 1.4s; }
.gellies-stats-item:nth-child(3) { animation-delay: 1.6s; }

.gellies-stats-label {
font-size: 20px; /* Taille harmonisée avec les autres sections */
font-weight: 700;
color: #2e496a;
margin-bottom: 20px; /* Espace harmonisé */
display: flex;
align-items: center;
gap: 20px;
animation: gellies-unique-fadeInLeft 0.6s ease-out forwards;
animation-delay: 0.8s; /* Fallback delay */
opacity: 0;
transform: translateX(-20px);
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.gellies-unique-logo {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: gellies-unique-logoSpin 0.8s ease-out forwards;
animation-delay: 1s; /* Fallback delay */
transform: scale(0);
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.gellies-unique-logo img {
width: 80px;
height: 80px;
object-fit: contain;
}

.gellies-unique-bar-container {
position: relative;
width: 100%;
}

.gellies-unique-bar-fill {
height: 50px; /* Hauteur harmonisée */
border-radius: 25px;
position: relative;
transform-origin: left;
transition: width 0.3s ease;
box-shadow: 0 4px 15px rgba(116, 189, 238, 0.3);
animation: gellies-unique-barGlow 2s ease-in-out infinite alternate;
}

.gellies-unique-bar-fill.gellies-unique-primary {
background: linear-gradient(90deg, #74bdee 0%, #5ba8e6 20%, #74bdee 40%, #8ac8f0 60%, #74bdee 80%, #5ba8e6 100%);
background-size: 300% 100%;
animation-name: gellies-unique-fillBar76, gellies-unique-barGradientFlow;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, ease-in-out;
animation-fill-mode: forwards, none;
animation-iteration-count: 1, infinite;
animation-delay: 1.2s, 3.2s; /* Fallback delays */
/* animation: gellies-unique-fillBar76 2s ease-out forwards, gellies-unique-barGradientFlow 4s ease-in-out infinite; */
/* animation-delay: 1.2s, 3.2s; */
animation-timeline: view(), auto; /* fillBar on scroll, gradientFlow on time */
animation-range-start: entry 0%;
animation-range-end: entry 80%; /* Pour gellies-unique-fillBar76 */
}

.gellies-unique-bar-fill.gellies-unique-secondary {
background: linear-gradient(90deg, #2e496a 0%, #3a5a7a 50%, #2e496a 100%);
background-size: 200% 100%;
/* Determine which animation is for entry if multiple. Assume fillBarXX for entry */
/* This class doesn't have a fillBar animation directly, it's on .gellies-unique-bar-47 etc. */
/* So, only gellies-unique-barShimmerSecondary is here */
animation: gellies-unique-barShimmerSecondary 3s ease-in-out infinite;
/* If it had an entry animation, it would be: animation-timeline: view(), auto; */
}

.gellies-unique-percentage {
position: absolute;
right: 25px; /* Position harmonisée */
top: 50%;
transform: translateY(-50%);
color: white;
font-weight: 700;
font-size: 18px; /* Taille harmonisée */
z-index: 2;
animation: gellies-unique-percentageBounce 0.5s ease-out forwards;
animation-delay: 2.2s; /* Fallback delay */
opacity: 0;
/* transform: translateY(-50%) scale(0.5); */ /* Initial state handled by animation */
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.gellies-unique-crown {
position: absolute;
right: -30px; /* Position ajustée */
top: -35px;
width: 60px; /* Taille harmonisée */
height: 60px;
z-index: 3;
opacity: 0;
animation-name: gellies-unique-popIn, gellies-unique-crownFloat;
animation-duration: 0.8s, 2s;
animation-timing-function: ease, ease-in-out;
animation-fill-mode: forwards, none;
animation-iteration-count: 1, infinite;
animation-delay: 2s, 3s; /* Fallback delays */
/* animation: gellies-unique-popIn 0.8s ease forwards 2s, gellies-unique-crownFloat 2s ease-in-out infinite; */
/* animation-delay: 2s, 3s; */ /* Redundant with shorthand if used */
animation-timeline: view(), auto; /* popIn on scroll, crownFloat on time */
animation-range-start: entry 0%;
animation-range-end: entry 50%; /* Pour gellies-unique-popIn */
}

.gellies-unique-crown svg {
width: 100%;
height: 100%;
transform: rotate(10deg);
}

/* Conteneur flèche harmonisé */
.arrow-outer-container {
position: relative;
margin-top: -80px; /* Ajusté pour la nouvelle hauteur des barres */
text-align: right;
margin-right: 20%;
width: 100%;
animation: gellies-unique-arrowSlideIn 0.8s ease 2.5s both; /* 'both' is like forwards */
opacity: 0;
/* transform: translateX(30px); */ /* Initial state handled by animation */
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.arrow-container {
display: inline-block;
position: relative;
width: 120px;
margin-right: 20px;
animation: gellies-unique-arrowBobGentle 3s ease-in-out infinite;
animation-delay: 3.5s;
}

.arrow-text {
position: absolute;
right: 0;
bottom: 100%;
color: #9DBDFF;
font-family: 'Nunito', sans-serif;
font-size: 20px; /* Taille harmonisée avec les autres textes */
font-weight: 400;
line-height: 1.4;
width: 220px; /* Largeur ajustée */
text-align: right;
margin-bottom: 15px; /* Espace harmonisé */
animation: gellies-unique-textPulse 0.8s ease forwards;
opacity: 0;
animation-delay: 3s; /* Fallback delay */
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.arrow-text strong {
font-weight: 900;
color: #9DBDFF;
}

.arrow-svg {
width: 100%;
height: auto;
fill: #9DBDFF;
transform: rotate(180deg) scaleX(-1);
animation: gellies-unique-arrowPulseGentle 2.5s ease-in-out infinite;
animation-delay: 3.5s;
}

/* Barres de tailles différentes selon les pourcentages */
.gellies-unique-bar-76 { 
width: 76%; 
animation: gellies-unique-fillBar76 2s ease-out forwards, gellies-unique-barGradientFlow 4s ease-in-out infinite;
animation-delay: 1.2s, 3.2s;
}
.gellies-unique-bar-47 { 
width: 47%; 
animation: gellies-unique-fillBar47 2s ease-out forwards, gellies-unique-barShimmerSecondary 3s ease-in-out infinite;
animation-delay: 1.4s, 3.4s;
}
.gellies-unique-bar-36 { 
width: 36%; 
animation: gellies-unique-fillBar36 2s ease-out forwards, gellies-unique-barShimmerSecondary 3s ease-in-out infinite;
animation-delay: 1.6s, 3.6s;
}

/* Animations keyframes conservées */
@keyframes gellies-unique-slideUp {
from { 
opacity: 0; 
transform: translateY(30px); 
}
to { 
opacity: 1; 
transform: translateY(0); 
}
}

@keyframes gellies-unique-fadeInLeft {
from { 
opacity: 0; 
transform: translateX(-20px); 
}
to { 
opacity: 1; 
transform: translateX(0); 
}
}

@keyframes gellies-unique-logoSpin {
from { 
transform: scale(0) rotate(-180deg); 
}
to { 
transform: scale(1) rotate(0deg); 
}
}

@keyframes gellies-unique-barGradientFlow {
0% { background-position: 0% 0; }
50% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}

@keyframes gellies-unique-barShimmerSecondary {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}

@keyframes gellies-unique-barGlow {
from { box-shadow: 0 4px 15px rgba(116, 189, 238, 0.3); }
to { box-shadow: 0 6px 25px rgba(116, 189, 238, 0.6); }
}

@keyframes gellies-unique-percentageBounce {
from { 
opacity: 0; 
transform: translateY(-50%) scale(0.5); 
}
60% { 
transform: translateY(-50%) scale(1.1); 
}
to { 
opacity: 1; 
transform: translateY(-50%) scale(1); 
}
}

@keyframes gellies-unique-crownFloat {
0%, 100% { transform: translateY(0) rotate(10deg); }
50% { transform: translateY(-5px) rotate(12deg); }
}

@keyframes gellies-unique-arrowSlideIn {
from { 
opacity: 0; 
transform: translateX(30px); 
}
to { 
opacity: 1; 
transform: translateX(0); 
}
}

@keyframes gellies-unique-arrowBobGentle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}

@keyframes gellies-unique-textPulse {
from { 
opacity: 0; 
transform: scale(0.9); 
}
to { 
opacity: 1; 
transform: scale(1); 
}
}

@keyframes gellies-unique-arrowPulseGentle {
0%, 100% { transform: rotate(180deg) scaleX(-1) scale(1); }
50% { transform: rotate(180deg) scaleX(-1) scale(1.02); }
}

@keyframes gellies-unique-fillBar76 {
from { width: 0%; }
to { width: 76%; }
}

@keyframes gellies-unique-fillBar47 {
from { width: 0%; }
to { width: 47%; }
}

@keyframes gellies-unique-fillBar36 {
from { width: 0%; }
to { width: 36%; }
}

@keyframes gellies-unique-popIn {
0% { transform: scale(0) rotate(10deg); opacity: 0; }
100% { transform: scale(1) rotate(10deg); opacity: 1; }
}

/* Responsive harmonisé */
@media (max-width: 768px) {
.gellies-stats-section {
margin-bottom: 80px; /* Mobile harmonisé */
}

.gellies-stats-item {
margin-bottom: 40px; /* Mobile harmonisé */
}

.gellies-stats-label {
font-size: 18px; /* Mobile harmonisé */
flex-direction: column;
align-items: flex-start;
gap: 15px;
margin-bottom: 18px;
}

.gellies-unique-logo {
width: 80px;
height: 80px;
}

.gellies-unique-logo img {
width: 70px;
height: 70px;
}

.gellies-unique-bar-fill {
height: 45px; /* Mobile harmonisé */
}

.gellies-unique-percentage {
font-size: 16px;
right: 20px;
}

.gellies-unique-crown {
right: -25px;
top: -30px;
width: 50px;
height: 50px;
}

.arrow-outer-container {
margin-top: -70px;
margin-right: 15%;
}

.arrow-container {
width: 90px;
}

.arrow-text {
font-size: 16px; /* Mobile harmonisé */
width: 180px;
line-height: 1.3;
margin-bottom: 12px;
}
}

@media (max-width: 480px) {
.gellies-stats-section {
margin-bottom: 60px; /* Très petit écran harmonisé */
}

.gellies-stats-item {
margin-bottom: 30px; /* Très petit écran harmonisé */
}

.gellies-unique-bar-fill {
height: 40px; /* Très petit écran harmonisé */
}

.gellies-unique-percentage {
font-size: 15px;
right: 15px;
}

.gellies-stats-label {
font-size: var(--font-size-small); /* Standardisé avec variables CSS */
margin-bottom: var(--spacing-sm);
}

.gellies-unique-logo {
width: 75px;
height: 75px;
}

.gellies-unique-logo img {
width: 65px;
height: 65px;
}

.arrow-outer-container {
margin-top: -20px;
margin-right: 10%;
}

.arrow-container {
width: 80px;
}

.arrow-text {
font-size: var(--font-size-small); /* Standardisé avec variables CSS */
width: 160px;
line-height: 1.2;
margin-bottom: var(--spacing-xs);
}
}

/* Empêche le débordement horizontal */
html, body {
overflow-x: hidden;
}

.image-container {
position: relative;
display: block;
text-align: center;
}

/* Animation de rotation continue */
@keyframes rotation {
0% {
transform: translate(-50%, -50%) rotate(10deg);
}
100% {
transform: translate(-50%, -50%) rotate(370deg);
}
}

@media (min-width: 768px) {
.background-svg {
position: absolute;
top: 50%;
left: 50%;
width: 60% !important; /* Réduction de la taille (auparavant 77%) */
height: auto;
opacity: 0.2;
transform: translate(-50%, -50%) rotate(10deg);
z-index: 0;
animation: rotation 10s linear infinite;
}
.titlesection2-image {
width: 50% !important; /* Réduction de la taille (auparavant 60%) */
position: relative;
z-index: 1;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
}

@media (max-width: 767px) {
.background-svg {
position: absolute;
top: 50%;
left: 50%;
width: 100% !important; /* Modification : passage de 101% à 100% */
height: auto;
opacity: 0.2;
transform: translate(-50%, -50%) rotate(10deg);
z-index: 0;
animation: rotation 10s linear infinite;
}

.titlesection2-secondary {
margin-top: 0px !important;
}
.titlesection2-image {
width: 80% !important; /* Taille augmentée pour mobile */
position: relative;
z-index: 1;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
.titlesection-mobile {
font-size: 18px !important;
}
/* Nouvelle règle pour forcer la taille du texte "Gellies arrive bientôt" à 18px sur mobile */
.titlesection-mobile > span {
font-size: 18px !important;
}
}
/* Variables & Global */
.gp-container {
--primary-blue: #74BDEE;
--secondary-blue: #2E496A;
--background-blue: #365573;
--white: #FFFFFF;
font-family: 'Nunito', sans-serif;
color: white;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.gp-heading {
font-weight: 900;
color: var(--primary-blue);
font-size: 28px;
margin-bottom: 20px;
text-align: left;
}
/* Formulaire */
.gp-form {
display: grid;
gap: 15px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.gp-form {
grid-template-columns: repeat(2, 1fr);
}
.gp-form .gp-full {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.gp-form {
grid-template-columns: 1fr;
}
}
.gp-form-group {
display: flex;
flex-direction: column;
}
.gp-label {
font-weight: 700;
font-size: 20px;
margin-bottom: 5px;
}
.gp-input:focus {
outline: none;
border-color: var(--secondary-blue);
box-shadow: 0 0 5px rgba(46,73,106,0.5);
}
.gp-button {
background-color: var(--primary-blue);
color: var(--white);
border: none;
font-weight: 900;
font-size: 20px;
padding: 20px 30px;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
text-align: center;
width: 100%;
max-width: 300px;
justify-self: center;
margin-top: 40px;
}
.gp-button:hover {
background-color: #9DBDFF;
transform: translateY(-2px);
}
.gp-reassurance {
color: white;
font-size: 15px;
font-weight: bold;
text-align: center;
width: 100%;
justify-self: center;
margin: 10px auto 0;
}
/* Message de succès */
.gp-success-message {
margin-top: 20px;
text-align: center;
font-size: 20px;
color: var(--primary-blue);
}

.titlesection2 {
color: var(--secondary-blue);
font-family: 'Nunito', sans-serif;
font-weight: 900;
text-align: left;
line-height: 1.2;
font-size: var(--font-size-hero);
max-width: 1100px;
}
/* Pour les mobiles, on réduit la taille du texte */
@media (max-width: 600px) {
.titlesection2 {
font-size: 41px; /* Ajustez cette valeur selon vos besoins */
}
}
/* Dégradé pour le bandeau derrière le texte */
.titlesection2 .highlight-bg {
position: absolute;
bottom: 0;
left: -0.1em;
right: -0.1em;
height: 0.4em;
/* Dégradé linéaire de gauche à droite */
background: #9DBDFF;
border-radius: 0.35em;
z-index: 0;
}

/* Reset et base - Version Responsive */
.ingredients-showcase-section {
padding: var(--spacing-section) var(--spacing-md);
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: block;
}

.ingredients-showcase-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
}

/* Grille masonry type Pinterest */
.ingredients-masonry-grid {
columns: 3;
column-gap: 24px;
column-fill: balance;
}

/* RESPONSIVE BREAKPOINTS */

/* Large Desktop */
@media (min-width: 1600px) {
.ingredients-masonry-grid {
columns: 4;
column-gap: 28px;
}
}

/* Medium Desktop */
@media (max-width: 1200px) and (min-width: 1025px) {
.ingredients-masonry-grid {
columns: 2;
column-gap: 20px;
}
}

/* TABLETTE - Grille 2 colonnes */
@media (max-width: 1024px) and (min-width: 769px) {
.ingredients-showcase-section {
padding: 40px 15px;
}

.ingredients-masonry-grid {
columns: 2;
column-gap: 18px;
}

.ingredient-showcase-card {
margin-bottom: 18px;
}
}

/* MOBILE - Règles de base pour la section */
@media (max-width: 768px) {
  .ingredients-showcase-section {
    padding: var(--spacing-section-mobile) var(--spacing-sm);
  }
  
  /* Les règles pour la grille et les cartes sont maintenant dans la section de nettoyage à la fin du fichier */
}

/* TRÈS PETIT MOBILE */
@media (max-width: 480px) {
  .ingredients-showcase-section {
    padding: calc(var(--spacing-section-mobile) / 2) var(--spacing-xs);
  }
  
  /* Les règles pour la grille et les cartes sont maintenant dans la section de nettoyage à la fin du fichier */
}

/* Cartes ingrédients - Style de base maintenu */
.ingredient-showcase-card {
break-inside: avoid;
margin-bottom: var(--spacing-md);
border-radius: var(--border-radius);
overflow: hidden;
position: relative;
cursor: pointer;
transition: var(--transition-normal);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.95) 0%, 
rgba(248, 250, 252, 0.90) 100%);

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(30px) scale(0.95);
animation: ingredient-card-appear var(--transition-slow) forwards;
min-height: 180px;
display: flex;
flex-direction: column;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

/* BOX-SHADOW ET GRADIENT INTENSIFIÉS SUR MOBILE */
@media (max-width: 768px) {
.ingredient-showcase-card {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(245, 248, 252, 0.95) 100%);
min-height: 180px;
display: flex;
flex-direction: column;
}
}

@media (max-width: 480px) {
.ingredient-showcase-card {
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.12);
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(240, 245, 251, 0.96) 100%);
min-height: 160px;
}
}

/* Différentes tailles pour effet organique - MAINTENUES SUR MOBILE */
.ingredient-showcase-short {
min-height: 200px;
}

.ingredient-showcase-medium {
min-height: 260px;
}

.ingredient-showcase-tall {
min-height: 320px;
}

/* TAILLES ADAPTÉES POUR MOBILE avec aspect organique préservé et correction farine de blé */
@media (max-width: 768px) {
.ingredient-showcase-short {
min-height: 170px;
}

.ingredient-showcase-medium {
min-height: 210px; /* Augmenté pour la farine de blé */
}

.ingredient-showcase-tall {
min-height: 220px;
}
}

@media (max-width: 480px) {
.ingredient-showcase-short {
min-height: 155px;
}

.ingredient-showcase-medium {
min-height: 200px; /* Hauteur stable pour farine de blé */
}

.ingredient-showcase-tall {
min-height: 195px;
}
}

/* Contenu de la carte */
.ingredient-showcase-content {
padding: var(--spacing-md);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
flex: 1;
justify-content: space-between;
}

/* RESPONSIVE PADDING */
@media (max-width: 768px) {
.ingredient-showcase-content {
padding: var(--spacing-sm);
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

@media (max-width: 480px) {
.ingredient-showcase-content {
padding: var(--spacing-sm);
}
}

/* Effet hover amélioré */
.ingredient-showcase-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.98) 0%, 
rgba(248, 250, 252, 0.95) 100%);
transition: var(--transition-fast);
}

/* HOVER INTENSIFIÉ SUR MOBILE */
@media (max-width: 768px) {
.ingredient-showcase-card:hover {
transform: none;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(240, 245, 251, 0.92) 100%);
}
}


@media (max-width: 480px) {
.ingredient-showcase-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(238, 244, 251, 1) 100%);
}
}

/* Icône */
.ingredient-showcase-icon {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* RESPONSIVE ICÔNE */
@media (max-width: 768px) {
.ingredient-showcase-icon {
width: 50px;
height: 50px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
}

@media (max-width: 480px) {
.ingredient-showcase-icon {
width: 45px;
height: 45px;
margin-bottom: 12px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
}

.ingredient-showcase-card:hover .ingredient-showcase-icon {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ingredient-icon-emoji {
font-size: 32px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}

/* RESPONSIVE EMOJI */
@media (max-width: 768px) {
.ingredient-icon-emoji {
font-size: 26px;
}
}

@media (max-width: 480px) {
.ingredient-icon-emoji {
font-size: 22px;
}
}

.ingredient-showcase-card:hover .ingredient-icon-emoji {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Texte */
.ingredient-showcase-text {
flex: 1;
display: flex;
flex-direction: column;
text-align: left;
}

.ingredient-showcase-name {
font-weight: 700;
font-size: var(--font-size-subtitle);
color: var(--secondary-blue);
margin: 0 0 var(--spacing-xs) 0;
line-height: 1.3;
letter-spacing: -0.01em;
transition: var(--transition-normal);
}

/* RESPONSIVE TITRE */
@media (max-width: 768px) {
.ingredient-showcase-name {
font-size: 18px;
margin: 0 0 8px 0;
}
}

@media (max-width: 480px) {
.ingredient-showcase-name {
font-size: 16px;
margin: 0 0 6px 0;
}
}

.ingredient-showcase-card:hover .ingredient-showcase-name {
color: #2d3748;
}

.ingredient-showcase-subtitle {
display: block;
font-size: var(--font-size-small);
font-weight: 400;
color: #64748b;
margin-top: -2px;
font-style: italic;
}

/* RESPONSIVE SOUS-TITRE */
@media (max-width: 768px) {
.ingredient-showcase-subtitle {
font-size: 12px;
margin-top: -2px;
}
}

@media (max-width: 480px) {
.ingredient-showcase-subtitle {
font-size: 11px;
}
}

.ingredient-showcase-benefit {
font-size: var(--font-size-body);
color: #475569;
line-height: 1.5;
margin: 0;
flex: 1;
transition: var(--transition-normal);
}

/* RESPONSIVE DESCRIPTION */
@media (max-width: 768px) {
.ingredient-showcase-benefit {
font-size: 14px;
line-height: 1.4;
}
}

@media (max-width: 480px) {
.ingredient-showcase-benefit {
font-size: 13px;
line-height: 1.3;
}
}

.ingredient-showcase-card:hover .ingredient-showcase-benefit {
color: #2d3748;
}

/* Drapeau */
.ingredient-showcase-flag {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* RESPONSIVE DRAPEAU */
@media (max-width: 768px) {
.ingredient-showcase-flag {
font-size: 24px;
top: 15px;
right: 15px;
}
}

@media (max-width: 480px) {
.ingredient-showcase-flag {
font-size: 20px;
top: 12px;
right: 12px;
}
}

.ingredient-showcase-card:hover .ingredient-showcase-flag {
transform: scale(1.15) rotate(-5deg);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Animation d'apparition fluide */
@keyframes ingredient-card-appear {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
60% {
opacity: 0.8;
transform: translateY(-5px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* Délais d'animation échelonnés */
.ingredient-showcase-card:nth-child(1) { animation-delay: 0.1s; }
.ingredient-showcase-card:nth-child(2) { animation-delay: 0.2s; }
.ingredient-showcase-card:nth-child(3) { animation-delay: 0.3s; }
.ingredient-showcase-card:nth-child(4) { animation-delay: 0.4s; }
.ingredient-showcase-card:nth-child(5) { animation-delay: 0.5s; }
.ingredient-showcase-card:nth-child(6) { animation-delay: 0.6s; }
.ingredient-showcase-card:nth-child(7) { animation-delay: 0.7s; }
.ingredient-showcase-card:nth-child(8) { animation-delay: 0.8s; }

/* Animation au survol pour les éléments internes */
.ingredient-showcase-card:hover .ingredient-showcase-text {
transform: translateY(-2px);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Responsif large desktop */
@media (min-width: 1025px) and (max-width: 1200px) {
.ingredients-showcase-section {
padding: 50px 15px;
}

.ingredient-showcase-content {
padding: 24px;
}

.ingredient-showcase-name {
font-size: 22px;
}

.ingredient-showcase-benefit {
font-size: 15px;
}

.ingredient-showcase-flag {
font-size: 28px;
}
}

@media (min-width: 1600px) {
.ingredients-showcase-section {
padding: 80px 20px;
}

.ingredient-showcase-content {
padding: 32px;
}

.ingredient-showcase-name {
font-size: 26px;
}

.ingredient-showcase-benefit {
font-size: 17px;
}

.ingredient-showcase-flag {
font-size: 32px;
}

.ingredient-showcase-short {
min-height: 220px;
}

.ingredient-showcase-medium {
min-height: 280px;
}

.ingredient-showcase-tall {
min-height: 340px;
}
}



/* Amélioration de la fluidité générale */
.ingredient-showcase-card *,
.ingredient-showcase-icon *,
.ingredient-showcase-flag * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Optimisation des performances d'animation */
.ingredient-showcase-card,
.ingredient-showcase-icon,
.ingredient-showcase-flag {
will-change: transform;
}

/* GRADIENT INTENSIFIÉ SUR MOBILE */
@media (max-width: 768px) {
.ingredient-showcase-card {
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(240, 245, 251, 0.92) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
}
}

@media (max-width: 480px) {
.ingredient-showcase-card {
background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.97) 0%, 
    rgba(235, 242, 250, 0.90) 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
}
}

.gellies-usage-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@media (min-width: 768px) {
.gellies-usage-container {
flex-direction: row;
justify-content: space-between;
}
}
.gellies-usage-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 300px;
margin-bottom: var(--spacing-element);
position: relative;
}
.gellies-usage-number {
position: absolute;
font-size: 150px;
color: #9dbdff36;
top: -10px;
left: -30px;
z-index: 1;
font-weight: bold;
}
.gellies-usage-item-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
position: relative;
z-index: 2;
}
.gellies-usage-item img {
display: block;
margin: 0 auto 15px;
max-width: 60%;
height: auto;
position: relative;
z-index: 3;
}
.gellies-usage-item h2 {
font-size: var(--font-size-body);
color: var(--secondary-blue);
margin-top: 0;
margin-bottom: var(--spacing-xs);
font-family: 'Nunito', sans-serif;
font-weight: 600;
line-height: 1.4em;
text-align: center;
position: relative;
z-index: 4;
}


.mg-section-container {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
font-family: 'Nunito', sans-serif;
gap: 20px; /* Ajout d'un espace entre l'image et le texte sur mobile */
}
@media (min-width: 768px) {
.mg-section-container {
    flex-direction: row;
    align-items: flex-start;
}
.mg-section-text {
    flex: 1;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.mg-section-image {
    flex: 1;
    max-width: 50%;
}
}
.mg-section-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 30px;
}
.mg-section-text span {
display: block;
margin-top: 40px; /* Descendre la signature de 40px */
text-align: right; /* Alignement à droite */
}

/* Applique la police Nunito à toute la section FAQ */
.faq-section,
.faq-section * {
font-family: 'Nunito', sans-serif;
box-sizing: border-box;
}

/* Section FAQ */
.faq-section {
width: 100%;
padding: 40px 20px;
margin: 0 auto;
background: #2E496A;
}

/* Titre FAQ avec animation d'entrée douce */
.faq-title {
text-align: left;
font-size: clamp(33px, 5vw, 72px);
font-weight: 900;
margin-bottom: 40px;
animation: fadeInDown 0.8s ease-out;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Conteneur FAQ */
.faq-container {
width: 100%;
margin: 0;
}

/* Éléments FAQ avec animations d'apparition douce */
.faq-item {
margin-bottom: 12px;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
background: transparent;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 30%; /* FAQ items are smaller, animate quicker */
}

.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
.faq-item:nth-child(3) { animation-delay: 0.3s; }
.faq-item:nth-child(4) { animation-delay: 0.4s; }
.faq-item:nth-child(5) { animation-delay: 0.5s; }
.faq-item:nth-child(6) { animation-delay: 0.6s; }
.faq-item:nth-child(7) { animation-delay: 0.7s; }
.faq-item:nth-child(8) { animation-delay: 0.8s; }

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(15px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Effet d'éclaircissement au hover */
.faq-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-item details {
border: none;
background: transparent;
width: 100%;
}

/* Questions avec effet d'éclaircissement au hover */
.faq-item summary {
list-style: none;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: white;
padding: 18px 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 60px;
width: 100%;
}

.faq-item summary:hover {
background: rgba(255, 255, 255, 0.1);
padding-left: 25px;
}

/* Supprime le marker par défaut */
.faq-item summary::-webkit-details-marker {
display: none;
}

/* Icône + / - avec rotation smooth */
.faq-item summary::after {
content: '+';
color: #9dbdff;
font-size: 24px;
font-weight: 700;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.8;
transform: rotate(0deg);
flex-shrink: 0;
width: 30px;
text-align: center;
}

.faq-item summary:hover::after {
opacity: 1;
transform: scale(1.1) rotate(0deg);
}

.faq-item details[open] summary::after {
content: '−';
transform: rotate(180deg);
color: #74dee2;
}

.faq-item details[open] summary:hover::after {
transform: scale(1.1) rotate(180deg);
}

/* Animation d'ouverture/fermeture ultra-smooth */
.faq-content {
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 0;
opacity: 0;
background: rgba(255, 255, 255, 0.02);
}

.faq-item details[open] .faq-content {
max-height: 500px;
opacity: 1;
}

/* Contenu interne avec animation décalée */
.faq-inner {
padding: 20px;
transform: translateY(-10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.1s;
opacity: 0;
}

.faq-item details[open] .faq-inner {
transform: translateY(0);
opacity: 1;
}

/* Texte */
.faq-inner p {
margin: 0;
font-size: var(--font-size-body);
font-weight: 600;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}

.faq-inner b {
color: #74dee2;
font-weight: 800;
}

/* Responsive mobile optimisé */
@media (max-width: 768px) {
.faq-section {
padding: 30px 15px;
}

.faq-item {
margin-bottom: 8px;
}

.faq-item summary {
font-size: 18px;
padding: 15px;
min-height: 50px;
}

.faq-item summary:hover {
padding-left: 20px;
}

.faq-inner {
padding: 15px;
}

.faq-inner p {
font-size: 16px;
}

.faq-item summary::after {
font-size: 22px;
width: 25px;
}

/* Amélioration touch sur mobile */
.faq-item summary {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}
}

@media (max-width: 480px) {
.faq-section {
padding: 20px 10px;
}

.faq-item summary {
padding: 12px;
font-size: 17px;
}

.faq-item summary:hover {
padding-left: 17px;
}

.faq-inner {
padding: 12px;
}

.faq-inner p {
font-size: 15px;
}
}

/* Performance et accessibilité */
@media (prefers-reduced-motion: reduce) {
.faq-item,
.faq-content,
.faq-inner,
.faq-item summary::after {
transition-duration: 0.2s;
}
}


/* Active le défilement fluide pour tout le document */
html {
scroll-behavior: smooth;
}

@keyframes popIn {
0% {
opacity: 0;
transform: scale(0);
}
70% {
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}

/* Style initial de l'élément */
.crown-container {
opacity: 0;
transform: scale(0);
}

/* La classe qui déclenche l'animation */
.crown-visible {
animation: popIn 0.5s ease forwards;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: entry 50%;
}

.error-message {
color: #d9534f;
font-size: 14px;
margin-top: 5px;
display: block;
}

input[aria-invalid="true"] {
border-color: #d9534f;
}

/* Optimisation pour les utilisateurs qui préfèrent réduire les animations */
@media (prefers-reduced-motion: reduce) {
  * {
    /* On ralentit les animations basées sur le temps au lieu de les supprimer complètement */
    /* On ne touche pas à animation-timeline ici, pour laisser les animations au scroll fonctionner */
    animation-duration: 0.5s !important; /* Ralentit les animations fallback */
    transition-duration: 0.5s !important; /* Ralentit les transitions */
  }
}

/* Styles pour le footer */
.gellies-footer {
  background-color: #2E496A;
  color: white;
  padding: 60px 0 30px;
  margin-top: 0;
}

.gellies-footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.gellies-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.gellies-footer-logo img {
  width: 100px;
  height: auto;
}

.gellies-footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.gellies-footer-contact {
  color: #9dbdff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 15px;
}

.gellies-social-icons {
  display: flex;
  gap: 20px;
}

.gellies-social-link {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  transition: color 0.3s ease;
}

.gellies-linkedin:hover {
  color: #21aaff;
}

.gellies-instagram:hover {
  color: #ff5fca;
}

.gellies-social-icon {
  display: inline-flex;
  margin-right: 8px;
}

.gellies-social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Styles pour les informations légales */
.gellies-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
}

.gellies-footer-legal-section {
  flex: 1;
  min-width: 280px;
  margin-bottom: 25px;
}

.gellies-footer-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #9dbdff;
  margin-bottom: 20px;
}

.gellies-footer-legal-content {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.gellies-footer-legal-item {
  flex: 1;
  min-width: 200px;
}

.gellies-footer-legal-item h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: white;
  margin-bottom: 10px;
}

.gellies-footer-legal-item p {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 5px 0;
  line-height: 1.4;
}

/* Styles pour les liens du footer */
.gellies-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}

.gellies-footer-link {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: white;
  text-decoration: none;
}

.gellies-footer-link:hover {
  color: #9dbdff;
  font-weight: 500;
}

/* Styles pour le bas du footer */
.gellies-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  text-align: center;
}

.gellies-footer-copyright {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.gellies-heart {
  color: #ff5a5f;
  display: inline-block;
  animation: heartbeat 1.5s ease infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Responsive pour le footer */
@media (max-width: 768px) {
  .gellies-footer-legal {
    flex-direction: column;
  }
  
  .gellies-footer-links {
    justify-content: left;
  }
  
  .gellies-footer-certifications {
    justify-content: center;
  }
  
  .gellies-footer-top {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .gellies-footer-social {
    align-items: center;
  }
  
  .gellies-social-icons {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Cible spécifiquement les animations que l'on veut vraiment stopper ou simplifier */
  .stars::before, /* Désactive le shimmer sur les étoiles */
  .gellies-unique-bar-fill.gellies-unique-primary, /* Désactive le flux de gradient */
  .gellies-unique-bar-fill.gellies-unique-secondary, /* Désactive le shimmer */
  .gellies-unique-crown, /* Désactive la flottaison de la couronne */
  .arrow-svg, /* Désactive la pulsation de la flèche */
  .quote-svg /* Désactive la pulsation de la citation */
  {
      animation-name: none !important; /* Stoppe les animations répétitives spécifiques */
  }

  /* Pour les animations d'apparition pilotées par le scroll, elles devraient toujours se produire */
  /* car elles sont liées à l'interaction de l'utilisateur. */
  /* Si on voulait les désactiver aussi, il faudrait ajouter ici [animation-timeline~=view] { animation: none !important; } */
  /* Mais ce n'est généralement pas souhaité pour les animations au scroll. */
}

/* Ajustement pour le surlignage sur mobile */
@media (max-width: 768px) {
  .gellies-title-bg {
    left: 0;
    right: 0;
    /* Cela alignera le fond exactement avec les bords du texte conteneur sur mobile, */
    /* supprimant le petit débordement, ce qui devrait résoudre le problème de la ligne trop longue. */
    /* L\'animation transform-origin: left center; restera fonctionnelle. */
  }
}



/* Styles pour la section des soutiens */
.soutiens {
      position: relative;
      z-index: 1;
    }
    
/* Styles pour le sélecteur de langue */
.language-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px auto 20px;
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.language-selector-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
  font-family: 'Nunito', sans-serif;
}

.language-selector-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.lang-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.lang-btn.active {
  background: #74BDEE;
  color: white;
  border-color: #74BDEE;
  box-shadow: 0 2px 8px rgba(116, 189, 238, 0.3);
}

@media (max-width: 768px) {
  .language-selector {
    margin: 20px auto 15px;
    padding: 10px;
  }
  
  .language-selector-label {
    font-size: 12px;
    margin-bottom: 8px;
  }
  
  .lang-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}
    @media (max-width: 768px) {

      
      /* Optimisation spécifique pour iPhone 14 Pro Max et similaires */
      @media (min-width: 420px) and (max-width: 440px) {
        .gh-image-mobile {
          margin-bottom: -60px; /* Uniformisation à -80px (était -100px) */
          width: 140%;
          max-width: 140%;
        }
        
        .gh-right-content {
          margin-bottom: 0; /* Neutralisé: l'image mobile est dans la colonne gauche */
        }
        

      }
    }
    

      
      /* Optimisation spécifique pour iPhone SE et très petits écrans */
      @media (max-width: 375px) {
        .gh-image-mobile {
          margin-bottom: -60px; /* Uniformisation à -80px (était -65px) */
          width: 140%;
          max-width: 140%;
        }
        
        .gh-right-content {
          margin-bottom: 0; /* Neutralisé: l'image mobile est dans la colonne gauche */
        }
      }
    
    
    /* Optimisation pour les écrans de taille moyenne */
    @media (min-width: 376px) and (max-width: 419px) {
      .gh-image-mobile {
        margin-bottom: -60px; /* Uniformisation à -80px (était -75px) */
        width: 140%;
        max-width: 140%;
      }
      
      .gh-right-content {
        margin-bottom: 0; /* Neutralisé: l'image mobile est dans la colonne gauche */
      }
      
    }

/* ===============================================
   STYLES POUR LE SÉLECTEUR DE LANGUE
   =============================================== */

/* Styles pour le bouton de langue dans le header */
.header-lang-btn {
  background-color: rgba(151, 203, 255, 0.1);
  border: 1px solid rgba(151, 203, 255, 0.3);
  border-radius: 6px;
  color: #cdcdcd;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  margin-left: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}

.header-lang-btn:hover {
  background-color: rgba(151, 203, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-lang-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animation de mise en évidence pour le sélecteur de langue */
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(116, 189, 238, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(116, 189, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(116, 189, 238, 0); }
}

.language-selector-highlight {
  animation: highlightPulse 1.5s ease-out;
}

/* Styles communs pour les sélecteurs de langue */
.language-selector,
.mobile-language-selector {
  margin: 25px auto;
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.language-selector-label,
.mobile-language-selector-label {
  font-size: 15px;
  margin-bottom: 10px;
  color: #ffffff; 
  font-weight: 700; 
  letter-spacing: 0.02em; 
}

.language-selector-buttons,
.mobile-language-selector-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permettre le retour à la ligne sur petits écrans */
  gap: 10px; /* Augmentation de l'espace entre les boutons */
  margin: 0 auto;
}

.lang-btn,
.mobile-lang-btn {
  background-color: #97cbff1a; /* Fond légèrement plus clair */
  border: 2px solid #e2e8f0; /* Bordure plus épaisse */
  border-radius: 6px; /* Coins plus arrondis */
  padding: 8px 12px; /* Padding augmenté */
  font-size: 15px; /* Taille de police augmentée */
  font-weight: 600; /* Police plus grasse */
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner du relief */
  min-width: 60px; /* Largeur minimale pour uniformité */
}

.lang-btn:hover,
.mobile-lang-btn:hover {
  background-color: #e2e8f0;
  transform: translateY(-1px); /* Effet de soulèvement au survol */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée au survol */
}

.lang-btn.active,
.mobile-lang-btn.active {
  background-color: #74BDEE;
  color: white;
  border-color: #5ba8d9; /* Bordure légèrement plus foncée */
  box-shadow: 0 2px 5px rgba(116, 189, 238, 0.4); /* Ombre colorée pour l'état actif */
  font-weight: 700; /* Plus gras pour l'état actif */
}

/* Styles spécifiques pour le sélecteur mobile */
.mobile-language-selector {
  margin: 20px 0;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Bordure légèrement plus visible */
}

.mobile-language-selector-label {
  color: white;
  opacity: 0.95; /* Augmentation de l'opacité pour meilleure lisibilité */
  font-size: 14px;
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Ombre de texte pour meilleur contraste */
}

.mobile-lang-btn {
  background-color: rgba(255, 255, 255, 0.15); /* Fond légèrement plus visible */
  border-color: rgba(255, 255, 255, 0.3); /* Bordure plus visible */
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Ombre de texte subtile */
}

.mobile-lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px); /* Effet de soulèvement au survol */
}

.mobile-lang-btn.active {
  background-color: #74BDEE;
  color: white;
  border-color: #5ba8d9; /* Bordure légèrement plus foncée */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Ombre de texte pour meilleur contraste */
}

.gellies-mobile-language {
  margin: 16px 0 0 0; /* sous le bouton, aligné à gauche */
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Responsive pour le sélecteur de langue */
@media (max-width: 768px) {
  .language-selector-buttons,
  .mobile-language-selector-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* Espacement réduit sur mobile */
  }
  
  .language-selector {
    margin: 35px auto 20px;
    padding: 0 15px; /* Ajout de padding horizontal */
    max-width: 100%;
  }
  
  .lang-btn,
  .mobile-lang-btn {
    padding: 8px 10px; /* Padding légèrement réduit sur mobile */
    min-width: 55px; /* Largeur minimale réduite sur mobile */
    margin-bottom: 5px; /* Espacement vertical entre les lignes */
  }
  
  /* Réduire légèrement la taille du texte du label sur très petits écrans */
  @media (max-width: 360px) {
    .language-selector-label,
    .mobile-language-selector-label {
      font-size: 13px;
    }
  }
}



/* Firefox-specific fixes */
@-moz-document url-prefix() {
  /* Fix for header image in Firefox */
  .gh-image-container {
    width: 100%;
    height: 120%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
  }
  
  .gh-image {
    width: 200%;
    max-width: none;
    height: auto;
    object-fit: contain;
  }
  
  .gh-image-mobile {
    width: 150%;
    max-width: 150%;
    height: auto;
    object-fit: contain;
  }
  
}

        
        /* Réduction de la taille des textes spécifiques sur mobile */
  @media (max-width: 768px) {
          .gll-text-a1b2c3 p,
          .titlesection2-description,
          .gellies-group-text,
          .gellies-form-note {
              font-size: 17px !important;
          }
      }

/* Ces règles ont été déplacées et consolidées dans la section de nettoyage à la fin du fichier */



/* Ces règles ont été déplacées et consolidées dans la section de nettoyage à la fin du fichier */

/* Règle pour forcer la première ligne sur desktop */
@media (min-width: 1025px) {
  /* Forcer les 3 premiers ingrédients à apparaître côte à côte sur la première ligne */
  .ingredients-masonry-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row dense !important;
    gap: 24px !important;
    grid-auto-rows: auto !important;
  }
  
  /* Placement spécifique des 3 premiers ingrédients */
  .ingredient-showcase-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ingredient-showcase-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .ingredient-showcase-card:nth-child(3) { grid-column: 3; grid-row: 1; }
}

/* === NETTOYAGE ET CORRECTION DES CONFLITS CSS INGRÉDIENTS === */

/* Hauteurs des cartes */
@media (min-width: 1025px) {
  /* Hauteurs différenciées mais raisonnables */
  .ingredient-showcase-short  { min-height: 180px !important; }
  .ingredient-showcase-medium { min-height: 240px !important; }
  .ingredient-showcase-tall   { min-height: 300px !important; }
  
  /* Largeur automatique pour les cartes */
  .ingredient-showcase-card {
    width: 100% !important;
  }
}

/* Version desktop plus petite (13-14") : 2 colonnes pour éviter l'alignement identique */
@media (min-width: 1025px) and (max-width: 1366px) {
  .ingredients-masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  /* Placement spécifique des 3 premiers ingrédients sur écrans plus petits */
  .ingredient-showcase-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ingredient-showcase-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .ingredient-showcase-card:nth-child(3) { grid-column: 1; grid-row: 2; }
}

/* Règles pour mobile */
@media (max-width: 768px) {
  .ingredients-masonry-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    height: auto !important;
    align-content: stretch !important;
  }

  .ingredient-showcase-card {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  .ingredients-masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Suppression des règles font-size dupliquées */
@media (min-width: 1025px) {
  .ingredient-showcase-name {
    font-size: 20px !important;
  }
  .ingredient-showcase-benefit {
    font-size: 14px !important;
  }
}


/* ========================= Section Offre Produit (PO) ========================= */
:root{
  --po-blue-dark:#2E496A;
  --po-blue-light:#74BDEE;
  --po-mauve:#9DBDFF;
  --po-beige:#F3D9BD;
  --po-green:#51B280;
}

.po-section{ 
  background:#F7FAFD; 
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  padding-left: 10%;
  padding-right: 10%;
}
.po-container{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr;
  gap:clamp(28px,5vw,56px); align-items:start;
  padding-left:20px; padding-right:20px;
}
.po-content, .po-section *{ font-family:'Nunito',sans-serif; } /* Nunito partout */

.po-media{text-align:center; align-self:start;}
.po-image{ width:min(520px,94%); height:auto; margin-top:-6px; filter:drop-shadow(0 22px 44px rgba(46,73,106,.15)); }

/* ---------- Preuve sociale (avatars + barre étoiles à la Trustpilot) ---------- */
.po-social-proof{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:nowrap;
  color:var(--po-blue-dark);
  font-weight:800; font-size:13px; padding: 8px 14px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 6px 14px rgba(46, 73, 106, .06);
  border: 1px solid #f0f4f8;
  transition: all 0.2s ease;
}
.po-social-proof:hover{
  box-shadow: 0 8px 20px rgba(46, 73, 106, .12);
  border-color: var(--po-green);
  transform: scale(1.05);
  filter: brightness(1.05);
}
.po-avatars{ display:inline-flex; align-items:center; }
.po-avatar-1{
  width:22px; height:22px; border-radius:50%;
  background:url('https://mygellies.com/img/testimonial_cat_1.webp') center/cover no-repeat;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.08); margin-left:-8px;
}
.po-avatar-2{
  width:22px; height:22px; border-radius:50%;
  background:url('https://mygellies.com/img/testimonial_cat_2.webp') center/cover no-repeat;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.08); margin-left:-8px;
}
.po-avatar-3{
  width:22px; height:22px; border-radius:50%;
  background:url('https://mygellies.com/img/testimonial_cat_3.webp') center/cover no-repeat;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.08); margin-left:-8px;
}

/* Barre d’étoiles : base grise + couche verte recadrée à --po-rating */
.po-stars-wrap{ position:relative; display:inline-flex; align-items:center; gap:8px; }
/* Conteneur des 2 couches (base grise + remplissage vert) */
.po-stars-box{ position:relative; display:inline-block; }
.po-stars-track{ display:inline-flex; position:relative; z-index:0; }
.po-starbox{
  width:18px; height:18px; border-radius:4px; margin-right:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; line-height:1; color:#fff; user-select:none;
}
.po-stars-track .po-starbox{ background:var(--po-green); }
/* Ancien système de recadrage (désactivé) */
.po-stars-fill{ display:none; }
.po-rating-text{ font-weight:900; color:#27415e; font-size:12px; }
.po-social-text{ white-space:nowrap; font-weight:800; }

/* ---------- Titre / Prix / Badges ---------- */
.po-title{
  margin:16px 0 6px; color:var(--po-blue-dark);
  font-weight:900; line-height:1.15; font-size:clamp(20px,2.6vw,28px);
}
.po-price-row{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:14px 0 18px; }
.po-price{ color:var(--po-mauve); font-weight:900; font-size:clamp(26px,3.2vw,34px); }
.po-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef3f8; color:#375371; border:1px solid #dbe6f1; border-radius:8px;
  font-weight:800; font-size:10px; padding:6px 12px;
  transition: all 0.2s ease;
}
.po-badge:hover{
  transform: scale(1.05);
  }
.po-info{ flex:0 0 auto; vertical-align:middle; }

/* ---------- Accroche & Bénéfices ---------- */
.po-tagline{ color:var(--po-blue-dark); font-size:18px; font-weight:800; margin:8px 0 6px; }
.po-benefits{
  margin:12px 0 22px; padding-left:0; list-style:none;
  display:grid; grid-template-columns:1fr; gap:12px;
  color:#23415f; font-size:16px;
}
@media (min-width:992px){ .po-benefits{ font-size:18px; } }
.po-benefits li strong{ font-weight:700; }
.po-benefits li::first-letter{ 
  margin-right: 4px; /* Espace après l'emoji */
}

/* ---------- Sélecteur de quantité ---------- */
.po-qty{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid #e7eef6; border-radius:12px; background:#fff;
  padding:6px; margin:6px 0 4px;
}
.po-qty-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid #dbe6f1;
  background:#f5f8fc; color:#27415e; font-weight:900; font-size:18px; cursor:pointer;
}
.po-qty-input{
  width:64px; text-align:center; font-weight:900; font-size:16px; border:none; outline:none; color:#27415e; background:transparent;
  -webkit-appearance: none;
  -moz-appearance:textfield; /* Firefox: no arrows */
  appearance: none;
}
.po-qty-input::-webkit-outer-spin-button,
.po-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Chrome/Safari: no arrows */

/* ---------- CTA ---------- */
.po-cta{ margin:14px 0 10px; }
.po-button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:560px; padding:18px 26px; border-radius:12px; border:none; cursor:pointer;
  background:var(--po-blue-light); color:#fff;
  font-weight:900; font-size:clamp(18px,1.6vw,22px); letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(116,189,238,.35);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.po-button:hover{ transform:scale(1.05); box-shadow:0 14px 28px rgba(116,189,238,.45);}
.po-button:active{ transform:translateY(0); }
.po-button-plus{ font-size:22px; font-weight:900; line-height:1; }

/* ---------- Stock + livraison ---------- */
.po-stockline{ 
  margin-top:30px; display:flex; align-items:center; gap:8px; 
  font-weight:800; color:#375371; flex-wrap:nowrap;
}
.po-stockcheck{
  background:#fff; color:var(--po-green); border:2px solid #c7e9d8; width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
}
.po-stockgreen{ color:var(--po-green); }
.po-sep{ opacity:.6; }

/* ---------- Paiements sécurisés ---------- */
.po-payments{
  margin-top:20px; color:var(--po-blue-dark); font-weight:800;
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  background:#fff; border:2px solid #e7eef6; border-radius:12px; padding:14px 16px;
  box-shadow:0 6px 14px rgba(46,73,106,.06);
  transition: all 0.2s ease;
}
.po-payments:hover{
  border-color: var(--po-blue-light);
  box-shadow:0 8px 20px rgba(46,73,106,.12);
}
.po-lock{
  display:flex; align-items:center; gap:3px;
  color:var(--po-blue-dark); font-weight:900;
}
.po-lock::before{
  content: '🔒';
  font-size: 14px;
}
.po-paylogo{ 
  height:20px; width:auto; display:block;
  transition: transform 0.2s ease;
}
.po-paylogo:hover{
  transform: translateY(-1px);
}

/* ---------- Accordéon ---------- */
.po-accordion{ margin-top:16px; display:grid; gap:10px; }
.po-acc-item{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:#fff; color:var(--po-blue-dark);
  border:2px solid #e7eef6; border-radius:12px; padding:14px 16px;
  font-weight:900; font-size:16px; text-align:left; cursor:pointer;
  transition: all 0.2s ease;
}
.po-acc-item:hover{
  border-color: var(--po-blue-light);
  box-shadow: 0 4px 12px rgba(46,73,106,.08);
}
.po-acc-plus{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #dbe6f1; background:#f5f8fc; font-weight:900;
  transition: all 0.2s ease;
}
.po-acc-item:hover .po-acc-plus{
  border-color: var(--po-blue-light);
  background: var(--po-blue-light);
  color: #fff;
}
.po-acc-panel{
  background:#fff; border:2px solid #e7eef6; border-radius:12px; padding:20px 24px;
  color:#27415e; font-weight:400; line-height:1.6; font-size:15px;
}

/* Contenu accordéon - Styles généraux */
.po-acc-panel p{
  margin: 0 0 16px 0;
}
.po-acc-panel p:last-child{
  margin-bottom: 0;
}
.po-acc-panel strong{
  font-weight: 700;
  color: var(--po-blue-dark);
}
.po-acc-panel ul{
  margin: 12px 0;
  padding-left: 0;
  list-style: none;
}
.po-acc-panel li{
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}
.po-acc-panel li::before{
  content: "•";
  color: var(--po-green);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
.po-acc-panel hr{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dbe6f1 20%, #dbe6f1 80%, transparent);
  margin: 20px 0;
}

/* Table nutritionnelle */
.po-nutri{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(46,73,106,.08);
}
.po-nutri thead th{
  background: var(--po-blue-dark);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  border-bottom: 2px solid var(--po-blue-light);
}
.po-nutri tbody tr{
  border-bottom: 1px solid #f0f4f8;
}
.po-nutri tbody tr:last-child{
  border-bottom: none;
}
.po-nutri tbody tr:nth-child(even){
  background: #f9fbfd;
}
.po-nutri tbody td{
  padding: 10px 16px;
  font-size: 14px;
  color: #375371;
}
.po-nutri tbody td:first-child{
  font-weight: 600;
  color: var(--po-blue-dark);
}
.po-nutri tbody td:not(:first-child){
  text-align: right;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

/* Boîte écologique dans l'accordéon livraison */
.po-eco-box{
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5ed 100%);
  border: 2px solid var(--po-green);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0 0 0;
  position: relative;
}
.po-eco-box::before{
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, var(--po-green), #3d8b5c);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.1;
}
.po-eco-box p{
  margin: 0;
  color: #2d5a3d;
  font-weight: 600;
}
.po-eco-box strong{
  color: var(--po-green);
  font-weight: 700;
}

/* Responsive table */
@media (max-width: 768px){
  .po-nutri{
    font-size: 12px;
  }
  .po-nutri thead th{
    padding: 8px 12px;
    font-size: 12px;
  }
  .po-nutri tbody td{
    padding: 8px 12px;
    font-size: 12px;
  }
  .po-acc-panel{
    padding: 16px 20px;
    font-size: 14px;
  }
  .po-eco-box{
    padding: 12px 16px;
  }
}

@media (max-width: 480px){
  .po-nutri thead th{
    padding: 6px 8px;
    font-size: 11px;
  }
  .po-nutri tbody td{
    padding: 6px 8px;
    font-size: 11px;
  }
  .po-acc-panel{
    padding: 14px 16px;
    font-size: 13px;
  }
  .po-acc-panel li{
    padding-left: 16px;
  }
}

/* ---------- Layout ---------- */
@media (min-width:992px){
  .po-container{ grid-template-columns:1.1fr 1fr; gap:60px; }
  .po-media{ text-align:right; }
  .po-image{ width:520px; max-width:100%; margin-left:-10px; }
}

/* ---------- Responsive tablette ---------- */
@media (max-width:991.98px){
  .po-social-text{ font-size:12px; }
  .po-rating-text{ display:none; }
  .po-title{ font-size:clamp(20px,4.6vw,26px); }
  .po-price{ font-size:clamp(24px,5vw,32px); }
  .po-benefits{ font-size:16px; }
  .po-container{ gap:clamp(20px,4vw,40px); }
}

/* ---------- Responsive mobile ---------- */
@media (max-width:768px){
  .po-section{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: var(--spacing-section-mobile);
    padding-bottom: var(--spacing-section-mobile);
  }
  .po-container{
    padding-left: 0;
    padding-right: 0;
    gap: 24px;
  }
  .po-social-proof{
    gap: 6px;
    padding: 8px 10px;
  }
  .po-social-text{
    font-size: 11px;
  }
  .po-stockline{
    font-size: 14px;
    gap: 6px;
  }
  .po-stockcheck{
    width: 16px; height: 16px;
    font-size: 11px;
  }
  .po-payments{
    padding: 12px 14px;
    gap: 8px;
  }
  .po-lock{
    font-size: 12px;
  }
  .po-paylogo{
    height: 16px;
  }
}

@media (max-width:480px){
  .po-stars-wrap{ 
    gap: 4px;
    flex-wrap: nowrap;
  }
  .po-stars-wrap .po-starbox{ width:14px; height:14px; font-size:10px; margin-right: 2px; }
  .po-social-proof{
    padding: 6px 8px;
    font-size: 10px;
    gap: 4px;
  }
  .po-social-text{
    font-size: 9px;
    line-height: 1.2;
  }
  .po-avatar-1, .po-avatar-2, .po-avatar-3{
    width: 16px;
    height: 16px;
  }
  .po-title{
    font-size: clamp(18px,5vw,22px);
  }
  .po-stockline{
    font-size: 12px;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .po-stockcheck{
    width: 14px; height: 14px;
    font-size: 10px;
  }
  .po-payments{
    padding: 10px 12px;
    gap: 6px;
  }
  .po-lock{
    font-size: 11px;
  }
  .po-paylogo{
    height: 14px;
  }
}
/* ========================= Section Offre Produit (PO) ========================= */


/* ========================= About CTA ========================= */
.about-cta {
  margin-top: 24px;
}

.about-cta-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #2E496A; /* Better contrast on light blue */
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 6px 16px rgba(157, 189, 255, 0.4);
}

.about-cta-btn:hover {
  transform: translateY(-2px);
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(157, 189, 255, 0.5);
}

.about-cta-btn:active {
  transform: translateY(0);
}



/* Bloc secret (version carte avec icône) */
.gellies-secret-block {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  background: rgba(157, 189, 255, 0.3); /* #9DBDFF @ 30% */
  border-radius: 24px;
  padding: 12px 16px;
  color: #2E496A;
  max-width: 640px;
  margin: 12px auto 0 auto;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.gellies-secret-block .subtitle-standardized {
  margin: 0 0 6px 0;
  font-size: clamp(14px, 1vw, 15px);
  font-size: clamp(15px, 1.1vw, 17px);
}

.gellies-secret-block .body-text-standardized {
  margin: 0;
  color: #2E496A;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.5;
}

.gellies-secret-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #2E496A;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #2E496A;
  line-height: 1;
}

@media (max-width: 768px) {
  .gellies-secret-block {
    grid-template-columns: 24px 1fr;
    border-radius: 22px;
    padding: 10px 12px;
    margin-top: 50px;
  }
  .gellies-secret-icon {
    width: 24px;
    height: 24px;
    border-width: 2px;
    font-size: 11px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .gellies-secret-block:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
}

/* Espacement dédié avant la ligne avec l'emoji dans le bloc secret */
.gellies-secret-gap {
  display: block;
  height: 10px; /* Espace vertical visible sur desktop/tablette */
}
@media (max-width: 768px) {
  .gellies-secret-gap {
    height: 8px; /* Légèrement réduit sur mobile */
  }
}

/* ============================================================================
   SECTION MÉDIAS - "Ils parlent de nous"
   ============================================================================ */

/* Container principal de la section médias */
.gellies-media-section {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  padding-left: 10%;
  padding-right: 10%;
  background-color: #ffffff;
}

/* Sous-titre de la section */
.gellies-media-subtitle {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 3vw, 24px);
  color: #2E496A;
  text-align: left;
  margin: 20px 0 60px 0;
  max-width: 800px;
  opacity: 0;
}

/* Grille des cartes médias - 3 colonnes sur desktop */
.gellies-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Carte média individuelle */
.gellies-media-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(46, 73, 106, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  min-height: 300px;
  border: 1px solid rgba(46, 73, 106, 0.08);
}

/* Container interne pour la carte */
.gellies-media-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* Image de fond de la carte - discrète */
.gellies-media-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(70%) blur(2px);
  opacity: 0.3;
}

/* Overlay léger pour le fond blanc */
.gellies-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.80) 100%
  );
}

/* Contenu de la carte positionné au-dessus de l'overlay */
.gellies-media-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 300px;
  padding: 28px 24px 24px;
  gap: 14px;
}

/* Logo du média en haut */
.gellies-media-logo {
  margin-bottom: 12px;
  align-self: flex-start;
}

.gellies-media-logo img {
  max-width: 56px;
  height: auto;
  opacity: 1;
  display: block;
  filter: none;
}

/* Citation / phrase d'accroche */
.gellies-media-quote {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 20px);
  color: #2E496A;
  line-height: 1.5;
  text-align: left;
  margin: 0;
  flex-grow: 1;
  text-shadow: none;
}

/* Style spécial pour les citations d'articles */
.gellies-media-quote-article {
  font-style: italic;
  font-weight: 600;
  opacity: 1;
  color: #2E496A;
}

/* Bouton CTA au bas de la carte */
.gellies-media-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  background-color: #ffffff;
  color: #2E496A;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  border-radius: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(46, 73, 106, 0.15);
  align-self: flex-start;
  margin-top: 0;
}

.gellies-media-cta svg {
  transition: transform 0.3s ease;
  width: 13px;
  height: 13px;
}

/* Effet hover sur la carte */
@media (hover: hover) and (pointer: fine) {
  .gellies-media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(46, 73, 106, 0.14);
  }

  .gellies-media-cta:hover {
    background-color: #9dbdff;
    color: #ffffff;
    transform: scale(1.03);
    box-shadow: 0 3px 10px rgba(157, 189, 255, 0.4);
  }

  .gellies-media-cta:hover svg {
    transform: translateX(3px);
  }
}

/* Responsive: Tablette (2 colonnes) */
@media (max-width: 1024px) {
  .gellies-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .gellies-media-card:last-child {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Responsive: Mobile (1 colonne) */
@media (max-width: 768px) {
  .gellies-media-section {
    padding-top: var(--spacing-section-mobile);
    padding-bottom: var(--spacing-section-mobile);
    padding-left: 20px;
    padding-right: 20px;
  }

  .gellies-media-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .gellies-media-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .gellies-media-card {
    min-height: 240px;
  }

  .gellies-media-card-inner {
    min-height: 240px;
  }

  .gellies-media-content {
    min-height: 240px;
    padding: 24px 20px 20px;
    gap: 12px;
  }

  .gellies-media-logo img {
    max-width: 50px;
  }

  .gellies-media-quote {
    font-size: 17px;
  }

  .gellies-media-cta {
    padding: 7px 14px;
    font-size: 12px;
  }
  
  .gellies-media-cta svg {
    width: 12px;
    height: 12px;
  }

  .gellies-media-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }
}

/* Animation d'apparition des cartes */
@keyframes mediaCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}