:root {
  --bg: #fbfaf8; --card: #fff; --ink: #1c1b19; --muted: #6b6864;
  --line: #e3e0da; --accent: #8a5a2b; --ok: #2f6f4f; --err: #a33;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1917; --card:#232120; --ink:#ece9e4; --muted:#a8a29a;
          --line:#38342f; --accent:#d8a46b; --ok:#7fbf9b; --err:#e09292; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 5rem; }

.top { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:baseline;
  padding:.9rem 1rem; border-bottom:1px solid var(--line); background:var(--card); }
.top .marque { display:flex; flex-direction:column; line-height:1.25; }
.top .marque small { font-size:.78rem; color:var(--muted); font-weight:400; }
.top .brand { font-weight:650; text-decoration:none; color:var(--ink); }
.top .sub { color:var(--muted); font-size:.9rem; }
.top nav { margin-left:auto; display:flex; gap:1rem; font-size:.9rem; }

h1 { font-size:1.5rem; line-height:1.25; margin:.4rem 0 .3rem; }
h2 { font-size:1.1rem; margin-top:2rem; }
.meta, .hint, .muted, .crumb { color:var(--muted); font-size:.875rem; }
.hint { margin:.35rem 0 0; }
.ok  { background:color-mix(in srgb, var(--ok) 14%, transparent); border-left:3px solid var(--ok);
       padding:.6rem .8rem; border-radius:.25rem; }
.err { background:color-mix(in srgb, var(--err) 14%, transparent); border-left:3px solid var(--err);
       padding:.6rem .8rem; border-radius:.25rem; }

.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0; }
.filters .count { margin-left:auto; color:var(--muted); font-size:.875rem; }
input, select, textarea, button {
  font:inherit; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:.35rem; padding:.45rem .6rem; }
/* Un champ ne défile pas : il s'agrandit jusqu'à montrer tout son texte.
   field-sizing s'en charge seul là où il existe ; ailleurs, le script de
   layout_end() règle la hauteur. */
textarea { width:100%; resize:none; overflow:hidden; field-sizing:content; }
input[type=text], input[type=url], input[type=search] { field-sizing:content; }
input[type=text], input[type=url], input[type=search], input[type=password] { width:100%; }
button, .btn { background:var(--accent); color:#fff; border:0; padding:.55rem 1rem;
  border-radius:.35rem; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--line);
  padding:.5rem 1rem; border-radius:.35rem; text-decoration:none; }

table.list { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:.4rem; overflow:hidden; }
table.list th, table.list td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); font-size:.925rem; }
table.list th { background:color-mix(in srgb, var(--ink) 4%, transparent); font-weight:600; }
table.list tr:last-child td { border-bottom:0; }

.badge { background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
  font-size:.75rem; padding:.1rem .4rem; border-radius:.25rem; }
.pager { margin:1rem 0; display:flex; gap:.4rem; }
.pager a { padding:.3rem .6rem; border:1px solid var(--line); border-radius:.3rem; text-decoration:none; }
.pager a.on { background:var(--accent); color:#fff; border-color:var(--accent); }

.editor { margin-top:1.25rem; }
.field { background:var(--card); border:1px solid var(--line); border-radius:.4rem;
  padding:.8rem .9rem; margin-bottom:.8rem; }
.field.modified { border-color:var(--accent); }
.lbl { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.choices { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.ck { display:inline-flex; align-items:center; gap:.4rem; font-size:.925rem; font-weight:400; }
.ck input { width:auto; }
.inline { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.35rem; }
.actions { position:sticky; bottom:0; background:var(--bg); padding:1rem 0;
  display:flex; gap:.75rem; align-items:center; border-top:1px solid var(--line); }
pre { background:color-mix(in srgb, var(--ink) 5%, transparent); padding:.6rem;
  border-radius:.3rem; overflow-x:auto; font-size:.8rem; }
.ro-block, .revs details { margin-top:1.5rem; }
.ro-block dt { font-weight:600; font-size:.85rem; margin-top:.6rem; }

main.login { max-width:22rem; margin-top:12vh; }
main.login form { display:flex; flex-direction:column; gap:.9rem; margin-top:1.2rem; }
main.login label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; font-weight:600; }

/* ---------- Relecture d'une fiche ----------
   Règle de conception : on lit, et quand on a fini de lire, on a fini de
   relire. Typographie large, contraste franc, aucun terme technique. */
.relire { max-width: 48rem; margin: 0 auto; }

.fait { background: color-mix(in srgb, var(--ok) 15%, transparent);
  border-left: 4px solid var(--ok); padding: .7rem 1rem; border-radius: .3rem;
  font-size: 1rem; margin: 0 0 1rem; }

.bilan { font-size: .85rem; color: var(--muted); margin: 0 0 .4rem; }

:root { --rouge: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rouge: #ff8a80; } }
:root[data-theme="dark"] { --rouge: #ff8a80; }

.zone { margin-bottom: 1.6rem; }
.zone h2 { font-size: .95rem; font-weight: 650; margin: 0 0 .45rem;
  color: var(--muted); letter-spacing: .01em; }

textarea.titre { width: 100%; font-size: 1.25rem; line-height: 1.35; font-weight: 600;
  padding: .6rem .7rem; border: 2px solid var(--line); border-radius: .4rem;
  display: block; }
textarea.titre:focus { border-color: var(--accent); outline: none; }

.texte { font-size: 1.06rem; line-height: 1.65; background: var(--card);
  border: 2px solid var(--line); border-radius: .4rem; padding: .9rem 1rem;
  min-height: 7rem; }
.texte:focus { border-color: var(--accent); outline: none; }
.texte mark { color: var(--rouge); background: color-mix(in srgb, var(--rouge) 12%, transparent);
  border-radius: .15rem; padding: 0 .1em; font-weight: 500; }

.origine { font-size: .9rem; color: var(--muted); margin: .4rem 0 0; line-height: 1.5; }
.origine del { color: var(--rouge); text-decoration: line-through; opacity: .75; }
.origine-bloc { margin-top: .5rem; }
.origine-bloc summary { font-size: .85rem; color: var(--muted); cursor: pointer; padding: .2rem 0; }
.origine-texte { font-size: .92rem; line-height: 1.55; color: var(--muted);
  border-left: 3px solid var(--line); padding: .4rem 0 .4rem .8rem; margin-top: .3rem; }

.questions .question { background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: .4rem;
  padding: .8rem 1rem; margin-bottom: .7rem; }
.questions .q { font-size: 1.02rem; line-height: 1.5; margin: 0 0 .6rem; }
.reponses { display: flex; gap: .5rem; flex-wrap: wrap; }
.choix { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: .4rem; padding: .5rem .8rem;
  font-size: .95rem; background: var(--bg); }
.choix:hover { border-color: var(--accent); }
.choix.pris, .choix:has(input:checked) { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 550; }
.choix input { width: auto; margin: 0; }
.choix kbd { font-size: .75em; color: var(--muted); padding: 0 .35em; }

.raccourci { font-size: .8rem; color: var(--muted); margin-left: auto; }
.raccourci kbd { font-size: .95em; }

.cases { display: flex; flex-wrap: wrap; gap: .4rem; }
.zone.discret h2 { font-size: .85rem; }
.zone.discret textarea { width: 100%; font-size: .95rem; padding: .45rem .6rem;
  line-height: 1.45; }

.signale { background: color-mix(in srgb, var(--err) 8%, transparent);
  border-radius: .4rem; padding: .7rem 1rem; }
.signale h2 { color: var(--err); }
.sig { font-size: .95rem; line-height: 1.5; margin: .3rem 0; }

.valider { position: sticky; bottom: 0; background: var(--bg);
  padding: 1rem 0 1.2rem; border-top: 1px solid var(--line); margin-top: 1.5rem; }
button.gros { font-size: 1.1rem; font-weight: 600; padding: .85rem 1.6rem;
  border-radius: .5rem; width: 100%; max-width: 26rem; }

/* En-tête de la page de relecture : le nom de l'outil, où l'on en est, et de
   quoi sortir. Un menu au-dessus d'un texte à lire est du texte à lire en plus. */
.top-focus .sub { margin-left: auto; }
.top-focus nav { margin-left: 1.25rem; }
main.focus { padding-top: 1rem; }

/* ---------- Ce qui situe la fiche ----------
   L'image, le moment et le classement, sous les yeux sans rien à ouvrir :
   c'est ce qu'un humain vérifie d'un coup d'œil et qu'une machine ignore. */
.contexte { display: flex; gap: .9rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: .4rem;
  padding: .7rem .9rem; margin: 0 0 .8rem; }
.vignette { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: .3rem;
  background: color-mix(in srgb, var(--ink) 6%, transparent); flex: none; }
.contexte-txt { min-width: 0; }
.contexte p { margin: 0 0 .15rem; }
.lieu { font-size: 1rem; line-height: 1.4; }
.quand { font-size: .92rem; color: var(--muted); }
.classement { font-size: .88rem; color: var(--muted); }
.classement .vide { font-style: italic; }

.fait .retour { margin-left: .5rem; font-size: .9rem; }
.fait.discret-fait { background: none; border-left-color: var(--line);
  color: var(--muted); font-size: .92rem; }

/* les mots retirés restent à leur place : une seule lecture suffit */
.texte del { color: var(--muted); text-decoration: line-through;
  text-decoration-thickness: 1px; opacity: .7; }

kbd { font: inherit; font-size: .85em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: .25rem; padding: 0 .3em;
  background: var(--card); }

/* les conditions ne pèsent à l'écran que si quelque chose est coché */
.cases-bloc summary { cursor: pointer; padding: .2rem 0; list-style-position: outside; }
.cases-bloc .h2-like { font-size: .85rem; font-weight: 650; color: var(--muted); }
.cases-bloc .resume { font-size: .85rem; color: var(--muted); }
.cases-bloc .resume::before { content: " — "; }
.cases-bloc .cases { margin-top: .5rem; }

/* une sortie qui n'est pas « tout est bon » doit exister, sans attirer l'œil */
.secondaires { display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem 1.2rem; margin: .6rem 0 0; }
button.lien { background: none; color: var(--muted); border: 0; padding: .2rem 0;
  font-size: .88rem; text-decoration: underline; text-underline-offset: .2em;
  cursor: pointer; width: auto; }
button.lien:hover { color: var(--accent); }

@media (max-width: 640px) {
  .texte { font-size: 1rem; }
  textarea.titre { font-size: 1.1rem; }
  /* en-tête sur deux lignes : le nom, puis l'avancement et la sortie */
  .top-focus .marque { flex-basis: 100%; }
  .top-focus .sub { margin-left: 0; }
  .top-focus nav { margin-left: auto; }
  /* pas de raccourci clavier quand on relit au doigt */
  .raccourci { display: none; }
  .secondaires { flex-direction: row; gap: 1.5rem; }
  button.gros { max-width: none; }
  .vignette { width: 4rem; height: 4rem; }
}

.badge-alerte { background:color-mix(in srgb, var(--err) 18%, transparent); color:var(--err); }

/* ---------------------------------------------------------------- règles --
   L'atelier : deux listes, et un formulaire qui tient en une colonne.
   Une règle éteinte reste lisible mais s'efface : on doit voir d'un coup
   d'œil ce qui tourne et ce qui dort. */
.atelier { margin: 2rem 0; }
.atelier h2 { display: flex; align-items: baseline; gap: .5rem; }
.atelier .compte { font-size: .8rem; font-weight: 400; color: var(--muted); }
table.regles td { vertical-align: top; }
table.regles .nom { font-weight: 650; width: 16rem; }
table.regles .ou { color: var(--muted); font-size: .85rem; white-space: nowrap; }
table.regles tr.eteinte .nom a,
table.regles tr.eteinte .quoi { color: var(--muted); }
.interrupteur { width: 5.5rem; }
.interrupteur form { margin: 0; }
button.bascule { background: transparent; color: var(--accent); border: 1px solid var(--line);
                 padding: .1rem .55rem; font-size: .75rem; border-radius: 999px; cursor: pointer; }
tr.eteinte button.bascule { color: var(--muted); }

.regle-form { border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem;
              margin: 1rem 0 2rem; background: var(--card); max-width: 46rem; }
.regle-form .ligne { display: block; margin: .9rem 0; font-weight: 650; }
.regle-form .ligne input, .regle-form .ligne select, .regle-form textarea { font-weight: 400; }
.remplacement { display: flex; gap: 1rem; flex-wrap: wrap; margin: .9rem 0; }
.remplacement label { flex: 1 1 14rem; font-weight: 650; }
.regle-form .cases { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .6rem 0 1rem; }
.regle-form .integree { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem .9rem; }
/* L'exemple vit sous l'étiquette, jamais dans la case : un texte gris à
   l'intérieur d'un champ se lit comme une valeur déjà saisie. */
.exemple-champ { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
.bascule-mode { margin: 1rem 0; }
.boutons { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.btn.discret, button.discret { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--card); color: var(--err); border: 1px solid var(--line); }

.essai { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin: 0 0 2rem; }
.exemple-essai { margin: .7rem 0; line-height: 1.5; }
.exemple-essai .avant { color: var(--muted); }
/* Le même rouge que pendant la relecture : un mot signalé ici et un mot
   signalé là-bas veulent dire la même chose, ils doivent se ressembler. */
.exemple-essai mark { color: var(--rouge);
  background: color-mix(in srgb, var(--rouge) 12%, transparent);
  border-radius: .15rem; padding: 0 .1em; font-weight: 500; }
.exemple-essai del { color: var(--rouge); text-decoration: line-through; opacity: .75; }

/* ------------------------------------------------------ file de traitement --
   On voit avancer, et on peut arrêter. Le journal empile la dernière fiche
   en haut : c'est là que l'œil est. */
.lancement { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.journal { max-height: 16rem; overflow: auto; margin: 1rem 0; }
.ligne-journal { margin: .25rem 0; font-size: .9rem; }
.ligne-journal.ok { color: var(--ok); }
.ligne-journal.ko { color: var(--err); }
.ligne-journal.fin { color: var(--muted); font-style: italic; }
tr.faite td { opacity: .45; }
.coche { width: 2.2rem; }
.vide, .pret { border: 1px solid var(--line); border-radius: 8px; padding: 1rem;
               background: var(--card); }

/* -------------------------------------------------------- menu et sélection --
   Le menu est partout, y compris pendant la relecture : s'en aller ne doit pas
   demander un détour. En mode lecture il rapetisse plutôt que de disparaître. */
.top nav a.ici { color: var(--ink); font-weight: 650; }
.top-focus nav { font-size: .82rem; gap: .8rem; flex-wrap: wrap; }

.selection { align-items: baseline; gap: .8rem 1.2rem; }
.compte-coche { font-weight: 650; }
button[disabled] { opacity: .45; cursor: not-allowed; }
/* Maintenir Majuscule pendant un clic surligne le texte : on l'en empêche
   sur la colonne des cases, sans quoi la page clignote de bleu. */
td.coche, th.coche { user-select: none; -webkit-user-select: none; }

/* ------------------------------------------------------------- réglages -- */
.cases.colonne { flex-direction: column; align-items: flex-start; }
/* un choix qu'on montre sans pouvoir le prendre : le régime réel */
.choix.eteint { opacity: .5; cursor: default; }
.choix.eteint:hover { border-color: var(--line); }
form.preparer { margin: 1rem 0; }

/* ------------------------------------------------------------ réécritures --
   Un paragraphe réécrit se lit tel quel ; l'ancien reste replié dessous. */
.avant-par { margin: .2rem 0 .4rem; font-size: .88rem; color: var(--muted); }
.avant-par summary { cursor: pointer; }
.avant-par[open] { border-left: 3px solid var(--line); padding-left: .7rem; }

/* l'adresse d'un lieu : une ligne, lue d'un coup */
textarea.adresse { font-size: 1rem; padding: .5rem .7rem; border: 2px solid var(--line);
  border-radius: .4rem; }
textarea.adresse:focus { border-color: var(--accent); outline: none; }

/* l'accueil : une ligne par file, les lieux d'abord */
.files { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.5rem; }
.file-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .4rem; padding: .7rem 1rem; }
.file-ligne .quoi { font-weight: 650; min-width: 7rem; }
.file-ligne .btn { margin-left: auto; }
.onglets { display: flex; gap: 1rem; margin: 1.5rem 0 .5rem; }
.onglets a { text-decoration: none; padding-bottom: .2rem; }
.onglets a.ici { color: var(--ink); font-weight: 650; border-bottom: 2px solid var(--accent); }
/* le menu passe à la ligne plutôt que de déborder sur un téléphone */
.top nav { flex-wrap: wrap; }
.regle-form h2 { margin-top: 0; }
/* un texte court corrigé (les conditions) : même rouge, moins de place */
.texte.court { min-height: 0; font-size: .95rem; padding: .45rem .6rem; line-height: 1.45; }
/* « hidden » l'emporte toujours : sans cela, display:inline-block sur les
   boutons laissait « Arrêter » à l'écran une fois la file terminée */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ l'arrivée --
   Une phrase et un bouton. Rien d'autre. */
.arrivee { text-align: center; padding-top: 12vh; }
.arrivee .attente { font-size: 1.6rem; line-height: 1.3; margin: 0 0 1.4rem; }
.arrivee button.gros { font-size: 1.3rem; padding: 1rem 2.4rem; width: auto; }
.arrivee .nouveautes { min-height: 1.4rem; margin-top: 1.2rem; }
.fin { text-align: center; padding-top: 8vh; }

/* le sommaire des réglages : chaque chose reste une page */
.sommaire { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: .8rem 0 1.6rem; }
.sommaire a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .9rem; background: var(--card); color: var(--ink); font-size: .92rem; }
.sommaire a:hover { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------------- les trois sorties --
   « C'est bon » est le seul vrai bouton. « Passer » est un texte qui déplie
   un mot. « corbeille » est un mot gris, petit, en bas à droite. */
.sorties { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.sorties button.gros { width: auto; flex: 0 1 22rem; display: inline-flex;
  align-items: center; justify-content: center; gap: .7rem; }
button.gros kbd.raccourci { margin: 0; font-size: .72rem; font-weight: 400;
  color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); background: transparent; }
.passer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.passer button.lien { font-size: .95rem; }
.passer-mot { display: flex; gap: .4rem; align-items: center; }
.passer-mot input { width: 14rem; padding: .4rem .6rem; font-size: .95rem; }
.valider { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
button.corbeille { background: none; border: 0; color: var(--muted); font-size: .8rem;
  padding: .2rem .3rem; cursor: pointer; width: auto; opacity: .75; }
button.corbeille:hover, button.corbeille.sur { opacity: 1; color: var(--err); }
button.corbeille.sur { font-weight: 650; }

/* « ← Visite libre du moulin » : la fiche qu'on vient de valider */
.precedente { margin: 0 0 .6rem; }
.precedente button.lien { font-size: .88rem; padding: 0; }
/* le titre de l'événement pour lequel on relit ce lieu */
.pour { font-size: .95rem; color: var(--muted); margin: 0 0 .6rem; }
.instant { text-align: center; margin-top: 10vh; font-size: 1.1rem; }

@media (max-width: 640px) {
  .sorties { gap: .8rem; }
  .sorties button.gros { flex: 1 1 100%; }
  button.gros kbd.raccourci { display: none; }
  .valider { flex-wrap: wrap; }
  button.corbeille { margin-left: auto; }
}

/* --------------------------------------------------------------- doublons --
   Un lieu non vérifié qui ressemble à un lieu vérifié : trois candidats au
   plus, deux réponses. La personne décide, jamais la machine. */
.doublons { background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: .4rem; padding: .7rem 1rem; }
.candidat { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .35rem 0; }
.candidat-txt { flex: 1 1 16rem; font-size: .98rem; line-height: 1.45; }
.candidat .btn { white-space: nowrap; }
.doublons button.lien { margin-top: .3rem; }

/* la fusion : le vérifié dans le champ, la version du contributeur dessous */
.difference textarea { margin-bottom: .4rem; }
button.prendre { display: block; width: 100%; text-align: left; background: var(--bg);
  color: var(--ink); border: 1px dashed var(--line); border-radius: .4rem; padding: .5rem .8rem;
  cursor: pointer; line-height: 1.5; }
button.prendre:hover { border-color: var(--accent); }
button.prendre.pris { border-style: solid; border-color: var(--accent); }
button.prendre .lib { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .15rem; }
button.prendre .valeur { color: var(--rouge); }
.sorties a.lien { font-size: .9rem; color: var(--muted); }

/* les archives : l'affichage de relecture, figé */
.lecture textarea[readonly] { background: var(--card); }
.lecture .texte { background: var(--card); }
.lecture .choix { cursor: default; }
/* dans la liste, « revenir en arrière » est un mot, pas un bouton */
table.list button.lien { font-size: .8rem; padding: 0; }