/* ====== Reset & base ====== */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
    img, video { max-width: 100%; display: block; }

    :root{
      --bg: #0a0a0a; --panel: #1a1a1a; --text:#f5f5f5; --muted:#bbbbbb;
      --primary:#b91c1c; --primary-600:#991b1b; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.6);
    }

    .container{ width:min(1100px,92%); margin:0 auto; padding:10px; background-color: rgba(0, 0, 0, 0.5);}

    /* ====== Header ====== */
    .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,.9); backdrop-filter: blur(8px); border-bottom: 1px solid #333; }
    .header-inner{ display:flex; align-items:center; justify-content:space-between; height:120px; }
    .logo{ font-weight: 800; font-size:2rem;letter-spacing: .2px; color: var(--primary); }
    .nav-toggle{ display:none; border:0; background:transparent; font-size:28px; line-height:1; color: var(--text); }
    .nav-links{ display:flex; gap:18px; }
    .nav a{ color: var(--text); text-decoration:none; font-size:18px; padding:8px 10px; border-radius:10px; }
    .nav a:hover{ background: var(--primary); color:#fff; }
    @media (max-width: 800px){
      .nav-toggle{ display:block; }
      .nav-links{ position: absolute; right: 16px; top: 64px; background: var(--panel); border:1px solid #333; border-radius:14px; box-shadow: var(--shadow); display:none; flex-direction:column; padding:10px; }
      .nav-links.open{ display:flex; }
    }

    /* ====== Hero ====== */
    .hero{ background-image: url('./images/fond.png');
      background-size: cover;
      background-repeat: no-repeat; /* Prevents image repetition */
      background-position: center center; }
    .hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: 40px; padding: 64px 20px 40px; }
    .hero h2{ margin:0; font-size: clamp(28px, 3vw, 44px); line-height:1.05; color: var(--primary); }
    .hero p{ color: var(--muted); margin: 14px 0 0; }
    .hero-cta{ display:flex; gap:12px; margin-top: 22px; }
    .btn{ display:inline-block; background: var(--primary); color:white; padding: 12px 18px; border-radius: 999px; text-decoration:none; font-weight:600; box-shadow:var(--shadow); }
    .btn:hover{ background: var(--primary-600); }
    .btn-secondary{ background: #333; color: var(--primary); }
    .btn-secondary:hover{ background: #444; }
    .badges{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
    .badges li{ background:#111; border:1px solid #333; padding:6px 12px; border-radius:999px; font-size: 13px; color:var(--muted); }
    .hero-media .frame{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
    .hero-video{ width:100%; object-fit:cover; aspect-ratio: 4/3; }
    .caption{ font-size: 12px; color:#888; margin-top:8px; }
    @media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr; } }

    /* ====== Sections ====== */
    section{ padding: 64px 0; }
    h2{ color: var(--primary); }
    .about p{ color: var(--muted); }

    /* ====== Disciplines ====== */
    .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .card{ background:var(--panel); border:1px solid #333; border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); }
    .card h3{ color: var(--primary); }
    .card p{ color: var(--muted); }
    .card-media{ border-radius: 14px; height: 200px; background-size: cover; background-position: center; margin-bottom: 12px; }
    @media (max-width: 900px){ .cards{ grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px){ .cards{ grid-template-columns: 1fr; } }

    /* ====== Planning ====== */
    .filters{ display:flex; gap:14px; align-items:flex-end; margin-bottom: 16px; flex-wrap: wrap; }
    label{ display:flex; gap:8px; flex-direction:column; font-size:14px; color:var(--muted); }
    select, input, textarea{ border:1px solid #444; border-radius:12px; padding: 10px 12px; font: inherit; background:#111; color: var(--text); }
    .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .slot{ background:var(--panel); border:1px solid #333; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
    .slot .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; color: var(--text); }
    .badge{ background:#222; border:1px solid #444; padding:4px 10px; border-radius:999px; font-size:12px; color: var(--primary); }
    .center{ text-align:center; }
    .mt-24{ margin-top: 24px; }
    @media (max-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px){ .grid{ grid-template-columns: 1fr; } }

    /* ====== Pricing ====== */
    .pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
    .price-card{ background:var(--panel); border:1px solid #333; border-radius: 20px; padding: 18px; box-shadow: var(--shadow); }
    .price-card.highlight{ border-color:var(--primary); }
    .price-card h3{ margin: 8px 0; color: var(--primary); }
    .price{ font-weight: 800; font-size: 34px; color: var(--primary); }
    .price span{ font-weight: 600; color:var(--muted); font-size: 14px; }

    /* ====== Coach ====== */
    .coach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
    .frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
    .coach-grid h2{ color: var(--primary); }
    .coach-grid p, .coach-grid li{ color: var(--muted); }
    @media (max-width: 800px){ .coach-grid{ grid-template-columns:1fr; } }

    /* ====== Contact ====== */
    .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
    .map-frame{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #333; }
    .map-frame iframe{ width:100%; height:260px; border:0; }
    .contact form{ background:var(--panel); border:1px solid #333; border-radius:18px; padding:16px; box-shadow:var(--shadow); display:grid; gap:10px; }
    .contact button{ cursor:pointer; }
    .contact h3{ color: var(--primary); }
    @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

    /* ====== Footer ====== */
    .site-footer{ border-top:1px solid #333; background:#111; color: var(--muted); }
    .footer-inner{ padding:22px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .footer-links a{ color: var(--muted); }
    .footer-links a:hover{ color: var(--primary); }
    .smallprint{ padding-bottom:24px; font-size:12px; color:#666; }


    h1{ color:var(--text); margin:18px 0 0; }
    p.lead{ color:var(--muted); margin:6px 0 22px; }
    .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    @media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } .logo-img{ height:28px; } }
    .card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
    .card img{ width:100%; height:240px; object-fit:cover; display:block; }
    .card figcaption{ padding:10px 12px; font-size:13px; color:var(--muted); border-top:1px solid var(--border); }
    .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0 18px; }
    .btn{ display:inline-block; background:var(--primary); color:#fff; text-decoration:none; padding:10px 14px; border-radius:999px; font-weight:600; border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 20px rgba(185,28,28,.25); }
    .btn:hover{ background:var(--primary-600); }
    .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
    .lightbox.open{ display:flex; }
    .lightbox img{ max-width:min(1200px,95vw); max-height:85vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.7); cursor:default; }
    .lightbox .close, .lightbox .prev, .lightbox .next{ position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2); padding:10px 14px; border-radius:999px; cursor:pointer; }
    .lightbox .close{ top:20px; right:20px; transform:none; }
    .lightbox .prev{ left:16px; }
    .lightbox .next{ right:16px; }
    .lightbox .close-text{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); padding:10px 14px; border-radius:999px; font-weight:600; }
    .lightbox .close-text:hover{ background:rgba(255,255,255,.2); }