/* ESPACE ADHÉRENT « APPLI » — style Dojo retenu par Olivier (22/09).
   --brand = couleur de l'association (réglages) : jauges, onglet actif, boutons.
   Les couleurs de CEINTURE ne servent qu'aux ceintures et aux mini-ceintures d'auto-évaluation. */
:root{
  --ground:#eef1f8; --surface:#fff; --surface2:#f6f8fc; --ink:#141c33; --muted:#5d6782; --line:#e1e6f0;
  --red:#d7263d; --red-soft:#fde8eb; --gold:#f2a900; --gold-soft:#fff3d4; --green:#1e9e5a; --green-soft:#e2f6ec;
  --shadow:0 6px 22px -12px rgba(20,36,90,.35);
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --ground:#0b1020; --surface:#151c33; --surface2:#1b2440; --ink:#eef1fb; --muted:#9aa5c4; --line:#27314f;
  --red:#ff6b7d; --red-soft:#3a1c26; --gold:#ffc53d; --gold-soft:#3a2f12; --green:#4fd08a; --green-soft:#133626;
  --shadow:0 6px 22px -12px rgba(0,0,0,.7); --brand-soft:color-mix(in srgb,var(--brand) 28%,#151c33);
}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
header.top{padding:14px 16px 6px;display:flex;align-items:center;gap:12px}
.club{width:42px;height:42px;border-radius:12px;background:var(--brand-ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;flex:none;overflow:hidden}
.club img{width:100%;height:100%;object-fit:contain}
/* Un logo transparent se pose directement sur la page : ni carton blanc, ni couleur derrière,
   ni coins rognés (24/09). La pastille de couleur ne sert plus qu'aux associations sans logo. */
.club-logo{background:transparent !important;border-radius:0;overflow:visible}
.top .t{flex:1;min-width:0}
.top .t b{display:block;font-family:var(--display);font-size:17px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .t span{font-size:12.5px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kids{display:flex;gap:8px;padding:6px 16px 4px;overflow-x:auto;scrollbar-width:none}
.kids::-webkit-scrollbar{display:none}
.kid{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:40px;padding:5px 12px 5px 5px;font-weight:700;font-size:14px;white-space:nowrap;flex:none}
.kid .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;background:var(--brand-ink)}
.kid.on{border-color:var(--brand-ink);background:var(--brand-soft);color:var(--brand-ink)}
main{flex:1;padding:8px 16px 110px;display:flex;flex-direction:column;gap:14px}
h1.h{font-family:var(--display);font-size:26px;line-height:1.1;margin-top:6px}
h2.h{font-family:var(--display);font-size:18px;margin:4px 0 -4px}
.sub{color:var(--muted);font-size:13px}
.card{background:var(--surface);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:30px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.p-brand{background:var(--brand-soft);color:var(--brand-ink)} .p-red{background:var(--red-soft);color:var(--red)}
.p-gold{background:var(--gold-soft);color:#8a5c00} .p-coach{background:#d5f5f6;color:#0b6470} .p-green{background:var(--green-soft);color:var(--green)}
@media (prefers-color-scheme: dark){.p-gold{color:var(--gold)}}
.btn{border:0;border-radius:14px;padding:12px 16px;font:700 15px var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.btn-main{background:var(--brand-ink);color:#fff} .btn-ghost{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.btn-block{width:100%}
.btn:focus-visible,.kid:focus-visible,.tab:focus-visible,.mb:focus-visible,.lv:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.flash{padding:12px 14px;border-radius:14px;font-size:13.5px;font-weight:600;background:var(--green-soft);color:var(--green)}
.flash.err{background:var(--red-soft);color:var(--red)}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:22px 10px}
/* accueil */
.hero{background:linear-gradient(145deg,var(--brand-ink),var(--brand));color:#fff;border-radius:24px;padding:18px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero .lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;font-weight:700}
.hero .bn{font-family:var(--display);font-size:23px;line-height:1.1;margin:2px 0 12px}
.hero .beltbox{display:inline-block;background:rgba(255,255,255,.95);border-radius:10px;padding:6px}
.ringwrap{display:flex;align-items:center;gap:16px;margin-top:16px;position:relative}
.ring{width:84px;height:84px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.22) 0);display:grid;place-items:center;flex:none}
.ring b{width:66px;height:66px;border-radius:50%;background:var(--brand-ink);display:grid;place-items:center;font-family:var(--display);font-size:20px}
.btn-light{background:#fff;color:var(--brand-ink);padding:9px 14px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st{background:var(--surface);border-radius:18px;padding:12px 8px;box-shadow:var(--shadow);text-align:center}
.st .ic{font-size:22px}
.st b{display:block;font-family:var(--display);font-size:22px;line-height:1.1;margin-top:2px}
.st span{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.25;display:block}
.next{display:flex;gap:12px;align-items:center}
.date{width:54px;flex:none;border-radius:14px;background:var(--brand-soft);color:var(--brand-ink);text-align:center;padding:6px 0;font-family:var(--display);line-height:1}
.date b{display:block;font-size:22px} .date span{font-size:11px;font-weight:700;text-transform:uppercase}
.date.red{background:var(--red-soft);color:var(--red)}
/* programme : bandeau des ceintures — la ceinture CALÉE EN HAUT, le nom dessous (1 ou 2 lignes) */
.lvl{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scroll-behavior:smooth;scrollbar-width:none}
.lvl::-webkit-scrollbar{display:none}
.lv{flex:none;width:118px;background:var(--surface);border-radius:16px;padding:10px;box-shadow:var(--shadow);border:2px solid transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;font-size:12.5px;font-weight:700;line-height:1.25}
.lv .spbelt,.lv .spbelt-img{margin:0}
.lv.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.lv.lock{opacity:.55}
.lvname{font-family:var(--display);font-size:19px;line-height:1.15;margin:4px 0 0}
.cat{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.cat>button{all:unset;display:flex;gap:12px;align-items:center;padding:14px 16px;width:100%;box-sizing:border-box;cursor:pointer}
.cat .ci{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;flex:none}
.cat .cn{flex:1;min-width:0}
.cat .cn b{display:block;font-size:15px}
.gauge{height:8px;border-radius:6px;background:var(--surface2);overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.gauge span{display:block;height:100%;background:var(--brand-ink);border-radius:6px;transition:width .35s}
.pct{font-family:var(--display);font-size:18px;min-width:48px;text-align:right}
.chev{transition:transform .2s;color:var(--muted);flex:none}
.cat.open .chev{transform:rotate(180deg)}
.cat .body{display:none;border-top:1px solid var(--line);padding:4px 16px 12px}
.cat.open .body{display:block}
/* Titre de sous-catégorie — proposition B retenue par Olivier (23/09) : « gris, tout petit, en
   majuscules » se noyait entre les noms de techniques. Filet à la couleur du club, titre et
   pourcentage dans cette couleur RENDUE LISIBLE (--brand-ink, contraste garanti 4,5:1). */
.scat{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-left:3px solid var(--brand);padding:3px 0 3px 11px;margin:18px 0 8px;
  font-size:14px;font-weight:800;color:var(--brand-ink);letter-spacing:0}
.scat>span:last-child{font-size:12.5px;font-weight:700;color:var(--brand-ink);flex:none}
.tech{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tech:last-child{border-bottom:0}
.tech .tn{flex:1;min-width:0;font-size:14px}
.tech .tn small{display:block;color:var(--muted);font-size:12px}
.rev{font-size:10px;color:#b45309;font-weight:800;margin-right:4px;white-space:nowrap}
.rate{display:flex;gap:3px;flex:none}
.mb{all:unset;cursor:pointer;width:22px;height:13px;border-radius:3px;background:var(--line);transition:transform .12s,background .15s}
.mb.f{background:var(--c)}
.mb.lt.f{box-shadow:0 0 0 1px rgba(20,30,50,.35)}
.mb:active{transform:scale(.88)}
.rate.ro .mb{cursor:default}
.legend{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);font-weight:600}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:30px;font-weight:700;font-size:13.5px;z-index:30;box-shadow:var(--shadow);white-space:nowrap}
/* agenda */
.ev{display:flex;flex-direction:column;gap:10px}
.ev .poster{min-height:78px;border-radius:14px;display:flex;align-items:flex-end;padding:10px 12px;color:#fff;font-family:var(--display);font-size:18px;line-height:1.15;background:linear-gradient(135deg,var(--brand-ink),var(--brand))}
.ev .meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted)}
.ev .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:20px;white-space:nowrap}
/* boutique : ligne par ligne, photo facultative */
.plist{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.pline{display:flex;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.pline:first-child{border-top:0}
.pline .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* photo d'un article (27/09) : vignette carrée touchable → photo en grand dans une feuille */
.pth{width:64px;height:64px;flex:none;border:0;padding:0;border-radius:14px;overflow:hidden;background:var(--brand-soft);color:var(--brand-ink);
  font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;font-family:inherit;align-self:flex-start}
button.pth{cursor:zoom-in}
.pth img{width:100%;height:100%;object-fit:cover;display:block}
.pbig{width:100%;max-height:62vh;object-fit:contain;border-radius:16px;background:var(--surface2)}
.pline .pr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pline .price{font-size:17px}
.step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.step button{width:34px;height:32px;border:0;background:var(--surface);font-size:18px;font-weight:800;color:var(--brand-ink);cursor:pointer}
.step .q{min-width:26px;text-align:center;font-weight:800}
.padd{border:0;border-radius:12px;padding:8px 12px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.cartbar{position:sticky;bottom:92px;z-index:4}
/* profil */
.idc{display:flex;gap:14px;align-items:center}
.idc .av{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;background:var(--brand-ink);font-family:var(--display);font-size:24px;flex:none}
.kv{display:flex;flex-direction:column;margin-top:6px}
.kv div{padding:10px 0;border-top:1px solid var(--line)} .kv div:first-child{border-top:0}
.kv div span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.kv div b{font-size:15px;display:block;margin-top:2px;overflow-wrap:anywhere;font-weight:600}
.mo{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.mo>span{width:40px;flex:none;font-size:12px;font-weight:700;color:var(--muted);text-transform:capitalize;padding-top:6px}
.dots{display:flex;flex-wrap:wrap;gap:6px 12px}
.wkg{display:inline-flex;gap:4px}   /* 1.163.4 : une semaine = un groupe de séances */
.dot{width:30px;height:30px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;padding:0}
.dot.y{background:var(--green-soft);border-color:transparent;color:var(--green)}
.dot.n{background:var(--red-soft);border-color:transparent;color:var(--red)}
.dot.e{background:var(--gold-soft);border-color:transparent;color:#8a5c00}
.dot.u{background:var(--surface2);color:var(--muted)}
.dot.f{background:transparent;border:1.5px dashed var(--line);cursor:default}
.dot.sel{outline:3px solid var(--brand-ink);outline-offset:1px}
.dotinfo{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:13.5px}
.dleg{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:12px;color:var(--muted)} .dleg i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.tli{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.tli:last-child{border-bottom:0}
.tli .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--surface2)}
.tli .tx{flex:1;min-width:0;font-size:14px}
.tli .tx small{display:block;color:var(--muted);font-size:12px}
.tli .am{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:14px;white-space:nowrap}
.tli .am small{display:block;font-weight:600;font-size:11.5px}
.tli .am a{color:var(--brand-ink);font-size:12px}
.fold .more{display:none} .fold.open .more{display:flex}
.acc{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.acc:first-of-type{border-top:0}
.acc .tx{flex:1;min-width:0;font-size:14px}
.acc .tx small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
/* formulaires */
label.f{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:12px 0 6px}
input.in{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:var(--surface);color:var(--ink)}
input.in:focus{outline:none;border-color:var(--brand-ink)}
/* barre d'onglets */
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(var(--n,5),1fr);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));z-index:10}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0;border-radius:12px;position:relative}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--brand-ink)}
.tab.on .tic{background:var(--brand-soft)}
.tic{width:46px;height:30px;border-radius:15px;display:grid;place-items:center}
.badge-n{position:absolute;top:0;left:calc(50% + 8px);background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;line-height:16px}
/* feuille (bottom sheet) */
.sheet-bg{position:fixed;inset:0;background:rgba(10,16,35,.45);z-index:20;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.on{display:flex}
.sheet{background:var(--surface);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow:auto}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 4px}
.sum{display:flex;justify-content:space-between;font-weight:800;font-size:16px;border-top:1px solid var(--line);padding-top:10px}
/* connexion */
.auth-hero{background:linear-gradient(150deg,var(--brand-ink),var(--brand));color:#fff;padding:44px 24px 40px;text-align:center}
.auth-hero .logo{width:62px;height:62px;border-radius:18px;background:#fff;display:inline-grid;place-items:center;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.18);overflow:hidden}
.auth-hero .logo img{width:100%;height:100%;object-fit:contain}
.auth-hero h2{font-family:var(--display);font-size:24px;line-height:1.1}
.auth-hero p{font-size:13.5px;opacity:.92;margin-top:6px}
.auth{max-width:430px;margin:-20px auto 0;padding:0 16px 40px;position:relative}
.auth .card{padding:20px 18px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1.5px solid var(--line);background:#fff;color:#1f1f1f;border-radius:14px;padding:13px;font-weight:700;font-size:15px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700;margin:16px 0 4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.links a{color:var(--brand-ink);font-weight:700}
.foot-sp{text-align:center;padding:22px 0 18px;font-size:12px;color:var(--muted)}
.foot-sp img{height:30px;opacity:.9;vertical-align:middle;margin-left:3px}
.nav-foot{display:none}
.foot-legal{margin-top:6px;font-size:11.5px}.foot-legal a,.nav-legal a{color:var(--muted);text-decoration:underline}
@media print{nav.tabs,.kids,header.top,.noprint{display:none!important}.cat .body{display:block!important}.cat{box-shadow:none;border:1px solid #ccc}}

/* ═══════════════════ ORDINATEUR ═══════════════════
   23/09, Olivier : « sur PC, c'est une catastrophe — on dirait qu'il y a un bug ». Et à juste
   titre : l'espace était une colonne de 480 px plantée au milieu d'un écran de 1440, avec la
   barre d'onglets flottant en bas et un bandeau de ceintures qui ne se fait pas défiler à la
   souris. Au-delà de 1000 px, la MÊME application se range autrement :
     — la barre du bas devient une colonne à gauche (club, famille, rubriques) ;
     — le contenu prend enfin de la largeur, borné à 1040 px pour rester lisible ;
     — les ceintures deviennent une liste verticale à gauche du programme : plus rien à faire
       glisser, et la liste tient avec trois ceintures comme avec quinze.
   Rien de tout cela ne touche le téléphone : toutes les règles vivent dans cette requête. */
/* Sur téléphone, .progwrap ET .progmain s'effacent : leurs enfants redeviennent les éléments
   de <main>, qui les espace (gap:14px). Sans .progmain dans la règle, tout le contenu du
   programme se retrouvait collé — « ça fait des blocs blancs tout collés les uns sur les
   autres » (Olivier, 23/09). */
.progwrap,.progmain{display:contents}
/* Le nom vietnamien de la ceinture passe SOUS son nom : sur deux lignes il ne bouscule plus rien. */
.lvname .lvsub{display:block;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--muted);margin-top:1px}
@media (min-width:1000px){
  .app{max-width:none;display:grid;grid-template-columns:288px minmax(0,1fr);
       grid-template-rows:auto auto 1fr;grid-template-areas:"top main" "kids main" "tabs main";
       align-items:start;min-height:100vh}
  header.top{grid-area:top;padding:22px 20px 10px;background:var(--surface);border-right:1px solid var(--line);align-items:flex-start}
  /* le nom du club a la place de tenir sur deux lignes : plus de « Vovinam Montpell… » */
  .top .t b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
  .top .t span{white-space:normal}
  .kids{grid-area:kids;flex-direction:column;overflow:visible;gap:6px;padding:4px 20px 0;
        background:var(--surface);border-right:1px solid var(--line)}
  .kids .kid{width:100%;flex:none}
  /* bottom:auto : la règle téléphone (barre fixée en BAS, bottom:0) restait active ici ; sur une page longue (Profil),
     la colonne « collante » était alors tirée vers le haut et passait par-dessus le logo et le nom du club (28/09). */
  nav.tabs{grid-area:tabs;position:sticky;top:0;bottom:auto;left:auto;transform:none;width:auto;max-width:none;
           display:flex;flex-direction:column;gap:2px;border-top:0;border-right:1px solid var(--line);
           padding:14px 14px 24px;align-self:stretch}
  nav.tabs .tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 13px;border-radius:13px;font-size:15px}
  nav.tabs .tab svg{flex:none}
  /* pied de la colonne : déconnexion + marque, collés en bas de la colonne blanche (28/09) */
  .nav-foot{flex:1;display:flex;flex-direction:column;gap:14px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .nav-sp{margin-top:auto;padding-top:24px!important}
  .nav-out{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;font-size:15px;font-weight:700;color:var(--muted)}
  .nav-out svg{width:22px;height:22px;flex:none}
  .nav-out:hover{background:var(--surface2);color:var(--ink)}
  .nav-sp{display:flex;align-items:center;gap:6px;padding:0 13px;font-size:12px;color:var(--muted)}
  .nav-sp img{height:36px;opacity:1}
  .nav-legal{padding:0 13px;font-size:11.5px;color:var(--muted)}
  /* la colonne de gauche descend jusqu'en bas ; la marque y est déjà : plus de bande grise en pied de page */
  body:has(nav.tabs) > .foot-sp{display:none}
  @media (prefers-color-scheme: dark){.nav-sp img{filter:brightness(0) invert(1);opacity:.8}}
  main{grid-area:main;padding:26px 40px 60px;max-width:1080px;width:100%}
  h1.h{font-size:32px}
  /* le programme : les ceintures en colonne, le contenu à côté */
  .progwrap{display:flex;gap:26px;align-items:flex-start}
  .lvl{flex-direction:column;width:270px;flex:none;overflow:visible;padding:0;gap:7px}
  .lvl .lv{width:100%;flex:none}
  .progmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
  /* l'accueil respire : les trois compteurs et les cartes tiennent côte à côte */
  .stats3{gap:16px}
  /* la feuille de la boutique n'a plus à coller en bas d'écran */
  .sheet-bg{align-items:center}
  .sheet{max-width:560px;border-radius:24px;margin:auto;max-height:82vh}
  /* le bouton du panier collait au-dessus de la barre d'onglets : elle n'est plus en bas */
  .cartbar{bottom:18px;max-width:420px}
  .toast{left:auto;right:34px;transform:none}
}
@media (min-width:1360px){
  main{padding-left:56px;padding-right:56px}
}

/* ═══════════ PLEINE LARGEUR SUR TÉLÉPHONE (espace adhérent) ═══════════
   24/09, même règle que le back-office : marge de page resserrée, et les LISTES passent bord à
   bord. Ici la liste, c'est le programme : une catégorie et ses techniques. Elle touche les deux
   bords de l'écran, ce qui rend au nom de chaque technique la place que lui prenaient les
   bordures. Au-dessus de 1000 px (ordinateur), tout reprend sa forme en cartes. */
main{padding-left:10px;padding-right:10px}
.card{padding:14px}
/* le programme, bord à bord */
.cat{margin-left:-10px;margin-right:-10px;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat>button{padding:14px 14px}
.cat .body{padding:4px 14px 12px}
/* Les petites ceintures d'auto-évaluation gardent leur taille : ce sont des cibles qu'on touche
   au doigt, les rétrécir se paierait à chaque note. Le bord à bord suffit à rendre au nom de la
   technique la place qui lui manquait (194 px → 230 px sur un écran de 390). */
@media (min-width:1000px){
  main{padding-left:40px;padding-right:40px}
  .card{padding:16px}
  .cat{margin-left:0;margin-right:0;border-radius:18px;box-shadow:var(--shadow);border-top:0;border-bottom:0}
  .cat>button{padding:14px 16px}
  .cat .body{padding:4px 16px 12px}
}

/* ═══════════ TABLETTE ET TÉLÉPHONE PLIABLE OUVERT ═══════════
   24/09, Olivier, sur son Honor Magic V déplié : « ça ne prend pas toute la pleine largeur ».
   Exact : l'espace était bâti en colonne de 480 px centrée, et la mise en page « ordinateur »
   (colonne de gauche) ne s'enclenchait qu'à partir de 1000 px. Entre les deux — soit précisément
   la largeur d'un pliable ouvert ou d'une tablette en portrait — on gardait une bande de 480 px
   au milieu d'un écran deux fois plus large.
   Entre 640 et 999 px : on garde la barre d'onglets en bas (elle reste sous le pouce) mais le
   contenu prend toute la largeur, borné à 820 px pour que les lignes de texte restent lisibles.
   Au-delà de 1000 px, la mise en page ordinateur reprend la main. */
@media (min-width:640px) and (max-width:999px){
  .app{max-width:none}
  header.top,.kids,main{width:100%;max-width:820px;margin-left:auto;margin-right:auto}
  main{padding-left:20px;padding-right:20px}
  header.top{padding-left:20px;padding-right:20px}
  .kids{padding-left:20px;padding-right:20px}
  nav.tabs{max-width:820px}
  /* le bord à bord reprend la largeur réelle du conteneur */
  .cat{margin-left:-20px;margin-right:-20px}
  .cat>button{padding-left:20px;padding-right:20px}
  .cat .body{padding-left:20px;padding-right:20px}
  /* de la place : les compteurs et les cartes d'accueil respirent */
  h1.h{font-size:30px}
  .sheet{max-width:560px;border-radius:24px;margin:auto}
  .sheet-bg{align-items:center}
}

/* 25/09 — CONVOCATION à un passage de grade : impossible à manquer, l'action en toutes lettres */
.conv{border-radius:14px;padding:12px 14px;margin-top:10px;border:1.5px solid}
.conv-h{font-weight:900;font-size:14.5px;letter-spacing:.02em}
.conv-t{font-size:13.5px;margin-top:3px}
.conv-todo{background:#fdecec;border-color:#e8a0a0;color:#8f1d1d}
.conv-late{background:#f6eeee;border-color:#d9b3b3;color:#6d3030}
.conv-done{background:#e8f6ee;border-color:#a7d9bb;color:#17613a}
.conv .btn-main{width:100%}

/* 26/09 — agenda du COACH : une couleur à part (sarcelle), pour ne pas confondre avec la vie d'adhérent */
.ev-coach{box-shadow:inset 5px 0 0 #0b7285, var(--shadow, 0 1px 3px rgba(0,0,0,.06))}
.coach-note{background:#e3fafc;color:#0b4f5c;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.5}
@media (prefers-color-scheme: dark){.p-coach{background:#0b3d44;color:#99e9f2}.coach-note{background:#0b3d44;color:#c5f6fa}}
/* 26/09 — AGENDA : la date en tête de chaque carte, grande et en couleur (Olivier : « quand les événements
   s'accumulent, la date doit être beaucoup plus mise en évidence ») ; intertitre par mois ; description repliée. */
.evdate{display:flex;gap:12px;align-items:center;background:var(--brand-ink);color:#fff;border-radius:14px;padding:10px 12px}
.evdate .dd{width:54px;flex:none;background:#fff;color:var(--brand-ink);border-radius:12px;text-align:center;padding:6px 0 5px;font-family:var(--display);line-height:1}
.evdate .dd b{display:block;font-size:25px} .evdate .dd span{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;margin-top:2px}
.evdate .dw{min-width:0}
.evdate .dw b{display:block;font-size:16px;line-height:1.25}
.evdate .dw span{display:block;font-size:13px;opacity:.92;margin-top:2px}
.evdate.soon .dw span{font-weight:800}
.evdate.coach{background:#0b7285} .evdate.coach .dd{color:#0b7285}
.ev .evdate + .poster{min-height:52px;font-size:17px}
.ag-month{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:20px 4px 8px}
.ag-month:first-of-type{margin-top:6px}
.evmore summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--brand-ink);list-style:none;padding:4px 0}
.evmore summary::before{content:"▸ "} .evmore[open] summary::before{content:"▾ "}
.evmore summary::-webkit-details-marker{display:none}
.evmore > div{white-space:pre-line;font-size:13.5px;color:var(--ink);padding-top:4px}
@media (prefers-color-scheme: dark){
  .evdate{background:var(--brand-soft);color:var(--ink)} .evdate .dd{background:var(--brand-ink);color:#151c33}
  .evdate.coach{background:#0b3d44} .evdate.coach .dd{background:#99e9f2;color:#0b3d44}
}
/* 26/09 — « Quoi de neuf » dans l'agenda : bloc d'entrée vers les nouveautés, et leur vue dédiée */
.ag-newbox{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border:2px solid var(--gold);background:var(--gold-soft)}
.ag-newic{font-size:26px;flex:none}
.ag-newgo{font-weight:800;color:#8a5c00;flex:none}
.ag-newh{font-family:var(--display);font-size:18px;font-weight:800;margin:4px 2px 8px}
@media (prefers-color-scheme: dark){.ag-newgo{color:var(--gold)}}
/* 26/09 — CARTE D'AGENDA, proposition C validée par Olivier : un seul bandeau à la couleur du type (date + titre),
   pastilles neutres pour le type et l'organisateur, seule la pastille d'ÉTAT garde une couleur. */
.p-mut{background:#eef1f6;color:#5d6785}
.ev.evc{padding:0 0 14px;overflow:hidden;gap:10px}
.ev.evc > :not(.evh){margin-left:14px;margin-right:14px}
.evh{display:flex;gap:12px;align-items:center;padding:12px 14px}
.evh .dd{width:52px;flex:none;background:#fff;color:#1c2340;border-radius:12px;text-align:center;padding:6px 0 5px;line-height:1;font-family:var(--display)}
.evh .dd b{display:block;font-size:24px} .evh .dd span{display:block;font-size:11px;font-weight:800;margin-top:2px;font-family:var(--body)}
.evh .dw{min-width:0}
.evh .dw b{display:block;font-size:16.5px;line-height:1.25;font-family:var(--display)}
.evh .dw span{display:block;font-size:13px;opacity:.93;margin-top:2px}
.evh .dw span.soon{font-weight:800;opacity:1}
@media (prefers-color-scheme: dark){.p-mut{background:#222c4a;color:#aab4d4}}

/* 28/09 — APPLI INSTALLABLE (PWA) : carte « Installer l'appli », guide d'installation, bandeau hors ligne */
[hidden]{display:none!important}
.install-card{border:2px solid var(--brand)}
.app-ico{width:52px;height:52px;border-radius:14px;flex:none;box-shadow:0 2px 8px -3px rgba(20,36,90,.4);background:#fff}
.sheet .app-ico{width:48px;height:48px;border-radius:12px}
.inst-steps{padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.inst-steps li::marker{font-weight:800;color:var(--brand-ink)}
.inst-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);vertical-align:middle;color:#0a84ff}
.offline-bar{position:sticky;top:calc(6px + env(safe-area-inset-top,0px));z-index:9;background:var(--ink);color:var(--surface);font-weight:700;font-size:13px;
  padding:9px 14px;border-radius:14px;box-shadow:var(--shadow);text-align:center;margin-bottom:12px}

/* 1.132.0 — Nouveautés publiées pour les familles (une fois) */
.wn-fam{border:2px solid var(--brand);margin-bottom:14px}
.wn-fam-k{font-size:12px;font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.05em}
.wn-fam-t{display:block;font-size:17px;margin:4px 0 8px}
.wn-fam-h{font-weight:700;font-size:14px;margin:8px 0 4px}
.wn-fam-li{display:flex;gap:8px;font-size:14px;line-height:1.45;margin-bottom:5px}
.wn-fam-li span:first-child{color:var(--brand-ink)}

/* 1.142.0 — boutique : choix de l'acheteur (taille, couleur…) ; profil : aides et remboursements, parrainage */
.pline{flex-wrap:wrap}
.pline .pch{flex-basis:100%;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700}
.pline .pch select{max-width:220px}
.aidl{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.aidl > div{flex:1;min-width:0}
.spcode{font-size:30px;font-weight:900;letter-spacing:.08em;color:var(--brand-ink);text-align:center;margin:6px 0}
.fam-file{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--line);border-radius:12px;padding:14px;font-weight:700;cursor:pointer;color:var(--muted)}
.fam-file input{max-width:100%}
select.in{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:var(--surface);color:var(--ink);font-family:inherit}

/* 1.143.0 — l'appel du coach depuis l'espace */
.appel-cta{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border:2px solid var(--brand);margin-top:0}
.appel-ic{width:46px;height:46px;border-radius:14px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.appel-go{font-size:26px;color:var(--brand);font-weight:800}
.appel-count{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5}
.appel-count b{font-size:22px}
.appel-me.on{border:2px solid var(--green)}
.ps-grid{margin-top:4px}
.ap-toast{display:none;position:fixed;left:16px;right:16px;bottom:84px;margin:0 auto;max-width:480px;background:#1c2530;color:#fff;border-radius:12px;padding:11px 14px;font-size:14px;z-index:300;align-items:center;gap:8px}
.ap-toast .btn{color:#fff;border-color:rgba(255,255,255,.4)}

/* ═══════════ IMAGES ET VIDÉOS DU PROGRAMME (1.164.0, maquette « A+B » validée le 10/10) ═══════════
   A : la vidéo du grade en grand (.pmv-card) et, sous une technique, sa pastille « ▶ 2:35 » (.pm-pill, pmedia.css).
   B : la vignette d'une vidéo de catégorie (.pmv-row) et la vignette propre d'une technique (.pmv-mini).
   Les mini-ceintures de notation ne bougent pas : même place, même taille. */
.pmv-card{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:0;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;width:100%;box-sizing:border-box}
.pmv-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pmv-big{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;width:100%;
  background:linear-gradient(145deg,var(--brand-ink),var(--brand));color:var(--brand-ink)}
.pmv-lab{position:absolute;left:12px;top:12px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:3px 9px;border-radius:30px}
/* 1.165.0 — proposition C : aperçu réel + titre sur l'image */
.pmv-big-img{background-size:cover;background-position:center;color:#12234a}
.pmv-big-img::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.72))}
.pmv-big>svg{position:relative;margin-top:-28px}
.pmv-ttl{position:absolute;left:12px;right:72px;bottom:10px;color:#fff;font-family:var(--display);font-size:17px;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pmv-big:not(.pmv-big-img) .pmv-ttl{text-shadow:none}
.pmv-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;width:100%;box-sizing:border-box}
.pmv-foot .sub{min-width:0}
.p-mut{background:var(--surface2);color:var(--muted)}
.pmv-dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;font-size:12.5px;font-weight:700;padding:2px 7px;border-radius:6px}
.pmv-card .pmv-tx{display:flex;flex-direction:column;flex:1;min-width:0}
.pmv-card .pmv-tx b{font-size:15px}
.pmv-card>.pmv-tx,.pmv-card>.pill{margin:12px 14px}
.pmv-card>.pmv-tx+.pill{margin-left:0;align-self:center}
.pmv-card{flex-direction:row;flex-wrap:wrap;align-items:center}
.pmv-card>.pmv-big,.pmv-card>.pmv-im{flex:0 0 100%}
.pmv-im{display:block;width:100%;max-height:240px;object-fit:cover;background:var(--surface2)}
.pmv-row{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;width:100%;box-sizing:border-box;margin:10px 0 4px;padding:8px;
  border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.pmv-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pmv-row>span{min-width:0}
.pmv-row b{display:block;font-size:14px}
.pmv-row small{display:block;font-size:12.5px;color:var(--muted)}
.pmv-mini{margin-right:2px}
.pmv-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.app .pm-vt{color:var(--brand-ink);background:linear-gradient(145deg,var(--brand-ink),var(--brand))}
.app .pm-img{background:var(--surface2)}
@media (min-width:1000px){.pmv-big{aspect-ratio:auto;height:300px}}
@media (prefers-color-scheme: dark){.pmv-row{background:var(--surface2)}}

/* ───── 1.174.0 — EXERCICES EN VIDÉO (maquettes Foot / Gym / Karaté / Lecteur du 12/10) ───── */
.exo-tabs{display:flex;gap:4px;background:var(--line);padding:4px;border-radius:14px;margin:0 0 12px}
.exo-tabs a{flex:1;text-align:center;padding:10px 6px;font-weight:700;font-size:14px;border-radius:11px;color:var(--muted);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exo-tabs a.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow)}
.exo-set{padding:14px 0 4px}
.exo-set>*:not(.exo-list){margin-left:14px;margin-right:14px}
.exo-bar{flex:1;height:8px;border-radius:99px;background:var(--green-soft);overflow:hidden}.exo-bar span{display:block;height:8px;background:var(--green)}
.exo-list{margin-top:8px}
.exo-row{display:flex;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.exo-row:active{background:var(--surface2)}
.exo-th{position:relative;flex:none;width:92px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--brand-ink),var(--brand));color:var(--brand-ink);background-size:cover;background-position:center}
.exo-th.has{color:#12234a}
.exo-th .pl{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.exo-th .du{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;padding:1px 5px;border-radius:5px}
.exo-th.txt{background:var(--surface2);color:var(--muted);font-size:11px;font-weight:700}
.exo-ck{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.exo-ck.y{background:var(--green);border-color:var(--green)}
.exo-kpi{display:flex;gap:10px;margin:12px 0}
.exo-kpi .card{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.exo-kpi .k{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.exo-kpi b{font-family:var(--display);font-size:22px;color:var(--gold)}
.exo-act{display:flex;gap:10px;margin:14px 0 8px;align-items:stretch}
.exo-act .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-weight:800;font-size:15px}
.exo-act .btn-ghost{width:60px;font-size:22px;padding:0}
.exo-done{flex:1;background:var(--green);color:#fff;border:0}
.exo-done.is-done{background:var(--green-soft);color:var(--green)}
.exo-done:active{transform:scale(.98)}

/* 1.176.0 — CIRCUIT CHRONOMÉTRÉ (assets/exo-circuit.js) : plein écran, sous le lecteur vidéo (z 200) */
.exo-go{display:flex;width:calc(100% - 28px);justify-content:center;align-items:center;gap:8px;margin-top:12px;padding:13px;font-size:16px}
html.circ-on, html.circ-on body{overflow:hidden}
.circ{position:fixed;inset:0;z-index:150;background:var(--ground);display:flex;flex-direction:column;max-width:480px;margin:0 auto;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;overflow-y:auto}
.circ[hidden]{display:none}
.circ-prog{height:5px;background:var(--line);margin:0 -16px}.circ-prog span{display:block;height:5px;background:var(--brand-ink);transition:width .4s}
.circ-top{display:flex;align-items:center;gap:10px;padding:12px 0 10px}
.circ-h{flex:1;min-width:0;display:flex;flex-direction:column}
.circ-title{font-family:var(--display);font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circ-tour{font-size:13px;font-weight:700;color:var(--muted)}
.circ-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer;flex:none}
.circ-stop{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow)}
.circ-stop[hidden]{display:none}.circ-stop span{flex:1;font-weight:700}.circ-stop .btn{padding:8px 12px}
.circ-media{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;flex:none;background:linear-gradient(145deg,var(--brand-ink),var(--brand))}
.circ-ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .3s}
.st-rest .circ-ph,.st-round .circ-ph,.st-ready .circ-ph{filter:grayscale(.5) brightness(.75)}
.circ-vid{position:absolute;left:10px;bottom:10px;border:0;border-radius:99px;background:rgba(255,255,255,.94);color:#12234a;font-weight:800;font-size:13.5px;padding:8px 13px;cursor:pointer}
.circ-vid[hidden]{display:none}
.circ-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 4px 6px;min-height:0}
.circ-k{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--brand-ink)}
.st-rest .circ-k,.st-round .circ-k{color:var(--green)}
.circ-t{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.15;margin-top:2px}
.circ-big{position:relative;width:min(58vw,230px);aspect-ratio:1;margin:12px 0 8px}
.circ-big svg{width:100%;height:100%;transform:rotate(-90deg)}
.circ-big circle{fill:none;stroke-width:9}.circ-bg{stroke:var(--line)}.circ-fg{stroke:var(--brand-ink);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.st-rest .circ-fg,.st-round .circ-fg{stroke:var(--green)}
.circ-n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:clamp(40px,13vw,58px);font-weight:800;font-variant-numeric:tabular-nums}
.is-manual .circ-n{font-size:clamp(30px,10vw,44px)}
.is-paused .circ-n{opacity:.45}
.st-end .circ-n{color:var(--green)}
.circ-ins{font-size:15px;line-height:1.45;color:var(--ink);max-width:36ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.circ-next{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--muted)}
.circ-ctl{display:flex;gap:10px;align-items:center;padding-top:8px}
.circ-ctl .btn{padding:14px 0;font-size:17px}
.circ-prev,.circ-skip{width:58px;flex:none;font-size:22px!important}
.circ-main{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.circ-ctl .btn:disabled{opacity:.35}