/* ===================================================================
   HERO MAYAGE MODERNISÉ - FICHIER CSS COMPLET ET ÉQUILIBRÉ
   Design 2/3 Animation + 1/3 Chiffres Clés - Version Finale + Modifications
   =================================================================== */

   .mayage-hero-gsap {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    overflow: hidden;
    z-index: 10;
  }
  
  /* ===================================================================
     LOGO EN ARRIÈRE-PLAN - OPTIMISÉ
     =================================================================== */
  
  .mayage-hero-gsap__logo-bg {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    width: 100vw;
    max-width: 1400px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mayage-logo-bg {
    width: 100%;
    height: auto;
    opacity: 0.08;
    filter: grayscale(20%) brightness(0.9);
    transition: opacity 0.3s ease;
    display: block;
    margin: 0 auto;
    max-width: 1200px;
    max-height: 800px;
    object-fit: contain;
    object-position: center;
  }
  
  /* ===================================================================
     CONTAINER PRINCIPAL - LAYOUT 2/3 + 1/3
     =================================================================== */
  
  .mayage-hero-gsap__container {
    width: 100%;
    max-width: 1675px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 10;
  }
  
  /* ===================================================================
     SECTION ANIMATION (2/3 gauche)
     =================================================================== */
  
  .mayage-hero-gsap__animation-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 4rem;
    width: 100%;
  }
  
  .mayage-hero-gsap__animated-text {
    text-align: left;
    width: 100%;
  }
  
  .mayage-hero-gsap__title {
    font-family: var(--font-logo, "Comfortaa", sans-serif);
    font-size: clamp(2.5rem, 5vw, 3.7rem);
    font-weight: 400;
    line-height: 1.2;
    color: #2d3748;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 140px;
    align-items: flex-start;
  }
  
  .mayage-hero-gsap__text-part {
    color: #4a5568;
  }
  
  .mayage-hero-gsap__typewriter-word {
    position: relative;
    display: inline-block;
    color: #005e99;
    font-weight: 600;
    min-width: 250px;
    text-align: left;
    font-family: "Comfortaa", sans-serif !important;
  }
  
  .mayage-hero-gsap__typewriter-word::after {
    content: "\A";
    white-space: pre;
  }
  
  .mayage-hero-gsap__text-part:last-child {
    display: block;
    width: 100%;
    /* margin-top: 0.5rem; */
  }
  
  .mayage-hero-gsap__typewriter-text {
    display: inline;
    background: linear-gradient(135deg, #005e99 0%, #2ab8cb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: "Comfortaa", sans-serif !important;
    font-weight: 900 !important;
  }
  
  .mayage-hero-gsap__cursor {
    display: inline-block;
    background-color: transparent;
    margin-left: 1px;
    width: 1px;
    animation: blink 1s infinite;
    font-weight: normal;
    color: transparent;
    opacity: 0;
  }
  
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  
  /* ===================================================================
     NUAGE DE MOTS - BULLES PLUS PETITES + ALIGNEMENT GAUCHE
     =================================================================== */
  
  .mayage-hero-gsap__word-cloud {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;  /* ← ALIGNEMENT GAUCHE */
    width: 100% !important;
    max-width: 650px !important;  /* ← RÉDUIT */
    margin: 0 !important;  /* ← PAS DE AUTO = ALIGNÉ GAUCHE */
    padding: 0 !important;
  }
  
  .mayage-hero-gsap__word-line {
    display: flex !important;
    justify-content: flex-start !important;  /* ← ALIGNEMENT GAUCHE */
    align-items: center !important;
    gap: 1.2rem !important;  /* ← RÉDUIT */
    width: 100% !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
  }
  
  .mayage-hero-gsap__word-element {
    /* Structure de base */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* TAILLE RÉDUITE */
    width: 160px !important;  /* ← 220px → 160px */
    height: 60px !important;  /* ← 75px → 60px */
    min-width: 160px !important;
    max-width: 160px !important;
    padding: 0.8rem 1.5rem !important;  /* ← RÉDUIT */
    margin: 0 !important;
    box-sizing: border-box !important;
    
    /* Style visuel moderne */
    font-family: var(--font-body, "Nunito", sans-serif) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;  /* ← RÉDUIT */
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.2 !important;
    
    /* Design élégant - PLUS DE FOND BLANC */
    border: 2px solid #000 !important;  /* ← 3px → 2px */
    border-radius: 30px !important;  /* ← 38px → 30px */
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;  /* ← RÉDUIT */
    
    /* Transitions fluides */
    transition: all 0.3s ease !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    
    /* Propriétés de liens */
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    opacity: 1 !important;
    
    /* Anti-déformation flex */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 160px !important;  /* ← RÉDUIT */
  }
  
  .mayage-hero-gsap__word-element--link:hover {
    transform: scale(1.06) translateY(-2px) !important;  /* ← RÉDUIT */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18) !important;
    text-decoration: none !important;
    z-index: 15 !important;
  }
  
  .mayage-hero-gsap__word-text {
    font-size: 0.9rem !important;  /* ← RÉDUIT */
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    transition: transform 0.3s ease !important;
  }
  
  /* ===================================================================
     COULEURS MAYAGE - CHARTE GRAPHIQUE UNIQUEMENT
     =================================================================== */
  
  .mayage-hero-gsap__word-element--red {
    background: linear-gradient(135deg, #e94a42 0%, #d63031 100%) !important;
    border-color: #d63031 !important;
    color: white !important;
  }
  
  .mayage-hero-gsap__word-element--red:hover {
    box-shadow: 0 15px 30px rgba(233, 74, 66, 0.4) !important;
  }
  
  .mayage-hero-gsap__word-element--green {
    background: linear-gradient(135deg, #95c11f 0%, #6ab04c 100%) !important;
    border-color: #6ab04c !important;
    color: white !important;
  }
  
  .mayage-hero-gsap__word-element--green:hover {
    box-shadow: 0 15px 30px rgba(149, 193, 31, 0.4) !important;
  }
  
  .mayage-hero-gsap__word-element--blue {
    background: linear-gradient(135deg, #005e99 0%, #003d66 100%) !important;
    border-color: #003d66 !important;
    color: white !important;
  }
  
  .mayage-hero-gsap__word-element--blue:hover {
    box-shadow: 0 15px 30px rgba(0, 94, 153, 0.4) !important;
  }
  
  /* ===================================================================
     SECTION CHIFFRES CLÉS (1/3 droite) - MODIFICATIONS APPLIQUÉES
     =================================================================== */
  
  .mayage-hero-gsap__stats-section {
    background: linear-gradient(135deg, #005287 0%, #003d66 100%) !important; /* ← DÉGRADÉ AJOUTÉ */
    color: white;
    padding: 2rem 2.5rem 2rem 2rem !important;
    border-radius: 16px 0 0 16px !important;
    box-shadow: 0 20px 40px rgba(0, 82, 135, 0.3) !important;
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 30px solid #8bbe2a;
    width: calc(100% + 2rem) !important;
    margin-right: -2rem !important;
    aspect-ratio: 1.4 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Supprimer le titre principal */
  .mayage-hero-gsap__stats-title {
    display: none !important;
  }
  
  .mayage-hero-gsap__stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between !important;
    gap: 2rem !important;
    padding-top: 1rem !important;
  }
  
  .mayage-hero-gsap__stats-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .mayage-hero-gsap__stats-group-content {
    display: flex;
    flex-direction: row !important; /* ← ITEMS + CTA EN LIGNE */
    align-items: flex-start !important;
    gap: 2rem !important;
  }
  
  .mayage-hero-gsap__stats-group-items {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .mayage-hero-gsap__stats-group-title {
    font-family: var(--font-logo, "Comfortaa", sans-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important; /* ← ALIGNÉ À GAUCHE */
    color: white !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    position: relative !important;
  }
  
  .mayage-hero-gsap__stats-group-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0; /* ← ALIGNÉ À GAUCHE */
    transform: none; /* ← SUPPRIME LE CENTRAGE */
    width: 30px;
    height: 2px;
    background: #8cbe28 !important;
    border-radius: 2px;
  }
  
  /* Positionnement spécial pour le after sous le "&" */
  .mayage-hero-gsap__stats-group:first-child .mayage-hero-gsap__stats-group-title::after {
    left: 90px; /* ← POSITION APPROXIMATIVE SOUS LE "&" de "Offres & Adhérents" */
  }
  
  .mayage-hero-gsap__stats-group:last-child .mayage-hero-gsap__stats-group-title::after {
    left: 115px; /* ← POSITION APPROXIMATIVE SOUS LE "&" de "Secteur & Compétences" */
  }
  
  .mayage-hero-gsap__stat-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.3rem 0;
    position: relative;
  }
  
  .mayage-hero-gsap__stat-item:last-child {
    margin-bottom: 0;
  }
  
  .mayage-hero-gsap__stat-checkbox {
    width: 16px;
    height: 16px;
    background: #4a5568;
    border: 2px solid #8cbe28 !important;
    border-radius: 3px;
    margin-right: 0.8rem;
    position: relative;
    flex-shrink: 0;
  }
  
  .mayage-hero-gsap__stat-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8cbe28 !important;
    font-weight: bold;
    font-size: 11px;
  }
  
  .mayage-hero-gsap__stat-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  
  .mayage-hero-gsap__stat-number {
    font-family: var(--font-logo, "Comfortaa", sans-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #8cbe28 !important;
    line-height: 1;
    flex-shrink: 0;
  }
  
  .mayage-hero-gsap__stat-label {
    font-size: 1.15rem;
    color: white;
    line-height: 1.2;
    flex: 1;
  }
  
  /* Supprimer l'ancien CTA et ajouter les nouveaux */
  .mayage-hero-gsap__stats-cta {
    display: none !important;
  }
  
  /* Nouveaux CTA par groupe - POSITIONNÉ COMME ONCLE DES STAT-ITEMS */
  .mayage-hero-gsap__stats-group-cta {
    margin-top: 0 !important;
    text-align: center !important;
    flex-shrink: 0;
    align-self: center !important; /* ← CENTRÉ VERTICALEMENT PAR RAPPORT AUX ITEMS */
    order: 2; /* ← S'ASSURE QU'IL EST À DROITE */
  }
  
  .mayage-hero-gsap__stats-group-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #da3534 !important;
    color: white !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 12px rgba(140, 190, 40, 0.3) !important;
  }
  
  .mayage-hero-gsap__stats-group-link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(140, 190, 40, 0.4) !important;
    text-decoration: none !important;
    color: white !important;
    background: #7ba824 !important;
  }
  
  .mayage-hero-gsap__stats-group-link i {
    font-size: 0.9rem !important;
    color: white !important;
  }
  
  /* ===================================================================
     RESPONSIVE DESIGN HARMONIEUX
     =================================================================== */
  
  @media (max-width: 1200px) {
    .mayage-hero-gsap__container {
      gap: 3rem;
    }
    
    .mayage-hero-gsap__animation-section {
      padding-right: 1rem;
    }
    
    .mayage-hero-gsap__stats-section {
      padding: 1.8rem 2rem;
      aspect-ratio: 1.5 / 1;
    }
    
    .mayage-hero-gsap__word-cloud {
      max-width: 550px !important;
      gap: 1.3rem !important;
    }
    
    .mayage-hero-gsap__word-line {
      gap: 1rem !important;
    }
    
    .mayage-hero-gsap__word-element {
      width: 145px !important;
      height: 55px !important;
      min-width: 145px !important;
      max-width: 145px !important;
      flex-basis: 145px !important;
      font-size: 0.85rem !important;
      padding: 0.7rem 1.2rem !important;
    }
    
    .mayage-hero-gsap__word-text {
      font-size: 0.8rem !important;
    }
  }
  
  @media (max-width: 1024px) {
    .mayage-hero-gsap__container {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    
    /* ← ORDRE INVERSÉ : NUAGE EN PREMIER, STATS EN SECOND */
    .mayage-hero-gsap__animation-section {
      padding-right: 0;
      padding-left: 0;
      order: 1; /* ← NUAGE EN PREMIER */
    }
    
    .mayage-hero-gsap__stats-section {
      order: 2; /* ← STATS EN SECOND */
      max-width: 600px;
      margin: 0 auto !important;
      width: 100% !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      aspect-ratio: 2 / 1;
      padding: 2rem 2.5rem !important;
    }

    .mayage-hero-gsap__stats-content {
      flex-direction: row;
      gap: 2rem;
    }
    
    .mayage-hero-gsap__stats-group {
      flex: 1;
      flex-direction: column !important; /* ← GARDE LA STRUCTURE EN COLONNE SUR TABLETTE */
    }
    
    .mayage-hero-gsap__stats-group-content {
      flex-direction: column !important; /* ← RETOUR EN COLONNE SUR TABLETTE */
    }
    
    .mayage-hero-gsap__stats-group-cta {
      margin-top: 1rem !important; /* ← CTA EN DESSOUS SUR TABLETTE */
      align-self: flex-start !important;
    }
    
    .mayage-hero-gsap__animated-text {
      text-align: center;
    }
    
    .mayage-hero-gsap__title {
      justify-content: center;
    }
    
    .mayage-hero-gsap__typewriter-word {
      text-align: center;
    }
    
    /* ← NUAGE CENTRÉ SUR TABLETTE */
    .mayage-hero-gsap__word-cloud {
      align-items: center !important;
      margin: 0 auto !important;
      max-width: 500px !important;
    }
    
    .mayage-hero-gsap__word-line {
      justify-content: center !important;
    }
    
    .mayage-hero-gsap__logo-bg {
      left: 50%;
      width: 80vw;
    }
  }
  
  @media (max-width: 768px) {
    .mayage-logo-bg {
      display: none;
    }
    .mayage-hero-gsap {
      min-height: 70vh;
      padding: 2rem 1rem;
    }
    
    .mayage-hero-gsap__container {
      gap: 2rem;
    }
    
    .mayage-hero-gsap__title {
      flex-direction: column !important;
      align-items: center !important; /* ← CENTRAGE PARFAIT */
      justify-content: center !important;
      text-align: center !important;
      gap: 0.2rem;
      min-height: 100px;
      font-size: 2rem;
      width: 100% !important;
    }
    
    .mayage-hero-gsap__text-part {
      text-align: center !important; /* ← CHAQUE PARTIE CENTRÉE */
      width: 100% !important;
    }
    
    .mayage-hero-gsap__typewriter-word {
      min-width: 200px;
      text-align: center !important; /* ← MOT ANIMÉ CENTRÉ */
      width: 100% !important;
    }
    
    .mayage-hero-gsap__stats-section {
      padding: 1.5rem 2rem !important;
      border-radius: 12px !important;
      aspect-ratio: auto;
      margin: 0 !important;
      width: 100% !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .mayage-hero-gsap__stats-content {
      flex-direction: column;
      gap: 1.5rem;
    }
    
    .mayage-hero-gsap__stats-group {
      flex-direction: column !important; /* ← GARDE LA STRUCTURE EN COLONNE SUR MOBILE */
    }
    
    .mayage-hero-gsap__stats-group-content {
      flex-direction: column !important; /* ← RETOUR EN COLONNE SUR MOBILE */
    }
    
    .mayage-hero-gsap__stats-group-cta {
      margin-top: 1rem !important; /* ← CTA EN DESSOUS SUR MOBILE */
      align-self: flex-start !important;
    }
    
    /* ===================================================================
       NUAGE DE MOTS EN GRID 2x3 SUR MOBILE
       =================================================================== */
    
    .mayage-hero-gsap__word-cloud {
      display: grid !important; /* ← PASSAGE EN GRID */
      grid-template-columns: 1fr 1fr !important; /* ← 2 COLONNES */
      grid-template-rows: repeat(3, 1fr) !important; /* ← 3 LIGNES */
      gap: 1rem !important;
      justify-items: center !important;
      align-items: center !important;
      max-width: 400px !important;
      width: 100% !important;
      margin: 0 auto !important;
    }
    
    /* ← SUPPRESSION DES WORD-LINE SUR MOBILE */
    .mayage-hero-gsap__word-line {
      display: contents !important; /* ← PERMET AUX ENFANTS D'ALLER DIRECTEMENT DANS LE GRID */
    }
    
    .mayage-hero-gsap__word-element {
      width: 150px !important; /* ← TAILLE ADAPTÉE AU GRID */
      height: 50px !important;
      min-width: 150px !important;
      max-width: 150px !important;
      flex-basis: 150px !important;
      font-size: 0.8rem !important;
      padding: 0.6rem 1rem !important;
    }
    
    .mayage-hero-gsap__word-text {
      font-size: 0.75rem !important;
    }
  }
  
  @media (max-width: 480px) {
    .mayage-hero-gsap {
      min-height: 60vh;
      padding: 1.5rem 0.5rem;
    }
    
    .mayage-hero-gsap__stats-section {
      padding: 1.2rem 1.5rem;
    }
    
    .mayage-hero-gsap__title {
      font-size: 1.8rem !important; /* ← TAILLE RÉDUITE POUR TRÈS PETIT ÉCRAN */
      line-height: 1.3 !important;
    }
    
    /* ← GRID MOBILE PLUS PETIT */
    .mayage-hero-gsap__word-cloud {
      max-width: 320px !important;
      gap: 0.8rem !important;
    }
    
    .mayage-hero-gsap__word-element {
      width: 140px !important;
      height: 50px !important;
      min-width: 140px !important;
      max-width: 140px !important;
      flex-basis: 140px !important;
    }
  }
  
  /* ===================================================================
     ANIMATIONS ET ÉTATS INITIAUX
     =================================================================== */
  
  .mayage-hero-gsap__word-element {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  
  .mayage-hero-gsap__stats-section {
    opacity: 0;
    transform: translateX(30px);
  }
  
  .mayage-hero-gsap__stat-item {
    opacity: 0;
    transform: translateX(20px);
  }
  
  /* ===================================================================
     ACCESSIBILITÉ
     =================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .mayage-hero-gsap__word-element,
    .mayage-hero-gsap__stats-section,
    .mayage-hero-gsap__stat-item {
      animation: none !important;
      transition: none !important;
    }
    
    .mayage-hero-gsap__cursor {
      animation: none !important;
    }
  }
  
  .mayage-hero-gsap__word-element:focus,
  .mayage-hero-gsap__stats-link:focus {
    outline: 3px solid #2ab8cb;
    outline-offset: 2px;
  }
  
  /* ===================================================================
     PERFORMANCE
     =================================================================== */
  
  .mayage-hero-gsap__word-element,
  .mayage-hero-gsap__stats-section,
  .mayage-hero-gsap__typewriter-text {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }