/* BDW École : interface de gestion type club (inspirée d'OpenFlyers), identité BordeauxWings. */
:root {
  --bg: #eff1f4; --surface: #fff; --surface-2: #f6f7f9; --border: #dbdfe5; --border-2: #c6ccd5;
  --text: #1b2430; --muted: #5d6877; --nav: #202a36; --nav-2: #2a3644; --nav-text: #d3d9e0;
  --accent: #7a1f3d; --accent-2: #641832; --accent-soft: #f5e7ec; --on-accent: #fff;
  --ok: #1d7a40; --ok-soft: #e3f3e9; --warn: #a65a00; --warn-soft: #fbefd9; --danger: #b3261e; --danger-soft: #fbe6e4;
  --info: #1f5fa8; --info-soft: #e3eefa; --neutral-soft: #eceff3;
  --k-dual: #2f6db5; --k-solo: #2e8a52; --k-briefing: #c2820d; --k-theory: #7a5aa6;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 4px 14px rgba(20,30,45,.06);
  --radius: 6px; --hour: 52px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #11151a; --surface: #1a2028; --surface-2: #202731; --border: #2c3541; --border-2: #3a4553;
  --text: #e3e8ee; --muted: #93a0b0; --nav: #0c1015; --nav-2: #18202a; --nav-text: #b9c3cf;
  --accent: #d36d8f; --accent-2: #e387a5; --accent-soft: #3a1f2b; --on-accent: #1a0d13;
  --ok: #5fc47f; --ok-soft: #173424; --warn: #e8a54b; --warn-soft: #382a14; --danger: #f08178; --danger-soft: #3d1f1d;
  --info: #6fa8e8; --info-soft: #1a2c44; --neutral-soft: #242c37;
  --k-dual: #5b95dd; --k-solo: #55b57a; --k-briefing: #e0a23a; --k-theory: #a58ad0;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151a; --surface: #1a2028; --surface-2: #202731; --border: #2c3541; --border-2: #3a4553;
    --text: #e3e8ee; --muted: #93a0b0; --nav: #0c1015; --nav-2: #18202a; --nav-text: #b9c3cf;
    --accent: #d36d8f; --accent-2: #e387a5; --accent-soft: #3a1f2b; --on-accent: #1a0d13;
    --ok: #5fc47f; --ok-soft: #173424; --warn: #e8a54b; --warn-soft: #382a14; --danger: #f08178; --danger-soft: #3d1f1d;
    --info: #6fa8e8; --info-soft: #1a2c44; --neutral-soft: #242c37;
    --k-dual: #5b95dd; --k-solo: #55b57a; --k-briefing: #e0a23a; --k-theory: #a58ad0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "IBM Plex Sans", system-ui, sans-serif; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.005em; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon.lg { width: 20px; height: 20px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Barre de navigation haute : domaines en onglets, sous-menu icônes + libellés */
.topbar { background: var(--nav); color: var(--nav-text); position: sticky; top: 0; z-index: 50; }
.topbar-in { display: flex; align-items: flex-end; gap: 6px; max-width: 1560px; margin: 0 auto; padding: 0 16px; min-height: 52px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .01em; align-self: center; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .brand-mark { color: #fff; background: #8c2b4c; }
.brand span { color: #e5a3b6; font-weight: 500; }
.domains { display: flex; gap: 4px; margin-left: auto; align-items: flex-end; }
.dom { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 6px; border-radius: 6px 6px 0 0; color: #dfe5ec; background: rgba(255,255,255,.07); font-weight: 500; }
.dom:hover { text-decoration: none; background: rgba(255,255,255,.14); color: #fff; }
.dom.active { color: #1b2430; font-weight: 600; background: #fff; }
.dom.d-school.active { background: #dbe7f7; } .dom.d-manage.active { background: #f7e3a6; } .dom.d-admin.active { background: #f4c1c8; }
.dom .icon { width: 15px; height: 15px; }
.topbar-right { display: flex; align-items: center; gap: 4px; align-self: center; margin-left: 12px; position: relative; }
.icon-btn { background: none; border: 0; color: #e8edf2; cursor: pointer; padding: 6px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; font: inherit; }
.icon-btn:hover { background: rgba(255,255,255,.1); }
.burger { display: none; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--nav-2); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,.25); }
.who-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submenu { background: var(--surface); border-bottom: 1px solid var(--border); }
.submenu-in { max-width: 1560px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.submenu a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: var(--text); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.submenu a .icon { color: var(--muted); }
.submenu a:hover { text-decoration: none; background: var(--surface-2); }
.submenu a.active { color: var(--accent); border-bottom-color: var(--accent); }
.submenu a.active .icon { color: var(--accent); }
.submenu .badge { margin-left: 2px; }
.dd { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 5px; z-index: 60; }
.open > .dd { display: block; }
.dd a, .dd button.dd-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; color: var(--text); border-radius: 4px; font: inherit; background: none; border: 0; text-align: left; cursor: pointer; }
.dd a:hover, .dd button.dd-link:hover { background: var(--surface-2); text-decoration: none; }
.dd .icon { color: var(--muted); }
.dd hr { border: 0; border-top: 1px solid var(--border); margin: 5px 0; }
.dd .dd-head { padding: 6px 10px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Fil d'Ariane et pastilles utilisateur */
.subbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.subbar-in { max-width: 1560px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.trail { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.trail b { color: var(--text); font-weight: 600; }
.trail .sepr { opacity: .5; }
.subbar .right-chips { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.who { font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font-size: 13px; }
.chip strong { font-weight: 600; }
.chip.low { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.chip.good { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }

/* Page */
.page { max-width: 1560px; margin: 0 auto; padding: 18px 16px 48px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); padding: 6px 12px; border-radius: var(--radius); line-height: 1.3; white-space: nowrap; }
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--neutral-soft); }
.btn.sm { padding: 3px 9px; font-size: 12.5px; }
.btn.icon-only { padding: 6px 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.btn-group .btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); position: relative; }
form.inline { display: inline; margin: 0; }

/* Panneaux */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 1px rgba(20,30,45,.03); margin-bottom: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; min-height: 40px; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.panel-head .icon { color: var(--muted); }
.panel-body { padding: 14px; }
.panel-foot { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.panel.flush { overflow: hidden; }
.grid { display: grid; gap: 14px; align-items: start; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid > .panel { margin-bottom: 0; }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; border-left: 3px solid var(--border-2); }
.kpi .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.kpi .v { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.kpi.accent { border-left-color: var(--accent); }
.kpi.ok { border-left-color: var(--ok); } .kpi.warn { border-left-color: var(--warn); } .kpi.danger { border-left-color: var(--danger); } .kpi.info { border-left-color: var(--info); }
.kpi a.v { display: block; color: inherit; }

/* Pastilles */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.dual { background: var(--k-dual); } .dot.solo { background: var(--k-solo); } .dot.briefing { background: var(--k-briefing); } .dot.theory { background: var(--k-theory); }
.pos { color: var(--ok); } .neg { color: var(--danger); }

/* Tableaux */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.t td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.t tfoot td, .t tfoot th { border-top: 2px solid var(--border-2); background: var(--surface-2); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.t th.num, .t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.t th[data-sort] { cursor: pointer; user-select: none; }
.t th[data-sort]:hover { color: var(--text); }
.t th[data-sort]::after { content: ''; display: inline-block; margin-left: 5px; border: 4px solid transparent; vertical-align: middle; opacity: .0; }
.t th[aria-sort="ascending"]::after { border-bottom-color: currentColor; border-top: 0; opacity: 1; }
.t th[aria-sort="descending"]::after { border-top-color: currentColor; border-bottom: 0; opacity: 1; }
.t td.actions { text-align: right; white-space: nowrap; }
.t td.actions form { display: inline; margin: 0; }
.t tr.is-past td { color: var(--muted); }
.cell-main { font-weight: 500; }
.cell-sub { font-size: 12.5px; color: var(--muted); }
.empty { padding: 28px 14px; text-align: center; color: var(--muted); display: grid; gap: 6px; justify-items: center; }
.empty .icon { width: 26px; height: 26px; opacity: .5; }

/* Barres d'outils / filtres */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.toolbar.alone { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.search { position: relative; }
.search input { padding-left: 28px; min-width: 200px; }
.search .icon { position: absolute; left: 8px; top: 8px; color: var(--muted); width: 14px; height: 14px; }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chips a, .chips button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.chips a:hover, .chips button:hover { text-decoration: none; border-color: var(--muted); }
.chips .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Formulaires */
input, select, textarea { font: inherit; padding: 6px 9px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); color: var(--text); max-width: 100%; min-height: 32px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 0; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; width: 15px; height: 15px; accent-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
label.check { display: inline-flex; gap: 7px; align-items: center; }
.fields { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px 16px; }
.fields.c3 { --cols: 3; } .fields.c4 { --cols: 4; } .fields.c1 { --cols: 1; }
.field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.field > label, .field > .lbl { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; }
.field.span2 { grid-column: span 2; } .field.full { grid-column: 1 / -1; }
.field .hint-err { color: var(--danger); font-size: 12.5px; }
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 4px 0 -2px; padding-bottom: 5px; border-bottom: 1px solid var(--border); grid-column: 1 / -1; }

/* Alertes */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: var(--radius); border: 1px solid; margin-bottom: 14px; }
.alert.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.alert .icon { margin-top: 2px; }
.alert a { font-weight: 600; text-decoration: underline; }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 200; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--ok); border-radius: var(--radius); box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-left-color: var(--danger); }
.toast .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* Modales */
dialog.modal { border: 1px solid var(--border-2); border-radius: 8px; padding: 0; background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 18px 60px rgba(0,0,0,.35); }
dialog.modal.wide { width: min(760px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(10,15,22,.5); }
dialog.modal[open] { display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-foot { padding: 11px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 8px 8px; }
.modal-form { display: contents; }

/* Onglets */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tabs button, .tabs a { padding: 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px; font-weight: 500; }
.tabs button:hover, .tabs a:hover { color: var(--text); text-decoration: none; }
.tabs .on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .count { background: var(--neutral-soft); border-radius: 99px; padding: 0 7px; font-size: 11.5px; margin-left: 4px; }
[data-tabpanel][hidden] { display: none; }

/* Définitions */
.dl { display: grid; grid-template-columns: 180px 1fr; margin: 0; }
.dl dt, .dl dd { padding: 8px 14px; border-bottom: 1px solid var(--border); margin: 0; }
.dl dt { color: var(--muted); font-size: 12.5px; }
.dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* Progression */
.bar { height: 6px; background: var(--neutral-soft); border-radius: 99px; overflow: hidden; min-width: 80px; border: 1px solid var(--border); }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar.ok > i { background: var(--ok); }
.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.progress-cell .bar { flex: 1; } .progress-cell span { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); width: 38px; text-align: right; }

/* Arbre cursus */
.tree { display: grid; gap: 12px; }
.tree-mod { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tree-mod > summary, .tree-les > summary { list-style: none; cursor: pointer; }
.tree-mod > summary::-webkit-details-marker, .tree-les > summary::-webkit-details-marker { display: none; }
.tree-mod > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); }
.tree-mod[open] > summary { border-bottom: 1px solid var(--border); }
.tree-mod .num { width: 24px; height: 24px; border-radius: 50%; background: var(--neutral-soft); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.tree-mod.done .num { background: var(--ok); color: #fff; }
.tree-mod .grow { flex: 1; min-width: 0; }
.tree-mod .chev { transition: transform .15s; color: var(--muted); }
.tree-mod[open] > summary .chev { transform: rotate(90deg); }
.tree-body { padding: 4px 14px 10px 48px; }
.tree-les { border-bottom: 1px dashed var(--border); padding: 8px 0; }
.tree-les:last-child { border-bottom: 0; }
.tree-les > summary { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 5px 0 5px 18px; align-items: center; }
.ex-row .cell-sub { margin-top: 0; }
.grade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.grade-grid:last-child { border-bottom: 0; }
.ms { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border-2); color: var(--muted); font-size: 12px; background: var(--surface); }
.ms.on { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.steps { display: flex; gap: 6px; flex-wrap: wrap; }

/* Éditeur : lignes compactes */
.edit-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.edit-row:last-child { border-bottom: 0; }
.edit-row.nested { padding-left: 40px; background: var(--surface); }
.edit-row.nested2 { padding-left: 66px; }
.edit-row.head { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.edit-row input[type=number].pos-in { width: 62px; }
.edit-row .grow { flex: 1; min-width: 160px; }

/* Planning */
.pg-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pg-bar .title { font-size: 15px; font-weight: 600; margin: 0 6px; min-width: 190px; }
.pg-bar .spacer { flex: 1; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); margin: 10px 2px 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid; }
.lg-dual { background: color-mix(in srgb, var(--k-dual) 22%, var(--surface)); border-color: var(--k-dual) !important; }
.lg-solo { background: color-mix(in srgb, var(--k-solo) 22%, var(--surface)); border-color: var(--k-solo) !important; }
.lg-briefing { background: color-mix(in srgb, var(--k-briefing) 24%, var(--surface)); border-color: var(--k-briefing) !important; }
.lg-theory { background: color-mix(in srgb, var(--k-theory) 22%, var(--surface)); border-color: var(--k-theory) !important; }
.lg-pending { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(120,120,120,.35) 3px 5px); border-color: var(--muted) !important; }
.lg-off { background: repeating-linear-gradient(135deg, var(--neutral-soft) 0 4px, var(--border) 4px 5px); border-color: var(--border-2) !important; }
.pg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 200px); position: relative; }
.pg-in { display: grid; grid-template-columns: 54px repeat(var(--cols), minmax(var(--colmin, 150px), 1fr)); min-width: min-content; }
.pg-corner, .pg-colhead { position: sticky; top: 0; z-index: 8; background: var(--surface-2); border-bottom: 1px solid var(--border-2); }
.pg-corner { left: 0; z-index: 12; }
.pg-colhead { padding: 7px 8px; border-left: 1px solid var(--border); font-weight: 600; font-size: 13px; line-height: 1.25; min-height: 46px; }
.pg-colhead small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.pg-colhead.today { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.pg-colhead .badge { margin-top: 2px; }
.pg-hours { position: sticky; left: 0; z-index: 6; background: var(--surface-2); border-right: 1px solid var(--border-2); }
.pg-hours div { height: var(--hour); font-size: 11.5px; color: var(--muted); text-align: right; padding: 0 7px; position: relative; }
.pg-hours div span { position: relative; top: -8px; background: var(--surface-2); padding: 0 2px; }
.pg-hours div:first-child span { top: 2px; }
.pg-col { position: relative; border-left: 1px solid var(--border); height: calc(var(--n) * var(--hour)); cursor: cell;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 2); }
.pg-col:hover .pg-ghost { opacity: 1; }
.pg-col.readonly { cursor: default; }
.pg-ghost { position: absolute; left: 3px; right: 3px; height: calc(var(--hour) / 2 * var(--stepq, 1)); border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px; pointer-events: none; opacity: 0; font-size: 11px; color: var(--accent); padding: 1px 5px; transition: opacity .1s; z-index: 1; }
.pg-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--neutral-soft) 0 5px, color-mix(in srgb, var(--border-2) 70%, transparent) 5px 6px); pointer-events: none; opacity: .85; z-index: 1; }
.pg-past { position: absolute; left: 0; right: 0; top: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); pointer-events: none; z-index: 2; }
.pg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; }
.pg-now::before { content: ''; position: absolute; left: -1px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.bk { position: absolute; z-index: 4; overflow: hidden; border-radius: 4px; padding: 3px 6px 3px 7px; font-size: 12px; line-height: 1.25; cursor: pointer; text-align: left; font-family: inherit; color: var(--text);
  border: 1px solid var(--c); border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 18%, var(--surface)); margin: 0 2px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bk:hover { z-index: 9; box-shadow: 0 3px 10px rgba(0,0,0,.25); filter: brightness(.98); }
.bk .t1 { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk .t2 { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk.k-dual { --c: var(--k-dual); } .bk.k-solo { --c: var(--k-solo); } .bk.k-briefing { --c: var(--k-briefing); } .bk.k-theory { --c: var(--k-theory); }
.bk.st-booked { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 8%, var(--surface)) 0 5px, color-mix(in srgb, var(--c) 22%, var(--surface)) 5px 7px); border-style: dashed; border-left-style: solid; }
.bk.st-done { opacity: .62; }
.bk.mine { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.bk.anon { --c: var(--muted); background: var(--neutral-soft); color: var(--muted); }
.pg-empty { padding: 40px; text-align: center; color: var(--muted); }
.tip { position: fixed; z-index: 300; pointer-events: none; background: #151b23; color: #f1f4f7; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.4; max-width: 280px; box-shadow: 0 6px 20px rgba(0,0,0,.35); display: none; }
.tip b { color: #fff; } .tip .m { color: #aab5c2; }
.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; }
.detail-list dt { color: var(--muted); font-size: 12.5px; } .detail-list dd { margin: 0; }
.conflict { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); margin-bottom: 12px; font-weight: 500; }

/* Planning journalier : une ligne par ressource, axe horaire horizontal */
.pr { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); overflow-x: auto; }
.pr-in { min-width: 860px; }
.pr-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); border-bottom: 1px solid var(--border-2); }
.pr-row:last-child { border-bottom: 0; }
.pr-label { padding: 6px 10px; background: var(--surface-2); border-right: 1px solid var(--border-2); line-height: 1.3; position: sticky; left: 0; z-index: 7; display: flex; flex-direction: column; justify-content: center; min-height: 54px; }
.pr-label b { font-size: 13.5px; font-weight: 600; }
.pr-label span { color: var(--muted); font-size: 12.5px; }
.pr-label .st { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; }
.pr-label .st.warn { color: var(--warn); } .pr-label .st.danger { color: var(--danger); }
.pr-label.head-row { min-height: 30px; flex-direction: row; align-items: center; gap: 6px; background: var(--neutral-soft); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.pr-axis { position: relative; height: 30px; background: var(--surface-2); }
.pr-axis span { position: absolute; top: 7px; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-axis i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--border-2); }
.pr-axis i.h { height: 12px; }
.pr-track { position: relative; min-height: 54px; cursor: cell; overflow: hidden;
  background-image: linear-gradient(to right, var(--border-2) 1px, transparent 1px), linear-gradient(to right, var(--border) 1px, transparent 1px);
  background-size: calc(100% / var(--hrs)) 100%, calc(100% / var(--hrs) / 4) 100%; }
.pr-track.readonly { cursor: default; }
.pr-night { position: absolute; top: 0; bottom: 0; background: #4a67a1; opacity: .88; pointer-events: none; z-index: 1; }
.pr-twi { position: absolute; top: 0; bottom: 0; background: #a9bde0; opacity: .8; pointer-events: none; z-index: 1; }
:root[data-theme="dark"] .pr-night { background: #1f2f55; } :root[data-theme="dark"] .pr-twi { background: #3a5086; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pr-night { background: #1f2f55; } :root:not([data-theme="light"]) .pr-twi { background: #3a5086; } }
.pr-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(120,128,140,.35) 0 4px, rgba(120,128,140,.12) 4px 6px); pointer-events: none; z-index: 2; }
.pr-off.hard { background: repeating-linear-gradient(135deg, rgba(179,38,30,.28) 0 4px, rgba(179,38,30,.1) 4px 6px); }
.pr-past { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(255,255,255,.38); pointer-events: none; z-index: 2; }
:root[data-theme="dark"] .pr-past { background: rgba(0,0,0,.28); }
.pr-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--danger); z-index: 6; pointer-events: none; }
.pr-ghost { position: absolute; top: 4px; bottom: 4px; z-index: 3; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--surface) 80%, var(--accent)); border-radius: 4px; pointer-events: none; opacity: 0; font-size: 11.5px; font-weight: 600; color: var(--accent); display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pr-track:hover .pr-ghost { opacity: 1; }
.pr-bk { position: absolute; z-index: 4; border-radius: 4px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--text); overflow: hidden; padding: 2px 6px; font: inherit; font-size: 12px; line-height: 1.25; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.pr-bk:hover { z-index: 9; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.pr-bk b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-bk span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pr-bk.k-dual { --c: var(--k-dual); } .pr-bk.k-solo { --c: var(--k-solo); } .pr-bk.k-briefing { --c: var(--k-briefing); } .pr-bk.k-theory { --c: var(--k-theory); }
.pr-bk.st-booked { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0 5px, color-mix(in srgb, var(--c) 26%, var(--surface)) 5px 7px); border-style: dashed; }
.pr-bk.st-done { opacity: .6; }
.pr-bk.mine { box-shadow: 0 0 0 2px var(--accent); }
.pr-bk.anon { --c: var(--muted); background: var(--neutral-soft); color: var(--muted); }
.sun { display: flex; gap: 14px; align-items: center; padding: 7px 14px; border-radius: 6px; background: linear-gradient(90deg, #3b6bb5, #4a86d0); color: #fff; font-size: 12px; }
.sun div { display: grid; text-align: center; line-height: 1.25; } .sun strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sun .icon { width: 18px; height: 18px; }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-weight: 600; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '+'; color: var(--muted); font-size: 18px; line-height: 1; }
.fold[open] > summary::after { content: '\2212'; }
.fold > div { padding: 0 12px 12px; }
.pg-datebar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.datesel { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.datesel a, .datesel button { display: grid; place-items: center; padding: 6px 12px; color: var(--text); border: 0; background: none; border-right: 1px solid var(--border); cursor: pointer; font: inherit; }
.datesel a:hover, .datesel button:hover { background: var(--surface-2); text-decoration: none; }
.datesel .cur { padding: 6px 16px; font-weight: 500; min-width: 250px; text-align: center; display: flex; gap: 8px; align-items: center; justify-content: center; }
.datesel .cur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.datesel .cur label { cursor: pointer; color: var(--muted); display: inline-flex; }
.datesel > :last-child { border-right: 0; }

/* Occupation (carte de chaleur) */
.heat td.h { text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.heat-cell { display: inline-block; min-width: 46px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent) calc(var(--p) * 1%), var(--surface-2)); color: var(--text); }

/* Connexion */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--nav) 0 38%, var(--bg) 38%); }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 30px 32px; width: min(380px, 100%); text-align: center; display: grid; gap: 18px; }
.login-card .brand-mark { width: 44px; height: 44px; font-size: 18px; margin: 0 auto; border-radius: 10px; }
.login-card h1 { font-size: 20px; }

.sim-banner { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 4px; font-size: 12.5px; font-weight: 500; }
.sep { height: 1px; background: var(--border); margin: 12px 0; }

/* Quiz */
.q-card { padding: 14px; border-bottom: 1px solid var(--border); }
.q-card:last-child { border-bottom: 0; }
.q-text { font-weight: 500; margin-bottom: 8px; }
.q-choice { display: flex; gap: 9px; align-items: flex-start; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.q-choice:hover { border-color: var(--muted); }
.q-choice input { margin-top: 3px; }
.q-choice.right { border-color: var(--ok); background: var(--ok-soft); }
.q-choice.wrong { border-color: var(--danger); background: var(--danger-soft); }
.q-choice.missed { border-color: var(--ok); border-style: dashed; }
.q-expl { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--info); background: var(--info-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Impression */
.print-only { display: none; }
@media print { .topbar, .subbar, .submenu, .noprint, .toasts { display: none !important; } body { background: #fff; } .page { padding: 0; max-width: none; } .panel { box-shadow: none; } }

/* Mobile */
@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .topbar-in { flex-wrap: wrap; padding: 0 8px; align-items: center; }
  .domains { order: 5; flex-basis: 100%; margin: 0; overflow-x: auto; }
  .dom { padding: 7px 11px 6px; }
  .topbar-right { margin-left: auto; }
  .who-name { display: none; }
  .submenu { display: none; }
  .submenu.open { display: block; }
  .submenu-in { flex-direction: column; padding: 4px 8px; }
  .submenu a { border-bottom: 0; border-left: 2px solid transparent; margin: 0; padding: 11px 10px; }
  .submenu a.active { border-left-color: var(--accent); }
  .grid.c2, .grid.c3, .grid.main-side { grid-template-columns: 1fr; }
  .fields, .fields.c3, .fields.c4 { --cols: 1; }
  .field.span2 { grid-column: auto; }
  .dl { grid-template-columns: 1fr; } .dl dt { border-bottom: 0; padding-bottom: 0; }
  .page { padding: 12px 10px 40px; }
  .pg { max-height: none; }
  .pg-bar .title { min-width: 0; flex-basis: 100%; order: -1; }
  .tree-body { padding-left: 14px; }
  .detail-list { grid-template-columns: 1fr; }
  .subbar .right-chips { margin-left: 0; }
  .hide-sm { display: none; }
  .grade-grid { grid-template-columns: 110px minmax(0, 1fr); } .grade-grid > :first-child { grid-column: 1 / -1; }
  .t th, .t td { padding: 7px 9px; }
  .pr-row { grid-template-columns: 112px minmax(0, 1fr); }
  .pr-label { padding: 5px 8px; } .pr-label b { font-size: 12.5px; }
  .sun { gap: 8px; font-size: 10.5px; padding: 6px 8px; width: 100%; justify-content: space-between; } .sun .icon { display: none; } .sun strong { font-size: 12px; }
}
[hidden] { display: none !important; }

.pr-axis span:first-of-type { transform: translateX(3px); } .pr-axis span:last-of-type { transform: translateX(calc(-100% - 3px)); }
.tree-les > summary .chev { transition: transform .15s; color: var(--muted); } .tree-les[open] > summary .chev { transform: rotate(90deg); }