/* Palette FC Bursins-Rolle-Perroy — bleu / blanc (couleurs officielles ACVF) */
:root{
  /* L'échelle typographique. Une trentaine de tailles se promenaient dans la
     feuille, à un demi-pixel les unes des autres : personne ne voit la
     différence d'un endroit à l'autre, mais l'ensemble ne tient pas ensemble.
     Onze marches, et rien entre. « inp » vaut 16 px sans quoi le navigateur
     mobile agrandit la page dès qu'on clique dans une case. */
  --t-2xs:10.5px; --t-xs:11.5px; --t-sm:12.5px; --t-md:13.5px; --t-lg:14.5px;
  --t-xl:15px;   --t-inp:16px;  --t-2xl:17px;  --t-h3:18px;   --t-h2:21px;
  --t-disp:26px; --t-num:27px;

  --bg:#F1F5FA; --surface:#FFFFFF; --surface-2:#E7EDF6; --surface-3:#DBE4F0;
  --line:#D5DFEC; --line-2:#B7C7DC;
  --ink:#0F1A2A; --ink-2:#42546B; --ink-3:#667A93;
  --accent:#154C93; --accent-ink:#FFFFFF; --accent-soft:#E2ECF9; --accent-line:#9DBEE6;
  --f1:#154C93; --f1-soft:#E2ECF9;
  --f2:#0E7355; --f2-soft:#DDF0E8;
  --f3:#96560F; --f3-soft:#F7EAD8;
  --f4:#6B3FA0; --f4-soft:#EDE4F7;
  --f5:#0F6E75; --f5-soft:#DCEFF1;
  --f6:#A32B54; --f6-soft:#FAE3EA;
  --f7:#3A4C99; --f7-soft:#E5E8F8;
  --f8:#5C6B12; --f8-soft:#EDF1D6;
  --f9:#44586B; --f9-soft:#E6ECF2;
  --f10:#7A2E86; --f10-soft:#F4E1F6;
  --warn:#96560F; --crit:#9A2530; --crit-soft:#F9E3E5;
  --shadow:0 1px 2px rgba(15,26,42,.07), 0 10px 26px -14px rgba(15,26,42,.26);
  --r:7px;
  --sans:"Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A1018; --surface:#121B26; --surface-2:#182430; --surface-3:#213040;
  --line:#253441; --line-2:#3A4B5C;
  --ink:#E7EEF6; --ink-2:#A3B3C6; --ink-3:#7589A0;
  --accent:#71ABEE; --accent-ink:#06121F; --accent-soft:#14273C; --accent-line:#2C4C6E;
  --f1:#71ABEE; --f1-soft:#14273C;
  --f2:#4FC49B; --f2-soft:#10281F;
  --f3:#DCA45C; --f3-soft:#2B2113;
  --f4:#B79AE0; --f4-soft:#241B33;
  --f5:#56C2CB; --f5-soft:#0E2426;
  --f6:#E88BA6; --f6-soft:#2E1620;
  --f7:#93A3E8; --f7-soft:#191E33;
  --f8:#B7C466; --f8-soft:#21260F;
  --f9:#9FB3C6; --f9-soft:#1A2129;
  --f10:#D69BE0; --f10-soft:#2B172E;
  --warn:#DCA45C; --crit:#E88A90; --crit-soft:#2F1A1D;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  --bg:#0A1018; --surface:#121B26; --surface-2:#182430; --surface-3:#213040;
  --line:#253441; --line-2:#3A4B5C;
  --ink:#E7EEF6; --ink-2:#A3B3C6; --ink-3:#7589A0;
  --accent:#71ABEE; --accent-ink:#06121F; --accent-soft:#14273C; --accent-line:#2C4C6E;
  --f1:#71ABEE; --f1-soft:#14273C;
  --f2:#4FC49B; --f2-soft:#10281F;
  --f3:#DCA45C; --f3-soft:#2B2113;
  --f4:#B79AE0; --f4-soft:#241B33;
  --f5:#56C2CB; --f5-soft:#0E2426;
  --f6:#E88BA6; --f6-soft:#2E1620;
  --f7:#93A3E8; --f7-soft:#191E33;
  --f8:#B7C466; --f8-soft:#21260F;
  --f9:#9FB3C6; --f9-soft:#1A2129;
  --f10:#D69BE0; --f10-soft:#2B172E;
  --warn:#DCA45C; --crit:#E88A90; --crit-soft:#2F1A1D;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t-xl);line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;margin:0;line-height:1.08;text-wrap:balance;letter-spacing:.006em}
h1{font-size:clamp(26px,4.4vw,34px)}
h2{font-size:clamp(20px,3vw,25px)}
h3{font-size:var(--t-h3)}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:3px}
.num{font-family:var(--cond);font-variant-numeric:tabular-nums;font-weight:600}
.lbl{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
.rail{display:none}
.main{min-width:0;padding:0 0 88px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;overflow-x:clip}
/* l'onglet Adresses prend toute la largeur : une adresse se lit d'un trait */
body.large .wrap{max-width:1720px}

.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.crest{flex:0 0 auto;display:block}
.crest-img{object-fit:contain;background:transparent}
.crest-svg{overflow:visible}
.club{font-family:var(--cond);font-weight:700;font-size:var(--t-2xl);line-height:1.05;letter-spacing:.01em}
.club{min-width:0}
.club small{display:block;font-family:var(--sans);font-weight:500;font-size:var(--t-xs);letter-spacing:.01em;color:var(--ink-3);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sp{flex:1}
/* Sur téléphone, la barre du haut garde l'essentiel : l'écusson, la catégorie
   qu'on regarde, l'accès. La langue se règle dans « Mon accès » — avec elle
   dans la barre, le sélecteur de catégorie n'affichait plus que « TOU ». */
.topbar-in .seg.g.court{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topbar-in .seg.g.court::-webkit-scrollbar{display:none}
.topbar-in .seg.g.court button{flex:0 0 auto;padding:7px 10px;min-height:32px}
.topbar-in .cat-sel{flex:0 1 auto;min-width:0;max-width:46vw;min-height:32px;padding:4px 8px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:var(--t-md)}
/* Dans le rail, le sélecteur de catégorie va à la ligne dès que le club en
   tient plus que trois ou quatre — des juniors aux séniors, il y en a vite
   huit — plutôt que de couper « L4 » au bord. */
.ouv{padding:12px 14px;display:grid;gap:8px}
.ouv-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ouv-l{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ouv-n{font-weight:600;flex:0 0 150px;min-width:0}
.ouv-g{padding-left:18px}
.ouv-corps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px}
.reglages2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:900px){.reglages2{grid-template-columns:1fr}}
@media (max-width:720px){.ouv-corps{grid-template-columns:1fr}}
/* les catégories du club, en deux colonnes de cartes */
.cats2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catc{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:5px;min-width:0;background:var(--surface)}
.catc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.catc-h b{font-size:var(--t-lg)}
.catc-h .sp{flex:1 1 auto}
.catc-h .ans{color:var(--ink-2);font-size:var(--t-md)}
.catc-l{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:baseline;font-size:var(--t-md);min-width:0}
.catc-l i{font-style:normal;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-xs);color:var(--ink-3);flex:0 0 64px}
.catc-l span{color:var(--ink-2);overflow-wrap:anywhere}
.catc-n i{flex:0 0 auto}
.catc-n span{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;margin-right:8px}
@media (max-width:720px){.cats2{grid-template-columns:1fr}}
.ouv-bloc{display:grid;gap:6px;min-width:0}
/* une ligne par catégorie : le nom, puis la barre qui remplit le reste ;
   les cases ne se coupent jamais en deux lignes — sur un écran étroit, la
   barre défile plutôt que de replier « Toute la catégorie » */
.portee{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.portee-n{font-weight:600;flex:0 0 130px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portee .seg.g{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto}
.portee .seg.g button{flex:1 0 auto;white-space:nowrap;padding:8px 12px;min-width:52px}
@media(max-width:560px){
  .portee{flex-wrap:wrap}
  .portee-n{flex:1 1 100%}
}
/* la fiche d'une rencontre : la catégorie dans un menu, ses groupes à côté ;
   et, sous la liste, les groupes de la rencontre puis « un autre groupe… » */
.grp-choix{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.grp-choix .cat-sel{flex:1 1 180px;min-width:0;width:auto}
.grp-choix .seg.g{flex:1 1 auto;display:flex}
.grp-choix .seg.g button{flex:1 0 auto;white-space:nowrap;min-width:48px}
.grp-autres{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.grp-autres .chip{cursor:pointer;border:0}
.grp-vue{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grp-vue .seg.g button{white-space:nowrap}
.grp-vue .cat-sel{width:auto;max-width:240px}
.rail .seg.g{display:flex;flex-wrap:wrap;max-width:100%}
.rail .seg.g button{flex:1 0 auto;padding:8px 9px;border-bottom:1px solid var(--line-2);margin-bottom:-1px}
@media(max-width:560px){
  .topbar-in{gap:8px;padding:8px 12px}
  .topbar-in .lg-seg{display:none}
  .topbar-in .club small{display:none}
  .topbar-in .club{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-lg)}
}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--ink-2);width:36px;height:36px;border-radius:var(--r);cursor:pointer;display:grid;place-items:center}
.iconbtn.dan{color:var(--crit);border-color:var(--line-2)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}

/* bottom nav (mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
/* « min-width:0 » sans quoi une entrée courte — Kit — se laisse comprimer par
   ses voisines : les colonnes doivent rester égales, sinon la barre danse d'une
   page à l'autre. */
.tabbar button{background:none;border:0;padding:9px 4px 10px;display:grid;justify-items:center;gap:3px;cursor:pointer;color:var(--ink-3);min-height:60px;min-width:0}
.tabbar button span{font-family:var(--cond);font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tabbar.serre button{padding-inline:2px}
/* à sept entrées, l'intitulé se mesure à sa colonne : il rétrécit avec
   l'écran plutôt que de mordre sur son voisin, et ne déborde jamais */
.tabbar.serre button{overflow:hidden}
.tabbar.serre button span{font-size:clamp(7.5px,2.3vw,10.5px);letter-spacing:0;width:max-content;max-width:none;transform-origin:center}
.tabbar button[aria-current="page"]{color:var(--accent)}
.tabbar button[aria-current="page"] svg{stroke-width:2.3}

@media(min-width:900px){
  .shell{grid-template-columns:238px 1fr}
  .rail{display:block;border-right:1px solid var(--line);background:var(--surface);position:sticky;top:0;height:100vh;padding:16px 12px;overflow:auto}
  .rail .brand{display:flex;gap:10px;align-items:center;padding:4px 6px 18px}
  .rail nav{display:grid;gap:3px}
  .rail nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;padding:11px 12px;border-radius:var(--r);cursor:pointer;color:var(--ink-2);font-family:var(--cond);font-weight:600;font-size:var(--t-inp);letter-spacing:.03em;text-transform:uppercase}
  .rail nav button:hover{background:var(--surface-2);color:var(--ink)}
  .rail nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
  .tabbar{display:none}
  .topbar{display:none}
  .main{padding-bottom:40px}
}

/* ---------- page header ---------- */
.phead{padding:22px 0 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:18px}
.phead .sub{color:var(--ink-2);font-size:var(--t-lg);margin-top:4px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);padding:9px 14px;border-radius:var(--r);cursor:pointer;font-weight:600;font-size:var(--t-lg);min-height:40px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.dan{color:var(--crit);border-color:var(--line-2)}
.btn.dan:hover{background:var(--crit-soft)}
.btn.sm{padding:6px 10px;min-height:32px;font-size:var(--t-md)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.inp,select.inp,textarea.inp{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;min-height:40px}
/* Sous 16 px, iOS agrandit la page dès qu'on touche un champ — et la page
   reste ensuite plus large que l'écran, à faire glisser de côté. */
@media(max-width:820px){
  .inp,select.inp,textarea.inp,input,select,textarea{font-size:var(--t-inp)}
  .inp::placeholder{font-size:var(--t-xl)}
}
textarea.inp{min-height:80px;resize:vertical;line-height:1.5}
.inp::placeholder{color:var(--ink-3)}
/* Dans une grille à deux colonnes, un champ pourvu d'une aide et un champ
   sans aide n'ont pas la même hauteur : sans « align-content:start », les
   rangées s'étirent et les saisies se retrouvent décalées l'une par rapport
   à l'autre. */
.field{display:grid;gap:5px;align-content:start;min-width:0}
/* Les champs date et heure de Chrome ont une largeur intrinsèque plus grande
   que la colonne : sans « min-width:0 », ils débordent de la fenêtre sur
   téléphone au lieu de se réduire. */
.grid2>*,.grid3>*{min-width:0}
.inp{max-width:100%}
.field>.lbl{font-size:var(--t-xs)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
/* Les filtres portent un intitulé au-dessus, la recherche non : alignés au
   centre, les deux ne tombaient pas sur la même ligne et la barre paraissait
   de travers. On aligne sur le bas — la ligne des champs, celle qu'on lit. */
.toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin-bottom:16px}
/* un filtre porte son nom : « Groupe », « Statut »… */
.filtre{display:grid;gap:4px}
.filtre .lbl{font-size:var(--t-xs)}
/* Sur téléphone, la barre de filtres se replie derrière un bouton : le
   premier écran doit montrer des données, pas des réglages. */
.filtres-bt{display:none}
@media(max-width:560px){
  .filtres-bt{display:inline-flex}
  .toolbar.repliee{display:none}
  .toolbar .search{flex:1 1 100%}
  .phead .sub{display:none}
}
.filtres-bt .n{background:var(--accent);color:var(--accent-ink);border-radius:999px;
  min-width:19px;height:19px;display:grid;place-items:center;font-size:var(--t-xs);font-weight:700;
  font-family:var(--cond);padding:0 5px}
/* pastilles de filtre actif, refermables */
.actifs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:10px}
.pastille{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);
  color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;
  padding:5px 12px;font-size:var(--t-sm);font-weight:600;cursor:pointer;min-height:32px}
.pastille b{font-weight:700;font-size:var(--t-md);line-height:1}
.pastille:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* provenance d'un tournoi, dans la fenêtre de composition */
.prov{display:flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--ink-3);
  margin:0 0 2px}
.search{position:relative;flex:1 1 210px;min-width:170px}
/* dans une barre de filtres, la recherche garde sa largeur : ce qui apparaît à
   sa droite ne la rétrécit pas */
.toolbar .search{flex:0 0 250px}
.filtre.degre{min-width:226px}
.filtre.degre.attente .seg{opacity:.55}
@media(max-width:560px){.toolbar .search{flex:1 1 100%}.filtre.degre{min-width:0}}
.search .inp{padding-left:34px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3)}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
/* un choix segmenté posé dans un champ occupe la largeur du champ */
.field .seg{display:flex;width:100%}
.field .seg button{flex:1}
.seg button{background:none;border:0;padding:8px 13px;cursor:pointer;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-lg);color:var(--ink-2);min-height:40px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.seg.g button[aria-pressed="true"][data-g="F1"]{background:var(--f1-soft);color:var(--f1)}
.seg.g button[aria-pressed="true"][data-g="F2"]{background:var(--f2-soft);color:var(--f2)}
.seg.g button[aria-pressed="true"][data-g="F3"]{background:var(--f3-soft);color:var(--f3)}
.seg.g button[aria-pressed="true"][data-g="F4"]{background:var(--f4-soft);color:var(--f4)}
.seg.g button[aria-pressed="true"][data-g="F5"]{background:var(--f5-soft);color:var(--f5)}
.seg.g button[aria-pressed="true"][data-g="F6"]{background:var(--f6-soft);color:var(--f6)}
.seg.g button[aria-pressed="true"][data-g="F7"]{background:var(--f7-soft);color:var(--f7)}
.seg.g button[aria-pressed="true"][data-g="F8"]{background:var(--f8-soft);color:var(--f8)}
.seg.g button[aria-pressed="true"][data-g="F9"]{background:var(--f9-soft);color:var(--f9)}
.seg.g button[aria-pressed="true"][data-g="F10"]{background:var(--f10-soft);color:var(--f10)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:var(--t-sm);padding:3px 8px;border-radius:4px;background:var(--surface-3);color:var(--ink-2)}
.chip.F1{background:var(--f1-soft);color:var(--f1)}
.chip.F2{background:var(--f2-soft);color:var(--f2)}
.chip.F3{background:var(--f3-soft);color:var(--f3)}
.chip.F4{background:var(--f4-soft);color:var(--f4)}
.chip.F5{background:var(--f5-soft);color:var(--f5)}
.chip.F6{background:var(--f6-soft);color:var(--f6)}
.chip.F7{background:var(--f7-soft);color:var(--f7)}
.chip.F8{background:var(--f8-soft);color:var(--f8)}
.chip.F9{background:var(--f9-soft);color:var(--f9)}
.chip.F10{background:var(--f10-soft);color:var(--f10)}
.chip.out{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}
.chip.warn{background:var(--crit-soft);color:var(--crit)}
.chip.ok{background:var(--accent-soft);color:var(--accent)}
/* étapes d'une commande : un numéro, parce que l'ordre compte */
.sect.etape .no{font-family:var(--cond);font-weight:700;font-size:var(--t-md);width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;align-self:center}
.sect .sect-h{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
/* récapitulatif de commande */
.recap{display:grid;gap:12px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px;margin:0;padding:12px 14px;background:var(--surface-2);border-radius:var(--r)}
.rc-grid div{min-width:0}
.rc-grid dt{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:var(--t-2xs);color:var(--ink-3)}
.rc-grid dd{margin:0;font-size:var(--t-md);font-weight:600;overflow-wrap:anywhere}
.rc-t th.n,.rc-t td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-t tfoot td{color:var(--ink-3);font-size:var(--t-md);padding:6px 10px;border-bottom:0;border-top:1px solid var(--line)}
.rc-t tfoot tr:first-child td{padding-top:9px}
.rc-t tfoot tr.tot td{color:var(--ink);font-size:var(--t-lg);border-top:1px solid var(--line-2)}
.rc-t tfoot tr.tot b{font-family:var(--cond);font-size:var(--t-h3);color:var(--accent)}
.rc-t .rc-a{display:flex;align-items:center;gap:10px;min-width:0}
.rc-t .rc-a span{display:grid}
.rc-t i.rc-opt,.rc-t .rc-a i{display:block;font-style:normal;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-2xs);color:var(--ink-3)}
.rc-rem{margin:0;font-size:var(--t-md);color:var(--ink-2)}
.rc-rem b{margin-right:6px}
.recap.compact .rc-grid{padding:10px 12px}
.kmanque{font-size:var(--t-md);color:var(--crit)}
.tag{display:inline-block;font-size:var(--t-sm);padding:2px 7px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.cards{display:grid;gap:12px}
.cards.two{grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr))}
.actions{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.actions .gap{display:none}
@media(min-width:560px){.actions{flex-wrap:nowrap}.actions .gap{display:block;flex:1}}
.cards.three{grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
.sect{margin:26px 0 12px;display:flex;align-items:baseline;gap:10px}
/* Un titre de section n'est pas un titre de page : à la même taille, les deux
   se disputaient le regard et l'on ne savait plus où l'on était. */
.sect h2{margin:0;font-size:clamp(18px,2.2vw,21px)}
.sect .count{font-family:var(--cond);font-weight:600;color:var(--ink-3);font-size:var(--t-xl)}
.rule{height:1px;background:var(--line);flex:1}

/* fixture row */
.fix{display:flex;gap:14px;padding:14px;align-items:flex-start}
.datebox{flex:0 0 58px;text-align:center;border-right:1px solid var(--line);padding-right:12px;align-self:stretch}
.datebox .d{font-family:var(--cond);font-weight:700;font-size:var(--t-num);line-height:1;font-variant-numeric:tabular-nums}
.datebox .m,.datebox .w{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs);color:var(--ink-3)}
.datebox .w{color:var(--ink-2)}

/* colonne de gauche colorée par groupe sur les tournois */
.fix.grp{gap:0}
.fix.grp .datebox{flex:0 0 76px;padding:0 12px 0 0;border-right:2px solid var(--g);margin-right:14px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px}
.gbadge{display:block;background:var(--g);color:var(--bg);font-family:var(--cond);font-weight:700;
  font-size:var(--t-xl);letter-spacing:.12em;line-height:1;padding:5px 0 4px;border-radius:4px;margin-bottom:7px}
.fix.grp .datebox .d{font-size:var(--t-num)}
.fix.grp .datebox .w{margin-top:1px}
.fix-body{flex:1;min-width:0;display:grid;gap:6px}
.fix-body>*{min-width:0}
.fix-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fix-title h3{font-size:var(--t-h3)}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-2);font-size:var(--t-md)}
.meta i{font-style:normal;color:var(--ink-3)}

/* next session hero */
.hero{background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.hero .bar{background:var(--accent);color:var(--accent-ink);padding:7px 14px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-md);display:flex;justify-content:space-between;gap:10px;align-items:center}
.hero .bd{padding:16px}

/* player row */
.prow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-3);flex:0 0 auto;display:grid;place-items:center;font-family:var(--cond);font-weight:700;font-size:var(--t-lg);color:var(--ink-3);border:1px solid var(--line)}
.pname{flex:1;min-width:0}
.pname b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname span{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.gsel{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-md);border:1px solid var(--line-2);border-radius:5px;background:var(--surface);padding:6px 6px;min-height:36px;cursor:pointer}
.gsel.F1{color:var(--f1);background:var(--f1-soft);border-color:transparent}
.gsel.F2{color:var(--f2);background:var(--f2-soft);border-color:transparent}
.gsel.F3{color:var(--f3);background:var(--f3-soft);border-color:transparent}
.gsel.F4{color:var(--f4);background:var(--f4-soft);border-color:transparent}
.gsel.F5{color:var(--f5);background:var(--f5-soft);border-color:transparent}
.gsel.F6{color:var(--f6);background:var(--f6-soft);border-color:transparent}
.gsel.F7{color:var(--f7);background:var(--f7-soft);border-color:transparent}
.gsel.F8{color:var(--f8);background:var(--f8-soft);border-color:transparent}
.gsel.F9{color:var(--f9);background:var(--f9-soft);border-color:transparent}
.gsel.F10{color:var(--f10);background:var(--f10-soft);border-color:transparent}

/* exercise card */
.exc{display:flex;flex-direction:column;overflow:hidden}
.exc img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2);display:block;border-bottom:1px solid var(--line)}
.exc .bd{padding:11px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.exc h3{font-size:var(--t-2xl)}
.exc .dsc{font-size:var(--t-md);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.exc .ft{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:4px}

/* modal */
.ovl{position:fixed;inset:0;background:rgba(10,18,14,.55);backdrop-filter:blur(2px);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:700px){.ovl{align-items:center;padding:24px}}
.mdl{background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 0 0;width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
@media(min-width:700px){.mdl{border-radius:10px}}
.mdl.wide{max-width:1000px}
.mdl-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);border-radius:12px 12px 0 0}
.mdl-h h2{flex:1;font-size:var(--t-h2)}
/* Une grille sans colonne déclarée prend la largeur de son plus large enfant :
   un seul champ trop large et toute la fenêtre débordait sur téléphone. */
.mdl-b{padding:16px;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.mdl-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:var(--surface)}
.mdl-f .sp{flex:1}

/* pick list */
.picker{border:1px solid var(--line);border-radius:var(--r);max-height:300px;overflow:auto;background:var(--surface)}
.pick{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line);cursor:pointer;min-height:46px}
.pick:last-child{border-bottom:0}
.pick:hover{background:var(--surface-2)}
.pick input{width:19px;height:19px;accent-color:var(--accent);flex:0 0 auto}

/* selected exercise item (drag) */
.dnd{display:flex;gap:10px;align-items:flex-start;padding:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.dnd.drag{opacity:.4}
.dnd.over{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.dnd img{width:88px;height:66px;object-fit:cover;border-radius:5px;flex:0 0 auto;background:var(--surface-2)}
.handle{cursor:grab;color:var(--ink-3);padding:4px 2px;touch-action:none;align-self:center}
.ord{font-family:var(--cond);font-weight:700;font-size:var(--t-xl);color:var(--ink-3);min-width:17px;text-align:right;align-self:center;font-variant-numeric:tabular-nums}

/* drop zone */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:16px;text-align:center;background:var(--surface-2);display:grid;gap:6px;justify-items:center}
.drop.ok{border-color:var(--accent-line);background:var(--accent-soft)}
.drop p{font-size:var(--t-md);color:var(--ink-2);max-width:44ch}

/* canvas */
.cvwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cvbox{aspect-ratio:1000/700;max-width:100%;max-height:100%;margin:auto;line-height:0}
.draw{display:block;width:100%;height:100%;touch-action:none;background:#fff;border-radius:4px;cursor:crosshair}
/* L'atelier occupe la fenêtre : le terrain doit tenir en entier, sans défilement. */
.mdl.atelier{max-width:1220px;height:min(95vh,960px)}
.mdl.atelier .mdl-b{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:12px}
.palette{display:flex;gap:6px;overflow-x:auto;flex:0 0 auto;padding-bottom:3px}
.palette .tool{flex:0 0 auto;width:auto;min-width:62px;max-width:74px;height:52px;display:grid;grid-template-rows:auto auto;gap:1px;place-items:center;padding:3px 6px}
.palette .tool span{font-size:var(--t-2xs);line-height:1.05;text-align:center;letter-spacing:.01em;overflow:hidden}
.palette .sep{flex:0 0 auto;width:1px;background:var(--line-2);margin:4px 3px}
.props{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 9px}
.props input[type=range]{width:96px;accent-color:var(--accent)}
.swatch.sm{width:24px;height:24px;border-width:2px}
/* repères alphabétiques dans le contingent */
.lettre{position:sticky;top:0;z-index:1;background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:5px 14px;font-family:var(--cond);font-weight:700;font-size:var(--t-lg);letter-spacing:.08em;color:var(--ink-3)}
.prow+.lettre{border-top:1px solid var(--line)}
/* onglets d'une page — une barre par ligne. « .seg » est inline-flex, ce qui
   collait deux barres voisines l'une contre l'autre : les sous-onglets du
   contingent se rangeaient au bout de « Club · Contingent · … », comme s'ils
   en faisaient partie. Une barre d'onglets est une ligne de la page. */
.seg.onglets{display:flex;width:fit-content;max-width:100%;margin-bottom:18px}
.seg.onglets+.seg.onglets{margin-top:-8px}
/* trois onglets ne tiennent pas sur 390 px : ils défilent plutôt que de
   déborder, et le libellé le plus long se raccourcit */
@media(max-width:560px){
  .seg.onglets{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg.onglets::-webkit-scrollbar{display:none}
  .seg.onglets button{white-space:nowrap;flex:0 0 auto;padding:9px 12px}
  .seg.onglets .long{display:none}
  .seg.onglets .court{display:inline}
}
.seg.onglets button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px}
.seg.onglets .court{display:none}
/* tableau de bord */
.bord{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));margin-bottom:8px}
.tuile{display:flex;flex-direction:column;overflow:hidden}
.tuile-h{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-md)}
.tuile-h .num{margin-left:auto;text-transform:none;letter-spacing:0;opacity:.9;font-size:var(--t-sm)}
.tuile-b{padding:14px;display:grid;gap:5px;flex:1;align-content:start}
/* la tuile entière est un bouton : elle mène à la page où l'on agit */
.tuile-clic{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:0;
  padding:0;color:inherit;font:inherit;cursor:pointer;flex:1}
.tuile-clic:hover .tuile-b{background:var(--accent-soft)}
.tuile-clic:hover .tuile-go{color:var(--accent)}
.tuile-clic:focus-visible{outline:2.5px solid var(--accent);outline-offset:-3px;border-radius:var(--r)}
.tuile-go{font-size:var(--t-sm);color:var(--ink-3);margin-top:6px}
/* un bouton qui efface pour de bon : rouge plein, jamais bleu */
.btn.pri.dan{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.pri.dan:hover{filter:brightness(1.08);background:var(--crit)}
.tuile-b h3{font-size:var(--t-h2)}
.meta-l{font-size:var(--t-md);color:var(--ink-2)}
.alerte{display:flex;align-items:center;gap:6px;font-size:var(--t-md);color:var(--warn);margin-top:3px}
.catmix{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  padding:11px 13px;margin:0 0 12px;border:1px solid var(--warn);border-left-width:3px;
  background:var(--surface);border-radius:var(--r)}
.catmix b{display:block;font-size:var(--t-lg)}
.catmix span{display:block;font-size:var(--t-md);color:var(--ink-2);margin-top:2px}
.ok{display:flex;align-items:center;gap:6px;font-size:var(--t-md);color:var(--f2);margin-top:3px}
.tuile-f{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
.chantier{display:flex;align-items:center;gap:13px;padding:13px 14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);width:100%;min-height:56px;color:inherit}
.chantier:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.chantier .n{font-family:var(--cond);font-weight:700;font-size:var(--t-num);line-height:1;color:var(--accent);min-width:34px}
.chantier .txt{display:grid;gap:1px;flex:1;min-width:0}
.chantier .txt b{font-size:var(--t-lg)}
.chantier .txt i{font-style:normal;font-size:var(--t-sm);color:var(--ink-3)}
.chantier svg{flex:0 0 auto;color:var(--ink-3)}
@media(max-width:560px){.tuile-b h3{font-size:var(--t-h3)}}
/* une ligne par degré, dans la tuile des tournois */
.trow{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow-b{flex:1;min-width:0;display:grid;gap:2px}
.trow-b b{font-size:var(--t-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-b span{font-size:var(--t-sm);color:var(--ink-3)}
.trow-b .alerte,.trow-b .ok{font-size:var(--t-sm);margin-top:1px}
.trow-a{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.acvf-coller{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.acvf-etapes ol{margin:4px 0 0;padding-left:20px;font-size:var(--t-md);color:var(--ink-2);display:grid;gap:2px}
.acvf-coller textarea{min-height:64px;font-size:var(--t-md)}
.acvf-attente{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:10px 12px}
.acvf-bilan{font-weight:600;color:var(--ink)}
.acvf-sans td{background:var(--f3-soft)}
.signet{font-weight:600;border:1px dashed var(--accent-line);border-radius:6px;padding:2px 8px;background:var(--accent-soft);cursor:grab}
.fix-adv{margin:0 0 4px;font-size:var(--t-md);color:var(--ink-2)}
.fix-adv b{color:var(--ink)}
/* la carte d'une rencontre : une ligne par fait, l'icône devant */
.faits{display:grid;gap:5px;font-size:var(--t-md);color:var(--ink-2)}
.faits>div{display:flex;gap:8px;align-items:flex-start;min-width:0}
.faits>div>span{min-width:0;overflow-wrap:anywhere}
.faits svg{flex:0 0 auto;margin-top:2px;color:var(--ink-3)}
.faits i{font-style:normal;color:var(--ink-3)}
.faits b{color:var(--ink);font-weight:600}
.faits .lien{white-space:nowrap}
.trow-clic{cursor:pointer;border-radius:6px;margin:-4px -6px;padding:4px 6px}
.trow-clic:hover,.trow-clic:focus-visible{background:var(--surface-2);outline:none}
.gbadge2{font-family:var(--cond);font-weight:700;font-size:var(--t-lg);letter-spacing:.04em;
  padding:4px 8px;border-radius:var(--r);flex:0 0 auto;min-width:36px;text-align:center}
.gbadge2.F1{background:var(--f1-soft);color:var(--f1)}
.gbadge2.F2{background:var(--f2-soft);color:var(--f2)}
.gbadge2.F3{background:var(--f3-soft);color:var(--f3)}
.gbadge2.F4{background:var(--f4-soft);color:var(--f4)}
.gbadge2.F5{background:var(--f5-soft);color:var(--f5)}
.gbadge2.F6{background:var(--f6-soft);color:var(--f6)}
.gbadge2.F7{background:var(--f7-soft);color:var(--f7)}
.gbadge2.F8{background:var(--f8-soft);color:var(--f8)}
.gbadge2.F9{background:var(--f9-soft);color:var(--f9)}
.gbadge2.F10{background:var(--f10-soft);color:var(--f10)}
@media(max-width:420px){.trow{gap:8px;padding:10px}.trow-a .btn.sm{padding:6px 9px}}
.sect-cmd{margin-bottom:16px}
.sect-cmd .sub{color:var(--ink-2);font-size:var(--t-lg);margin-top:4px}
.cmd-h{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:13px 14px;cursor:pointer;color:inherit;font:inherit;text-align:left}
.cmd-h:hover{background:var(--surface-2)}
.cmd-h b{font-size:var(--t-xl)}
.toolbar.cmd-f{margin-bottom:10px}
.cmd-f .seg{flex-wrap:wrap}
.toolbar .search{align-self:flex-end}
.cmd-lot{display:flex;gap:6px;flex-basis:100%;justify-content:flex-end}
.cmd-x{display:flex;align-items:center;padding:0 4px 0 2px;cursor:pointer}
.cmd-x input{width:19px;height:19px;accent-color:var(--accent);cursor:pointer;margin:0}
.cmd-n{font-family:var(--cond);font-weight:700;font-size:var(--t-sm);color:var(--ink-3);
  letter-spacing:.04em;flex:0 0 auto}
.cmd-l.choisi{background:var(--accent-soft)}
.cmd-l{border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center}
.cmd-l>.cmd-c,.cmd-l>.ovl{grid-column:1/-1}
.cmd-l.fait .cmd-r b{color:var(--ink-3)}
.cmd-r{display:flex;gap:10px;align-items:center;width:100%;background:none;border:0;
  padding:11px 2px;cursor:pointer;color:inherit;font:inherit;text-align:left;min-height:44px}
.cmd-r:hover{background:var(--surface-2)}
.cmd-r b{font-size:var(--t-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.cmd-d{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.cmd-a{font-size:var(--t-md);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-c{padding:2px 2px 12px;display:grid;gap:10px}
.cmd-c pre{margin:0;font-family:var(--sans);font-size:var(--t-md);color:var(--ink-2);
  white-space:pre-wrap;background:var(--surface-2);padding:10px 12px;border-radius:var(--r)}
.cmd-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:560px){.cmd-a{display:none}.cmd-r b{max-width:60%}}
.suite{background:var(--surface-2);border-radius:var(--r);padding:12px 14px}
.suite .lbl{display:block;margin-bottom:6px}
.suite ol{margin:0;padding-left:20px;display:grid;gap:4px}
.suite li{font-size:var(--t-lg);color:var(--ink-2)}
.suite li b{color:var(--ink)}
/* édition du catalogue */
.kedit{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.kedit.masque{opacity:.6;border-style:dashed}
/* Deux photos par article, l'une sous l'autre : la principale et la seconde,
   chacune avec son bouton et sa corbeille. */
.kedit-i{flex:0 0 auto;display:grid;gap:10px;justify-items:center;align-content:start;width:112px}
.kedit-u{display:grid;gap:5px;justify-items:center;width:100%}
.kedit-i img{width:88px;height:auto;max-height:110px;object-fit:contain}
.kedit-v{font-size:var(--t-sm);color:var(--ink-3);height:60px;display:grid;place-items:center;
  text-align:center;line-height:1.35}
.kedit-ub{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap}
.kedit-ub .iconbtn{width:30px;height:30px}
.kedit-b{flex:1;min-width:0;display:grid;gap:8px}
.kedit-p{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.kedit-p label{display:flex;gap:6px;align-items:center;font-size:var(--t-md);color:var(--ink-2)}
.kedit-p .inp{width:82px;min-height:34px;padding:5px 8px}
.kedit-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:560px){.kedit{flex-direction:column}.kedit-i{width:auto;justify-items:start}}

/* rappel « à prévoir », côté parents */
.prevoir{background:var(--surface-2);border-radius:var(--r);padding:10px 12px;margin-top:8px;display:grid;gap:3px}
.prevoir .lbl{font-size:var(--t-xs);margin-bottom:2px}
.prevoir p{font-size:var(--t-md);color:var(--ink-2)}
.prevoir p b{color:var(--ink);font-weight:600}

/* ---------- commande de matériel ---------- */
/* Les cartes gardent la même hauteur quoi qu'affiche le prix : passer des
   tailles junior aux tailles adulte change les montants, pas la mise en page. */
.kit{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  margin-bottom:26px}
/* à deux colonnes ou plus, les cartes d'une rangée s'alignent ; sur une
   seule colonne, ce serait du vide inutile sous les articles courts */
@media(min-width:700px){.kit{grid-auto-rows:1fr}}
.kart{display:flex;gap:14px;padding:14px;align-items:stretch;height:100%}
.kart.prise{border-color:var(--accent-line);background:var(--accent-soft)}
.kimg{flex:0 0 auto;align-self:flex-start;display:flex;gap:4px;align-items:flex-start;background:var(--surface);
  border-radius:var(--r);padding:4px}
.kimg img{width:74px;height:auto;max-height:120px;object-fit:contain;display:block;
  cursor:zoom-in;transition:transform .18s ease}
.kimg img:hover,.kimg img:focus-visible{transform:scale(1.16)}
@media(prefers-reduced-motion:reduce){.kimg img{transition:none}}
.kimg img+img{width:44px}
.kbd{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.kbd h3{font-size:var(--t-2xl);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kbd p{font-size:var(--t-md);color:var(--ink-2)}
/* prix et part du club sur deux lignes fixes : un chiffre de plus ne peut
   pas faire passer la phrase à la ligne */
.kprix{display:grid;gap:1px;margin-top:2px}
.kp-l{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.kprix b{font-family:var(--cond);font-size:var(--t-h2);color:var(--accent);font-variant-numeric:tabular-nums}
.kprix s{font-family:var(--cond);font-size:var(--t-xl);color:var(--ink-3);text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums}
.kprix span{font-size:var(--t-sm);color:var(--ink-3)}
/* Taille et quantité se lisent avant d'ajouter : les réglages et les boutons
   forment un pied de carte, collé en bas, identique d'une carte à l'autre. */
.kfin{margin-top:auto;padding-top:8px;display:grid;gap:7px}
/* Deux colonnes, deux rangées, pour toutes les cartes : ce qu'on prend et la
   quantité en haut, les tailles en dessous. Un article d'une seule pièce laisse
   la case de droite vide plutôt que de tout remonter — les boutons se
   retrouvent ainsi à la même hauteur d'une carte à l'autre, et la rangée ne
   sautille plus quand on change de choix. */
/* « dont 2 coachs sur 3 » : le rappel que le sondage est commun, discret à
   côté des compteurs, jamais un second compteur */
.rrep .dont,.sond-c .dont{display:inline-flex;gap:4px;align-items:center;font-size:var(--t-sm);
  color:var(--ink-3);white-space:nowrap}
.rrep .dont svg,.sond-c .dont svg{opacity:.7}
.kchoix{display:grid;gap:7px}
/* deux rangées, toujours : ce qu'on prend et la quantité, puis les tailles */
.krow{display:flex;gap:8px;align-items:flex-end}
.krow>.kf{flex:1 1 0;min-width:0}
.krow>.kf.kq{flex:0 0 76px}
/* Le training se prend entier ou par moitié : le choix est un réglage comme
   les autres, sur la même rangée que les tailles. Il passe devant elles — il
   décide desquelles on aura besoin — et prend la ligne entière, parce que
   « Veste + Pantalon » ne tient pas dans une demi-largeur de carte. */
.kf.kp{min-width:0}
/* la ligne réservée sur les articles d'une seule pièce : elle ne dit rien,
   elle tient la place, et les réglages s'alignent d'une carte à l'autre */
.kf.kp.vide{height:0;flex:1 1 0}
/* la taille d'une pièce qu'on ne prend pas reste à sa place, éteinte */
.kf.eteint>span{opacity:.45}
.kf.eteint select{opacity:.5;cursor:not-allowed}
.kf{display:grid;gap:2px;min-width:0}
.kf>span{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:var(--t-xs);color:var(--ink-3)}
/* la taille prend la place qui reste, la quantité garde la sienne : les deux
   réglages tiennent sur une ligne, même dans une carte étroite */
.kf select{width:100%;min-width:0;min-height:36px;padding:5px 9px}
.kf input[type=number]{width:100%;min-height:36px;padding:5px 9px}
.kact{display:flex;gap:7px;flex-wrap:nowrap;align-items:center}
.kact .btn.sm{flex:1 1 0;min-width:0;justify-content:center;padding-inline:8px;white-space:nowrap}
/* la place du bouton « Retirer » est réservée même quand l'article n'est pas
   pris : sans cela, ajouter un article décalerait toute la rangée de cartes */
.kact .btn.fantome{visibility:hidden;pointer-events:none}
.ktu{align-self:flex-end}
.ktu b{font-family:var(--cond);font-size:var(--t-xl);color:var(--ink-2);line-height:36px}
/* le panier : une ligne par article, la miniature pour reconnaître, le montant
   à droite, et la corbeille au bout — retirer doit être aussi simple qu'ajouter */
.panier{padding:0;margin-bottom:6px}
.pline{gap:12px;align-items:center}
.pmini{width:38px;height:38px;object-fit:contain;background:var(--surface);border-radius:8px;
  padding:2px;flex:0 0 auto}
.pmt{display:grid;justify-items:end;gap:0;margin-left:auto;text-align:right}
.pmt b{font-family:var(--cond);font-size:var(--t-2xl);color:var(--accent);font-variant-numeric:tabular-nums}
.pmt s{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* deux lignes réservées d'avance : le message change, la carte ne bouge pas —
   les boutons « Ajouter » restent alignés d'une carte à l'autre */
/* Deux lignes, ni plus ni moins : la phrase change de longueur d'une langue à
   l'autre, la carte ne doit pas changer de taille pour autant. */
.kdit{font-size:var(--t-sm);line-height:1.35;color:var(--ink-3);margin:0;min-height:1.35em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kdit.ok{color:var(--accent)}
.inp.manque{border-color:var(--crit)}
.lienp{padding:16px;display:grid;gap:14px;max-width:820px}
.lienp-g{display:grid;gap:12px}
@media(min-width:640px){.lienp-g{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.lienp-r{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.lienp-qr{flex:0 0 auto;line-height:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:8px}
.lienp-c{flex:1;min-width:min(280px,100%);display:grid;gap:8px;align-content:start}
.lienp-c .inp{font-size:var(--t-md)}
.lienp-b{display:flex;gap:8px;flex-wrap:wrap}
.lienp-err{font-size:var(--t-md);color:var(--crit);max-width:52ch}
.lienp-msg{white-space:pre-wrap;font-size:var(--t-md);line-height:1.55;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ktotal{position:sticky;bottom:0;z-index:20;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 16px;margin-top:18px;box-shadow:var(--shadow)}
.ktotal>div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ktotal .num{font-size:var(--t-num);color:var(--accent)}
.ktotal span{font-size:var(--t-md);color:var(--ink-2)}
@media(max-width:560px){.ktotal{position:static}}

/* ---------- tableau des présences aux séances ---------- */
.pres-t{overflow:auto;max-height:min(70vh,660px);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface)}
.pres-t table{border-collapse:separate;border-spacing:0;font-size:var(--t-md)}
.pres-t th,.pres-t td{border-bottom:1px solid var(--line);white-space:nowrap}
/* La cellule reste une cellule — sinon la colonne figée ne suit plus la
   hauteur des lignes ; c'est le contenu, à l'intérieur, qui est en drapeau. */
.pres-nom{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;
  padding:0;min-width:200px;border-right:1px solid var(--line)}
.pres-nom>span{display:flex;gap:8px;align-items:center;padding:7px 12px 7px 10px;min-height:34px}
.pres-nom .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres-t thead th{position:sticky;top:0;z-index:3;background:var(--surface-2);
  font-family:var(--cond);font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  padding:7px 6px;text-align:center;border-bottom:1px solid var(--line-2)}
.pres-t thead .pres-nom{z-index:4;background:var(--surface-2)}
.pres-d{font-variant-numeric:tabular-nums;min-width:38px}
.pres-c{text-align:center;padding:5px 6px;color:var(--ink-3);font-size:var(--t-lg)}
.pres-c.oui{color:var(--f2);font-weight:700}
.pres-c.non{color:var(--line-2)}
.pres-c.som{font-family:var(--cond);font-weight:700;color:var(--ink-2);background:var(--surface-2)}
/* un en-tête de colonne qui trie reste un en-tête : même graisse, même
   couleur, seulement le curseur et le soulignement au survol le trahissent */
/* une colonne de tournoi se repère sans se lire : une teinte et un T en exposant */
.pres-d.tour{background:var(--accent-soft);color:var(--accent)}
.pres-d i{font-style:normal;font-size:.72em;font-weight:700;vertical-align:super;margin-left:1px}
/* le choix de langue : trois boutons, jamais un menu — on doit voir d'un coup
   d'œil dans quelle langue on est, et en changer d'un seul geste */
.lg-seg{width:100%}
.lg-seg button{flex:1;justify-content:center}
.lg-seg.sm button{font-size:var(--t-sm);padding:6px 4px}
/* Dans la barre du haut, le même groupe doit rester compact : il partage la
   ligne avec l'écusson et deux icônes, y compris sur un téléphone. */
.topbar-in .lg-seg{width:auto;flex:0 0 auto}
.topbar-in .lg-seg button{padding:6px 7px;min-height:32px}
.lg-btn{font-family:var(--cond);font-weight:700;font-size:var(--t-sm);letter-spacing:.06em}
.tri-th{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  letter-spacing:inherit;text-transform:inherit}
.tri-th:hover{text-decoration:underline}
.pres-tot{position:sticky;right:0;z-index:2;background:var(--surface);text-align:right;
  padding:5px 10px;border-left:1px solid var(--line);min-width:74px}
.pres-tot span{display:block;font-size:var(--t-xs);color:var(--ink-3)}
.pres-tot.haut b{color:var(--f2)}
.pres-tot.bas b{color:var(--warn)}
.pres-t tfoot th,.pres-t tfoot td{position:sticky;bottom:0;background:var(--surface-2);
  border-top:1px solid var(--line-2);font-weight:700}
.pres-t tbody tr:hover td{background:var(--accent-soft)}
@media(max-width:560px){.pres-nom{min-width:150px}.pres-nom .av{display:none}}

/* présences à un tournoi */
.pres{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--surface);flex:0 0 auto}
.pres button{background:none;border:0;border-right:1px solid var(--line);padding:5px 9px;min-width:36px;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-3);cursor:pointer;min-height:32px;font-family:var(--sans)}
.pres button:last-child{border-right:0}
.pres .ct{display:none}
.pres button:hover{background:var(--surface-2);color:var(--ink)}
.pres button[aria-pressed="true"].p-rien{background:var(--surface-3);color:var(--ink-2)}
.pres button[aria-pressed="true"].p-oui{background:var(--f2);color:#fff}
.pres button[aria-pressed="true"].p-non{background:var(--crit);color:#fff}
/* une seule colonne : on lit la liste de haut en bas, sans zigzag */
.jgrid{display:grid;grid-template-columns:1fr;gap:0;padding:2px 12px}
.gbadge.multi{font-size:var(--t-2xs);letter-spacing:.02em;padding:2px 5px}
.jfiltre{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.jfiltre .seg{flex:0 1 auto;max-width:100%;flex-wrap:wrap}
.jfiltre .seg button{flex:1 0 auto}
.jfiltre .lien{font-size:var(--t-md)}
/* quatre filtres ne tiennent pas sur une ligne de téléphone : ils passent à la
   ligne, et les bordures suivent pour que l'ensemble reste un bloc */
@media(max-width:560px){
  .jfiltre .seg{width:100%}
  .jfiltre .seg button{padding:8px 10px;font-size:var(--t-md);border-bottom:1px solid var(--line)}
}
.jbox{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  max-height:min(52vh,420px);overflow:auto}
/* Sur téléphone, une liste qui défile à l'intérieur d'une fenêtre qui défile
   déjà est un piège : la liste s'étire, et la fenêtre défile seule. */
@media(max-width:560px){.jbox{max-height:none;overflow:visible}}
.jaide{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 9px}
/* Une séance non pointée le dit : c'est un oubli à rattraper, pas une désaffection. */
.prow .nonp{color:var(--ink-3);font-style:italic;opacity:.85}
.jrow{display:flex;align-items:center;gap:8px;font-size:var(--t-md);min-width:0;
  padding:4px 0;border-bottom:1px solid var(--line)}
.jrow:last-child{border-bottom:0}
/* la case « Convoqué » : le libellé s'efface sur les écrans étroits, la
   coche et sa bulle d'aide suffisent alors */
.conv{display:flex;align-items:center;gap:6px;flex:0 0 auto;cursor:pointer;
  font-size:var(--t-sm);color:var(--ink-2);min-height:32px;padding-left:2px}
.conv input{width:19px;height:19px;accent-color:var(--accent);cursor:pointer;margin:0}
/* le mot garde la même largeur coché ou non — même graisse, la couleur
   seule change — pour que rien ne bouge sur la ligne quand on coche */
.conv span{font-size:var(--t-sm);color:var(--ink-3);font-weight:600;min-width:5.6em}
.conv input:checked+span{color:var(--accent)}
@media(max-width:480px){.conv span{display:none}.conv{min-width:36px;justify-content:center}}
.jrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrow .nm .ct{display:none}
/* Sur téléphone, un enfant tient sur une seule ligne : le nom peut passer à
   la ligne dans sa colonne, les commandes restent alignées à droite. Vingt-sept
   enfants se parcourent alors d'un pouce, sans zigzag. */
@media(max-width:560px){
  .jrow{gap:6px;padding:6px 0;font-size:var(--t-md)}
  .jrow .av{width:26px;height:26px;flex:0 0 auto}
  /* le nom passe au format court — celui des convocations — et se replie
     proprement si un prénom est vraiment long */
  .jrow .nm{white-space:normal;overflow:hidden;text-overflow:clip;line-height:1.2;
    overflow-wrap:anywhere}
  .jrow .nm .lg{display:none}
  .jrow .nm .ct{display:inline}
  /* le nom garde toujours de quoi s'écrire ; l'heure de la réponse garde son
     jour quand la réponse n'est pas d'aujourd'hui — sur deux lignes, en plus
     petit, plutôt que d'écraser le nom en colonne */
  .jrow .nm{flex:1 1 auto;min-width:7ch}
  .jrow .quand{flex:0 0 auto;margin-left:0;font-size:.8em;line-height:1.15;text-align:right;white-space:normal;max-width:6.5em}
  .jrow .quand .qd{display:block}
  .jrow .chip{display:none}                 /* le groupe se lit dans le filtre au-dessus */
  .pres .lg{display:none}
  .pres .ct{display:inline;font-size:var(--t-xl);line-height:1}
  .pres button{min-width:28px;padding:5px 0}
  .conv{min-width:28px;padding:0;justify-content:center}
  .conv input{width:20px;height:20px}
}
/* Le carnet remonte le nom d'un enfant hors groupe dans le filtre : sur
   téléphone la pastille disparaît, la ligne reste lisible. */
.jrow.abs .nm{text-decoration:line-through;color:var(--ink-3)}
.jrow.abs .av{opacity:.5}
/* les trois équipes du jour */
.eq{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--surface);flex:0 0 auto}
.eq button{background:none;border:0;border-right:1px solid var(--line);padding:5px 0;min-width:34px;
  min-height:32px;font-family:var(--cond);font-weight:700;font-size:var(--t-lg);color:var(--ink-3);cursor:pointer}
.eq button:last-child{border-right:0}
.eq button:hover{background:var(--surface-2);color:var(--ink)}
.eq button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
/* la place du choix d'équipe, quand la ligne n'en a pas : le même choix,
   invisible — exactement la même largeur, la ligne ne bouge pas au coche */
.eq-place{display:inline-flex;visibility:hidden;pointer-events:none}
/* Ces règles viennent après « .eq » : à spécificité égale, c'est la dernière
   écrite qui gagne, et c'est celle du téléphone qu'on veut ici. */
@media(max-width:560px){
  /* La case vide garde sa place : présence et convocation restent alignées
     d'un enfant à l'autre, qu'il ait une équipe ou non. */
  .eq.vide{display:inline-flex;width:86px;height:32px}
  .eq.vide.deux{width:58px}
  .eq button{min-width:28px;padding:5px 0;font-size:var(--t-md)}
}
/* Sous 400 px, la photo laisse sa place au nom : trois commandes et un nom
   lisible valent mieux qu'une vignette. */
@media(max-width:400px){.jrow .av{display:none}}
.eqrow{display:grid;gap:2px;margin:4px 0 2px;font-size:var(--t-md)}
.eqrow p{display:flex;gap:7px;align-items:baseline;min-width:0}
.eqrow b{font-family:var(--cond);font-weight:700;letter-spacing:.03em;color:var(--accent);flex:0 0 auto}
.eqrow span{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqrow .rest b{color:var(--ink-3)}
/* le bilan d'une rencontre : présents, convoqués, absents, sans réponse —
   et, quand des joueurs viennent d'ailleurs, le groupe et les autres */
.bilan{border-collapse:collapse;font-size:var(--t-md);margin-bottom:10px}
.bilan th,.bilan td{padding:3px 14px 3px 0;text-align:left;white-space:nowrap}
.bilan thead th{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-xs);color:var(--ink-3)}
.bilan tbody th{font-weight:500;color:var(--ink-2)}
.bilan td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bilan td b{color:var(--ink)}
.bilan td b.oui{color:var(--f2)} .bilan td b.non{color:var(--crit)}
.presum i{font-style:normal;color:var(--ink-3)}
.jfiltres{display:grid;gap:8px;margin-bottom:10px}
.jf{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.jf>i{font-style:normal;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-xs);color:var(--ink-3);flex:0 0 58px}
.jf .jfiltre{margin-bottom:0}
.presum .rest{color:var(--warn)}
.presum{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2);margin-bottom:10px}
.presum b{font-variant-numeric:tabular-nums}
.presum .oui{color:var(--f2)}
.presum .non{color:var(--crit)}
/* Le compte des réponses sur la carte d'un rendez-vous : trois nombres, dans
   l'ordre où on les lit — qui vient, qui ne vient pas, qui n'a rien dit. */
.rrep{display:inline-flex;gap:5px 12px;flex-wrap:wrap;align-items:baseline;margin-left:.35em}
.rrep b{font-variant-numeric:tabular-nums}
.rrep .oui{color:var(--f2)}
.rrep .non{color:var(--crit)}
.rrep .rien{color:var(--ink-3)}

/* Les réponses, enfants et coachs séparés. Deux lignes étiquetées qui se
   lisent l'une sous l'autre : les mêmes trois comptes, à la même place, pour
   qu'on les compare d'un coup d'œil au lieu de faire une soustraction. */
.rrep2{display:grid;gap:3px;margin:8px 0 2px;
  border-left:2px solid var(--line);padding-left:11px}
.rl{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;font-size:var(--t-md)}
.rk{display:inline-flex;align-items:center;gap:4px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs);color:var(--ink-3);
  min-width:62px}
.rk svg{opacity:.75}
.rl b{font-variant-numeric:tabular-nums;font-size:var(--t-lg)}
.rl .oui{color:var(--f2)}
.rl .non{color:var(--crit)}
.rl .rien{color:var(--ink-3)}
.rl .rnoms{flex:1 1 100%;color:var(--ink-3);font-size:var(--t-sm);padding-left:76px;margin-top:-1px}
/* Le bouton qui range les noms dans l'ordre des réponses : un lien discret
   en bout de liste, et l'heure de chacun quand on l'a demandé. */
.rtri,.card .rtri{display:inline;font-size:var(--t-xs);min-height:0;padding:0 2px;margin-left:6px;white-space:nowrap;vertical-align:baseline;color:var(--ink-3)}
.rtri[aria-pressed="true"]{color:var(--accent)}
.rnoms .quand,.sond-noms .quand{margin-left:.2em;font-size:.88em;opacity:.7}
@media(max-width:520px){.rk{min-width:0;flex:1 1 100%}.rl .rnoms{padding-left:0}}

/* L'en-tête du pointage, sur la feuille : le même bloc que sur la carte. */
.prehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.prehead .rrep2{margin:0;border-left:0;padding-left:0}

/* Posé par un coach, et non répondu par la famille : on le dit, l'heure du
   geste du coach ne lui apprendrait rien. */
.quand.parcoach{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:var(--t-xs);opacity:.75}
/* Le lien de fratrie : sur la ligne du contingent, et en tête de la fiche. */
.fam{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  background:var(--f2-soft);color:var(--f2);border:1px solid var(--f2);
  font-size:var(--t-sm);font-weight:600;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.notice.lien-fam{background:var(--f2-soft);border-color:var(--f2);color:var(--ink)}
.notice.lien-fam svg{color:var(--f2);flex:0 0 auto}
/* L'annonce d'une famille, sur la feuille du coach : une pastille qui se
   clique pour la reprendre — l'enfant redevient « sans réponse ». */
.chip.rep-x{cursor:pointer;border:1px solid currentColor;background:transparent;font:inherit;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;padding:2px 8px}
.chip.rep-x:hover{background:var(--surface-2)}
/* L'heure à laquelle la famille a répondu. Discrète — on la cherche quand on
   se demande « depuis quand ? », elle ne doit pas concurrencer la réponse
   elle-même. Les chiffres s'alignent, pour qu'une colonne d'heures se lise. */
.quand{font-style:normal;font-weight:600;opacity:.62;font-size:.92em;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:.35em}
/* Les deux compteurs des réglages : combien de degrés, combien d'équipes.
   Des chiffres qu'on choisit d'un coup d'œil — pas une liste déroulante. */
.seg.nb{display:flex;flex-wrap:wrap;gap:4px}
.seg.nb button{font-family:var(--cond);font-weight:700;font-size:var(--t-xl);
  min-width:38px;padding:7px 0;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  font-variant-numeric:tabular-nums}
.seg.nb button:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.seg.nb button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);
  border-color:transparent}
.seg.nb button:disabled{opacity:.34;cursor:not-allowed}
/* Deux nombres, deux lignes. Le degré, sa quantité d'équipes, ses lettres —
   côte à côte, et ça se replie tout seul sur téléphone. */
.dline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dlab{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:var(--t-sm);color:var(--ink-2);min-width:62px}
.inp.nb{width:64px;padding:6px 8px;font-variant-numeric:tabular-nums;text-align:center}
.degres-eq{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.deq{display:inline-flex;align-items:center;gap:6px}
.deq .chip{flex:0 0 auto;min-width:34px;justify-content:center}
.deq i{font-style:normal;font-family:var(--cond);font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);font-size:var(--t-md)}
/* anniversaires de la semaine */
.fete{margin:18px 0 4px}
.fete-c{display:grid;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.fete-c{grid-template-columns:1fr auto}
  .fete-c .cal-a{border-left:1px solid var(--line);border-top:0}}
.fete-g{min-width:0}
.fete-l{display:flex;gap:8px;flex-wrap:wrap;padding:14px}
.fete-p{display:grid;justify-items:center;gap:3px;padding:10px 12px;min-width:96px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.fete-p .av{border:2px solid var(--accent-line)}
.fete-p b{font-size:var(--t-lg);margin-top:3px}
.fete-p span{font-family:var(--cond);font-weight:700;font-size:var(--t-xl);color:var(--accent)}
.fete-p i{font-style:normal;font-size:var(--t-xs);color:var(--ink-3);text-align:center}
.fete-rien{padding:14px;font-size:var(--t-md);color:var(--ink-2);margin:0}
.fete-v{padding:0 14px 14px}
.fete-v .lbl{display:block;margin-bottom:6px}
.fete-v ul{list-style:none;margin:0;padding:0;display:grid;gap:0 22px;max-width:640px;
  grid-template-columns:1fr}
@media(min-width:620px){.fete-v ul{grid-template-columns:1fr 1fr}}
.fete-v li{display:flex;align-items:baseline;gap:7px;font-size:var(--t-md);
  padding:5px 0;border-bottom:1px solid var(--line)}
.fete-v li:last-child{border-bottom:0}
.fete-v li b{font-weight:600}
.fete-v li i{font-style:normal;font-size:var(--t-sm);color:var(--accent);font-family:var(--cond);font-weight:700}
.fete-v li span{margin-left:auto;font-size:var(--t-sm);color:var(--ink-3)}
/* le mois des anniversaires */
.cal-a{padding:14px 16px 14px;min-width:250px;border-top:1px solid var(--line)}
.cal-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cal-h b{flex:1;text-align:center;font-family:var(--cond);font-size:var(--t-inp);letter-spacing:.02em}
.cal-h .iconbtn{width:34px;height:34px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-j{font-size:var(--t-xs);font-weight:700;color:var(--ink-3);text-align:center;padding-bottom:3px;letter-spacing:.04em}
.cal-c{position:relative;display:grid;place-items:center;height:34px;border-radius:6px;
  font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal-c.vide{visibility:hidden}
.cal-c.auj{outline:1.5px solid var(--line-2);outline-offset:-1.5px;font-weight:700;color:var(--ink)}
.cal-c.anniv{background:var(--accent-soft);color:var(--accent);font-weight:700;cursor:pointer}
.cal-c.anniv:hover,.cal-c.anniv.ouvert{background:var(--accent);color:var(--accent-ink)}
.cal-c.anniv:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cal-c.auj.anniv{outline-color:var(--accent)}
.cal-c .pt{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.75}
.cal-pop{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:20;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;
  padding:7px 10px;display:grid;gap:3px;white-space:nowrap;box-shadow:0 10px 26px -8px rgba(0,0,0,.4)}
.cal-pop.g{left:0;transform:none}
.cal-pop.d{left:auto;right:0;transform:none}
.cal-pop b{font-size:var(--t-sm);font-weight:600;display:flex;gap:7px;align-items:baseline}
.cal-pop b i{font-style:normal;font-size:var(--t-xs);color:var(--accent);font-weight:700;margin-left:auto}
.cal-f{font-size:var(--t-sm);color:var(--ink-3);margin-top:8px;text-align:center}
/* photo agrandie */
.av.zoomable{cursor:zoom-in}
.av.zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.loupe{position:fixed;inset:0;z-index:80;background:rgba(8,14,24,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px}
.loupe figure{position:relative;margin:0;background:var(--surface);border-radius:12px;overflow:hidden;
  max-width:min(420px,92vw);box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.loupe img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:var(--surface-2)}
.loupe figcaption{padding:12px 16px 14px;display:grid;gap:2px}
.loupe figcaption b{font-size:var(--t-h3)}
.loupe figcaption span{font-size:var(--t-md);color:var(--ink-2)}
.loupe figure>.iconbtn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border-color:transparent;color:#1B1B1B}
/* les mois de la saison, repliables */
.mois{margin-bottom:14px}
.mois>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:9px 2px;
  border-bottom:1px solid var(--line);margin-bottom:12px;color:var(--ink-2);min-height:40px}
.mois>summary::-webkit-details-marker{display:none}
.mois>summary b{font-family:var(--cond);font-size:var(--t-h3);letter-spacing:.01em;color:var(--ink)}
.mois>summary svg{transition:transform .15s;flex:0 0 auto}
.mois[open]>summary svg{transform:rotate(180deg)}
.mois>summary .count{margin-left:auto}
.lien{color:var(--accent);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
/* Un titre qui ouvre quelque chose. Il garde l'allure d'un titre — pas de
   couleur de lien, pas de soulignement au repos : c'est au survol qu'il dit
   qu'on peut cliquer, comme un titre d'article dans une liste. */
.lien-t{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;text-decoration:none}
.lien-t:hover,.lien-t:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* un lien posé parmi des boutons doit rester attrapable au doigt */
.toolbar .lien,.card .lien,.actifs .lien,.jbox+div .lien,.field .lien{display:inline-flex;align-items:center;min-height:34px;padding:0 4px}
/* écrans peu hauts : on rend au terrain la place prise par les commandes */
@media(max-height:800px){
  .mdl.atelier .mdl-b{gap:7px;padding:9px}
  .mdl.atelier .mdl-h{padding:10px 14px}.mdl.atelier .mdl-h h2{font-size:var(--t-h3)}
  .mdl.atelier .mdl-f{padding:9px 14px}
  .palette .tool{height:44px;min-width:52px}
  .palette .tool span{font-size:9px}
  .props{padding:5px 8px}
}
@media(max-height:660px){
  .palette .tool{height:38px;min-width:40px}
  .palette .tool span{display:none}
}
canvas.tools{display:flex;flex-wrap:wrap;gap:6px}
.tool{width:44px;height:44px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.tool[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}

.empty{text-align:center;padding:34px 16px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));gap:10px;margin-bottom:4px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.stat .v{font-family:var(--cond);font-weight:700;font-size:var(--t-num);line-height:1;font-variant-numeric:tabular-nums}
.stat .k{font-size:var(--t-sm);color:var(--ink-3);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--cond);font-weight:600}
/* une catégorie par carte : le total en grand, les degrés dessous, les coachs
   en pied — la même forme d'une carte à l'autre, pour qu'on lise la seconde
   sans réapprendre à lire */
.stats.cat{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.statcat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  display:grid;gap:7px;grid-template-rows:auto 1fr auto;min-height:118px}
.statcat.sans{border-style:dashed}
.sc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sc-n{font-family:var(--cond);font-weight:700;font-size:var(--t-2xl);letter-spacing:.01em}
.sc-t{color:var(--ink-3);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;font-family:var(--cond);font-weight:600}
.sc-t .v{font-family:var(--cond);font-weight:700;font-size:var(--t-num);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:0;margin-right:4px}
.sc-d{display:flex;gap:6px 14px;flex-wrap:wrap;align-content:start;font-size:var(--t-md);color:var(--ink-2);font-variant-numeric:tabular-nums;min-height:22px}
.sc-d b{font-family:var(--cond);font-weight:700;font-size:var(--t-2xl);line-height:1}
.sc-d.vide{color:var(--ink-3);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;font-family:var(--cond);font-weight:600}
.sc-c{font-size:var(--t-sm);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-family:var(--cond);font-weight:600;
  border-top:1px solid var(--line);padding-top:7px;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-c b{color:var(--ink);font-size:var(--t-lg)}
.notice{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink);border-radius:var(--r);padding:11px 13px;font-size:var(--t-md);display:flex;gap:9px;align-items:flex-start}
.sync{margin:14px 0 0;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);
  padding:11px 13px;display:flex;gap:11px;align-items:center;flex-wrap:wrap;color:var(--accent)}
.sync.alert{background:var(--f3-soft);border-color:var(--f3);color:var(--f3)}
.sync.ro{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.sync-t{flex:1 1 240px;min-width:0;color:var(--ink);display:grid;gap:2px}
.sync-t b{font-family:var(--cond);font-weight:700;font-size:var(--t-inp);letter-spacing:.01em}
.sync-t span{font-size:var(--t-md);color:var(--ink-2)}
.sync-n{width:130px;min-height:32px;padding:5px 9px;font-size:var(--t-md)}
.msg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0;
  font-size:var(--t-lg);line-height:1.62;word-break:break-word;max-height:52vh;overflow:auto;color:var(--ink);user-select:text}
.msg b{font-weight:700}
.bulle{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;
  box-shadow:0 8px 30px -8px rgba(15,26,42,.45);overflow:hidden;pointer-events:none;
  max-height:min(82vh,580px);display:flex;flex-direction:column}
.bulle img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-bottom:1px solid var(--line);flex:0 0 auto}
.bulle-bd{padding:11px 13px 13px;display:grid;gap:6px;align-content:start;overflow:hidden;min-height:0}
.bulle-bd h4{font-family:var(--cond);font-weight:700;font-size:var(--t-h3);line-height:1.1}
.bulle-m{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-xs);color:var(--accent)}
.bulle-bd p{font-size:var(--t-md);line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.bulle-bd ul{margin:1px 0 0;padding-left:17px;display:grid;gap:3px;font-size:var(--t-sm);color:var(--ink-2);overflow:hidden}
.bulle-bd li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bulle-r{color:var(--ink-3);-webkit-line-clamp:3}
@media(hover:none){.bulle{display:none}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:90;background:var(--ink);color:var(--bg);padding:11px 17px;border-radius:999px;font-weight:600;font-size:var(--t-lg);box-shadow:var(--shadow)}
@media(min-width:900px){.toast{bottom:26px}}
/* Une version neuve est en ligne : on le dit, on ne recharge pas sous les
   doigts de quelqu'un qui saisit une séance. Au réveil de l'application, en
   revanche, le rechargement est immédiat et ce bandeau ne paraît jamais. */
.maj-barre{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:92;
  display:flex;gap:12px;align-items:center;background:var(--ink);color:var(--bg);
  padding:9px 11px 9px 17px;border-radius:999px;font-weight:600;font-size:var(--t-lg);
  box-shadow:var(--shadow);max-width:calc(100vw - 24px)}
.maj-barre span{white-space:normal}
.maj-barre .btn{flex:0 0 auto}
@media(min-width:900px){.maj-barre{bottom:26px}}
.cancelled{opacity:.55}
.cancelled h3{text-decoration:line-through}
details.arch>summary{cursor:pointer;padding:11px 13px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);list-style:none;display:flex;gap:8px;align-items:center}
details.arch>summary::-webkit-details-marker{display:none}
details.arch[open]>summary{border-bottom:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-lg)}
.tbl th{text-align:left;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:var(--t-sm);color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.scrollx{overflow-x:auto}
/* Clubs et terrains sur un téléphone : une ligne de tableau de 1300 px ne
   montrait que le club, et ses boutons restaient hors d'atteinte. Sous 760 px
   chaque ligne devient un bloc — club et boutons sur la première ligne, le
   lieu dessous, l'adresse en pleine largeur, puis « du club » et l'origine. */
/* Les boutons d'une ligne restent visibles quand le tableau déborde et
   défile de côté : sur un grand écran, la colonne de l'adresse poussait la
   corbeille hors du cadre, et l'on croyait qu'elle n'existait pas. */
.adr-t th:last-child,.adr-t td.adr-act{position:sticky;right:0;background:var(--surface);z-index:1;white-space:nowrap;
  box-shadow:-6px 0 6px -6px rgba(0,0,0,.18)}
.adr-t tr.acvf-sans td.adr-act{background:var(--f3-soft)}
.m-only{display:none}
@media(max-width:760px){
  .adr-t{overflow-x:visible}
  .adr-t table,.adr-t tbody{display:block;width:100%}
  .adr-t thead{display:none}
  .adr-t tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"club act" "lieu act" "adr adr" "duclub origine";
    gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
  .adr-t td{display:block;padding:0;border:0;white-space:normal!important;min-width:0!important;width:auto!important}
  .adr-t td.adr-act{position:static;box-shadow:none;background:transparent}
  .adr-t td:nth-child(1){grid-area:club}
  .adr-t td:nth-child(2){grid-area:lieu;color:var(--ink-2);font-size:var(--t-md)}
  .adr-t td:nth-child(3){grid-area:duclub;text-align:left!important}
  .adr-t td:nth-child(4){grid-area:origine;text-align:right}
  .adr-t td:nth-child(5){grid-area:adr;margin-top:4px}
  .adr-t td:nth-child(6){grid-area:act;align-self:start}
  .adr-t .adr-club{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--ink-2)}
  .adr-t .m-only{display:inline}
  .adr-t tr.acvf-sans{padding-left:8px;padding-right:8px;background:var(--f3-soft)}
  .adr-t tr.acvf-sans td{background:transparent}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- fiche de séance ---------- */
.fiche{display:grid;gap:16px;color:var(--ink)}
.fiche-h{display:flex;gap:14px;align-items:center;justify-content:space-between;border-bottom:2px solid var(--accent);padding-bottom:10px}
.fiche-h h2{font-size:var(--t-h2)}
.fiche-h p{font-size:var(--t-md);color:var(--ink-2);margin-top:3px}
.fiche-t{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.fiche-t h3{font-size:var(--t-h2)}
.fiche-obj{font-size:var(--t-lg);color:var(--ink-2);margin-top:4px}
.fiche-d{color:var(--ink-2);font-size:var(--t-xl);white-space:nowrap}
.fiche-ex{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding-top:14px;break-inside:avoid;page-break-inside:avoid}
.fiche-ex img{width:270px;flex:0 0 auto;border-radius:5px;border:1px solid var(--line);background:var(--surface-2)}
.fiche-ex>div{min-width:0;display:grid;gap:6px}
.fiche-ex h4{font-family:var(--cond);font-weight:700;font-size:var(--t-h3);display:flex;gap:8px;align-items:baseline}
.fiche-ex p{font-size:var(--t-lg);line-height:1.55}
.fiche-m{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:var(--t-sm);color:var(--accent)}
.fiche-note{color:var(--ink-2);font-weight:600}
.fiche-ex ul{margin:2px 0 0;padding-left:19px;display:grid;gap:3px;font-size:var(--t-md);color:var(--ink-2)}
.fiche-riv{color:var(--ink-2)}
.fiche-notes{border-top:1px solid var(--line);padding-top:12px}
.fiche-notes h4{font-family:var(--cond);font-weight:700;font-size:var(--t-2xl);margin-bottom:5px}
.fiche-notes p{font-size:var(--t-lg);color:var(--ink-2)}
.fiche-src{font-size:var(--t-sm);color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}
@media(max-width:620px){.fiche-ex{flex-direction:column}.fiche-ex img{width:100%}}

@media print{
  @page{margin:14mm}
  html,body{background:#fff!important}
  body *{visibility:hidden!important}
  .fiche,.fiche *{visibility:visible!important}
  .fiche{position:absolute;inset:0 auto auto 0;width:100%;padding:0;color:#101820}
  .fiche-h{border-bottom:2px solid #154C93}
  .fiche-m{color:#154C93}
  .fiche-ex img{width:230px}
  .ovl{position:static!important;background:none!important;backdrop-filter:none!important;display:block!important;padding:0!important}
  .mdl{max-width:none!important;max-height:none!important;border:0!important;box-shadow:none!important;display:block!important}
  .mdl-b{overflow:visible!important;padding:0!important;display:block!important}
}

.prow .pname .lic{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- sondages de présence ---------- */
.sond{padding:13px 14px;display:grid;gap:9px}
.sond.on{border-left:3px solid var(--f2)}
.sond.ko{border-left:3px solid var(--warn)}
.sond-h{display:flex;align-items:flex-start;gap:11px}
.sond-h .gbadge{--g:var(--line-2);flex:0 0 auto;align-self:flex-start;margin:0;padding:4px 8px;
  font-size:var(--t-sm);letter-spacing:.08em}
.sond-h .gbadge.multi{font-size:var(--t-2xs)}
.sond-t{min-width:0;display:grid;gap:2px}
.sond-t h3{font-family:var(--cond);font-weight:600;font-size:var(--t-2xl);margin:0;line-height:1.2}
.sond-t .meta-l{margin:0;font-size:var(--t-sm);color:var(--ink-3)}
.sond-w{display:flex;gap:7px;align-items:flex-start;margin:0;font-size:var(--t-sm);line-height:1.5;
  color:var(--warn)}
.sond-w svg{flex:0 0 auto;margin-top:1px}
.sond-c{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;font-size:var(--t-sm);color:var(--ink-2)}
/* Qui l'on compte : « Joueurs », « Coachs ». Deux rangées de même forme, pour
   qu'on lise la seconde sans réapprendre à la lire. */
.sond-c .qui{display:inline-flex;align-items:center;gap:5px;min-width:66px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:var(--t-xs);color:var(--ink-3)}
.sond-c .qui svg{opacity:.75}
/* Un compte qui s'ouvre sur ses noms. Il reste du texte : c'est le survol et
   le soulignement qui disent qu'on peut cliquer. */
.sond-n{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.sond-n:hover,.sond-n:focus-visible,.sond-n.on{text-decoration:underline;text-decoration-color:currentColor}
.sond-noms{margin:2px 0 0}
.sond-c b{font-variant-numeric:tabular-nums;margin-right:3px}
.sond-c .oui{color:var(--f2)}
.sond-c .non{color:var(--crit)}
.sond-c .rest{color:var(--warn)}
.sond-c .tot{color:var(--ink-3)}
.sond-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sond-alerte{display:flex;gap:12px;padding:13px 14px;margin-bottom:14px;
  border-left:3px solid var(--warn);align-items:flex-start}
.sond-alerte>svg{flex:0 0 auto;color:var(--warn);margin-top:1px}
.sond-alerte b{font-size:var(--t-lg)}
.sond-alerte p{margin:4px 0 6px;font-size:var(--t-md);color:var(--ink-2);line-height:1.55}
.sond-alerte ul{margin:0;padding-left:17px;font-size:var(--t-md);color:var(--ink-2);line-height:1.7}
.codes{display:grid;gap:6px;max-height:420px;overflow:auto}
.crow{display:flex;gap:9px;align-items:center;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;font-size:var(--t-md);min-width:0}
.crow b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .gbadge{--g:var(--line-2);margin:0;flex:0 0 auto;padding:2px 6px;font-size:var(--t-xs);letter-spacing:.06em}
/* Le code d'un enfant, partout où il se montre : une pastille monospace,
   cliquable pour le copier. Il n'apparaît que si on l'a demandé. */
.jet{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 7px;
  letter-spacing:.02em;flex:0 0 auto;cursor:pointer;line-height:1.3}
button.jet:hover{border-color:var(--accent);color:var(--accent)}
.jet.masq{color:var(--ink-3);cursor:default;letter-spacing:.12em}
/* Sur téléphone, le code d'une ligne passe sous le nom, sur toute la
   largeur : il ne tenait plus entre le crayon et le degré. */
@media(max-width:760px){.prow .jet{flex:1 1 100%;order:9;margin-top:2px;text-align:left;width:100%;box-sizing:border-box}.prow:has(.jet){flex-wrap:wrap}}
@media(max-width:560px){.prow.coach{flex-wrap:wrap}.prow.coach .pname{flex:1 1 calc(100% - 52px)}.prow.coach .fam,.prow.coach .chip{margin-left:52px}.prow.coach .fam~.chip,.prow.coach .chip~.chip{margin-left:0}}
.crow .sp{flex:1}
.crow b{flex:1 1 auto}
@media(max-width:560px){.crow{flex-wrap:wrap}.crow .sp{display:none}}
.chk{display:flex;gap:10px;font-size:var(--t-md);line-height:1.5;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto;margin-top:1px}

/* ---------- correction d'une commande déjà passée ---------- */
.ced{display:grid;gap:8px;margin-bottom:12px}
.ced-l{border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:grid;gap:7px}
.ced-n{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--t-lg)}
.ced-n .chip{font-size:var(--t-xs)}
.ced-f{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ced-f label{display:grid;gap:3px;font-size:var(--t-xs);color:var(--ink-3)}
.ced-f label span{font-family:var(--cond);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.ced-f .inp{min-height:34px;padding:5px 9px;min-width:92px}
.ced-f input[type=number]{width:72px}
.ced-p{margin-left:auto;text-align:right;font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums}
.ced-p i{display:block;font-style:normal;font-size:var(--t-xs);font-weight:400;color:var(--ink-3)}
.ced-t{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:baseline;padding:10px 12px;margin-top:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;font-size:var(--t-md)}
.ced-t i{font-style:normal;color:var(--ink-3)}
.ced-t b{font-variant-numeric:tabular-nums}
.ced-t .gros{margin-left:auto;font-size:var(--t-xl)}
.ced-t .gros b{color:var(--accent)}
@media(max-width:560px){.ced-p{margin-left:0}.ced-t .gros{margin-left:0}}

.cmd-rat{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 0 2px;
  border-top:1px solid var(--line);margin-top:8px}
.cmd-rat .lbl{flex:0 0 auto}
.cmd-rat .inp{min-height:32px;padding:4px 8px;font-size:var(--t-md);width:auto;max-width:230px}
.cmd-rat .jaide{flex:1 1 220px;min-width:0}

/* ---------- les commandes d'une famille ---------- */
.mcmd{padding:12px 14px;display:grid;gap:9px;margin-bottom:10px}
.mcmd-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:var(--t-lg)}
.mcmd-h .sp{flex:1}
.mcmd-p{font-variant-numeric:tabular-nums;color:var(--accent)}
.mcmd-l{display:grid;gap:3px;font-size:var(--t-md);color:var(--ink-2)}
.mcmd-l p{display:flex;gap:10px;margin:0;min-width:0}
.mcmd-l p span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcmd-l p i{font-style:normal;color:var(--ink-3);margin-left:auto;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.mcmd-b{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- fiche de l'enfant, côté parents ---------- */
.enf-h{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.enf-h .gbadge{--g:var(--accent);margin:0;padding:5px 10px;font-size:var(--t-md)}
.rdvp{padding:13px 14px;display:grid;gap:10px}
/* Date à gauche, pastille à droite, toujours sur la même ligne : en flex
   libre, la pastille passait dessous dès que la date s'allongeait — d'un jour
   à l'autre et d'une langue à l'autre, la carte changeait de hauteur. */
.rdvp-t{display:grid;gap:5px;justify-items:start}
.rdvp-t .rdvp-p{display:flex;gap:6px;flex-wrap:wrap}
/* La date d'abord : c'est elle qu'on cherche en parcourant la liste, et la
   pastille « Entraînement » se lit très bien en second. */
.rdvp-t h3{font-family:var(--cond);font-weight:700;font-size:var(--t-h2);line-height:1.1;margin:0;
  min-width:0;letter-spacing:-.005em;color:var(--ink)}
.rdvp .meta{display:grid;gap:3px;font-size:var(--t-md);color:var(--ink-2)}
.rdvp .meta i{font-style:normal;color:var(--ink-3);display:inline-block;min-width:88px}
/* Une ligne de réponse : le prénom, les deux boutons, la mention. En grille
   plutôt qu'en flex libre — sinon « Anwesend / Abwesend », plus larges que
   « Présent / Absent », faisaient passer le second bouton à la ligne et la
   mention à côté de lui. La disposition doit tenir dans les trois langues. */
.rdvp-r{display:grid;grid-template-columns:1fr;gap:6px;align-items:center}
.rdvp-b{display:flex;gap:9px}
.rdvp-b .btn{flex:1 1 0;min-width:0;justify-content:center}
.rdvp-r .btn.oui[aria-pressed=true]{background:var(--f2);border-color:var(--f2);color:#fff}
.rdvp-r .btn.non[aria-pressed=true]{background:var(--crit);border-color:var(--crit);color:#fff}
.rdvp-r .att{font-size:var(--t-sm);color:var(--warn)}
.rdvp-r .fait{font-size:var(--t-sm);color:var(--ink-3)}
.rdvp-q{font-family:var(--cond);font-weight:700;font-size:var(--t-xl);letter-spacing:.02em}
/* « Kevin » sur une ligne, « coach » en dessous : la question posée à un coach
   ne doit pas se lire en deux morceaux d'une phrase coupée. */
.rdvp-q .rq{display:block;font-size:var(--t-2xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.rdvp .rdvp-r+.rdvp-r{border-top:1px solid var(--line);padding-top:9px}
/* Dès qu'il y a la place, la ligne se resserre : avec plusieurs enfants le
   prénom passe en colonne, avec un seul c'est la mention qui vient à côté des
   boutons. Deux cas distincts — la même règle pour les deux superposait la
   mention aux boutons quand il n'y avait pas de prénom à placer. */
@media (min-width:560px){
  .rdvp-r.duo{grid-template-columns:110px 1fr;gap:5px 12px}
  .rdvp-r.duo .rdvp-q{grid-row:1/span 2;align-self:center}
  .rdvp-r.seul{grid-template-columns:auto 1fr;gap:5px 12px;align-items:center}
  .rdvp-b .btn{flex:0 0 auto;min-width:118px}
}

/* ---------- écrans d'accès ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:26px 24px;display:grid;gap:14px}
.auth-h{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.auth-h h1{font-size:var(--t-disp);line-height:1.05}
.auth-h p{font-size:var(--t-md);color:var(--ink-3);margin-top:3px}
.auth-err{background:var(--crit-soft);color:var(--crit);border-radius:var(--r);padding:9px 11px;font-size:var(--t-md);font-weight:600}
.auth-info{background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:9px 11px;font-size:var(--t-md);font-weight:600}
.auth-mode{width:100%}
.auth-mode button{flex:1;justify-content:center}
.auth-email{display:grid;gap:12px}
.auth-ok{margin:0;background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:9px 11px;font-size:var(--t-md);line-height:1.5}
.auth-note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
.auth-pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm);overflow-x:auto;color:var(--ink-2);line-height:1.5}
.auth code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--surface-2);
  padding:1px 5px;border-radius:4px}
select.inp:disabled,.gsel:disabled{opacity:.75;cursor:default}

.lien{background:none;border:0;padding:0;color:var(--accent);font-weight:600;font-size:var(--t-sm);cursor:pointer;text-align:left}
.lien:hover{text-decoration:underline}

.grp-fige{align-items:center}
.grp-vue .seg button.hors:not([aria-pressed="true"]){opacity:.8}

.kguide{margin-top:8px;font-size:var(--t-sm)}
.kguide summary{cursor:pointer;color:var(--ink-3);font-weight:600}
.kguide-t{overflow-x:auto;margin-top:6px}
.kguide table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}
.kguide th,.kguide td{border:1px solid var(--line);padding:4px 6px;text-align:center;white-space:nowrap}
.kguide th{background:var(--surface-2);font-weight:600}
.kguide p{margin:6px 0 0;color:var(--ink-3)}
.kfin>.kchoix,.kchoix>*{min-width:0}
.kt select.inp{width:100%;min-width:0}
.kguide table{max-width:260px}
.bdns-cases{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:var(--t-md)} .bdns-cases label{display:flex;gap:7px;align-items:center;cursor:pointer}
.bdns-bilan{display:flex;gap:6px 20px;flex-wrap:wrap;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:var(--t-sm)} .bdns-bilan b{font-size:var(--t-xl);color:var(--ink);margin-right:3px}
.bdns-note{display:grid;gap:6px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2);line-height:1.45} .bdns-note b{color:var(--ink)} .bdns-note.avert{border-left:3px solid var(--warn)} .bdns-note ul{margin:0;padding-left:18px} .bdns-note .btn{justify-self:start}
.bdns-manques{display:grid;gap:6px;max-height:280px;overflow:auto;padding-right:4px} .bdns-manque{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;align-items:center} .bdns-manque i{color:var(--ink-3);font-style:normal;font-size:var(--t-xs);margin-left:6px}
.bdns-gs{flex-wrap:wrap} .bdns-aide{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45;margin:0}
.bdns-apercu summary{cursor:pointer;font-weight:600;font-size:var(--t-sm);color:var(--ink-2)} .bdns-tab{overflow-x:auto;margin-top:8px;max-height:320px;overflow-y:auto}
.bdns-tab table{border-collapse:collapse;width:100%;font-size:var(--t-sm);font-variant-numeric:tabular-nums} .bdns-tab th,.bdns-tab td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .bdns-tab th{color:var(--ink-3);font-weight:600;position:sticky;top:0;background:var(--surface)}