:root {
  --fond: #f6f5f1; --carte: #ffffff; --texte: #22231f; --discret: #6b6d66;
  --bord: #dcdad2; --accent: #2f5d8a; --accent-texte: #ffffff; --accent-doux: #e4ecf4;
  --ok: #2d6a3e; --ok-fond: #e5f1e7; --erreur: #a3302a; --erreur-fond: #f8e5e3;
  --plein: #e9f3ea; --attente: #fff6d9; --rayure: #fafaf7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1c1a; --carte: #252623; --texte: #ecebe6; --discret: #a4a59e;
    --bord: #3b3c38; --accent: #7fb0e0; --accent-texte: #10202f; --accent-doux: #263646;
    --ok: #8fd19e; --ok-fond: #1f3325; --erreur: #f0948d; --erreur-fond: #3a2220;
    --plein: #213326; --attente: #3a3420; --rayure: #2a2b28;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; text-wrap: balance; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem max(16px, env(safe-area-inset-right, 0px)) .6rem max(16px, env(safe-area-inset-left, 0px));
  background: var(--carte); border-bottom: 1px solid var(--bord); }
.marque { font-weight: 700; text-decoration: none; color: var(--texte); letter-spacing: .02em; }
.compte { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.compte form { margin: 0; }
main { margin: 0 auto; padding: 1.25rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 1rem; }
main.etroit { max-width: 1000px; }
main.large { max-width: none; }
.fil { font-size: .85rem; color: var(--discret); }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 1rem 1.25rem; min-width: 0; }
.connexion { max-width: 380px; margin: 3rem auto; width: 100%; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.discret { color: var(--discret); font-size: .9em; }
.aide { color: var(--discret); font-size: .88rem; margin: .25rem 0 .75rem; max-width: 70ch; }
.liste-sujets { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .3rem; }
.liste-sujets li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.formulaire { display: flex; flex-direction: column; gap: .35rem; max-width: 520px; }
.formulaire label { font-size: .88rem; color: var(--discret); margin-top: .35rem; }
.formulaire button { align-self: flex-start; margin-top: .6rem; }
.formulaire.en-ligne { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: none; }
.formulaire.en-ligne label { margin: 0; }
.formulaire.en-ligne button { margin: 0; }
input, textarea, select { font: inherit; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 5px; padding: .4rem .55rem; }
textarea { width: 100%; resize: vertical; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button, .bouton { font: inherit; cursor: pointer; border: 1px solid var(--bord); background: var(--carte);
  color: var(--texte); border-radius: 5px; padding: .4rem .8rem; text-decoration: none; display: inline-block; }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
button.danger { color: var(--erreur); }
button.lien { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; }
button.lien.danger { color: var(--erreur); }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.bandeau { margin: 0; padding: .6rem .9rem; border-radius: 6px; background: var(--accent-doux); }
.bandeau.ok { background: var(--ok-fond); color: var(--ok); }
.bandeau.erreur { background: var(--erreur-fond); color: var(--erreur); }
details.repli summary { cursor: pointer; color: var(--accent); margin: .5rem 0; }
.titre-sujet { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.onglets a { padding: .45rem .8rem; text-decoration: none; color: var(--discret); border-bottom: 2px solid transparent; }
.onglets a[aria-current] { color: var(--texte); border-bottom-color: var(--accent); font-weight: 600; }
.defile { overflow-x: auto; }
table.simple, table.tableau { border-collapse: collapse; width: 100%; }
table.simple td { padding: .3rem 0; border-bottom: 1px solid var(--bord); }
table.tableau th, table.tableau td { padding: .35rem .5rem; border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; }
table.tableau td input { width: 100%; min-width: 8rem; }
table.tableau td input.court { min-width: 0; width: 4.5rem; }
table.tableau td input.moyen { min-width: 0; width: 7rem; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; margin-left: .6rem; }
.nombre { text-align: right !important; font-variant-numeric: tabular-nums; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.chiffre { display: flex; flex-direction: column; }
.chiffre span { font-size: .78rem; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; }
.chiffre strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
kbd { font: .85em ui-monospace, monospace; border: 1px solid var(--bord); border-radius: 3px; padding: 0 .3em; }

/* Grille de correction */
.barre-grille { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.barre-grille .aide { margin: 0; }
.etat { font-size: .88rem; color: var(--discret); }
.etat.ok { color: var(--ok); }
.etat.erreur { color: var(--erreur); font-weight: 600; }
.zone-grille { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); }
table.grille { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.grille th, table.grille td { border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); padding: 0; background: var(--carte); }
table.grille tbody tr:nth-child(even) > * { background: var(--rayure); }
table.grille thead th { position: sticky; top: 0; z-index: 2; padding: .3rem .25rem; font-size: .8rem; font-weight: 600;
  vertical-align: bottom; text-align: center; min-width: 2.8rem; }
table.grille thead th .qnom { display: block; }
table.grille thead th .qmax { display: block; color: var(--discret); font-weight: 400; }
table.grille .fixe { position: sticky; left: 0; z-index: 1; text-align: left; padding: .25rem .6rem; white-space: nowrap;
  font-weight: 500; min-width: 12rem; }
table.grille thead th.fixe { z-index: 3; }
table.grille tfoot td, table.grille tfoot th { position: sticky; bottom: 0; font-size: .8rem; color: var(--discret); text-align: center; padding: .3rem .25rem; }
table.grille tfoot th.fixe { z-index: 3; }
table.grille input { width: 2.8rem; border: 0; border-radius: 0; text-align: center; padding: .35rem 0; background: transparent; }
table.grille input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-doux); }
table.grille input.plein { background: var(--plein); }
table.grille input.attente { background: var(--attente); }
table.grille input.refus { background: var(--erreur-fond); color: var(--erreur); font-weight: 700; }
table.grille td.total { padding: .25rem .6rem; text-align: right; font-weight: 600; white-space: nowrap; }
table.grille button.apprec { border: 0; background: none; color: var(--accent); padding: .25rem .6rem; white-space: nowrap; font-size: .85rem; }
.panneau { position: sticky; bottom: 0; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  padding: .8rem 1rem; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.panneau h2 { font-size: 1rem; }