:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #dde1e7;
  --border-ctl: #7d8491;   /* limite des champs et boutons : 3:1 sur les fonds (WCAG 1.4.11) */
  --text: #1f2430;
  --muted: #5b6270;
  --accent: #3b5bdb;
  --accent-soft: #e7ecff;
  --ok: #237a35;
  --warn: #b34700;
  --danger: #c92a2a;
  --vacances: #fff4e0;
  --vacances-2: #fffaf0;
  --vacances-fg: #9c5700;
  --ferie: #ffe8e8;
  --ferie-2: #fff5f5;
  --ferie-fg: #a61e1e;
  --hors: #eceef1;
  --hover: #fafbff;
  --label: #4b5260;
  --text-2: #444;
  --placeholder: #5f6674;
  --badge-bg: #fff0f6;
  --badge-fg: #a61e4d;
  --banner-bg: #fff3bf;
  --banner-border: #f0d870;
  --todo-fg: #b35300;
  --todo-bg: #fff4e6;
  --todo-border: #ffd8a8;
  --ok-bg: #ebfbee;
  --ok-bg-2: #f4fcf5;
  --ok-border: #b2f2bb;
  --danger-border: #f1c0c0;
  --prev-bg: #f8f9fb;
  --toast-bg: #1f2430;
  --tint: 13%;   /* teinte des tuiles de cours */
  --partie-1: #dbe4ff; --partie-2: #d3f9d8; --partie-3: #f3d9fa;   /* trimestres (Année scolaire, frise des Réglages) */
  color-scheme: light;
  --res-w: 290px;
  --dz: 1;     /* taille des fenêtres (réglable dans Réglages → Affichage) */
  --uz: 1;     /* taille de l'interface */
  --res-w-eff: calc(var(--res-w) * var(--uz));
  --top-h: 56px;
  /* Échelles communes (audit UI/UX, lot U2) : six tailles de texte, quatre rayons, deux hauteurs de contrôle. */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --ctl-h: 32px; --ctl-h-sm: 26px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-md);
  color: var(--text);
}
/* Thème nuit : choisi dans la barre du haut, sinon celui du système. */
:root[data-theme="nuit"] {
  --bg: #14171f; --surface: #1c2029; --surface-2: #252a35; --border: #333a48; --border-ctl: #737b8d;
  --text: #e4e7ee; --muted: #9aa3b2; --accent: #8ea4ff; --accent-soft: #263056;
  --ok: #69db7c; --warn: #ffa94d; --danger: #ff8787;
  --vacances: #3a2e1a; --vacances-2: #312716; --vacances-fg: #ffc078;
  --ferie: #3d2124; --ferie-2: #331c1f; --ferie-fg: #ffa8a8; --hors: #22262f;
  --hover: #222838; --label: #b8bfcc; --text-2: #c9ceda; --placeholder: #8a93a3;
  --badge-bg: #44203a; --badge-fg: #fcc2d7; --banner-bg: #4a3f12; --banner-border: #6b5a14;
  --todo-fg: #ffc078; --todo-bg: #3a2a18; --todo-border: #6b4a20;
  --ok-bg: #1b3524; --ok-bg-2: #1a2a20; --ok-border: #2f6b3e; --danger-border: #6b2f2f;
  --prev-bg: #20242e; --toast-bg: #e4e7ee;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --tint: 24%;
  --partie-1: #263056; --partie-2: #1f3a27; --partie-3: #3b2442;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg: #14171f; --surface: #1c2029; --surface-2: #252a35; --border: #333a48; --border-ctl: #737b8d;
    --text: #e4e7ee; --muted: #9aa3b2; --accent: #8ea4ff; --accent-soft: #263056;
    --ok: #69db7c; --warn: #ffa94d; --danger: #ff8787;
    --vacances: #3a2e1a; --vacances-2: #312716; --vacances-fg: #ffc078;
    --ferie: #3d2124; --ferie-2: #331c1f; --ferie-fg: #ffa8a8; --hors: #22262f;
    --hover: #222838; --label: #b8bfcc; --text-2: #c9ceda; --placeholder: #8a93a3;
    --badge-bg: #44203a; --badge-fg: #fcc2d7; --banner-bg: #4a3f12; --banner-border: #6b5a14;
    --todo-fg: #ffc078; --todo-bg: #3a2a18; --todo-border: #6b4a20;
    --ok-bg: #1b3524; --ok-bg-2: #1a2a20; --ok-border: #2f6b3e; --danger-border: #6b2f2f;
    --prev-bg: #20242e; --toast-bg: #e4e7ee;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --tint: 24%;
    --partie-1: #263056; --partie-2: #1f3a27; --partie-3: #3b2442;
    color-scheme: dark;
  }
}
/* Couleur d'accent (Réglages → Affichage, data-accent sur <html> et sur chaque pastille) : une teinte claire et une
   teinte nuit par couleur, contraste vérifié par web/tests/donnees.test.mjs. Écran seulement : l'impression garde le bleu. */
@media screen {
  [data-accent="bleu"] { --a-clair: #3b5bdb; --a-nuit: #8ea4ff; }
  [data-accent="ciel"] { --a-clair: #1864ab; --a-nuit: #74c0fc; }
  [data-accent="violet"] { --a-clair: #6741d9; --a-nuit: #b197fc; }
  [data-accent="rose"] { --a-clair: #c2255c; --a-nuit: #faa2c1; }
  [data-accent="rouge"] { --a-clair: #c92a2a; --a-nuit: #ff8787; }
  [data-accent="orange"] { --a-clair: #b53d0b; --a-nuit: #ffa94d; }
  [data-accent="vert"] { --a-clair: #237a35; --a-nuit: #69db7c; }
  [data-accent="sarcelle"] { --a-clair: #0b7285; --a-nuit: #66d9e8; }
  [data-accent] { --accent: var(--a-clair); --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  [data-theme="nuit"][data-accent], [data-theme="nuit"] [data-accent] { --accent: var(--a-nuit); --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  [data-accent="bleu"] { --accent-soft: #e7ecff; }
  [data-theme="nuit"][data-accent="bleu"] { --accent-soft: #263056; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"])[data-accent], :root:not([data-theme="clair"]) [data-accent] { --accent: var(--a-nuit); --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  :root:not([data-theme="clair"])[data-accent="bleu"] { --accent-soft: #263056; }
}
* { box-sizing: border-box; }
/* L'attribut hidden l'emporte toujours : sans cette règle, un display: flex de composant le rendait visible
   (champ « Code de vérification » affiché à la connexion). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
h1, h2, h3 { margin: 0; }
h1 { font-size: var(--fs-xl); font-weight: 650; }
h2 { font-size: var(--fs-lg); font-weight: 650; }
h3 { font-size: var(--fs-md); font-weight: 650; margin: 16px 0 8px; }
a { color: var(--accent); }
code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); font-size: var(--fs-xs); }
.muted { color: var(--muted); font-weight: 400; }
.capitalize::first-letter { text-transform: uppercase; }
.spacer { flex: 1; }
.right { text-align: right; }

/* ---- Barre du haut ---- */
.topbar {
  height: var(--top-h); flex: none; display: flex; align-items: center; gap: 24px;
  padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand-logo { width: 30px; height: 30px; display: block; }
/* Nom « SCIP » : Lexend ExtraBold (licence OFL, web/fonts/Lexend-OFL.txt), réduite aux majuscules (2 Ko),
   servie par le site lui-même. Les autres caractères restent dans la police du système. */
@font-face {
  font-family: "SCIP Marque"; src: url("../fonts/lexend-extrabold-majuscules.woff2") format("woff2");
  font-weight: 800; font-display: swap; unicode-range: U+0041-005A;
}
.brand-name, .porte-nom { font-family: "SCIP Marque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: 1px; }
.brand-name { font-size: var(--fs-xl); color: var(--accent); }
.brand-lien { display: flex; align-items: center; gap: 9px; text-decoration: none; border-radius: var(--r-sm); }
.tabs { display: flex; gap: 4px; }
.tabs button {
  border: 0; background: none; padding: 8px 14px; border-radius: var(--r-md); font: inherit;
  color: var(--muted); cursor: pointer; font-weight: 550;
  display: inline-flex; align-items: center; gap: 7px;
}
.tabs button:hover { background: var(--surface-2); color: var(--text); }
.tabs button.active { background: var(--accent-soft); color: var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.save-status { font-size: var(--fs-xs); color: var(--muted); }
.save-status.ok { color: var(--ok); }
.save-status.err { color: var(--danger); font-weight: 600; }
.banner { background: var(--banner-bg); border-bottom: 1px solid var(--banner-border); padding: 8px 16px; font-size: var(--fs-sm); }
.banner .btn { margin-left: 8px; vertical-align: middle; }

/* ---- Mise en page ---- */
.layout { flex: 1; display: flex; min-height: 0; }
main { flex: 1; overflow: auto; padding: 16px 20px 40px; min-width: 0; zoom: var(--uz); }
.topbar, .banner { zoom: var(--uz); }
.ressources {
  zoom: var(--uz);
  width: var(--res-w); flex: none; background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 12px; gap: 8px; min-height: 0;
}
body.res-hidden .ressources { display: none; }
.res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.res-head h2 { margin-right: auto; }
/* Bouton Ressources de la barre : bascule du panneau ; ouvert, seul son dossier change (plein, couleur d'accent). */
#toggle-res[aria-expanded="true"] .ico { color: var(--accent); }
#toggle-res[aria-expanded="true"] .ico path { fill: currentColor; }
.res-head .res-ajout { order: 1; flex-basis: 100%; display: flex; gap: 4px; margin-left: 0; }   /* version en ligne : Fichiers, Dossier sur leur ligne */
.hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.res-list { overflow: auto; flex: 1; margin: 0 -4px; }
.res-folder summary { cursor: pointer; padding: 6px 4px; font-weight: 600; font-size: var(--fs-sm); }
.res-folder .res-item { padding-left: 18px; }
.res-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-radius: var(--r-md);
  cursor: grab; user-select: none;
}
.res-item:hover { background: var(--surface-2); }
.res-item:active { cursor: grabbing; }
.res-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.res-count {
  font-size: var(--fs-xs); background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill);
  padding: 0 6px; font-weight: 600;
}
.empty-msg { color: var(--muted); font-size: var(--fs-sm); padding: 8px 4px; line-height: 1.5; }
.empty-msg.err { color: var(--danger); }

/* ---- Icônes (icones.js) : trait de la couleur du texte, taille de la police ---- */
.ico {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.f-pdf { color: var(--danger); }
.f-texte { color: var(--accent); }
.f-diapo { color: var(--warn); }
.f-image { color: var(--ok); }
.f-creer { color: var(--muted); }

/* ---- Contrôles ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-ctl);
  background: var(--surface); color: var(--text); min-height: var(--ctl-h); padding: 4px 12px; border-radius: var(--r-md);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); }
.btn.danger:hover { background: var(--ferie-2); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { min-height: var(--ctl-h-sm); padding: 2px 8px; gap: 4px; font-size: var(--fs-xs); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.icon-btn {
  border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm);
  color: var(--muted); font: inherit; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.input {
  font: inherit; color: inherit; border: 1px solid var(--border-ctl); border-radius: var(--r-md);
  min-height: var(--ctl-h); padding: 5px 8px; background: var(--surface); width: 100%;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea.input { resize: vertical; line-height: 1.45; }
.badge {
  display: inline-block; font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--badge-bg); color: var(--badge-fg); font-weight: 600;
}
.badge.off { background: var(--vacances); color: var(--vacances-fg); }
.dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); margin-right: 6px; vertical-align: baseline;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill);
  padding: 4px 12px; font: inherit; cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.chip .dot { width: 8px; height: 8px; }
.chip.active .dot { box-shadow: 0 0 0 2px #fff; }
.dot.big { width: 14px; height: 14px; margin-right: 8px; }
.chip.static { cursor: default; display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.chip.static button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.notice {
  background: var(--accent-soft); border-radius: var(--r-md); padding: 10px 14px;
  margin-bottom: 12px; line-height: 1.5;
}

/* ---- Barre d'outils de vue ---- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar h1 .muted { font-size: var(--fs-md); margin-left: 6px; }
.toolbar-titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toolbar-titre h1 { display: flex; align-items: center; gap: 8px; }
.toolbar-titre .trim-tag { margin-left: 0; }
.toolbar-sous { font-size: var(--fs-sm); color: var(--muted); }
.week-select { width: auto; max-width: 200px; }

/* ---- Agenda (Jour, Semaine, Mois) : en-tête fixe et commun, seul le contenu défile ---- */
main.main-agenda { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
/* Les commandes restent sur une ligne, le titre trop long passe à la ligne (rien n'est coupé). Sous 1100 px,
   les commandes passent toutes sur une deuxième ligne, à la même place dans les trois échelles. */
.agenda-entete { flex: none; flex-wrap: nowrap; }
.agenda-entete .toolbar-titre { flex: 1 1 auto; }
.agenda-entete h1, .agenda-entete .toolbar-sous { display: block; overflow-wrap: anywhere; }
.toolbar-sous .trim-tag { margin: 0 6px 0 0; }
.agenda-saut > .input { width: 180px; max-width: none; }
.agenda-corps { flex: 1; min-height: 0; overflow: auto; margin: 0 -20px; padding: 0 20px 40px; }
@media (max-width: 1100px) {
  .agenda-entete { flex-wrap: wrap; }
  .agenda-entete .toolbar-actions { width: 100%; justify-content: flex-end; }
}

/* ---- Vue semaine ---- */
.week-grid {
  display: grid; grid-template-columns: 64px repeat(5, minmax(150px, 1fr));
  grid-template-rows: auto repeat(11, minmax(58px, auto));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow); overflow: clip;   /* pas hidden : les en-têtes de jours restent collés en défilant */
}
.week-grid.un-jour { grid-template-columns: 64px minmax(0, 1fr); }   /* Agenda → Jour : une colonne */
.wg-head {
  padding: 8px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--surface); position: sticky; top: 0; z-index: 3;
}
.wg-corner { border-left: 0; }
.wg-day { font-weight: 650; color: inherit; text-decoration: none; display: flex; align-items: center; min-height: 24px; }   /* cible de 24 px (WCAG 2.5.8) */
.wg-date { color: var(--muted); font-size: var(--fs-xs); }
.wg-head.today { background: var(--accent-soft); }
.wg-head.today .wg-day { color: var(--accent); }
.wg-period {
  border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; background: var(--surface-2);
}
.wg-period span { font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.3; }
.wg-period:first-of-type { border-top: 0; }
.wg-cell {
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wg-cell span { opacity: 0; color: var(--accent); font-size: var(--fs-xl); }
.wg-cell:hover { background: var(--hover); }
.wg-cell:hover span { opacity: .7; }
.wg-cell.occupee span { display: none; }   /* sous une tuile : pas de « + » entre deux cours simultanés */
.wg-off {
  border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--vacances), var(--vacances) 10px, var(--vacances-2) 10px, var(--vacances-2) 20px);
  color: var(--vacances-fg); font-weight: 600; z-index: 1;
}
.wg-off.ferie { background: repeating-linear-gradient(135deg, var(--ferie), var(--ferie) 10px, var(--ferie-2) 10px, var(--ferie-2) 20px); color: var(--ferie-fg); }
.wg-off.hors { background: var(--hors); color: var(--muted); }
.wg-off span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .5px; }
.wg-slot { display: flex; gap: 3px; padding: 3px; z-index: 2; min-width: 0; }

.card {
  flex: 1; min-width: 0; border-radius: var(--r-md); padding: 4px 6px 6px; cursor: default;
  background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border-left: 4px solid var(--c);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.card:hover { box-shadow: var(--shadow); }
.card-top { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; cursor: pointer; padding: 2px 0; white-space: nowrap; }
.card-top:hover .card-title { text-decoration: underline; }
.card-title { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-classe {
  flex: 0 1 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);   /* la couleur reste dans la bordure : texte lisible sur toute teinte */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.card-open { font-size: var(--fs-xs); color: var(--muted); flex: none; cursor: pointer; padding: 3px 0 0 2px; }
.card-open:hover, .card-tete:has(.card-top:hover) .card-open { color: var(--text); }
.card-input, .card-comment {
  width: 100%; font: inherit; border: 1px solid transparent; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 55%, transparent); padding: 2px 5px; color: var(--text);
}
.card-input { font-size: var(--fs-sm); font-weight: 600; }
.card-comment {
  font-size: var(--fs-xs); line-height: 1.35; resize: none; min-height: 34px; max-height: 120px;
  field-sizing: content;
}
.card-input:hover, .card-comment:hover { border-color: color-mix(in srgb, var(--c) 35%, var(--surface)); }
.card-input:focus, .card-comment:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--c); background: var(--surface); }
.card-input::placeholder, .card-comment::placeholder { color: var(--placeholder); font-weight: 400; font-style: italic; }
.card-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-xs); min-width: 0; }
.card-doc-name { flex: 1 1 70px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); }
.card-doc-name:hover { text-decoration: underline; }
.placeholder { font-style: italic; color: var(--muted); }

/* étapes des documents (cases à cocher) */
.checks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.check {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--todo-fg); white-space: nowrap;
  background: var(--todo-bg); border: 1px solid var(--todo-border); border-radius: var(--r-pill); padding: 1px 7px 1px 4px; cursor: pointer;
  min-height: 24px;
}
.check input { margin: 0; width: 13px; height: 13px; cursor: pointer; accent-color: var(--ok); }
.check.on { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
/* Tuile : en-tête sur une ligne (cours, classe, salle, case de préparation, flèche dans le coin).
   Quand la place manque, cours, classe et salle passent à la ligne au lieu d'être coupés. Sur une tuile étroite
   (deux cours dans la même période), la case garde sa coche et perd son libellé visible. Sur une tuile très
   étroite, la case et la flèche restent sur la première ligne et le cours passe dessous. */
.card { container-type: inline-size; }
.card-tete { display: flex; align-items: flex-start; gap: 4px; }
.card-tete .card-top { flex: 1 1 auto; min-width: 0; }
.card-prepa { flex: none; display: flex; padding-top: 1px; }
.card-salle { flex: 0 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-resume { display: none; }
@container (max-width: 200px) {
  .card-prepa .check { padding: 1px 4px; }
  .card-prepa .check-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 120px) {
  .card-tete { flex-wrap: wrap; justify-content: space-between; }
  .card-tete .card-top { order: 1; flex-basis: 100%; }
}
/* Tuile étroite (cours simultanés) : plus de saisie sur place, coupée en morceaux. Cours, classe et salle passent
   à la ligne, titre et commentaire sont repris en texte, les documents gardent leur nom sans leurs cases. La tuile
   s'ouvre pour modifier. Vaut aussi à l'impression A4 de la semaine (tuiles de moins de 100 px). */
@container (max-width: 100px) {
  .card-top { white-space: normal; }
  .card-title, .card-classe, .card-salle { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  .card-input, .card-comment, .card-prev, .card-doc .checks { display: none; }
  .card-doc-name { white-space: normal; overflow-wrap: anywhere; }
  .card-resume { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; hyphens: auto; }
  .card-resume > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .card-resume-titre { font-weight: 600; color: var(--text); }
}
.card-prev {
  display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-xs); color: var(--muted);
}
.card-prev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sur une tuile teintée, --muted descend sous 4,5:1 en nuit : --text-2 à la place. */
.card-doc.done .card-doc-name { text-decoration: line-through; color: var(--text-2); }
.card .placeholder { color: var(--text-2); }
.doc-tag.done { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); }
.doc-row.done { background: var(--ok-bg-2); }

/* glisser-déposer */
body.dragging [data-drop] { outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
.drop-hover { outline: 3px solid var(--accent) !important; background: var(--accent-soft) !important; }

/* ---- Vue mois ---- */
.month-grid {
  display: grid; grid-template-columns: 52px repeat(5, minmax(150px, 1fr));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow); overflow: clip;
}
.mg-head { padding: 12px 14px; font-weight: 650; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: 3; }
.mg-week {
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14px;
  font-weight: 700; color: var(--accent); cursor: pointer; border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--fs-xs);
}
.mg-week:hover { background: var(--accent-soft); }
.mg-day {
  min-height: 150px; padding: 10px 10px 12px; border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
/* Jours du mois voisin : fond et numéro atténués, pas d'opacity (le texte garderait 2:1). */
.mg-day.other { background: var(--surface-2); }
.mg-day.other .mg-date, .mg-day.other .mg-date a { color: var(--muted); font-weight: 500; }
.mg-day.off.vacances { background: var(--vacances); }
.mg-day.off.ferie { background: var(--ferie); }
.mg-day.off.hors { background: var(--hors); }
/* Jour courant : pastille sur le numéro seul ; place gardée à droite pour le bouton « + » (absolu). */
.mg-date { position: relative; font-weight: 650; font-size: var(--fs-sm); margin-bottom: 4px; padding-right: 24px; }
.mg-day.today .mg-date a { background: var(--accent); color: var(--surface); border-radius: var(--r-pill); padding: 1px 7px; }
.mg-off { font-weight: 500; color: var(--vacances-fg); font-size: var(--fs-xs); }
.mini {
  font-size: var(--fs-sm); line-height: 1.35; padding: 5px 8px; border-radius: var(--r-md); cursor: pointer;
  background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border-left: 3px solid var(--c);
  min-width: 0;
}
.mini-head, .mini-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-titre { font-weight: 600; }
.mini:hover { filter: brightness(.97); }

/* ---- Vue par classe ---- */
.table-wrap {
  overflow: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow); max-height: calc(100vh - 210px);
}
.class-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.class-table th, .class-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.class-table th { position: sticky; top: 0; background: var(--surface); z-index: 2; font-weight: 650; }
.class-table th.th-cours { border-top: 4px solid var(--c); min-width: 220px; }
.class-table th.th-cours a { color: var(--text); text-decoration: none; display: block; }
.class-table th.th-cours a:hover { color: var(--accent); }
.class-table th .muted { font-size: var(--fs-xs); }
.td-week { cursor: pointer; white-space: nowrap; width: 80px; }
.td-week strong { display: block; color: var(--accent); }
.td-week .muted { font-size: var(--fs-xs); }
.td-week:hover { background: var(--accent-soft); }
tr.current td { background: var(--hover); }
tr.current .td-week { box-shadow: inset 3px 0 var(--accent); }
.row-off td { background: var(--vacances); color: var(--vacances-fg); font-size: var(--fs-xs); padding: 3px 8px; }
.td-off { background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-style: italic; }
.td-line { display: flex; gap: 2px; align-items: center; }
.inline-input {
  flex: 1; border: 1px solid transparent; background: transparent; font: inherit; padding: 4px 6px;
  border-radius: var(--r-sm); min-width: 0;
}
.inline-input:hover { border-color: var(--border); }
.inline-input:focus { border-color: var(--accent); background: var(--surface); outline: 2px solid var(--accent); outline-offset: 0; }
.class-table th.th-semaine { border-top: 4px solid transparent; }
/* « … » d'une séance : visible au survol et au clavier, toujours au toucher. */
.td-seance .icon-btn { opacity: 0; }
.td-seance:hover .icon-btn, .td-seance:focus-within .icon-btn { opacity: 1; }
@media (hover: none) { .td-seance .icon-btn { opacity: .6; } }
/* Vue Classes : le tableau occupe la hauteur restante, une seule barre de défilement. */
.vue-pleine { display: flex; flex-direction: column; height: 100%; }
.vue-pleine > .table-wrap:last-child { flex: 1; min-height: 320px; max-height: none; }
.td-meta { font-size: var(--fs-xs); color: var(--muted); padding-left: 6px; }

/* ---- Récap & réglages ---- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.panel > h2 { margin-bottom: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; display: flex; flex-direction: column; color: var(--muted); font-size: var(--fs-xs);
}
.stat-n { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); }
.stat.warn .stat-n { color: var(--warn); }
.stat.ok .stat-n { color: var(--ok); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.table .num { text-align: right; }
.table tr.done td { color: var(--muted); }
.table tr.done a { text-decoration: line-through; }
.copies { width: 70px; text-align: right; }
.missing { color: var(--danger) !important; text-decoration: line-through; }
.recap-day h3 { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.recap-row {
  display: flex; gap: 14px; padding: 8px 10px; border-left: 4px solid var(--c); margin-bottom: 6px;
  background: color-mix(in srgb, var(--c) 7%, var(--surface)); border-radius: 0 var(--r-md) var(--r-md) 0;
}
/* Ligne du programme : la zone qui ouvre la séance, puis la case de préparation à côté (pas dedans). */
.recap-ouvrir { flex: 1; min-width: 0; display: flex; gap: 14px; cursor: pointer; }
.recap-prepa { flex: none; align-self: flex-start; }
.recap-row:has(.recap-ouvrir:hover) { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); }
.recap-when { width: 90px; flex: none; display: flex; flex-direction: column; font-size: var(--fs-xs); }
.recap-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.recap-title { font-size: var(--fs-lg); font-weight: 600; }
.recap-title.muted { font-weight: 400; font-style: italic; font-size: var(--fs-sm); }
.recap-comment { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--text-2); }
.recap-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-tag { font-size: var(--fs-xs); border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); padding: 1px 6px; }
/* Récap : liste des séances à préparer (Semaine et Journée). */
.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.todo-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 7%, var(--surface)); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.todo-check { flex: none; margin: 4px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--ok); }   /* marge : 24 px sans voisin (WCAG 2.5.8) */
.todo-lien { flex: 1; min-width: 0; min-height: 24px; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 2px 8px; color: var(--text); text-decoration: none; }
.todo-lien:hover .todo-titre { text-decoration: underline; }
.todo-when { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); min-width: 80px; }
.todo-titre.muted { font-style: italic; }
.td-fait { color: var(--ok); }
.a-preparer-jour { max-width: 900px; }   /* même largeur que la fiche de la journée */

.inline-form { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.inline-form .input { max-width: 260px; }

/* ---- Fenêtres ----
   La boîte garde sa taille réelle (bornée par l'écran) ; son contenu est agrandi par --dz. */
.dialog {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; width: min(calc(620px * var(--dz)), calc(100vw - 32px));
  max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); color: var(--text); background: var(--surface);
  flex-direction: column;
}
.dialog[open] { display: flex; }
.dialog.wide { width: min(calc(900px * var(--dz)), calc(100vw - 32px)); }
.dialog.confirm { width: min(calc(440px * var(--dz)), calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(20, 24, 33, .35); }
.dialog.modeless {
  position: fixed; inset: 0; margin: auto; z-index: 50;
  width: min(calc(820px * var(--dz)), calc(100vw - var(--res-w-eff) - 48px)); left: calc(-1 * var(--res-w-eff));
}
body.res-hidden .dialog.modeless { left: 0; width: min(calc(820px * var(--dz)), calc(100vw - 32px)); }
.overlay { position: fixed; top: 0; left: 0; bottom: 0; right: var(--res-w-eff); background: rgba(20, 24, 33, .35); z-index: 40; }
body.res-hidden .overlay { right: 0; }
.dlg-head, .dlg-body, .dlg-foot { zoom: var(--dz); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid var(--border); flex: none; }
.dlg-head h2 { display: flex; align-items: center; gap: 6px; }
.dlg-body { padding: 24px 26px 26px; overflow: auto; line-height: 1.45; }
.dlg-body:empty { display: none; }
.dlg-body h3 { margin: 26px 0 12px; }
.dlg-foot, .dlg-foot-inline { display: flex; align-items: center; gap: 8px; }
.dlg-foot { padding: 16px 26px; border-top: 1px solid var(--border); flex: none; }
.dlg-foot-inline { margin-top: 26px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
/* Les pastilles .check et .pick sont des label en ligne : la règle des champs ne s'y applique pas.
   :where() garde la spécificité de « .form label » : .form .toggle doit toujours l'emporter. */
.form label:where(:not(.check, .pick)), .form .label { display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--label); }
.form .full { grid-column: 1 / -1; }
.form .input { font-size: var(--fs-md); color: var(--text); font-weight: 400; padding: 9px 11px; }
.form-error { color: var(--danger); margin: 0; font-size: var(--fs-sm); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; }
.swatch.active { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--surface); }
.swatches input[type=color] { width: 34px; height: 28px; border: 1px solid var(--border-ctl); border-radius: var(--r-md); padding: 0; background: none; cursor: pointer; }

.seance-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.seance-when { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.doc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.link-select { width: auto; max-width: 200px; font-size: var(--fs-xs); }
.prev-box {
  background: var(--prev-bg); border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 16px; margin-bottom: 22px;
}
.prev-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.prev-title { font-weight: 600; margin-top: 2px; }
.prev-comment { white-space: pre-wrap; font-size: var(--fs-sm); margin-top: 2px; color: var(--text-2); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-items: center; }
.pick {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px 5px 8px; cursor: pointer;
  color: var(--text); font-size: var(--fs-sm); font-weight: 500;
}
.pick:has(input:checked) { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border-color: var(--c); }
.pick input { margin: 0; }
.pick .dot { margin-right: 0; }
.swatch-classe {
  width: auto; border-radius: var(--r-pill); padding: 0 8px; color: #fff; font: inherit; font-size: var(--fs-xs); font-weight: 700;
}
.doc-name { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.doc-copies { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.doc-copies .input { width: 64px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--r-md); padding: 18px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-sm);
}
.dropzone .input { max-width: 300px; }

.preview-frame { width: 100%; height: calc(72vh / var(--dz)); border: 0; border-radius: var(--r-md); background: var(--surface-2); }
.preview-img { max-width: 100%; display: block; margin: 0 auto; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--toast-bg); color: var(--bg); padding: 9px 16px; border-radius: var(--r-md); font-size: var(--fs-sm);
  box-shadow: var(--shadow); transition: opacity .4s;
}
.toast.out { opacity: 0; }

/* ---- Impression ---- */
@media print {
  body { overflow: visible; height: auto; display: block; background: #fff; }
  .topbar, .ressources, .banner, .toolbar .btn-group, .toolbar .btn, .subtabs, .week-select, .agenda-saut, .mg-add-evt, .wg-add-evt, .wg-cell > span, .card-open, .toast, dialog { display: none !important; }
  .layout, main, main.main-agenda { display: block; overflow: visible; padding: 0; }
  .agenda-corps { overflow: visible; margin: 0; padding: 0; }
  .vue-pleine { height: auto; display: block; }
  .table-wrap { max-height: none !important; overflow: visible; }
  .panel, .stat { box-shadow: none; break-inside: avoid-page; }
  .recap-row { break-inside: avoid; }
  input[type=number] { border: 0; }
  .card .checks, .card-prepa { display: none !important; }   /* cases des tuiles : pas sur papier (Jour et Semaine) */
}

/* ---- Réglages : affichage ---- */
.scale-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.scale-row > strong { width: 200px; }
.btn-group .btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); position: relative; }
.scale-ctrl { display: flex; align-items: center; gap: 6px; }
.scale-val { min-width: 48px; text-align: center; font-weight: 700; }

/* ---- Particularité, trimestres ---- */
.card-part { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: -1px; }
.trim-tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 2px 9px; margin-left: 8px; vertical-align: middle;
}
.row-trim td {
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .4px; text-transform: uppercase; padding: 5px 8px; position: sticky; top: 0;
}
.class-table th .badge { margin-top: 3px; }
.trims { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.trim-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.trim-row strong { width: 140px; display: inline-flex; align-items: center; gap: 6px; }
.trim-row label { display: flex; align-items: center; gap: 6px; }
.trim-row .input { width: auto; }
.table.synth tfoot th, .table.synth tfoot td { border-bottom: 0; border-top: 1px solid var(--border); }
.table.synth tfoot th { color: var(--text); font-size: var(--fs-sm); }
.trim-evts { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 16px; }
.evt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evt-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.evt-date { font-size: var(--fs-xs); color: var(--muted); width: 112px; flex: none; }

/* ---- Événements ---- */
.evts { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.evt {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: left; cursor: pointer;
  color: var(--text-2); background: color-mix(in srgb, var(--c) var(--tint), var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: var(--r-md); padding: 2px 7px;
}
.evt:hover { border-color: var(--c); }
.evt-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wg-head .evt-titre { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }   /* en-tête de jour : passe à la ligne */
.evt-p { font-weight: 500; flex: none; }
.evt-annule { border-style: dashed; }
.evt-annule-ico { color: var(--danger); }
.evts-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recap-day .evts { flex-direction: row; flex-wrap: wrap; margin: 0 0 8px; }
.mg-day .evt { font-size: var(--fs-xs); padding: 3px 7px; }
.wg-add-evt, .mg-add-evt {
  position: absolute; top: 6px; right: 6px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); color: var(--accent); border-radius: var(--r-sm); padding: 1px 5px; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
}
.mg-add-evt { top: -2px; right: -2px; }
.wg-head:hover .wg-add-evt, .mg-day:hover .mg-add-evt { opacity: 1; }
.wg-add-evt:hover, .mg-add-evt:hover { background: var(--accent-soft); }

/* séances annulées par un événement */
.card.annule { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 8px, var(--surface) 8px, var(--surface) 16px); }
/* Sur fond uni : la hachure de la tuile annulée ferait passer le texte sous 4,5:1. */
.card-annule, .card-strike { background: var(--surface); border-radius: var(--r-sm); padding: 0 4px; width: fit-content; max-width: 100%; }
.card-annule { font-size: var(--fs-xs); font-weight: 700; color: var(--danger); cursor: pointer; }
.card-annule:hover { text-decoration: underline; }
.card-strike { font-size: var(--fs-xs); color: var(--muted); text-decoration: line-through; }
.mini.annule { text-decoration: line-through; color: var(--muted); background: var(--surface-2); }
.td-annule a { color: var(--danger); text-decoration: none; font-style: normal; font-weight: 600; display: block; }
.recap-row.annule { background: var(--surface-2); }
.table tr.annule td { color: var(--muted); }
.notice.warn { background: var(--ferie); color: var(--ferie-fg); }
.notice.warn a { color: inherit; font-weight: 700; }
.form .notice { margin: 0; font-weight: 400; }
.form .toggle { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--text); }
.form .toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }

/* ---- Sous-onglets du récap ---- */
.subtabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; background: var(--surface-2); border-radius: var(--r-md); }
.subtabs button {
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted);
  padding: 6px 16px; border-radius: var(--r-md); cursor: pointer;
}
.subtabs button:hover { color: var(--text); }
.subtabs button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* ---- Réinitialisation ---- */
.danger-zone { border-color: var(--danger-border); }
.danger-zone p { margin: 0 0 12px; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--surface); font-weight: 600; }
.btn.danger-solid:hover { filter: brightness(1.08); }
.btn.danger-solid:disabled { opacity: .35; }

/* ---- Vue Jour : fiche de déroulé ---- */
.print-only { display: none; }
.pre { white-space: pre-wrap; }
.day-pick { width: auto; }
.wg-day:hover { color: var(--accent); text-decoration: underline; }
.mg-date a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.mg-date a:hover { color: var(--accent); text-decoration: underline; }
.sheet {
  max-width: 900px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 16px;
}
.sheet-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid var(--text); }
.sheet-head h2 { font-size: var(--fs-2xl); margin: 2px 0 4px; }
.sheet-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); }
.sheet-prof { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; font-size: var(--fs-sm); }
.sheet-prof label { display: flex; align-items: center; gap: 8px; width: min(21rem, 100%); }
.sheet-prof label span { flex: none; width: 7.5em; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.sheet-prof .input { flex: 1; min-width: 0; text-align: right; }
.sheet-prof [data-profil="nom"]:not(:placeholder-shown) { font-weight: 600; }
.sheet-foot { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.day-label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 5px; }
.day-evts .evts { flex-direction: row; flex-wrap: wrap; margin: 0; }
.day-consignes textarea { font-size: var(--fs-md); }
.day-item {
  display: flex; gap: 18px; padding: 16px 18px; border: 1px solid var(--border); border-left: 5px solid var(--c);
  border-radius: 0 var(--r-md) var(--r-md) 0; break-inside: avoid;
}
.day-item.annule { background: var(--surface-2); }
.day-when { width: 96px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.day-when strong { font-size: var(--fs-lg); }
.day-when span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.day-head h3, .day-head h4 { margin: 0; font-size: var(--fs-lg); }
.day-info { color: var(--muted); font-size: var(--fs-sm); }
.day-edit { margin-left: auto; }
.day-titre { font-size: var(--fs-lg); font-weight: 650; }
.day-titre.muted { font-style: italic; font-weight: 400; font-size: var(--fs-md); }
.day-block .pre { font-size: var(--fs-md); line-height: 1.5; }
.day-docs { margin: 0; padding-left: 18px; line-height: 1.7; font-size: var(--fs-md); }
.day-docs .ok { color: var(--ok); font-weight: 600; }
.day-docs .warn { color: var(--warn); font-weight: 600; }
.day-prev { background: var(--prev-bg); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-2); }
.day-annule { margin: 0; color: var(--danger); font-weight: 700; }
.day-gap { color: var(--muted); font-size: var(--fs-sm); font-style: italic; padding: 0 0 0 20px; border-left: 2px dotted var(--border); margin-left: 2px; }

/* ---- Impression : toujours en clair, fiche du jour sans contrôles ---- */
@media print {
  :root, :root[data-theme] {
    --bg: #fff; --surface: #fff; --surface-2: #f3f4f6; --border: #cfd4dc; --border-ctl: #7d8491; --text: #111; --muted: #555;
    --accent: #3b5bdb; --accent-soft: #e7ecff; --prev-bg: #f5f6f8; --text-2: #333; --tint: 10%;
    --vacances: #fff4e0; --vacances-fg: #9c5700; --ferie: #ffe8e8; --ferie-fg: #a61e1e;
    --ok: #2f9e44; --warn: #c2410c; --danger: #c92a2a; --badge-bg: #fff0f6; --badge-fg: #a61e4d;
    --vacances-2: #fffaf0; --todo-fg: #b35300; --todo-bg: #fff4e6; --todo-border: #ffd8a8; --ok-bg: #ebfbee; --ok-border: #b2f2bb;
    --partie-1: #dbe4ff; --partie-2: #d3f9d8; --partie-3: #f3d9fa;
    color-scheme: light;
  }
  main { zoom: 1; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  span.print-only { display: inline; }
  .sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .day-item { padding: 10px 12px; }
  .day-consignes .pre:empty { display: none; }
  .day-consignes:has(.pre:empty) { display: none; }
}

/* ---- Mode suivi d'élèves ---- */
.mode-badge {
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--surface); background: var(--accent);
  border: 0; border-radius: var(--r-pill); padding: 2px 8px; margin-left: 2px; cursor: pointer;
}
.mode-badge:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.mode-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer;
}
.mode-card strong { font-size: var(--fs-lg); }
.mode-card span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.mode-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.mode-card.active { border-color: var(--accent); background: var(--accent-soft); }
.eleve-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.eleve-filter .pick { font-size: var(--fs-sm); }
.eleve-filter .pick:has(input:checked) { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border-color: var(--c); }
.eleve-filter .pick:not(:has(input:checked)) { color: var(--muted); border-style: dashed; }
.subtabs.inline { margin: 0; }
.card-prof { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-horaire { width: auto; }

/* disponibilités : qui est libre à chaque période */
.wg-libre {
  border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 4px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px;
}
.wg-libre.aucun { background: var(--surface-2); }
.wg-libre.tous { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); align-items: center; justify-content: center; }
.libre {
  font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: color-mix(in srgb, var(--c) 65%, var(--text));
}
.libre-tous { font-size: var(--fs-xs); font-weight: 700; color: var(--ok); }

/* fiche du jour et récap regroupés par élève */
.day-eleve { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; break-inside: avoid-page; }
.day-eleve h3 { margin: 0;  display: flex; align-items: center; gap: 4px; font-size: var(--fs-xl); padding-bottom: 6px; border-bottom: 2px solid var(--c); }
.day-eleve .dot, .recap-eleve .dot { background: var(--c); }
.recap-eleve { gap: 6px; }

/* horaire type d'un élève */
.ht-wrap { max-height: none; box-shadow: none; }
.ht { border-collapse: collapse; width: 100%; table-layout: fixed; }
.ht th, .ht td { border: 1px solid var(--border); padding: 6px 8px; font-size: var(--fs-sm); vertical-align: top; }
.ht thead th { background: var(--surface-2); text-align: left; }
.ht tbody th { width: 92px; text-align: left; white-space: nowrap; background: var(--surface-2); }
.ht-cours { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); border-left: 4px solid var(--c) !important; cursor: pointer; }
.ht-libre { color: var(--ok); font-style: italic; cursor: pointer; }
.ht-libre:hover { background: var(--hover); }
.ht-titre { margin: 4px 0 12px; }

/* colonne d'un jour : sous-grille alignée sur les périodes, cours côte à côte s'ils se chevauchent */
.wg-daycol { display: grid; grid-template-rows: subgrid; z-index: 2; pointer-events: none; min-width: 0; }
.wg-daycol .wg-slot { pointer-events: auto; }

/* ---- Version en ligne : écran de connexion (session.js) ---- */
body.porte-ouverte > :not(#porte) { display: none; }
.porte {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--bg);
}
.porte-carte {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; line-height: 1.5;
}
.porte-marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-xl); margin-bottom: 18px; }
.porte-marque img { width: 36px; height: 36px; }
.porte-marque span { display: flex; flex-direction: column; line-height: 1.15; }
.porte-marque small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
/* Mot de passe avec bouton « œil » (session.js) */
.mdp-champ { position: relative; display: block; }
.mdp-champ .input { padding-right: 44px; }
.mdp-voir {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.mdp-voir:hover { color: var(--text); }
/* Bouton qui se présente comme un lien (actions secondaires des écrans de connexion) */
.lien { border: 0; background: none; padding: 2px 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lien:hover { text-decoration-thickness: 2px; }
.porte h1 { font-size: var(--fs-xl); margin: 0 0 12px; }
.porte p { margin: 0 0 12px; }
.porte-form { display: flex; flex-direction: column; gap: 12px; }
.porte-form label { display: flex; flex-direction: column; gap: 4px; color: var(--label); font-weight: 600; font-size: var(--fs-sm); }
.porte-form .btn.primary, .porte-carte > .btn.primary { padding: 9px 14px; font-weight: 600; width: 100%; }
.porte-msg { min-height: 1.5em; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.porte-msg.err { color: var(--danger); }
.porte-note { font-size: var(--fs-sm); color: var(--muted); }
.porte-pied { font-size: var(--fs-xs); color: var(--muted); margin: 16px 0 0 !important; text-align: center; }
.porte-secours {
  border: 2px dashed var(--accent); border-radius: var(--r-md); padding: 14px; margin-bottom: 12px;
  text-align: center; background: var(--accent-soft);
}
.porte-secours-compte { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.porte-secours code { background: none; padding: 0; display: inline-block; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .04em; word-break: break-all; }
.porte-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.porte-coche { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; font-size: var(--fs-sm); }
.porte-form .porte-coche { flex-direction: row; margin-bottom: 0; font-weight: 400; color: var(--text); }
.porte-coche input { flex: none; margin-top: 3px; }
.porte-legal { display: inline-block; margin-top: 6px; }
.porte a[href^="mailto:"], .legal a[href^="mailto:"], .legal-pied a[href^="mailto:"] { white-space: nowrap; }
@media print {
  .impr-secours .porte { min-height: 0; display: block; padding: 0; background: none; }
  .impr-secours .porte-carte { border: none; box-shadow: none; max-width: none; }
  .impr-secours .porte-actions, .impr-secours .porte-coche, .impr-secours .porte .btn { display: none; }
}

.toolbar-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---- Réglages : degrés et niveaux ---- */
.sous-titre { font-size: var(--fs-sm); color: var(--label); margin: 14px 0 6px; }

/* ---- Impression de la semaine : une page A4 paysage (imprimerSemaine) ----
   Lignes de hauteur fixe (11 × 14 mm + en-têtes < 194 mm imprimables) : la semaine tient toujours sur une page.
   Les champs vides (« Titre de la séance », « Commentaire… ») ne sont pas imprimés. */
@media print {
  .impr-semaine .notice, .impr-semaine .wg-add-evt, .impr-semaine .wg-cell span,
  .impr-semaine .card-open, .impr-semaine .card :placeholder-shown, .impr-semaine .card-prev { display: none !important; }
  .impr-semaine .toolbar { margin-bottom: 4mm; }
  .impr-semaine .toolbar h1 { font-size: 15px; }
  .impr-semaine .week-grid {
    grid-template-columns: 40px repeat(5, minmax(0, 1fr));
    grid-template-rows: auto repeat(11, 14mm);
    box-shadow: none;
  }
  .impr-semaine .wg-head { position: static; padding: 3px 6px; }
  .impr-semaine .wg-period { padding: 1px; }
  .impr-semaine .wg-period span { font-size: 9px; }
  .impr-semaine .wg-slot { padding: 2px; overflow: hidden; }
  .impr-semaine .card { padding: 2px 5px; gap: 1px; }
  .impr-semaine .card-title, .impr-semaine .card-input { font-size: 11px; }
  .impr-semaine .card-input, .impr-semaine .card-comment {
    background: none; border: 0; padding: 0; min-height: 0; font-size: 10px;
  }
  .impr-semaine .card-resume { font-size: 10px; }
}

/* ---- Documents en ligne : ajout, envoi, espace utilisé ---- */
.res-ajout { display: flex; gap: 2px; margin-left: auto; }
.ressources.res-depot { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.res-envoi { font-size: var(--fs-xs); color: var(--accent); padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-espace { font-size: var(--fs-xs); color: var(--muted); padding: 8px 4px 0; border-top: 1px solid var(--border); }
.res-espace:empty { display: none; }
.res-jauge { height: 5px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; margin-bottom: 4px; }
.res-jauge span { display: block; height: 100%; background: var(--accent); }
.res-jauge.pleine span { background: var(--danger); }

/* ---- Version en ligne : fenêtre Compte (compte.js), code de vérification, dossiers ---- */
.compte { display: flex; flex-direction: column; gap: 4px; max-width: 520px; line-height: 1.5; }
.compte section { border-top: 1px solid var(--border); padding: 12px 0 4px; }
.compte h3 { font-size: var(--fs-md); margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.compte p { margin: 0 0 8px; }
.compte-qui { margin-bottom: 8px !important; }
.compte-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.compte-versions { width: 100%; margin: 4px 0 8px; }
.compte-versions td { vertical-align: middle; }
.chargement-rate { max-width: 560px; margin: 40px auto; padding: 20px 24px; }
.chargement-rate h2 { margin: 0 0 8px; font-size: var(--fs-xl); }
.compte-form { max-width: 380px; }
.badge.compte-ok { background: var(--ok-bg); color: var(--ok); }
.compte-qr { background: #fff; padding: 8px; border-radius: var(--r-md); width: 200px; margin: 4px 0 10px; }
.compte-qr svg { display: block; width: 100%; height: auto; }
.compte-secret { font-size: var(--fs-xs); word-break: break-all; }
.porte-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.res-dossier-edit {
  border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--fs-xs); margin-left: 6px;
  padding: 0 4px; border-radius: var(--r-sm); opacity: 0;
}
.res-folder summary:hover .res-dossier-edit { opacity: 1; }
.res-dossier-edit:hover { background: var(--surface-2); color: var(--text); }

/* ---- Accessibilité (audit du 2026-10-11, lot E) ---- */
.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;
}
.evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--surface); color: var(--accent); padding: 8px 12px; border-radius: var(--r-md); box-shadow: var(--shadow); }
.evitement:focus { top: 8px; }
main:focus { outline: none; }   /* cible du lien d'évitement et du focus de repli, pas un contrôle */
/* Focus clavier visible partout, dans la couleur d'accent. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wg-cell:focus-visible, td[data-action]:focus-visible { outline-offset: -3px; }
/* Cibles d'au moins 24 px (WCAG 2.5.8). */
.btn.small, .icon-btn { min-height: 24px; min-width: 24px; }
/* Ce qui n'apparaissait qu'au survol apparaît aussi au clavier, et reste visible au toucher. */
.wg-cell:focus-visible span { opacity: .7; }
.wg-head:focus-within .wg-add-evt, .mg-day:focus-within .mg-add-evt, .res-folder summary:focus-within .res-dossier-edit,
.wg-add-evt:focus-visible, .mg-add-evt:focus-visible, .res-dossier-edit:focus-visible { opacity: 1; }
@media (hover: none) {
  .wg-cell span { opacity: .35; }
  .wg-add-evt, .mg-add-evt, .res-dossier-edit { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Premier contact : planning vide (vues.js, accueil) ---- */
.accueil { max-width: 860px; padding: 24px 28px; }
.accueil h2 { font-size: var(--fs-xl); margin-bottom: 4px; }
.accueil > p { margin: 0 0 16px; }
.accueil-etapes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: etape; }
.accueil-etapes li {
  counter-increment: etape; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2);
}
.accueil-etapes li::before {
  content: counter(etape); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--surface); font-weight: 700; font-size: var(--fs-sm);
}
.accueil-etapes span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; flex: 1; }
.accueil-import {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px;
  border: 1px dashed var(--accent); border-radius: var(--r-lg); background: var(--accent-soft);
}
.accueil-import > .ico { color: var(--accent); width: 22px; height: 22px; }
.accueil-import span { flex: 1 1 260px; }
.accueil-pied { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 900px) { .accueil-etapes { grid-template-columns: 1fr; } }

/* ---- Vues sans dépôt de document (Année scolaire, Réglages) : Ressources en tiroir, pas en colonne ---- */
body.vue-sans-depot { --res-w-eff: 0px; }
body.vue-sans-depot .layout { position: relative; }
body.vue-sans-depot .ressources { display: none; }
body.vue-sans-depot.res-tiroir .ressources {
  display: flex; position: absolute; top: 0; right: 0; bottom: 0; z-index: 45;
  width: min(var(--res-w), 85vw); box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
}
body.vue-sans-depot .dialog.modeless { left: 0; width: min(calc(820px * var(--dz)), calc(100vw - 32px)); }
body.vue-sans-depot .overlay { right: 0; }

/* ---- Menus déroulants : Compte (documents.js), « + Nouveau » (vues.js), logique commune dans acces.js ---- */
.menu-zone { position: relative; }
.ico-petit { width: .9em; height: .9em; color: var(--muted); }
.btn.primary .ico-petit { color: inherit; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 250px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.menu-qui { margin: 0; padding: 8px 10px 10px; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.menu [role=menuitem] {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--ctl-h); padding: 6px 10px;
  border: 0; background: none; border-radius: var(--r-sm); font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.menu a[role=menuitem] { text-decoration: none; }
.menu [role=menuitem]:hover, .menu [role=menuitem]:focus-visible { background: var(--surface-2); }
.menu [role=menuitem] .ico { color: var(--muted); }
.menu [data-menu=deconnexion] { color: var(--danger); }
.menu [data-menu=deconnexion] .ico { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ---- Écran tactile (tablette) : cibles d'au moins 44 px pour les commandes, 36 px dans les listes denses ---- */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 36px; }
  .tabs button { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .check, .pick { min-height: 36px; }
  .check input, .pick input { width: 20px; height: 20px; }
  .chip { min-height: 40px; }
  .swatch { width: 36px; height: 36px; }
  .todo-check { width: 20px; height: 20px; }
  .todo-row { min-height: 44px; }
  .card-top { min-height: 32px; align-items: center; }
  .wg-add-evt, .mg-add-evt, .res-dossier-edit { min-width: 36px; min-height: 36px; }
  .res-item { min-height: 44px; }
  .res-folder summary { padding: 11px 4px; }
  .inline-input { min-height: 40px; }
  .mg-week, .td-week { min-width: 44px; }
  .evt, .card-input { min-height: 32px; }
  .card-doc-name, .wg-day { padding-block: 6px; }
}

/* ---- Tablette (ADR 0007 : 768 à 1100 px, portrait et paysage) ---- */
.petit-ecran { display: none; margin: 0; }
.save-status { white-space: nowrap; }
@media (max-width: 1100px) {
  .topbar { gap: 10px; padding: 0 10px; }
  .mode-badge { display: none; }
  .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 8px 10px; white-space: nowrap; }
  .topbar-right { gap: 4px; flex: none; }
  .topbar-right .btn-label { display: none; }   /* boutons en icônes : le nom reste dans aria-label et title */
  /* Ressources : tiroir par-dessus la vue, fermé par défaut, ouvert par le bouton 📁. */
  .layout { position: relative; }
  .ressources, body.res-hidden .ressources { display: none; }
  body.res-tiroir .ressources {
    display: flex; position: absolute; top: 0; right: 0; bottom: 0; z-index: 45;
    width: min(var(--res-w), 85vw); box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
  }
  :root { --res-w-eff: 0px; }   /* fenêtres et voile centrés : le panneau n'occupe plus de colonne */
  .dialog.modeless { left: 0; width: min(calc(820px * var(--dz)), calc(100vw - 32px)); }
  /* Grilles : les cinq jours tiennent dès 768 px. */
  .week-grid { grid-template-columns: 52px repeat(5, minmax(108px, 1fr)); }
  .month-grid { grid-template-columns: 44px repeat(5, minmax(108px, 1fr)); }
  main { padding: 12px 12px 32px; }
}
@media (max-width: 900px) {
  .brand-name { display: none; }   /* le logo reste : la place va aux sept onglets */
  .tabs button { padding: 8px 8px; }
}
@media (max-width: 767px) {
  .petit-ecran { display: block; }
}

/* ---- Année scolaire : l'année d'un coup d'œil (lot U8) ---- */
.annee { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.am-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.am { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px 10px; box-shadow: var(--shadow); }
.am h3 { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-md); }
.am-titre { font: inherit; font-weight: 650; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.am-titre:hover { color: var(--accent); text-decoration: underline; }
.am-grille { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.am-grille th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0; }
.am-grille thead th:first-child, .am-grille th[scope=row] { width: 24px; }
.am-grille td { position: relative; height: 22px; padding: 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); border-radius: var(--r-sm); }
.am-sem { font: inherit; font-size: var(--fs-xs); color: var(--muted); background: none; border: 0; padding: 2px; cursor: pointer; border-radius: var(--r-sm); }
.am-sem:hover { color: var(--accent); background: var(--accent-soft); }
/* Au toucher : zone de toucher agrandie autour du numéro de semaine et du nom du mois, sans
   agrandir la grille (l'année doit tenir sans défiler). */
@media (pointer: coarse) {
  .am-sem, .am-titre { position: relative; }
  .am-sem::after { content: ''; position: absolute; inset: -2px -12px; }   /* pas plus haut : les lignes voisines sont à 4 px */
  .am-titre::after { content: ''; position: absolute; inset: -12px -8px; }
}
.am-ecole { color: var(--text); background: var(--surface-2); }
.am-p1 { background: var(--partie-1); } .am-p2 { background: var(--partie-2); } .am-p3 { background: var(--partie-3); }
.am-vacances { color: var(--vacances-fg); background: repeating-linear-gradient(135deg, var(--vacances) 0 4px, var(--vacances-2) 4px 8px); }
.am-ferie { color: var(--ferie-fg); background: var(--ferie); font-weight: 700; }
.am-we { color: var(--muted); background: none; }
.am-cle.am-we { background: var(--surface); }
.am-grille .am-we-tete { color: var(--placeholder); }
.am-auj { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.am-evt { position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c); }
.am-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.am-legende > span { display: inline-flex; align-items: center; gap: 5px; }
.am-cle { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.am-cle-evt { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--accent); }
.am-cle-auj { border: 2px solid var(--accent); }
.annee-cote { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.annee-cote .panel { margin: 0; padding: 12px 14px; }
.annee-cote h2 { margin-bottom: 8px; }
.ac-parties { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.ac-parties li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ac-parties li.courant strong { color: var(--accent); }
.ac-lien { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.ac-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.ac-evt {
  width: 100%; display: flex; flex-direction: column; gap: 1px; text-align: left; font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer;
  background: var(--surface-2); border: 0; border-left: 3px solid var(--c); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 5px 8px;
}
.ac-evt:hover { background: var(--hover); }
.ac-date { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ac-titre { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.ac-officiel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.ac-officiel li { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 1400px) { .am-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .annee { grid-template-columns: minmax(0, 1fr); } }
/* Grand écran : l'année remplit la hauteur de la page et les cases grandissent avec elle.
   La colonne de droite défile seule si la liste des événements est longue. */
@media screen and (min-width: 1101px) {
  .vue-annee { display: flex; flex-direction: column; height: 100%; }
  .vue-annee > .toolbar { flex: none; }
  .annee { flex: 1 1 0; min-height: 0; align-items: stretch; }
  .annee-mois { display: flex; flex-direction: column; min-height: 0; }
  /* Quatre mois par ligne dès 1101 px (trois lignes) : l'année tient sans défiler en tablette paysage (1180 × 820).
     Écran trop bas : la page défile un peu. */
  .am-liste { flex: 1 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(140px, 1fr); }
  .am { display: flex; flex-direction: column; min-height: 0; }
  .am h3 { font-size: var(--fs-lg); }
  .am-grille { flex: 1; height: 100%; }
  .am-grille thead tr { height: 1px; }
  .am-grille tbody tr { height: 16.66%; }   /* six lignes égales, quel que soit leur contenu */
  .am-grille td { height: auto; font-size: var(--fs-sm); }
  .am-grille th { font-size: var(--fs-sm); }
  .am-grille thead th { font-size: var(--fs-xs); }   /* « Lu Ma Me » lisibles même à quatre mois par ligne */
  .am-grille thead th:first-child, .am-grille th[scope=row] { width: 30px; }
  .am-sem { font-size: var(--fs-sm); }
  .am-evt { width: 6px; height: 6px; margin-left: -3px; bottom: 2px; }
  .annee-cote { contain: size; overflow: auto; }   /* la hauteur vient des mois, pas de la liste des événements */
  .ac-liste { max-height: none; }
}

/* ---- Réglages : menu de rubriques à gauche, toutes les rubriques en blocs dépliables à droite (lot U8) ---- */
.reglages { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.reglages-menu {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow);
}
.reglages-menu h1 { padding: 0 10px 10px; }
.reglages-lien {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--text);
  background: none; border: 0; border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
}
.reglages-lien > .ico { flex: none; color: var(--muted); }
.reglages-lien:hover { background: var(--hover); }
.reglages-lien[aria-current] { background: var(--accent-soft); color: var(--accent); }
.reglages-lien[aria-current] > .ico { color: var(--accent); }
/* Deux colonnes : les grands blocs sur toute la largeur, les petits empilés (.reglages-pile) à côté d'un long. */
.reglages-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.reglages-pile { display: flex; flex-direction: column; gap: 16px; }
.reglage-bloc { margin: 0; padding: 0; scroll-margin-top: 12px; }
.reglage-bloc.large { grid-column: 1 / -1; }
.reglage-bloc > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--r-md);
}
.reglage-bloc > summary::-webkit-details-marker { display: none; }
.reglage-bloc > summary:hover { background: var(--hover); }
.reglage-bloc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reglage-bloc > summary h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); flex: none; }
.reglage-bloc > summary h2 .ico { color: var(--accent); }
.reglage-resume { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reglage-bloc > summary > .ico { flex: none; color: var(--muted); transition: transform .15s; }
.reglage-bloc[open] > summary > .ico { transform: rotate(180deg); }
.reglage-bloc[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; }
.reglage-corps { padding: 14px 18px 18px; }
.reglage-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.reglage-tete p { margin: 0; max-width: 80ch; }
.reglages-actions { flex: none; display: flex; gap: 8px; }
.reglages-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reglages-colonnes .sous-titre { margin-top: 0; }
.reglages .danger-zone { margin: 20px 0 0; box-shadow: none; }
.danger-zone h3 { margin-top: 0; color: var(--danger); }
.reglages .mode-choice { margin-bottom: 0; }
.reglages .scale-row > strong { width: 140px; }
/* Horaires : un tableau, durée et pause calculées ; une longue pause (récréation) ressort. */
.table.horaires th[scope="row"] { font-size: var(--fs-sm); color: var(--text); }
.table.horaires .input { width: 120px; }
.pause-longue { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--vacances); color: var(--vacances-fg); font-weight: 600; }
.legende-horaires { margin: 10px 0 0; font-size: var(--fs-xs); }
/* Couleur d'accent : chaque pastille porte son data-accent, donc la teinte du thème affiché. */
.accent-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-pastille {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.accent-pastille:hover { box-shadow: 0 0 0 2px var(--muted); }
.accent-pastille[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.accent-pastille:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.frise { position: relative; height: 34px; margin-top: 4px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.frise-partie { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
.frise-vac { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--vacances-fg) 0 2px, transparent 2px 6px); opacity: .4; }
.frise-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.frise-mois { position: relative; height: 18px; margin: 4px 0 18px; font-size: var(--fs-xs); color: var(--muted); }
.frise-mois span { position: absolute; top: 0; }
@media (max-width: 1280px) {
  .reglages-blocs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .reglages { grid-template-columns: minmax(0, 1fr); }
  .reglages-menu { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .reglages-menu h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* comme .sr-only : le titre reste lu */
  .reglages-lien { width: auto; flex: none; align-items: center; }
  .reglages-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Pages légales (web/legal/) : texte à lire, aussi sur téléphone ---- */
body.page-legale { display: block; overflow: auto; height: auto; min-height: 100%; }
.legal-tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.legal-marque { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--accent); font-size: var(--fs-xl); }
.legal-marque img { width: 28px; height: 28px; }
.legal-tete ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.legal-tete a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 8px; font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }
.legal h1 { font-size: var(--fs-2xl); margin: 8px 0 4px; }
.legal h2 { font-size: var(--fs-xl); margin: 32px 0 8px; }
.legal p, .legal ul, .legal ol { margin: 0 0 12px; }
.legal li { margin-bottom: 6px; }
.legal code { font-size: var(--fs-sm); }
.legal-version { color: var(--muted); font-size: var(--fs-sm); }
.legal-table { overflow-x: auto; margin: 0 0 16px; }
.legal-table table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--surface-2); }
.legal-pied { max-width: 760px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
@media print {
  .legal-tete, .legal-pied, .evitement { display: none; }
  .legal { max-width: none; padding: 0; font-size: 11pt; }
}