:root{
    --night-0:#050505;
    --night-1:#0d0d0d;
    --night-2:#11111199;
    --gold:#f7c600;
    --gold-dim:#a17f00;
    --gold-glow: rgba(247,198,0,0.55);
    --ink:#f8f8f8;
    --ink-dim:#a3a3a3;
    --line: rgba(248,248,248,0.12);
    --glass-bg: rgba(255,255,255,0.045);
    --glass-bg-strong: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.14);
    --glass-gold: rgba(247,198,0,0.16);
    --glass-blur: blur(22px) saturate(160%);
    --header-h: 86px;
    /* Distance parcourue à l'apparition. Mise à 0 en mouvement réduit :
       l'élément se contente alors d'un fondu, sans déplacement. */
    --reveal-y: 34px;
    /* Une teinte par discipline, pour repérer les créneaux d'un coup d'œil
       dans le planning. Volontairement peu saturées pour rester dans le ton
       du site plutôt que de virer à l'arc-en-ciel. */
    --d-patinage:#7fb3ff;
    --d-baby:#6fe0a8;
    --d-freestyle:#c98bff;
    --d-hockey:#f7c600;

    /* Bandeau d'événement sans image : dégradé maison, posé SOUS l'image.
       Si le fichier est absent ou mal nommé, c'est lui qu'on voit — jamais
       un rectangle vide. */
    --event-degrade:linear-gradient(135deg, #241d00 0%, #0d0d0d 55%, #1a1408 100%);
  }
  .js:not(.motion-full){--reveal-y:0px;}
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--night-0);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  ::selection{background:var(--gold);color:var(--night-0);}

  /* ---------- Liquid glass base ---------- */
  .glass{
    position:relative;
    background:
      linear-gradient(155deg, var(--glass-bg-strong) 0%, var(--glass-bg) 55%, transparent 100%),
      var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:20px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 0 40px rgba(247,198,0,0.03);
    overflow:hidden;
  }
  .glass::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  }
  .glass::after{
    content:'';
    position:absolute;
    top:-40%; left:-10%;
    width:70%; height:120%;
    background:radial-gradient(ellipse at top left, rgba(255,255,255,0.06), transparent 60%);
    pointer-events:none;
  }
  .glass:hover{
    border-color:var(--glass-gold);
    box-shadow:
      0 8px 40px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 50px rgba(247,198,0,0.06);
    transition:border-color .3s ease, box-shadow .3s ease;
  }

  /* ---------- Starfield canvas ---------- */
  #stars{
    position:fixed;
    inset:0;
    z-index:0;
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, #161616 0%, var(--night-0) 55%),
      var(--night-0);
  }

  /* ---------- Logo watermark in background ---------- */
  .logo-bg{
    position:fixed;
    top:50%;
    left:50%;
    width:min(1400px, 160vw);
    transform:translate(-50%,-50%);
    opacity:0.16;
    filter:drop-shadow(0 0 80px rgba(247,198,0,0.15));
    z-index:0;
    pointer-events:none;
    user-select:none;
  }

  .content{position:relative; z-index:2;}

  /* ---------- Nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 6vw;
    margin:14px 6vw 0;
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    border:1px solid var(--glass-border);
    border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
    width:calc(100% - 12vw);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Anton',sans-serif;
    font-size:22px;
    letter-spacing:1px;
  }
  .brand img{height:34px; width:auto;}
  /* Le logo de l'en-tête est un lien : on annule le style de lien par défaut */
  a.brand{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:opacity .25s ease;
  }
  a.brand:hover{opacity:.75;}
  a.brand img{transition:filter .25s ease;}
  a.brand:hover img{filter:drop-shadow(0 0 14px var(--gold-glow));}
  nav ul{
    list-style:none;
    display:flex;
    gap:22px;
  }
  nav a{
    color:var(--ink-dim);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
    position:relative;
    white-space:nowrap;   /* un libellé ne doit jamais casser sur deux lignes */
    transition:color .25s ease;
  }
  nav a::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    width:0%; height:2px;
    background:var(--gold);
    transition:width .25s ease;
  }
  nav a:hover{color:var(--ink);}
  nav a:hover::after{width:100%;}

  /* ---------- Sous-menus du menu principal ----------
     Ouverture au survol et au focus en CSS pur : le sous-menu étant un enfant
     du <li>, il reste ouvert quand la souris descend du titre vers les liens.
     Le padding-top de .sous-menu sert de pont invisible au-dessus du panneau,
     pour que ce trajet ne passe jamais « à côté » de la zone survolée. */
  /* Le titre et sa flèche forment un bloc insécable : sans ça, avec neuf
     rubriques dans la barre, la flèche passe à la ligne sous le libellé. */
  .a-sous-menu{
    position:relative;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  .nav-fleche{
    display:inline-block;
    flex:0 0 auto;
    margin-left:4px;
    width:12px; height:12px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    vertical-align:middle;
    position:relative;
  }
  .nav-fleche::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:5px; height:5px;
    margin:-4px 0 0 -3px;
    border-right:1.5px solid var(--ink-dim);
    border-bottom:1.5px solid var(--ink-dim);
    transform:rotate(45deg);
    transition:transform .25s ease, border-color .25s ease;
  }
  .a-sous-menu:hover > .nav-fleche::before,
  .a-sous-menu:focus-within > .nav-fleche::before,
  .a-sous-menu.ouvert > .nav-fleche::before{ border-color:var(--gold); }
  .a-sous-menu.ouvert > .nav-fleche::before{ transform:rotate(-135deg); margin-top:-1px; }
  .nav-fleche:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

  .sous-menu{
    position:absolute;
    top:100%; left:-20px;
    min-width:236px;
    margin:0;
    padding:16px 0 0;     /* le pont invisible */
    list-style:none;
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index:60;
  }
  /* Le panneau lui-même : dessiné sous le pont, pas dessus. */
  .sous-menu::before{
    content:'';
    position:absolute;
    inset:16px 0 0 0;
    background:linear-gradient(155deg, #141414, #090909);
    border:1px solid var(--glass-border);
    border-radius:12px;
    box-shadow:0 18px 44px rgba(0,0,0,.6);
    z-index:-1;
  }
  .a-sous-menu:hover > .sous-menu,
  .a-sous-menu:focus-within > .sous-menu,
  .a-sous-menu.ouvert > .sous-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }

  .sous-menu li{ position:relative; }
  nav .sous-menu a{
    display:block;
    padding:11px 20px;
    font-size:12px;
    letter-spacing:.9px;
    white-space:normal;
    border-left:2px solid transparent;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  /* Le soulignement coulissant est réservé au menu principal. */
  nav .sous-menu a::after{ display:none; }
  nav .sous-menu a:hover,
  nav .sous-menu a:focus-visible{
    color:var(--gold);
    border-left-color:var(--gold);
    background:rgba(247,198,0,.06);
  }
  nav .sous-menu a:focus-visible{ outline:none; }
  /* Échap referme, même si le focus ou la souris sont restés sur la rubrique.
     Placée après les règles d'ouverture, cette règle l'emporte à égalité de
     spécificité. Elle est retirée dès que la souris ou le focus quittent. */
  .a-sous-menu.echap > .sous-menu{
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
  }

  /* Titre souligné tant que son panneau est ouvert. */
  .a-sous-menu:hover > a::after,
  .a-sous-menu:focus-within > a::after,
  .a-sous-menu.ouvert > a::after{ width:100%; }

  @media(prefers-reduced-motion: reduce){
    .sous-menu{ transition:none; }
  }

  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;
    height:36px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }
  .nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* 9 entrées de menu : entre 1200 et 1500px on resserre les libellés,
     en dessous de 1200px la barre ne tient plus et on bascule en hamburger
     plus tôt qu'un site à 5 rubriques. */
  @media(max-width:1500px){
    nav ul{gap:16px;}
    nav a{font-size:12px; letter-spacing:.9px;}
  }
  @media(max-width:1200px){
    /* ---------- Sous-menus du menu principal ----------
     Ouverture au survol et au focus en CSS pur : le sous-menu étant un enfant
     du <li>, il reste ouvert quand la souris descend du titre vers les liens.
     Le padding-top de .sous-menu sert de pont invisible au-dessus du panneau,
     pour que ce trajet ne passe jamais « à côté » de la zone survolée. */
  /* Le titre et sa flèche forment un bloc insécable : sans ça, avec neuf
     rubriques dans la barre, la flèche passe à la ligne sous le libellé. */
  .a-sous-menu{
    position:relative;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  .nav-fleche{
    display:inline-block;
    flex:0 0 auto;
    margin-left:4px;
    width:12px; height:12px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    vertical-align:middle;
    position:relative;
  }
  .nav-fleche::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:5px; height:5px;
    margin:-4px 0 0 -3px;
    border-right:1.5px solid var(--ink-dim);
    border-bottom:1.5px solid var(--ink-dim);
    transform:rotate(45deg);
    transition:transform .25s ease, border-color .25s ease;
  }
  .a-sous-menu:hover > .nav-fleche::before,
  .a-sous-menu:focus-within > .nav-fleche::before,
  .a-sous-menu.ouvert > .nav-fleche::before{ border-color:var(--gold); }
  .a-sous-menu.ouvert > .nav-fleche::before{ transform:rotate(-135deg); margin-top:-1px; }
  .nav-fleche:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

  .sous-menu{
    position:absolute;
    top:100%; left:-20px;
    min-width:236px;
    margin:0;
    padding:16px 0 0;     /* le pont invisible */
    list-style:none;
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index:60;
  }
  /* Le panneau lui-même : dessiné sous le pont, pas dessus. */
  .sous-menu::before{
    content:'';
    position:absolute;
    inset:16px 0 0 0;
    background:linear-gradient(155deg, #141414, #090909);
    border:1px solid var(--glass-border);
    border-radius:12px;
    box-shadow:0 18px 44px rgba(0,0,0,.6);
    z-index:-1;
  }
  .a-sous-menu:hover > .sous-menu,
  .a-sous-menu:focus-within > .sous-menu,
  .a-sous-menu.ouvert > .sous-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }

  .sous-menu li{ position:relative; }
  nav .sous-menu a{
    display:block;
    padding:11px 20px;
    font-size:12px;
    letter-spacing:.9px;
    white-space:normal;
    border-left:2px solid transparent;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  /* Le soulignement coulissant est réservé au menu principal. */
  nav .sous-menu a::after{ display:none; }
  nav .sous-menu a:hover,
  nav .sous-menu a:focus-visible{
    color:var(--gold);
    border-left-color:var(--gold);
    background:rgba(247,198,0,.06);
  }
  nav .sous-menu a:focus-visible{ outline:none; }
  /* Échap referme, même si le focus ou la souris sont restés sur la rubrique.
     Placée après les règles d'ouverture, cette règle l'emporte à égalité de
     spécificité. Elle est retirée dès que la souris ou le focus quittent. */
  .a-sous-menu.echap > .sous-menu{
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
  }

  /* Titre souligné tant que son panneau est ouvert. */
  .a-sous-menu:hover > a::after,
  .a-sous-menu:focus-within > a::after,
  .a-sous-menu.ouvert > a::after{ width:100%; }

  /* Les ancres internes visées par les sous-menus : même dégagement que les
     sections, sinon l'en-tête fixe recouvre le bloc visé. */
  #clubHistory, #infrastructures, #teamList, #coachesGrid,
  #portesOuvertes, #commentSInscrire, #docLinks, .disc-card{
    scroll-margin-top:110px;
  }

  @media(prefers-reduced-motion: reduce){
    .sous-menu{ transition:none; }
  }

  .nav-toggle{display:flex;}
    nav{
      display:block;
      position:fixed;
      top:calc(var(--header-h) + 10px);
      left:6vw;
      right:6vw;
      max-height:0;
      opacity:0;
      overflow:hidden;
      pointer-events:none;
      -webkit-backdrop-filter:blur(22px) saturate(160%);
      backdrop-filter:blur(22px) saturate(160%);
      background:linear-gradient(155deg, rgba(17,17,17,0.97), rgba(5,5,5,0.97));
      border:1px solid var(--glass-border);
      border-radius:16px;
      box-shadow:0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
      transition:max-height .3s ease, opacity .25s ease;
      z-index:49;
    }
    nav.open{
      max-height:70vh;
      opacity:1;
      pointer-events:auto;
      overflow-y:auto;
    }
    nav ul{
      flex-direction:column;
      gap:0;
      padding:8px 22px;
    }
    nav ul li{border-bottom:1px solid var(--line);}
    nav ul li:last-child{border-bottom:none;}
    nav a{display:block; padding:16px 0;}

    /* En dessous de 1200px le menu devient une liste dépliante : le sous-menu
       reprend sa place dans le flux et s'ouvre en accordéon. */
    .a-sous-menu{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
    }
    .nav-fleche{
      width:44px; height:44px;   /* cible tactile confortable */
      margin:0;
      justify-self:end;
    }
    .nav-fleche::before{ width:7px; height:7px; margin:-5px 0 0 -4px; }
    .sous-menu{
      grid-column:1 / -1;
      position:static;
      min-width:0;
      padding:0;
      opacity:1;
      visibility:visible;
      transform:none;
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease;
    }
    .sous-menu::before{ display:none; }
    .a-sous-menu.ouvert > .sous-menu{ max-height:520px; }
    /* Sur écran tactile, le survol ne doit pas déplier tout seul. */
    .a-sous-menu:hover > .sous-menu,
    .a-sous-menu:focus-within > .sous-menu{ max-height:0; }
    .a-sous-menu.ouvert > .sous-menu{ max-height:520px; }
    nav .sous-menu a{
      padding:12px 0 12px 16px;
      border-left:2px solid var(--line);
      font-size:12px;
    }
    nav .sous-menu li:last-child a{ padding-bottom:16px; }
    nav .sous-menu li{ border-bottom:none; }

  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 6vw 80px;
    position:relative;
  }
  .hero-logo{
    width:min(340px, 46vw);
    filter: drop-shadow(0 0 50px var(--gold-glow));
    animation: float 7s ease-in-out infinite;
    margin-bottom:8px;
  }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:4px;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  h1.title{
    font-family:'Anton', sans-serif;
    font-size:clamp(3.2rem, 11vw, 8.5rem);
    line-height:0.9;
    letter-spacing:2px;
    background:linear-gradient(180deg, #ffffff 0%, var(--gold) 120%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 60px rgba(242,194,48,0.15);
  }
  .tagline{
    margin-top:22px;
    font-size:clamp(1rem, 2vw, 1.3rem);
    color:var(--ink-dim);
    max-width:560px;
    font-weight:500;
  }
  .tagline strong{color:var(--ink); font-weight:700;}
  .cta-row{
    margin-top:44px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .btn{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:16px 34px;
    border-radius:2px;
    text-decoration:none;
    display:inline-block;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .btn-primary{
    background:var(--gold);
    color:var(--night-0);
  }
  .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px var(--gold-glow);
  }
  .btn-ghost{
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    color:var(--ink);
  }
  .btn-ghost:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  .hero-stats{
    margin-top:64px;
    display:flex;
    gap:0;
    flex-wrap:wrap;
    justify-content:center;
    padding:6px;
  }
  .hstat{
    padding:20px 32px;
    text-align:center;
    position:relative;
  }
  .hstat:not(:last-child)::after{
    content:'';
    position:absolute;
    right:0; top:15%;
    width:1px; height:70%;
    background:var(--glass-border);
  }
  .hstat .num{
    font-family:'Anton',sans-serif;
    font-size:1.9rem;
    color:var(--gold);
    line-height:1;
  }
  .hstat .label{
    margin-top:8px;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-dim);
    max-width:120px;
  }
  @media(max-width:600px){ .hstat{padding:16px 18px;} .hstat:not(:last-child)::after{display:none;} }

  .scroll-cue{
    position:absolute;
    bottom:36px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:3px;
    color:var(--ink-dim);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .scroll-cue .line{
    width:1px; height:40px;
    background:linear-gradient(var(--gold), transparent);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

  /* ---------- Ticker ---------- */
  .ticker-wrap{
    margin:0 6vw;
    border-radius:16px;
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    overflow:hidden;
    padding:16px 0;
  }
  .ticker{
    display:flex;
    width:max-content;
    animation:scroll 26s linear infinite;
  }
  .ticker span{
    font-family:'Anton',sans-serif;
    font-size:22px;
    letter-spacing:3px;
    padding:0 28px;
    color:var(--ink-dim);
    text-transform:uppercase;
    white-space:nowrap;
  }
  .ticker span.gold{color:var(--gold);}
  @keyframes scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- Section base ---------- */
  section{
    padding:130px 6vw;
    max-width:1280px;
    margin:0 auto;
    position:relative;
  }
  .section-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:4px;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .section-tag::before{
    content:'';
    width:24px; height:1px;
    background:var(--gold);
  }
  h2.section-title{
    font-family:'Anton',sans-serif;
    font-size:clamp(2.2rem, 5vw, 4rem);
    letter-spacing:1px;
    line-height:1.02;
    max-width:820px;
  }

  /* ---------- About / Nid ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    margin-top:56px;
    align-items:start;
  }
  @media(max-width:900px){ .about-grid{grid-template-columns:1fr;} }
  .about-text p{
    color:var(--ink-dim);
    font-size:1.05rem;
    line-height:1.85;
    margin-bottom:22px;
  }
  .about-text p strong{color:var(--ink);}
  .stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .stat{
    padding:28px 24px;
  }
  .stat .num{
    font-family:'Anton',sans-serif;
    font-size:2.6rem;
    color:var(--gold);
    line-height:1;
  }
  .stat .label{
    margin-top:10px;
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink-dim);
  }

  .section-lead{
    margin-top:22px;
    color:var(--ink-dim);
    font-size:1.05rem;
    max-width:640px;
    line-height:1.7;
  }

  /* ---------- Bandeau d'actualités ---------- */
  .news-band{
    margin-top:44px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
  }
  .news-item{
    display:block;
    text-decoration:none;
    padding:20px 18px;
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-left:2px solid var(--gold);
    border-radius:14px;
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
  }
  .news-item:hover{
    transform:translateY(-3px);
    background:rgba(247,198,0,0.06);
    border-color:var(--glass-gold);
    border-left-color:var(--gold);
  }
  .news-date{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px;
  }
  .news-title{
    font-family:'Anton',sans-serif;
    font-size:1.05rem;
    letter-spacing:0.5px;
    color:var(--ink);
    margin-bottom:6px;
  }
  .news-place{
    color:var(--ink-dim);
    font-size:.78rem;
    line-height:1.5;
  }

  /* ---------- Barre de suivi verticale ---------- */
  .progress-rail{
    position:fixed;
    top:50%;
    right:26px;
    transform:translateY(-50%);
    z-index:40;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .progress-track{
    position:relative;
    width:2px;
    height:120px;
    background:var(--line);
    border-radius:2px;
    overflow:hidden;
  }
  .progress-fill{
    position:absolute;
    top:0; left:0; right:0;
    height:0%;
    background:linear-gradient(180deg, var(--gold), var(--gold-dim));
  }
  .progress-dots{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .progress-dot{
    width:9px; height:9px;
    padding:0;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background:transparent;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .progress-dot:hover{border-color:var(--gold); transform:scale(1.35);}
  .progress-dot.active{background:var(--gold); border-color:var(--gold);}
  /* Masquée quand la fenêtre devient trop étroite pour l'accueillir sans gêner le contenu */
  @media(max-width:1100px){ .progress-rail{display:none;} }

  /* ---------- Instagram embed ---------- */
  .insta-embed{
    margin-top:50px;
    min-height:200px;
    padding:20px;
  }

  /* ---------- Infra cards ---------- */
  .infra-row{
    margin-top:70px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media(max-width:820px){ .infra-row{grid-template-columns:1fr;} }
  .infra-card{padding:36px 32px;}
  .infra-card h3{
    font-family:'Anton',sans-serif;
    font-size:1.3rem;
    letter-spacing:0.5px;
    margin-bottom:18px;
    color:var(--gold);
  }
  .infra-card ul{list-style:none;}
  .infra-card li{
    color:var(--ink-dim);
    font-size:.92rem;
    line-height:1.7;
    padding-left:16px;
    position:relative;
    margin-bottom:8px;
  }
  .infra-card li::before{
    content:'—';
    position:absolute; left:0; color:var(--gold-dim);
  }
  .infra-card li strong{color:var(--ink);}

  /* ---------- Disciplines ---------- */
  .disc-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  @media(max-width:900px){ .disc-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .disc-grid{grid-template-columns:1fr;} }
  .disc-card{
    padding:38px 30px;
  }
  .disc-ico{font-size:1.8rem; margin-bottom:16px;}
  .disc-card h3{
    font-family:'Anton',sans-serif;
    font-size:1.25rem;
    margin-bottom:12px;
    letter-spacing:0.5px;
  }
  .disc-card p{
    color:var(--ink-dim);
    font-size:.9rem;
    line-height:1.65;
    margin-bottom:18px;
  }
  .disc-tarif{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:1px;
    color:var(--gold);
    text-transform:uppercase;
  }

  /* ---------- Événements & stages ----------
     Même grille que les disciplines, mais chaque carte porte un bandeau et
     s'ouvre en fiche détaillée. La carte entière est cliquable (role="button"
     + tabindex sur l'<article>), d'où le curseur et l'anneau de focus. */
  .event-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  @media(max-width:900px){ .event-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .event-grid{grid-template-columns:1fr;} }

  .event-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:0;
    cursor:pointer;
    text-align:left;
  }
  .event-card:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }
  .event-banniere{
    position:relative;
    aspect-ratio:16 / 9;
    max-width:100%;
    background-image:var(--event-degrade);
    background-size:cover;
    background-position:center;
    border-bottom:1px solid var(--glass-border);
  }
  .event-ico{
    position:absolute;
    left:18px; bottom:14px;
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
    border-radius:12px;
    background:rgba(5,5,5,.72);
    border:1px solid var(--glass-border);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .event-corps{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:26px 26px 24px;
  }
  .event-card h3{
    font-family:'Anton',sans-serif;
    font-size:1.25rem;
    margin-bottom:12px;
    letter-spacing:0.5px;
  }
  .event-resume{
    color:var(--ink-dim);
    font-size:.9rem;
    line-height:1.65;
    margin-bottom:18px;
    /* Le résumé reste court sur la carte : le texte complet est dans la fiche. */
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .event-corps .disc-tarif{ margin-top:auto; }
  /* Compte à rebours : deux lignes discrètes sous la date, pour qu'on voie
     d'un coup d'œil si l'événement approche. */
  .event-timer{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .event-timer-libelle{
    display:block;
    font-size:.7rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:4px;
  }
  .event-timer-valeur{
    font-family:'JetBrains Mono', monospace;
    font-size:.95rem;
    font-weight:700;
    color:var(--gold);
    font-variant-numeric:tabular-nums;
  }
  .event-timer--encours .event-timer-valeur{ color:#6fe0a8; }
  .event-timer--passe .event-timer-valeur{
    color:var(--ink-dim);
    font-weight:400;
    font-size:.85rem;
  }

  .event-plus{
    margin-top:14px;
    font-size:.82rem;
    font-weight:700;
    color:var(--ink-dim);
    transition:color .25s ease, transform .25s ease;
  }
  .event-card:hover .event-plus,
  .event-card:focus-visible .event-plus{
    color:var(--gold);
    transform:translateX(4px);
  }

  /* --- Fiche détaillée --- */
  .event-dlg{
    /* Même correctif de centrage que la fenêtre de compte : le « *{margin:0} »
       du site annule le « margin:auto » que le navigateur applique aux <dialog>. */
    position:fixed; inset:0; margin:auto;
    width:min(640px, 94vw); max-height:90vh; overflow-y:auto;
    padding:0; border:none; border-radius:20px;
    color:var(--ink);
    background:linear-gradient(155deg, #141414, #090909);
    border:1px solid var(--glass-border);
    box-shadow:0 24px 70px rgba(0,0,0,.7);
  }
  .event-dlg::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(4px);}
  .event-dlg .compte-fermer{
    z-index:2;
    width:34px; height:34px; border-radius:50%;
    background:rgba(5,5,5,.6);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:var(--ink);
  }
  .event-dlg-banniere{
    aspect-ratio:16 / 7;
    max-width:100%;
    position:relative;
    background-image:var(--event-degrade);
    background-size:cover;
    background-position:center;
    border-bottom:1px solid var(--glass-border);
  }
  .event-dlg-corps{ padding:28px 30px 32px; }
  .event-dlg-corps h3{
    font-family:'Anton',sans-serif;
    font-size:1.7rem;
    letter-spacing:.5px;
    margin-bottom:10px;
  }
  .event-dlg-lieu{
    margin-top:12px;
    font-size:.85rem;
    color:var(--ink-dim);
  }
  .event-dlg-texte{ margin-top:20px; }
  .event-dlg-texte p{
    color:var(--ink-dim);
    font-size:.95rem;
    line-height:1.75;
    margin-bottom:14px;
  }
  .event-dlg-texte p:last-child{ margin-bottom:0; }
  /* Affiche détaillée de l'événement, sous le texte : le document PDF reste la
     référence, l'image n'est là que pour donner le programme d'un coup d'œil. */
  .event-visuel{
    display:block;
    /* Les affiches sont tantôt larges, tantôt verticales : on les borne dans
       les deux sens pour qu'une affiche portrait n'occupe pas trois écrans. */
    width:auto;
    max-width:100%;
    height:auto;
    max-height:min(620px, 70vh);
    margin:22px auto 0;
    border-radius:12px;
    border:1px solid var(--glass-border);
  }
  .event-banniere, .event-dlg-banniere{ background-repeat:no-repeat; }
  .event-dlg-pdf{ margin-top:26px; }
  /* .btn impose display:inline-block, qui l'emporte sur la règle par défaut
     du navigateur pour [hidden] : sans ce !important, le bouton resterait
     visible sur les événements qui n'ont pas de document. */
  .event-dlg-pdf[hidden], .event-dlg-lieu[hidden], .event-dlg .disc-tarif[hidden]{
    display:none !important;
  }
  @media(max-width:600px){
    .event-dlg{ width:100vw; max-height:100vh; border-radius:0; }
    .event-dlg-corps{ padding:24px 20px 28px; }
    .event-dlg-corps h3{ font-size:1.35rem; }
  }

  /* ---------- Planning hebdomadaire ---------- */
  .cal-filters{
    margin-top:44px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .cal-filter{
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-dim);
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    border:1px solid var(--glass-border);
    border-radius:999px;
    padding:11px 20px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:9px;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  /* Pastille de couleur = légende des disciplines */
  .cal-filter[data-disc]:not([data-disc="all"])::before{
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    flex:none;
  }
  .cal-filter[data-disc="patinage"]::before{background:var(--d-patinage);}
  .cal-filter[data-disc="baby"]::before{background:var(--d-baby);}
  .cal-filter[data-disc="freestyle"]::before{background:var(--d-freestyle);}
  .cal-filter[data-disc="hockey"]::before{background:var(--d-hockey);}
  .cal-filter:hover{color:var(--ink); border-color:var(--gold);}
  .cal-filter.active{
    color:var(--night-0);
    background:var(--gold);
    border-color:var(--gold);
  }

  .cal-week{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:12px;
    align-items:start;
  }
  @media(max-width:1180px){ .cal-week{grid-template-columns:repeat(4,1fr);} }
  @media(max-width:820px){ .cal-week{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .cal-week{grid-template-columns:1fr;} }

  .cal-day-name{
    font-family:'Anton',sans-serif;
    font-size:.95rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink);
    padding-bottom:10px;
    margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  /* Jour sans aucun créneau après filtrage : on le retire */
  .cal-day.is-empty{display:none;}

  .cal-slot{
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    border:1px solid var(--glass-border);
    border-left:3px solid var(--slot-color, var(--gold));
    border-radius:10px;
    padding:12px 13px;
    margin-bottom:9px;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .cal-slot[hidden]{display:none;}
  .cal-slot:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.07);
  }
  .cal-slot[data-disc="patinage"]{--slot-color:var(--d-patinage);}
  .cal-slot[data-disc="baby"]{--slot-color:var(--d-baby);}
  .cal-slot[data-disc="freestyle"]{--slot-color:var(--d-freestyle);}
  .cal-slot[data-disc="hockey"]{--slot-color:var(--d-hockey);}

  .cal-time{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.5px;
    color:var(--slot-color, var(--gold));
    margin-bottom:6px;
  }
  .cal-cat{
    font-size:.84rem;
    font-weight:700;
    color:var(--ink);
    line-height:1.35;
    margin-bottom:4px;
  }
  .cal-meta{
    font-size:.72rem;
    color:var(--ink-dim);
    line-height:1.45;
  }
  .cal-note{
    margin-top:34px;
    padding-left:16px;
    border-left:2px solid var(--gold-dim);
    color:var(--ink-dim);
    font-size:.88rem;
    line-height:1.75;
    max-width:820px;
  }

  /* ---------- Hockey schedule ---------- */
  .hockey-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:start;
  }
  @media(max-width:900px){ .hockey-grid{grid-template-columns:1fr;} }
  .team-block-title{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin:28px 0 10px;
  }
  .team-block-title:first-child{margin-top:0;}
  .team-row{
    display:grid;
    grid-template-columns:1.3fr 1.5fr auto;
    gap:14px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  @media(max-width:560px){ .team-row{grid-template-columns:1fr; gap:4px; padding:14px 0;} }
  .team-row .tn{font-weight:700; font-size:.92rem;}
  .team-row .tn .tc{
    display:block;
    margin-top:3px;
    font-weight:500;
    font-size:.76rem;
    letter-spacing:.4px;
    color:var(--gold);
  }
  .team-row .ts{color:var(--ink-dim); font-size:.85rem;}
  .team-row .tp{font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:.85rem; text-align:right; white-space:nowrap;}
  .team-row .tp.muted{color:var(--ink-dim);}
  @media(max-width:560px){ .team-row .tp{text-align:left;} }

  .coaches-grid{
    display:grid;
    gap:12px;
  }
  .coach{padding:18px 20px;}
  .coach-name{font-weight:700; font-size:.92rem; margin-bottom:4px;}
  .coach-role{color:var(--ink-dim); font-size:.82rem; line-height:1.5;}

  /* ---------- Inscriptions ---------- */
  .insc-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
  }
  @media(max-width:900px){ .insc-grid{grid-template-columns:1fr;} }
  .insc-card{padding:44px 38px;}
  .pill{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--night-0);
    background:var(--gold);
    padding:6px 14px;
    margin-bottom:20px;
  }
  .insc-card h3{
    font-family:'Anton',sans-serif;
    font-size:1.7rem;
    margin-bottom:14px;
    letter-spacing:0.5px;
  }
  .insc-card p{color:var(--ink-dim); font-size:.95rem; line-height:1.7;}
  .dates-box{
    margin-top:22px;
    padding:20px;
    border-left:2px solid var(--gold);
    background:rgba(247,198,0,0.05);
  }
  .dates-box p{color:var(--ink); font-size:.88rem; margin-bottom:6px;}
  .ul{list-style:none; margin-top:20px;}
  .ul li{
    color:var(--ink-dim);
    font-size:.88rem;
    line-height:1.7;
    padding-left:16px;
    position:relative;
    margin-bottom:9px;
  }
  .ul li::before{content:'—'; position:absolute; left:0; color:var(--gold-dim);}

  /* Boutons de téléchargement des dossiers d'inscription */
  .doc-intro{
    margin-top:26px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
  }
  .doc-links{
    margin-top:14px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .doc-links .btn{padding:14px 24px;}

  /* ---------- Bureau ---------- */
  .bureau-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }
  @media(max-width:900px){ .bureau-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .bureau-grid{grid-template-columns:1fr;} }
  .bureau-card{
    padding:30px 24px;
    text-align:center;
  }
  /* Portraits du bureau.
     object-fit:cover est volontaire : les vignettes actuelles sont des
     images carrées (logo du club sur fond sombre), et de vraies photos
     de portrait s'y inséreront correctement sans rien changer au CSS. */
  .bureau-photo{
    display:block;
    width:88px; height:88px;
    margin:0 auto 18px;
    border-radius:50%;
    object-fit:cover;
    background:var(--night-1);
    border:2px solid var(--glass-border);
    transition:border-color .25s ease, transform .25s ease;
  }
  .bureau-card:hover .bureau-photo{
    border-color:var(--gold);
    transform:scale(1.05);
  }
  /* Portrait pas encore fourni : initiales dans le même disque, pour que la
     carte garde exactement la même silhouette une fois la photo ajoutée. */
  .bureau-photo--vide{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:.06em;
    color:var(--gold);
    user-select:none;
  }

  /* Sous-bloc « Communication », rattaché visuellement au bureau. */
  .bureau-sous-titre{ margin-top:64px; }
  .comm-grid{
    margin-top:34px;
    grid-template-columns:repeat(2,1fr);
    max-width:520px;
  }
  @media(max-width:520px){ .comm-grid{grid-template-columns:1fr;} }

  .bureau-name{font-weight:700; font-size:.92rem; margin-bottom:8px;}
  .bureau-role{color:var(--ink-dim); font-size:.8rem; line-height:1.5;}

  /* ---------- Contact ---------- */
  .contact-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:start;
  }
  @media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .ci{margin-bottom:28px;}
  .ci h4{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px;
  }
  .ci p, .ci a{
    color:var(--ink-dim);
    font-size:.92rem;
    line-height:1.7;
    text-decoration:none;
  }
  .ci a:hover{color:var(--gold);}
  .social-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}
  .soc-btn{
    border:1px solid var(--line);
    padding:9px 16px;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink);
    transition:border-color .2s ease, color .2s ease;
  }
  .soc-btn:hover{border-color:var(--gold); color:var(--gold);}

  .signup-form{
    padding:36px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  @media(max-width:520px){ .form-row{grid-template-columns:1fr;} }
  .fg{display:flex; flex-direction:column; gap:8px;}
  .fg label{
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .fg input, .fg select, .fg textarea{
    background:rgba(0,0,0,0.35);
    border:1px solid var(--glass-border);
    color:var(--ink);
    padding:13px 14px;
    font-family:'Inter',sans-serif;
    font-size:.9rem;
    border-radius:10px;
  }
  .fg textarea{min-height:100px; resize:vertical;}

  /* ---------- Compte (bouton d'en-tête + fenêtre) ---------- */
  .account-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-left:14px;
    border-radius:50%; cursor:pointer;
    background:linear-gradient(155deg, var(--glass-bg-strong), var(--glass-bg));
    border:1px solid var(--glass-border); color:var(--ink-dim);
    font-weight:700; font-size:13px; letter-spacing:.5px;
    transition:border-color .25s ease, color .25s ease, transform .2s ease;
  }
  .account-btn:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
  .account-btn.connecte{background:var(--gold); color:var(--night-0); border-color:var(--gold);}

  .compte-dlg{
    /* Le navigateur centre les <dialog> avec « margin:auto », que le
       « *{margin:0} » du site annule : on le repose explicitement. */
    position:fixed; inset:0; margin:auto;
    width:min(430px, 92vw); max-height:90vh; overflow-y:auto;
    padding:28px; border:none; border-radius:20px;
    color:var(--ink);
    background:linear-gradient(155deg, #141414, #090909);
    border:1px solid var(--glass-border);
    box-shadow:0 24px 70px rgba(0,0,0,.7);
  }
  .compte-dlg::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(4px);}
  .compte-fermer{
    position:absolute; top:14px; right:16px; background:none; border:none;
    color:var(--ink-dim); font-size:26px; line-height:1; cursor:pointer;
  }
  .compte-fermer:hover{color:var(--gold);}
  .compte-entete{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
  .compte-entete strong{display:block; font-size:1rem;}
  .compte-entete span{font-size:.8rem; color:var(--ink-dim);}
  .compte-onglets{display:flex; gap:8px; margin-bottom:20px;}
  .compte-onglets button{
    flex:1; padding:10px; border-radius:8px; cursor:pointer;
    background:none; border:1px solid var(--line); color:var(--ink-dim);
    font-family:inherit; font-size:.85rem; font-weight:600;
  }
  .compte-onglets button.on{border-color:var(--gold); color:var(--gold); background:rgba(247,198,0,.08);}
  /* Un élément marqué hidden doit l'être malgré le display:flex ci-dessus. */
  .compte-onglets[hidden]{display:none !important;}
  /* Sans min-width:0, un input garde sa largeur intrinsèque et déborde
     de sa colonne de grille. */
  .compte-form .fg{min-width:0;}
  .compte-titre{font-size:1.15rem; margin-bottom:4px;}
  .compte-sous{color:var(--ink-dim); font-size:.85rem; margin-bottom:18px;}
  .compte-form{display:flex; flex-direction:column; gap:16px;}
  .compte-form .btn{margin-top:4px;}
  .compte-aide{color:var(--ink-dim); font-size:.78rem; margin-top:-8px;}
  .compte-lien{
    background:none; border:none; color:var(--ink-dim); cursor:pointer;
    font-family:inherit; font-size:.8rem; text-decoration:underline; padding:0;
  }
  .compte-lien:hover{color:var(--gold);}
  .compte-msg{margin:16px 0 0; font-size:.85rem; line-height:1.5;}
  .compte-msg.ok{color:#4ade80;}
  .compte-msg.ko{color:#fb923c;}
  @media(max-width:1200px){ .account-btn{margin-left:auto; margin-right:12px;} }

  .form-status{margin:14px 0 0; font-size:.88rem; line-height:1.55; min-height:1px;}
  .form-status.ok{color:#4ade80;}
  .form-status.ko{color:#fb923c;}
  .form-status a{color:var(--gold);}
  .fg input:focus, .fg select:focus, .fg textarea:focus{outline:none; border-color:var(--gold);}
  .fg input::placeholder, .fg textarea::placeholder{color:#5a5a5a;}

  /* ---------- Mentions légales ---------- */
  .legal-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:32px;
  }
  .legal-block h3{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    line-height:1.7;
    margin-bottom:14px;
  }
  .legal-block p{
    color:var(--ink-dim);
    font-size:.9rem;
    line-height:1.8;
  }
  .legal-block strong{color:var(--ink); font-weight:600;}
  .legal-block a{color:var(--ink-dim); text-decoration:none; transition:color .2s ease;}
  .legal-block a:hover{color:var(--gold);}

  .footer-copy{font-size:12px; color:var(--ink-dim);}

  /* ---------- Values (wing shapes) ---------- */
  .values{
    margin-top:130px;
  }
  .value-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:56px;
  }
  @media(max-width:820px){ .value-row{grid-template-columns:1fr;} }
  .value-card{
    background:var(--night-1);
    padding:44px 34px;
    transition:background .3s ease;
  }
  .value-card:hover{background:#161616;}
  .value-card .vnum{
    font-family:'JetBrains Mono', monospace;
    color:var(--gold-dim);
    font-size:13px;
    letter-spacing:2px;
  }
  .value-card h3{
    font-family:'Anton',sans-serif;
    font-size:1.5rem;
    margin:18px 0 14px;
    letter-spacing:0.5px;
  }
  .value-card p{
    color:var(--ink-dim);
    font-size:.95rem;
    line-height:1.7;
  }

  /* ---------- Matches ---------- */
  .match-list{margin-top:50px; border-top:1px solid var(--line);}
  .match{
    display:grid;
    grid-template-columns:110px 1fr auto auto;
    align-items:center;
    gap:26px;
    padding:26px 8px;
    border-bottom:1px solid var(--line);
    transition:background .25s ease;
  }
  .match:hover{background:rgba(242,194,48,0.04);}
  @media(max-width:700px){
    .match{grid-template-columns:1fr; gap:8px; text-align:left;}
  }
  .match .date{
    font-family:'JetBrains Mono', monospace;
    color:var(--gold);
    font-size:13px;
    letter-spacing:1px;
  }
  .match .versus{
    font-family:'Anton',sans-serif;
    font-size:1.3rem;
    letter-spacing:0.5px;
  }
  .match .versus span{color:var(--ink-dim); font-family:'Inter',sans-serif; font-size:0.85rem; margin:0 10px; text-transform:uppercase; letter-spacing:2px;}
  .match .venue{
    color:var(--ink-dim);
    font-size:.85rem;
  }
  .match .status{
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:6px 14px;
    border:1px solid var(--gold-dim);
    color:var(--gold);
    justify-self:end;
    white-space:nowrap;
  }
  @media(max-width:700px){ .match .status{justify-self:start;} }

  /* ---------- Join / Footer ---------- */
  .join{
    text-align:center;
    padding-top:130px;
    padding-bottom:70px;
  }
  .join h2{
    font-family:'Anton',sans-serif;
    font-size:clamp(2.4rem,7vw,5.5rem);
    letter-spacing:1px;
    max-width:900px;
    margin:0 auto 26px;
  }
  .join p.sub{
    color:var(--ink-dim);
    max-width:520px;
    margin:0 auto 42px;
    font-size:1.05rem;
  }
  form.signup{
    display:flex;
    gap:12px;
    max-width:480px;
    margin:0 auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  form.signup input[type=email]{
    flex:1;
    min-width:220px;
    background:var(--night-1);
    border:1px solid var(--line);
    color:var(--ink);
    padding:16px 18px;
    font-family:'Inter',sans-serif;
    font-size:.95rem;
    border-radius:2px;
  }
  form.signup input[type=email]:focus{
    outline:none;
    border-color:var(--gold);
  }
  form.signup input[type=email]::placeholder{color:var(--ink-dim);}

  footer{
    border-top:1px solid var(--line);
    padding:40px 6vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    color:var(--ink-dim);
    font-size:12px;
    letter-spacing:1px;
  }
  footer .brand{font-size:15px;}
  .socials{display:flex; gap:20px;}
  .socials a{color:var(--ink-dim); text-decoration:none; font-size:12px; letter-spacing:1.5px; transition:color .2s ease;}
  .socials a:hover{color:var(--gold);}

  /* ============================================================
     ANIMATIONS
     Tout est conditionné à la classe .js posée sur <html>.
     Cette classe n'est ajoutée que si le navigateur accepte le
     mouvement — donc sans JS, ou en "reduced motion", la page
     s'affiche entièrement, sans un seul élément caché.
     ============================================================ */

  /* --- Apparition au scroll ---
     ⚠ Cette liste est dupliquée dans js/animations.js (const REVEAL).
     Si vous ajoutez un sélecteur ici, ajoutez-le là-bas aussi. */
  .js .section-tag,
  .js .section-title,
  .js .section-lead,
  .js .about-text,
  .js .stat,
  .js .infra-card,
  .js .disc-card,
  .js .event-card,
  .js .cal-filters,
  .js .cal-day,
  .js .cal-note,
  .js .news-item,
  .js .insta-embed,
  .js .team-block-title,
  .js .team-row,
  .js .coach,
  .js .insc-card,
  .js .bureau-card,
  .js .value-card,
  .js .legal-block,
  .js .contact-info,
  .js .signup-form,
  .js .cta-row,
  .js .hero-stats,
  .js .eyebrow,
  .js .title,
  .js .tagline,
  .js .scroll-cue{
    opacity:0;
    transform:translateY(var(--reveal-y));
    transition:
      opacity .7s cubic-bezier(.22,.61,.36,1) var(--rd, 0ms),
      transform .7s cubic-bezier(.22,.61,.36,1) var(--rd, 0ms);
  }
  /* Le logo du hero flotte déjà via @keyframes float : on ne touche pas
     à son transform, sinon l'animation écrase la révélation. */
  .js .hero-logo{
    opacity:0;
    transition:opacity .9s ease var(--rd, 0ms);
  }
  /* Placé après les règles ci-dessus pour gagner à spécificité égale */
  .js .in{
    opacity:1;
    transform:none;
  }

  /* Le trait du chapô se dessine à l'apparition */
  .js .section-tag::before{width:0; transition:width .6s ease .25s;}
  .js .section-tag.in::before{width:24px;}

  /* Trait doré qui se trace sous chaque titre de section */
  .js .section-title{position:relative; padding-bottom:18px;}
  .js .section-title::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    height:3px;
    width:0;
    background:linear-gradient(90deg, var(--gold), transparent);
    transition:width .9s cubic-bezier(.22,.61,.36,1) .35s;
  }
  .js .section-title.in::after{width:180px;}

  /* Les cartes s'éclairent au survol */
  .disc-card:hover,
  .event-card:hover,
  .insc-card:hover,
  .bureau-card:hover,
  .coach:hover,
  .stat:hover{
    border-color:var(--glass-gold);
    box-shadow:
      0 14px 44px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 60px rgba(247,198,0,0.09);
  }

  /* --- Reflet qui balaie le titre du hero (mouvement complet seulement) --- */
  .js.motion-full h1.title{
    background:
      linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 58%),
      linear-gradient(180deg, #ffffff 0%, var(--gold) 120%);
    background-size:220% 100%, 100% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    animation:title-sheen 6.5s ease-in-out 1.4s infinite;
  }
  @keyframes title-sheen{
    0%{background-position:-120% 0, 0 0;}
    55%,100%{background-position:220% 0, 0 0;}
  }

  /* --- Header compact une fois la page défilée --- */
  header{
    transition:padding .35s ease, box-shadow .35s ease, background .35s ease;
  }
  header.scrolled{
    padding:11px 6vw;
    background:linear-gradient(155deg, rgba(17,17,17,0.92), rgba(5,5,5,0.92));
    box-shadow:0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  }

  /* --- Section active signalée dans le menu --- */
  nav a.active{color:var(--gold);}
  nav a.active::after{width:100%;}

  /* --- Parallaxe du filigrane de fond --- */
  .logo-bg{
    transform:translate(-50%,-50%) translateY(var(--py, 0px));
  }

  /* --- Inclinaison des cartes au survol (piloté en JS) --- */
  .js .disc-card,
  .js .event-card,
  .js .insc-card,
  .js .bureau-card,
  .js .value-card,
  .js .coach,
  .js .news-item,
  .js .stat{
    transition:
      opacity .7s cubic-bezier(.22,.61,.36,1) var(--rd, 0ms),
      transform .18s ease-out,
      background .25s ease,
      border-color .25s ease;
  }

  /* --- Le bandeau défilant se fige au survol --- */
  .ticker-wrap:hover .ticker{animation-play-state:paused;}

  /* --- Entrée en cascade des liens du menu mobile --- */
  @media(max-width:1000px){
    nav.open ul li{
      opacity:0;
      animation:nav-item .4s cubic-bezier(.22,.61,.36,1) forwards;
    }
    nav.open ul li:nth-child(1){animation-delay:.04s;}
    nav.open ul li:nth-child(2){animation-delay:.08s;}
    nav.open ul li:nth-child(3){animation-delay:.12s;}
    nav.open ul li:nth-child(4){animation-delay:.16s;}
    nav.open ul li:nth-child(5){animation-delay:.20s;}
    nav.open ul li:nth-child(6){animation-delay:.24s;}
    nav.open ul li:nth-child(7){animation-delay:.28s;}
    nav.open ul li:nth-child(8){animation-delay:.32s;}
  }
  @keyframes nav-item{
    from{opacity:0; transform:translateX(-14px);}
    to{opacity:1; transform:none;}
  }

  /* Le header fixe ne doit pas masquer le titre d'une section ciblée */
  section{scroll-margin-top:110px;}

  /* ---------- Écran d'accueil ----------
     display:none par défaut = sans JS ou en "reduced motion", ce rideau
     n'apparaît JAMAIS. Il ne peut donc pas rester coincé devant le site. */
  .intro{display:none;}
  .js .intro{
    display:flex;
    position:fixed;
    inset:0;
    z-index:200;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(ellipse 100% 70% at 50% 45%, #161616 0%, var(--night-0) 60%),
      var(--night-0);
    transition:transform .75s cubic-bezier(.7,0,.3,1);
  }
  .js .intro.done{transform:translateY(-100%);}
  html.intro-active{overflow:hidden;}
  /* Mouvement réduit : le rideau s'efface au lieu de remonter */
  .js:not(.motion-full) .intro{transition:opacity .45s ease;}
  .js:not(.motion-full) .intro.done{transform:none; opacity:0;}

  .intro-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }
  .intro-logo{
    width:min(180px, 40vw);
    filter:drop-shadow(0 0 45px var(--gold-glow));
    animation:intro-logo 1.1s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes intro-logo{
    from{opacity:0; transform:scale(.82) translateY(12px);}
    to{opacity:1; transform:none;}
  }
  .intro-bar{
    width:150px;
    height:2px;
    background:var(--line);
    overflow:hidden;
  }
  .intro-bar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg, var(--gold-dim), var(--gold));
    transform:scaleX(0);
    transform-origin:left;
    animation:intro-bar 1.15s cubic-bezier(.5,0,.2,1) both;
  }
  @keyframes intro-bar{to{transform:scaleX(1);}}
  /* Retour dans la même session : on ne réinflige pas l'intro complète */
  .intro.quick .intro-logo,
  .intro.quick .intro-bar span{animation-duration:.3s;}

  /* ---------- Rideau de transition entre sections ---------- */
  .page-wipe{display:none;}
  .js .page-wipe{
    display:block;
    position:fixed;
    inset:0;
    z-index:150;
    pointer-events:none;
    transform:translateY(100%);
    background:
      radial-gradient(ellipse 90% 60% at 50% 50%, #1a1a1a 0%, var(--night-0) 65%),
      var(--night-0);
  }
  .js .page-wipe.in{transform:translateY(0); transition:transform .38s cubic-bezier(.7,0,.3,1);}
  .js .page-wipe.out{transform:translateY(-100%); transition:transform .44s cubic-bezier(.7,0,.3,1);}
  /* Mouvement réduit : fondu au noir plutôt que rideau qui coulisse */
  .js:not(.motion-full) .page-wipe{transform:none; opacity:0; transition:opacity .3s ease;}
  .js:not(.motion-full) .page-wipe.in{opacity:1;}
  .js:not(.motion-full) .page-wipe.out{opacity:0;}
  .page-wipe-logo{
    position:absolute;
    top:50%; left:50%;
    width:110px;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 0 30px var(--gold-glow));
  }

  /* Le saut se fait rideau baissé : il doit être instantané, pas fluide */
  html.no-smooth{scroll-behavior:auto;}

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  /* ---------- Mouvement réduit ----------
     On ne coupe PAS tout : les fondus restent (ils ne déclenchent pas de
     gêne vestibulaire). On supprime seulement ce qui bouge vraiment :
     flottements, balayages en boucle, parallaxe, défilement automatique. */
  @media (prefers-reduced-motion: reduce){
    .hero-logo{animation:none;}
    h1.title{animation:none;}
    .ticker{animation:none;}
    .scroll-cue .line{animation:none;}
    .intro-logo, .intro-bar span{animation:none;}
    nav.open ul li{animation:none; opacity:1;}
    .logo-bg{transform:translate(-50%,-50%) !important;}
  }