/* =====================================================================
   MURDER HOTEL — le registre
   La feuille de style reprend la couverture : le violet du fond, le papier
   crème des chemises, le rose des titres, la sarcelle des bandeaux et des
   croix, le jaune du pense-bête. Les valeurs sont RELEVÉES sur le fichier
   de couverture, pas approchées à l'œil.
   ===================================================================== */

:root{
  --violet:#6228D5;
  --violet-fonce:#4A15AF;
  --violet-clair:#7A47E4;
  --papier:#FBECE8;
  --papier-vif:#FFF7F3;
  --papier-ombre:#E9D8D3;
  --encre:#2D1D33;
  --encre-2:#6A5A70;
  --rose:#C71D65;
  --rose-vif:#E22873;
  --sarcelle:#006265;
  --sarcelle-vif:#00807F;
  --jaune:#FAD735;

  /* Contrastes RELEVES, pas choisis. Une bordure ou un trace qui porte du
     sens doit tenir 3:1 sur le papier ; du texte courant, 4,5:1. */
  --bord:#8A7A84;        /* rgba(encre,.55) — 3,51:1  champs, boutons creux */
  --piste:#BDAEB2;       /* fond de jauge */
  --piste-bord:#94848E;  /* 3,07:1 — sans lui on ne voit pas ou finit la piste */
  --filet:rgba(45,29,51,.30);

  --deco:"Anton","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --etiq:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --texte:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;

  --r:3px;
  --ombre:0 10px 24px -12px rgba(24,6,60,.55), 0 2px 0 rgba(24,6,60,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--texte);
  font-size:17px;
  line-height:1.5;
  color:var(--papier);
  background-color:var(--violet);
  /* Le fond de la couverture est brossé verticalement. Deux dégradés
     répétés suffisent : aucune image à télécharger sur un réseau lent. */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.055) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(180deg,#6A2CE0 0%,var(--violet) 45%,#5620C0 100%);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

.saut{position:absolute;left:-9999px;top:0;background:var(--papier);
  color:var(--encre);padding:10px 16px;z-index:99;font-family:var(--etiq);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.saut:focus{left:8px;top:8px}

/* Un anneau a DEUX TONS, parce que le site a deux fonds. Du jaune sur le
   papier creme donnait 1,23:1 : au clavier, on perdait sa place a chaque
   carte. Ici l'encre ressort sur le papier (13,7:1) et le papier ressort
   sur le violet (6,6:1) — quel que soit le fond, l'un des deux tient. */
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;
  box-shadow:0 0 0 3px var(--papier)}

/* ------------------------------------------------------------------ *
   Bandeau
 * ------------------------------------------------------------------ */
.bandeau{padding:16px 0 0}
.bandeau-in{max-width:760px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:12px}
.marque{display:block;text-decoration:none;line-height:.86;
  font-family:var(--deco);font-size:clamp(30px,9.5vw,52px);
  letter-spacing:.005em}
.marque-1{color:var(--papier);display:block}
.marque-2{color:var(--rose-vif);display:block}
.bandeau-outils{margin-left:auto;display:flex;gap:8px;align-items:center}
.bandeau-sous{max-width:760px;margin:10px auto 0;padding:0 18px;
/* Papier a 72 % sur le violet : 4,10:1, juste sous le seuil. A 85 % il
   passe a 5,16:1, et l'interlettrage descend de .24em a .16em. */
  font-family:var(--etiq);font-weight:700;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(251,236,232,.85)}

.puce{font-family:var(--etiq);font-weight:700;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:var(--papier);
  border:1.5px solid rgba(251,236,232,.5);border-radius:var(--r);
  min-height:44px;min-width:52px;padding:0 14px;cursor:pointer}
.puce:hover{background:rgba(255,255,255,.22)}

/* ------------------------------------------------------------------ *
   La page et les chemises
 * ------------------------------------------------------------------ */
.page{max-width:760px;margin:0 auto;padding:22px 18px 40px}

/* Une chemise cartonnée : languette en haut à gauche, trombone en haut à
   droite, deux feuilles qui dépassent derrière. C'est le motif de la
   couverture, et c'est le seul décor du site. */
.chemise{
  position:relative;background:var(--papier);color:var(--encre);
  border-radius:2px 2px var(--r) var(--r);
  box-shadow:var(--ombre);
  margin:0 0 26px;padding:26px 20px 22px;
}
.chemise::before{ /* la languette */
  content:"";position:absolute;left:0;top:-13px;width:44%;max-width:190px;
  height:14px;background:var(--papier);
  border-radius:var(--r) 14px 0 0;
}
.chemise::after{ /* les feuilles derrière */
  content:"";position:absolute;inset:6px -6px -7px 10px;z-index:-1;
  background:rgba(255,255,255,.42);border-radius:2px;
}
.chemise > *:first-child{margin-top:0}
.chemise.discrete{background:var(--papier-vif)}

.trombone{position:absolute;right:16px;top:-16px;width:15px;height:38px;
  border:2.5px solid #9BA2AE;border-bottom-color:#9BA2AE;border-radius:9px;
  background:transparent;transform:rotate(9deg)}
.trombone::after{content:"";position:absolute;left:3px;top:6px;right:3px;
  bottom:5px;border:2.5px solid #B9C0CB;border-top:0;border-radius:0 0 6px 6px}

/* ------------------------------------------------------------------ *
   Typographie
 * ------------------------------------------------------------------ */
/* Anton a de vraies descendantes : à .94, un titre sur deux lignes se
   chevauche dès qu'il finit par un « p » ou un « q ». */
h1,h2,h3{font-family:var(--deco);font-weight:400;line-height:1.02;
  letter-spacing:.005em;text-wrap:balance;margin:0 0 12px}
h1{font-size:clamp(30px,8vw,44px);color:var(--encre)}
h2{font-size:clamp(24px,6.4vw,34px);color:var(--encre)}
h3{font-size:19px;color:var(--encre)}
h1 em,h2 em{font-style:normal;color:var(--rose)}
p{margin:0 0 12px}
/* ~62 caracteres. Au-dela — la chemise en faisait 77 sur ordinateur —
   l'oeil perd le debut de la ligne suivante. La CARTE garde sa largeur :
   compteurs, grilles et boutons s'etendent, seul le texte courant se cale. */
.chemise p,.chemise .indice-txt,.chemise .denouement,
.pied-in p{max-width:62ch}
a{color:var(--sarcelle)}

.sur-titre{font-family:var(--etiq);font-weight:700;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rose);
  margin:0 0 8px}
/* `.legende` est une ETIQUETTE : quatre mots au plus. Les capitales
   espacees sont faites pour ca, pas pour une explication de trois lignes.
   Toute phrase prend `.note`, en bas de casse. */
.legende{font-family:var(--etiq);font-weight:600;font-size:13.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2)}
.note{font-size:15.5px;line-height:1.5;color:var(--encre-2);margin:0 0 12px}
.note:last-child{margin-bottom:0}
.mono{font-variant-numeric:tabular-nums}

/* Le bandeau sarcelle de la couverture : « CAN YOU FIND THE KILLER'S ROOM? » */
.bande{background:var(--sarcelle);color:var(--papier);
  font-family:var(--deco);font-size:clamp(16px,4.2vw,23px);line-height:1.12;
  padding:11px 14px;margin:0 0 16px;text-align:center;text-wrap:balance;
  box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--sarcelle)}

/* Le pense-bête jaune */
.pensebete{background:var(--jaune);color:var(--encre);padding:14px 16px;
  transform:rotate(-1.2deg);margin:18px 0;
  box-shadow:2px 3px 0 rgba(45,29,51,.18)}
.pensebete p:last-child{margin-bottom:0}

.avert{border-left:4px solid var(--rose);background:rgba(199,29,101,.07);
  padding:12px 14px;margin:14px 0}
.avert p:last-child{margin-bottom:0}

hr.filet{border:0;height:2px;background:var(--encre);opacity:.30;margin:20px 0}

/* ------------------------------------------------------------------ *
   Boutons et formulaires
 * ------------------------------------------------------------------ */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--etiq);font-weight:700;font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  background:var(--rose);color:#fff;border:0;border-radius:var(--r);
  min-height:48px;padding:0 20px;cursor:pointer;text-align:center}
.bouton:hover{background:var(--rose-vif)}
.bouton.sarcelle{background:var(--sarcelle)}
.bouton.sarcelle:hover{background:var(--sarcelle-vif)}
.bouton.creux{background:transparent;color:var(--encre);
  border:2px solid var(--bord)}
.bouton.creux:hover{background:rgba(45,29,51,.06);border-color:var(--encre)}
.bouton.pleine{display:flex;width:100%}
.bouton[disabled]{opacity:.4;cursor:not-allowed}
.boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

label{display:block;font-family:var(--etiq);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);
  margin:0 0 5px}
input{font-family:var(--texte);font-size:19px;font-weight:600;
  background:#fff;color:var(--encre);
  border:2px solid var(--bord);border-radius:var(--r);
  min-height:48px;padding:8px 10px;width:100%;text-align:center}
input:focus{border-color:var(--sarcelle)}
.champs{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.champ{flex:1 1 78px;min-width:72px}
.champ.large{flex:1 1 100%}
.champ.large input{text-align:left}

.verdict{margin-top:12px;font-weight:600;min-height:1.3em}
.verdict.bon{color:var(--sarcelle)}
.verdict.mauvais{color:var(--rose)}
.verdict::before{font-family:var(--etiq);font-weight:700;letter-spacing:.1em;
  margin-right:8px}
.verdict.bon::before{content:"✓ JUSTE —"}
.verdict.mauvais::before{content:"✗ NON —"}

/* ------------------------------------------------------------------ *
   Accueil : les dix chemises
 * ------------------------------------------------------------------ */
.facade{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;
  margin:4px 0 6px;max-width:330px}
.fen{aspect-ratio:3/4;background:rgba(45,29,51,.1);
  border:1.5px solid rgba(45,29,51,.3);border-radius:1px;position:relative}
.fen.on{background:var(--sarcelle);border-color:var(--sarcelle)}
/* la croix, comme dans le livre : au crayon, pas en couleur seule */
.fen.on::after{content:"";position:absolute;inset:-1px;
  background:
    linear-gradient(to top right,transparent 44%,var(--papier) 44%,
      var(--papier) 56%,transparent 56%),
    linear-gradient(to top left,transparent 44%,var(--papier) 44%,
      var(--papier) 56%,transparent 56%)}
.fen.finale{background:rgba(250,215,53,.35);border-color:var(--encre)}
.fen.finale.on{background:var(--jaune);border-color:var(--encre)}
.fen.finale.on::after{background:
  linear-gradient(to top right,transparent 44%,var(--encre) 44%,
    var(--encre) 56%,transparent 56%),
  linear-gradient(to top left,transparent 44%,var(--encre) 44%,
    var(--encre) 56%,transparent 56%)}

.cas{display:block;text-decoration:none;color:inherit;position:relative;
  border-top:2px solid var(--filet);padding:14px 2px}
.cas:first-of-type{border-top:0}
.cas:hover{background:rgba(45,29,51,.04)}
.cas-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cas-id{font-family:var(--deco);font-size:19px;color:var(--rose)}
.cas-bloc{font-family:var(--deco);font-size:19px;color:var(--encre);flex:1}
.cas-palier{font-family:var(--etiq);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--papier);
  background:var(--encre);padding:3px 8px;border-radius:2px}
.cas-etat{font-family:var(--etiq);font-weight:600;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-2);
  margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cas-etat .fait{color:var(--sarcelle)}
.cas-etat .cours{color:var(--rose)}
/* La piste d'une jauge dit jusqu'ou va la mesure : sans lisere elle etait
   a 1,31:1 et on ne voyait pas ou elle s'arretait. */
.jauge{flex:1 1 90px;height:9px;min-width:70px;
  background:var(--piste);box-shadow:inset 0 0 0 1.5px var(--piste-bord);
  border-radius:5px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--sarcelle)}

/* ------------------------------------------------------------------ *
   Une enquête : la chaîne d'indices
 * ------------------------------------------------------------------ */
.retour{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--etiq);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier);text-decoration:none;
  min-height:44px;margin-bottom:6px}
.retour:hover{color:var(--jaune)}

.compteurs{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 4px;
  border-top:2px solid var(--filet)}
.compteur{flex:1 1 33%;padding:10px 4px;text-align:center;
  border-right:2px solid var(--filet)}
.compteur:last-child{border-right:0}
.compteur b{display:block;font-family:var(--deco);font-size:26px;
  color:var(--encre);line-height:1}
.compteur span{font-family:var(--etiq);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}

ol.indices{list-style:none;margin:16px 0 0;padding:0;counter-reset:i}
li.indice{position:relative;padding:12px 0 12px 46px;
  border-top:2px solid var(--filet)}
li.indice::before{content:attr(data-n);position:absolute;left:0;top:12px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--deco);font-size:16px;
  background:transparent;box-shadow:inset 0 0 0 2px var(--bord);
  color:var(--encre-2)}
li.indice.applique::before{background:var(--sarcelle);color:var(--papier);
  box-shadow:none;content:"✓"}
li.indice.courant::before{background:var(--rose);color:#fff;box-shadow:none}
li.indice.applique .indice-txt{color:var(--encre-2)}
/* L'indice A VENIR garde son encre pleine. Le faner le mettait a 3,51:1 —
   sous le seuil, et sur la chose meme que le lecteur doit lire a l'avance
   pour anticiper. L'etat se lit sur la pastille, pas sur le texte. */
.indice-txt{font-size:17px}
li.indice.courant{background:rgba(250,215,53,.22);
  margin:0 -12px;padding-left:58px;padding-right:12px}
li.indice.courant::before{left:12px}

.jalon{font-family:var(--etiq);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sarcelle);
  display:inline-block;margin-top:6px}
.jalon.total{color:var(--rose)}
.jalon.ok::before{content:"✓ ";}

.bloc{margin-top:14px;padding-top:14px;border-top:2px dashed rgba(45,29,51,.22)}
.bloc h3{margin-bottom:6px}

.aide{margin-top:10px;padding:12px 14px;background:rgba(0,98,101,.07);
  border-left:4px solid var(--sarcelle)}
.aide:first-of-type{margin-top:12px}
.aide .legende{color:var(--sarcelle);margin-bottom:4px}
.aide p:last-child{margin-bottom:0}

.hotels{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hotels button{font-family:var(--etiq);font-weight:700;font-size:15px;
  min-height:44px;min-width:44px;padding:0 12px;cursor:pointer;
  background:#fff;color:var(--encre);border:2px solid var(--bord);
  border-radius:var(--r)}
.hotels button:hover{border-color:var(--sarcelle);color:var(--sarcelle)}
.hotels button[aria-pressed="true"]{background:var(--sarcelle);color:#fff;
  border-color:var(--sarcelle)}

.grille-cp{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin-top:10px}

.etape{padding:12px 0;border-top:2px solid var(--filet)}
.etape .legende{color:var(--rose)}
.etape.verrou{color:rgba(45,29,51,.5)}

.denouement{white-space:pre-wrap;margin-top:12px;padding:16px;
  background:var(--papier-vif);border:2px solid var(--sarcelle)}
.coupable{font-family:var(--deco);font-size:clamp(24px,6vw,32px);
  color:var(--rose);line-height:1;margin-bottom:10px}

/* ------------------------------------------------------------------ *
   Pied
 * ------------------------------------------------------------------ */
.pied{border-top:2px solid rgba(251,236,232,.28);margin-top:10px}
.pied-in{max-width:760px;margin:0 auto;padding:22px 18px 42px;
  font-size:15px;color:rgba(251,236,232,.82)}
.pied-in a{color:var(--jaune)}
.pied-chiffres{display:flex;flex-wrap:wrap;gap:14px 22px;
  font-family:var(--etiq);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.pied-chiffres b{font-family:var(--deco);font-size:19px;color:var(--papier);
  margin-right:5px;letter-spacing:0}
.pied .boutons .bouton{border-color:rgba(251,236,232,.7);color:var(--papier)}
.pied .boutons .bouton.creux:hover{background:rgba(255,255,255,.12)}

/* ------------------------------------------------------------------ *
   Divers
 * ------------------------------------------------------------------ */
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:620px){
  .chemise{padding:32px 34px 28px}
  .page{padding:30px 18px 50px}
}

@media (prefers-reduced-motion:no-preference){
  .chemise{transition:box-shadow .2s ease}
}
@media print{
  body{background:#fff;color:#000}
  .bandeau-outils,.boutons,.pied{display:none}
}

/* Les trois temps, comme au dos de la couverture : lire, rayer, compter. */
.marche{margin:18px 0 4px;border-top:2px solid var(--filet)}
.marche-pas{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:2px solid var(--filet)}
.marche-pas b{flex:0 0 32px;height:32px;border-radius:50%;
  background:var(--encre);color:var(--papier);
  font-family:var(--deco);font-size:17px;font-weight:400;
  display:flex;align-items:center;justify-content:center}
.marche-pas p{margin:2px 0 0;font-size:16px;color:var(--encre-2)}
.marche-pas .legende{color:var(--rose)}

/* Les quatre chiffres de l'appel : dix trajets, sept étapes, soixante-dix
   chambres, zéro page de plus. Le dernier est le seul qui compte vraiment. */
.chiffres-suite{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  margin:18px 0;background:var(--filet)}
.chiffres-suite div{background:var(--papier);padding:14px 6px;text-align:center}
.chiffres-suite b{display:block;font-family:var(--deco);font-size:30px;
  color:var(--encre);line-height:1}
.chiffres-suite div:last-child b{color:var(--rose)}
.chiffres-suite span{font-family:var(--etiq);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2)}
/* Le formulaire de la suite : celui de l'app, plus l'iframe Brevo. */
.formulaire-suite{margin:14px 0 0}
.formulaire-suite .champ{margin-bottom:10px}
.formulaire-suite input[type=email],.formulaire-suite input[name=nom]{width:100%}
.consentement{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;
  font-size:15px;line-height:1.4;cursor:pointer}
.consentement input{width:20px;height:20px;flex:none;margin-top:2px}
.erreur-suite{color:var(--rouge,#a3261b);min-height:1.2em;margin:6px 0}
@media (min-width:520px){.chiffres-suite{grid-template-columns:repeat(4,1fr)}}

/* La liste de ce que contient le livre, sur la page d'accueil. Des puces
   qui disent quoi : une coche sarcelle, pas un point noir. */
.atouts{list-style:none;margin:16px 0 0;padding:0}
.atouts li{position:relative;padding:8px 0 8px 30px;font-size:16.5px;
  border-top:2px solid var(--filet)}
.atouts li::before{content:"";position:absolute;left:2px;top:15px;
  width:14px;height:8px;border-left:3px solid var(--sarcelle);
  border-bottom:3px solid var(--sarcelle);transform:rotate(-45deg)}

/* ------------------------------------------------------------------ *
   La réglette d'indices.
   Le site ne connaît des indices que leur NUMÉRO : les cent un énoncés
   sont imprimés dans le volume, et les recopier ici aurait doublé le
   livre sur une page web. Reste ce qui sert : où j'en suis, où tombent
   les points de contrôle, et de quoi s'y déplacer d'un doigt.
 * ------------------------------------------------------------------ */
.reglette{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.pas-n{position:relative;width:46px;height:46px;flex:0 0 46px;
  border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 2px var(--bord);color:var(--encre-2);
  font-family:var(--deco);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:0;padding:0}
.pas-n:hover{box-shadow:inset 0 0 0 2px var(--encre);color:var(--encre)}
/* Trois etats, trois FORMES, pas trois couleurs : plein, plein cercle,
   contour. La couleur seule ne dirait rien a qui ne la voit pas. */
.pas-n.applique{background:var(--sarcelle);color:var(--papier);
  box-shadow:none}
.pas-n.courant{background:var(--rose);color:#fff;
  box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--rose)}
/* Le jalon d'un point de contrôle : un point sous le numéro. Il ne repose
   pas sur la seule couleur — sa légende le nomme juste en dessous. */
.pas-n.cp-hotel::after,.pas-n.cp-total::after{content:"";position:absolute;
  left:50%;bottom:-9px;width:8px;height:8px;margin-left:-4px;border-radius:50%}
.pas-n.cp-hotel::after{background:var(--sarcelle)}
.pas-n.cp-total::after{background:var(--rose)}
.pas-n.cp-ok::after{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--encre)}

.reglette-lg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 2px}
.reglette-lg .lg{display:flex;align-items:center;gap:7px;
  font-family:var(--etiq);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-2)}
.reglette-lg .lg i{width:8px;height:8px;border-radius:50%;display:block}
.reglette-lg .cp-hotel i{background:var(--sarcelle)}
.reglette-lg .cp-total i{background:var(--rose)}

/* Le fragment de recit gagne en refermant un trajet. Il se lit
   comme une note de dossier, pas comme un message de felicitations :
   corps un peu plus petit, italique, filet a gauche. */
.fragment{margin:8px 0 0;padding:6px 0 6px 10px;font-style:italic;
  font-size:.92em;border-left:2px solid currentColor;opacity:.85}

/* Le pouce, sous « Enquete close ». */
.vote{margin:16px 0 4px}
.vote-q{font-weight:700;margin:0 0 10px}
.vote-boutons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.vote-b{display:inline-flex;align-items:center;gap:8px;min-height:48px;
  padding:8px 16px;border:2px solid var(--filet);border-radius:999px;
  background:transparent;color:var(--encre);font:inherit;cursor:pointer}
.vote-b:hover{border-color:var(--encre)}
.vote-b.choisi{border-color:var(--sarcelle);background:var(--sarcelle);
  color:var(--papier)}
.vote-pouce{font-size:22px;line-height:1}

/* Les raisons d'un pouce vers le bas. */
.raisons{margin:4px 0 12px}
.raisons-q{font-size:15.5px;margin:0 0 8px}
.raisons-choix{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.raison-b{min-height:40px;padding:6px 14px;border:2px solid var(--filet);
  border-radius:999px;background:transparent;color:var(--encre);
  font:inherit;font-size:15px;cursor:pointer}
.raison-b:hover{border-color:var(--encre)}
.raison-b.choisi{border-color:var(--sarcelle);background:var(--sarcelle);
  color:var(--papier)}