@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

/* ============================================================
   CHALLENGE WESPORT
   Identité reprise de We Sport Tamanu — la course est rattachée
   à la salle. Un accent chaud est ajouté pour l'urgence
   (places restantes), que le cyan seul ne sait pas porter.
   ============================================================ */

:root{
  --ink:#04161d;
  --ink-2:#0a2836;
  --cyan:#00c7f1;
  --cyan-deep:#00708f;
  --flame:#e8501c;        /* places restantes, dernières places */
  --paper:#f4f6f7;
  --paper-2:#e7ecee;
  --line:#d3dadd;
  --body:#16242a;
  --muted:#5f7079;

  --gutter:clamp(1.25rem,5vw,4rem);
  --stack:clamp(3.25rem,7vw,6rem);
  --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--cyan);color:#00212c;
  padding:.75rem 1.25rem;z-index:200;font-weight:700}
.skip:focus{left:1rem;top:1rem}
[hidden]{display:none!important}

.wrap{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--stack)}
.section--dark{background:var(--ink);color:var(--paper)}
.section--mid{background:var(--paper-2)}
.section--dark .lede{color:rgba(244,246,247,.72)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- typographie ---------- */
.display,.heading{
  font-weight:800;font-variation-settings:'wdth' 118,'wght' 800;
  line-height:.95;letter-spacing:-.015em;margin:0 0 .5em;text-transform:uppercase;
}
.heading{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem)}
.display{font-size:clamp(2.2rem,1.1rem + 4.6vw,4.8rem);line-height:.9}
h3{font-size:1.18rem;font-weight:700;line-height:1.25;margin:0 0 .4em}
p{margin:0 0 1em}
.lede{max-width:var(--measure);color:var(--muted);font-size:1.07rem}
.eyebrow{color:var(--cyan);font-weight:700;font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;margin:0 0 1rem}
.num{font-variant-numeric:tabular-nums}

/* ---------- boutons ---------- */
.btn{display:inline-block;background:var(--cyan);color:#00212c;text-decoration:none;
  border:2px solid var(--cyan);padding:.9rem 1.9rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.btn:hover{background:#00b0d6;border-color:#00b0d6}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.btn--ghost:hover{background:rgba(255,255,255,.1);opacity:1}
.btn--sm{padding:.55rem 1.15rem;font-size:.92rem}
.btn--wide{width:100%;text-align:center}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.textlink{color:var(--cyan-deep);font-weight:700;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:1px;background:none;border-top:0;
  border-left:0;border-right:0;cursor:pointer}
.section--dark .textlink,.foot .textlink{color:var(--cyan)}
.textlink:hover{color:var(--body)}
.section--dark .textlink:hover{color:#fff}

/* ---------- barre haute et menu ---------- */
.topbar{background:var(--ink);color:rgba(244,246,247,.7);font-size:.85rem}
.topbar__inner{display:flex;gap:1.5rem;align-items:center;min-height:2.4rem;
  justify-content:space-between;flex-wrap:wrap}
.topbar a{color:var(--cyan);text-decoration:none;font-weight:700}

/* ---------- En-tête : UN SEUL bloc collant ----------
   Le menu et le fil étaient tous les deux en `top:0` : ils se
   collaient au même endroit et se chevauchaient. Ils sont
   maintenant dans un conteneur unique, lui seul collant. */
.sitehead{position:sticky;top:0;z-index:150;background:var(--ink-2);color:var(--paper)}
.masthead{background:var(--ink-2);color:var(--paper)}
.masthead__inner{display:flex;align-items:center;gap:.7rem;min-height:0;
  padding-block:.5rem}
.brand{margin-right:auto;text-decoration:none;line-height:1}
.brand__name{
  display:block;font-weight:900;font-variation-settings:'wdth' 118,'wght' 900;
  font-size:.86rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;
}
@media (min-width:64rem){.brand__name{font-size:1.25rem}}
.brand__name em{font-style:normal;color:var(--cyan)}
.brand__tag{display:none}
@media (min-width:64rem){
  .brand__tag{display:block;font-size:.66rem;letter-spacing:.13em;
    text-transform:uppercase;color:rgba(244,246,247,.55);margin-top:.25rem}
}
.secbtn{margin-left:auto;background:none;border:1px solid rgba(244,246,247,.3);
  color:var(--paper);padding:.28rem .6rem;font-size:.72rem;font-weight:700;
  cursor:pointer;white-space:nowrap}
.secbtn:hover{border-color:var(--paper)}
@media (min-width:64rem){.secbtn{display:none}}

/* Panneau des sections : la liste complète, à la demande.
   Sur grand écran le menu classique reprend la main. */
.secpanel{background:var(--ink);border-top:1px solid rgba(244,246,247,.14)}
.secpanel[hidden]{display:none}
.secpanel__grid{display:grid;gap:1px;background:rgba(244,246,247,.14);
  grid-template-columns:repeat(2,1fr)}
.secpanel__cell{background:var(--ink-2);padding:.8rem .9rem;text-decoration:none;
  display:flex;align-items:center;gap:.6rem;color:var(--paper)}
.secpanel__cell.is-now{background:var(--cyan);color:#00212c}
.secpanel__n{font-weight:800;font-variation-settings:'wdth' 108,'wght' 800;
  opacity:.5;font-size:.76rem}
.secpanel__t{font-weight:700;font-size:.86rem}
.secpanel__cta{display:block;background:var(--cyan);color:#00212c;text-align:center;
  padding:.8rem;font-weight:800;text-decoration:none}

.nav{display:flex;align-items:center;gap:1.5rem}
@media (max-width:64rem){.nav{display:none}}
.nav a{text-decoration:none;font-size:1rem;font-weight:600;
  color:rgba(244,246,247,.88);padding-block:.4rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--cyan)}
.nav a.btn{border-bottom:2px solid var(--cyan);color:#00212c}

/* RULEBOOK : rubrique prioritaire, présente sur toutes les pages.
   Traité comme un bouton bordé plutôt qu'un lien de menu, pour
   qu'un coureur le trouve sans le chercher. */
.nav a.nav__rulebook{
  border:2px solid var(--flame);color:#fff;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;letter-spacing:.06em;
  padding:.5rem 1.1rem;border-bottom-width:2px
}
.nav a.nav__rulebook:hover{background:var(--flame);border-color:var(--flame);color:#fff}
.nav a.btn:hover{color:#00212c}
.nav-toggle{display:none}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:26px;height:2px;background:currentColor;content:"";position:relative}
.nav-toggle span::before{position:absolute;top:-8px}
.nav-toggle span::after{position:absolute;top:8px}
@media (max-width:64rem){
  .nav-toggle{display:block}
  .masthead__inner{flex-wrap:wrap}
  .nav{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease}
  .nav.open{max-height:30rem;padding-bottom:1.25rem}
  .nav a{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a.btn{margin-top:1rem;text-align:center}
}

/* ---------- héros ---------- */
.hero{background:var(--ink);color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem)}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
@media (max-width:60rem){.hero__grid{grid-template-columns:1fr}}
.hero__date{font-size:clamp(2.2rem,1rem + 7.4vw,5.4rem);color:var(--paper);
  overflow-wrap:normal;hyphens:none}
/* Quand aucune date n'est confirmée, le libellé est long et non
   sécable : on réduit le corps plutôt que de couper un mot. */
.hero__date--attente{font-size:clamp(1.9rem,1rem + 4vw,3.2rem)}
@media (max-width:46rem){.hero__date{font-variation-settings:'wdth' 104,'wght' 800}}
.hero__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin-top:1.2rem;
  color:rgba(244,246,247,.82);font-size:1.05rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* carte places restantes */
.spotcard{background:var(--ink-2);padding:1.75rem;border-top:4px solid var(--flame)}
.spotcard__n{display:block;font-size:3.4rem;line-height:1;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;color:var(--flame)}
.spotcard__label{display:block;color:rgba(244,246,247,.75);margin-top:.4rem}
.spotcard__bar{margin-top:1.1rem;height:6px;background:rgba(244,246,247,.16);overflow:hidden}
.spotcard__fill{height:100%;background:var(--flame)}
.spotcard__note{margin:1.1rem 0 0;font-size:.9rem;color:rgba(244,246,247,.6)}

/* preuve sociale */
.proof{list-style:none;margin:3rem 0 0;padding:2rem 0 0;display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid rgba(255,255,255,.18)}
.proof strong{display:block;font-size:2.1rem;font-weight:800;
  font-variation-settings:'wdth' 114,'wght' 800;color:var(--cyan);line-height:1}
.proof span{display:block;margin-top:.35rem;color:rgba(244,246,247,.68);font-size:.95rem}

/* ---------- catégories ---------- */
.cats{list-style:none;padding:0;margin:2.25rem 0 0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(3,1fr)}
/* Neuf catégories : trois colonnes exactement, donc trois rangées
   pleines. En auto-fit, la dernière rangée laissait des cases vides. */
@media (max-width:52rem){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:34rem){.cats{grid-template-columns:1fr}}
.cat{background:var(--paper);padding:1.35rem 1.25rem 1.5rem}
.cat__label{font-weight:800;font-variation-settings:'wdth' 114,'wght' 800;
  font-size:1.15rem;letter-spacing:.03em}
.cat__note{color:var(--muted);font-size:.92rem;margin:.3rem 0 0}
.cat--pro .cat__label{color:var(--flame)}

/* ---------- tableau des charges ---------- */
.tablewrap{overflow-x:auto;margin-top:2rem;-webkit-overflow-scrolling:touch}
table.grid{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  min-width:40rem}
table.grid th{text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.7rem .9rem;background:var(--ink);color:var(--paper);
  white-space:nowrap}
table.grid td{padding:.8rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid tbody tr:nth-child(odd){background:#fff}
table.grid th:first-child,table.grid td:first-child{
  white-space:normal;font-weight:700;min-width:13rem}
table.grid .pro{color:var(--flame);font-weight:700}
.scrollhint{font-size:.85rem;color:var(--muted);margin-top:.6rem}

/* ---------- stations / règlement ---------- */
.stations{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1.5rem}
.station{border-top:3px solid var(--cyan);padding-top:1.2rem;
  display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr) minmax(0,18rem)}
@media (max-width:58rem){.station{grid-template-columns:1fr}}
.station__n{color:var(--cyan-deep);font-weight:800;font-size:.85rem;letter-spacing:.1em}
.station__name{font-size:1.3rem;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;text-transform:uppercase;margin:.3rem 0 .2em}
.station__mesure{color:var(--flame);font-weight:700;margin-bottom:.6rem}
.station__regle{color:var(--muted);margin:0}
.station__video{background:var(--paper-2);aspect-ratio:16/9;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:1rem;
  color:var(--muted);font-size:.88rem}
.station__video iframe{width:100%;height:100%;border:0}

/* ---------- tarifs ---------- */
.prices{list-style:none;padding:0;margin:2.25rem 0 0;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.price{border-top:3px solid var(--cyan);padding-top:1.1rem}
.price__amount{font-size:2.2rem;font-weight:800;
  font-variation-settings:'wdth' 110,'wght' 800;line-height:1;margin:.3rem 0 .15rem}
.price__unite{color:var(--flame);font-weight:700;font-size:.92rem;margin-bottom:.6rem}
.price p{color:var(--muted);margin:0}
.section--dark .price p{color:rgba(244,246,247,.72)}

/* ---------- classement ---------- */
table.board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.board th{text-align:left;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:0 1rem .7rem 0;
  border-bottom:2px solid var(--body);white-space:nowrap}
.section--dark table.board th{color:rgba(244,246,247,.6);
  border-bottom-color:rgba(244,246,247,.35)}
table.board td{padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--line);
  white-space:nowrap}
.section--dark table.board td{border-bottom-color:rgba(244,246,247,.14)}
table.board td:first-child,table.board th:first-child{width:3.4rem}
table.board .name{white-space:normal;font-weight:600}
table.board .pts{font-weight:800}
table.board tr[data-rank="1"] .rank,table.board tr[data-rank="1"] .pts{color:var(--flame)}
.rank{font-weight:700}
.chiprow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{border:1px solid var(--line);background:transparent;color:var(--body);
  padding:.45rem 1rem;cursor:pointer;font-size:.9rem;font-weight:600}
.chip[aria-pressed="true"]{background:var(--body);color:var(--paper);border-color:var(--body)}
.section--dark .chip{border-color:rgba(244,246,247,.28);color:var(--paper)}
.section--dark .chip[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.note{font-size:.9rem;color:var(--muted);margin-top:1rem}
.section--dark .note{color:rgba(244,246,247,.6)}
.empty{color:var(--muted);padding:2rem 0}

/* ---------- calendrier ---------- */
.cal{list-style:none;padding:0;margin:2.25rem 0 0}
.cal li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line)}
.cal li:first-child{border-top:1px solid var(--line)}
.cal__date{font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:1.3rem;min-width:11rem}
.cal__venue{color:var(--muted);margin-right:auto}
.cal__spots{font-size:.9rem;font-weight:700;color:var(--flame)}
.cal__status{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cal__status--scheduled{color:var(--cyan-deep)}
.cal__status--done{color:var(--muted)}
.cal li.is-past .cal__date{color:var(--muted)}

/* ---------- faq ---------- */
.faq{margin-top:2.25rem;max-width:50rem}
.faq details{border-bottom:1px solid var(--line)}
.section--dark .faq details{border-bottom-color:rgba(244,246,247,.16)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;
  font-weight:700;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:1rem;font-size:1.5rem;
  font-weight:400;color:var(--cyan)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:1.25rem;color:var(--muted);max-width:var(--measure)}
.section--dark .faq details p{color:rgba(244,246,247,.72)}

/* ---------- galerie ---------- */
.gallery{display:grid;gap:1px;margin-top:2.25rem;background:var(--line);
  border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.gallery__slot{background:var(--paper-2);aspect-ratio:4/3;display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:.88rem;
  text-align:center;padding:1rem}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ---------- formulaire ---------- */
.form{max-width:36rem;margin-top:2.25rem}
.field{margin-bottom:1.5rem}
.field label,.field legend{display:block;font-weight:700;font-size:.95rem;margin-bottom:.4rem}
.field .hint{font-weight:400;color:var(--muted);font-size:.87rem}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=date],.field select{
  width:100%;padding:.8rem .9rem;border:1px solid var(--line);background:#fff;
  color:var(--body);font:inherit;border-radius:0}
.field input:focus,.field select:focus{border-color:var(--body)}
.field fieldset{border:0;padding:0;margin:0}
.radios{display:flex;flex-wrap:wrap;gap:.55rem}
.radios label{border:1px solid var(--line);padding:.6rem 1.1rem;cursor:pointer;
  font-weight:600;margin:0}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios label:has(input:checked){background:var(--body);color:var(--paper);
  border-color:var(--body)}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem}
.check input{margin-top:.35rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--cyan-deep)}
.check label{font-weight:400;font-size:.96rem;margin:0}
.err{color:var(--flame);font-size:.88rem;font-weight:600;margin-top:.35rem;display:block}
.total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid var(--body);padding-top:1rem;margin:2rem 0 .5rem}
.total__amount{font-size:1.9rem;font-weight:800;font-variation-settings:'wdth' 110,'wght' 800}
.total__unite{font-size:.88rem;color:var(--muted);margin-bottom:1.4rem}
.panel{border-left:4px solid var(--cyan);background:var(--paper-2);
  padding:1.35rem 1.5rem;margin-top:1.75rem;max-width:36rem}
.panel h3{margin-bottom:.3rem}
.panel p:last-child{margin-bottom:0}

/* ---------- pied de page ---------- */
.foot{background:var(--ink);color:rgba(244,246,247,.72);padding-block:3.25rem 2rem}
.foot__grid{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot a{color:rgba(244,246,247,.85)}
.foot h4{margin:0 0 .6rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);font-weight:700}
.foot__brand{color:#fff;font-weight:900;font-variation-settings:'wdth' 120,'wght' 900;
  font-size:1.2rem;text-transform:uppercase;display:block;margin-bottom:.4rem}
.foot__brand em{font-style:normal;color:var(--cyan)}
.foot__legal{margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:rgba(244,246,247,.48);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot__partners{margin-top:1.5rem;font-size:.9rem}

/* ---------- en-tête de page intérieure ---------- */
.page-head{background:var(--ink-2);color:var(--paper);padding-block:clamp(2.25rem,5vw,4rem)}
.page-head .heading{margin-bottom:.3em}
.page-head .lede{color:rgba(244,246,247,.75)}

/* ============================================================
   PHOTOS — pistes 1, 3 et 5
   Toutes les photos sont verticales : chaque traitement en tient
   compte plutôt que de recadrer au hasard.
   ============================================================ */

/* ---------- Piste 1 : héros pleine largeur ---------- */
.hero--photo{position:relative;overflow:hidden;padding-block:0}
.hero--photo .hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:56% 30%
}
/* Voile dégradé : le texte reste lisible à gauche, la photo
   respire à droite. Un voile uniforme tuerait l'image. */
.hero--photo .hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(4,22,29,.95) 0%, rgba(4,22,29,.88) 34%,
    rgba(4,22,29,.55) 62%, rgba(4,22,29,.2) 100%)
}
.hero--photo > .wrap{
  position:relative;padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);
  min-height:24rem;
  /* colonne, pas ligne : sans `flex-direction`, le sur-titre, le
     titre et l'accroche se retrouvaient côte à côte. */
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start
}
.hero--photo > .wrap > *{max-width:min(100%,46rem)}
@media (max-width:60rem){
  .hero--photo .hero__bg{background-position:62% 18%}
  .hero--photo .hero__veil{
    background:linear-gradient(180deg,
      rgba(4,22,29,.82) 0%, rgba(4,22,29,.9) 45%, rgba(4,22,29,.97) 100%)
  }
}
/* Les chiffres reposent sur une bande pleine : posés directement
   sur la photo, ils tombaient sur la zone claire et devenaient
   illisibles. */
.hero--photo .hero__band{
  position:relative;background:var(--ink);margin-top:clamp(2rem,4vw,3rem)
}
.hero--photo .hero__band .proof{
  margin:0;padding-block:2rem;border-top:0
}

.hero__credit{
  position:absolute;right:var(--gutter);bottom:.8rem;
  font-size:.72rem;letter-spacing:.06em;color:rgba(244,246,247,.5)
}

/* ---------- Piste 3 : triptyque de stations ---------- */
.trip{display:grid;gap:1px;background:var(--ink);grid-template-columns:repeat(3,1fr)}
.trip__cell{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.trip__cell img{width:100%;height:100%;object-fit:cover;display:block}
.trip__cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.2rem 1rem;color:#fff;
  background:linear-gradient(transparent,rgba(4,22,29,.55) 35%,rgba(4,22,29,.94))}
.trip__st{display:block;font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  text-transform:uppercase;font-size:1.05rem;line-height:1.1}
.trip__ch{display:block;color:var(--cyan);font-weight:700;font-size:.85rem;margin-top:.25rem}
@media (max-width:52rem){.trip{grid-template-columns:1fr 1fr}}
@media (max-width:30rem){.trip{grid-template-columns:1fr}.trip__cell{aspect-ratio:4/3}}

/* ---------- Bloc « c'est pour qui » : photo + texte ---------- */
.forwho{display:grid;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--ink);color:var(--paper)}
.forwho__img{position:relative;min-height:26rem;background-size:cover;background-position:50% 32%}
.forwho__txt{padding:clamp(2rem,4vw,3.5rem)}
@media (max-width:60rem){
  .forwho{grid-template-columns:1fr}
  .forwho__img{min-height:20rem;background-position:50% 25%}
}

/* ---------- Piste 5 : mosaïque ---------- */
.mos{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(4,1fr);grid-auto-rows:13rem;margin-top:2.25rem}
.mos__cell{position:relative;overflow:hidden;background:var(--ink)}
.mos__cell img{width:100%;height:100%;object-fit:cover;display:block}
.mos__cell--big{grid-column:span 2;grid-row:span 2}
/* Six photos plus le bloc chiffre remplissent exactement la
   grille si la dernière court sur deux colonnes. */
.mos__cell--wide{grid-column:span 2}
.mos__stat{grid-column:span 2;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:1.75rem}
.mos__stat strong{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;color:var(--cyan)}
.mos__stat span{margin-top:.5rem;color:rgba(244,246,247,.74);font-size:.95rem}
@media (max-width:60rem){
  .mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:11rem}
  .mos__cell--big,.mos__stat,.mos__cell--wide{grid-column:span 2}
}
.credit-line{font-size:.85rem;color:var(--muted);margin-top:1rem}
.section--dark .credit-line{color:rgba(244,246,247,.55)}

/* ============================================================
   PICTOGRAMMES ET SCHÉMA DU PARCOURS
   ============================================================ */
.ico{width:2.4rem;height:2.4rem;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--lg{width:3.4rem;height:3.4rem}
.ico--sm{width:1.7rem;height:1.7rem;stroke-width:2.8}

/* Le schéma : 1 km de course, une station, huit fois.
   Une seule colonne verticale, lisible de haut en bas. */
.flow{list-style:none;margin:2.5rem 0 0;padding:0;max-width:44rem}
.flow__leg{display:flex;align-items:center;gap:1rem;color:var(--cyan);
  padding:.55rem 0;font-weight:700;font-size:.92rem}
.flow__leg .ico{width:1.7rem;height:1.7rem}
.flow__step{display:flex;align-items:center;gap:1.1rem;
  background:var(--paper);border:1px solid var(--line);padding:1rem 1.2rem}
.section--dark .flow__step{background:var(--ink-2);border-color:rgba(244,246,247,.16)}
.flow__n{font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  color:var(--muted);font-size:.85rem;min-width:1.6rem}
.section--dark .flow__n{color:rgba(244,246,247,.5)}
.flow__name{font-weight:700;letter-spacing:.02em}
.flow__mes{color:var(--muted);font-size:.9rem;margin-left:auto;white-space:nowrap}
.section--dark .flow__mes{color:rgba(244,246,247,.62)}
.flow__rail{width:2px;height:1.1rem;background:var(--cyan);margin-left:1.1rem;opacity:.45}
.flow__total{margin-top:1.75rem;font-weight:800;font-size:1.1rem}

/* Bandeau d'icônes, pour résumer le format d'un coup d'œil */
.icostrip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(8,1fr);margin-top:2.25rem}
.icostrip__c{background:var(--paper);padding:1.1rem .5rem;text-align:center;color:var(--body)}
.icostrip__c .ico{margin:0 auto}
.icostrip__c span{display:block;margin-top:.5rem;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.2}
@media (max-width:64rem){.icostrip{grid-template-columns:repeat(4,1fr)}}
@media (max-width:34rem){.icostrip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   CHOIX DE LA CATÉGORIE, EN TÊTE DE L'INSCRIPTION
   ============================================================ */
.catgroup{margin-top:2.25rem}
.catgroup__title{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--body);padding-bottom:.6rem;margin-bottom:1.25rem}
.catgroup__title h3{font-size:1.35rem;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;text-transform:uppercase;margin:0}
.catgroup__price{color:var(--flame);font-weight:700;margin-left:auto}
.catpick{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.catpick button{width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);padding:1rem 1.1rem;cursor:pointer;
  display:flex;align-items:center;gap:.8rem;font-weight:700;
  transition:border-color .12s ease,background .12s ease}
.catpick button:hover{border-color:var(--body)}
.catpick button[aria-pressed="true"]{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.catpick button[aria-pressed="true"] .catpick__tick{opacity:1}
.catpick__tick{margin-left:auto;color:var(--cyan);font-weight:800;opacity:0}
.chosen{background:var(--ink);color:var(--paper);padding:1.35rem 1.5rem;
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline}
.chosen strong{font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;font-size:1.2rem}
.chosen span{color:rgba(244,246,247,.75)}
.chosen .amount{margin-left:auto;color:var(--cyan);font-weight:800;font-size:1.4rem;
  font-variation-settings:'wdth' 110,'wght' 800}

/* ============================================================
   CHIFFRES CLÉS DE LA DERNIÈRE ÉDITION
   ============================================================ */
.keyfacts{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1px;
  background:rgba(244,246,247,.18);border:1px solid rgba(244,246,247,.18);
  grid-template-columns:repeat(3,1fr)}
.keyfacts li{background:var(--ink);padding:1.75rem 1.4rem}
.keyfacts strong{display:block;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;
  font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;color:var(--cyan)}
.keyfacts span{display:block;margin-top:.5rem;color:rgba(244,246,247,.72);font-size:.92rem}
@media (max-width:52rem){.keyfacts{grid-template-columns:1fr}}

/* Menu à sept entrées : libellés insécables et resserrés, sinon
   « Dernière édition » se casse en deux lignes et la barre
   devient bancale. */
.nav a{white-space:nowrap}
@media (min-width:64rem){
  .nav{gap:1.1rem}
  .nav a{font-size:.93rem}
}
@media (min-width:64rem) and (max-width:76rem){
  .nav{gap:.85rem}
  .nav a{font-size:.87rem}
  .masthead .brand__tag{display:none}
}

/* ============================================================
   SCROLL UNIQUE
   L'accueil enchaîne les rubriques ; le Rulebook et le Classement
   gardent leur propre page, parce qu'on les envoie par message et
   qu'on y revient.
   ============================================================ */

/* Le menu collant masque les titres quand on arrive par un lien
   d'ancrage : on réserve la hauteur. */
:root{--navh:6.6rem}
@media (max-width:64rem){:root{--navh:5.4rem}}
[id]{scroll-margin-top:var(--navh)}

/* État actif suivi au scroll */
.nav a[data-spy].is-active{color:#fff;border-bottom-color:var(--cyan)}
/* Le bouton S'inscrire est suivi comme les autres, mais il ne peut
   pas s'allumer en blanc : il s'assombrit. */
.nav a.btn[data-spy].is-active{background:#00a6c9;border-color:#00a6c9;color:#00212c}

/* Les deux liens qui sortent du scroll : marqués comme tels */
.nav a.nav__out::after{content:"↗";margin-left:.3rem;opacity:.65;font-size:.85em}

/* Barre de progression : sur un scroll long, elle dit où on en est */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--cyan);
  width:0;z-index:200;transition:width .1s linear}

/* Repère de rubrique en tête de chaque section du scroll */
.secmark{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.secmark__n{width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cyan);color:#00212c;font-weight:800;font-size:.9rem}
.secmark__t{font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.8rem;color:var(--muted)}
.section--dark .secmark__t{color:rgba(244,246,247,.6)}

/* Retour en haut, une fois qu'on est descendu */
.totop{position:fixed;right:1.1rem;bottom:1.1rem;z-index:150;
  width:2.9rem;height:2.9rem;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);font-size:1.2rem;
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.totop.is-on{opacity:.92;pointer-events:auto}
.totop:hover{opacity:1}

/* Rail de navigation latéral, sur grand écran seulement */
.rail{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);
  z-index:140;display:none;flex-direction:column;gap:.7rem}
@media (min-width:82rem){.rail{display:flex}}
.rail a{width:.65rem;height:.65rem;border-radius:50%;
  background:var(--line);border:0;padding:0;display:block;
  transition:background .15s ease,transform .15s ease}
.rail a.is-active{background:var(--cyan);transform:scale(1.5)}
.rail a span{position:absolute;left:-9999px}

/* ============================================================
   ONE PAGE — sections plein écran, pastilles de progression,
   cartes à glisser.
   ============================================================ */

/* Pastilles en haut, à la manière des stories : cliquables,
   elles disent combien de sections restent. */
/* ---------- Fil de sections ----------
   Précédent, actuel, suivant. Collé sous le menu, il change au
   fil du scroll : on sait où l'on est, d'où l'on vient, et où
   l'on va. Les deux côtés sont cliquables.
   Les libellés se tronquent par points de suspension plutôt que
   de passer à la ligne — sinon la barre change de hauteur à
   chaque section et le contenu saute. */
.trail{background:var(--ink-2);color:var(--paper);
  border-top:1px solid rgba(244,246,247,.12);
  border-bottom:1px solid rgba(244,246,247,.14)}
.trail__in{display:flex;align-items:stretch;min-height:2.3rem;
  max-width:78rem;margin-inline:auto}
.trail__side{display:flex;align-items:center;gap:.4rem;padding:0 .6rem;flex:0 0 auto;
  color:rgba(244,246,247,.55);font-size:.72rem;text-decoration:none;
  max-width:5.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:48rem){.trail__side{font-size:.82rem;padding:0 .9rem;max-width:11rem}}
.trail__side:hover{color:var(--paper);background:rgba(244,246,247,.06)}
.trail__side[hidden]{display:none}
/* Position et nom sur la MÊME ligne : c'est ce qui supprime une
   ligne entière de hauteur, plus que la réduction du corps. */
.trail__now{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:.45rem;padding:.25rem .5rem;border-inline:1px solid rgba(244,246,247,.14)}
.trail__now b{font-weight:800;font-variation-settings:'wdth' 106,'wght' 800;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.trail__now span{font-size:.66rem;color:var(--cyan);font-weight:700;flex:none}
@media (min-width:48rem){.trail__now b{font-size:.86rem}}
@media (max-width:30rem){.trail__side{max-width:6.2rem;font-size:.76rem;padding:0 .6rem}}

/* Une section = un écran court. `svh` plutôt que `vh` : sur
   mobile, la barre d'adresse ne fait plus sauter la hauteur. */
.screen{min-height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2.5rem,6vw,4rem);scroll-snap-align:start}
/* `margin-inline:auto` sur .wrap annule l'étirement en tant
   qu'enfant flex : sans cette ligne, .wrap reprend sa largeur
   maximale et fait déborder la page sur mobile. */
.screen > .wrap{width:100%}
.screen--auto{min-height:0}

/* Règle de contenu : 1 titre, 1 chiffre, 1 visuel, 1 bouton. */
.screen .lede{max-width:34ch}
.bignum{font-size:clamp(3rem,10vw,6.5rem);line-height:.9;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;color:var(--cyan);
  letter-spacing:-.02em}
.bignum small{display:block;font-size:.95rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:.6rem;
  font-variation-settings:'wdth' 100,'wght' 600}
.section--dark .bignum small{color:rgba(244,246,247,.66)}

/* Phrase d'accroche : les chiffres en cyan, sur trois lignes */
.claim{font-size:clamp(1.5rem,1rem + 2.6vw,2.6rem);font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;line-height:1.15;margin:0 0 1.25rem}
.claim em{font-style:normal;color:var(--cyan)}

/* Le carrousel de cartes, la carte de station et la carte de
   catégorie ont été retirés avec le passage du Rulebook en
   liste (voir « LE RULEBOOK EN LISTE » plus bas). */

/* Bandeau d'icônes resserré pour tenir dans un écran */
.screen .icostrip{margin-top:1.5rem}
.screen .icostrip__c{padding:.85rem .4rem}
.screen .icostrip__c span{font-size:.62rem}


/* ============================================================
   SÉLECTEUR DE CATÉGORIE EN 3 ÉTAPES
   Format → sexe → niveau. Une seule catégorie possible au bout.
   Les charges sont affichées sous chaque niveau : « Open » et
   « Pro » ne disent rien à quelqu'un qui débute, « 152 kg » si.
   ============================================================ */
.wiz{max-width:36rem;margin-top:1.75rem}
.wiz__step{margin-bottom:1.4rem}
.wiz__step[hidden]{display:none}
.wiz__q{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.65rem}
.wiz__num{width:1.55rem;height:1.55rem;border-radius:50%;background:var(--cyan);
  color:#00212c;font-weight:800;font-size:.78rem;display:flex;
  align-items:center;justify-content:center;flex:none}
.wiz__q h3{margin:0;font-size:1rem}
.wiz__opts{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}
.wiz__opts--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:26rem){.wiz__opts--3{grid-template-columns:repeat(2,1fr)}}
.wiz__opt{border:2px solid var(--line);background:transparent;color:inherit;
  padding:.8rem .5rem;font-weight:700;cursor:pointer;text-align:center;font-size:.93rem}
.section--dark .wiz__opt,.section--mid .wiz__opt{border-color:rgba(22,36,42,.2)}
.section--dark .wiz__opt{border-color:rgba(244,246,247,.26)}
.wiz__opt[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#00212c}
.wiz__opt small{display:block;font-weight:600;font-size:.7rem;opacity:.72;
  margin-top:.2rem;line-height:1.3}
.wiz__res{background:var(--ink);color:var(--paper);border-left:4px solid var(--cyan);
  padding:1.15rem 1.3rem;margin-top:1.3rem}
.wiz__res[hidden]{display:none}
.wiz__res .k{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);font-weight:700}
.wiz__res strong{display:block;font-size:1.25rem;font-weight:800;
  font-variation-settings:'wdth' 110,'wght' 800;margin-top:.2rem}
.wiz__res .p{color:var(--cyan);font-weight:800;font-size:1.4rem;margin-top:.25rem}
.wiz__res .p em{font-style:normal;font-size:.82rem;font-weight:600;
  color:rgba(244,246,247,.66)}
.wiz__res .btn{margin-top:1rem}
.wiz__toggle{margin-top:1.1rem;background:none;border:0;padding:0;cursor:pointer;
  color:var(--cyan-deep);font-weight:700;border-bottom:2px solid currentColor;font-size:.92rem}
.section--dark .wiz__toggle{color:var(--cyan)}

/* ---------- Tableau des 9, dépliable ---------- */
.allcat{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.3rem}
.section--dark .allcat{border-top-color:rgba(244,246,247,.2)}
.allcat[hidden]{display:none}
.allcat__tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;margin-bottom:.9rem}
.allcat__tab{border:1px solid var(--line);background:transparent;color:inherit;
  padding:.6rem .4rem;font-weight:700;cursor:pointer;font-size:.88rem}
.section--dark .allcat__tab{border-color:rgba(244,246,247,.26)}
.allcat__tab small{display:block;font-weight:600;font-size:.7rem;opacity:.72}
.allcat__tab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.section--dark .allcat__tab[aria-pressed="true"]{background:var(--paper);color:var(--ink);
  border-color:var(--paper)}
.allcat__grid{display:grid;grid-template-columns:4.8rem 1fr 1fr;gap:1px;
  background:var(--line)}
.section--dark .allcat__grid{background:rgba(244,246,247,.2)}
.allcat__h{background:var(--ink);color:rgba(244,246,247,.68);padding:.5rem .4rem;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  text-align:center}
.allcat__r{background:var(--paper-2);padding:.6rem .5rem;font-weight:700;
  font-size:.84rem;display:flex;align-items:center}
.section--dark .allcat__r{background:var(--ink-2)}
.allcat__c{background:var(--paper);padding:0}
.section--dark .allcat__c{background:var(--ink-2)}
.allcat__c button{width:100%;height:100%;border:0;background:transparent;color:inherit;
  font:inherit;cursor:pointer;padding:.6rem .3rem;font-weight:700;font-size:.82rem}
.allcat__c button small{display:block;font-weight:600;font-size:.68rem;
  color:var(--muted);margin-top:.15rem}
.section--dark .allcat__c button small{color:rgba(244,246,247,.6)}
.allcat__c[aria-pressed="true"]{background:var(--cyan)}
.allcat__c[aria-pressed="true"] button,
.allcat__c[aria-pressed="true"] button small{color:#00212c}
.allcat__c--off{background:var(--paper-2);color:var(--muted);font-size:.74rem;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:.6rem .3rem}
.section--dark .allcat__c--off{background:rgba(244,246,247,.05);color:rgba(244,246,247,.35)}
.allcat__note{font-size:.76rem;color:var(--muted);margin:.75rem 0 0}
.section--dark .allcat__note{color:rgba(244,246,247,.55)}

/* ============================================================
   HÉROS SCINDÉ (C2)
   Toutes les photos sont verticales. Une colonne pleine hauteur
   est le seul traitement qui n'en coupe rien.
   ============================================================ */
.heroSplit{background:var(--ink);color:var(--paper);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:calc(100svh - var(--navh))}
.heroSplit__txt{padding:clamp(1.6rem,4vw,3.5rem);display:flex;flex-direction:column;
  justify-content:center}
/* La colonne de droite accueille l'image d'affiche puis la vidéo.
   Fond au bleu du site et non noir, et débord de 1 px : un arrondi
   de sous-pixel laissait sinon apparaître un liseré en haut. */
.heroSplit__img{position:relative;overflow:hidden;min-height:18rem;background:var(--ink)}
.heroSplit__img img,
.heroSplit__img video{
  position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  object-fit:cover;object-position:50% 45%;display:block
}
/* L'image d'affiche zoome doucement : sur mauvaise connexion, le
   bandeau bouge quand même, sans un octet de plus. */
@keyframes heroZoom{0%{transform:scale(1)}100%{transform:scale(1.1)}}
.heroSplit__still{animation:heroZoom 16s ease-in-out infinite alternate;will-change:transform}
@media (prefers-reduced-motion:reduce){.heroSplit__still{animation:none}}
/* un voile très léger côté texte, pour la jonction */
.heroSplit__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,22,29,.55),transparent 22%)}
@media (max-width:60rem){
  /* Sur téléphone le TEXTE passe en premier : la photo au-dessus
     repoussait le titre et le bouton sous la ligne de flottaison.
     Hauteur bornée pour que la galerie suivante reste amorcée. */
  .heroSplit{grid-template-columns:1fr;min-height:0}
  .heroSplit__txt{padding-block:1.6rem 1.4rem}
  .heroSplit__img{min-height:0;height:15rem;order:0}
  .heroSplit__img img,.heroSplit__img video{object-position:50% 38%}
  .heroSplit__img::after{background:linear-gradient(180deg,rgba(4,22,29,.45),transparent 40%)}
}

/* ============================================================
   PRIX MIS EN AVANT (B) — la section Tarifs a été supprimée
   ============================================================ */
.wiz__opts--price{grid-template-columns:repeat(2,1fr)}
.pfmt{border:2px solid var(--line);background:transparent;color:inherit;
  padding:.95rem .6rem;cursor:pointer;text-align:center;display:block;width:100%}
.section--dark .pfmt,.section--mid .pfmt{border-color:rgba(244,246,247,.24)}
.section--mid .pfmt{border-color:rgba(22,36,42,.18)}
.pfmt[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#00212c}
.pfmt__who{display:block;font-weight:700;font-size:.9rem;opacity:.82}
.pfmt__price{display:block;font-size:1.65rem;line-height:1;font-weight:800;
  font-variation-settings:'wdth' 110,'wght' 800;margin:.35rem 0 .12rem;white-space:nowrap}
.pfmt__unit{display:block;font-size:.68rem;font-weight:600;opacity:.75;line-height:1.3}

.wiz__res .p{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  border-top:1px solid rgba(244,246,247,.18);padding-top:.7rem;margin-top:.6rem}
.wiz__res .p b{font-size:2.1rem;line-height:1;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;color:var(--cyan);white-space:nowrap}
.wiz__res .p em{font-style:normal;font-size:.78rem;font-weight:600;
  color:rgba(244,246,247,.68);line-height:1.4}

/* ============================================================
   GALERIE EN FORMAT D'ORIGINE (C3)
   3/4, le ratio des photos : aucun recadrage vertical.
   ============================================================ */
.strip{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin-top:1.75rem}
.strip__c{aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)}
.strip__c img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
@media (max-width:40rem){.strip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   BOUTON PAUSE DU BANDEAU
   Discret au repos, net au survol et au clavier. Toujours
   present : une video qui demarre seule doit pouvoir etre
   arretee.
   ============================================================ */
.heroSplit__toggle{
  /* En HAUT a droite : le bas de la colonne video tombe sous la
     ligne de flottaison sur un ecran court, et un bouton qu'on ne
     voit pas ne sert a rien. */
  position:absolute;right:.7rem;top:.7rem;z-index:3;
  width:2.2rem;height:2.2rem;padding:0;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(4,22,29,.5);color:#fff;
  opacity:.55;transition:opacity .15s ease,background .15s ease
}
.heroSplit__toggle:hover,
.heroSplit__toggle:focus-visible{opacity:1;background:rgba(4,22,29,.8)}
.heroSplit__toggle svg{width:1.05rem;height:1.05rem;fill:currentColor}
@media (max-width:52rem){
  .heroSplit__toggle{width:2rem;height:2rem;right:.5rem;top:.5rem;opacity:.7}
}

/* ============================================================
   TÉLÉPHONE — le chantier de l'audit mobile
   Tout est regroupé ici, en fin de feuille, pour que la version
   petit écran se lise et se révise d'un seul tenant. Les lettres
   renvoient aux défauts de AUDIT-MOBILE.md.
   Mesuré à 320 px (iPhone SE) et 360 px.
   ============================================================ */

/* ---------- A · récupérer la hauteur perdue en haut ----------
   La barre du haut se cassait en deux lignes sous 360 px, pour
   une information déjà présente dans le héros et le pied de
   page. Il n'en reste que le téléphone — qui gagne au passage
   une vraie cible tactile (défaut E). */
@media (max-width:48rem){
  .topbar__tag,.topbar__orgtxt{display:none}
  .topbar__inner{justify-content:center;gap:0;min-height:0}
  .topbar__org{display:flex;justify-content:center}
  .topbar__tel{display:flex;align-items:center;justify-content:center;
    min-height:2.75rem;padding-inline:1.25rem;font-size:.95rem;letter-spacing:.04em}
}
@media (max-width:64rem){
  /* Le menu passait lui aussi sur deux lignes à 320 px : la
     marque et le bouton Sections ne tenaient pas côte à côte.
     `nowrap` interdit désormais la seconde ligne quoi qu'il
     arrive — au pire la marque se tronque, et elle ne se
     tronque à aucune largeur connue. */
  .masthead__inner{flex-wrap:nowrap}
  .brand{display:flex;flex-direction:column;justify-content:center;
    min-height:2.5rem;min-width:0;overflow:hidden}
  .brand__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .secbtn{min-height:2.5rem;display:flex;align-items:center;padding:.3rem .7rem;flex:none}
}
/* Sous 368 px, la marque et le bouton se resserrent : c'est la
   largeur où ils commençaient à se marcher dessus. */
@media (max-width:23rem){
  .brand__name{font-size:.72rem}
  .secbtn{font-size:.68rem;padding:.3rem .5rem}
}

/* ---------- B · le bouton « retour en haut » ----------
   Il flottait au-dessus du contenu et recouvrait, selon
   l'endroit, un pictogramme, une photo ou une carte de station.
   Sur téléphone, l'en-tête reste visible en permanence et la
   marque y renvoie déjà vers le haut de page : le bouton ne
   servait qu'à masquer. Une ligne à retirer pour le rétablir. */
@media (max-width:48rem){
  .totop{display:none}
}

/* ---------- E · cibles tactiles ----------
   14 éléments sous 40 px de haut. On ajoute du rembourrage
   vertical plutôt que de grossir le texte : la mise en page ne
   bouge pas, la surface touchable double. */
@media (max-width:64rem){
  .foot a,.foot__legal a{display:inline-block;padding-block:.5rem}
  .textlink{display:inline-block;padding-block:.65rem}
  .credit-line .textlink{padding-block:.55rem}
  .wiz__toggle{padding-block:.6rem}
  .chip{padding:.6rem 1rem}
  .trail__side{min-height:2.75rem}
  .heroSplit__toggle{width:2.75rem;height:2.75rem;right:.6rem;top:.6rem;opacity:.8}
}

/* ---------- C · les charges sur une seule ligne ----------
   « OPEN HOMMES / MIXTES » passait sur deux lignes et décrochait
   la charge de son étiquette. Les libellés courts (`court`,
   data/course.js) servent maintenant aux pastilles de barème du
   Rulebook et à la colonne Catégorie du classement. */

/* ---------- D · le classement, en cartes ----------
   Six colonnes dans 280 px : il fallait défiler à l'horizontale
   pour voir les points, c'est-à-dire la seule colonne que tout
   le monde cherche. Une ligne par athlète, sur deux niveaux :
   rang, nom et points en évidence ; catégorie, éditions et
   meilleur temps en dessous, en petit.
   Le tableau reste un tableau dans le code — seul l'affichage
   change, et l'en-tête masqué reste lu par les lecteurs
   d'écran grâce aux étiquettes reprises ci-dessous. */
@media (max-width:46rem){
  table.board--season,
  table.board--season tbody,
  table.board--season tr,
  table.board--season td{display:block}
  table.board--season thead{position:absolute;left:-9999px}
  table.board--season tr{
    display:grid;
    grid-template-columns:2rem minmax(0,1fr) auto auto;
    grid-template-areas:
      "rang nom  nom   pts"
      "rang cat  ed    temps";
    column-gap:.5rem;row-gap:.15rem;
    padding:.8rem 0;border-bottom:1px solid var(--line)}
  .section--dark table.board--season tr{border-bottom-color:rgba(244,246,247,.14)}
  table.board--season td{padding:0;border:0;white-space:normal;width:auto}

  table.board--season td:nth-child(1){grid-area:rang;align-self:start;
    font-size:1rem;font-weight:800;line-height:1.5}
  table.board--season td:nth-child(2){grid-area:nom;font-size:1.02rem;
    font-weight:700;line-height:1.25}
  table.board--season td:nth-child(6){grid-area:pts;text-align:right;
    font-size:1.3rem;line-height:1.15;font-weight:800;
    font-variation-settings:'wdth' 110,'wght' 800}
  table.board--season td:nth-child(6)::after{content:" pts";font-size:.55em;
    font-weight:700;color:var(--muted)}
  .section--dark table.board--season td:nth-child(6)::after{color:rgba(244,246,247,.6)}

  table.board--season td:nth-child(3){grid-area:cat;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  /* « Individuel Open Hommes » ne tient pas dans 120 px : le
     libellé abrégé (`court`, data/course.js) prend le relais. */
  table.board--season .catcell__long{display:none}
  table.board--season .catcell__short{display:inline}
  table.board--season td:nth-child(4){grid-area:ed}
  table.board--season td:nth-child(4)::after{content:" éd."}
  table.board--season td:nth-child(5){grid-area:temps;text-align:right}
  table.board--season td:nth-child(3),
  table.board--season td:nth-child(4),
  table.board--season td:nth-child(5){font-size:.78rem;color:var(--muted);line-height:1.4}
  .section--dark table.board--season td:nth-child(3),
  .section--dark table.board--season td:nth-child(4),
  .section--dark table.board--season td:nth-child(5){color:rgba(244,246,247,.62)}

  /* Le premier de chaque sélection garde son rouge. */
  table.board--season tr[data-rank="1"] td:nth-child(1),
  table.board--season tr[data-rank="1"] td:nth-child(6){color:var(--flame)}
}

/* ---------- F · un peu de longueur en moins ----------
   La galerie montre 4 photos sur téléphone au lieu de 6 : deux
   rangées suffisent à donner l'ambiance. */
@media (max-width:40rem){
  .strip__c:nth-child(n+5){display:none}
}

/* ---------- Les filtres du classement, en rail ----------
   Neuf catégories aux libellés longs : empilées, elles
   occupaient 400 px avant le premier athlète. Elles glissent
   maintenant à l'horizontale, comme les cartes de station. */
@media (max-width:46rem){
  .chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:.35rem;margin-top:1.2rem}
  .chiprow::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap}
}

/* Le libellé abrégé du classement n'existe que sur téléphone ;
   la règle inverse vit dans le bloc « D » ci-dessus. */
.catcell__short{display:none}

/* ============================================================
   BOUTON « LIRE LA VIDÉO »
   Apparaît sur l'image d'affiche quand la lecture automatique
   n'a pas démarré — iOS la refuse en mode économie d'énergie,
   en mode données réduites, et quand « Aperçus vidéo en lecture
   automatique » est désactivé. Le geste, lui, passe toujours.
   ============================================================ */
.heroSplit__start{
  position:absolute;inset:0;z-index:3;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,22,29,.25);border:0;padding:0;cursor:pointer;color:#fff
}
.heroSplit__start:hover{background:rgba(4,22,29,.38)}
.heroSplit__start__in{
  display:flex;align-items:center;gap:.55rem;
  background:rgba(4,22,29,.78);padding:.8rem 1.15rem;
  font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:.92rem;letter-spacing:.02em
}
.heroSplit__start svg{width:1.05rem;height:1.05rem;fill:currentColor;flex:none}

/* ============================================================
   LE RULEBOOK EN LISTE
   Remplace le carrousel de 8 cartes. Une ligne par station,
   dans l'ordre de la course ; la charge affichée est celle du
   barème choisi — un coureur n'a qu'une catégorie. La règle et
   les trois autres charges se déplient à la demande.
   ============================================================ */
.rbk{margin-top:1.5rem;max-width:48rem}

/* Choix du barème. Réglé automatiquement par le sélecteur
   d'inscription ; modifiable ici. */
.rbk__pick{margin-bottom:1.1rem}
.rbk__picklab{display:block;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.5rem}
.rbk__pick .chiprow{display:grid;grid-template-columns:repeat(2,1fr);
  gap:.4rem;margin-top:0;overflow:visible;flex-wrap:wrap}
@media (min-width:30rem){
  .rbk__pick .chiprow{grid-template-columns:repeat(4,1fr)}
}
.rbk__pick .chip{padding:.6rem .4rem;text-align:center;font-size:.85rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rbk__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.section--dark .rbk__list{border-top-color:rgba(244,246,247,.18)}
.rbk__row{border-bottom:1px solid var(--line)}
.section--dark .rbk__row{border-bottom-color:rgba(244,246,247,.18)}
.rbk__row summary{display:flex;align-items:center;gap:.7rem;cursor:pointer;
  list-style:none;padding:.85rem .2rem;min-height:3.25rem}
.rbk__row summary::-webkit-details-marker{display:none}
.rbk__row summary:hover{background:rgba(0,199,241,.06)}
.rbk__n{font-weight:800;font-variation-settings:'wdth' 108,'wght' 800;
  font-size:.78rem;color:var(--cyan-deep);flex:none;width:1.5rem}
.section--dark .rbk__n{color:var(--cyan)}
.rbk__row .ico{width:1.6rem;height:1.6rem;flex:none}
.rbk__name{font-weight:700;font-size:1rem;line-height:1.2;min-width:0}
.rbk__load{margin-left:auto;font-weight:800;
  font-variation-settings:'wdth' 108,'wght' 800;
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1rem}
.rbk__more{flex:none;color:var(--muted);font-size:1.15rem;width:1rem;
  text-align:center;line-height:1}
.section--dark .rbk__more{color:rgba(244,246,247,.6)}
.rbk__row[open] .rbk__more{transform:rotate(45deg)}
.rbk__body{padding:0 .2rem 1.15rem 3.9rem}
.rbk__mes{color:var(--flame);font-weight:700;font-size:.85rem;margin:0 0 .35rem}
.rbk__regle{color:var(--muted);font-size:.9rem;margin:0 0 .7rem}
.section--dark .rbk__regle{color:rgba(244,246,247,.72)}
.rbk__all{list-style:none;margin:0;padding:.6rem 0 0;display:grid;gap:.25rem;
  border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.section--dark .rbk__all{border-top-color:rgba(244,246,247,.18);
  color:rgba(244,246,247,.62)}
.rbk__all li{display:flex;gap:.6rem}
.rbk__all b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--body)}
.section--dark .rbk__all b{color:var(--paper)}
/* La ligne du barème choisi ressort : c'est la sienne. */
.rbk__all li.is-mine{color:var(--body);font-weight:700}
.section--dark .rbk__all li.is-mine{color:var(--paper)}
.rbk__foot{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-top:1.1rem;font-weight:800;font-variation-settings:'wdth' 110,'wght' 800}
.rbk__foot span{font-weight:400;color:var(--muted);font-size:.9rem}
.section--dark .rbk__foot span{color:rgba(244,246,247,.66)}

@media (min-width:52rem){
  .rbk__row summary{padding:1rem .3rem;min-height:3.75rem;gap:1rem}
  .rbk__name{font-size:1.1rem}
  .rbk__load{font-size:1.1rem}
  .rbk__body{padding-left:4.6rem}
}

/* ============================================================
   HÉROS PLEIN ÉCRAN SUR TÉLÉPHONE
   La vidéo est verticale : elle est faite pour un écran de
   téléphone, pas pour une bande sous le texte. Elle passe donc
   en fond, titre et bouton par-dessus — un seul écran, et la
   vidéo se voit dès l'arrivée. Le bureau garde la mise en page
   scindée, qui y fonctionne.
   ============================================================ */

/* Hauteur réellement collante sur téléphone : menu (56 px) +
   fil (46 px). La valeur était 5,4 rem, d'où des ancres qui
   tombaient sous l'en-tête. */
@media (max-width:64rem){
  :root{--navh:6.4rem}
}

@media (max-width:60rem){
  /* Au chargement la barre du haut est encore visible : le
     héros lui laisse sa place pour tenir dans un écran pile. */
  .heroSplit{position:relative;display:block;
    min-height:calc(100svh - 9.2rem);overflow:hidden}
  .heroSplit__img{position:absolute;inset:0;height:auto;min-height:0;z-index:0}
  .heroSplit__img img,.heroSplit__img video{object-position:50% 30%}
  /* Voile : il faut qu'un titre blanc reste lisible sur une
     image claire — le toit en tôle du gymnase est le pire cas. */
  .heroSplit__img::after{
    background:linear-gradient(180deg,
      rgba(4,22,29,.62) 0%, rgba(4,22,29,.52) 26%,
      rgba(4,22,29,.78) 55%, rgba(4,22,29,.96) 85%, rgba(4,22,29,.99) 100%)}
  .heroSplit__txt{position:relative;z-index:1;
    min-height:calc(100svh - 9.2rem);
    justify-content:flex-end;padding:1.25rem 1.25rem 1.5rem}

  /* Tout doit tenir dans un écran : on resserre. */
  .heroSplit__txt .eyebrow{margin-bottom:.45rem;font-size:.74rem}
  .heroSplit__txt .hero__date{font-size:clamp(2rem,9vw,2.8rem)}
  .heroSplit__txt .claim{font-size:1.45rem;line-height:1.2;margin-bottom:1rem}
  .heroSplit__txt .hero__actions{margin-top:1.1rem}
  /* La preuve tient sur une ligne : le 240 a sa pleine taille
     dans la rubrique Dernière édition, pas ici. */
  .heroSplit__txt .proof{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;
    margin-top:1.1rem;padding-top:.8rem;grid-template-columns:none}
  .heroSplit__txt .proof li{display:flex;align-items:baseline;gap:.4rem}
  .heroSplit__txt .proof strong{display:inline;font-size:1.05rem}
  .heroSplit__txt .proof span{display:inline;font-size:.78rem;margin-top:0}
  .heroSplit__toggle{z-index:4;top:auto;bottom:.7rem;right:.7rem}
  .heroSplit__start{z-index:5}
}
/* Sous 360 px, même resserré, le bandeau de preuve déborde :
   on le laisse à la rubrique Dernière édition. */
@media (max-width:22.5rem){
  .heroSplit__txt .proof{display:none}
}

/* Places restantes — sous le résultat du sélecteur. Le chiffre
   vient de la base : il baisse à mesure que les gens s'inscrivent. */
.restantes{margin:.9rem 0 0;font-size:.92rem;color:rgba(244,246,247,.75)}
.restantes b{color:var(--paper);font-weight:800;
  font-variation-settings:'wdth' 110,'wght' 800;font-size:1.15rem;
  font-variant-numeric:tabular-nums}
.restantes.is-peu b{color:var(--flame)}
.restantes.is-complet b{color:var(--flame);text-transform:uppercase;letter-spacing:.06em}

/* Deux champs sur une ligne : prénom / nom, et le coéquipier.
   Ils ne se séparent que sous 352 px, où la ligne devient
   vraiment trop étroite pour deux étiquettes. */
.duo{display:grid;gap:0 .9rem;grid-template-columns:1fr 1fr}
@media (max-width:22rem){.duo{grid-template-columns:1fr}}

/* ============================================================
   PLACES RESTANTES — en tête de la rubrique S'inscrire
   Le chiffre vient de la base. Il baisse à chaque inscription,
   et passe au rouge sous 20.
   ============================================================ */
.jauge{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;
  align-items:baseline;margin:1.25rem 0 0;padding:1rem 1.15rem;
  background:var(--ink);color:var(--paper);max-width:32rem}
.jauge__n{font-size:2.1rem;line-height:1;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;color:var(--cyan);
  font-variant-numeric:tabular-nums}
.jauge__t{font-size:.95rem;color:rgba(244,246,247,.8)}
.jauge__bar{grid-column:1 / -1;height:5px;margin-top:.7rem;
  background:rgba(244,246,247,.18);overflow:hidden}
.jauge__fill{height:100%;background:var(--cyan)}
.jauge.is-peu .jauge__n{color:var(--flame)}
.jauge.is-peu .jauge__fill{background:var(--flame)}
.jauge.is-complet{border-left:4px solid var(--flame)}
.jauge.is-complet .jauge__n{font-size:1.5rem;color:var(--flame);
  text-transform:uppercase;letter-spacing:.06em}

/* ============================================================
   BARRE DU FORMULAIRE
   Collée sous le menu, elle rappelle la catégorie choisie et
   offre la sortie. Sans elle, ouvrir le formulaire était un
   aller simple : plus moyen de revenir au reste de la page.
   ============================================================ */
.formhead{position:sticky;top:var(--navh);z-index:120;
  display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);
  /* pleine largeur : elle sort du `.wrap` pour masquer
     complètement ce qui défile dessous */
  margin:0 calc(-1 * var(--gutter)) 1.75rem;
  padding:.65rem var(--gutter)}
.formhead__cat{font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:.95rem;letter-spacing:.01em}
.formhead__close{margin-left:auto;background:none;
  border:1px solid rgba(244,246,247,.35);color:var(--paper);
  padding:.45rem .85rem;min-height:2.5rem;display:flex;align-items:center;
  gap:.35rem;font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.formhead__close:hover{border-color:var(--paper);background:rgba(244,246,247,.08)}
.formhead__x{font-size:1.15rem;line-height:1}
@media (max-width:26rem){
  .formhead__cat{font-size:.88rem;width:100%}
  .formhead__close{margin-left:0}
}

/* ============================================================
   CHOIX DE LA CATÉGORIE — la liste par jour (février 2027)
   Samedi et dimanche côte à côte sur ordinateur, l'un sous
   l'autre sur téléphone. Une ligne = une catégorie, un appui.
   ============================================================ */
.days{display:grid;gap:2rem;margin-top:1.75rem}
@media (min-width:900px){.days{grid-template-columns:1fr 1fr;align-items:start}}
.day__t{margin:0 0 .75rem;font-size:.82rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyan-deep)}
.day__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.dcat{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:.9rem;text-align:left;background:var(--paper);color:inherit;
  border:2px solid var(--line);padding:.85rem 1rem;cursor:pointer;font:inherit;min-height:64px}
.dcat:hover{border-color:var(--body)}
.dcat__name strong{display:block;font-weight:800;font-size:1.02rem;line-height:1.2}
.dcat__name small{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem}
.dcat__places{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap}
.dcat__places.is-peu{color:var(--flame)}
.dcat__price{text-align:right;white-space:nowrap}
.dcat__price b{display:block;font-weight:800;font-size:1.05rem;line-height:1.1}
.dcat__price small{display:block;font-size:.68rem;color:var(--muted)}
.dcat.is-complet{opacity:.5;cursor:not-allowed}
.dcat.is-complet:hover{border-color:var(--line)}
.dcat.is-complet .dcat__places{color:var(--body)}
.days__note{grid-column:1/-1;margin:0;color:var(--muted);font-size:.85rem}
@media (max-width:420px){
  .dcat{grid-template-columns:1fr auto;gap:.25rem .75rem}
  .dcat__places{grid-column:1;grid-row:2}
  .dcat__price{grid-row:1/3;grid-column:2}
}
.rbk__video{display:block;width:100%;max-width:40rem;aspect-ratio:16/9;background:#000;margin:.75rem 0 1rem}

/* Rulebook : les vidéos se voient (bandeau + vignettes ▶) */
.rbk__ban{display:flex;gap:.75rem;align-items:flex-start;background:var(--ink);color:var(--paper);
  padding:.8rem 1rem;margin:0 0 1rem;font-size:.92rem;line-height:1.45}
.rbk__ban b{color:var(--cyan)}
.rbk__banplay{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--cyan);color:#00212c;
  display:grid;place-items:center;font-size:.7rem;padding-left:.12rem;margin-top:.05rem}
.rbk__thumb{position:relative;flex:none;width:64px;height:40px;overflow:hidden;background:#000}
.rbk__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.rbk__thumb i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:rgba(0,199,241,.95)}
.rbk__thumb i:after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #00212c;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
/* 5 barèmes depuis le Halfrox : la 5e puce prend toute la ligne sur
   téléphone, et 5 colonnes sur grand écran. */
.rbk__pick .chip:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:48rem){
  .rbk__pick .chiprow{grid-template-columns:repeat(5,1fr)}
  .rbk__pick .chip:last-child:nth-child(odd){grid-column:auto}
}
@media (min-width:30rem) and (max-width:47.99rem){
  .rbk__pick .chiprow{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   MON INSCRIPTION et ADMIN — connexion, cartes, pastilles
   ============================================================ */
.page-compte{background:var(--paper)}
.page-compte .masthead{position:static}
.compte__qui{font-size:.85rem;color:rgba(244,246,247,.75);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.compte__qui .textlink{color:var(--cyan);background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer}
.compte__wrap{max-width:34rem}
.compte .heading{font-size:clamp(1.6rem,1.2rem + 2vw,2.3rem)}
.compte__ins + .compte__ins{margin-top:3rem;padding-top:2rem;border-top:2px solid var(--line)}
.login__form{margin-top:1.5rem}
.login__code{letter-spacing:.3em;font-size:1.3rem!important;font-weight:800}
.login__msg{font-size:.92rem;color:var(--muted);margin:.25rem 0 1rem}
.login__msg.is-err{color:#b23a0e;font-weight:700}
.login__autre{display:block;margin-top:1rem;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700}
.ccard{background:#fff;border:2px solid var(--line);padding:1rem 1.1rem;margin-top:.9rem}
.ccard--pret{border-color:#7fd1a0;background:#f3fcf6}
.ccard__row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.ccard__k{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ccard__big{font-size:1.3rem;font-weight:800;margin-top:.15rem}
.ccard__note{font-size:.9rem;color:var(--muted);margin:.6rem 0 0;line-height:1.5}
.ccard__ref{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.ccard__who{list-style:none;margin:.5rem 0 .8rem;padding:0}
.ccard__who li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem 0;border-top:1px solid var(--line)}
.ccard .btn{margin-top:.2rem}
.pill{display:inline-block;font-size:.78rem;font-weight:800;padding:.25rem .55rem;white-space:nowrap;line-height:1.3}
.p-wait{background:#fff1d6;color:#8a5300}
.p-ok{background:#d9f5e3;color:#0d6b33}
.p-todo{background:#ffe1d6;color:#b23a0e}
.p-late{background:#c2410c;color:#fff}
.p-grey{background:var(--paper-2);color:var(--muted)}

/* ---------- admin ---------- */
.page-admin .brand__name em{color:var(--cyan);font-style:normal}
.page-admin .wrap{max-width:72rem}
.ad-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.1rem}
@media (min-width:48rem){.ad-tiles{grid-template-columns:repeat(4,1fr)}}
.ad-tile{background:#fff;border:2px solid var(--line);padding:.8rem 1rem;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ad-tile:hover{border-color:var(--body)}
.ad-tile b{display:block;font-size:1.7rem;font-weight:800;line-height:1.1}
.ad-tile b small{font-size:.9rem;color:var(--muted);font-weight:700}
.ad-tile span{font-size:.8rem;color:var(--muted);font-weight:600}
.ad-tile.is-warn b{color:#c2410c}
.ad-tile.is-todo b{color:#8a5300}
.ad-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem;align-items:center}
.ad-chip{border:2px solid var(--line);background:#fff;padding:.4rem .75rem;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;color:inherit}
.ad-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ad-search{flex:1 1 16rem;min-width:12rem;border:2px solid var(--line);padding:.45rem .7rem;font:inherit;font-size:.9rem;background:#fff}
.ad-list{background:#fff;border:1px solid var(--line)}
.ad-row{display:grid;grid-template-columns:1.6fr 1.3fr .7fr 1.2fr 1.4fr;gap:.6rem;align-items:center;
  width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);padding:.7rem .8rem;
  font:inherit;font-size:.92rem;color:inherit;cursor:pointer}
.ad-row:hover{background:#f3fbfe}
.ad-row.is-open{background:#e8f8fd}
.ad-row small{display:block;color:var(--muted);font-size:.78rem}
.ad-row--head{cursor:default;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:2px solid var(--line)}
.ad-row--head:hover{background:#fff}
.ad-certs{display:flex;flex-wrap:wrap;gap:.3rem}
.ad-vide{padding:1rem}
.ad-foot{font-size:.8rem;color:var(--muted);margin-top:.5rem}
.ad-fiche{display:grid;gap:1.2rem;padding:1rem 1rem 1.1rem;border:2px solid var(--ink);border-top:0;background:#fff}
@media (min-width:48rem){.ad-fiche{grid-template-columns:1.2fr 1fr 1.3fr}}
.ad-fiche h4{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ad-fiche p{margin:0 0 .6rem;font-size:.9rem;line-height:1.45}
.ad-mute{color:var(--muted);font-size:.8rem!important}
.ad-warn{color:#b23a0e;font-weight:700}
.ad-btn{display:inline-block;border:2px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-weight:800;
  font-size:.82rem;padding:.4rem .7rem;margin:.25rem .3rem 0 0;cursor:pointer;text-decoration:none}
.ad-btn.is-go{background:var(--cyan);border-color:var(--cyan);color:#00212c}
.ad-btn:disabled{opacity:.5;cursor:wait}
.ad-cert{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.35rem 0;border-top:1px solid var(--line)}
.ad-cert__nom{font-weight:700;font-size:.9rem;margin-right:.2rem}
.ad-fiche__bas{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.6rem}
.ad-lien{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:#b23a0e;text-decoration:underline;cursor:pointer}
@media (max-width:47.99rem){
  .ad-row{grid-template-columns:1fr auto;gap:.3rem .6rem}
  .ad-row--head{display:none}
  .ad-row > span:nth-child(2){grid-column:1}
  .ad-row > span:nth-child(3){display:none}
  .ad-row > span:nth-child(4){grid-column:2;grid-row:1;justify-self:end}
  .ad-row > span:nth-child(5){grid-column:2;grid-row:2;justify-self:end}
}
.merci{max-width:34rem}
.merci .heading{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem);margin-bottom:.2em}
.secpanel__compte{display:block;text-align:center;padding:.8rem;color:var(--cyan);font-weight:700;text-decoration:none}
@media (max-width:30rem){
  .page-compte .masthead__inner{gap:.5rem}
  .page-compte .brand__name{font-size:.95rem}
  .page-compte .brand__tag{display:none}
  .compte__qui{font-size:.78rem;justify-content:flex-end;text-align:right;max-width:45%}
}
/* Section Format : les dessins de l'option B */
.icostrip__c .illus{display:block;width:84px;height:84px;margin:0 auto;color:var(--ink)}
.icostrip__c .illus svg{width:100%;height:100%;display:block}
@media (max-width:34rem){.icostrip__c .illus{width:76px;height:76px}}