*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --navy:#0a1628;
  --blue:#1a3a6e;
  --blue-mid:#1e5fa8;
  --blue-light:#2e8fd4;
  --cyan:#38b6ff;
  --yellow:#f5c100;
  --yellow-dark:#d4a200;
  --white:#ffffff;
  --gray-light:#f0f4f8;
  --gray-mid:#e2eaf3;
  --text-dark:#0d1f3c;
  --text-body:#2c3e60;
  --text-muted:#5a6e8a;
}
body{font-family:'Barlow',sans-serif;color:var(--text-dark);background:#fff;overflow-x:hidden;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;box-shadow:0 2px 20px rgba(0,0,0,0.3);}
.nav-logo{display:flex;align-items:center;gap:12px;}
.nav-logo-icon{width:40px;height:40px;background:var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}
.nav-logo-text{line-height:1.1;}
.nav-logo-text .line1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;color:var(--white);letter-spacing:1px;}
.nav-logo-text .line2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--cyan);letter-spacing:1px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,0.75);text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;transition:color 0.2s;padding-bottom:4px;border-bottom:2px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:#fff;border-bottom-color:var(--cyan);}
.btn-nav{background:var(--yellow);color:var(--navy);font-family:'Barlow',sans-serif;font-weight:700;font-size:13px;padding:10px 20px;border-radius:6px;border:none;cursor:pointer;letter-spacing:0.5px;display:flex;align-items:center;gap:6px;transition:background 0.2s;}
.btn-nav:hover{background:var(--yellow-dark);}

/* HERO */
.hero{position:relative;height:620px;overflow:hidden;display:flex;align-items:center;}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#041228 0%,#0d2a5a 30%,#1a5a8a 60%,#0e3a6a 100%);}
.hero-diver{position:absolute;right:0;top:0;width:100%;height:100%;background:url('https://chus-plongee.fr/wp-content/uploads/2026/05/Plongeur-detente.jpg') center bottom/cover no-repeat;opacity:0.9;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(4,18,40,0.92) 0%,rgba(4,18,40,0.7) 25%,rgba(4,18,40,0.2) 50%,rgba(4,18,40,0.0) 100%);}
.bubble{position:absolute;border-radius:50%;background:rgba(56,182,255,0.15);border:1px solid rgba(56,182,255,0.2);animation:rise linear infinite;}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0.6;}100%{transform:translateY(-700px) scale(1.5);opacity:0;}}
.hero-content{position:relative;z-index:2;padding:0 60px;max-width:640px;}
.hero-tag{font-size:12px;font-weight:600;color:var(--white);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:72px;line-height:0.95;color:var(--white);text-transform:uppercase;margin-bottom:20px;}
.hero h1 span{color:var(--cyan);}
.hero-sub{font-size:17px;color:rgba(255,255,255,0.82);line-height:1.6;margin-bottom:32px;}
.hero-sub strong{color:var(--yellow);font-weight:600;}
.hero-cta{display:flex;gap:12px;align-items:center;}
.btn-primary{background:var(--yellow);color:var(--navy);font-weight:700;font-size:14px;padding:14px 28px;border-radius:6px;border:none;cursor:pointer;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform 0.2s,background 0.2s;}
.btn-primary:hover{background:var(--yellow-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--white);font-weight:600;font-size:14px;padding:14px 28px;border-radius:6px;border:2px solid rgba(255,255,255,0.3);cursor:pointer;letter-spacing:0.5px;text-decoration:none;transition:border-color 0.2s,background 0.2s;}
.btn-outline:hover{border-color:var(--cyan);background:rgba(56,182,255,0.08);}
.hero-wave{position:absolute;bottom:-2px;left:0;width:100%;overflow:hidden;line-height:0;}
.hero-wave svg{display:block;}

/* FEATURES */
.features{background:var(--white);padding:60px 60px 50px;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1100px;margin:0 auto;}
.feature-item{text-align:center;padding:20px;}
.feature-icon{width:64px;height:64px;margin:0 auto 16px;border:2px solid var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.feature-icon svg{width:32px;height:32px;stroke:var(--blue-light);fill:none;stroke-width:1.5;}
.feature-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--blue-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.feature-text{font-size:13px;color:var(--text-muted);line-height:1.6;}

/* ABOUT */
.about{background:var(--navy);margin:0 40px 50px;border-radius:16px;overflow:hidden;display:flex;align-items:stretch;min-height:240px;}
.about-image{width:40%;background:url('https://chus-plongee.fr/wp-content/uploads/2026/05/PHOTO-2026-05-19-20-14-42.jpg') center/cover no-repeat;position:relative;}
.about-image::after{content:'';position:absolute;right:0;top:0;bottom:0;width:80px;background:linear-gradient(to right,transparent,var(--navy));}
.about-content{flex:1;padding:48px 52px;}
.about-content h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:36px;color:var(--white);text-transform:uppercase;line-height:1.1;margin-bottom:16px;}
.about-content h2 span{color:var(--cyan);}
.about-content p{font-size:15px;color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:24px;}
.btn-secondary{background:transparent;color:var(--white);font-weight:600;font-size:13px;padding:11px 24px;border-radius:6px;border:2px solid rgba(255,255,255,0.4);cursor:pointer;letter-spacing:0.5px;text-decoration:none;transition:border-color 0.2s;}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);}

/* EVENTS */
.events{padding:50px 60px 60px;background:var(--white);}
.section-title{text-align:center;margin-bottom:40px;}
.section-title h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:36px;color:var(--text-dark);text-transform:uppercase;letter-spacing:1px;}
.section-title .underline{width:50px;height:3px;background:var(--yellow);margin:10px auto 0;border-radius:2px;}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
.event-card{border-radius:12px;overflow:hidden;border:1px solid var(--gray-mid);transition:transform 0.2s,box-shadow 0.2s;}
.event-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(26,58,110,0.15);}
.event-carousel{position:relative;height:200px;overflow:hidden;}
.carousel-slides{display:flex;height:100%;transition:transform 0.4s ease;}
.carousel-slide{min-width:100%;height:100%;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.88);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background 0.2s,opacity 0.2s;padding:0;opacity:0;}
.event-carousel:hover .carousel-btn{opacity:1;}
.carousel-btn:hover{background:rgba(255,255,255,1);}
.carousel-btn.prev{left:10px;}
.carousel-btn.next{right:10px;}
.carousel-btn svg{width:16px;height:16px;stroke:var(--navy);stroke-width:2.5;}
.carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.55);border:none;padding:0;cursor:pointer;transition:background 0.2s;}
.carousel-dot.active{background:rgba(255,255,255,1);}
.event-body{padding:20px;}
.event-body h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:var(--text-dark);margin-bottom:6px;}
.event-body p{font-size:13px;color:var(--text-muted);margin-bottom:14px;line-height:1.5;}
.event-link{font-size:13px;font-weight:600;color:var(--blue-light);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.event-link:hover{color:var(--cyan);}
.event-link svg{width:16px;height:16px;}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);margin:0 40px 50px;border-radius:12px;padding:40px 60px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;}
.cta-banner::before{content:'';position:absolute;right:-60px;top:-60px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,0.04);}
.cta-banner::after{content:'';position:absolute;left:30%;bottom:-80px;width:180px;height:180px;border-radius:50%;background:rgba(56,182,255,0.08);}
.cta-text h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;color:var(--white);text-transform:uppercase;margin-bottom:6px;}
.cta-text p{font-size:15px;color:rgba(255,255,255,0.75);}

/* FOOTER */
footer{background:var(--navy);color:rgba(255,255,255,0.65);padding:50px 60px 24px;}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1.5fr 1.5fr;gap:40px;margin-bottom:40px;}
.footer-about .logo-wrap{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;}
.footer-about .logo-icon{width:36px;height:36px;background:var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;}
.footer-about .logo-right{display:flex;flex-direction:column;justify-content:space-between;min-height:48px;}
.footer-about .logo-right p{font-size:13px;line-height:1.3;margin:0;}
.footer-about .logo-text .l1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px;}
.footer-about .logo-text .l2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--cyan);letter-spacing:1px;}
.footer-about p{font-size:13px;line-height:1.7;margin-bottom:18px;}
.social-links{display:flex;gap:10px;}
.social-btn{width:34px;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.2s;text-decoration:none;color:rgba(255,255,255,0.6);}
.social-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.social-btn svg{width:16px;height:16px;}
.footer-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:8px;}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,0.6);text-decoration:none;transition:color 0.2s;}
.footer-col ul li a:hover{color:var(--cyan);}
.footer-col p{font-size:13px;line-height:1.8;}
.btn-footer{display:inline-block;margin-top:14px;background:transparent;color:#fff;font-weight:600;font-size:12px;padding:9px 18px;border-radius:6px;border:1px solid rgba(255,255,255,0.4);cursor:pointer;text-decoration:none;transition:border-color 0.2s;}
.btn-footer:hover{border-color:var(--cyan);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;display:flex;justify-content:space-between;align-items:center;}
.footer-bottom p{font-size:12px;}
.footer-bottom a{color:rgba(255,255,255,0.5);text-decoration:none;font-size:12px;margin-left:20px;}
.footer-bottom a:hover{color:var(--cyan);}

/* ================================
   HAMBURGER BUTTON
   ================================ */
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--white);align-items:center;justify-content:center;flex-shrink:0;}
.nav-burger svg{display:block;}
.nav-mobile-actions{display:none;align-items:center;gap:4px;}
.btn-nav-mobile{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:var(--yellow);flex-shrink:0;text-decoration:none;}

/* ================================
   TABLET — ≤1024px
   ================================ */
@media(max-width:1024px){
  nav{padding:0 24px;}
  /* Bascule en menu burger dès la tablette (la nav desktop déborde au-delà de 768px) */
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--navy);flex-direction:column;padding:16px 20px;gap:0;z-index:99;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.08);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:15px;}
  .nav-links a:last-child{border-bottom:none;}
  .btn-nav{display:none;}
  .nav-mobile-actions{display:flex;}
  .nav-burger{display:flex;margin-left:20px;}
  .hero-content{padding:0 40px;}
  .hero h1{font-size:58px;}
  .features{padding:48px 32px 40px;}
  .about{margin:0 24px 40px;}
  .events{padding:40px 32px 48px;}
  .events-grid{grid-template-columns:repeat(2,1fr);}
  .cta-banner{margin:0 24px 40px;padding:32px 40px;}
  footer{padding:40px 40px 24px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
  /* Page templates */
  .page-hero-content{padding:0 40px!important;}
  .breadcrumb{left:40px!important;}
  .club-intro{padding:52px 40px!important;}
  .stats-bar{padding:32px 40px!important;}
  .valeurs{padding:52px 40px!important;}
  .histoire{padding:52px 40px!important;}
  .contact-section{padding:52px 40px!important;}
  .galerie-tabs-bar{padding:0 40px!important;}
  .galerie-section{padding:40px 40px 52px!important;}
  .calendrier{padding:40px 40px!important;}
  .section-wrap{padding:52px 40px!important;}
  .infos-rapides{padding:32px 40px!important;}
  .plongee-intro{padding:52px 40px!important;}
  .lieux{padding:40px 40px!important;}
  .bapteme-section{padding:52px 40px!important;}
  .niveaux-section{padding:52px 40px!important;}
  /* Grilles : passer à 2 colonnes sur tablette */
  .valeurs-grid{grid-template-columns:repeat(2,1fr)!important;}
  .equipe-grid{grid-template-columns:repeat(2,1fr)!important;}
  .lieux-grid{grid-template-columns:repeat(2,1fr)!important;}
  /* Timeline : bloquer le débordement au niveau de la section */
  .histoire{overflow:hidden!important;}
}

/* ================================
   MOBILE — ≤768px
   ================================ */
@media(max-width:768px){
  /* NAV */
  nav{padding:0 16px;}
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--navy);flex-direction:column;padding:16px 20px;gap:0;z-index:99;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.08);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:15px;}
  .nav-links a:last-child{border-bottom:none;}
  .btn-nav{display:none;}
  .nav-mobile-actions{display:flex;}
  .nav-burger{display:flex;margin-left:20px;}

  /* HERO */
  .hero{height:auto;min-height:440px;padding-bottom:60px;}
  .hero-content{padding:36px 20px 0;max-width:100%;}
  .hero h1{font-size:9vw;white-space:nowrap;}
  .hero h1 br,.hero-sub br{display:none;}
  .hero-tag{text-align:center;}
  .hero-sub{font-size:15px;text-align:center;}
  .hero-cta{flex-direction:column;gap:10px;}
  .hero-cta .btn-primary,.hero-cta .btn-outline{width:100%;justify-content:center;text-align:center;}

  /* FEATURES */
  .features{padding:40px 16px 32px;}
  .features-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  /* ABOUT */
  .about{flex-direction:column;margin:0 16px 36px;}
  .about-image{width:100%;height:200px;}
  .about-image::after{display:none;}
  .about-content{padding:24px 20px;}
  .about-content h2{font-size:clamp(18px,5.5vw,28px);white-space:normal;overflow:visible;line-height:1.15;}
  .about-content h2 br{display:none;}

  /* EVENTS */
  .events{padding:32px 16px 48px;}
  .events-grid{grid-template-columns:1fr;}
  .carousel-btn{opacity:1!important;}

  /* CTA BANNER */
  .cta-banner{margin:0 16px 36px;padding:28px 20px;flex-direction:column;gap:20px;text-align:center;}
  .cta-text h2{font-size:24px;}
  .cta-banner .btn-primary{width:100%;justify-content:center;}

  /* FOOTER */
  footer{padding:36px 16px 20px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .footer-grid .footer-about{grid-column:1/-1;}
  .footer-grid .footer-col:last-child{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;}
  .footer-bottom a{margin-left:0;}
  .social-links{justify-content:center;}

  /* PAGE HERO — commun à toutes les pages */
  .page-hero{height:220px!important;}
  .page-hero h1{font-size:34px!important;}
  .page-hero p{font-size:14px!important;}
  .page-hero-content{padding:0 20px!important;}
  .breadcrumb{left:20px!important;font-size:11px!important;}

  /* LE CLUB */
  .club-intro{padding:36px 16px!important;grid-template-columns:1fr!important;gap:28px!important;}
  .club-intro-image{height:220px!important;}
  .stats-bar{padding:28px 16px!important;}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;}
  .valeurs{padding:36px 16px!important;}
  .valeurs-grid{grid-template-columns:1fr!important;}
  .histoire{padding:36px 16px!important;}

  /* CONTACT */
  .contact-section{padding:36px 16px!important;}
  .contact-inner{grid-template-columns:1fr!important;gap:28px!important;}
  .form-grid{grid-template-columns:1fr!important;}

  /* GALERIE */
  .galerie-tabs-bar{padding:0 8px!important;top:64px;}
  .galerie-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .galerie-tab{padding:14px 14px!important;font-size:13px!important;}
  .galerie-section{padding:28px 16px 40px!important;}
  .masonry-grid{columns:2!important;}

  /* SÉJOURS & SORTIES */
  .calendrier{padding:28px 16px!important;}
  .cal-grid{grid-template-columns:repeat(4,1fr)!important;}

  /* INFOS PRATIQUES */
  .infos-rapides{padding:24px 16px!important;}
  .infos-rapides-inner{grid-template-columns:repeat(2,1fr)!important;}
  .section-wrap{padding:36px 16px!important;}
  .adresse-grid{grid-template-columns:1fr!important;}
  .tarifs-intro{grid-template-columns:1fr!important;}

  /* LE CLUB — suite */
  .equipe{padding:36px 16px!important;}
  .equipe-grid{grid-template-columns:repeat(2,1fr)!important;}
  .rejoindre{padding:36px 16px!important;}
  .rejoindre-inner{grid-template-columns:1fr!important;gap:28px!important;}
  .rejoindre h2{font-size:32px!important;}

  /* LA PLONGÉE */
  .plongee-intro{padding:36px 16px!important;grid-template-columns:1fr!important;gap:28px!important;}
  .plongee-intro-image{height:220px!important;}
  .lieux{padding:32px 16px!important;}
  .lieux-grid{grid-template-columns:repeat(2,1fr)!important;}
  .bapteme-section{padding:36px 16px!important;}
  .bapteme-card{grid-template-columns:1fr!important;gap:24px!important;padding:28px 20px!important;}
  .niveaux-section{padding:36px 16px!important;}
  .niveaux-grid{grid-template-columns:1fr!important;}
}