:root {
  --papier: #f7f4ee; --carte: #fffdf9; --encre: #1d1b18; --doux: #6b655b; --trait: #e3ddd1;
  --accent: #b5651d; --accent-fonce: #8f4e14; --nuit: #22324a; --ok: #2f7a4b; --ko: #b3261e; --attention: #9a6a00;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 15px/1.55 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

.barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.25rem; background: var(--nuit); color: #f4efe6; }
.marque { display: flex; gap: .65rem; align-items: center; }
.marque small { display: block; opacity: .7; font-size: .75rem; }
.sceau { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent); font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.moteurs { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .78rem; }
.puce { padding: .15rem .55rem; border-radius: 99px; background: rgba(255,255,255,.1); }
.puce.on::before { content: "● "; color: #7fd49a; } .puce.off::before { content: "○ "; opacity: .6; }

.cadre { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 56px); }
.cote { border-right: 1px solid var(--trait); padding: 1rem; background: #f2eee6; }
.nouveau label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.ligne { display: flex; gap: .4rem; margin-top: .35rem; }
.ligne input { flex: 1; min-width: 0; }
input, select, textarea { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: .5rem .65rem; }
textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
.liste { margin-top: 1.2rem; display: grid; gap: .3rem; }
.liste a { display: block; padding: .55rem .7rem; border-radius: 8px; color: inherit; text-decoration: none; }
.liste a:hover { background: rgba(0,0,0,.04); }
.liste a[aria-current="true"] { background: var(--carte); box-shadow: 0 1px 0 var(--trait), inset 3px 0 0 var(--accent); }
.liste small { display: block; color: var(--doux); font-size: .78rem; }

.principal { padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 4rem; max-width: 1100px; width: 100%; }
.vide h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); max-width: 20ch; margin: 1.5rem 0 .8rem; }
.vide p { max-width: 62ch; color: #3b3731; }
.etapes { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; counter-reset: e; margin-top: 1.6rem; }
.etapes li { counter-increment: e; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .6rem .9rem; }
.etapes li::before { content: counter(e) "  "; font-family: var(--serif); color: var(--accent); font-weight: 700; }

.entete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.entete h1 { margin: 0; font-size: 1.9rem; }
.sous { margin: .2rem 0 0; color: var(--doux); font-size: .88rem; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.moteur-choix { font-size: .8rem; color: var(--doux); display: flex; gap: .4rem; align-items: center; }

.btn { border: 0; border-radius: 8px; padding: .5rem .9rem; background: var(--nuit); color: #fff; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.fort { background: var(--accent); padding: .7rem 1.2rem; font-weight: 600; }
.btn.discret { background: transparent; color: var(--nuit); border: 1px solid var(--trait); }
.btn.danger { color: var(--ko); }
.btn.petit { padding: .3rem .6rem; font-size: .85rem; }

.alerte { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: var(--rayon); background: #fbefd9; border: 1px solid #ecd3a3; color: #5c4200; }
.onglets { display: flex; gap: .2rem; margin: 1.4rem 0 1rem; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.onglets button { border: 0; background: none; padding: .6rem .9rem; cursor: pointer; color: var(--doux); border-bottom: 3px solid transparent; white-space: nowrap; }
.onglets button[aria-selected="true"] { color: var(--encre); border-color: var(--accent); font-weight: 600; }
#prog { font-size: .78rem; color: var(--doux); font-weight: 400; }

.theme { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: .8rem; }
.theme > summary { cursor: pointer; padding: .85rem 1.1rem; display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.theme > summary::-webkit-details-marker { display: none; }
.theme > summary h2 { margin: 0; font-size: 1.15rem; }
.theme > summary .compte { color: var(--doux); font-size: .82rem; white-space: nowrap; }
.theme > summary .compte.complet { color: var(--ok); }
.theme .corps { padding: 0 1.1rem 1.1rem; display: grid; gap: 1rem; }
.theme .intro { color: var(--doux); margin: 0; font-size: .9rem; }
.question label.q { display: block; font-weight: 600; margin-bottom: .3rem; }
.question .requis { color: var(--accent); }
.question .ex { font-size: .8rem; color: var(--doux); margin-top: .2rem; }
.question input[type=text] { width: 100%; }
.options { display: flex; flex-wrap: wrap; gap: .4rem; }
.options label { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .65rem; border: 1px solid var(--trait); border-radius: 99px; background: #fff; cursor: pointer; font-size: .9rem; }
.options input { accent-color: var(--accent); }
.options label:has(input:checked) { border-color: var(--accent); background: #fbf1e6; }
.enregistre { position: sticky; bottom: 0; padding: .7rem 0; background: linear-gradient(transparent, var(--papier) 35%); display: flex; gap: .8rem; align-items: center; }
.aide { color: var(--doux); font-size: .88rem; }

.relance { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1rem; margin-top: .8rem; }
.relance .meta { font-size: .78rem; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.relance p { margin: .25rem 0 .5rem; font-weight: 600; }
.relance .pourquoi { font-weight: 400; color: var(--doux); font-size: .85rem; }

.generer { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.travail { margin-top: 1rem; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; font-size: .9rem; }
.travail ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.travail .err { color: var(--ko); font-weight: 600; }
.travail .encours::after { content: " …"; animation: clign 1s infinite; }
@keyframes clign { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .travail .encours::after { animation: none; } }

.docs-tabs { display: flex; gap: .5rem; margin: 1.4rem 0 .8rem; flex-wrap: wrap; }
.docs-tabs button { border: 1px solid var(--trait); background: var(--carte); border-radius: var(--rayon); padding: .55rem .9rem; cursor: pointer; text-align: left; }
.docs-tabs button[aria-pressed="true"] { border-color: var(--nuit); box-shadow: inset 0 -3px 0 var(--nuit); }
.docs-tabs .n { display: block; font-size: .78rem; color: var(--doux); }
.note { font-weight: 700; } .note.ok { color: var(--ok); } .note.ko { color: var(--attention); }

.doc-barre { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.doc-barre .espace { flex: 1; }
.verdict { background: #f3f0e8; border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; }
.verdict .axes { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .3rem 0; }
.verdict ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.feuille { background: #fff; border: 1px solid var(--trait); border-radius: 4px; padding: clamp(1rem, 4vw, 3rem); box-shadow: 0 10px 30px -18px rgba(34,50,74,.35); }
.feuille h1 { color: var(--nuit); margin-top: 0; }
.feuille h2 { color: var(--nuit); border-bottom: 1px solid var(--trait); padding-bottom: .25rem; margin-top: 2rem; }
.feuille blockquote { margin: 0 0 1rem; padding: .6rem 1rem; background: #f6f3ec; border-left: 3px solid var(--accent); color: #4a453d; }
.feuille .table { overflow-x: auto; }
.feuille table { border-collapse: collapse; width: 100%; font-size: .88rem; margin: .5rem 0 1rem; }
.feuille th, .feuille td { border: 1px solid var(--trait); padding: .4rem .55rem; text-align: left; vertical-align: top; }
.feuille th { background: #f3eee4; }
.feuille pre { background: #f6f3ec; padding: .8rem; overflow-x: auto; font-size: .82rem; }
.editeur { width: 100%; min-height: 60vh; font: .88rem/1.5 Consolas, monospace; }

.toast { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--nuit); color: #fff; padding: .7rem 1rem; border-radius: 8px; max-width: min(90vw, 420px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast.erreur { background: var(--ko); }

body.mode-client .cote, body.mode-client .actions, body.mode-client .onglets, body.mode-client #moteurs { display: none; }
body.mode-client .cadre { grid-template-columns: 1fr; }
body.mode-client .principal { margin: 0 auto; }

@media (max-width: 820px) {
  .cadre { grid-template-columns: 1fr; }
  .cote { border-right: 0; border-bottom: 1px solid var(--trait); }
  .liste { grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; }
}
@media print {
  .barre, .cote, .entete, .onglets, .generer, .travail, .docs-tabs, .doc-barre, .verdict { display: none !important; }
  .feuille { border: 0; box-shadow: none; padding: 0; }
}

.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.connexion { width: min(100%, 360px); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 2rem; box-shadow: 0 10px 30px -18px rgba(34,50,74,.35); }
.connexion .marque { margin-bottom: 1.5rem; color: var(--nuit); }
.connexion .marque small { color: var(--doux); opacity: 1; }
.connexion form { display: grid; gap: .6rem; }
.connexion .erreur { color: var(--ko); margin: 0; }

.liens-barre a { color: #f4efe6; text-decoration: none; font-size: .88rem; padding: .25rem .6rem; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; }
.liens-barre a:hover, .liens-barre a:focus-visible { background: rgba(255,255,255,.1); }
[aria-busy="true"] { cursor: progress; opacity: .7; }
.etat-page { max-width: 980px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 4rem; }
.etat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: 1rem 0 1.6rem; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1rem; }
.tuile .v { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; display: block; }
.tuile .l { color: var(--doux); font-size: .82rem; }
.alertes-etat { border-radius: var(--rayon); padding: .9rem 1.1rem; margin: 1rem 0; }
.alertes-etat.ok { background: #e7f3ea; border: 1px solid #b9dcc3; color: #1e5a33; }
.alertes-etat.ko { background: #fbe9e7; border: 1px solid #efc1bb; color: #7a1f17; }
.etat-page table { border-collapse: collapse; width: 100%; font-size: .9rem; margin-bottom: 1.4rem; }
.etat-page th, .etat-page td { border-bottom: 1px solid var(--trait); padding: .45rem .5rem; text-align: left; }
.etat-page .table { overflow-x: auto; }

/* Place réservée pour ce qui arrive après le chargement (CLS) */
.moteurs { min-height: 1.6rem; }
#alertes:empty { min-height: 3.4rem; }
.etat-grille:empty { min-height: 13.5rem; }
#versions { min-height: 1.5em; }
@media (max-width: 820px) { .liste { min-height: 4.2rem; } }
@media (max-width: 820px) { .moteurs { flex-basis: 100%; min-height: 1.7rem; } }
/* Contraste AA (4,5:1) : texte blanc sur orange foncé, astérisques en orange foncé (mesure Lighthouse 23.10 : 4,33:1) */
.btn.fort { background: var(--accent-fonce); }
.question .requis { color: var(--accent-fonce); }