/* Le Bureau des Erreurs - the web client. Base: the mock-ups validated by Fred (maquettes/, commit aa2b4d3).
   Palette: CAHIER-DES-CHARGES.md section 6. Every screen fits 100svh without scrolling (CONSTATS E1). */

:root {
  --papier: #F3EBDD;      /* paper, case sheet */
  --encre: #1C2333;       /* ink, text and lines */
  --laiton: #B08D57;      /* brass: loupe, wheels, Art deco rules */
  --vrai: #3E7C6B;        /* TRUE, Bureau seal */
  --faux: #B3261E;        /* FALSE */
  --inconnu: #5B4B8A;     /* ?, the Forger's quill */
  --cuir: #2A2F3A;        /* desk leather around the sheet */
  --encre-2: #454C5E;     /* secondary ink on paper (7:1) */
  --vrai-texte: #2F6253;  /* green for small text on paper (AA) */
  --qr-gris: #C9C4BA;     /* QR fallback square */

  --titre: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --texte: "Atkinson Hyperlegible", -apple-system, Arial, sans-serif;

  --cible: 44px;                                  /* minimum touch target */
  --reserve: max(30px, env(safe-area-inset-bottom)); /* bottom reserve, E1 */
  --barre-h: 44px;
  --statut-h: 26px;
  --tampons-h: 72px;
  --gap: 6px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--cuir); color: var(--papier);
}
body {
  font: 18px/1.3 var(--texte);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.erreur-demarrage { position: fixed; inset: 8px; z-index: 100; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 24px; border-radius: 6px; background: var(--papier); color: var(--encre);
  text-align: center; opacity: 0; animation: erreur-demarrage 0s 1s forwards; }
@keyframes erreur-demarrage { to { opacity: 1; } }
button { font: inherit; color: inherit; cursor: pointer; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- screen skeleton: bar / sheet / footer ---------- */
.ecran {
  height: 100vh; height: 100svh;
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  padding: var(--gap) 8px var(--reserve);
}

/* top bar: case track + mute */
.barre { height: var(--barre-h); display: flex; align-items: center; gap: 8px; min-width: 0; }
.barre .titre-barre { flex: 1; min-width: 0; margin: 0; font: 600 22px/1.4 var(--titre); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piste { flex: 1; min-width: 0; max-width: 330px; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.piste li { aspect-ratio: 1; max-height: 30px; border: 1.5px solid var(--laiton); border-radius: 4px; display: grid; place-items: center; }
.piste li svg { width: 86%; height: 86%; }
.piste li.classe, .piste li.echappe { background: var(--papier); border-color: var(--papier); }
.piste li.encours { border: 3px solid var(--papier); }
.rond { flex: none; width: var(--cible); height: var(--cible); border-radius: 50%; border: 1.5px solid var(--laiton);
  background: transparent; display: grid; place-items: center; color: var(--papier); padding: 0; margin-left: auto; }
.rond svg { width: 24px; height: 24px; }

/* ---------- the case sheet (the manipulated object, >= 50 % of the screen, E3) ---------- */
.feuille {
  position: relative; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(28,35,51,.035) 0 1px, transparent 1px 7px),
    var(--papier);
  color: var(--encre);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.feuille::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--laiton); border-radius: 3px; pointer-events: none; }
.entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--laiton); padding-bottom: 3px; }
.entete h1 { margin: 0; font: 700 22px/1.1 var(--titre); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.entete .num { font-size: 18px; color: var(--encre-2); white-space: nowrap; }
.enonce { margin: 0; }

/* statement rows: number / check box + touchable text */
.lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ligne { position: relative; display: flex; align-items: center; gap: 6px; min-height: var(--cible); }
.coche { flex: none; width: var(--cible); height: var(--cible); border: 2px solid var(--encre); border-radius: 6px;
  background: transparent; display: grid; place-items: center; font: 700 20px var(--titre); padding: 0; }
.coche svg { width: 30px; height: 30px; }
.coche.oui { border-color: var(--vrai); }
.coche.non { border-color: var(--faux); }
span.coche { border-style: dotted; border-color: var(--encre-2); } /* reading: not touchable yet */
.texte-ligne { flex: 1; min-width: 0; min-height: var(--cible); text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 3px 6px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; line-height: 1.25; }
.preuve > .texte-ligne { background: rgba(176,141,87,.22); box-shadow: inset 4px 0 0 var(--laiton); }
.etiquette { display: inline-block; font: 700 18px/1 var(--texte); color: var(--encre); background: var(--laiton); border-radius: 4px; padding: 2px 6px; }
/* the loupe hovers over a line: magnified, brass ring and handle */
.loupe > .texte-ligne { font-size: 1.12em; border: 3px solid var(--laiton); border-radius: 24px;
  background: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), rgba(176,141,87,.18);
  box-shadow: none; }
.loupe::after { content: ""; position: absolute; right: -9px; bottom: -3px; width: 26px; height: 8px; border-radius: 4px;
  background: var(--laiton); transform: rotate(40deg); }
/* touchable words (Rulebook) and highlighter (Testimony) */
.mot { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; min-height: var(--cible);
  border-bottom: 2px dotted var(--encre-2); border-radius: 0; }
.mot.touche { border: 3px solid var(--laiton); border-radius: 22px; padding: 0 8px; font-weight: 700; background: rgba(176,141,87,.22); }
.surligne > .texte-ligne { background: none; box-shadow: none; }
.surligneur-texte { background: linear-gradient(transparent 12%, rgba(176,141,87,.45) 12% 88%, transparent 88%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the Forger's proposition slip, always at the bottom of the sheet */
.proposition { margin-top: auto; position: relative; border: 2px dashed var(--encre-2); border-radius: 6px;
  padding: 6px 10px; min-height: 58px; display: flex; align-items: center; gap: 10px; }
.proposition .plume { flex: none; width: 26px; height: 26px; color: var(--inconnu); }
.proposition .dit { display: flex; flex-direction: column; min-width: 0; }
.proposition .qui-dit { font-style: italic; color: var(--encre-2); }
.proposition .code { font: 700 36px/1 var(--titre); letter-spacing: .14em; }
.proposition .phrase { font-weight: 700; font-size: 20px; line-height: 1.2; }
.proposition.attente { border-style: solid; border-color: var(--laiton); flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
.proposition.attente p { margin: 0; text-align: center; font-style: italic; color: var(--encre-2); }
.personnage { display: block; object-fit: contain; flex: none; }
.personnage-vignette { width: 56px; height: 56px; }
.personnage-repli { display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; background: var(--papier); }
.personnage-repli svg { width: 78%; height: 78%; }
.personnage-repli.faussaire { color: var(--inconnu); }
.personnage-repli.commissaire { color: var(--encre); }

/* stamp imprint on the sheet (my stamp) */
.empreinte { position: absolute; right: 10px; bottom: 12px; width: 100px; height: 76px; transform: rotate(-9deg);
  display: grid; place-items: center; pointer-events: none; mix-blend-mode: multiply; opacity: .92; }
.empreinte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.empreinte .forme { fill: none; }
.empreinte .mot-tampon { position: relative; font: 800 19px/1 var(--titre); letter-spacing: .01em; }

/* the case-building tools (lock wheels, creature wheels, word picker) */
.outil-titre { margin: 0; font: 600 italic 20px/1.1 var(--titre); }
.molettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.molette { display: grid; grid-template-rows: var(--cible) auto var(--cible); border: 2px solid var(--laiton); border-radius: 10px; overflow: hidden;
  background: linear-gradient(var(--papier), #E9DFCC); text-align: center; }
.molette button { border: 0; background: rgba(176,141,87,.25); display: grid; place-items: center; padding: 0; }
.molette button svg { width: 20px; height: 20px; }
.molette .valeur { padding: 4px 2px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; }
.pastille { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--encre); flex: none; }
.choix-mots { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-mots button { min-height: var(--cible); padding: 0 12px; border-radius: 22px; border: 2px solid var(--encre-2); background: transparent; }
.choix-mots button[aria-pressed="true"] { border-color: var(--laiton); background: rgba(176,141,87,.3); font-weight: 700; }
.ligne-outils { display: flex; gap: 8px; }

/* buttons */
.bouton { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; width: 100%; padding: 6px 14px;
  border-radius: 10px; border: 0; font: 700 20px/1.15 var(--texte); text-align: center; text-decoration: none; }
.bouton.principal { background: var(--laiton); color: var(--encre); }          /* on leather: 5.1:1 */
.bouton.secondaire { background: transparent; color: var(--papier); border: 2px solid var(--papier); }
.feuille .bouton.principal { background: var(--encre); color: var(--papier); }
.feuille .bouton.secondaire { color: var(--encre); border-color: var(--encre); min-height: var(--cible); font-size: 18px; }
.bouton small { display: block; font-weight: 400; font-size: 18px; }

/* ---------- footer: status line + stamp tray (always the same place) ---------- */
.pied { display: flex; flex-direction: column; gap: 4px; }
.statut { min-height: var(--statut-h); margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; line-height: 1.15; }
.statut .table { display: flex; gap: 3px; }
.statut.avec-action { min-height: 52px; justify-content: space-between; text-align: left; }
.statut.avec-action .bouton { width: auto; flex: none; max-width: 58%; }
.statut .pile { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tampons { height: var(--tampons-h); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tampon { position: relative; height: 100%; min-width: var(--cible); padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--c); }
.tampon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.forme { fill: var(--papier); stroke: currentColor; }
.tampon .mot-tampon { position: relative; font: 800 calc(var(--tampons-h) * .25)/1 var(--titre); letter-spacing: .01em; }
.tampon.inconnu .mot-tampon { font-size: calc(var(--tampons-h) * .46); }
.empreinte.inconnu .mot-tampon { font-size: 34px; }
.vrai { --c: var(--vrai); color: var(--vrai); }
.faux { --c: var(--faux); color: var(--faux); }
.inconnu { --c: var(--inconnu); color: var(--inconnu); }
.tampons[aria-disabled="true"] .tampon { opacity: .4; }
.tampon[aria-pressed="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -5px; height: 4px; border-radius: 2px; background: var(--laiton); }
.compte { position: absolute; top: -4px; right: 2px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px;
  background: var(--laiton); color: var(--encre); font: 700 18px/32px var(--texte); text-align: center; }
.actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 4px; }

/* medallions (badge fallback: initial) */
.medaillon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid var(--laiton); background: var(--papier); color: var(--encre); font: 700 16px/1 var(--titre); }
.medaillon.attend { background: transparent; color: var(--papier); border-style: dashed; }
.medaillon.grand { width: 48px; height: 48px; font-size: 24px; border-width: 2.5px; }

/* sand-glass, shown only in the last 15 s */
.sablier { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.sablier svg { width: 18px; height: 22px; }

/* ---------- power card band (defence / unanimous council) ---------- */
.carte-pouvoir { display: flex; align-items: center; gap: 10px; border: 2px solid var(--laiton); border-radius: 8px; padding: 6px 10px;
  background: var(--encre); color: var(--papier); }
.carte-pouvoir svg { flex: none; width: 34px; height: 34px; color: var(--laiton); }
.carte-pouvoir .nom { font: 600 18px/1.1 var(--titre); color: var(--laiton); letter-spacing: .06em; text-transform: uppercase; }
.carte-pouvoir .question { font: italic 600 20px/1.2 var(--titre); }

/* ---------- reveal ---------- */
.retournee { animation: retourne .7s ease-out both; transform-origin: center; }
@keyframes retourne { from { transform: perspective(900px) rotateY(-90deg); } to { transform: perspective(900px) rotateY(0); } }
.apparait { animation: apparait .45s ease-out both; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pose { animation: pose .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pose { from { opacity: 0; transform: scale(1.8) rotate(-9deg); } to { opacity: 1; transform: scale(1) rotate(-9deg); } }
.explication { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.explication li { display: flex; align-items: center; gap: 8px; min-height: 30px; line-height: 1.2; }
.explication svg { flex: none; width: 26px; height: 26px; }
.verdict { display: flex; align-items: center; gap: 12px; min-height: 76px; }
.verdict .colonne { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.verdict .empreinte { position: relative; right: auto; bottom: auto; flex: none; }
.issue { font: 700 22px/1.15 var(--titre); }
.issue.classe { color: var(--vrai-texte); }
.issue.echappe { color: var(--inconnu); }
.mot-fin { margin: 0; font: italic 400 19px/1.25 var(--texte); }
.mot-fin cite { font-style: normal; font-weight: 700; color: var(--encre-2); }
.objection { align-self: flex-end; min-height: var(--cible); padding: 0 12px; border-radius: 8px; border: 2px solid var(--encre); background: transparent;
  font: 700 italic 18px var(--titre); color: var(--encre); }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.resultats li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 24px; line-height: 1.1; }
.resultats .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultats .tp { font: 700 18px var(--titre); white-space: nowrap; }
.resultats .pts { min-width: 48px; text-align: right; font-weight: 700; white-space: nowrap; }
.resultats .sceau { color: var(--papier); border-bottom: 3px solid var(--laiton); }
.piste li.pose-cachet { animation: case-classee .4s ease-out 3.4s both; }
.piste li.pose-cachet svg { animation: pose-piste .4s ease-out 3.4s both; }
@keyframes case-classee { from { background: transparent; border-color: var(--laiton); } to { background: var(--papier); border-color: var(--papier); } }
@keyframes pose-piste { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }

/* ---------- home, lobby, end ---------- */
.couverture { align-items: center; justify-content: center; text-align: center; gap: 14px; }
.couverture h1 { margin: 0; font: 700 40px/1.05 var(--titre); }
.couverture .lieu { margin: 0; font: italic 400 20px var(--titre); color: var(--encre-2); letter-spacing: .1em; }
.couverture .devise { margin: 0; font: italic 400 20px/1.3 var(--texte); max-width: 22em; }
.filet { width: 70%; height: 14px; color: var(--laiton); }
.qr { width: min(52vw, 22svh, 220px); aspect-ratio: 1; align-self: center; background: var(--qr-gris); border-radius: 6px;
  display: grid; place-items: center; color: var(--encre); font: 700 20px var(--titre); }
.legende { margin: 0; text-align: center; }
.inspecteurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.inspecteurs li { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; min-width: 0; }
.inspecteurs .nom { font-weight: 700; margin-top: 3px; }
.inspecteurs .insigne { color: var(--encre-2); }
.niveaux { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.niveaux legend { padding: 0; margin-bottom: 2px; font: 600 20px var(--titre); }
.niveaux button { min-height: var(--cible); border-radius: 8px; border: 2px solid var(--encre-2); background: transparent; padding: 2px 10px;
  display: flex; align-items: center; gap: 8px; text-align: left; line-height: 1.1; }
.niveaux button::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; }
.niveaux button[aria-checked="true"] { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.niveaux button[aria-checked="true"]::before { background: radial-gradient(currentColor 0 4px, transparent 5px); }
.annonce { margin: 0; text-align: center; font: 700 30px/1.1 var(--titre); }
.annonce.arrete { color: var(--vrai-texte); }
.score-piste { margin: 0; text-align: center; }
.distinctions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.distinctions li { border: 1.5px solid var(--laiton); border-radius: 8px; padding: 4px 6px; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.distinctions .prix { font: 700 18px var(--titre); }
.distinctions .qui { display: flex; align-items: center; gap: 5px; }
.soiree { border: 2px solid var(--encre); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; }
.soiree .titre-soiree { font: 700 20px/1.1 var(--titre); }
.carte-faussaire { align-self: center; width: min(100%, 290px); aspect-ratio: 1.6; border: 2px solid var(--inconnu); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: #EFE6F2; }
.carte-faussaire svg { width: 40px; height: 40px; color: var(--inconnu); }
.carte-faussaire .nom-carte { font: 700 22px/1.1 var(--titre); }
.carte-faussaire .replique { font-style: italic; }
.record { display: flex; justify-content: space-around; text-align: center; }
.record b { display: block; font: 700 32px/1 var(--titre); }
.personnage-fin { display: flex; align-items: center; gap: 10px; width: 100%; line-height: 1.15; }
.personnage-fin > div, .personnage-fin > p { flex: 1; min-width: 0; }
.personnage-fin p { margin: 0; }
.personnage-fin .replique { font-style: italic; }
.personnage-grand { width: 112px; height: 112px; }
.commissaire-fin { flex-direction: row-reverse; text-align: right; }
.distinctions-solo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; width: 100%; }
.distinctions-solo li { min-width: 0; }

/* short screens: hide whole optional elements rather than clip them (E1) */
@media (max-height: 600px) {
  .masquable-court { display: none !important; }
  .feuille { padding: 10px 12px; gap: 6px; }
  .couverture h1 { font-size: 34px; }
  :root { --gap: 4px; }
  .feuille { padding: 8px 10px; gap: 4px; }
  .entete h1 { font-size: 20px; }
  .lignes { gap: 2px; }
  .verdict { min-height: 64px; }
  .verdict .empreinte { width: 92px; height: 70px; }
  .empreinte .mot-tampon { font-size: 18px; }
  .explication li { min-height: 24px; }
  .loupe > .texte-ligne { font-size: 1em; }
  .proposition { min-height: 52px; padding: 4px 8px; }
  .annonce { font-size: 26px; }
  .personnage-grand { width: 76px; height: 76px; }
  .fin { gap: 4px; }
  .fin .record b { font-size: 27px; }
  .fin .personnage-fin { gap: 6px; font-size: 18px; }
  .fin .distinctions-solo { line-height: 1.12; }
}
@media (max-width: 370px) {
  .masquable-etroit { display: none !important; }
  .entete.finale .num { display: inline !important; }
}
@media (min-height: 760px) {
  :root { --tampons-h: 84px; }
  body { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* the VRAI word is drawn in the darker green so that it passes AA at 18px; the shape keeps the palette colour */
.vrai .mot-tampon { color: var(--vrai-texte); }
/* status line with the sand-glass: drop the word "inspecteurs" below 400px rather than wrap */
@media (max-width: 399px) { .masquable-sablier { display: none; } }
.feuille.centree { justify-content: center; }
.distinctions .prix { line-height: 1.15; }

/* =====================================================================================================================
   Client additions (sprint 2): app shell, gestures, guidance, panels. Same palette and sizes as the mock-ups.
   ===================================================================================================================== */
html, body { touch-action: manipulation; }
body { background: var(--texture-cuir, none) var(--cuir); }
.ecran > .barre { grid-row: 1; grid-column: 1; }
.ecran > .feuille { grid-row: 2; grid-column: 1; }
.ecran > .aide { grid-row: 2; grid-column: 1; }
.ecran > .pied { grid-row: 3; grid-column: 1; }
.feuille { background:
    repeating-linear-gradient(0deg, rgba(28,35,51,.035) 0 1px, transparent 1px 7px),
    var(--texture-papier, none) var(--papier); }
.rond { margin-left: 0; }
.barre { gap: 6px; }
.piste { gap: 3px; }
.feuille, .pied, .lignes, .molettes, .tampons { touch-action: none; }
button:focus-visible { outline: 3px solid var(--laiton); outline-offset: 2px; }
.bouton[aria-disabled="true"] { opacity: .72; cursor: default; border-style: dashed; }
.bouton.secondaire small { font-size: 18px; font-weight: 400; }
.bouton.petit { width: auto; min-height: var(--cible); padding: 0 12px; font-size: 18px; flex: none; }
.lien { min-height: var(--cible); background: none; border: 0; color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.fort { font-weight: 700; }

/* home and level */
.couverture .devise { color: var(--encre); }
.niveaux { width: 100%; gap: 8px; }
.niveaux button { min-height: 60px; font-size: 18px; }
.niveaux legend { text-align: center; width: 100%; margin-bottom: 8px; font-size: 24px; }

/* power card announced on the first dossier of a family on this phone */
.carte-pouvoir { flex: none; }
.carte-pouvoir .carte-img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.annonce-carte { animation: apparait .45s ease-out both; }

/* proposition zone */
.ligne-outils { margin-top: auto; align-items: stretch; }
.ligne-outils .proposition { flex: 1; margin-top: 0; min-width: 0; }
.bouton.outil { width: auto; flex: none; max-width: 44%; font-size: 18px; }
.proposition.attente .bouton { min-height: 52px; }
.situation { border-top: 1.5px dotted var(--encre-2); padding-top: 3px; margin-top: 2px; }
.mot.remplace { font-weight: 700; }
.mot s { font-weight: 400; color: var(--encre-2); }
.vignette { display: block; width: 100%; max-height: 22svh; object-fit: contain; }

/* Safe: the lock panel takes the bottom of the sheet; the rules above shrink to a compact list */
.outil-ouvert .ligne.compacte { min-height: 0; }
.outil-ouvert .ligne.compacte .texte-ligne { min-height: 0; padding: 1px 4px; }
.coche.petite { width: 28px; height: 28px; border-width: 1.5px; font-size: 16px; }
.coche.petite svg { width: 20px; height: 20px; }
.panneau-code { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panneau-tete .outil-titre, .panneau-tete h2 { flex: 1; min-width: 0; margin: 0; }
.cadenas .molette { border-width: 3px; background: linear-gradient(#E9DFCC, var(--papier) 45%, #E9DFCC); }
.cadenas .valeur { font: 700 34px/1 var(--titre); min-height: 44px; }
.molette .valeur { touch-action: none; cursor: ns-resize; }
.molette button { min-height: var(--cible); }

/* Testimony / Rulebook choices: a panel over the sheet */
.panneau-choix { position: absolute; inset: 0; z-index: 3; background: var(--papier); border-radius: 6px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.panneau-choix .choix { display: flex; flex-direction: column; gap: 6px; }
.panneau-choix .choix button { min-height: var(--cible); text-align: left; padding: 6px 10px; border-radius: 8px;
  border: 2px solid var(--encre-2); background: transparent; line-height: 1.2; }
.panneau-choix .choix button[aria-pressed="true"] { border-color: var(--laiton); background: rgba(176,141,87,.3); font-weight: 700; }
.rappel { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.rappel .plume { flex: none; width: 22px; height: 22px; color: var(--inconnu); }

/* the stamp: lifted from the tray, carried, pressed (I2) */
.tampon.leve { opacity: .3; }
.fantome { position: fixed; z-index: 30; pointer-events: none; display: grid; place-items: center; color: var(--c);
  transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); will-change: transform; }
.fantome svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fantome .mot-tampon { position: relative; font: 800 calc(var(--tampons-h) * .25)/1 var(--titre); }
.fantome.inconnu .mot-tampon { font-size: calc(var(--tampons-h) * .46); }
.fantome.vrai .mot-tampon { color: var(--vrai-texte); }
.feuille.cible { box-shadow: 0 0 0 3px var(--laiton), 0 8px 22px rgba(0,0,0,.4); }
.secousse { animation: secousse .3s ease-out; }
@keyframes secousse { 0%, 100% { transform: none; } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } }
.empreinte { z-index: 2; }
.empreinte .forme { fill: none; }
.tampons[aria-disabled="true"] .tampon { opacity: .4; }

/* status line: guide sentence, drying ink, sand-glass */
.statut .guide { font-weight: 700; color: var(--papier); background: none; border: 0; padding: 0; text-align: center; line-height: 1.2; }
button.guide { min-height: var(--cible); text-decoration: underline dotted; text-underline-offset: 4px; }
.statut.avec-action .pile b.guide { text-align: left; }
.sablier { margin-left: auto; }
.statut:not(.avec-action) .sablier { margin-left: 8px; }

/* the drawn hand of the guided dossiers (I8): it shows, the player does */
.main-guide { position: fixed; z-index: 25; width: 40px; height: 52px; pointer-events: none; left: 0; top: 0;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.main-guide svg { width: 100%; height: 100%; display: block; }
.main-guide.joue[data-gesture="tap"] { animation: main-tape 1.6s ease-in-out infinite; }
.main-guide.joue[data-gesture="swipe"] { animation: main-glisse 2.2s ease-in-out infinite; }
.main-guide.joue[data-gesture="drag"] { animation: main-tire 3.2s ease-in-out infinite; }
@keyframes main-tape { 0%, 100% { transform: translate(10px, 18px); opacity: .0; } 15% { opacity: 1; } 45% { transform: translate(0, 0) scale(.92); } 60% { transform: translate(0, 0) scale(1); opacity: 1; } 85% { opacity: 0; } }
@keyframes main-glisse { 0% { transform: translate(0, 10px); opacity: 0; } 15% { transform: none; opacity: 1; } 70% { transform: translate(var(--dx), 0); opacity: 1; } 90%, 100% { transform: translate(var(--dx), 0); opacity: 0; } }
@keyframes main-tire { 0% { transform: translate(var(--fx), 12px); opacity: 0; } 12% { transform: translate(var(--fx), 0); opacity: 1; } 28% { transform: translate(var(--fx), 0) scale(.92); } 78% { transform: translate(var(--dx), var(--dy)) scale(.92); opacity: 1; } 92%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* reveal (I4) */
.revele { gap: 6px; }
.revele .rappel { font-size: 18px; }
.conclusion { font-weight: 700; line-height: 1.2; }
.verdict { align-items: flex-start; }
.verdict .colonne { flex: 1; }
.objection-zone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.objection-faite { font-style: italic; color: var(--encre-2); }
.objections { font-weight: 700; }
.mot-fin.faussaire cite { color: var(--inconnu); }
.piste li.pose-cachet, .piste li.pose-cachet svg { animation-delay: var(--d) !important; }
.resultats li { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 0; }
.resultats .gains { grid-column: 1 / -1; color: var(--papier); opacity: .9; font-size: 18px; }
.note { margin: 4px 0 0; padding: 6px 10px; border-left: 4px solid var(--laiton); background: rgba(243,235,221,.08); line-height: 1.25; }

/* end of the affair (I6) */
.fin { gap: 10px; }
.annonce.echappe { color: var(--inconnu); }
.legende.replique { font-style: italic; }
.carte-faussaire .carte-img { width: 64px; height: 64px; object-fit: contain; }

/* help: over the sheet, the tray stays usable and the game goes on (cahier §4.1 bis) */
.aide { position: relative; z-index: 6; min-height: 0; overflow: hidden; background: var(--papier); color: var(--encre);
  border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.5);
  line-height: 1.25; }
.aide[hidden] { display: none; }
.aide p { margin: 0; }
.aide h2 { font: 700 22px/1.1 var(--titre); }
.legende-tampons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legende-tampons li { display: flex; align-items: center; gap: 8px; }
.legende-tampons .mini { position: relative; flex: none; width: 52px; height: 40px; display: grid; place-items: center; }
.legende-tampons .mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.legende-tampons .mini .mot-tampon { position: relative; font: 800 13px/1 var(--titre); }
.legende-tampons .mini.inconnu .mot-tampon { font-size: 20px; }

@media (max-height: 700px) {
  .aide { padding: 8px 10px; gap: 4px; }
  .cadenas .valeur { font-size: 28px; min-height: 36px; }
  .niveaux button { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-guide.joue { animation: none !important; }
  .fantome { transition: none !important; }
}

/* Nothing on the sheet shrinks under its content: what does not fit shows as an overflow (measured), never as an
   overlap. Short screens hide whole optional elements instead (E1). */
.feuille > *, .aide > * { flex-shrink: 0; }
@media (max-height: 700px) {
  .explication .etiquette { font-size: 18px; padding: 0 4px; }
}
.molette .valeur.vide { font-weight: 400; font-style: italic; color: var(--encre-2); }

/* Rulebook: a sentence with touchable words stays a sentence (inline flow); each word is a 44 px target thanks to its
   padding, and the line height leaves room for it. */
p.texte-ligne { display: block; margin: 0; line-height: 44px; }
.mot { display: inline; min-height: 0; padding: 11px 3px; line-height: 22px; border-bottom: 0;
  text-decoration: underline dotted var(--encre-2); text-decoration-thickness: 2px; text-underline-offset: 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mot.touche { border: 0; border-radius: 22px; padding: 11px 8px; background: rgba(176,141,87,.32);
  box-shadow: inset 0 0 0 3px var(--laiton); text-decoration: none; }
span.mot { padding: 0 2px; }
@media (max-height: 700px) { p.texte-ligne { line-height: 40px; } }
.choix-mots button { padding: 0 9px; }
.bouton.passer { width: auto; flex: none; min-height: var(--cible); padding: 0 12px; font-size: 18px; }

@media (max-height: 700px) {
  /* not touchable yet (reading) or any more (defense): the lines take only the room of their text */
  .lignes.fixe .ligne, .lignes.fixe .texte-ligne { min-height: 0; }
  .lignes.fixe .coche { width: 32px; height: 32px; border-width: 1.5px; }
  .lignes.fixe .coche svg { width: 22px; height: 22px; }
  /* the power card announced on a first dossier stands for the header */
  .annonce-carte + .entete { display: none; }
  .proposition.attente { padding: 4px; }
  .carte-faussaire { aspect-ratio: auto; padding: 6px 8px; gap: 2px; width: min(100%, 270px); }
  .carte-faussaire svg { width: 32px; height: 32px; }
}
@media (max-height: 700px) {
  .lignes.fixe p.texte-ligne { line-height: 1.3; }
  .carte-pouvoir { padding: 4px 8px; gap: 8px; }
  .carte-pouvoir svg { width: 28px; height: 28px; }
  .carte-pouvoir .question { font-size: 18px; line-height: 1.15; }
}
.aide .bouton.secondaire { color: var(--encre); border-color: var(--encre); }
.statut .pile .sablier { margin-left: 0; }
/* the story stays readable under the choices when there is room for it */
.rappel-enonce { margin: 4px 0 0; padding: 6px 0 0 1.2em; border-top: 1.5px dotted var(--encre-2); color: var(--encre-2); line-height: 1.25; }
.legende-tampons .mini { width: 64px; height: 48px; }
.legende-tampons .mini .mot-tampon { font-size: 12.5px; }
.legende-tampons .mini.inconnu .mot-tampon { font-size: 22px; }
/* textures from the manifest (src/ui/art.js); without them, the palette colours alone */
body { background-size: var(--texture-cuir-taille, auto); }
.feuille { background-size: auto, var(--texture-papier-taille, auto); }

/* ---------- manifest pieces (src/ui/art.js): each rule applies only when its piece exists, else the drawn fallback ---------- */
body { background-repeat: var(--texture-cuir-repeat, repeat); }
.feuille { background-repeat: repeat, var(--texture-papier-repeat, repeat); }
/* Testimony highlighter: the brass wash across the highlighted line */
.texture-surligneur .surligne > .texte-ligne { background: none; }
.texture-surligneur .surligne .surligneur-texte { background: var(--texture-surligneur) left center / auto 100% var(--texture-surligneur-repeat, repeat-x);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* track cells */
.cadre-track-cell .piste li { border: 4px solid transparent; border-image: var(--cadre-track-cell-src) var(--cadre-track-cell-slice) / 4px stretch; border-radius: 0; }
.cadre-track-cell-current .piste li.encours { border-image: var(--cadre-track-cell-current-src) var(--cadre-track-cell-current-slice) / 5px stretch; }
.cadre-track-cell .piste li:not(.classe):not(.echappe):not(.encours) { opacity: .75; }
/* secondary buttons on paper and choices: the brass button frame; pressed: its pressed state */
.cadre-button .feuille .bouton.secondaire, .cadre-button .aide .bouton.secondaire,
.cadre-button .panneau-choix .choix button {
  border-style: solid; border-color: transparent; border-width: var(--cadre-button-bord); border-radius: 0;
  border-image: var(--cadre-button-src) var(--cadre-button-slice) / var(--cadre-button-bord) stretch;
  padding: var(--cadre-button-marge); background: none; }
.cadre-button-pressed .panneau-choix .choix button[aria-pressed="true"] {
  border-image: var(--cadre-button-pressed-src) var(--cadre-button-pressed-slice) / var(--cadre-button-pressed-bord) stretch; background: none; }
/* the chapter banner carries the family's name on tall screens */
@media (min-height: 760px) and (min-width: 360px) {
  .cadre-chapter-banner .feuille:not(.revele) > .entete { justify-content: center; border-bottom: 0; padding: var(--cadre-chapter-banner-marge);
    border-style: solid; border-color: transparent; border-width: var(--cadre-chapter-banner-bord);
    border-image: var(--cadre-chapter-banner-src) var(--cadre-chapter-banner-slice) / var(--cadre-chapter-banner-bord) stretch; }
  .cadre-chapter-banner .feuille:not(.revele) > .entete:not(.finale) .num { display: none; }
}
/* reveal lines of the engine (statuses) */
.explication li.calme { color: var(--encre-2); }
.explication li.cas { font-style: italic; }
.explication mark { background: rgba(176,141,87,.35); color: inherit; padding: 0 2px; border-radius: 3px; }
@media (max-height: 700px) { .explication li.calme { display: none; } }
/* tool row under the proposition */
.outils { display: flex; justify-content: flex-end; gap: 8px; }
.outils .bouton.outil { width: auto; max-width: none; min-height: var(--cible); padding: 4px 14px; font-size: 18px; }
.proposition { margin-top: auto; }
.proposition .qui-dit { line-height: 1.2; }
/* small framed pills: a thinner frame */
.choix-mots button, .outils .bouton.outil { --cadre-button-bord: 6px 14px 6px 14px; --cadre-button-pressed-bord: 6px 14px 6px 14px; --cadre-button-marge: 2px 2px 2px 2px; }
.choix-mots { gap: 4px; }
/* a long explanation keeps only the lines that decide (the others restate the dossier) */
.explication.longue li.calme { display: none; }
/* optional lines hidden on screens up to 700 px tall (the 375 × 667 iPhones), whole, never clipped (E1) */
@media (max-height: 700px) { .masquable-moyen { display: none !important; } }
.panneau-choix .molettes { margin-top: 4px; }
.phrase-cible { margin: 0; line-height: 1.4; }
.phrase-cible mark { background: rgba(176,141,87,.35); color: inherit; padding: 0 3px; border-radius: 3px; font-weight: 700; }
.outils { flex-wrap: wrap; }
.outils { gap: 6px; }
.outils .bouton.outil { padding: 4px 8px; --cadre-button-bord: 6px 10px 6px 10px; }
@media (max-height: 700px) {
  /* the Rulebook's touchable words keep their 44 px targets on lines a little tighter */
  .lignes:not(.fixe) p.texte-ligne { line-height: 38px; }
  .mot { padding: 11px 3px; }
}
/* short screens: the case tools behind one « Le cas » button inside the proposition */
@media (min-height: 701px) { .masquable-grand { display: none !important; } }
.proposition .outil-mini { flex: none; width: auto; min-height: var(--cible); min-width: var(--cible); margin-left: auto; padding: 4px 10px; font-size: 18px;
  --cadre-button-bord: 6px 10px 6px 10px; }
.proposition .dit { flex: 1; }
.outils-panneau { display: flex; flex-direction: column; gap: 8px; }
.outils-panneau .bouton.outil { width: 100%; max-width: none; }
@media (max-height: 600px) {
  .situation { border-top-style: dotted; padding-top: 2px; margin-top: 0; }
}
@media (max-height: 600px) {
  .feuille.outil-ouvert { gap: 2px; }
  .outil-ouvert .lignes { gap: 0; }
  .pied .actions .bouton { min-height: var(--cible); }
  .carte-pouvoir .question { line-height: 1.1; }
}
@media (max-height: 600px) {
  .proposition { min-height: 0; padding: 2px 8px; }
  .mot s { display: none; }
  .situation { padding-top: 0; }
}
@media (max-height: 600px) {
  .verdict { min-height: 0; gap: 8px; }
  .verdict .empreinte { width: 80px; height: 60px; }
  .verdict .empreinte .mot-tampon { font-size: 16px; }
  .verdict .empreinte.inconnu .mot-tampon { font-size: 28px; }
  .explication li { min-height: 22px; }
  .revele { gap: 4px; }
  .objection { min-height: var(--cible); }
}
@media (max-height: 600px) {
  /* panels: the opener already named the tool; the title gives its room to the options */
  .panneau-choix { gap: 4px; padding: 8px 10px; }
  .panneau-choix .panneau-tete { justify-content: space-between; }
  .panneau-choix .panneau-tete .outil-titre { font-size: 18px; line-height: 1.1; }
  .panneau-choix .choix { gap: 4px; }
  .panneau-choix .choix button { padding: 3px 8px; line-height: 1.15; }
  .cadenas .valeur { min-height: 32px; font-size: 26px; }
  .panneau-code { gap: 2px; }
}
@media (max-height: 600px) {
  .proposition > .plume { display: none; }
  .proposition .phrase { font-size: 18px; }
  .proposition .outil-mini { padding: 2px 8px; }
  .proposition { gap: 6px; }
  .lignes:not(.fixe) p.texte-ligne { line-height: 36px; }
  .mot { padding: 11px 2px; }
}
@media (max-height: 600px) {
  .entete.finale { display: flex !important; }
  .entete.finale h1 { white-space: normal; }
}
@media (max-height: 600px) {
  .carte-pouvoir > svg, .carte-pouvoir > .carte-img { display: none; }
  .statut .guide { font-size: 18px; }
}
/* short marked words (« le dé ») still offer 44 px across */
.mot, .lignes:not(.fixe) .mot { padding-left: 5px; padding-right: 5px; }
/* the case sheet frame (frame/sheet), drawn over the paper at a scale --k: ornaments by its slice, text inside its
   `insets` (CONTRATS 0.10), both scaled together; the drawn brass line is the fallback */
:root { --k-feuille: .6; }
@media (max-height: 700px) { :root { --k-feuille: .45; } }
@media (max-height: 600px) { :root { --k-feuille: .35; } }
.cadre-sheet .feuille::before { inset: 0; border: 0; border-radius: 0;
  border-image-source: var(--cadre-sheet-src); border-image-slice: var(--cadre-sheet-tranche); border-image-repeat: stretch;
  border-image-width: calc(var(--cadre-sheet-t) * var(--k-feuille)) calc(var(--cadre-sheet-r) * var(--k-feuille)) calc(var(--cadre-sheet-b) * var(--k-feuille)) calc(var(--cadre-sheet-l) * var(--k-feuille)); }
.cadre-sheet .feuille { padding: calc(var(--cadre-sheet-it) * var(--k-feuille)) calc(var(--cadre-sheet-ir) * var(--k-feuille)) calc(var(--cadre-sheet-ib) * var(--k-feuille)) calc(var(--cadre-sheet-il) * var(--k-feuille)); }
.cadre-sheet .panneau-choix { inset: calc(var(--cadre-sheet-t) * var(--k-feuille) * .5); }
/* small framed pills: the frame at ~0.6, its insets with it */
.choix-mots button, .outils .bouton.outil, .proposition .outil-mini { --cadre-button-marge: 0 5px 0 5px; }
@media (max-height: 700px) { .mot s { display: none; } }
@media (max-height: 600px) {
  .issue { font-size: 20px; }
  .mot-fin { line-height: 1.2; }
}
.cache-ajuste { display: none !important; }

/* power card frame (frame/power-card): an ivory card on tall screens, scaled, text inside its insets */
@media (min-height: 760px) {
  .cadre-power-card .carte-pouvoir:not(.sans-cadre) { --k-carte: .4; background: var(--papier); color: var(--encre); border: 0; border-radius: 0;
    border-image: var(--cadre-power-card-src) var(--cadre-power-card-tranche) / calc(var(--cadre-power-card-t) * var(--k-carte)) calc(var(--cadre-power-card-r) * var(--k-carte)) calc(var(--cadre-power-card-b) * var(--k-carte)) calc(var(--cadre-power-card-l) * var(--k-carte)) stretch;
    padding: calc(var(--cadre-power-card-it) * var(--k-carte)) calc(var(--cadre-power-card-ir) * var(--k-carte) + 6px); }
  .cadre-power-card .carte-pouvoir:not(.sans-cadre) .nom { color: var(--encre-2); }
  .cadre-power-card .carte-pouvoir:not(.sans-cadre) svg { color: var(--laiton); }
}
/* narrower than a frame's minWidth: the drawn fallback */
.cadre-button .sans-cadre { border-image: none !important; border: 2px solid currentColor !important; border-radius: 22px !important; padding: 0 12px !important; }
.cadre-chapter-banner .feuille > .entete.sans-cadre { border-image: none !important; border-width: 0 0 1px !important; border-color: var(--laiton) !important; padding: 0 0 3px !important; }
.cadre-sheet .feuille.sans-cadre::before { border-image: none; border: 1px solid var(--laiton); border-radius: 3px; inset: 5px; }

/* word pills: all the same drawn pill, never the manifest frame, until a narrow pill exists (BIBLE, lot B2) */
.choix-mots button { border: 2px solid var(--encre-2); border-radius: 22px; border-image: none; padding: 0 9px; background: transparent; }
.choix-mots button[aria-pressed="true"] { border-color: var(--laiton); background: rgba(176,141,87,.3); }

/* ---------- Q1 fixes ---------- */
/* G3: the proof stays marked under the loupe (bar + label), at every size */
.loupe.preuve > .texte-ligne { box-shadow: inset 5px 0 0 var(--laiton); background: rgba(176,141,87,.28); }
.lignes .etiquette { white-space: nowrap; }
/* D10: the imprint never covers the Forger's words */
.proposition.avec-empreinte { padding-right: 92px; }
@media (max-height: 600px) { .proposition.avec-empreinte { padding-right: 76px; } }
.lignes.fixe .mot, span.mot, .lignes.fixe .mot.touche { padding: 0 3px; line-height: inherit; }
.lignes:not(.fixe) .mot.touche { padding: 11px 5px; }
.panneau-choix .molettes .molette { grid-template-rows: var(--cible) 3.6em var(--cible); }
.panneau-choix .molettes .valeur { height: 3.6em; min-height: 3.6em; padding: 0 2px; line-height: 1.15; overflow: hidden; }
/* the Forger's own line, then what he claims in plain words */
.proposition .replique-faussaire { font-style: italic; color: var(--encre-2); line-height: 1.2; }
.proposition .qui-dit { font-style: normal; font-weight: 700; color: var(--encre-2); }
/* the case built, in words, under the proposition */
.cas-note { margin: 0; padding: 2px 8px; border-left: 4px solid var(--laiton); font-style: italic; line-height: 1.25; }
.consigne { margin: 0; line-height: 1.25; }
.objection-aide { font-style: italic; color: var(--encre-2); line-height: 1.15; }
.message-accueil { margin: 0; font-weight: 700; color: var(--encre); }
.distinctions-solo { list-style: none; margin: 0; padding: 0; text-align: center; line-height: 1.3; }
.revele .conclusion { margin: 0; font-weight: 700; line-height: 1.2; }
.replique-personnage { display: flex; align-items: center; gap: 8px; min-width: 0; }
.replique-personnage > div, .replique-personnage > p { flex: 1; min-width: 0; }
.replique-personnage p { margin: 0; }
.replique-personnage .replique-secondaire { margin-top: 2px; color: var(--encre-2); }
.replique-personnage.faussaire cite { color: var(--inconnu); }
.revoir-histoire { align-self: flex-start; }
@media (min-height: 701px) { .revoir-histoire { display: none; } }
@media (max-height: 700px) {
  .panneau-choix[data-family="testimony"][data-kind="choice"] .rappel-enonce { display: none; }
}
@media (max-height: 600px) {
  .panneau-choix[data-family="testimony"][data-kind="choice"] .rappel { display: none; }
  .panneau-choix[data-family="testimony"][data-kind="choice"] .consigne { line-height: 1.12; }
  .panneau-choix[data-family="testimony"][data-kind="choice"] .revoir-histoire { min-height: var(--cible); }
  .revele .replique-personnage { gap: 5px; }
  .revele .replique-personnage .personnage-vignette { width: 56px; height: 56px; }
  .revele .replique-personnage .mot-fin { font-size: 18px; line-height: 1.1; }
}
.entete { flex-wrap: wrap; row-gap: 0; }
@media (max-height: 600px) {
  /* the proof keeps its bar and tint; its label is said while one touches (investigation) */
  .ligne.compacte .etiquette, .lignes.fixe .etiquette { display: none; }
}
.explication li.st-contradiction { color: var(--inconnu); font-weight: 700; }