/* =====================================================================
   Polices servies depuis le site, pas depuis Google.
   Deux raisons : l'affichage ne dépend plus d'un tiers à charger avant
   de pouvoir peindre le texte, et le navigateur du joueur n'envoie
   plus son adresse IP à Google à chaque visite — ce que la page de
   confidentialité promet par ailleurs.
   `swap` : le texte s'affiche tout de suite dans la police de secours
   et bascule dès que la vraie est là, plutôt que de rester invisible.
   Sous-ensemble latin uniquement : il couvre le français, accents et
   œ compris. Les rares glyphes absents (flèches) retombent sur la
   police système, ce qui ne se voit pas.
   ===================================================================== */
/* L'attribut hidden perd contre n'importe quelle règle d'auteur, et
   plusieurs blocs cachés ici sont des display:flex : sans cette ligne,
   ils réapparaissent. */
[hidden]{display:none !important}

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/archivo-latin-600-normal.woff2") format("woff2")}
/* La monospace ne sert jamais au texte courant : elle porte tout ce qui
   relève du dossier — numéro d'affaire, numéro de pièce, annotations de
   marge, tampon du verdict. C'est ce contraste avec le serif des
   dépositions qui donne au jeu son air d'enquête. */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* =====================================================================
   tuaccuses.fr — feuille de style unique, jeu et pages de contenu
   ---------------------------------------------------------------------
   Sombre par défaut : le jeu se joue surtout au téléphone, le soir, et
   une phrase blanche sur fond noir se photographie mieux qu'un document
   gris. Le thème clair suit le réglage du système.
   Les trois couleurs ne décorent rien : chacune désigne une catégorie,
   partout et toujours la même.
   ===================================================================== */

:root{
  /* Noir vraiment neutre, et non plus teinté violet : c'est le fond
     violacé associé au trio néon qui faisait « page générée ». Les
     trois repères gardent leur teinte — le joueur les a appris — mais
     descendent d'un bon tiers en saturation. */
  --bg:#0A0A0B;
  --raise:#141416;
  --text:#EEEEF0;
  --muted:#85858C;
  --line:#242428;
  --rap:#D14E72;
  --philo:#45A98A;
  --ia:#7B86C4;
  --good:#45A98A;
  --bad:#D14E72;
  --sur-couleur:#0F0F11;   /* texte posé sur un aplat de couleur */
  --shell:46rem;
  /* Tout ce qui relève du dossier : numéros, annotations, tampon. */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Un seul thème, le sombre. Le thème clair a été retiré le 10 novembre
   2026 : toute la direction artistique est calibrée sur le fond noir
   (le trio de couleurs n'y tient que là, l'image de partage est sombre,
   la plume décorative a ses teintes écrites en dur dans le SVG). Deux
   thèmes, c'était deux fois la surface à soigner, et le clair n'était
   jamais regardé — donc jamais corrigé. Si le clair revient un jour,
   il faudra aussi rendre plume.svg sensible au thème. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:Archivo,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;
  overflow-x:hidden;position:relative;
}
/* Deux voiles fixes derrière tout le contenu : une lueur froide en haut
   à droite pour que le noir ne soit pas plat, et un grain très fin qui
   casse l'aspect « aplat numérique ». Aucun des deux n'est cliquable. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
/* La lampe d'interrogatoire : un cône de lumière qui tombe du haut, pas
   un halo. La distinction compte — un dégradé radial flou dans un coin,
   c'est le signal « page générée » le plus net de tous ; un cône net,
   large en bas, pincé en haut, se lit comme une lampe suspendue, et il
   sert la métaphore au lieu de décorer. */
body::before{
  content:"";position:fixed;top:-2rem;left:50%;transform:translateX(-50%);
  width:min(120vw,48rem);height:22rem;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(238,238,240,.04),rgba(238,238,240,0) 70%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  /* Le flou est ce qui fait la différence entre de la lumière et un
     triangle gris : sans lui, les bords du cône se voient et l'effet
     devient un aplat posé sur la page. Il doit rester à la limite du
     perceptible — dès qu'on remarque la forme, c'est raté. */
  filter:blur(46px);
}
/* Plus de halos radiaux. C'est le signal « page générée » le plus net
   de tous, plus encore que les couleurs. Le grain, lui, reste : c'est
   une texture, pas un effet. */
body::after{
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23b)' opacity='.28'/></svg>");
}

/* la bibliothèque de dessins n'est jamais affichée telle quelle */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}

.shell{
  max-width:var(--shell);margin:0 auto;
  padding:1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  min-height:100dvh;display:flex;flex-direction:column;
}

/* ---------- en-tête ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:.5625rem;min-width:0;text-decoration:none}
.mark{display:flex;gap:2px;flex:none}
.mark i{width:5px;height:15px;display:block}
.mark i:nth-child(1){background:var(--rap)}
.mark i:nth-child(2){background:var(--philo)}
.mark i:nth-child(3){background:var(--ia)}
/* Une seule famille d'affichage, Instrument Serif, pour la marque, les
   titres et les phrases citées. Elle est la même pour les trois
   catégories : la typographie ne doit jamais trahir l'auteur. */
.brand{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.25rem;line-height:1;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand em{font-style:italic;color:var(--muted)}
.meta{font-family:var(--mono);font-size:.625rem;color:var(--muted);font-variant-numeric:tabular-nums;
      text-align:right;white-space:nowrap;flex:none;letter-spacing:.14em;text-transform:uppercase}
.retour{
  font-family:inherit;font-size:.75rem;color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:0;padding:.3125rem .5625rem;
  cursor:pointer;white-space:nowrap;margin-left:auto;transition:color .12s,border-color .12s;
}
.retour:hover{color:var(--text);border-color:var(--text)}
.retour:focus-visible{outline:2px solid var(--ia);outline-offset:2px}
.wordmark{cursor:pointer}

/* ---------- ruban de navigation ---------- */
.ruban{
  display:flex;gap:.125rem;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
}
@media (min-width:48rem){.ruban{-webkit-mask-image:none;mask-image:none}}
.ruban::-webkit-scrollbar{display:none}
.ruban a{
  font-size:.8125rem;font-weight:500;color:var(--muted);text-decoration:none;
  padding:.6875rem .75rem;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .12s,border-color .12s;
}
.ruban a:first-child{padding-left:0}
.ruban a:hover{color:var(--text)}
.ruban a.on{color:var(--text);border-bottom-color:var(--ia)}

.screen{display:none;flex:1;flex-direction:column;min-height:0}
.screen.is-on{display:flex}

/* ---------- accueil ---------- */
.intro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.75rem;padding:1.75rem 0;position:relative}
/* la plume : décor, jamais un obstacle. Elle déborde volontairement du
   cadre à droite et passe sous le texte. */
.deco{
  position:absolute;top:-4.5rem;right:-7rem;width:min(23rem,74vw);
  opacity:.26;pointer-events:none;z-index:-1;
}
@media(min-width:34rem){.deco{top:-3rem;right:-4rem;width:26rem;opacity:.35}}

/* La chemise en filigrane. Volontairement en bas à gauche : la plume
   occupe déjà le haut à droite, et les deux ne doivent jamais se
   rencontrer. Elle déborde du cadre pour qu'on en voie un coin, pas un
   pictogramme. */
.chemise{
  position:absolute;bottom:-4.5rem;left:-7rem;width:min(13rem,42vw);height:auto;
  fill:none;stroke:var(--text);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  opacity:.04;pointer-events:none;z-index:-1;
}
/* Sur grand écran elle peut respirer : la colonne de gauche s'arrête
   avant le bord, elle ne passe plus sous le texte. */
@media(min-width:64rem){.chemise{bottom:-3rem;left:-8rem;width:19rem;opacity:.055}}

/* ---------- le fichier ---------- */
/* La collection d'auteurs. Les cartes trouvées portent un nom et un
   liseré de leur catégorie ; les manquantes sont caviardées — la même
   barre que dans le jeu, et pour la même raison : le nom n'est pas
   dans la page, il n'y a rien à inspecter. */
.fichier{display:flex;flex-direction:column;gap:.625rem;margin-top:.5rem}
.fiches{display:grid;gap:.375rem;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
.fiche{
  display:flex;flex-direction:column;gap:.25rem;min-height:3.25rem;justify-content:center;
  padding:.5rem .625rem;background:var(--raise);
  border:1px solid var(--line);border-left:2px solid var(--c);
}
.fiche-qui{font-family:"Instrument Serif",Georgia,serif;font-size:1rem;line-height:1.15}
.fiche-n{font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;
         text-transform:uppercase;color:var(--muted)}
.fiche-vide{border-left-color:var(--line);justify-content:center}
.fiche-vide span{display:block;height:.875rem;width:72%;background:var(--text);opacity:.1}

/* ---------- le dossier du jour ---------- */
/* Une chemise cartonnée à onglet, dessinée en CSS : l'onglet est un
   bloc à coins supérieurs adoucis posé sur le corps, dont il partage la
   bordure. Le dessin sert de structure à de vrais chiffres — c'est la
   seule façon honnête de remplir un vide, les remplir avec quelque
   chose à lire. */
.dujour{display:block}
.dujour-onglet{
  display:inline-block;padding:.4375rem .875rem;
  background:var(--raise);border:1px solid var(--line);border-bottom:0;
  border-radius:3px 3px 0 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.dujour-corps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem 1rem;margin:0;padding:.9375rem 1rem;
  background:var(--raise);border:1px solid var(--line);
}
.dujour-corps dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
                 text-transform:uppercase;color:var(--muted)}
.dujour-corps dd{margin:.3125rem 0 0;font-size:1.375rem;font-weight:600;
                 line-height:1;font-variant-numeric:tabular-nums}
.dujour-corps dd small{font-size:.6875rem;font-weight:400;color:var(--muted);letter-spacing:.02em}

/* Pas de mur d'indices sur l'accueil : essayé, puis retiré. La plume
   tient déjà ce rôle et le tient mieux, et le fil rouge traversait le
   contenu en diagonale — il passait sur l'accroche et sur les trois
   lignes de catégories. Trois couches de décor sur un même écran, c'en
   était une de trop. Le mur toisé derrière la ligne de suspects fait le
   même travail là où il sert à quelque chose. */
.lede{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(2.5rem,11vw,4rem);line-height:.98;letter-spacing:-.025em;
  margin:0;max-width:14ch;
}
.lede em{font-style:italic;color:var(--ia)}
.voices{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.voice{display:flex;align-items:center;gap:.6875rem;font-size:.875rem;padding:.625rem 0;border-top:1px solid var(--line)}
.voice b{font-weight:600;flex:none;min-width:5.75rem;color:var(--c)}
.voice span{color:var(--muted)}
.voice .ico{color:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 45%,transparent))}
/* La preuve sociale est une donnée du dossier, pas une phrase du site :
   monospace, comme les numéros et les annotations. */
.social{font-family:var(--mono);font-size:.6875rem;color:var(--muted);margin:0;
        font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* ---------- département ---------- */
/* Replié par défaut : un champ facultatif ne doit pas peser plus lourd
   visuellement que le bouton de jeu. Même convention que .dev plus bas
   (+ / – en préfixe du résumé, triangle natif masqué). */
.dep{font-size:.875rem;color:var(--muted)}
.dep summary{cursor:pointer;list-style:none}
.dep summary::-webkit-details-marker{display:none}
.dep summary::before{content:"+ "}
.dep[open] summary::before{content:"– "}
.dep-note{font-size:.75rem;opacity:.75}
.dep select{
  display:block;margin-top:.5rem;
  font-family:inherit;font-size:.875rem;color:var(--text);background:var(--raise);
  border:1px solid var(--line);border-radius:0;padding:.4375rem .625rem;max-width:16rem;
}
.dep select:hover{border-color:var(--muted)}
.dep select:focus-visible{outline:2px solid var(--ia);outline-offset:2px}

/* ---------- classement ---------- */
.palmares{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.palmares li{
  display:grid;grid-template-columns:2.25rem 1fr auto auto;gap:.75rem;align-items:baseline;
  padding:.625rem 0;border-top:1px solid var(--line);font-size:.9375rem;
}
.palmares .rang{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.palmares .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palmares .moy{font-variant-numeric:tabular-nums;font-weight:700}
.palmares .nb{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:right}
.palmares li.moi{background:var(--raise);box-shadow:inset 3px 0 0 var(--ia);padding-left:.625rem;margin-left:-.625rem}
.palmares li.moi .rang{color:var(--ia)}
.mode.on{color:var(--text);border-color:var(--text)}

/* ---------- sélecteur de mode ---------- */
.modes{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.modes-t{flex-basis:100%;font-family:var(--mono);font-size:.625rem;color:var(--muted);
         margin:0 0 .25rem;letter-spacing:.22em;text-transform:uppercase}
.mode{
  font-family:inherit;font-size:.8125rem;font-weight:500;
  background:none;color:var(--muted);border:1px solid var(--line);border-radius:0;
  padding:.4375rem .75rem;cursor:pointer;display:flex;gap:.4375rem;align-items:baseline;
  transition:color .12s,border-color .12s;
}
.mode:hover:not([disabled]){color:var(--text);border-color:var(--text)}
.mode[disabled]{opacity:.4;cursor:not-allowed}
.body{font-size:.875rem;line-height:1.6;color:var(--muted);max-width:46ch;margin:0}

.chip{font-size:.75rem;padding:.25rem .5rem;border:1px solid var(--line);color:var(--muted)}
.chip.is-pick{background:var(--c);border-color:var(--c);color:var(--sur-couleur);font-weight:500}

/* ---------- boutons ---------- */
.btn{
  font-family:inherit;font-size:1.0625rem;font-weight:600;letter-spacing:.005em;
  color:var(--bg);background:var(--text);border:0;border-radius:0;
  padding:1rem 1.75rem;cursor:pointer;text-align:center;transition:transform .12s,opacity .12s;
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:none;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--raise);opacity:1}
.btn-quiet{background:none;color:var(--muted);border:none;padding:.5rem 0;font-size:.875rem;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.btn-quiet:hover{color:var(--text)}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn:focus-visible,.suspect:focus-visible,.stake:focus-visible,.btn-quiet:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--ia);outline-offset:2px}

/* ---------- progression ---------- */
.track{display:flex;gap:3px;padding:.75rem 0 0}
.pip{flex:1;height:3px;background:var(--line)}
.pip.now{background:var(--text)}
.pip.hit{background:var(--good)}
.pip.miss{background:var(--bad)}

/* ---------- la phrase ---------- */
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.875rem;padding:1.25rem 0 1.75rem;min-height:0}
.stage.entre{animation:fondu .22s ease-out both}
/* une fois la réponse révélée, la phrase cède la place au verdict */
body.a-revele .stage{flex:0 1 auto;padding:.75rem 0 1rem}
body.a-revele .line{font-size:clamp(1.375rem,4.6vw,2rem)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.count{font-family:var(--mono);font-size:.625rem;color:var(--muted);
       font-variant-numeric:tabular-nums;margin:0;letter-spacing:.22em;text-transform:uppercase}
/* La déposition. En italique : ce n'est pas le texte de la page, c'est
   quelqu'un qu'on cite et dont on cherche le nom. */
.line{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(2rem,7.6vw,3.5rem);line-height:1.12;letter-spacing:-.018em;
  margin:0;max-width:26ch;text-wrap:balance;
}
.line::before{content:"«\00a0";color:var(--muted)}
.line::after{content:"\00a0»";color:var(--muted)}

/* ---------- le caviardage ---------- */
/* Pendant la question, le nom de l'auteur est une barre noire. Au
   verdict, la barre s'efface et le nom apparaît dessous. Le thème
   devient une mécanique : une information cachée qu'on cherche. */
.caviarde{display:flex;align-items:center;gap:.625rem;margin:.25rem 0 0;
          font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
          text-transform:uppercase;color:var(--muted)}
.caviarde-v{display:block;flex:1;max-width:14rem;height:.9375rem;
            background:var(--text);opacity:.14;transition:opacity .2s}
/* révélé : la barre cède la place au nom, dans la couleur de la catégorie */
.caviarde.ouvert .caviarde-v{
  height:auto;background:none;opacity:1;flex:0 1 auto;max-width:none;
  font-family:"Instrument Serif",Georgia,serif;font-size:1.125rem;
  letter-spacing:0;text-transform:none;color:var(--c,var(--text));
  animation:leve .24s ease-out both;
}
@keyframes leve{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---------- la ligne de suspects ---------- */
.ask{font-family:var(--mono);font-size:.625rem;color:var(--muted);margin:0 0 .625rem;
     letter-spacing:.22em;text-transform:uppercase}
.ask kbd{font:inherit;opacity:.6}
/* Trois plaques côte à côte, posées sur un mur toisé — la ligne de
   suspects du commissariat. Les trois tiennent sur 390 px de large, donc
   pas de version empilée : c'est l'alignement qui fait l'image. */
.suspects{
  position:relative;display:grid;gap:.4375rem;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}
/* Le mur toisé : il déborde des plaques de chaque côté, sinon il se lit
   comme un fond de bouton et plus comme un mur derrière la ligne. */
.suspects::before{
  content:"";position:absolute;top:-.75rem;bottom:-.75rem;left:-1.25rem;right:-1.25rem;
  pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(238,238,240,.07) 0 1px,transparent 1px 1.625rem);
}
.suspect{
  position:relative;
  font-family:inherit;font-size:.8125rem;font-weight:500;text-align:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--muted);cursor:pointer;
  border:1px solid var(--line);border-radius:0;
  padding:.875rem .375rem .75rem;
  transition:background .12s,color .12s,border-color .12s,opacity .12s,box-shadow .12s;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;
  min-height:5rem;
}
.suspect .lbl{display:block;line-height:1.2}
.suspect .ico{color:var(--c);width:1.3125rem;height:1.3125rem}
.suspect:hover,.suspect.picked{
  border-color:var(--c);color:var(--c);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent);
}
.suspect:hover .ico,.suspect.picked .ico{color:currentColor}
.suspect u{position:absolute;top:.3125rem;right:.4375rem;font-family:var(--mono);
           font-size:.5625rem;opacity:.5;text-decoration:none;font-variant-numeric:tabular-nums}
.suspect[disabled]{cursor:default}
/* après la révélation : l'auteur s'impose, l'accusation ratée est barrée */
.suspect.is-true{background:var(--c);border-color:var(--c);color:var(--sur-couleur);opacity:1;
                 box-shadow:0 8px 34px -12px var(--c)}
.suspect.is-true .ico{color:currentColor}
.suspect.is-true::after{content:"l'auteur";font-family:var(--mono);font-size:.5625rem;
                        letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.suspect.is-wrong{background:none;border-color:var(--line);color:var(--muted);opacity:.9}
.suspect.is-wrong .lbl{text-decoration:line-through;text-decoration-thickness:2px}
.suspect.is-wrong::after{content:"ton accusation";font-family:var(--mono);font-size:.5625rem;
                         letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.suspect.is-out{opacity:.25;background:none}
.suspect.is-true u,.suspect.is-wrong u,.suspect.is-out u{display:none}

/* ---------- le degré de certitude ---------- */
/* Trois paliers nommés plutôt que « 1 2 3 » : on mise une conviction,
   pas un nombre. Le gain reste affiché, en monospace, à côté. */
.stakes{margin-top:1rem}
.stakes[hidden]{display:none}
.stake-list{display:grid;gap:.375rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.stake{
  font-family:inherit;font-size:.8125rem;font-weight:500;
  background:none;color:var(--text);cursor:pointer;
  border:1px solid var(--line);border-radius:0;padding:.625rem .25rem;
  display:flex;flex-direction:column;gap:.1875rem;align-items:center;justify-content:center;
  min-height:3.25rem;text-align:center;transition:border-color .12s,background .12s;
}
.stake:hover{border-color:var(--text);background:var(--raise)}
.stake b{font-family:var(--mono);font-size:.625rem;font-weight:400;letter-spacing:.06em;
         font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.stake:hover b{color:var(--text)}

/* ---------- révélation ---------- */
.reveal{margin-top:1rem}
.reveal[hidden]{display:none}

/* Le tampon : le geste signature du jeu. Il s'abat de travers sur la
   déposition, une fois par pièce, huit fois par partie. Double filet et
   lettres espacées — un tampon d'huissier, pas un badge de notification.
   C'est le seul mouvement du site qui a le droit d'être voyant. */
.tampon{
  display:inline-flex;transform:rotate(-7deg);transform-origin:center;
  border:2px solid var(--c);padding:3px;margin:1.25rem 0 1.5rem .25rem;
  animation:tamponne .26s cubic-bezier(.2,.8,.3,1) both;
}
.tampon span{
  border:1px solid var(--c);padding:.5rem 1rem;
  font-family:var(--mono);font-size:.875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c);line-height:1.35;
}
@keyframes tamponne{
  from{opacity:0;transform:rotate(-7deg) scale(1.55)}
  to{opacity:1;transform:rotate(-7deg) scale(1)}
}

/* Les annotations de marge : du décor qui dit quelque chose de vrai sur
   la partie en cours — le taux de piège de la pièce, le biais du joueur.
   Jamais une information dont on a besoin pour jouer. */
.marge{
  font-family:var(--mono);font-size:.625rem;line-height:1.7;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:1rem 0 0;
}

/* le bandeau de verdict déborde jusqu'aux bords de l'écran */
.verdict{
  margin-inline:calc(50% - 50vw);padding:.875rem calc(50vw - 50% + 1.25rem);
  background:var(--c);color:var(--sur-couleur);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.who{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.5rem,5.4vw,2.125rem);line-height:1.05;margin:0;letter-spacing:-.015em}
.pts{font-size:1.625rem;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.src{font-size:.8125rem;color:var(--muted);margin:.875rem 0 1rem;line-height:1.5;max-width:46ch}
.gauge{display:flex;align-items:baseline;gap:.75rem;margin:0 0 1.125rem}
.gauge-num{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;flex:none;color:var(--c)}
.gauge-txt{font-size:.75rem;color:var(--muted);line-height:1.45}
.gauge-bar{display:block;height:3px;background:var(--line);margin-top:.5rem;max-width:14rem}
.gauge-fill{display:block;height:100%;background:var(--c)}
.flag{display:block;font-size:.75rem;color:var(--muted);background:none;border:0;padding:0;margin-top:.875rem;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.flag:hover{color:var(--text)}
.anim{animation:monte .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- fin : le dossier qu'on referme ---------- */
.final{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.125rem;padding:1.5rem 0}
/* L'étiquette de chemise cartonnée : elle sert d'en-tête au dossier et
   de légende aux pièces. Même traitement que les numéros du jeu. */
.dossier-t{font-family:var(--mono);font-size:.625rem;color:var(--muted);margin:0;
           letter-spacing:.22em;text-transform:uppercase}
.piece-bloc{display:flex;flex-direction:column;gap:.5625rem}
/* L'empreinte du dossier refermé. Elle déborde volontairement du cadre :
   un motif coupé se lit comme une texture, un motif entier se lit comme
   un logo posé là. */
#s-end{position:relative}
.empreinte{
  position:absolute;bottom:-3rem;right:-3.5rem;width:min(17rem,58vw);height:auto;
  fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;
  opacity:.075;pointer-events:none;z-index:-1;
}
/* Les écrans annexes réutilisent .final, mais leur contenu est court :
   centré verticalement, il flotte au milieu d'un écran vide. Un score
   mérite d'être centré, une liste commence en haut. */
#s-classement .final,
#s-stats .final,
#s-archive .final,
#s-proposer .final{justify-content:flex-start;padding-top:1.75rem}
/* Le récapitulatif chiffré est une donnée du dossier, pas une phrase. */
.mono-note{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;line-height:1.75}
.score{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(4.5rem,26vw,8rem);line-height:.8;margin:0;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.score small{font-size:.22em;color:var(--muted);letter-spacing:0}
.rank{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.375rem,5vw,1.75rem);line-height:1.18;margin:0;max-width:24ch;letter-spacing:-.015em}
.grid{display:flex;flex-wrap:wrap;gap:4px}
.cell{width:1.875rem;height:1.875rem;display:grid;place-items:center;font-size:.8125rem;font-weight:700;color:var(--sur-couleur);background:var(--c)}
.cell.off{background:none;box-shadow:inset 0 0 0 2px var(--c);color:var(--c)}
.diag{padding:.875rem 1rem;background:var(--raise);border-left:3px solid var(--ia);margin:0}
.diag::before{content:"Ce que dit ton dossier";display:block;font-family:var(--mono);
              font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
              color:var(--muted);margin-bottom:.625rem}
.diag p{margin:0 0 .5rem;font-size:.9375rem;line-height:1.5}
.diag p:last-child{margin-bottom:0}
.diag b{font-weight:600}
.note{font-size:.8125rem;color:var(--muted);line-height:1.6;margin:0;font-variant-numeric:tabular-nums}
.done{font-size:.8125rem;color:var(--good);margin:0}

/* ---------- états ---------- */
.state{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:3rem 0}
.state h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.875rem;margin:0;letter-spacing:-.015em}
.state p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin:0;max-width:44ch}
.badge{display:inline-block;font-family:var(--mono);font-size:.625rem;padding:.1875rem .4375rem;
       border:1px solid var(--line);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* ---------- pied de page ---------- */
.foot{margin-top:2rem;padding-top:.875rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.foot .pitch{margin:0 0 .5rem;line-height:1.55;max-width:48ch}
.foot .liens{display:flex;flex-wrap:wrap;gap:.375rem 1rem}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}
/* pendant une manche, le pied de page n'a rien à faire là */
body.en-jeu .foot{display:none}

/* ---------- note technique ---------- */
.dev{margin-top:1.25rem;font-size:.75rem;color:var(--muted)}
.dev summary{cursor:pointer;list-style:none}
.dev summary::-webkit-details-marker{display:none}
.dev summary::before{content:"+ "}
.dev[open] summary::before{content:"– "}
.dev-body{padding-top:.625rem;line-height:1.6}
.dev code{font-family:ui-monospace,SFMono-Regular,monospace;background:var(--raise);padding:.1em .35em}

/* ---------- pages de contenu ---------- */
.prose{flex:1;padding:2rem 0 1rem;max-width:36rem}
.prose h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(2.25rem,8vw,3rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.5rem}
.prose h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.15;letter-spacing:-.015em;margin:2.25rem 0 .625rem}
.prose p,.prose li{font-size:.9375rem;line-height:1.7}
.prose ul{padding-left:1.125rem;margin:.625rem 0}
.prose li{margin-bottom:.375rem}
.prose dl{margin:.625rem 0}
.prose dt{font-weight:600;margin-top:1rem}
.prose dd{margin:.1875rem 0 0;color:var(--muted)}
.prose .lead{font-size:1.0625rem;color:var(--muted);line-height:1.6}
.prose code{font-family:ui-monospace,SFMono-Regular,monospace;background:var(--raise);padding:.1em .35em;font-size:.875em}
.prose .note{margin:1rem 0}

/* =====================================================================
   GRAND ÉCRAN
   Sur mobile tout s'empile. À partir de 64rem, l'accueil se met sur deux
   colonnes : l'argument et le bouton à gauche, l'exemple à droite, la
   plume en grand derrière. Les écrans de jeu, eux, restent étroits — une
   phrase se lit mal sur soixante caractères de large.
   ===================================================================== */
.intro .accroche,
.intro .action{display:flex;flex-direction:column;gap:1.5rem;min-width:0}

@media (min-width:64rem){
  :root{--shell:62rem}
  /* Sur grand écran, le tour d'accueil tient la colonne de droite et
     le reste s'empile à gauche. Quand il a disparu — joueur qui est
     déjà venu — l'aparté remonte à sa place pour que la page ne soit
     pas déséquilibrée. */
  .intro{
    display:grid;grid-template-columns:1.1fr .9fr;
    column-gap:4rem;row-gap:1.5rem;align-items:center;padding:3rem 0;
  }
  .intro .accroche{grid-column:1;grid-row:1}
  .intro .action  {grid-column:1;grid-row:2}
  .intro .aparte  {grid-column:1;grid-row:3;align-self:start}
  .intro .essai   {grid-column:2;grid-row:1 / span 3;align-self:center}
  .intro.sans-essai .aparte{grid-column:2;grid-row:1 / span 2;align-self:center}
  .intro > .note{grid-column:1 / -1}
  .essai-line{font-size:1.75rem}
  .deco{top:-6rem;right:-9rem;width:30rem;opacity:.3}
  .lede{font-size:4rem;max-width:13ch}

  /* le jeu garde une colonne de lecture confortable */
  #s-play > *,
  #s-end .final{max-width:42rem;width:100%}
  .line{font-size:3.25rem}

  /* Sur grand écran, la déposition et la ligne de suspects doivent rester
     ensemble : si la scène s'étire sur toute la hauteur disponible, les
     deux se retrouvent séparées par un demi-écran de vide et la page
     paraît abandonnée. On centre le bloc entier plutôt que d'étirer
     l'un de ses morceaux. */
  #s-play{justify-content:center}
  .stage{flex:0 1 auto;padding:2.25rem 0 2.75rem}
}

/* Le tampon garde son inclinaison, il perd juste son arrivée : c'est le
   mouvement qui gêne, pas l'image. */
@media(prefers-reduced-motion:reduce){.anim,.stage.entre,.tampon,.caviarde.ouvert .caviarde-v{animation:none}}

/* ---------- les parties du jour ---------- */
.parties{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.part{
  font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;
  background:none;color:var(--muted);border:1px solid var(--line);border-radius:0;
  padding:.4375rem .75rem;display:flex;gap:.4375rem;align-items:baseline;
  transition:color .12s,border-color .12s;
}
.part:hover:not([disabled]){color:var(--text);border-color:var(--text)}
.part.faite{opacity:.55;cursor:default}
.part.faite u{text-decoration:none;color:var(--philo)}
.part-note{flex-basis:100%;font-size:.75rem;color:var(--muted);line-height:1.5}

/* =====================================================================
   Le tour d'accueil
   On lui donne le poids d'un vrai tour, pas d'une vignette d'exemple :
   c'est la première chose que la plupart des gens joueront.
   ===================================================================== */
.essai{
  padding:1.125rem;background:var(--raise);border-left:3px solid var(--ia);
  display:flex;flex-direction:column;gap:.875rem;
}
.essai-t{font-family:var(--mono);font-size:.625rem;color:var(--muted);margin:0;
         letter-spacing:.22em;text-transform:uppercase}
.essai-line{
  font-family:"Instrument Serif",Georgia,serif;font-size:1.5rem;line-height:1.2;
  margin:0;letter-spacing:-.01em;
}
.essai-line::before{content:"«\00a0"}
.essai-line::after{content:"\00a0»"}
.essai-chips{display:flex;flex-wrap:wrap;gap:.375rem}
.essai-chip{
  font-family:inherit;font-size:.8125rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.4375rem .625rem;border:1px solid var(--line);border-radius:0;
  background:none;color:var(--text);transition:border-color .12s,color .12s,opacity .12s;
}
.essai-chip .ico{width:.9375rem;height:.9375rem;color:var(--c)}
.essai-chip:hover:not([disabled]){border-color:var(--c);color:var(--c)}
.essai-chip.is-true{border-color:var(--c);background:var(--c);color:var(--sur-couleur);font-weight:500}
.essai-chip.is-true .ico{color:var(--sur-couleur)}
.essai-chip.is-wrong{border-color:var(--line);color:var(--muted);text-decoration:line-through}
.essai-chip.is-out{opacity:.35}
.essai-chip[disabled]{cursor:default}
.essai-sol{display:flex;flex-direction:column;gap:.375rem}
.essai-sol p{margin:0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.essai-sol .ok,.essai-sol .ko{color:var(--text);font-size:.875rem}
.essai-suite{opacity:.8}

/* =====================================================================
   Mes stats, archive, proposition — migration 04
   ===================================================================== */

/* ---------- les quatre chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin:1rem 0 1.25rem}
.chiffres .chiffre{background:var(--bg);padding:.875rem .75rem;display:flex;flex-direction:column;gap:.25rem}
.chiffres b{
  font-family:"Instrument Serif",Georgia,serif;font-size:2rem;line-height:1;
  font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.chiffres span{font-size:.75rem;color:var(--muted);line-height:1.35}

.biais-ligne{font-size:.9375rem;line-height:1.55;margin:0 0 .75rem}
.biais-flux{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;margin-bottom:1rem}
.biais-flux .chip{display:inline-flex;align-items:center;gap:.375rem;color:var(--c);border-color:var(--c)}
.biais-flux .chip .ico{width:1rem;height:1rem}
.biais-flux .fleche{color:var(--muted)}

/* ---------- l'archive ---------- */
.jours{list-style:none;margin:1rem 0 0;padding:0}
.jours li{border-top:1px solid var(--line)}
.jours li:last-child{border-bottom:1px solid var(--line)}
.jour{
  width:100%;font-family:inherit;text-align:left;background:none;border:0;cursor:pointer;
  color:var(--text);padding:.75rem .5rem .75rem 0;
  display:grid;grid-template-columns:4.5rem 1fr auto;gap:.25rem .75rem;align-items:baseline;
  transition:background .12s;
}
.jour:hover{background:var(--raise)}
.jour .num{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.jour .quand{font-size:.9375rem}
.jour .qui{grid-column:2;font-size:.75rem;color:var(--muted)}
.jour .tag{font-weight:500;color:var(--text)}
/* On annonce que la ligne est cliquable : sans ça l'archive ressemble à
   un simple tableau de scores. */
.jour .go{
  grid-row:1 / span 2;grid-column:3;align-self:center;
  font-size:.75rem;color:var(--muted);white-space:nowrap;
  transition:color .12s;
}
.jour:hover .go,.jour:focus-visible .go{color:var(--ia)}

/* ---------- le formulaire de proposition ---------- */
.form{display:flex;flex-direction:column;gap:.375rem;margin-top:1rem;max-width:40rem}
.form label{font-size:.75rem;color:var(--muted);margin-top:.5rem}
.form textarea,.form input,.form select{
  font-family:inherit;font-size:.9375rem;color:var(--text);
  background:var(--raise);border:1px solid var(--line);border-radius:0;
  padding:.5rem .625rem;width:100%;
}
.form textarea{resize:vertical;line-height:1.5}
.form textarea:focus-visible,.form input:focus-visible,.form select:focus-visible{
  outline:2px solid var(--ia);outline-offset:1px;
}
.form .row{margin-top:1rem}

@media (min-width:40rem){
  .chiffres{grid-template-columns:repeat(4,1fr)}
}