/* ==========================================================================
   1. BASES & CONFIGURATION GLOBALE
   ========================================================================== */

   @import '../variables.css';

   html {
       /* Indispensable : réserve l'espace de la barre de scroll pour éviter les sauts */
       scrollbar-gutter: stable;
   }
   
   /* Blocage du défilement (Lightbox active) */
   html.no-scroll, 
   html.no-scroll body {
       overflow: hidden !important;
       height: auto !important;
   }
   
   body.no-scroll {
       overflow: hidden;
       height: 100vh;
       padding-right: 0px; 
   }
   
   /* ==========================================================================
      2. HERO SECTION (INTRODUCTION)
      ========================================================================== */
   
   .club-intro-header {
       padding: 160px 0 80px;
       background: linear-gradient(rgba(28, 59, 110, 0.03), var(--beige));
       text-align: center;
   }
   
   .gold-label { 
       color: var(--gold); 
       font-weight: 700; 
       letter-spacing: 2px; 
       text-transform: uppercase;
       font-size: 0.8rem;
       display: block;
       margin-bottom: 15px;
   }
   
   /* ==========================================================================
      3. LAYOUT ZIGZAG (CONTENU PRINCIPAL)
      ========================================================================== */
   
   .zigzag-container {
       padding: 80px 0;
       background-color: var(--beige);
   }
   
   .zigzag-row {
       display: flex;
       align-items: center;
       gap: 80px;
       margin-bottom: 120px;
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;
   }
   
   .zigzag-row.reverse {
       flex-direction: row-reverse;
   }
   
   .zigzag-column {
       flex: 1;
   }
   
   /* --- TYPOGRAPHIE DU CONTENU --- */
   
   .step-number {
       font-family: 'Montserrat', sans-serif;
       font-weight: 800;
       font-size: 1rem;
       color: var(--accent);
       opacity: 0.3;
       display: block;
       margin-bottom: 10px;
   }
   
   .zigzag-text h2 {
       font-size: 2.5rem;
       margin-bottom: 25px;
       color: var(--primary);
   }
   
   .zigzag-text p {
       color: var(--primary);
       opacity: 0.8;
       line-height: 1.6;
   }
   
   /* ==========================================================================
      4. MÉDIAS & COMPOSANTS VISUELS
      ========================================================================== */
   
   .club-img {
       width: 100%;
       aspect-ratio: 16/9;
       object-fit: cover;
       border-radius: 40px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.03);
       cursor: zoom-in;
       /* Transition fluide pour le retour de survol */
       transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                   box-shadow 0.8s ease;
   }
   
   .club-img:hover {
       transform: scale(1.03);
       box-shadow: 0 30px 60px rgba(0,0,0,0.08);
   }
   
   /* ==========================================================================
      5. SYSTÈME DE LIGHTBOX (ZOOM PLEIN ÉCRAN)
      ========================================================================== */
   
   .lightbox-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 9999;
       display: flex;
       justify-content: center;
       align-items: center;
       
       /* Effet verre dépoli Premium */
       background-color: rgba(247, 243, 232, 0.4); 
       backdrop-filter: blur(25px);
       -webkit-backdrop-filter: blur(25px);
       
       opacity: 0;
       visibility: hidden;
       transition: all 0.5s ease;
   }
   
   .lightbox-overlay.active {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
   }
   
   .lightbox-image-container {
       width: 70vw;   
       height: 70vh;  
       display: flex;
       justify-content: center;
       align-items: center;
       /* Effet de pop à l'ouverture */
       transform: scale(0.95); 
       transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   
   .lightbox-overlay.active .lightbox-image-container {
       transform: scale(1);
   }
   
   .lightbox-image {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       border-radius: 15px;
       box-shadow: 0 50px 120px rgba(28, 59, 110, 0.2); 
   }
   
   /* ==========================================================================
      6. RESPONSIVE DESIGN
      ========================================================================== */
   
   /* --- TABLETTE (Jusqu'à 1024px) --- */
   @media (max-width: 1024px) {
       .zigzag-row {
           gap: 40px;
           padding: 0 40px;
       }
       
       .zigzag-text h2 {
           font-size: 2rem;
       }
   }
   
   /* --- MOBILE (Jusqu'à 768px) --- */
   @media (max-width: 768px) {
       .club-intro-header {
           padding: 120px 20px 50px;
       }
   
       .zigzag-container {
           padding: 40px 0;
       }
   
       /* Empilement vertical unifié */
       .zigzag-row, 
       .zigzag-row.reverse {
           flex-direction: column !important;
           gap: 40px;
           margin-bottom: 80px;
           padding: 0 25px;
           text-align: center;
       }
   
       /* Hiérarchie Mobile : Texte puis Image */
       .zigzag-column:has(.zigzag-text) {
           order: 1;
       }
   
       .zigzag-column:has(.club-img) {
           order: 2;
       }
   
       .club-img {
           width: 100% !important;
           height: auto !important;
           aspect-ratio: 4/3;
           border-radius: 30px;
       }
   
       .zigzag-text h2 {
           font-size: 1.8rem;
       }
   
       .lightbox-image-container {
           width: 92vw;
           height: 50vh;
       }
   }
   
   /* --- PETIT MOBILE (Jusqu'à 480px) --- */
   @media (max-width: 480px) {
       .zigzag-text h2 {
           font-size: 1.6rem;
       }
       
       .club-intro-header h1 {
           font-size: 1.8rem !important;
       }
   }