/* Layout: finance back-office. Navy rail + light canvas on desktop, bottom tabs on phone.
   One blue for actions, green/amber/red only for money states, orange/teal only for the two clubs. */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --ink:#0F172A; --muted:#566074; --line:#E2E7EE; --soft:#EEF1F6;
  --pri:#2B50E6; --pri-ink:#FFFFFF; --pri-soft:#E8EDFF;
  --side:#0B1324; --side-ink:#B9C3D6; --side-hi:#FFFFFF; --side-act:#1A2643;
  --cA:#D9581A; --cB:#0B8F84; --good:#11795A; --good-soft:#E1F5EC; --warn:#935705; --warn-soft:#FDF1DA; --crit:#BF2D2D; --crit-soft:#FCE8E8;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 6px 20px rgba(15,23,42,.05); --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0F1C; --surface:#121A2B; --ink:#E8EDF7; --muted:#9BA7BD; --line:#243049; --soft:#1A2438;
  --pri:#7C9BFF; --pri-ink:#0A0F1C; --pri-soft:#1C2A55; --side:#070B15; --side-ink:#9BA7BD; --side-hi:#FFFFFF; --side-act:#18223B;
  --cA:#F08A4E; --cB:#3CC3B5; --good:#52C794; --good-soft:#12301F; --warn:#E6AE4C; --warn-soft:#382B10; --crit:#F27F7F; --crit-soft:#3B1A1A;
  --shadow:0 1px 2px rgba(0,0,0,.5); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0A0F1C; --surface:#121A2B; --ink:#E8EDF7; --muted:#9BA7BD; --line:#243049; --soft:#1A2438;
  --pri:#7C9BFF; --pri-ink:#0A0F1C; --pri-soft:#1C2A55; --side:#070B15; --side-ink:#9BA7BD; --side-hi:#FFFFFF; --side-act:#18223B;
  --cA:#F08A4E; --cB:#3CC3B5; --good:#52C794; --good-soft:#12301F; --warn:#E6AE4C; --warn-soft:#382B10; --crit:#F27F7F; --crit-soft:#3B1A1A;
  --shadow:0 1px 2px rgba(0,0,0,.5); color-scheme:dark; }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button,a,[data-href],summary,label.btn{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.shell{height:100%;display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.side{background:var(--side);color:var(--side-ink);padding:20px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.logo{font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:var(--side-hi);padding:0 10px}
.logo b{width:28px;height:28px;border-radius:8px;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;font-size:15px}
.org{font-size:12.5px;padding:4px 10px 10px;opacity:.85}
.side h6{margin:16px 10px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.6}
.nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;text-decoration:none;color:inherit;font-weight:500;min-height:40px;transition:background .15s,color .15s}
.nav:hover{background:var(--side-act);color:var(--side-hi)}
.nav[aria-current="page"]{background:var(--side-act);color:var(--side-hi);font-weight:600;box-shadow:inset 3px 0 0 var(--pri)}
.cnt{margin-left:auto;background:var(--pri);color:var(--pri-ink);font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 7px;font-variant-numeric:tabular-nums}
.col{min-width:0;height:100%;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;padding:12px 28px;border-bottom:1px solid var(--line);background:var(--surface)}
.bar .logo{display:none;color:var(--ink)}
.crumb{font-size:13px;color:var(--muted)} .sp{flex:1}
.tag{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 11px;white-space:nowrap}
main{flex:1;min-height:0;overflow-y:auto;padding:28px}
.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.tabs{display:none}
h1{font-weight:600;font-size:26px;letter-spacing:-.022em;line-height:1.15;margin:0;text-wrap:balance}
h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.005em}
p{margin:0} .sub{color:var(--muted)} .sm{font-size:12.5px;color:var(--muted)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 13px;min-height:38px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .08s}
.btn:hover{background:var(--soft)} .btn:active{transform:scale(.98)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} .btn.pri:hover{filter:brightness(1.1);background:var(--pri)}
.btn.bad{color:var(--crit)} .btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.xs{padding:5px 10px;min-height:32px;font-size:13px;border-radius:8px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.flush{padding:0;gap:0;overflow:hidden}
.ct{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
a.card{text-decoration:none;transition:border-color .15s,box-shadow .15s} a.card:hover{border-color:var(--pri)}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .gh{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{gap:4px}
.kpi .l{font-size:13px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px}
.big{font-weight:600;font-size:26px;letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:var(--good)} .neg{color:var(--crit)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px;white-space:nowrap;background:var(--soft);color:var(--muted)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--good-soft);color:var(--good)} .pill.todo{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)} .pill.pri{background:var(--pri-soft);color:var(--pri)}
.rows{display:flex;flex-direction:column}
.r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 20px;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s}
.r:last-child{border-bottom:0} a.r:hover{background:var(--soft)}
.t{font-weight:500;min-width:0;overflow-wrap:break-word}
td.nw{white-space:nowrap} .scroll{overflow-x:auto} td .who .t{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (min-width:900px){td,th{padding:10px 12px}}
table.acc3 .hm{display:none} table.acc3 td,table.acc3 th{padding-left:8px;padding-right:8px} table.acc3 td:first-child,table.acc3 th:first-child{padding-left:16px} table.acc3 th{white-space:normal} table.acc3 td.n .pill,table.acc3 td.n{font-size:13px}
.who{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;flex:none;background:var(--muted)}
.av svg{width:15px;height:15px;stroke:#fff}
.split{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--soft);gap:2px}
.split i{display:block}
.legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.tool{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.in{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 11px;min-height:38px;min-width:0;transition:border-color .15s}
.in:hover{border-color:var(--muted)} .in.grow{flex:1;min-width:180px} .in.bad{border-color:var(--crit)}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;min-height:34px;font-size:13.5px;font-weight:500;transition:background .15s}
.chip:hover{background:var(--soft)} .chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip[disabled]{opacity:.6;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--soft);white-space:nowrap}
td,th{padding:10px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr[data-href]{transition:background .15s} tr[data-href]:hover{background:var(--soft)}
tr.tot td{font-weight:600;background:var(--soft)} tr.grp td{background:var(--soft);font-weight:600;font-size:13px}
td.ck{width:36px;padding-right:0} input[type=checkbox]{width:17px;height:17px;accent-color:var(--pri)}
.om{display:none}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.facts span{display:block;font-size:12.5px;color:var(--muted)}
.why{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.meter{height:8px;border-radius:99px;background:var(--soft);overflow:hidden} .meter i{display:block;height:100%;background:var(--pri);min-width:3px}
.note{background:var(--pri-soft);border-radius:10px;padding:10px 12px;font-size:13.5px}
.empty{padding:26px 20px;color:var(--muted);text-align:center}
.bulk{background:var(--ink);color:var(--surface);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bulk .btn{background:transparent;color:inherit;border-color:rgba(255,255,255,.3)}
.ov{position:fixed;inset:0;background:rgba(8,12,24,.55);display:none;z-index:30} .ov.on{display:block}
.sheet{position:fixed;top:0;right:0;height:100%;width:min(500px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:31;display:none;flex-direction:column;box-shadow:-12px 0 40px rgba(8,12,24,.18)}
.sheet.on{display:flex}
.sheet header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet .body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px} .sheet .body>*{flex:none}
.sheet footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.x{border:0;background:var(--soft);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
label.f .in{font-weight:400;font-size:15px} .help{font-weight:400;color:var(--muted);font-size:12.5px} .err{color:var(--crit);font-size:12.5px;font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:7px 6px;min-height:36px;font-weight:600;font-size:13.5px;border-radius:8px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.fab{position:fixed;right:24px;bottom:24px;z-index:20;border:0;background:var(--ink);color:var(--surface);border-radius:99px;padding:12px 18px 12px 14px;min-height:48px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:0 8px 28px rgba(8,12,24,.3);transition:transform .15s}
.fab:hover{transform:translateY(-2px)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--surface);border-radius:12px;padding:10px 12px 10px 16px;display:none;gap:14px;align-items:center;font-weight:500;box-shadow:0 8px 28px rgba(8,12,24,.3);max-width:calc(100% - 32px)}
.toast.on{display:flex} .toast button{border:0;background:transparent;color:inherit;font-weight:700;text-decoration:underline;min-height:32px}
.msg{max-width:94%;display:flex;flex-direction:column;gap:8px}
.msg.me{align-self:flex-end;background:var(--pri);color:var(--pri-ink);border-radius:14px 14px 4px 14px;padding:9px 13px}
.msg.ai .say{background:var(--soft);border-radius:14px 14px 14px 4px;padding:9px 13px}
.file{display:inline-flex;gap:6px;align-items:center;font-size:13px;background:var(--soft);border-radius:8px;padding:3px 9px;align-self:flex-start;color:var(--ink)} .file svg{width:14px;height:14px}
.send{display:flex;gap:8px;align-items:flex-end;width:100%} .send textarea{flex:1;resize:none;min-height:40px;max-height:90px}
.qadd{display:grid;grid-template-columns:150px minmax(0,1fr) 110px 190px auto;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--soft)}
@media (max-width:900px){
  body{font-size:16px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86%);z-index:32;transform:translateX(-102%);transition:transform .22s ease-out}
  .menu .side{transform:none}
  .bar{padding:10px 16px} .bar .logo{display:flex;padding:0;font-size:19px} .tag,.crumb{display:none}
  main{padding:16px 16px 92px}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;border:0;background:none}
  .tabs [aria-current="page"]{color:var(--pri)}
  .g4,.gh,.g3:has(.kpi){grid-template-columns:repeat(2,minmax(0,1fr))} .g2,.g3{grid-template-columns:minmax(0,1fr)}
  h1{font-size:23px} .big{font-size:21px} .card{padding:16px}
  td,th{padding:11px 14px} .r,.ct{padding-inline:16px} .hm{display:none} .om{display:block}
  .btn{min-height:44px} .btn.xs{min-height:38px} .chip{min-height:40px} .in{min-height:44px;font-size:16px}
  .fab{right:16px;bottom:72px;padding:0;width:52px;height:52px;justify-content:center} .fab span{display:none}
  .toast{bottom:76px} .qadd{grid-template-columns:1fr 1fr;padding-inline:16px} .qadd .w2{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* --- direction sport : indigo vif, jaune maillot, bandes de couloir --- */
:root{--bg:#F6F5FC;--ink:#17153B;--muted:#5A5878;--line:#E5E2F3;--soft:#F0EEFA;--pri:#4B3BFF;--pri-soft:#ECEAFF;--side:#1D1470;--side-ink:#D5D1F7;--side-act:rgba(255,255,255,.13);--sun:#FFC93C;--sun-ink:#2B2100;--cA:#E8432A;--cB:#008F80;--display:"Bricolage Grotesque","Geist",system-ui,sans-serif}
.side{background:linear-gradient(180deg,#1D1470,#3626C9)}
.logo b,.cnt{background:var(--sun);color:var(--sun-ink)}
.nav[aria-current="page"]{box-shadow:inset 3px 0 0 var(--sun)}
h1,.big{font-family:var(--display);font-weight:700}
h1{font-size:30px;letter-spacing:-.02em}
.card{border-radius:18px}
.chip[aria-pressed="true"]{background:var(--pri);border-color:var(--pri);color:#fff}
a.chip{text-decoration:none}
.fab{background:var(--sun);color:var(--sun-ink)}
.hero{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;color:#fff;background:linear-gradient(115deg,#2317A8,#4B3BFF 55%,#7C5CFF);display:flex;flex-direction:column;gap:14px}
.hero::after{content:"";position:absolute;inset:0 0 0 45%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 16px,transparent 16px 46px);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:34px;font-weight:800} .hero .sub{color:rgba(255,255,255,.88)}
.hero .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff} .hero .btn:hover{background:rgba(255,255,255,.24)}
.hero .btn.pri{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
.badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--sun);color:var(--sun-ink);font-weight:700;font-size:12.5px;border-radius:99px;padding:4px 11px}
.kpi .l .i{width:30px;height:30px;padding:6px;border-radius:10px;background:var(--pri-soft);color:var(--pri)}
.grid>.kpi:nth-child(2) .l .i{background:#FFF1C7;color:#7A5200} .grid>.kpi:nth-child(3) .l .i{background:#FFE3DD;color:#A8301B} .grid>.kpi:nth-child(4) .l .i{background:#D9F5F0;color:#00655B}
.hb{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.hb .meter{height:12px} .stack{display:flex;height:16px;border-radius:99px;overflow:hidden;gap:2px;background:var(--soft)} .stack i{display:block;height:100%}
.as{background:var(--sun);color:var(--sun-ink);border-radius:12px;padding:10px 14px;font-weight:600;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
#role{max-width:250px;font-weight:600}
:root{--pri-soft:color-mix(in srgb,var(--pri) 11%,#fff)}
.side{background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 38%,#0A0828),color-mix(in srgb,var(--pri) 62%,#0A0828))}
.hero{color:var(--pri-ink);background:linear-gradient(115deg,color-mix(in srgb,var(--pri) 72%,#000),var(--pri) 55%,color-mix(in srgb,var(--pri) 72%,#fff))}
.hero .sub{color:inherit;opacity:.9}
.hero .btn{background:color-mix(in srgb,currentColor 14%,transparent);border-color:color-mix(in srgb,currentColor 34%,transparent);color:inherit}
.hero .btn.pri{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
.chip[aria-pressed="true"]{color:var(--pri-ink)}
.logo img{width:28px;height:28px;border-radius:8px;object-fit:cover;background:#fff}
input[type=color]{padding:3px;height:44px;width:100%}
textarea.in{width:100%;min-height:340px;line-height:1.5;resize:vertical}
.tpl{gap:8px}
.ci{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none} .ci svg{width:17px;height:17px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
a.tile{text-decoration:none}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-size:12.5px;font-weight:600;text-align:center;min-height:78px;transition:border-color .15s,background .15s}
.tile:hover{border-color:var(--muted)} .tile[aria-pressed="true"]{border-color:var(--pri);background:var(--pri-soft)}
.flow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fbox{border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.fbox.src{align-items:center;background:var(--soft);border:0;min-width:128px} .farr{color:var(--muted)}
.fouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;flex:1;min-width:200px}
.kipc{background:linear-gradient(180deg,var(--pri-soft),var(--surface) 96px)}
.kiph{display:flex;gap:12px;align-items:flex-end}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 14px;box-shadow:var(--shadow);min-width:0}
.kipc .head{align-items:center;border-top:1px solid var(--line);padding-top:10px}
.kip{flex:none;filter:drop-shadow(0 2px 4px rgba(20,20,60,.18))}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.fab{padding:7px 16px 7px 8px}
.sheet.wide{width:min(840px,100%)}
.a4{background:#fff;color:#17153B;border:1px solid #DDD;border-radius:6px;padding:28px;box-shadow:0 4px 18px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:14px}
.a4 h3{margin:0;font-family:var(--display);font-size:22px} .a4 .o{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5A5878}
.a4 .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .a4 table{font-size:12.5px} .a4 td,.a4 th{padding:6px 8px;border-bottom:1px solid #E3E0F0;color:#17153B;background:none}
.a4 th{background:#1D1470;color:#fff;text-align:left} .a4 tr.tot td{background:#EEECF8;font-weight:700} .a4 .sig{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:12px;color:#5A5878;margin-top:8px} .a4 .sig span{display:block;border-bottom:1px solid #C9C5DE;height:44px}
@media (max-width:900px){.a4{padding:16px}.a4 .cols{grid-template-columns:1fr}.fab{padding:0}}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:var(--side-hi);text-align:left;width:100%;min-height:54px;transition:background .15s}
.me:hover{background:rgba(255,255,255,.14)} .me .sm{color:var(--side-ink)} .me>span:nth-child(2){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sun);color:var(--sun-ink);font-weight:700;font-size:13px;object-fit:cover}
.pp.lg{width:72px;height:72px;font-size:24px}
.side>.org:last-of-type{margin-bottom:8px}
.tour{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:26;width:min(560px,calc(100% - 32px));background:var(--surface);border:2px solid var(--pri);border-radius:20px;box-shadow:0 14px 44px rgba(10,10,50,.3);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.tour p{margin:2px 0 10px} .dots{display:flex;gap:5px;align-items:center;margin-right:auto} .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)} .dots i.on{background:var(--pri);width:18px;border-radius:99px}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.gcard h2{display:flex;gap:9px;align-items:center}
@media (max-width:900px){.tour{bottom:136px}}
.a4 .idrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:13px} .a4 .idrow b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5A5878;margin-bottom:3px}
.a4 .tot{margin-left:auto;min-width:240px} .a4 .mention{font-size:12px;color:#5A5878;border-top:1px solid #E3E0F0;padding-top:10px;display:flex;flex-direction:column;gap:4px}
.a4 .lg{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#4B3BFF;color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.ivl{display:grid;grid-template-columns:minmax(0,1fr) 62px 92px auto;gap:6px;align-items:center} .ivl.tv{grid-template-columns:minmax(0,1fr) 56px 84px 74px auto}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.06em;background:var(--soft);border-radius:8px;padding:3px 8px;white-space:nowrap}
.pub{background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 80%,#000),var(--pri));color:var(--pri-ink);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pub h2{font-family:var(--display);font-size:24px} .pub p{opacity:.9}
.tips{background:#FFF7DB;border-color:#F1DC96;color:#2B2100} .tips h2{display:flex;gap:8px;align-items:center} .tips .head{align-items:center;border-top:1px solid #F1DC96;padding-top:10px} .tips .btn{background:#fff;color:#2B2100;border-color:#E6CF86}
.alert{background:var(--crit-soft);color:var(--crit);border-radius:14px;padding:12px 16px;font-weight:600;display:flex;gap:10px;align-items:center}
.inforow{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} .inforow .in{width:100%}
.addrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:14px 20px;background:var(--soft);border-top:1px solid var(--line)}
@media (max-width:900px){h1{font-size:25px}.hero{padding:20px;border-radius:18px}.hero h1{font-size:27px}.hb{grid-template-columns:98px minmax(0,1fr) auto}
  #role{max-width:150px;font-size:14px;min-height:40px}#newBtn{font-size:0;gap:0;padding:0;width:44px}}

/* --- compléments de l'application (connexion, exercices, détails) --- */
#auth{display:none}
body.authing #auth{display:grid;place-items:center;min-height:100%;padding:20px;background:linear-gradient(115deg,color-mix(in srgb,var(--pri) 72%,#000),var(--pri) 55%,color-mix(in srgb,var(--pri) 72%,#fff))}
body.authing .shell,body.authing .fab,body.authing .tour{display:none!important}
.authc{width:min(440px,100%);padding:26px;gap:16px;border:0}
.authc h1{font-size:28px}
#yearSel{max-width:250px;font-weight:600}
.badge svg{width:15px;height:15px}
.ci b{color:#fff;font-size:15px}
label.tile{cursor:pointer} .tile b{font-size:14px}
button.tile{font:inherit;font-size:12.5px;font-weight:600;color:inherit}
details summary{font-weight:600} details[open] summary{margin-bottom:2px}
.kiph .bubble{flex:1}
.r.inforow{align-items:center}
.sheet form{min-height:0} .sheet .card{box-shadow:none}
.as svg{width:16px;height:16px}
.file{text-decoration:none}
a.r{color:inherit}
.hero .badge{background:var(--sun);color:var(--sun-ink)}
.msg.ai .say{white-space:pre-wrap}
@media (max-width:900px){#yearSel{max-width:150px;font-size:14px;min-height:40px}#newBtn{font-size:0;gap:0;padding:0;width:44px}.facts{grid-template-columns:1fr 1fr}}

/* ============ téléphone d'abord : barre d'onglets avec action centrale, feuilles qui montent du bas, tableaux en cartes ============ */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
.shell{height:100dvh}
#barMe{display:none} .tcnt{display:none}
#demoRole{max-width:230px;font-weight:600;border-color:var(--sun);background:color-mix(in srgb,var(--sun) 18%,#fff)}
.btn.shoot{justify-content:flex-start;min-height:52px;border-style:dashed;border-width:1.5px} .btn.shoot.ok{border-style:solid;border-color:var(--good);color:var(--good);background:var(--good-soft)} .btn.shoot span{overflow:hidden;text-overflow:ellipsis}
@keyframes up{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
@media (max-width:900px){
  .bar{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));gap:10px}
  .bar .logo{font-size:0;gap:0;padding:0} .bar .logo b,.bar .logo img{font-size:16px;width:34px;height:34px;border-radius:11px}
  .crumb{display:block;font:700 19px/1.2 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;letter-spacing:-.01em}
  .sp{display:none} #newBtn{display:none!important} #yearBox .tag{display:none}
  #barMe{display:grid;border:0;padding:0;background:none;flex:none} #barMe .pp{width:36px;height:36px}
  #yearSel,#demoRole{max-width:104px;min-height:36px;padding:4px 8px;font-size:13px;border-radius:99px}
  main{padding:14px 14px calc(104px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .wrap{gap:14px}
  .tabs{grid-template-columns:1fr 1fr 68px 1fr 1fr;padding:4px 6px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(20,20,60,.09);border-top:0;position:relative;z-index:16}
  .tabs a,.tabs button{min-height:56px;border-radius:14px;font-size:10.5px;position:relative;gap:4px}
  .tabs svg.i{width:23px;height:23px} .tabs [aria-current="page"]{color:var(--pri)} .tabs [aria-current="page"] svg.i{stroke-width:2.3}
  .tabs .plus{width:58px;height:58px;min-height:58px;border-radius:50%;background:var(--sun);color:var(--sun-ink);margin:-20px auto 0;box-shadow:0 8px 20px rgba(20,20,60,.28);border:4px solid var(--surface);padding:0}
  .tabs .plus svg.i{width:26px;height:26px;stroke-width:2.6} .tabs .plus:active{transform:scale(.94)}
  .tcnt{display:block;position:absolute;top:5px;left:calc(50% + 6px);background:var(--crit);color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:0 5px;min-width:16px;line-height:16px;text-align:center}
  .hero{padding:18px;border-radius:20px;gap:10px} .hero h1{font-size:25px} .hero .sub{font-size:14px;margin-top:4px!important}
  .hero .btns,.wrap>.chips,.head>.btns{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .hero .btns::-webkit-scrollbar,.wrap>.chips::-webkit-scrollbar,.head>.btns::-webkit-scrollbar{display:none}
  .hero .btns{margin:2px -18px 0;padding:0 18px;scroll-padding:0 18px} .wrap>.chips,.head>.btns{margin:0 -14px;padding:0 14px;scroll-padding:0 14px}
  .hero .btn,.wrap>.chips>.chip,.head>.btns>.btn{flex:none;scroll-snap-align:start}
  .head{flex-direction:column;align-items:stretch;gap:10px} .ct .btns,.card>.head{flex-direction:row}
  .card>.head,.kipc .head,.tips .head{flex-direction:row;align-items:center}
  .grid{gap:10px} .card{padding:16px;border-radius:16px} .card.flush{padding:0}
  .kpi{padding:14px;gap:2px} .kpi .l{font-size:12.5px;gap:6px} .kpi .l .i{width:28px;height:28px;padding:6px} .big{font-size:20px}
  h1{font-size:23px} .r{padding:12px 14px;min-height:60px;gap:4px 10px} .ct{padding:12px 14px}
  .hb{grid-template-columns:92px minmax(0,1fr) auto;font-size:13px}
  .facts{grid-template-columns:1fr 1fr}
  .ov.on{animation:fade .2s}
  .sheet,.sheet.wide{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;max-height:92dvh;border-left:0;border-radius:22px 22px 0 0;animation:up .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 40px rgba(8,12,24,.25)}
  .sheet.wide{height:92dvh}
  .sheet form{height:auto!important;max-height:calc(92dvh - 12px - env(safe-area-inset-bottom))} .sheet.wide form{height:100%!important;max-height:none}
  .sheet::before{content:"";width:42px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 0;flex:none}
  .sheet header{padding:6px 16px 12px} .sheet .body{padding:16px;min-height:0} .sheet footer{padding:12px 16px} .sheet footer .btn{flex:1}
  .two{gap:10px} .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fab{right:14px;bottom:calc(86px + env(safe-area-inset-bottom));width:50px;height:50px}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom));width:max-content;text-align:center} .tour{bottom:calc(92px + env(safe-area-inset-bottom));padding:12px}
  .side{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;box-shadow:12px 0 40px rgba(8,12,24,.3)}
  .menu::after{content:"";position:fixed;inset:0;background:rgba(8,12,24,.5);z-index:39}
  .scroll:has(table.cardy){overflow:visible}
  table.cardy,table.cardy tbody,table.cardy tr,table.cardy td{display:block}
  table.cardy tr:has(th){display:none}
  table.cardy tr{padding:12px 14px;border-bottom:1px solid var(--line)} table.cardy tr:last-child{border-bottom:0}
  table.cardy td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;text-align:right;align-items:baseline;white-space:normal}
  table.cardy td::before{content:attr(data-l);color:var(--muted);font-size:13px;text-align:left;flex:none;font-weight:400}
  table.cardy td:first-child,table.cardy td[data-wide]{display:block;text-align:left;padding-bottom:5px} table.cardy td:first-child{font-weight:600}
  table.cardy td:first-child::before,table.cardy td[data-wide]::before{content:none}
  table.cardy td[data-e]{display:none} table.cardy td.hm{display:flex} table.cardy td.hm[data-e]{display:none} table.cardy .om{display:none}
  table.cardy tr.tot,table.cardy tr.grp{background:var(--soft)} table.cardy tr.tot td,table.cardy tr.grp td{background:none}
  table.cardy td .in{max-width:150px}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:380px){.g4,.gh,.g3:has(.kpi){grid-template-columns:repeat(2,minmax(0,1fr))}.big{font-size:18px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (display-mode:standalone){.bar{padding-top:calc(10px + env(safe-area-inset-top))}}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} label.f .in{width:100%;min-width:0}
@media (max-width:900px){
  .head{flex-wrap:nowrap} .wrap>*,.head>*{min-width:0}
  .gh:not(:has(.kpi)){grid-template-columns:minmax(0,1fr)}
  .hb{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px} .hb .meter{grid-column:1/-1;order:3}
  .r .btns .in{max-width:150px}
}

/* Kip propose une saisie */
.prop{background:var(--card,#fff);border:1.5px solid var(--pri);border-radius:16px;padding:14px;display:grid;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.prop .ph{display:flex;gap:10px;align-items:center} .prop .ph>span:nth-child(2){flex:1;min-width:0;display:grid} .prop .ph .big{font-size:20px;font-weight:800;white-space:nowrap}
.prop .facts{grid-template-columns:1fr 1fr;gap:8px} .prop details summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--pri)} .prop details[open] summary{margin-bottom:8px}
.prop .warn{margin:0;padding:8px 10px 8px 26px;border-radius:10px;background:#fff6e0;color:#7a5200;font-size:13px}
.prop .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .prop .btns .pri{flex:1;min-width:150px;justify-content:center}
.prop.done{display:flex;align-items:center;gap:8px;border-color:var(--ok,#1f9d6b);font-size:14px} .prop.done>span{flex:1} .prop.done.off{border-color:var(--line,#ddd);color:var(--mut,#777)}
.att{display:inline-flex;gap:6px;align-items:center;font-size:12px;opacity:.9;margin-right:6px} .att svg{width:14px;height:14px}
.att.in{display:flex;background:var(--soft);border-radius:10px;padding:6px 10px;font-size:13px} .att.in span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.send .btn.icon{padding:0;width:40px;height:40px;justify-content:center;flex:none}
@media (max-width:520px){.prop .facts{grid-template-columns:1fr}}
.send textarea.in{min-height:44px;height:44px;max-height:90px;width:auto;min-width:0;resize:none}
.sheet footer .send .btn{flex:none}

/* ------------------------------------------------------------ l'univers du sport : Kip en tenue, à l'entraînement */
.kip{overflow:visible}
.kip .kx,.kip .kbody{transform-box:view-box}
.kip .karm{transform-origin:53.5px 50px} .kip .kracket{transform-origin:53px 51px} .kip.k-combat .kbody{transform-origin:32px 60px}
.kip.play .kbody,.kip.play .kx{animation-duration:5.2s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.3,.1,.3,1)}
.kip.once .kbody,.kip.once .kx,.fab:hover .kip .kbody,.fab:hover .kip .kx{animation-duration:5.2s;animation-iteration-count:1;animation-timing-function:cubic-bezier(.3,.1,.3,1)}
.kip.play .kbody,.kip.once .kbody,.fab:hover .kip .kbody{animation-name:kipHop}
.kip.k-escrime.play .kbody,.kip.k-escrime.once .kbody,.fab:hover .kip.k-escrime .kbody{animation-name:kipLungeBody}
.kip.play .karm,.kip.once .karm,.fab:hover .kip .karm{animation-name:kipLunge}
.kip.play .kball,.kip.once .kball,.fab:hover .kip .kball{animation-name:kipBall}
.kip.play .kracket,.kip.once .kracket,.fab:hover .kip .kracket{animation-name:kipSwing}
.kip.play .kfly,.kip.once .kfly,.fab:hover .kip .kfly{animation-name:kipFly}
.kip.k-combat.play .kbody,.kip.k-combat.once .kbody,.fab:hover .kip.k-combat .kbody{animation-name:kipBow}
.kip.k-natation.play .kbody,.kip.k-natation.once .kbody{animation-name:kipBob}
.kip.play .kwave,.kip.once .kwave{animation:kipWave 2.6s linear infinite}
@keyframes kipLunge{0%{transform:none}5%{transform:rotate(-14deg)}11%,21%{transform:translate(5px,3px) rotate(52deg)}30%{transform:none}55%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}100%{transform:none}}
@keyframes kipLungeBody{0%{transform:none}5%{transform:translateX(-2.5px)}11%,21%{transform:translateX(5px)}30%,100%{transform:none}}
@keyframes kipHop{0%{transform:none}5%{transform:translateY(-5px)}10%{transform:none}14%{transform:translateY(-2.5px)}18%,100%{transform:none}}
@keyframes kipBall{0%{transform:none}7%{transform:translateY(-22px)}14%{transform:none}20%{transform:translateY(-12px)}26%{transform:none}30%{transform:translateY(-5px)}34%,100%{transform:none}}
@keyframes kipSwing{0%{transform:none}6%{transform:rotate(-34deg)}13%{transform:rotate(38deg)}24%,100%{transform:none}}
@keyframes kipFly{0%,9%{transform:none}16%{transform:translate(16px,-14px)}24%{transform:translate(22px,-2px);opacity:1}26%{opacity:0}40%{transform:none;opacity:0}48%,100%{opacity:1;transform:none}}
@keyframes kipBow{0%{transform:none}8%,18%{transform:rotate(16deg)}28%,100%{transform:none}}
@keyframes kipBob{0%,100%{transform:none}50%{transform:translateY(2.5px)}}
@keyframes kipWave{from{transform:translateX(0)}to{transform:translateX(16px)}}
.kip.once .kbody,.kip.once .kx{animation-duration:4.4s}
@media (prefers-reduced-motion:reduce){.kip .kbody,.kip .kx{animation:none!important}}
.hero>.motif{position:absolute;z-index:0;right:-14px;bottom:-26px;width:210px;height:210px;opacity:.17;color:inherit;pointer-events:none;transform:rotate(-6deg)}
@media (max-width:900px){.hero>.motif{width:150px;height:150px;right:-18px;bottom:-22px;opacity:.14}}
.kiph .kip.play{margin-right:6px}

/* ------------------------------------------------------------ préparer le déplacement : billets par voyageur, participants, sondages, réponses */
.r.leg{background:var(--soft)} .r.legp{padding-left:28px} .r.legp .btns,.r.leg .btns{flex-wrap:nowrap;align-items:center;gap:6px}
.miss{color:#B4231F;font-weight:600} .num.sel{user-select:all;-webkit-user-select:all}
.ctsub{padding:0 20px 10px}
.pollres{display:grid;gap:8px;margin:8px 0 4px} .po{display:grid;grid-template-columns:minmax(0,1fr) 90px 22px;gap:4px 10px;align-items:center;font-size:14px}
.po i{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;display:block} .po i b{display:block;height:100%;background:var(--muted);border-radius:99px} .po.best i b{background:var(--pri)} .po.best>span:first-child{font-weight:700}
.po .sm{grid-column:1/-1;margin-top:-2px} .po .sm:empty{display:none}
.asks .ask{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)} .asks .ask>div:first-child{flex:1;min-width:200px} .asks .ask .t{font-weight:600}
.asks .ask .btns{flex-wrap:nowrap} .asks .ask .btn{min-width:84px;justify-content:center} .asks .chip[aria-pressed=true]{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
@media (max-width:700px){.asks .ask .btns{width:100%} .asks .ask .btns .btn{flex:1} .po{grid-template-columns:minmax(0,1fr) 70px 20px}}
@media (max-width:700px){.r.leg,.r.trav{grid-template-columns:minmax(0,1fr);row-gap:8px} .r.trav>.btns,.r.trav>.sm{padding-left:52px;justify-content:flex-start} .r.leg>.btns{justify-content:space-between} .r.legp{padding-left:14px}}
/* ------------------------------------------------------------ option calendrier et direct */
.r.cal{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
.cday{display:grid;justify-items:center;width:46px;padding:6px 0;border-radius:12px;background:var(--soft);line-height:1.1} .cday b{font-size:19px} .cday span{font-size:11px;text-transform:uppercase;color:var(--muted)}
.cmain{display:grid;gap:3px;min-width:0} .cpills{display:flex;gap:6px;flex-wrap:wrap} .r.cal>.btns{flex-direction:column;align-items:flex-end;gap:4px}
.alert.ok{background:#e4f6ee;color:#0c5b3d}
.lv{display:grid;gap:6px;margin:8px 0 2px 46px} .lv>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;font-size:13.5px} .lv>div>span:nth-child(2){overflow-wrap:anywhere}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:#E0453A;margin-right:8px;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,69,58,.55)}100%{box-shadow:0 0 0 10px rgba(224,69,58,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
@media (max-width:700px){.r.cal{grid-template-columns:auto minmax(0,1fr)} .r.cal>.btns{grid-column:2;flex-direction:row;justify-content:flex-start;flex-wrap:wrap} .lv{margin-left:0} .lv>div{grid-template-columns:minmax(0,1fr) auto} .lv>div>.pill{grid-column:1/-1;justify-self:start}}

/* ------------------------------------------------------------ barre de tri, de recherche et de filtre des listes */
.ltools{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ltools .in{width:auto;min-height:42px;padding-top:8px;padding-bottom:8px} .ltools select.in{max-width:230px;flex:0 1 auto}
.lsearch{position:relative;flex:1 1 200px;min-width:0;display:block} .lsearch .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.55;pointer-events:none} .lsearch .in{width:100%;padding-left:38px}
.ltools .btn.icon{width:42px;height:42px;padding:0;justify-content:center;flex:none}
@media (max-width:700px){.ltools .lsearch{flex:1 1 100%} .ltools select.in{flex:1 1 0;min-width:0;max-width:none}}

/* ------------------------------------------------------------ communication sur les réseaux sociaux */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .mth{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
.mth img{width:100%;height:100%;object-fit:cover;display:block} .mth .x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(20,20,40,.7);color:#fff;display:grid;place-items:center;cursor:pointer} .mth .x .i{width:14px;height:14px}
.mth.add{border:2px dashed var(--line);background:none;cursor:pointer;font-size:12px;color:var(--muted);text-align:center;gap:2px;align-content:center} .vid{display:grid;justify-items:center;gap:4px;font-size:12px;color:var(--muted)}
.card.net{display:grid;gap:10px;align-content:start} .prev{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:12px} .prev>*{flex:0 0 min(100%,230px);aspect-ratio:var(--r);border-radius:12px;overflow:hidden;background:var(--soft);scroll-snap-align:start;display:grid;place-items:center}
.prev img{width:100%;height:100%;object-fit:cover;display:block}

/* Graphiques des fiches de club : barre empilée et barres horizontales. Couleurs de série fixes, textes en encre. */
:root{ --viz1:#2a78d6; --viz2:#eb6834; --viz3:#1baf7a; --viz4:#eda100; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --viz1:#3987e5; --viz2:#d95926; --viz3:#199e70; --viz4:#c98500; } }
:root[data-theme="dark"]{ --viz1:#3987e5; --viz2:#d95926; --viz3:#199e70; --viz4:#c98500; }
.vizgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px 28px;margin-top:14px}
.viz .vt{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.viz .vt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.viz .stack{display:flex;gap:2px;height:14px}
.viz .stack i{display:block;min-width:3px;border-radius:4px}
.viz .lg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
.viz .lg span{display:inline-flex;align-items:center;gap:6px}
.viz .lg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.viz .lg b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.viz .hb{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:10px;align-items:center;font-size:12.5px;padding:3px 0;border-radius:6px}
.viz .hb:hover{background:var(--soft)}
.viz .hb .l{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz .hb .tr{height:10px}
.viz .hb .tr i{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0}
.viz .hb .v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.viz .more{font-size:12px;color:var(--muted);margin-top:4px}
/* ---------- Affichage adaptatif : plus de place sur grand écran, tableaux lisibles, rien de coupé */
.wrap{max-width:min(1640px,100%)}
@media (min-width:1500px){ main{padding:32px 40px} .wrap{gap:22px} }
@media (min-width:901px){ th{white-space:normal;line-height:1.25} td,th{padding:10px 12px} td:first-child,th:first-child{padding-left:20px} td:last-child,th:last-child{padding-right:20px} }
.scroll{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;position:relative}
.scroll.drag{cursor:grabbing;user-select:none}
.scroll.ovr{box-shadow:inset -18px 0 14px -14px rgba(15,23,42,.28)} .scroll.ovl{box-shadow:inset 18px 0 14px -14px rgba(15,23,42,.28)} .scroll.ovl.ovr{box-shadow:inset 18px 0 14px -14px rgba(15,23,42,.28),inset -18px 0 14px -14px rgba(15,23,42,.28)}
.scrollnav{display:none;justify-content:flex-end;gap:6px;padding:6px 12px 6px;position:sticky;top:0;z-index:2}
.scrollnav:has(+ .scroll.ovl),.scrollnav:has(+ .scroll.ovr){display:flex}
.scrollnav button{width:32px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.scrollnav button:hover{background:var(--soft)}
.scrollnav:has(+ .scroll:not(.ovl)) .sl,.scrollnav:has(+ .scroll:not(.ovr)) .sr{opacity:.35;pointer-events:none}
/* Textes : on passe à la ligne plutôt que de couper. */
.viz .hb .l{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
.btn{max-width:100%} .chip{max-width:100%;overflow-wrap:anywhere;text-align:left} .pill{max-width:100%}
.ct h2,.head h2,.card h2{overflow-wrap:anywhere;min-width:0} .ct>*,.head>*{min-width:0}
.kpi .l,.kpi .big{overflow-wrap:anywhere} .facts>div{min-width:0;overflow-wrap:anywhere}
select.in{text-overflow:ellipsis} [data-chg="calD"]{max-width:none!important;width:auto;flex:1 1 190px}
.sub,.sm,.help{overflow-wrap:anywhere}
/* Téléphone : barre du haut compacte, filtres et graphiques sur toute la largeur. */
@media (max-width:900px){
  #histBtn,#helpBtn{font-size:0;gap:0;padding:0;width:44px;min-width:44px;justify-content:center;margin-right:6px!important} #histBtn svg,#helpBtn svg{margin:0}
  .vizgrid{grid-template-columns:minmax(0,1fr);gap:18px} .viz .hb{grid-template-columns:minmax(0,40%) minmax(0,1fr) auto}
  [data-chg="calD"]{flex:1 1 100%} .scrollnav{display:none!important}
  .ct{align-items:flex-start} .ct>.sm{flex:1 1 100%}
  #sheet .send textarea{font-size:16px} .in,select.in,textarea.in{font-size:16px}
  .fab span{display:none}
}@media (max-width:900px){
  html,body{overflow-x:clip}
  #helpBtn{display:none}                                   /* sur téléphone, « Explique-moi cette page » est la première proposition de Kip */
  #crumb{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .head>.btns,.hero .btns,.wrap>.btns,.card>.btns{flex-wrap:wrap!important;overflow:visible!important;row-gap:8px}
  .hero .btns .btn,.head>.btns .btn{flex:0 1 auto}
  table.cardy td[style*="min-width"]{min-width:0!important}
}@media (max-width:900px){
  .btn.xs{white-space:normal;height:auto;min-height:36px;text-align:left;line-height:1.25;padding-top:6px;padding-bottom:6px}
  table.cardy td{min-width:0;overflow-wrap:anywhere} table.cardy .who{min-width:0} table.cardy .who>div{min-width:0}
  details>.scroll:has(table.cardy){overflow-x:clip}
}.vuesel{display:grid;gap:4px;margin:14px 12px 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--side-ink,#9BA7BD)}
.vuesel select{font-size:14px;text-transform:none;letter-spacing:0}@media (max-width:900px){ #vueTop{display:none} }
@media (min-width:901px){ .vuesel{display:none} }
/* ---------- Résultats sportifs et compétitions : médailles, podiums, cartes vivantes */
:root{ --gold1:#F7D774; --gold2:#C8901A; --silv1:#E6EAF0; --silv2:#8D99AB; --bron1:#EDB98A; --bron2:#A8642B; }
.medal{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#3a2a00;background:radial-gradient(circle at 32% 28%,#fff8 0 18%,transparent 19%),linear-gradient(145deg,var(--gold1),var(--gold2));box-shadow:0 0 0 3px #fff6 inset,0 4px 10px -3px #0006;overflow:hidden}
.medal.s{background:radial-gradient(circle at 32% 28%,#fff9 0 18%,transparent 19%),linear-gradient(145deg,var(--silv1),var(--silv2));color:#1f2733}
.medal.b{background:radial-gradient(circle at 32% 28%,#fff7 0 18%,transparent 19%),linear-gradient(145deg,var(--bron1),var(--bron2));color:#3b1d05}
.medal.f{background:linear-gradient(145deg,#7C9BFF,#2B50E6);color:#fff}
.medal.n{background:var(--soft);color:var(--muted);box-shadow:none;font-size:14px;font-weight:700}
.medal::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,#fff9 50%,transparent 58%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite}
.medal.n::after,.medal.f::after{display:none}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.resgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rescard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;animation:popin .35s both}
.rescard:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px #0006}
.rescard.g{border-color:var(--gold2);background:linear-gradient(135deg,color-mix(in srgb,var(--gold1) 30%,var(--surface)),var(--surface) 60%)}
.rescard.s{border-color:var(--silv2);background:linear-gradient(135deg,color-mix(in srgb,var(--silv1) 45%,var(--surface)),var(--surface) 60%)}
.rescard.b{border-color:var(--bron2);background:linear-gradient(135deg,color-mix(in srgb,var(--bron1) 30%,var(--surface)),var(--surface) 60%)}
.rescard .rk{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rescard .rk b{font-size:19px}
.rescard .bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--soft);overflow:hidden}
.rescard .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pri),#7C9BFF)}
.rescard.g .bar i{background:linear-gradient(90deg,var(--gold2),var(--gold1))}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;background:var(--pri-soft);color:var(--pri)}
.badge.g{background:color-mix(in srgb,var(--gold1) 55%,transparent);color:#6b4a00}.badge.s{background:var(--silv1);color:#39424f}.badge.b{background:color-mix(in srgb,var(--bron1) 60%,transparent);color:#5b2f0b}
.podium{position:relative;overflow:hidden;border-radius:20px;padding:22px;color:#fff;background:radial-gradient(1200px 300px at 85% -40%,#ffffff2e,transparent 60%),linear-gradient(120deg,#1B2A6B,#2B50E6 55%,#7C3AED);animation:popin .4s both}
.podium h2{color:#fff;margin:0 0 4px;font-size:22px}.podium .sm{color:#ffffffcc}
.podium .stats{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:16px;align-items:flex-end}
.podium .st{display:flex;align-items:center;gap:10px}.podium .st b{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}.podium .st span{font-size:12.5px;color:#ffffffcc;display:block}
.podium .steps{position:absolute;right:22px;bottom:0;display:flex;align-items:flex-end;gap:6px;opacity:.9}
.podium .steps i{display:block;width:44px;border-radius:8px 8px 0 0;background:#ffffff2b}
.podium .steps i:nth-child(1){height:46px}.podium .steps i:nth-child(2){height:70px;background:#ffffff45}.podium .steps i:nth-child(3){height:32px}
.podium .medal{animation:floaty 3.5s ease-in-out infinite}
.seasonh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 2px 0}
.seasonh h2{font-size:19px;margin:0}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.evcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:0;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;overflow:hidden;transition:transform .16s,box-shadow .16s;animation:popin .35s both}
.evcard:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px #0007}
.evcard .top{display:flex;gap:12px;align-items:center;padding:14px 16px;color:#fff;background:linear-gradient(120deg,#22308a,#2B50E6 60%,#6d5cf0)}
.evcard.past .top{background:linear-gradient(120deg,#334155,#64748b)}
.evcard.g .top{background:linear-gradient(120deg,#8a5a00,#C8901A 55%,#F7D774)}.evcard.s .top{background:linear-gradient(120deg,#4b5563,#8D99AB)}.evcard.b .top{background:linear-gradient(120deg,#6b3a12,#A8642B 60%,#EDB98A)}
.evcard .dt{flex:none;width:52px;text-align:center;background:#ffffff26;border-radius:12px;padding:6px 0;line-height:1.05}
.evcard .dt b{display:block;font-size:22px}.evcard .dt span{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.evcard .top h3{margin:0;font-size:16px;line-height:1.25;color:#fff;overflow-wrap:anywhere}.evcard .top .sm{color:#ffffffcc}
.evcard .bot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 16px 14px;flex-wrap:wrap}
.evcard .cd{font-weight:800;font-size:15px;color:var(--pri)}
@media (prefers-reduced-motion:reduce){.medal::after,.podium .medal,.rescard,.evcard,.podium{animation:none!important}}
@media (max-width:900px){.podium .steps{display:none}.resgrid,.evgrid{grid-template-columns:minmax(0,1fr)}}
/* ---------- Niveau d'une compétition : une couleur par niveau (international, national, régional), portée par un trait et une étiquette */
:root{ --lvI:#7C3AED; --lvN:#2B50E6; --lvR:#94A3B8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lvI:#A78BFA; --lvN:#7C9BFF; --lvR:#64748B; } }
:root[data-theme="dark"]{ --lvI:#A78BFA; --lvN:#7C9BFF; --lvR:#64748B; }
.lvtag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid currentColor;background:transparent;white-space:nowrap}
.lvtag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lvtag.I{color:var(--lvI)}.lvtag.N{color:var(--lvN)}.lvtag.R,.lvtag.O{color:var(--muted);font-weight:600;border-color:var(--line)}
.lvlegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.lvlegend span{display:inline-flex;align-items:center;gap:6px}.lvlegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lvlegend i.I{background:var(--lvI)}.lvlegend i.N{background:var(--lvN)}.lvlegend i.R{background:var(--lvR)}
/* calendrier : un trait à gauche */
.r.cal.lvI{box-shadow:inset 4px 0 0 var(--lvI)}.r.cal.lvN{box-shadow:inset 4px 0 0 var(--lvN)}.r.cal.lvR,.r.cal.lvO{box-shadow:inset 4px 0 0 var(--lvR)}
.r.cal.lvI .t,.r.cal.lvN .t{font-weight:700}.r.cal.lvR .t,.r.cal.lvO .t{font-weight:500}
/* résultats : national et international en avant, régional en retrait */
.rescard.lvI{box-shadow:inset 4px 0 0 var(--lvI)}.rescard.lvN{box-shadow:inset 4px 0 0 var(--lvN)}
.rescard.lvI .t,.rescard.lvN .t{font-weight:700}
.rescard.lvR,.rescard.lvO{padding:9px 12px;background:transparent}
.rescard.lvR .medal,.rescard.lvO .medal{width:36px;height:36px;font-size:14px}
.rescard.lvR .rk b,.rescard.lvO .rk b{font-size:16px}.rescard.lvR .t,.rescard.lvO .t{font-weight:500}
.rescard.lvR.g,.rescard.lvR.s,.rescard.lvR.b,.rescard.lvO.g,.rescard.lvO.s,.rescard.lvO.b{background:var(--surface)}
/* compétitions : à venir en couleur selon le niveau, passées en gris avec un simple trait */
.evcard.lvI:not(.past) .top{background:linear-gradient(120deg,#4c1d95,#7C3AED 60%,#a78bfa)}
.evcard.lvR:not(.past) .top,.evcard.lvO:not(.past) .top{background:linear-gradient(120deg,#3b5b8a,#5b7fb5)}
.evcard.past{border-left:4px solid var(--lvR)}.evcard.past.lvI{border-left-color:var(--lvI)}.evcard.past.lvN{border-left-color:var(--lvN)}.csbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.csbar .in{flex:1 1 200px;min-width:0}
.chips.cs{max-height:260px;overflow-y:auto;padding:2px} .chips.cs .chip[aria-pressed="true"]{order:-1}.mcal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mcal .mm{border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-height:86px;display:flex;flex-direction:column;gap:5px;min-width:0}
.mcal .mm.cur{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)}.mcal .mm.old{background:var(--soft)}.mcal .mm b{font-size:13px;text-transform:capitalize}
.mchip{display:flex;align-items:center;gap:6px;border:0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;text-align:left;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mchip i{font-style:normal;font-weight:800;color:var(--c)}
.card.evres{gap:10px}.card.evres.lvI{box-shadow:inset 4px 0 0 var(--lvI)}.card.evres.lvN{box-shadow:inset 4px 0 0 var(--lvN)}
@media (max-width:900px){.mcal{grid-template-columns:repeat(2,minmax(0,1fr))}}.standrow{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:8px 14px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.standgrid{display:flex;flex-wrap:wrap;gap:8px}
.stand{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 12px;border-radius:12px;border:1px solid var(--line);min-width:128px}.standtxt{display:grid;gap:2px;justify-items:start;flex:none;max-width:100%}
.stand.lvN{box-shadow:inset 3px 0 0 var(--lvN)}.stand b{font-size:20px;line-height:1.1}
@media (max-width:900px){.standrow{grid-template-columns:minmax(0,1fr)}}.evol{width:150px;height:64px;flex:none;display:block;overflow:hidden}.stand.hasev{flex:0 0 auto;max-width:100%;justify-content:space-between}.evd{font-size:12px;font-weight:700;margin-left:6px;vertical-align:middle;color:var(--muted)}@media (max-width:520px){.stand.hasev{flex:1 1 100%;justify-content:space-between}}
.notifbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-color:var(--pri);background:var(--pri-soft)}
.belln{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--crit);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
@media (max-width:900px){#bellBtn{font-size:0;gap:0;padding:0;width:44px;min-width:44px;justify-content:center;margin-right:6px!important}.notifbar{grid-template-columns:auto minmax(0,1fr)}.notifbar .btns{grid-column:1/-1}}
.rolegrp{margin-top:10px}.rolegrp:first-of-type{margin-top:0}.rolegh{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.rolegh b{font-size:13px}

.btn.undo{min-width:40px;padding:0 10px;font-size:19px;line-height:1;justify-content:center}.btn.undo:disabled{opacity:.35;cursor:default}
@media (max-width:900px){#undoBox{margin-right:6px!important}.btn.undo{min-width:38px;padding:0 6px}}

.pointme{outline:3px solid var(--sun);outline-offset:3px;animation:pointme 1s ease-in-out 6}@keyframes pointme{50%{outline-offset:8px}}@media (prefers-reduced-motion:reduce){.pointme{animation:none}}

/* Bandeau sur téléphone : le titre de page est déjà sous le bandeau ; quand Annuler/Rétablir s'affichent, ils prennent la place de la pastille du compte (qui reste dans le menu). */
@media (max-width:520px){#crumb,.crumb{display:none!important}.btn.undo{min-width:34px;padding:0 4px}#undoBox{gap:2px!important;margin-right:4px!important}}
@media (max-width:520px){*:has(> #undoBox:not([hidden])) > #barMe{display:none}}

.ffecard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}@media (max-width:520px){.ffecard{grid-template-columns:auto minmax(0,1fr)}.ffecard .btn{grid-column:1/-1;justify-content:center}}

#testBanner{position:fixed;top:0;left:0;right:0;z-index:9999;height:26px;display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#3b2400;background:repeating-linear-gradient(135deg,#ffb020 0 14px,#ffc94d 14px 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.is-test{padding-top:26px}body.is-test .bar,body.is-test aside,body.is-test #side{top:26px}

/* Lignes de liste sur téléphone : la partie droite (boutons, menu déroulant) ne peut plus écraser le libellé jusqu'à l'afficher lettre par lettre. */
@media (max-width:640px){
  .r{grid-template-columns:minmax(0,1fr) fit-content(42%)}
  .r>.num,.r>b,.r>.sm{white-space:normal;text-align:right;overflow-wrap:break-word}
  .r>.btns{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .r select,.r .in{max-width:100%!important;min-width:0}
  /* Une ligne qui porte un menu déroulant passe sur deux étages : le libellé, puis le réglage sur toute la largeur. */
  .r:has(>.btns select),.r:has(>select){grid-template-columns:minmax(0,1fr)}
  .r>.btns:has(select){display:flex;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:flex-start;width:100%}
  .r>.btns:has(select) select,.r>select{flex:1 1 auto;width:100%}
}
@media (max-width:520px){#testBanner .long{display:none}}
/* Menu « Créer » : une famille par bloc, chacune avec sa couleur. */
.cgrp{--c:var(--pri);margin-bottom:18px}.cgrp:last-child{margin-bottom:0}
.c-fin{--c:#12976A}.c-club{--c:var(--pri)}.c-bur{--c:#C77700}
:root[data-theme="dark"] .c-fin{--c:#3CCB95}:root[data-theme="dark"] .c-bur{--c:#F0A93B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .c-fin{--c:#3CCB95}:root:not([data-theme="light"]) .c-bur{--c:#F0A93B}}
.cgh{display:flex;align-items:baseline;gap:8px;margin:0 2px 8px}.cgh i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;align-self:center}.cgh b{font-size:14px;color:var(--ink)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.ctile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:11px 12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--c) 22%,var(--line));background:color-mix(in srgb,var(--c) 7%,var(--surface));font:inherit;color:var(--ink);cursor:pointer;min-height:60px;transition:transform .12s,border-color .15s,background .15s}
.ctile:hover,.ctile:focus-visible{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));transform:translateY(-1px)}.ctile:active{transform:none}
.ctile .ci{background:var(--c)!important;color:#fff}.ctx{display:grid;gap:1px;min-width:0}.ctx b{font-size:14.5px}.ctx .sm{line-height:1.3}
@media (prefers-reduced-motion:reduce){.ctile{transition:none}.ctile:hover{transform:none}}
/* Apparence : le choix clair / sombre, au bas du menu. */
#themeSeg{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 10px 8px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(255,255,255,.07)}#themeSeg .sm{color:var(--side-ink)}
#themeSeg>div{display:flex;gap:2px;background:rgba(0,0,0,.22);border-radius:9px;padding:2px}
#themeSeg button{border:0;background:transparent;color:var(--side-ink);font:inherit;font-size:12.5px;font-weight:600;padding:6px 9px;border-radius:7px;cursor:pointer;min-height:32px}
#themeSeg button[aria-pressed="true"]{background:#fff;color:#1D1470}
/* Sur téléphone : un bouton de ligne se replie sur deux lignes pour laisser la place au libellé. */
@media (max-width:640px){.r>.btns .btn.xs,.r>.btn.xs,td .btn.xs{white-space:normal;line-height:1.15;text-align:center;max-width:104px;padding:6px 9px;min-height:36px}.cgrid{grid-template-columns:minmax(0,1fr)}}
/* Sur téléphone : une ligne dont la partie droite porte plusieurs éléments (pastille + boutons) passe sur deux étages, pour que le nom reste entier. */
@media (max-width:640px){
  .r:has(>.btns>:nth-child(2)){grid-template-columns:minmax(0,1fr)}
  .r:has(>.btns>:nth-child(2))>.btns{justify-content:flex-start;flex-wrap:wrap;gap:8px;width:100%}
  .r:has(>.btns>:nth-child(2))>.btns .btn.xs{max-width:none;white-space:nowrap}
  /* Un nom ne se coupe jamais au milieu d'un mot. */
  .who .t,.r .t,td .t{overflow-wrap:break-word;word-break:normal;hyphens:none}
}
/* Apparence : le libellé au-dessus, les trois choix sur toute la largeur. Tient dans un menu étroit comme dans un menu large. */
#themeSeg{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px}
#themeSeg .sm{white-space:nowrap;padding-left:4px}
#themeSeg>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#themeSeg button{padding:6px 2px;white-space:nowrap;min-width:0;font-size:12px}
.grpban{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;border-color:var(--pri)}@media (max-width:640px){.grpban{grid-template-columns:auto minmax(0,1fr)}.grpban .btn{grid-column:1/-1;justify-content:center}}

.asrole{box-shadow:none;padding:10px 14px;margin-bottom:12px}.asrole>summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--pri)}