/* HOODLUMROUGE — la seule feuille de style du site (toutes les pages la chargent). */

/* ---------- 1. Polices (hébergées sur le site, pas de Google Fonts) ---------- */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}

/* ---------- 2. Couleurs et polices : changer ici change tout le site ---------- */
:root {
  --rouge: #ff0000;
  --rouge-sombre: #400;
  --rouge-nuit: #1a0000;
  --noir: #000;
  --fond: #050505;
  --texte: #d8d8d8;
  --texte-doux: #9a9a9a;
  --ligne: #2a2a2a;
  --alerte: #ff8800; /* marqueurs « À COMPLÉTER » */
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--fond) url('/img/fond.webp') center / cover fixed;
  color: var(--texte);
  font: 1rem/1.7 var(--mono);
  padding: 3vh 3vw;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--rouge); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px dashed var(--rouge); outline-offset: 3px; }
ul, ol { padding-inline-start: 1.4em; }
li { margin-bottom: .4em; }
li::marker { color: var(--rouge); }

/* ---------- 4. Cadre TV + lignes de balayage ---------- */
.ecran {
  position: relative;
  /* Sur un grand écran, 1180 px laissaient un tiers de l'écran en noir de chaque côté.
     Le cadre « télé » reste un cadre, mais il occupe enfin l'écran. Pas de borne en vw ici :
     sur téléphone elle rognait inutilement quelques pixels de chaque côté. */
  max-width: 1500px;
  margin: 0 auto;
  background: var(--noir);
  border: 12px solid var(--rouge-nuit);
  border-radius: 15px;
  box-shadow: 0 0 50px rgba(0, 0, 0, .8), inset 0 0 30px #000;
  overflow: hidden;
}
.ecran::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .12) 50%);
  background-size: 100% 3px;
  pointer-events: none; /* les clics passent à travers */
  z-index: 50;
}

/* ---------- 5. En-tête : logo, menu, langues, fil d'Ariane ---------- */
.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 24px;
  border-bottom: 2px solid var(--rouge-nuit);
}
.logo {
  font: 1rem/1 var(--pixel);
  color: var(--rouge); text-decoration: none;
  text-shadow: 3px 3px var(--rouge-sombre);
  margin-inline-end: auto; /* pousse le reste de l'autre côté (marche aussi en arabe) */
}
.logo span { color: #fff; }
.menu ul, .langues ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.menu li, .langues li { margin: 0; }
.menu a, .langues a {
  display: inline-block;
  font: .55rem/1 var(--pixel);
  color: var(--texte-doux); text-decoration: none;
  border: 1px solid #333; padding: 9px 12px;
  transition: .2s;
}
/* aria-current = le lien de la page où l'on est */
.menu a:hover, .langues a:hover,
.menu a[aria-current], .langues a[aria-current] { color: var(--rouge); border-color: var(--rouge); }
.langues a { padding: 7px 8px; font-size: .45rem; }

.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 24px 0; font-size: .8rem; color: var(--texte-doux); }
.fil li { margin: 0; }
.fil li + li::before { content: '/'; margin-inline-end: 4px; color: var(--rouge-sombre); }
.fil a { color: var(--texte-doux); }

/* ---------- 6. Titres et texte ---------- */
main { padding: 28px 24px 48px; }
main > section, .fiche > section { margin-top: 48px; }

/* ---------- La colonne de lecture ----------
   Les textes s'arrêtaient à 72 caractères mais restaient collés au bord gauche d'un cadre
   deux fois plus large : sur un ordinateur, la moitié droite de la page restait vide et le
   site semblait écrit dans la marge. On garde une longueur de ligne lisible, mais c'est la
   SECTION entière — son titre avec elle — qui se centre : le bloc reste aligné à gauche sur
   lui-même, et le vide se répartit des deux côtés.
   Les sections qui portent une grille de pièces, des photos ou un tableau gardent, elles,
   toute la largeur du cadre. */
main > section, .fiche > section { max-width: 82ch; margin-inline: auto; }
/* (Sur un navigateur trop ancien pour :has(), ces sections restent simplement dans la
   colonne de lecture : la grille est plus étroite, rien n'est cassé.) */
main > section:has(.grille, .archives-grille),
.fiche > section:has(.grille, .archives-grille) { max-width: none; }
/* Un tableau reste dans la colonne de lecture — il est étroit, l'étaler sur toute la
   largeur le laissait flotter seul dans une bande vide. S'il devient plus large que la
   colonne, il défile dans sa section au lieu d'être coupé par le cadre, qui masque
   tout ce qui dépasse. */
main > section:has(.tableau) { overflow-x: auto; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; color: var(--rouge); line-height: 1.6; }
h1 { font-size: clamp(1rem, 2.6vw, 1.5rem); margin-bottom: 20px; text-shadow: 3px 3px var(--rouge-nuit); }
h2 { font-size: clamp(.8rem, 1.8vw, 1rem); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #300; }
h3 { font-size: .7rem; }
p, ul, ol, dl { max-width: 82ch; }   /* même mesure que la colonne : les deux coïncident */
p + p { margin-top: 1em; }
.chapo { font-size: 1.08rem; color: #fff; }
.terminal-ligne { font: .6rem/1.9 var(--pixel); color: var(--texte-doux); letter-spacing: 1px; margin-bottom: 12px; }
.clignote { color: var(--rouge); animation: clignote 1.2s step-end infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.note { border-inline-start: 4px solid var(--alerte); padding: 10px 14px; background: #0d0700; margin-bottom: 24px; }
.note-discrete { font-size: .85rem; color: var(--texte-doux); border-inline-start: 2px solid #333; padding-inline-start: 12px; }
.liste-liens li { margin-bottom: .6em; }
.a-completer {
  display: inline-block;
  font: .5rem/1.4 var(--pixel);
  color: var(--alerte);
  border: 1px dashed var(--alerte);
  padding: 4px 6px;
  vertical-align: middle;
  cursor: help;
}

/* Tableau (guide des tailles) */
.tableau { border-collapse: collapse; margin: 16px 0; min-width: 260px; }
.tableau th, .tableau td { border: 1px solid var(--ligne); padding: 8px 14px; text-align: start; }
.tableau th { font: .5rem/1.8 var(--pixel); color: var(--rouge); }

/* ---------- 7. Boutons (.bouton = plein, .bouton--creux = contour seul) ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; max-width: none; }
.bouton {
  display: inline-block;
  font: .65rem/1.5 var(--pixel);
  background: var(--rouge); color: #000;
  border: 2px solid var(--rouge);
  padding: 16px 20px;
  text-decoration: none; text-align: center;
  box-shadow: 4px 4px 0 #fff;
  cursor: pointer; transition: .2s;
}
.bouton:hover { background: #fff; border-color: #fff; color: #000; transform: translate(-2px, -2px); }
.bouton--creux { background: transparent; color: var(--rouge); box-shadow: none; }
.bouton--creux:hover { background: var(--rouge); border-color: var(--rouge); color: #000; box-shadow: 0 0 15px var(--rouge); }

/* ---------- 8. Grille de pièces (cartes) ---------- */
.grille {
  list-style: none; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
}
.carte { margin: 0; }
.carte a {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 10px; border: 1px solid var(--rouge-nuit); background: var(--fond);
  color: #fff; text-decoration: none; transition: border-color .2s;
}
.carte a:hover { border-color: var(--rouge); }
/* photo en noir et blanc, en couleur au survol */
.carte img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); transition: filter .4s; }
.carte a:hover img, .carte a:focus-visible img { filter: grayscale(0); }
.carte-id { font: .5rem/1 var(--pixel); color: #666; }
.carte-nom { font-size: .6rem; color: #fff; }
.carte-desc { font-size: .85rem; color: var(--texte-doux); }
.carte-statut { font: .45rem/1.4 var(--pixel); color: var(--rouge); margin-top: auto; }

/* ---------- 9. Fiche pièce : photos à gauche, résumé à droite ---------- */
.fiche-haut { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
/* la 1re photo en grand, les autres par deux en dessous */
.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid #222; background: #000; }
.galerie img:first-child { grid-column: 1 / -1; aspect-ratio: auto; }
.fiche-resume h1 { border-bottom: 2px solid var(--rouge); padding-bottom: 14px; }
.phrase { font-style: italic; color: var(--texte-doux); overflow-wrap: anywhere; border-inline-start: 3px solid var(--rouge); padding-inline-start: 12px; }
blockquote.phrase { font-size: 1.05rem; margin: 0 0 12px; }
.statut { font: .6rem/1.8 var(--pixel); color: var(--rouge); margin-top: 18px; }
.fiche-technique { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.fiche-technique dt { font: .55rem/2.2 var(--pixel); color: var(--rouge); }
.fiche-technique dd { border-inline-start: 3px solid var(--rouge); padding-inline-start: 12px; }

/* ---------- 10. FAQ (<details> s'ouvre tout seul, sans JavaScript) ---------- */
.faq { max-width: 80ch; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--ligne); background: var(--fond); }
.faq summary { cursor: pointer; padding: 14px 16px; color: #fff; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '> '; color: var(--rouge); }
.faq details[open] summary { border-bottom: 1px solid var(--ligne); }
.faq details > div { padding: 14px 16px; }

/* ---------- 11. Formulaire de contact ---------- */
.formulaire { display: grid; gap: 10px; max-width: 640px; margin-top: 32px; }
.formulaire label { font: .55rem/1.8 var(--pixel); color: var(--rouge); margin-top: 12px; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; background: #0a0a0a; color: #fff;
  border: 1px solid #333; padding: 14px; font: 1rem/1.5 var(--mono);
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--rouge); outline: none; }
.formulaire-aide { font-size: .85rem; color: var(--texte-doux); }
.formulaire-aide a { word-break: break-all; }

/* ---------- 12. Archives : le terminal à code ---------- */
.terminal { max-width: 620px; margin: 40px auto; }
.terminal-barre { display: flex; gap: 8px; padding: 12px 20px; background: #0a0a0a; border: 1px solid var(--rouge-nuit); border-bottom: 0; }
.terminal-barre span { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge-nuit); border: 1px solid #300; }
.terminal-corps { background: var(--fond); border: 1px solid var(--rouge-nuit); padding: 30px; }
.terminal-saisie { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rouge-nuit); color: var(--rouge); font: .6rem var(--pixel); }
/* 16 px, pas moins : en dessous, Safari sur iPhone zoome la page dès qu'on touche le champ
   et le terminal part hors de l'écran. C'est la taille réelle du texte, pas une décoration. */
.terminal-saisie input {
  flex: 1; min-width: 0; background: #000; border: 1px solid #333;
  color: var(--rouge); font: 16px var(--pixel); padding: 14px 10px; letter-spacing: 4px;
  text-transform: uppercase;
}
.terminal-saisie input:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 18px rgba(255,0,0,.25); }
.terminal-saisie input:valid { border-color: #00ff00; color: #00ff00; box-shadow: 0 0 18px rgba(0,255,0,.25); }

/* Le code est vérifié SANS JavaScript : l'attribut pattern du champ (dans le HTML)
   contient le bon code. Le champ devient :valid quand le code est bon. */
.code-lecture, .code-refuse, .code-accepte, .archives-contenu { display: none; }
.code-lecture, .code-refuse, .code-accepte, .code-indice { font: .5rem/1.8 var(--pixel); margin-top: 12px; }
.code-lecture { color: var(--alerte); }
.code-refuse { color: var(--rouge); animation: clignote 1s step-end infinite; }
.code-accepte { color: #00ff00; }
.code-indice { color: var(--texte-doux); border-top: 1px solid var(--rouge-nuit); margin-top: 20px; padding-top: 16px; }
/* En cours de frappe : on ne crie pas « REFUSÉ » à la deuxième lettre, on dit qu'on lit. */
main:has(#code-archives:focus:invalid:not(:placeholder-shown)) .code-lecture { display: block; }
/* Refus pour de bon : un code complet a été posé, et il est mauvais. */
main:has(#code-archives:invalid:not(:placeholder-shown):not(:focus)) .code-refuse { display: block; }
/* bon code : message vert + photos */
main:has(#code-archives:valid) .code-accepte,
main:has(#code-archives:valid) .archives-contenu { display: block; }
main:has(#code-archives:valid) .code-indice { display: none; }
/* Navigateur trop ancien pour :has() : plutôt que d'enfermer le visiteur devant une porte
   que rien ne peut ouvrir, on laisse entrer. Le verrou est un jeu, pas une sécurité. */
@supports not selector(:has(*)) {
  .terminal-saisie, .code-lecture, .code-refuse { display: none; }
  .code-accepte, .archives-contenu { display: block; }
}

.archives-sous-titre { font: .5rem var(--pixel); color: var(--rouge); margin-bottom: 20px; }
.archives-grille { list-style: none; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.archives-grille li { position: relative; margin: 0; border: 1px solid var(--rouge-nuit); aspect-ratio: 1; overflow: hidden; }
.archives-grille img { width: 100%; height: 100%; object-fit: cover; }
.archives-grille .etiquette { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .75); font: .38rem/1.6 var(--pixel); color: #777; text-align: center; padding: 5px 4px; }

/* ---------- 13. Page d'entrée "/" : [ ENTRER_SYSTÈME ] ---------- */
.ecran--plein { min-height: 94vh; display: flex; }
/* min-width: 0 — sans lui, ce bloc est un élément flex qui refuse de rétrécir sous la
   taille de son contenu : la grille des langues imposait 3 colonnes de 300 px (976 px) dans
   un téléphone de 375 px, et comme .ecran masque ce qui dépasse, le logo, le titre et six
   langues sur neuf étaient simplement coupés, sans même une barre pour aller les chercher. */
.passerelle-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 40px 20px; }
.passerelle-logo { width: 150px; height: auto; filter: grayscale(1); transition: filter .4s; }
.passerelle-logo:hover { filter: none; }
.passerelle-titre { font-size: clamp(1.3rem, 6vw, 3rem); text-shadow: 4px 4px #220000; margin: 0; }
/* min(300px, 100%) : sur un écran plus étroit que 300 px de colonne, la colonne se réduit
   à la largeur disponible au lieu de déborder. C'est ce qui fait tenir les neuf langues. */
.passerelle-langues { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; width: 100%; max-width: 1100px; }
.passerelle-langues p { font-size: .9rem; color: var(--texte-doux); margin-bottom: 8px; }
.passerelle-langues .bouton span { color: #fff; margin-inline-start: 6px; }

/* ---------- 14. Pied de page ---------- */
.pied { border-top: 2px solid var(--rouge-nuit); padding: 28px 24px; font-size: .85rem; }
.pied-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.pied-titre { font: .55rem var(--pixel); color: var(--rouge); margin-bottom: 12px; }
.pied ul { list-style: none; padding: 0; }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--rouge); }
.pied-reseaux { margin-top: 24px; font: .5rem/2 var(--pixel); }
.pied-reseaux a { color: var(--rouge); }
.pied-droits { margin-top: 24px; color: #777; font-size: .75rem; max-width: none; }

/* ---------- 15. Accessibilité ---------- */
/* lien « Aller au contenu » : visible seulement au clavier (touche Tab) */
.evitement { position: absolute; top: -100px; inset-inline-start: 10px; z-index: 999; background: var(--rouge); color: #000; padding: 10px; }
.evitement:focus { top: 10px; }
/* caché à l'écran mais lu par les lecteurs d'écran */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 16. Chinois : police du système, agrandie ---------- */
@font-face {
  font-family: 'Pixel latin';
  src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF;
  font-display: swap;
}
@font-face {
  font-family: 'CJK agrandie';
  src: local('Microsoft YaHei'), local('PingFang SC'), local('PingFangSC-Regular'), local('Noto Sans CJK SC'), local('Noto Sans SC');
  size-adjust: 140%;
}
:lang(zh) {
  --pixel: 'Pixel latin', 'CJK agrandie', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'IBM Plex Mono', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
:lang(zh) h1, :lang(zh) h2 { letter-spacing: .05em; }

/* ---------- 17. Arabe : police du système, agrandie ; la page est de droite à gauche (dir="rtl") ---------- */
@font-face {
  font-family: 'Arabe agrandie';
  src: local('Segoe UI'), local('Geeza Pro'), local('Noto Kufi Arabic'), local('Noto Sans Arabic'), local('Tahoma');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 140%;
}
:lang(ar) {
  --pixel: 'Pixel latin', 'Arabe agrandie', 'Segoe UI', Tahoma, sans-serif;
  --mono: 'IBM Plex Mono', 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, sans-serif;
}
:lang(ar) .phrase { font-style: normal; }
.passerelle-langues [lang="ar"] p { font-family: var(--mono); } /* page d'accueil (en français) : police arabe pour cette ligne */

/* ---------- 18. Mobile (à la fin exprès : ces règles gagnent) ---------- */
@media (max-width: 900px) {
  .fiche-haut { grid-template-columns: minmax(0, 1fr); }
  .fiche-resume { order: -1; } /* titre + bouton avant les photos */
}
@media (max-width: 768px) {
  body { padding: 0; }
  .ecran { border-width: 4px; border-radius: 0; }
  .entete { padding: 12px 16px; }
  .menu a { font-size: .5rem; padding: 8px 9px; }
  main { padding: 20px 16px 40px; }
  .fil ol { padding: 10px 16px 0; }
  .grille { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carte-desc { font-size: .75rem; }
  .fiche-technique { grid-template-columns: 1fr; gap: 4px; }
  .fiche-technique dd { margin-bottom: 10px; }
  .bouton { width: 100%; }
  .pied { padding: 24px 16px; }
}
@media (max-width: 380px) {
  .grille { grid-template-columns: 1fr; }
}
/* Page de choix de la langue sur téléphone : neuf langues empilées, c'est long à parcourir.
   On resserre tout pour en montrer le plus possible d'un coup d'œil. */
@media (max-width: 560px) {
  .passerelle-contenu { padding: 22px 14px; gap: 12px; }
  .passerelle-logo { width: 104px; }
  .passerelle-langues { gap: 12px; }
  .passerelle-langues p { font-size: .8rem; line-height: 1.5; margin-bottom: 6px; }
  .passerelle-langues .bouton { padding: 15px 8px; font-size: .55rem; }   /* 46 px de haut : une cible sûre au doigt */
}

/* ---------- 18. SACCAGE : le mini-jeu de l'accueil (voir /js/saccage.js) ---------- */
/* Pendant la partie : la page tremble, se déchire et vire au rouge, mais reste entière.
   Surtout pas d'overflow:hidden sur html — c'est le défilement réel qui sert de caméra.
   Le gros du glitch est peint sur la toile du jeu (voir saccage.js) : un filtre CSS animé
   sur tout le document coûterait beaucoup plus cher, surtout sur téléphone. */
html.saccage { scroll-behavior: auto; }
html.saccage .ecran {
  animation: saccage-tremble 2.6s infinite;
  filter: saturate(1.45) contrast(1.1);
  border-color: #2a0000;
}
/* La page ne se déchire pour de bon qu'une fois le fusil à pompe ramassé (classe posée par
   le jeu) : au début, elle se contente de trembler. */
html.saccage-fort .ecran {
  animation: saccage-tremble 2.6s infinite, saccage-secte 9s infinite;
  filter: saturate(1.6) contrast(1.15);
}
html.saccage .entete, html.saccage .pied { filter: hue-rotate(-12deg); }
@keyframes saccage-tremble {
  0%, 88%, 100% { transform: translate(0, 0) skewX(0); }
  89% { transform: translate(-4px, 1px) skewX(.6deg); }
  91% { transform: translate(3px, -3px) skewX(-.8deg); }
  93% { transform: translate(-2px, 2px) skewX(.3deg); }
  95% { transform: translate(5px, 0) skewX(-.4deg); }
}
/* L'écran se découpe par le haut comme un signal qui saute, et le rouge monte d'un cran. */
@keyframes saccage-secte {
  0%, 70%, 100% { clip-path: none; filter: saturate(1.6) contrast(1.15); }
  71% { clip-path: inset(0 0 0 0); filter: saturate(3) contrast(1.6) hue-rotate(-20deg); }
  73% { clip-path: inset(12% 0 38% 0); }
  74% { clip-path: none; }
  86% { clip-path: inset(52% 0 6% 0); filter: invert(1) saturate(2); }
  87% { clip-path: none; filter: saturate(1.6) contrast(1.15); }
}

/* Les textes rongés : chaque caractère se dédouble en rouge et cyan, mal recalés.
   Pas d'animation ici — ces textes sont déjà réécrits en continu par le jeu, et les faire
   trembler en plus faisait repeindre une trentaine d'éléments sous filtre à chaque image. */
html.saccage .saccage-ronge {
  text-shadow: 2px 0 rgba(255, 0, 0, .85), -2px 0 rgba(0, 255, 255, .55), 0 0 12px rgba(255, 0, 0, .4);
}

/* Le carton d'ouverture, quand on vient de cliquer sur ARCHIVES : la page est prise de force. */
.saccage-ouverture {
  position: fixed; inset: 0; z-index: 950; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #000; text-align: center; padding: 20px;
  animation: saccage-ouvre 2.3s steps(1) forwards;
}
.saccage-ouverture .so-trame {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,0,0,.16) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(0,255,255,.06) 0 3px, transparent 3px 9px);
  animation: saccage-trame .18s steps(1) infinite;
}
.saccage-ouverture .so-ligne { font: .5rem/1.9 var(--pixel); color: var(--rouge); letter-spacing: 3px; }
.saccage-ouverture { gap: 10px; }
.saccage-ouverture .so-bas { color: #9a9a9a; }
.saccage-ouverture .so-titre {
  position: relative;
  font: clamp(1.25rem, 8.2vw, 3rem)/1.05 var(--pixel); color: #fff; letter-spacing: 2px;
  animation: saccage-titre .11s steps(1) infinite;
}
/* « DES DONNEES » se pose sous « DESTRUCTION », un cran plus petit et décalé à l'envers :
   une seule ligne ne tiendrait pas en largeur sur un téléphone. */
.saccage-ouverture .so-titre2 {
  font-size: clamp(.9rem, 6vw, 2.1rem);
  animation-direction: reverse;
}
/* Les deux copies mal recalées du titre : le signal n'arrive pas en même temps. */
.saccage-ouverture .so-titre::before,
.saccage-ouverture .so-titre::after {
  content: attr(data-txt);
  position: absolute; inset-inline-start: 0; top: 0; width: 100%;
}
.saccage-ouverture .so-titre::before { color: var(--rouge); transform: translate(-5px, 2px); }
.saccage-ouverture .so-titre::after { color: #00ffff; transform: translate(5px, -2px); opacity: .7; }
@keyframes saccage-ouvre {
  0% { opacity: 1; background: #fff; }
  3% { background: #000; }
  6% { background: #300; }
  9% { background: #000; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes saccage-trame {
  0% { transform: translateY(0); }
  33% { transform: translateY(-3px); }
  66% { transform: translateY(2px); }
}
@keyframes saccage-titre {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(-3px, 0) scaleY(1.06); }
  50% { transform: translate(4px, 1px) scaleY(.94); }
  75% { transform: translate(-1px, -2px) scaleY(1.02); }
}

.saccage-toile { position: fixed; inset: 0; z-index: 900; cursor: crosshair; touch-action: none; }

/* Le grain de l'écran : lignes de balayage, vignette rouge des bords, barre de roulis.
   C'est un calque du navigateur et non un dessin de la toile — peint une fois, composé
   gratuitement ensuite. Repeint sur la toile, il coûtait un million de pixels par image :
   mesuré sur téléphone simulé 4× plus lent, 42 images/s avec, 58 une fois sorti d'ici. */
.saccage-grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 34%, rgba(50,0,0,.3) 72%, rgba(0,0,0,.72) 100%),
    repeating-linear-gradient(rgba(0,0,0,.4) 0 1px, transparent 1px 3px);
}
.saccage-grain::after {
  content: ''; position: absolute; inset-inline: 0; top: -140px; height: 140px;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,220,220,.09), rgba(255,255,255,0));
  animation: saccage-roulis 7.5s linear infinite;
}
@keyframes saccage-roulis { to { transform: translateY(calc(100vh + 280px)); } }

/* HUD */
/* Au-dessus du terminal (902) : sinon le bouton « TAPER LE CODE » passait derrière lui.
   Le calque laisse traverser les clics — seuls ses propres boutons les captent. */
.saccage-hud { position: fixed; inset: 0; z-index: 903; pointer-events: none; font: .5rem var(--pixel); }
/* touch-action: manipulation — un appui reste un appui même si le doigt frémit : sans ça,
   le navigateur pouvait l'interpréter comme un début de défilement et n'émettre aucun clic. */
.saccage-hud button { pointer-events: auto; font: inherit; cursor: pointer; touch-action: manipulation; }
.saccage-barre {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  padding: 10px 14px; background: rgba(0,0,0,.82); border-bottom: 1px solid var(--rouge-nuit);
}
.saccage-jauges { display: flex; flex-direction: column; gap: 3px; }
.saccage-vie, .saccage-carburant, .saccage-devoree { display: block; width: 110px; height: 9px; background: #300; border: 1px solid var(--rouge); }
.saccage-vie b { display: block; height: 100%; background: var(--rouge); transition: width .2s; }
.saccage-carburant { border-color: #884400; background: #221100; }
.saccage-carburant b { display: block; height: 100%; background: #ff8800; }
/* Ce qui reste de la page : quand la barre est pleine, tout a été dévoré et la partie est perdue. */
.saccage-devoree { border-color: #666; background: #111; }
.saccage-devoree b { display: block; height: 100%; background: #9a9a9a; }
.saccage-devoree.critique { border-color: var(--rouge); animation: clignote 1s step-end infinite; }
.saccage-devoree.critique b { background: var(--rouge); }
/* Une seule arme à la fois : un bandeau, pas une rangée de boutons. */
.saccage-arme {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: #190000; border: 1px solid var(--rouge); color: var(--rouge);
}
.saccage-arme b { font-weight: normal; }
.saccage-arme em { font-style: normal; color: #fff; }
.saccage-arme.vide { animation: clignote 1s step-end infinite; }
.saccage-arme.bazooka { border-color: #ffd700; color: #ffd700; background: #241c00; }
.saccage-objectif { color: var(--texte-doux); letter-spacing: 1px; }
.saccage-objectif.alerte { color: var(--rouge); animation: clignote 1s step-end infinite; }
.saccage-objectif.or { color: #ffd700; }
.saccage-quitter { background: #190000; border: 1px solid var(--rouge); color: var(--rouge); padding: 7px 12px; }
.saccage-consigne {
  position: absolute; inset-inline: 0; bottom: 8px; text-align: center;
  color: var(--texte-doux); font-size: .42rem; line-height: 1.8; padding: 0 12px;
}

/* Pendant la cinématique, l'interface s'efface : il ne reste que la scène. */
.saccage-hud.cinema .saccage-barre,
.saccage-hud.cinema .saccage-consigne,
.saccage-hud.cinema .saccage-taper { display: none; }

/* Le bouton qui ouvre le pavé de saisie : il n'apparaît que planté devant le terminal.
   Posé au-dessus des pouces, au milieu : c'est là que le doigt arrive tout seul. */
.saccage-taper {
  position: absolute; inset-inline: 0; bottom: 190px; margin: 0 auto; width: fit-content;
  background: #002200; border: 2px solid #00ff00; color: #00ff00;
  padding: 16px 22px; font-size: .55rem; letter-spacing: 2px;
  box-shadow: 0 0 26px rgba(0, 255, 0, .45);
  animation: saccage-appel 1.2s ease-in-out infinite;
}
@keyframes saccage-appel {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 26px rgba(0, 255, 0, .45); }
  50% { transform: translateY(-5px); box-shadow: 0 0 40px rgba(0, 255, 0, .7); }
}

/* Commandes tactiles : deux pavés, un sous chaque pouce — marcher à gauche, voler à droite.
   Ce sont les PAVÉS qui écoutent le doigt (voir saccage.js) : on glisse de ◀ à ▶ sans lever
   le pouce, comme sur une vraie croix directionnelle. */
/* [hidden] seul ne suffit pas : la règle d'affichage ci-dessous, plus spécifique que celle
   du navigateur, laissait les pouces à l'écran pendant la cinématique et la saisie du code. */
.saccage-doigts[hidden] { display: none; }
.saccage-doigts {
  position: absolute; inset-inline: 0; bottom: 18px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 14px; gap: 10px;
}
.saccage-doigts .sd-pad {
  display: flex; gap: 8px; pointer-events: auto; touch-action: none;
  padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .3);
}
.saccage-doigts .sd-vol { flex-direction: column-reverse; }
.saccage-doigts button {
  min-width: 74px; min-height: 66px; background: rgba(10, 0, 0, .72);
  border: 2px solid var(--rouge); color: var(--rouge);
  font-size: .9rem; border-radius: 10px; touch-action: none; pointer-events: none;
}
.saccage-doigts .sd-saut { color: #ff8800; border-color: #ff8800; background: rgba(40, 20, 0, .72); min-height: 82px; }
/* .actif est posé par le jeu, pas par :active : le doigt peut tenir une touche en dehors du bouton. */
.saccage-doigts button.actif { background: var(--rouge); color: #000; border-color: #fff; }
.saccage-doigts .sd-saut.actif { background: #ff8800; color: #000; }

@media (hover: none) {
  /* Sur téléphone, la barre du haut mangeait presque un quart de l'écran de jeu : jauges
     en ligne, QUITTER réduit à une croix dans le coin, et la consigne suit la barre au lieu
     d'être posée à une hauteur fixe — elle finissait par chevaucher l'objectif sur deux lignes. */
  .saccage-arme { padding: 5px 7px; font-size: .42rem; }
  .saccage-barre { position: relative; gap: 5px 8px; padding: 6px 42px 6px 8px; }
  .saccage-vie, .saccage-carburant, .saccage-devoree { width: 56px; height: 7px; }
  .saccage-jauges { flex-direction: row; gap: 5px; align-items: center; }
  .saccage-objectif { flex-basis: 100%; text-align: center; font-size: .4rem; line-height: 1.6; }
  /* Le sélecteur porte .saccage-hud : sinon la règle générale des boutons du HUD,
     plus spécifique, remet la police et le mot « QUITTER » réapparaît à côté de la croix. */
  .saccage-hud .saccage-quitter {
    position: absolute; top: 5px; inset-inline-end: 5px; padding: 7px 9px; font-size: 0;
  }
  .saccage-hud .saccage-quitter::after { content: '✕'; font-size: .6rem; }
  .saccage-consigne { position: static; bottom: auto; margin-top: 3px; font-size: .38rem; }
}
/* La consigne s'efface d'elle-même une fois lue : l'écran du téléphone est trop petit
   pour garder en permanence un texte qui ne sert que les premières secondes. */
.saccage-hud.rode .saccage-consigne { display: none; }
/* Écran bas (téléphone couché) : les pouces et la barre du haut se marchent dessus. */
@media (hover: none) and (max-height: 460px) {
  .saccage-consigne { display: none; }
  .saccage-doigts button { min-height: 48px; min-width: 62px; }
  .saccage-doigts .sd-saut { min-height: 58px; }
  .saccage-taper { bottom: 150px; }
}

/* Écran de fin */
.saccage-fin {
  touch-action: manipulation;
  position: absolute; inset-block: 0; inset-inline: 0; margin: auto; width: min(400px, 88vw); height: fit-content;
  background: #000; border: 2px solid var(--rouge); padding: 28px 22px; text-align: center;
}
.saccage-fin-titre { color: var(--rouge); font-size: .8rem; line-height: 1.7; margin-bottom: 16px; }
.saccage-fin.gagne { border-color: #00ff00; }
.saccage-fin.gagne .saccage-fin-titre { color: #00ff00; }
.saccage-fin button {
  display: block; width: 100%; margin-top: 10px; padding: 13px;
  background: #000; border: 1px solid var(--rouge); color: var(--rouge);
}
.saccage-fin button:hover { background: var(--rouge); color: #000; }

@media (prefers-reduced-motion: reduce) {
  html.saccage .ecran { animation: none; }
}

/* Le terminal des archives, posé en bas à gauche de la page (il défile avec elle).
   Éteint par défaut : il ne s'allume que quand le personnage est planté devant. */
.saccage-terminal {
  position: absolute; inset-inline-start: 3vw; z-index: 902;
  width: min(300px, 70vw); background: #000; border: 1px solid #3a3a3a;
  padding: 14px; font: .45rem/1.9 var(--pixel);
  opacity: .55; transition: opacity .25s, border-color .25s, box-shadow .25s;
}
.saccage-terminal.proche { opacity: 1; border-color: var(--rouge); box-shadow: 0 0 26px rgba(255, 0, 0, .35); }
.saccage-terminal.pret { border-color: #00ff00; box-shadow: 0 0 30px rgba(0, 255, 0, .3); }
.saccage-terminal.analyse { opacity: 1; border-color: #ffd700; box-shadow: 0 0 34px rgba(255, 215, 0, .4); }
.saccage-terminal-titre { color: var(--rouge); margin-bottom: 6px; }
.saccage-terminal-etat { color: var(--texte-doux); margin-bottom: 10px; min-height: 1.9em; }
.saccage-terminal.pret .saccage-terminal-etat { color: #00ff00; }
.saccage-terminal-saisie { display: flex; align-items: center; gap: 7px; }
.saccage-terminal-saisie label { color: var(--rouge); }
.saccage-terminal-saisie input {
  flex: 1; min-width: 0; background: #0a0000; border: 0; border-bottom: 1px solid #333;
  color: var(--rouge); font: .45rem var(--pixel); padding: 8px 4px; letter-spacing: 3px;
}
.saccage-terminal-saisie input:focus { outline: none; border-bottom-color: var(--rouge); }
.saccage-terminal-saisie input:disabled { color: #444; cursor: not-allowed; }
.saccage-terminal-saisie button {
  background: #190000; border: 1px solid var(--rouge); color: var(--rouge);
  font: inherit; padding: 8px 10px; cursor: pointer;
}
.saccage-terminal-saisie button:hover { background: var(--rouge); color: #000; }
.saccage-terminal-reponse { margin-top: 10px; min-height: 1.9em; white-space: pre-line; }
.saccage-terminal-reponse.ko { color: var(--rouge); animation: clignote 1s step-end 3; }
.saccage-terminal-reponse.ok { color: #00ff00; }
/* L'aide et le bouton FERMER ne servent que dans le pavé de saisie. */
.saccage-terminal-aide, .saccage-terminal-fermer { display: none; }

/* ---- Le pavé de saisie du code ----
   Le terminal quitte la page et vient se poser EN HAUT de l'écran, en grand. En haut, et
   pas au milieu : sur téléphone le clavier logiciel occupe la moitié basse et recouvrirait
   un panneau centré. Le champ passe à 16 px, sinon Safari zoome la page à la mise au point. */
/* Pendant la saisie, la barre du jeu s'efface : le pavé se pose à sa place, en haut. */
html.saccage-saisie .saccage-barre,
html.saccage-saisie .saccage-consigne { display: none; }
html.saccage-saisie .saccage-terminal {
  position: fixed; top: 4vh; inset-inline: 0; margin: 0 auto;
  width: min(440px, 92vw); max-height: 92vh; overflow-y: auto;
  padding: 20px 18px; font-size: .5rem; opacity: 1;
  border: 2px solid #00ff00; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .82), 0 0 44px rgba(0, 255, 0, .4);
}
html.saccage-saisie .saccage-terminal-titre { font-size: .6rem; margin-bottom: 12px; }
html.saccage-saisie .saccage-terminal-saisie { flex-wrap: wrap; gap: 10px; }
html.saccage-saisie .saccage-terminal-saisie input {
  flex: 1 1 100%; font-size: 16px; padding: 14px 10px; letter-spacing: 4px;
  border: 1px solid #00ff00; background: #001400; color: #00ff00; text-transform: uppercase;
}
html.saccage-saisie .saccage-terminal-saisie button {
  flex: 1; padding: 15px; font-size: .55rem; border-color: #00ff00; color: #00ff00; background: #002200;
}
html.saccage-saisie .saccage-terminal-saisie button:hover { background: #00ff00; color: #000; }
html.saccage-saisie .saccage-terminal-aide {
  display: block; margin-top: 12px; font-family: var(--mono); font-size: .8rem;
  line-height: 1.6; color: var(--texte-doux); letter-spacing: 0;
}
html.saccage-saisie .saccage-terminal-fermer {
  display: block; width: 100%; margin-top: 14px; padding: 13px;
  background: #000; border: 1px solid var(--rouge); color: var(--rouge);
  font: .5rem var(--pixel); cursor: pointer;
}
html.saccage-saisie .saccage-terminal-fermer:hover { background: var(--rouge); color: #000; }