/* BLACK BODY FIT : identité visuelle
   Noir pur, blanc cassé, un seul accent (volt). Signature : le trait oblique.
   Boutons en parallélogramme, titre d'accueil incliné, le reste reste sobre. */
:root {
  --bg: #000;
  --panel: #0e0e0f;
  --panel2: #161618;
  --line: #262629;
  --line2: #3b3b40;
  --ink: #f4f3ee;
  --ink2: #b9b9bf;
  --ink3: #85858c;
  --volt: #c8ff3d;
  --volt-ink: #050505;
  --red: #ff5a4f;
  --amber: #ffb020;
  --green: #3ddc97;
  --r: 6px;
  --r2: 10px;
  --slant: 12px;
  --f-d: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-b: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --bar-h: 56px;
  --tab-h: 62px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--f-b);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh;
}
body.has-sheet { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
h1 { font-size: clamp(34px, 7vw, 58px); }
h2 { font-size: clamp(26px, 4.6vw, 38px); }
h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--volt); color: var(--volt-ink); padding: 8px 14px; z-index: 300; font-weight: 700; }
.skip:focus { left: 8px; }
.muted { color: var(--ink3); }
.center { text-align: center; }
[hidden] { display: none !important; }
.ic { flex: none; }

/* ---------- Boutons : parallélogramme ---------- */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 30px; border: 0; background: var(--volt); color: var(--volt-ink);
  font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.92); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--ink); }
.btn-sm { min-height: 38px; padding: 0 22px; font-size: 14px; --slant: 9px; }
.btn-line { background: var(--line2); color: var(--ink); }
.btn-line::before { content: ''; position: absolute; inset: 1px; background: var(--bg); clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); z-index: -1; }
.btn-danger { background: var(--red); color: #1a0503; }
.btn-ghost { background: transparent; color: var(--ink2); clip-path: none; padding: 0 14px; }
.btn-ghost:hover { color: var(--ink); filter: none; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: 50%; color: var(--ink); }
.icon-btn:hover { background: var(--panel2); }
.link { color: var(--volt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn { background: none; border: 0; color: var(--volt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }

/* ---------- Mise en page ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 720px; }
.wrap.sec { padding-top: 44px; padding-bottom: 8px; }
main#view { display: block; outline: none; min-height: 60vh; }
body[data-area="student"] main#view, body[data-area="admin"] main#view { padding: 20px 18px calc(var(--tab-h) + var(--safe-b) + 28px); max-width: 1100px; margin: 0 auto; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: 1fr; }
.grid.three { grid-template-columns: 1fr; }
.grid.four { grid-template-columns: 1fr 1fr; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink2); margin-top: 8px; max-width: 60ch; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 16px; }
.sec-head:first-child { margin-top: 0; }

/* ---------- En-tête ---------- */
#topbar { position: sticky; top: 0; z-index: 60; background: rgba(0, 0, 0, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: var(--safe-t); }
.bar-in { display: flex; align-items: center; gap: 18px; height: var(--bar-h); max-width: 1220px; margin: 0 auto; padding: 0 14px 0 18px; }
.narrow-bar { justify-content: space-between; max-width: 720px; }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo { color: var(--volt); }
.logo .logo-svg { display: block; height: 26px; width: auto; }
@media (min-width: 900px) { .logo .logo-svg { height: 30px; } }
.wordmark { font-family: var(--f-d); font-weight: 900; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.nav-pub { display: none; gap: 4px; margin-left: 12px; }
.nav-a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--ink2); font-weight: 600; font-size: 15px; background: none; border: 0; border-radius: var(--r); }
.nav-a:hover { color: var(--ink); background: var(--panel2); }
.nav-a.on { color: var(--ink); }
.nav-pub .nav-a.on { box-shadow: inset 0 -2px 0 var(--volt); border-radius: 0; }
.bell-n { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--volt); color: var(--volt-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.adm-search { display: none; flex: 1; max-width: 460px; position: relative; }
.adm-search input { width: 100%; height: 40px; padding: 0 44px 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.adm-search button { position: absolute; right: 0; top: -2px; }
.hide-s { display: none; }

/* ---------- Navigation espace élève et administration ---------- */
#side { display: none; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(6, 6, 6, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
#tabs:empty { display: none; }
.tabs-in { display: flex; height: var(--tab-h); }
.tabs-in .nav-a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; font-size: 11.5px; font-weight: 600; border-radius: 0; min-width: 0; }
.tabs-in .nav-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tabs-in .nav-a.on { color: var(--volt); }
.tabs-in .nav-a.on .ic { stroke-width: 2.2; }
body[data-area="public"] #tabs, body[data-area="auth"] #tabs { display: none; }
.side-g { padding: 10px 10px 4px; }
.side-t { padding: 8px 12px 4px; font-size: 13px; color: var(--ink3); font-weight: 600; }
#side .nav-a { width: 100%; }
#side .nav-a.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--volt); border-radius: 0 var(--r) var(--r) 0; }

/* ---------- Pied de page ---------- */
#foot:empty { display: none; }
#foot { border-top: 1px solid var(--line); margin-top: 70px; padding: 40px 18px calc(30px + var(--safe-b)); }
.foot-in { max-width: 1120px; margin: 0 auto; display: grid; gap: 30px; }
.foot-brand p { color: var(--ink2); margin: 12px 0; max-width: 40ch; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-content: start; }
.foot-links a { color: var(--ink2); }
.foot-links a:hover { color: var(--ink); }
.foot-team { grid-column: 1 / -1; text-align: center; padding-top: 6px; }
.foot-team a { color: var(--ink3); font-size: 12px; letter-spacing: .04em; opacity: .7; }
.foot-team a:hover { color: var(--ink2); opacity: 1; }
.foot-app { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.foot-app address { font-style: normal; display: flex; flex-direction: column; gap: 4px; color: var(--ink2); }
.socials { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.socials a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line2); }
.socials a:hover { border-color: var(--volt); }

/* ---------- Éléments communs ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.card.flat { background: none; }
.card h3 + p, .card h3 + .metas { margin-top: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 3px; background: var(--panel2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink2); line-height: 1.3; }
.badge.volt { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); }
.badge.red { color: var(--red); border-color: rgba(255, 90, 79, .5); background: rgba(255, 90, 79, .08); }
.badge.amber { color: var(--amber); border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .08); }
.badge.green { color: var(--green); border-color: rgba(61, 220, 151, .5); background: rgba(61, 220, 151, .08); }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line2); font-weight: 800; font-size: 14px; flex: none; }
.chip-link { display: inline-block; padding: 7px 14px; border: 1px solid var(--line2); border-radius: 30px; font-weight: 600; font-size: 14px; margin: 0 8px 8px 0; }
.chip-link:hover { border-color: var(--volt); color: var(--volt); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font-size: 15px; margin-bottom: 14px; }
.notice .ic { margin-top: 2px; }
.notice.ok { border-color: rgba(61, 220, 151, .5); color: var(--ink); }
.notice.ok .ic { color: var(--green); }
.notice.warn { border-color: rgba(255, 176, 32, .5); color: var(--ink); }
.notice.warn .ic { color: var(--amber); }
.notice.info .ic { color: var(--volt); }
.notice.error { border-color: rgba(255, 90, 79, .5); color: var(--ink); }
.empty { text-align: center; padding: 48px 18px; border: 1px dashed var(--line2); border-radius: var(--r); }
.empty h3 { font-family: var(--f-d); font-size: 26px; font-weight: 800; text-transform: uppercase; }
.empty p { color: var(--ink2); margin: 8px auto 18px; max-width: 46ch; }
.empty.error { border-color: rgba(255, 90, 79, .5); }
.loading { display: grid; gap: 14px; padding: 8px 0; }
.skel { height: 74px; border-radius: var(--r); background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sh 1.4s linear infinite; }
.skel.w60 { width: 60%; height: 40px; }
.skel.w40 { width: 40%; height: 24px; }
@keyframes sh { to { background-position: -200% 0; } }
.offline { position: sticky; top: 0; z-index: 90; background: var(--amber); color: #201400; padding: 8px 14px; font-weight: 600; font-size: 14px; text-align: center; }

/* Statistiques */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.stat-n { font-family: var(--f-d); font-weight: 800; font-size: 40px; line-height: 1; }
.stat-l { color: var(--ink2); font-size: 14px; margin-top: 6px; }
.stat-s { color: var(--ink3); font-size: 13px; margin-top: 2px; }
.stat.alert .stat-n { color: var(--volt); }
.kv { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--ink3); font-size: 13px; }
.kv dd { margin: 0; }

/* Onglets */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px 20px; padding: 0 18px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: none; border: 0; padding: 12px 14px; color: var(--ink2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--ink); border-color: var(--volt); }
.tab-n { margin-left: 8px; font-size: 12px; background: var(--panel2); border-radius: 10px; padding: 1px 7px; color: var(--ink2); }

/* Formulaires */
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink2); }
.fld input, .fld select, .fld textarea, .adm-search input, input.plain, select.plain {
  width: 100%; min-height: 46px; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; color: var(--ink); font-size: 16px;
}
.fld textarea { resize: vertical; min-height: 96px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.fld input[type="date"], .fld input[type="datetime-local"], .fld input[type="time"] { min-height: 46px; }
.hint { display: block; color: var(--ink3); font-size: 13px; margin-top: 5px; font-weight: 400; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.switch { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--line); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { flex: none; width: 46px; height: 26px; border-radius: 13px; background: var(--line2); position: relative; transition: background .15s; margin-top: 1px; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.switch input:checked + .track { background: var(--volt); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--volt-ink); }
.switch input:focus-visible + .track { outline: 2px solid var(--volt); outline-offset: 2px; }
.switch .sw-label { font-weight: 600; }
.fld-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px dashed var(--line2); border-radius: 8px; margin-bottom: 14px; }
.fld-file img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.fld-file input { flex: 1; min-width: 0; font-size: 14px; }
.form-msg { color: var(--red); font-size: 14px; min-height: 20px; margin-bottom: 8px; }
.pw-rules { color: var(--ink3); font-size: 13px; }

/* Fenêtres */
.scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .72); }
.sheet { position: fixed; z-index: 210; left: 0; right: 0; bottom: 0; max-height: 92dvh; background: var(--panel); border: 1px solid var(--line2); border-bottom: 0; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 8px 20px; }
.sheet-head h2 { font-size: 26px; }
.sheet-body { padding: 8px 20px calc(24px + var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.confirm-text { font-size: 17px; }
.sheet-nav { display: flex; flex-direction: column; }
.sheet-nav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; border-bottom: 1px solid var(--line); font-weight: 600; }
.sheet-nav a.on { color: var(--volt); }
.row-i { display: inline-flex; align-items: center; gap: 14px; }
.sheet-g { padding: 16px 2px 4px; color: var(--ink3); font-size: 13px; font-weight: 600; }
.steps { padding-left: 20px; display: grid; gap: 10px; margin: 0 0 14px; }
#toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 300; display: grid; gap: 8px; pointer-events: none; justify-items: center; }
body[data-area="public"] #toasts, body[data-area="auth"] #toasts { bottom: calc(var(--safe-b) + 16px); }
.toast { pointer-events: auto; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; max-width: 480px; animation: up .18s ease-out; }
.toast.error { background: var(--red); color: #1a0503; }
.toast.out { opacity: 0; transition: opacity .35s; }

/* ---------- Séances ---------- */
.list { display: grid; gap: 12px; }
.row-card { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); align-items: start; }
.row-card.is-off { opacity: .6; }
.row-card .row-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.row-card h3 a:hover { color: var(--volt); }
.tile { width: 62px; padding: 8px 0 7px; text-align: center; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); display: grid; line-height: 1; }
.tile-wd { font-size: 12px; color: var(--ink3); font-weight: 600; }
.tile-d { font-family: var(--f-d); font-weight: 900; font-size: 34px; color: var(--volt); margin: 3px 0; }
.tile-m { font-size: 12px; color: var(--ink2); font-weight: 600; }
.metas { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--ink2); font-size: 14.5px; }
.metas.col { flex-direction: column; gap: 8px; }
.m { display: inline-flex; align-items: center; gap: 7px; }
.m .ic { color: var(--ink3); }
.avail { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 14px; }
.avail-t { color: var(--ink2); }
.price-t { margin-left: auto; font-weight: 700; }
.marks { display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 110px; }
.marks i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.m-open { background: var(--volt); }
.m-taken { border: 1px solid var(--line2); }
.meter { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--volt); }
.rules { border-left: 2px solid var(--line2); padding-left: 14px; margin-top: 16px; color: var(--ink2); font-size: 14.5px; }
.rules p + p { margin-top: 8px; }
.pay { margin-top: 16px; display: grid; gap: 10px; }
.sum h3 { font-size: 22px; }
.day-h { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: 22px; margin: 26px 0 12px; color: var(--ink2); }
.day-h:first-child { margin-top: 0; }
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px 18px; padding: 0 18px 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: 9px 16px; border: 1px solid var(--line2); border-radius: 30px; background: none; color: var(--ink2); font-weight: 600; font-size: 14px; }
.pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Accueil public ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: var(--hero-o, .38); overflow: hidden; }
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), #000 96%); }
.hero .wrap { position: relative; }
.hero-title { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.005em; font-size: clamp(76px, 22vw, 210px); transform: skewX(-9deg); transform-origin: left bottom; margin: 0 0 26px -4px; display: flex; flex-direction: column; }
.hero-tag { font-size: clamp(17px, 2.6vw, 21px); color: var(--ink); max-width: 30ch; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--volt); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.next-strip { margin-top: 34px; display: grid; gap: 10px; }
.announce { background: var(--volt); color: var(--volt-ink); padding: 11px 18px; font-weight: 600; text-align: center; }
.split { display: grid; gap: 22px; }
.about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--panel2); }
.lead { font-size: 18px; color: var(--ink); max-width: 60ch; }
.prose p + p { margin-top: 14px; }
.prose { color: var(--ink2); max-width: 66ch; }
.prose h3 { color: var(--ink); margin: 26px 0 8px; }
.news-list { display: grid; gap: 14px; }
.news-item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.news-item .thumb, .thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); background: var(--panel2); }
.news-item.big { grid-template-columns: 1fr; }
.news-item.big .thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.news-item h3 { font-size: 20px; }
.news-item p { color: var(--ink2); margin-top: 6px; font-size: 15px; }
.news-item small { color: var(--ink3); }
.perf-strip { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.perf { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.perf:last-child { border-bottom: 0; }
.perf-r { font-family: var(--f-d); font-weight: 900; font-size: 38px; color: var(--volt); line-height: 1; text-align: right; }
.perf h3 { font-size: 18px; }
.perf small { color: var(--ink3); grid-column: 1; }
.perf-rank { color: var(--ink2); text-align: right; font-size: 14px; }
.ev-card { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.ev-card .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel2); }
.ev-body { padding: 16px; display: grid; gap: 8px; }
.gym-card { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.gym-card .cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--panel2); }
.quote { border-left: 3px solid var(--volt); padding: 4px 0 4px 20px; }
.quote blockquote { margin: 0; font-family: var(--f-d); font-weight: 700; font-size: clamp(24px, 4.4vw, 34px); line-height: 1.12; text-transform: none; }
.quote cite { display: block; margin-top: 14px; font-style: normal; color: var(--ink2); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: var(--volt); margin-bottom: 12px; }
.stars .off { color: var(--line2); }
.car-ctrl { display: flex; gap: 8px; margin-top: 18px; }
.partners-row { display: flex; flex-wrap: wrap; gap: 14px; }
.partner { display: grid; place-items: center; width: 150px; height: 84px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--panel); }
.partner img { max-height: 56px; width: auto; object-fit: contain; }
.partner span { font-weight: 700; text-align: center; }
.promo { display: grid; gap: 6px; padding: 16px; border: 1px dashed var(--volt); border-radius: var(--r); }
.promo code { font-family: var(--f-d); font-size: 30px; font-weight: 800; letter-spacing: .06em; color: var(--volt); }
.trf { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.trf figure { margin: 0; }
.trf img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--panel2); }
.trf figcaption { color: var(--ink3); font-size: 13px; margin-top: 4px; }
.timeline { border-left: 1px solid var(--line2); margin-left: 6px; padding-left: 22px; display: grid; gap: 26px; }
.tl-item { position: relative; }
.tl-item::before { content: ''; position: absolute; left: -28px; top: 7px; width: 11px; height: 11px; background: var(--volt); transform: skewX(-12deg); }
.tl-date { font-family: var(--f-d); font-weight: 800; font-size: 20px; color: var(--volt); }
.tl-item h3 { margin: 2px 0 6px; }
.tl-item p { color: var(--ink2); }
.big-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.big-n div { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 8px; }
.big-n b { display: block; font-family: var(--f-d); font-weight: 900; font-size: 46px; color: var(--volt); line-height: 1; }
.big-n span { color: var(--ink2); font-size: 14px; }
.cta-band { border: 1px solid var(--line2); border-radius: var(--r); padding: 34px 22px; text-align: left; background: var(--panel); }
.cta-band p { color: var(--ink2); margin: 10px 0 22px; max-width: 48ch; }
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--panel2); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-grid { display: grid; gap: 14px; }
.media-card { display: grid; gap: 10px; }
.media-card .thumb-w { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--panel2); }

/* ---------- Authentification ---------- */
.auth { max-width: 460px; margin: 0 auto; padding: 34px 18px 60px; }
.auth h1 { margin-bottom: 8px; }
.auth .sub { color: var(--ink2); margin-bottom: 26px; }
.auth-alt { margin-top: 22px; color: var(--ink2); display: grid; gap: 8px; }
.consent-list { margin: 18px 0; }
.consent-list .switch { padding: 10px 0; }

/* ---------- Calendrier ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-head h2 { font-size: 30px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--ink3); font-weight: 600; padding: 6px 0; }
.cal-d { position: relative; min-height: 54px; padding: 6px 4px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; text-align: center; color: var(--ink); display: grid; align-content: start; justify-items: center; gap: 4px; }
.cal-d.out { opacity: .35; }
.cal-d.today { border-color: var(--volt); }
.cal-d.sel { background: var(--ink); color: var(--bg); }
.cal-d b { font-weight: 700; font-size: 14px; }
.dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.dot.t2 { background: var(--ink); }
.dot.t3 { background: transparent; border: 1.5px solid var(--volt); }
.dot.t4 { background: var(--amber); }
.dot.t5 { background: var(--ink3); }
.dot.t6 { background: var(--red); }
.cal-d.sel .dot.t2 { background: var(--bg); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0; font-size: 13px; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.agenda-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.agenda-item time { font-weight: 700; }
.agenda-item small { color: var(--ink3); display: block; }

/* ---------- Administration ---------- */
.adm-list { display: grid; gap: 10px; }
.adm-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); align-items: center; }
.adm-row h3 { font-size: 16px; }
.adm-row .sub { color: var(--ink2); font-size: 14px; }
.adm-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.adm-row.click { cursor: pointer; }
.adm-row.click:hover { border-color: var(--line2); }
.row-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--panel2); flex: none; }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who > div { min-width: 0; }
.who h3, .who .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar input, .toolbar select { min-height: 44px; padding: 8px 13px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; }
.toolbar input[type="search"] { flex: 1; min-width: 200px; }
.att-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.att-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line2); border-radius: 30px; background: none; color: var(--ink2); font-weight: 600; font-size: 13.5px; }
.chip.on { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); }
.chip.bad.on { background: var(--red); border-color: var(--red); color: #1a0503; }
.chip.pay.on { background: var(--green); border-color: var(--green); color: #03150d; }
.section-box { margin-top: 26px; }
.section-box > h3 { font-family: var(--f-d); font-weight: 800; font-size: 24px; text-transform: uppercase; margin-bottom: 12px; }
.mod-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mod-row select { min-height: 42px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; }
.order-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.q-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart-line { stroke: var(--volt); stroke-width: 2; }
.chart-dot { fill: var(--volt); }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-txt { fill: var(--ink3); font-size: 10px; font-family: var(--f-b); }
.chart-bar { fill: var(--volt); }
.chart-empty { color: var(--ink3); padding: 30px 0; text-align: center; border: 1px dashed var(--line2); border-radius: var(--r); }
.cols { display: grid; gap: 22px; }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th { text-align: left; color: var(--ink3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qa { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qa b { font-weight: 600; color: var(--ink2); font-size: 14px; }

/* ---------- Grands écrans ---------- */
@media (min-width: 720px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: 1fr 1fr 1fr; }
  .grid.four { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats.three { grid-template-columns: repeat(3, 1fr); }
  .row-card { grid-template-columns: auto 1fr auto; align-items: center; }
  .row-card .row-side { grid-column: auto; flex-direction: column; align-items: flex-end; min-width: 170px; }
  .split { grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-in { grid-template-columns: 1.3fr 1.3fr 1fr; }
  .news-list.cols2 { grid-template-columns: 1fr 1fr; }
  .att-row { grid-template-columns: 1fr auto; align-items: center; }
  .kv { grid-template-columns: 200px 1fr; gap: 14px; }
  .mod-row { grid-template-columns: 1fr 260px; align-items: center; }
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(600px, 92vw); transform: translate(-50%, -50%); border-radius: 14px; border-bottom: 1px solid var(--line2); max-height: 88dvh; animation: fade .18s ease-out; }
  .sheet.wide { width: min(860px, 94vw); }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .cols { grid-template-columns: 1fr 1fr; }
  .adm-search { display: block; }
  .hide-s { display: inline-flex; }
}
@media (min-width: 1000px) {
  .nav-pub { display: flex; }
  .only-m { display: none; }
  .wrap { padding: 0 28px; }
  .bar-in { padding: 0 24px 0 28px; }
  body[data-area="student"] #tabs, body[data-area="admin"] #tabs { display: none; }
  body[data-area="student"] #side, body[data-area="admin"] #side { display: block; position: fixed; left: 0; top: calc(var(--bar-h) + var(--safe-t)); bottom: 0; width: 250px; overflow: hidden; border-right: 1px solid var(--line); padding: 0; background: var(--bg); }
  body[data-area="student"] main#view, body[data-area="admin"] main#view { margin-left: 250px; max-width: none; padding: 32px 40px 60px; }
  body[data-area="student"] main#view > *, body[data-area="admin"] main#view > * { max-width: 1040px; }
  body[data-area="student"] #toasts, body[data-area="admin"] #toasts { bottom: 24px; }
  .tabs { margin: 0 0 22px; padding: 0; }
  .filters { margin: 0 0 18px; padding: 0 0 4px; }
  .split.rev { grid-template-columns: 7fr 5fr; }
  .grid.three.wide { grid-template-columns: repeat(3, 1fr); }
  .cal-d { min-height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  #topbar, #tabs, #side, #foot, .btn, .icon-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Compléments : notation, photos, progression, questionnaires ---------- */
.rate { display: flex; gap: 4px; }
.rate-b { background: none; border: 0; padding: 4px; color: var(--line2); border-radius: 6px; }
.rate-b .ic { fill: transparent; }
.rate-b.on { color: var(--volt); }
.rate-b.on .ic { fill: var(--volt); }
.meter.wide { display: block; width: 100%; height: 9px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ph { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.ph.sel { border-color: var(--volt); }
.ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--panel2); }
.ph figcaption { padding: 10px; font-size: 13px; color: var(--ink2); }
.pills-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-radio { position: relative; }
.pill-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-radio span { display: inline-grid; place-items: center; min-width: 46px; height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 30px; font-weight: 700; }
.pill-radio input:checked + span { background: var(--volt); color: var(--volt-ink); border-color: var(--volt); }
.pill-radio input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 2px; }
.socials.big a { font-size: 18px; }
.list .adm-row h3 { white-space: normal; }
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Installation et notifications ---------- */
.ok-line { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ok-line .ic { color: var(--green); flex: none; }
.ok-line.bad .ic { color: var(--amber); }
.ok-list { display: grid; gap: 10px; }
.push-block p + p { margin-top: 8px; }
.setup-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-bottom: 18px; border-color: var(--line2); }
.setup-card .setup-i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--volt); color: var(--volt-ink); }
.setup-card .setup-t h3 { margin: 0; }
.setup-card .setup-t p { margin: 4px 0 0; font-size: .92rem; }
.setup-card .btn-inline { grid-column: 1 / -1; margin-top: 4px; }
@media (min-width: 720px) { .setup-card { grid-template-columns: auto 1fr auto; } .setup-card .btn-inline { grid-column: auto; margin-top: 0; } }

/* ---------- QR de pointage ---------- */
.qr-box { text-align: center; padding: 6px 0 4px; }
.qr-img { width: min(78vw, 360px); margin: 0 auto 14px; padding: 10px; background: #fff; border-radius: var(--r); }
.qr-t { font-family: var(--f-d); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; margin: 0; }

/* ---------- Défis, badges, parrainage ---------- */
.ch-card .ch-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ch-card .ch-h h3 { margin: 0; }
.ch-card p { margin-top: 8px; }
.ch-p { margin-top: 12px; }
.ch-n { margin-top: 8px; font-size: .95rem; color: var(--ink2); }
.ch-n b { color: var(--ink); font-size: 1.05rem; }
.board { display: grid; gap: 6px; }
.board-r { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.board-r.me { border-color: var(--volt); }
.board-r .rk { font-family: var(--f-d); font-size: 1.3rem; color: var(--ink3); }
.board-r.me .rk { color: var(--volt); }
.board-r .tt { color: var(--ink2); font-variant-numeric: tabular-nums; }
.bdg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .bdg-grid { grid-template-columns: repeat(4, 1fr); } }
.bdg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); opacity: .55; }
.bdg.on { opacity: 1; border-color: var(--volt); }
.bdg h3 { font-size: 1rem; margin: 4px 0 0; }
.bdg p { font-size: .85rem; color: var(--ink2); margin: 0; }
.bdg small { color: var(--ink3); font-size: .78rem; }
.bdg-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--line2); color: var(--ink3); }
.bdg.on .bdg-ic { background: var(--volt); border-color: var(--volt); color: var(--volt-ink); }
.ref-card { text-align: center; padding: 26px 18px; }
.ref-card .ref-l { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.ref-card .ref-code { font-family: var(--f-d); font-size: 3rem; letter-spacing: .12em; line-height: 1.1; margin: 6px 0 10px; color: var(--volt); }
.ref-card .btn-inline { justify-content: center; margin-top: 16px; }

/* ---------- Réactions ---------- */
.react-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.react-b { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; background: none; color: var(--ink2); border: 1px solid var(--line2); border-radius: 999px; font: inherit; font-size: .92rem; cursor: pointer; }
.react-b.on { border-color: var(--volt); color: var(--volt); }
.react-b .n { font-variant-numeric: tabular-nums; }

/* ---------- Journal des repas ---------- */
.day-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.day-nav .day-input { min-width: 170px; height: 44px; text-align: center; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--r); font: inherit; }
.day-nav .icon-btn[disabled] { opacity: .3; }
.meal-card .meal-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meal-card .meal-h h3 { margin: 0; }
.meal-card .meal-h .btn-inline { margin: 0; gap: 0; }
.meal-card p { margin-top: 8px; }
.coach-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--volt); background: var(--panel2); border-radius: 0 var(--r) var(--r) 0; }
.coach-note b { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--volt); }
.coach-note p { margin: 4px 0 0; }
.meal-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.meal-row:first-of-type { border-top: 0; }
.meal-row p { margin: 4px 0 0; }

.vid-box { position: relative; background: #000; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; margin-top: 20px; }
.vid { display: block; width: 100%; max-height: 70vh; background: #000; }
.vid-prev { display: block; width: 100%; max-width: 340px; max-height: 220px; background: #000; border-radius: var(--r); margin-bottom: 8px; }
.media-card .vid-box { margin-top: 0; }

/* ---------- Pages plein écran (notifications, actualités) ---------- */
body.has-pop { overflow: hidden; }
.pop { position: fixed; inset: 0; z-index: 250; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; padding: calc(20px + var(--safe-t, 0px)) 20px calc(24px + var(--safe-b, 0px)); }
.pop::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 7px; background: var(--volt); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.pop-in { margin: auto; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 18px; padding: 16px 0; }
.pop-brand { display: flex; align-items: center; gap: 10px; }
.pop-brand { color: var(--volt); }
.pop-brand .pop-logo { display: block; height: 28px; width: auto; }
.pop-brand .mark { width: 26px; height: 26px; fill: var(--volt); }
.pop-brand .wordmark { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: 18px; }
.pop-ic { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid var(--volt); color: var(--volt); border-radius: 50%; }
.pop h2 { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; font-size: clamp(34px, 10vw, 52px); transform: skewX(-6deg); transform-origin: left; }
.pop-p { color: var(--ink2); font-size: 17px; line-height: 1.5; }
.pop-note { color: var(--ink3); font-size: 13px; text-align: center; }
.pop-kicker { color: var(--volt); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pop-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r2); display: block; }
.pop-news { display: flex; flex-direction: column; gap: 14px; }
.pop-card { border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); padding: 16px; }
.pop-act { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 6px; }
.pop-later { background: none; border: 0; color: var(--ink2); font: inherit; font-size: 15px; padding: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pop-later:hover { color: var(--ink); }

/* ---------- Menu latéral : entrées fixes en haut et en bas, le milieu défile ---------- */
.side-nav { display: flex; flex-direction: column; height: 100%; }
.side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.side-pin { padding: 8px 10px 4px; flex: none; }
.side-pin-b { border-top: 1px solid var(--line); padding: 8px 10px calc(8px + var(--safe-b)); }
button.side-t .ic { transition: transform .15s; }

/* ---------- Tableau des programmes ---------- */
.pgt { min-width: 720px; }
.pgt th.c-name, .pgt td.c-name { min-width: 190px; }
.pgt th.c-note, .pgt td.c-note { min-width: 200px; }
.pgt td { vertical-align: middle; }
.pgt td.c-act { width: 1%; white-space: nowrap; text-align: right; }
.pgt .acts { display: flex; gap: 2px; justify-content: flex-end; }
.tbl-in { width: 100%; min-width: 64px; height: 38px; padding: 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font: inherit; font-size: 14.5px; }
.tbl-in.n { min-width: 62px; max-width: 86px; }
.tbl-in:focus { border-color: var(--volt); outline: none; }
.pgt-view { min-width: 560px; }
.pgt-view tr.ex-more td { padding-top: 0; background: var(--panel); }
.pgt-view tr.ex-more p { margin: 6px 0; }

/* ---------- Menu de gauche de l'administration : visible aussi sur iPad en portrait ---------- */
@media (min-width: 720px) and (max-width: 999.98px) {
  body[data-area="admin"] #tabs { display: none; }
  body[data-area="admin"] #side { display: block; position: fixed; left: 0; top: var(--side-top, calc(var(--bar-h) + var(--safe-t))); bottom: 0; width: 214px; overflow: hidden; border-right: 1px solid var(--line); padding: 0; background: var(--bg); z-index: 55; }
  body[data-area="admin"] main#view { margin-left: 214px; max-width: none; padding: 24px 22px 60px; }
  body[data-area="admin"] #toasts { bottom: 24px; }
}
@media (min-width: 1000px) {
  body[data-area="student"] #side, body[data-area="admin"] #side { top: var(--side-top, calc(var(--bar-h) + var(--safe-t))); z-index: 55; }
}
div.side-t { padding: 12px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }

/* ---------- Tableau de séance (programmes) ---------- */
.pt { display: flex; border: 1px solid var(--line2); border-radius: var(--r2); overflow: hidden; background: var(--panel); }
.pt-side { flex: none; width: 44px; background: var(--volt); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .28)); color: var(--volt-ink); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 20px; padding: 16px 0; font-family: var(--f-d); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; }
.pt-side-t { font-size: 19px; }
.pt-side-f { font-size: 15px; opacity: .85; }
.pt-main { flex: 1 1 auto; min-width: 0; }
.pt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pt-t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.pt-edit .pt-t { min-width: 680px; }
.pt-t th, .pt-t td { border: 1px solid var(--line2); padding: 7px 8px; text-align: center; vertical-align: middle; }
.pt-t td { font-family: var(--f-d); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.pt-warm { font-family: var(--f-d); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 13px; background: var(--panel2); color: var(--ink); }
.pt-h th { color: var(--volt); font-family: var(--f-d); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; background: var(--panel2); }
.pt-t .c-ex { min-width: 180px; }
.pt-edit .pt-t .c-ex { min-width: 250px; }
.pt-edit .pt-t { min-width: 760px; }
.pt-hint { display: none; font-size: 12.5px; color: var(--ink3); padding: 8px 12px; border-top: 1px solid var(--line2); }
@media (max-width: 700px) { .pt-hint { display: block; } }
.pt-t .c-v { width: 62px; }
.pt-t .c-rest, .pt-t .c-share { min-width: 86px; }
.pt-b tr:first-child td { border-top: 2px solid var(--ink3); }
.pt-title { color: var(--volt); }
.pt-ex { background: none; border: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 4px 2px; display: inline-flex; align-items: center; gap: 7px; text-align: center; }
.pt-ex:hover { color: var(--volt); }
.pt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--volt); flex: none; }
.pt-vid { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line2); border-radius: 8px; background: none; color: var(--ink3); cursor: pointer; }
.pt-vid.on { color: var(--volt); border-color: var(--volt); }
.pt-in { width: 100%; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--ink); font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: center; padding: 6px 4px; }
.pt-in:hover { border-color: var(--line2); }
.pt-in:focus { outline: none; border-color: var(--volt); background: var(--bg); }
.pt-in::placeholder { color: var(--ink3); opacity: .55; }
textarea.pt-area { resize: vertical; min-height: 58px; }
.pt-name { display: flex; align-items: center; gap: 2px; }
.pt-name .pt-in { flex: 1 1 auto; }
.pt-more { width: 34px; height: 34px; flex: none; }
.pt-tools td { padding: 4px 8px; background: var(--bg); text-align: left; font-family: inherit; text-transform: none; font-weight: 400; }
.pt-tools-in { display: flex; align-items: center; gap: 6px; }
.pt-sp { flex: 1; }
.pt-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--line2); }
.sheet-actions { display: grid; gap: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Page de présence (QR code Hybrid Training) ---------- */
.presence .pres-head { margin-bottom: 14px; }
.pres-ok { text-align: center; padding: 30px 10px; }
.pres-ic { width: 84px; height: 84px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--volt); color: var(--volt-ink); }
.pres-ok h2 { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 8vw, 42px); line-height: 1; margin-bottom: 10px; }

/* ---------- Impression d'un QR code ---------- */
#print-area { display: none; }
@media print {
  body.print-qr > *:not(#print-area) { display: none !important; }
  body.print-qr { background: #fff !important; color: #000 !important; }
  body.print-qr #print-area { display: block !important; }
  #print-area .pa-in { text-align: center; padding: 10mm 12mm; color: #000; font-family: Arial, Helvetica, sans-serif; }
  #print-area .pa-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; font-size: 18pt; letter-spacing: .02em; text-transform: uppercase; }
  #print-area .pa-brand img { height: 14mm; width: auto; }
  #print-area h1 { font-size: 30pt; font-weight: 900; text-transform: uppercase; margin: 8mm 0 3mm; line-height: 1.05; }
  #print-area .pa-sub { font-size: 14pt; margin: 0 0 6mm; }
  #print-area .pa-qr { width: 140mm; max-width: 100%; margin: 0 auto; }
  #print-area .pa-qr svg { width: 100%; height: auto; }
  #print-area .pa-text { font-size: 13pt; max-width: 150mm; margin: 6mm auto 0; line-height: 1.4; }
  @page { size: A4 portrait; margin: 10mm; }
}

/* ---------- Paiements ---------- */
.bill-line { align-items: center; }
.bill-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bill-r b { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.login-box { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px; font: inherit; font-size: 15px; margin: 14px 0; user-select: all; -webkit-user-select: all; }

.foot-ver { display: block; margin-top: 6px; font-size: 11px; color: var(--ink3); opacity: .6; }

/* ---------- Logo officiel : grand format sur l'accueil ---------- */
.hero-logo { color: var(--volt); margin: 0 0 24px; line-height: 0; }
.hero-logo svg { display: block; height: auto; }
.hero-logo .hl-side { width: min(640px, 100%); }
.hero-logo .hl-stacked { display: none; width: min(320px, 80vw); }
@media (max-width: 600px) {
  .hero-logo .hl-side { display: none; }
  .hero-logo .hl-stacked { display: block; }
}

/* ---------- Bas de page : la phrase à la place du logo ---------- */
.foot-join { display: inline-block; font-family: var(--f-d); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .95; font-size: clamp(26px, 6vw, 38px); color: var(--volt); transform: skewX(-8deg); transform-origin: left; }
.foot-join:hover { opacity: .85; }

/* ---------- Feuille imprimée du QR code ---------- */
@media print {
  #print-area .pa-brand { color: #000; }
  #print-area .pa-logo { height: 15mm; width: auto; display: inline-block; }
}

/* ---------- Barre du haut : menu compact tant que la place manque (iPad à l'horizontale) ---------- */
.nav-pub .nav-a { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1239px) {
  .nav-pub { display: none; }
  .bar-r .only-m { display: inline-flex; }
}

/* ---------- Menu de l'administration en deux colonnes : les 24 onglets tiennent à l'écran ---------- */
@media (min-width: 1000px) {
  body[data-area="admin"] #side { width: 296px; }
  body[data-area="admin"] main#view, body[data-area="admin"] #view { margin-left: 296px; }
  body[data-area="admin"] #side .side-pin { padding: 6px 8px 2px; }
  body[data-area="admin"] #side .side-pin-b { padding: 6px 8px calc(6px + var(--safe-b)); }
  body[data-area="admin"] #side div.side-t { padding: 7px 10px 2px; font-size: 11px; line-height: 1.2; }
  body[data-area="admin"] #side .adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; padding: 0 6px; }
  body[data-area="admin"] #side .adm-grid .nav-a { width: auto; min-width: 0; gap: 7px; padding: 5px 8px; font-size: 13.5px; line-height: 1.2; min-height: 30px; }
  body[data-area="admin"] #side .adm-grid .nav-a span { white-space: normal; overflow-wrap: normal; }
  body[data-area="admin"] #side .adm-grid .nav-a .ic { flex: none; }
  body[data-area="admin"] #side .adm-grid .nav-a.on { box-shadow: inset 3px 0 0 var(--volt); border-radius: 0 var(--r) var(--r) 0; }
  body[data-area="admin"] #side .side-pin .nav-a { padding: 6px 10px; font-size: 14px; }
}
@media (min-width: 1000px) {
  body[data-area="admin"] #side .side-g { margin: 0; padding: 0; }
  body[data-area="admin"] #side .side-scroll { padding-bottom: 4px; }
}

/* ---------- Accueil élève : carte des règlements ---------- */
.pay-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); margin: 4px 0 18px; color: var(--ink); text-decoration: none; }
.pay-card .pay-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.pay-card.ok .pay-ic { background: rgba(200, 255, 61, .14); color: var(--volt); }
.pay-card.due { border-color: #f5a623; }
.pay-card.due .pay-ic { background: rgba(245, 166, 35, .16); color: #f5a623; }
.pay-card .pay-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pay-card .pay-k { font-size: 13px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pay-card .pay-n { font-family: var(--f-d); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.pay-card.due .pay-n { color: #f5a623; }
.pay-card.ok .pay-n { color: var(--volt); }
.pay-card .pay-s { font-size: 14px; color: var(--ink2); }
.pay-card .pay-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--ink2); white-space: nowrap; }
@media (max-width: 520px) { .pay-card { flex-wrap: wrap; } .pay-card .pay-go { width: 100%; justify-content: flex-end; } }

/* ---------- Programme : qui le voit ---------- */
.prog-state { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.prog-state .prog-state-t { display: flex; flex-direction: column; gap: 3px; }
.prog-state.ok { border-color: var(--volt); }
.prog-state.ok b { color: var(--volt); }
.prog-state.todo { border-color: #f5a623; }
.prog-state.todo b { color: #f5a623; }

/* ---------- Fond de l'accueil : photo et vidéo cadrées, bouton du son ---------- */
.hero-bg .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-sound { position: absolute; right: 16px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-sound.on { border-color: var(--volt); color: var(--volt); }
@media (prefers-reduced-motion: reduce) { .hero-sound { display: none; } }

/* ---------- Éditeur de cadrage ---------- */
.fr-ov { position: fixed; inset: 0; z-index: 270; background: rgba(0, 0, 0, .94); overflow-y: auto; display: flex; padding: calc(16px + var(--safe-t, 0px)) 16px calc(16px + var(--safe-b, 0px)); }
.fr-in { margin: auto; width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.fr-head h2 { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; font-size: 26px; }
.fr-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-ratios .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font: inherit; font-weight: 700; cursor: pointer; }
.fr-ratios .chip.on { border-color: var(--volt); color: var(--volt); }
.fr-frames { display: grid; gap: 14px; align-items: start; }
.fr-frames.frame { grid-template-columns: 3fr 1fr; }
.fr-frames.crop { max-width: 620px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .fr-frames.frame { grid-template-columns: 1fr; } .fr-frames.frame .fr-col:last-child { max-width: 220px; } }
.fr-l { font-size: 13px; color: var(--ink3); font-weight: 700; margin-bottom: 6px; }
.fr-frame { position: relative; overflow: hidden; border: 2px solid var(--volt); border-radius: var(--r2); background: #111; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fr-frame.drag { cursor: grabbing; }
.fr-frame .fr-media { position: absolute; max-width: none; pointer-events: none; }
.fr-z { display: flex; align-items: center; gap: 12px; color: var(--ink2); }
.fr-z input { flex: 1; accent-color: var(--volt); height: 28px; }
.fld-file .btn { margin-top: 8px; }

/* ---------- QR code de présence : code de secours ---------- */
.qr-code { margin: 10px 0 4px; font-size: 18px; color: var(--ink2); }
.qr-code b { font-family: var(--f-d); font-weight: 900; font-size: 30px; letter-spacing: .12em; color: var(--volt); }
.scan-v { width: 100%; max-height: 60vh; margin-top: 12px; border-radius: var(--r2); background: #000; object-fit: cover; }
@media print {
  #print-area .pa-code { font-size: 20pt; margin: 4mm 0 0; }
  #print-area .pa-code b { font-size: 30pt; letter-spacing: .15em; }
}