/* ============================================================
   WE SPORT TAMANU — la mise en forme
   Même identité que le Challenge Wesport.
   Ordinateur (≥ 960 px) : version A — le planning à côté du titre.
   Téléphone (< 960 px)  : version 2c — les jours en colonne.
   ============================================================ */

:root{
  --ink:#04161d;
  --ink-2:#0a2836;
  --cyan:#00c7f1;
  --cyan-deep:#00708f;
  --on-cyan:#00212c;
  --flame:#c2410c;        /* peu de places, sur fond clair */
  --flame-2:#ff8a5c;      /* peu de places, sur fond sombre */
  --paper:#f4f6f7;
  --paper-2:#e7ecee;
  --line:#d3dadd;
  --body:#16242a;
  --muted:#5f7079;
  --gutter:clamp(1rem,5vw,4rem);
  --head:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--cyan);color:var(--on-cyan);padding:.75rem 1rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:80rem;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- typographie ---------- */
.display,.heading,.tt__title,.brand__name,.foot__brand,.cls__name,.price__amount,.mob__name,.espace h2,.modal h2{
  font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.95;margin:0}
.display{font-size:clamp(2.6rem,1.6rem + 3vw,4.1rem);line-height:.9}
.heading{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.4rem)}
.eyebrow{margin:0 0 1rem;color:var(--cyan);font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}
.lede{color:var(--muted);max-width:60ch;margin:.6rem 0 0}
.section--dark .lede{color:rgba(244,246,247,.72)}
em{font-style:normal;color:var(--cyan)}
.textlink{color:var(--cyan-deep);font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.5rem;
  background:var(--cyan);color:var(--on-cyan);border:2px solid var(--cyan);font-weight:800;text-decoration:none;font-size:1rem}
.btn:hover{background:#00b0d6;border-color:#00b0d6}
.btn--sm{min-height:42px;padding:0 1rem;font-size:.92rem;font-weight:700}
.btn--line{background:transparent;color:var(--cyan)}
.btn--line:hover{background:rgba(0,199,241,.12);border-color:var(--cyan)}
.btn--ghost{background:transparent;color:var(--cyan-deep);border-color:var(--cyan-deep)}
.btn--ghost:hover{background:rgba(0,112,143,.08);border-color:var(--cyan-deep)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:inherit}

/* ---------- bandeau démo ---------- */
.demo{background:#ffe066;color:#3b2f00;font-size:.85rem;font-weight:700;text-align:center;padding:.45rem 1rem}

/* ---------- en-tête ---------- */
.topbar{background:var(--ink);color:rgba(244,246,247,.7);font-size:.82rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.topbar a{color:var(--cyan);font-weight:700;text-decoration:none}
.head{position:sticky;top:0;z-index:50;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:1.5rem;height:var(--head)}
.brand{margin-right:auto;text-decoration:none;color:#000}
.brand__name{display:block;font-size:1.85rem;font-weight:900}
.brand__tag{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,247,.55);margin-top:5px}
.nav{display:flex;gap:1.4rem}
.nav a{text-decoration:none;font-weight:700;color:var(--body);font-size:1rem}
.nav a:hover{color:var(--cyan-deep)}
.burger{display:none;width:44px;height:44px;background:none;border:0;color:var(--ink);align-items:center;justify-content:center}

/* ---------- héros + planning (ordinateur) ---------- */
.hero{background:var(--ink);color:var(--paper);padding:2.2rem 0 2.6rem}
.hero__grid{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3rem;align-items:start}
.hero__txt{display:flex;flex-direction:column;position:sticky;top:calc(var(--head) + 1.5rem)}
.claim{font-size:1.35rem;font-weight:800;line-height:1.25;margin:1.4rem 0 1rem}
.hero__hint{color:rgba(244,246,247,.72);margin:0 0 1.6rem;font-size:.98rem}
.hero__hint strong{color:var(--paper)}
.hero__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 80%}

.tt{background:var(--paper);color:var(--body);padding:1.4rem 1.6rem 1rem}
.tt__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tt__title{font-size:1.75rem}
.tt__weeks{display:flex;border:2px solid var(--line)}
.tt__week{background:none;border:0;padding:.45rem .9rem;font-size:.85rem;font-weight:700;color:var(--muted);min-height:36px}
.tt__week.is-on{background:var(--ink);color:var(--paper)}
.tt__filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 .4rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .85rem;border:2px solid var(--line);
  background:transparent;font-size:.82rem;font-weight:700;color:var(--body)}
.chip i{width:9px;height:9px;display:inline-block}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tt__day{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.8rem;padding:.45rem 0;border-top:1px solid var(--line)}
.tt__date{font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding-top:.7rem}
.tt__date.is-today{color:var(--cyan-deep)}
.tt__slots{display:flex;flex-direction:column;gap:2px}
.slot{display:flex;align-items:center;gap:1rem;min-height:44px;padding-left:.8rem;border-left:4px solid var(--c,#999)}
.slot__time{font-weight:800;font-variant-numeric:tabular-nums;width:3.2rem}
.slot__name{font-weight:700;flex:1;min-width:0}
.slot__spots{font-size:.82rem;color:var(--muted);white-space:nowrap}
.slot__spots.is-low{color:var(--flame);font-weight:700}
.slot.is-past{opacity:.45}
.slot .btn{min-height:36px;width:8.4rem;padding:0;font-size:.82rem}
.tt__empty,.tt__load{color:var(--muted);padding:1rem 0;margin:0}
.tt__note{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}

/* ---------- planning (téléphone) ---------- */
.mob{display:none}

/* ---------- sections ---------- */
.section{padding:clamp(3rem,6vw,4.5rem) 0}
.section--mid{background:var(--paper-2)}
.section--dark{background:var(--ink);color:var(--paper)}
.sec-head{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.sec-head .lede{margin:0}
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.cls{background:#fff;display:flex;flex-direction:column;border-top:6px solid var(--c)}
.cls__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cls__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.cls__step{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cls__name{font-size:1.5rem;margin-bottom:.5rem}
.cls__tag{font-weight:700;margin:0 0 .4rem}
.cls__txt{color:var(--muted);font-size:.95rem;margin:0 0 1rem;flex:1}
.cls .textlink{align-self:flex-start;background:none;border-top:0;border-left:0;border-right:0;padding:0 0 1px;cursor:pointer;font-size:.95rem}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;margin-top:1.6rem}
.price{border-top:3px solid var(--cyan);padding-top:.9rem}
.price h3{margin:0;font-size:1rem}
.price__amount{font-size:2.3rem;margin:.4rem 0}
.price p{margin:0;color:rgba(244,246,247,.7)}
.provisoire{margin:1.4rem 0 0;color:var(--flame-2);font-weight:700;font-size:.85rem}
.coachs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:3rem;align-items:center}
.coachs__list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:1rem}
.coachs__list li{border-left:4px solid var(--cyan);padding:.2rem 0 .2rem 1rem}
.coachs__list strong{display:block;font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.4rem}
.coachs__list span{color:var(--muted)}
.coachs__img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* ---------- pied de page ---------- */
.foot{background:var(--ink-2);color:rgba(244,246,247,.8);padding:3rem 0 1.6rem}
.foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.foot h3{margin:0 0 .6rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.foot p{margin:0 0 .6rem}
.foot a{color:var(--paper)}
.foot .textlink{color:var(--cyan)}
.foot__brand{color:#fff;font-size:1.35rem;font-weight:900}
.foot__legal{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1rem;border-top:1px solid rgba(244,246,247,.14);font-size:.8rem;color:rgba(244,246,247,.55)}
.foot__legal a{color:rgba(244,246,247,.7)}

/* ---------- menu (téléphone) ---------- */
.menu{position:fixed;inset:0;z-index:120;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;overflow:auto}
.menu__head{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 6px 0 16px;background:var(--ink-2)}
.menu__head .brand__name{font-size:1.05rem}
.menu__nav{display:flex;flex-direction:column;padding:1rem 16px}
.menu__nav a{display:flex;justify-content:space-between;align-items:center;min-height:64px;border-bottom:1px solid rgba(244,246,247,.12);
  text-decoration:none;font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.8rem;letter-spacing:-.015em}
.menu__nav a span{color:var(--cyan);font-size:1.2rem}
.menu__actions{padding:1rem 16px 2rem;display:grid;gap:.6rem}

/* ---------- fenêtre ---------- */
.modal{position:fixed;inset:0;z-index:150;background:rgba(4,22,29,.72);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal__box{width:100%;max-width:32rem;max-height:calc(100vh - 2rem);overflow:auto;background:var(--paper);color:var(--body);padding:1.5rem 1.6rem 1.6rem}
.modal__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.modal h2{font-size:1.7rem}
.modal .icon{color:var(--body);margin-right:-.6rem}
.recap{background:#fff;margin:1rem 0 0;padding:.9rem 1rem .9rem 1.1rem;border-left:5px solid var(--c,#999)}
.recap__when{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.recap__name{font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.6rem;margin:.3rem 0}
.recap__meta{font-size:.88rem;color:var(--muted)}
.recap__meta b{color:var(--flame)}
.field{display:flex;flex-direction:column;gap:.35rem;margin-top:1rem}
.field label{font-weight:700;font-size:.95rem}
.field input{min-width:0;width:100%;height:50px;padding:0 .9rem;border:2px solid #b9c4c9;background:#fff;font-size:1rem;color:var(--body)}
.field input:focus{border-color:var(--cyan-deep);outline:none}
.field--code input{font-size:1.6rem;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hint{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
.err{color:#b42318;font-weight:700;font-size:.9rem;margin:.8rem 0 0}
.actions{display:grid;gap:.5rem;margin-top:1.2rem}
.linkbtn{background:none;border:0;color:var(--cyan-deep);font-weight:700;min-height:44px;text-decoration:underline}
.done{text-align:center}
.done__check{width:68px;height:68px;border-radius:50%;background:var(--cyan);color:var(--on-cyan);display:flex;align-items:center;justify-content:center;margin:.4rem auto 1rem}
.done p{margin:.6rem 0 0}

/* ---------- mon espace ---------- */
.espace{position:fixed;inset:0;z-index:140;background:var(--paper);color:var(--body);overflow:auto}
.espace__in{max-width:60rem;margin:0 auto;padding:0 var(--gutter) 3rem}
.espace__bar{display:flex;align-items:center;justify-content:space-between;height:var(--head);border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.espace h2{font-size:clamp(2rem,1.5rem + 2vw,2.8rem)}
.espace__grid{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:1.6rem;margin-top:1.6rem;align-items:start}
.bilan{background:var(--ink);color:var(--paper);padding:1.2rem}
.bilan b{display:block;font-size:2.6rem;font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;color:var(--cyan);line-height:1}
.bilan span{color:rgba(244,246,247,.75);font-size:.92rem}
.lbl{margin:0 0 .6rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.resa{display:flex;align-items:center;gap:1rem;background:#fff;padding:.8rem .9rem .8rem 1rem;margin-bottom:.5rem;border-left:5px solid var(--c,#999)}
.resa__txt{flex:1;min-width:0}
.resa__when{font-size:.82rem;font-weight:700;color:var(--muted)}
.resa__name{font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.25rem;margin-top:.15rem}
.resa__badge{font-size:.78rem;font-weight:800;color:var(--cyan-deep);white-space:nowrap}
.resa .btn{min-height:40px;padding:0 .9rem;font-size:.85rem}
.vide{background:#fff;padding:1.2rem;color:var(--muted)}

/* ============================================================
   TÉLÉPHONE (< 960 px) — version 2c
   ============================================================ */
@media (max-width:959px){
  :root{--head:60px}
  .topbar,.nav,.head__essai,.hero{display:none}
  .head__in{gap:.5rem;padding-right:6px}
  .brand__tag{display:none}
  .burger{display:inline-flex}
  .head .btn--line{white-space:nowrap;padding:0 .75rem}
  .demo{font-size:.72rem;padding:.3rem .8rem}

  .mob{display:flex;min-height:calc(100svh - var(--head));min-height:max(620px,calc(100svh - var(--head)));background:var(--ink);color:var(--paper)}
  .mob__rail{flex:none;width:76px;display:flex;flex-direction:column;gap:2px;padding:2px 0}
  .day{flex:1 1 0;min-height:64px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:var(--ink-2);color:var(--paper);padding:0}
  .day__k{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .day__n{font-size:1.85rem;font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;line-height:.95}
  .day__dots{display:flex;gap:4px;height:8px}
  .day__dots i{width:8px;height:8px;border-radius:50%;background:var(--c)}
  .day.is-today{box-shadow:inset 3px 0 0 var(--cyan)}
  .day[aria-pressed="true"]{background:var(--cyan);color:var(--on-cyan)}
  .day[aria-pressed="true"] .day__dots i{background:var(--ink)}

  .mob__stage{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .mob__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .mob__veil{position:absolute;inset:0;background:rgba(4,22,29,.62)}
  .mob__top{position:relative;margin:1rem 14px 0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,247,.8)}
  .mob__body{position:relative;margin-top:auto;padding:1.5rem 14px 1.2rem}
  .mob__day{margin:0 0 .5rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
  .mob__chips{display:flex;flex-direction:column;gap:4px;margin-bottom:1.1rem}
  .mchip{display:flex;align-items:center;gap:.75rem;min-height:44px;padding:0 .75rem;border:0;text-align:left;
    background:rgba(4,22,29,.78);color:var(--paper);box-shadow:inset 4px 0 0 var(--c)}
  .mchip b{font-size:.95rem;font-variant-numeric:tabular-nums}
  .mchip span{flex:1;font-size:.75rem;font-weight:700;letter-spacing:.04em}
  .mchip small{font-size:.7rem;font-weight:700}
  .mchip[aria-pressed="true"]{background:var(--c);color:var(--ink);box-shadow:none}
  .mchip.is-past{opacity:.5}
  .mob__name{font-size:clamp(1.4rem,6.8vw,2.5rem);color:var(--c);overflow-wrap:anywhere}
  .mob__tag{margin:.6rem 0 .25rem;font-weight:700}
  .mob__txt{margin:0 0 .6rem;font-size:.92rem;color:rgba(244,246,247,.86)}
  .mob__spots{margin:0 0 .8rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,246,247,.75)}
  .mob__spots.is-low{color:var(--flame-2)}
  .mob__body .btn--line{color:var(--cyan)}

  .classes{grid-template-columns:1fr}
  .cls{display:grid;grid-template-columns:6.5rem minmax(0,1fr)}
  .cls__img{aspect-ratio:auto;height:100%}
  .cls__body{padding:1rem .9rem 1.1rem}
  .cls__name{font-size:1.2rem;overflow-wrap:anywhere}
  .prices{grid-template-columns:1fr;gap:1.2rem}
  .coachs{grid-template-columns:1fr;gap:1.6rem}
  .coachs__img{aspect-ratio:4/3;object-position:50% 30%}
  .foot__grid{grid-template-columns:1fr;gap:1.6rem}

  .modal{align-items:flex-end;padding:0}
  .modal__box{max-width:none;max-height:92vh;padding:1.2rem 16px calc(1.4rem + env(safe-area-inset-bottom))}
  .espace__grid{grid-template-columns:1fr}
  .resa{flex-wrap:wrap}
}
@media (min-width:960px) and (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:2rem}
  .nav{gap:1rem}
  .classes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* En-tête clair (retours d'Henere) : le nom en noir, plus grand. */
.head .btn--line{color:var(--ink);border-color:var(--ink)}
.head .btn--line:hover{background:var(--paper-2);border-color:var(--ink)}
.prices{grid-template-columns:repeat(auto-fit,minmax(16rem,22rem))}
.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:959px){
  .brand__name{font-size:1.3rem}
  .foot__grid{grid-template-columns:1fr}
}

/* Tarifs en deux groupes : cours HYROX / plateau */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
.pgroup__t{margin:0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.pgroup__s{margin:.25rem 0 1.2rem;color:rgba(244,246,247,.7)}
.pgroup__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.pgroup--alt .pgroup__t{color:#fff}
.pgroup--alt .price{border-top-color:rgba(244,246,247,.55)}
.price h4{margin:0;font-size:1rem}
@media (max-width:959px){
  .prices{grid-template-columns:1fr;gap:2.4rem}
  .pgroup__list{gap:1.2rem}
  .price__amount{font-size:1.9rem}
}
.price .price__amount{color:#fff;white-space:nowrap;font-size:1.9rem}
@media (max-width:959px){
  .pgroup__list{grid-template-columns:1fr}
  .price{display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:baseline}
  .price h4{grid-column:1}
  .price .price__amount{grid-column:2;grid-row:1;margin:0;font-size:1.5rem}
  .price p:last-child{grid-column:1 / -1}
}

/* ============================================================
   MON ESPACE — une seule page (formule, cours, stats, infos)
   ============================================================ */
.espace__in{max-width:40rem}
.espace h2{margin-bottom:1rem}
.espace .lbl{margin-bottom:.2rem}
.esp__h{font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.3rem;
  letter-spacing:-.01em;color:var(--ink);margin:2rem 0 .7rem}
.okmsg{background:#dff3e6;color:#1b5e33;font-weight:700;font-size:.9rem;padding:.6rem .8rem;margin:0 0 .6rem}

.fcard{background:var(--ink);color:#fff;padding:1rem 1.1rem 1rem}
.fcard .lbl{color:var(--cyan)}
.fcard h3{margin:.25rem 0 .1rem;font-size:1.1rem}
.fcard p{margin:.15rem 0 0;font-size:.88rem;color:rgba(244,246,247,.75)}
.fcard .w{color:var(--flame-2);font-weight:800}
.fcard__big{display:flex;align-items:baseline;gap:.5rem;margin-top:.4rem}
.fcard__big b{font-weight:900;font-variation-settings:'wdth' 118,'wght' 900;font-size:3.4rem;line-height:1}
.fcard__big span{font-weight:700}
.fcard__pips{display:flex;gap:4px;margin:.8rem 0 .6rem}
.fcard__pips i{flex:1;height:8px;background:var(--cyan);border-radius:2px}
.fcard__pips i.u{background:rgba(255,255,255,.18)}
.fcard__row+.fcard__row{border-top:1px solid rgba(255,255,255,.15);margin-top:.7rem;padding-top:.7rem}
.fcard--vide{background:#fff;color:var(--body);border:1px solid var(--line)}
.fcard--vide .lbl{color:var(--muted)}
.fcard--vide p{color:var(--muted)}

.bk{display:flex;background:#fff;border:1px solid var(--line);border-left:5px solid var(--c,#999);padding:.8rem .9rem;margin-bottom:.6rem}
.bk__m{flex:1;min-width:0}
.bk__d{font-size:.85rem;font-weight:700;color:var(--muted)}
.bk__n{font-weight:850;font-variation-settings:'wdth' 118,'wght' 850;text-transform:uppercase;font-size:1.3rem;margin:.15rem 0 .4rem}
.bk__a{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.bk__a .btn{min-height:40px;padding:0 .9rem;font-size:.88rem}
.bk__warn{margin:.7rem 0 0;font-size:.88rem;font-weight:600}
.bk__warn.is-late{color:var(--flame)}
.pill{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:99px;background:var(--paper-2);color:var(--body);white-space:nowrap}
.pill--ok{background:#dff3e6;color:#1b7a3e}
.pill--warn{background:#fde6db;color:var(--flame)}
.pill--cyan{background:#d4f5fd;color:var(--cyan-deep)}
.btn--danger{background:transparent;color:var(--flame);border-color:#efc6b4}
.btn--danger:hover{background:#fdf0ea;border-color:var(--flame)}
.espace .btn--wide{margin-top:.4rem}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.tile{background:#fff;border:1px solid var(--line);padding:.8rem}
.tile b{display:block;font-weight:900;font-variation-settings:'wdth' 118,'wght' 900;font-size:2rem;line-height:1;color:var(--ink)}
.tile span{display:block;font-weight:700;font-size:.85rem;margin-top:.4rem}
.tile small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.up{color:#1b7a3e;font-weight:800}
.down{color:var(--flame);font-weight:800}
.chart{background:#fff;border:1px solid var(--line);padding:.8rem .8rem .6rem;margin-top:.6rem}
.chart__t{font-weight:800;font-size:.85rem;margin:0 0 .7rem}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;border-bottom:1px solid var(--line);position:relative}
.bars i{flex:1;background:#7fb9c9;border-radius:4px 4px 0 0;min-width:0}
.bars i.zero{background:#dfe5e8}
.bars i.now{background:var(--cyan-deep)}
.bars i:hover{outline:2px solid var(--ink);outline-offset:1px}
.bars__g{position:absolute;left:0;right:0;border-top:1px dashed #e3e8ea;pointer-events:none}
.bars__g em{position:absolute;right:0;top:-15px;font-size:.65rem;font-style:normal;color:var(--muted)}
.axis{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:.3rem}
.fmt{display:grid;grid-template-columns:6.5rem 1fr 2rem;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;margin:.45rem 0}
.fmt div{height:10px;border-radius:0 4px 4px 0}
.fmt span:last-child{text-align:right;color:var(--muted)}
.passes{list-style:none;margin:.2rem 0 0;padding:0;background:#fff;border:1px solid var(--line)}
.passes li{display:flex;gap:.6rem;align-items:baseline;padding:.5rem .8rem;border-left:4px solid var(--c);border-bottom:1px solid #eef1f2;font-size:.88rem}
.passes li span{color:var(--muted);flex:1}
.passes li b{font-weight:800}
.passes li em{color:var(--flame);font-size:.75rem;font-weight:800;text-transform:uppercase}

.ro{min-height:50px;display:flex;align-items:center;padding:0 .9rem;background:var(--paper-2);color:var(--muted);border:2px solid var(--paper-2)}
.linkbtn--in{min-height:0;padding:0;font-size:inherit}
.sous{background:#fff;border:1px solid var(--line);padding:.2rem .9rem .9rem;margin-top:.6rem}
.esp__fin{border-top:1px solid var(--line);margin-top:2rem;padding-top:.8rem}
.esp__fin .linkbtn{padding:0}

.done__f{margin:.8rem auto 0;font-weight:700;background:#fff;padding:.6rem .8rem;max-width:22rem}
.done__f.is-warn{color:var(--flame)}

/* Déplacer : les créneaux proposés */
.opts{display:grid;gap:.45rem}
.opt{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:#fff;border:1px solid var(--line);padding:.75rem .8rem;color:var(--body)}
.opt__t{flex:1;min-width:0}
.opt__t i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.35rem}
.opt[aria-pressed="true"]{border:2px solid var(--cyan-deep);background:#effbfe;padding:calc(.75rem - 1px) calc(.8rem - 1px)}
.opt:disabled{color:#8d9aa0;cursor:default}
.radio{width:18px;height:18px;border-radius:50%;border:2px solid #9aa9b0;flex:none}
.opt[aria-pressed="true"] .radio{border:5px solid var(--cyan-deep)}

/* Réserver : qui vient, d'autres cours, qui paie */
.info{background:#effbfe;border-left:4px solid var(--cyan-deep);padding:.7rem .9rem;margin:1rem 0 0;font-size:.92rem;font-weight:600}
.qui,.plusieurs,.paye{margin-top:1.1rem}
.paye .opts{margin-top:.4rem}
.opt--c{padding:.55rem .7rem;gap:.6rem;margin-top:.35rem}
.opt--c[aria-pressed="true"]{padding:calc(.55rem - 1px) calc(.7rem - 1px)}
.opt--c .opt__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt--c .pill{font-size:.66rem}
.opt__t small{font-weight:500;color:var(--muted);margin-left:.35rem}
.cbox{width:22px;height:22px;border:2px solid #9aa9b0;border-radius:4px;background:#fff;position:relative;flex:none}
.opt[aria-pressed="true"] .cbox{background:var(--cyan-deep);border-color:var(--cyan-deep)}
.opt[aria-pressed="true"] .cbox::after{content:'';position:absolute;left:6px;top:1px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.jour-l{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}
.plus{display:flex;gap:.2rem 1.2rem;flex-wrap:wrap;margin-top:.5rem}
.linkbtn--plus{text-decoration:none;padding:0}
.nouvelle{background:#fff;border:2px solid var(--cyan-deep);padding:.2rem .9rem .9rem;margin-top:.35rem}
.nouvelle .field{margin-top:.6rem}
.nouvelle .bk__a{margin-top:.8rem}
.bas{position:sticky;bottom:-1.6rem;z-index:1;background:var(--paper);margin:1.2rem -1.6rem -1.6rem;padding:.8rem 1.6rem 1.2rem;border-top:1px solid var(--line)}
.bas .hint{text-align:center;margin:0 0 .6rem}
.liste3{list-style:none;padding:0;margin:1rem auto 0;max-width:24rem;text-align:left}
.liste3 li{background:#fff;border-left:5px solid var(--c);padding:.55rem .8rem;margin-top:.4rem;font-size:.95rem}
.liste3 li b{text-transform:uppercase}
.liste3 small{display:block;color:var(--muted);font-size:.85rem;margin-top:.1rem}
.bk__pour{font-weight:700;color:var(--cyan-deep);font-size:.9rem;margin:.1rem 0 .2rem}
@media (max-width:959px){
  .bas{bottom:calc(-1.4rem - env(safe-area-inset-bottom));margin:1.2rem -16px calc(-1.4rem - env(safe-area-inset-bottom));
       padding:.8rem 16px calc(1rem + env(safe-area-inset-bottom))}
}