/* Matière Première — feuille de style de l'univers (v0, prototype)
   Principe : la pièce est sombre, le texte est papier, la couleur est une lumière.
   Une seule lumière par pièce. Jamais de texte en couleur, jamais d'aplat coloré. */

@font-face{font-family:'Inter';src:url(fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  /* la pièce */
  --encre:#121211; --encre-2:#1A1A19; --encre-3:#232321;
  --papier:#F7F5F0; --papier-2:rgba(247,245,240,.66); --papier-3:rgba(247,245,240,.54);
  --trait:rgba(247,245,240,.12); --trait-fort:rgba(247,245,240,.24);
  /* les trois lumières */
  --phosphore:#21C46B; --tungstene:#FFB05C; --cathodique:#6FA8FF;
  /* la lumière de la pièce (une seule). Les accents du logo, en phosphore, sont la signature : ils restent partout. */
  --lumiere:var(--phosphore);
  /* rythme : 1U = une unité de rack */
  --u:44px; --gout:clamp(16px,3vw,32px); --large:min(1240px,100vw - 2*var(--gout));
  --allume:cubic-bezier(.2,.7,.2,1);
}
[data-lumiere=tungstene]{--lumiere:var(--tungstene)}
[data-lumiere=cathodique]{--lumiere:var(--cathodique)}
[data-lumiere=phosphore]{--lumiere:var(--phosphore)}

*{box-sizing:border-box}
html{background:var(--encre);color:var(--papier);-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 Inter,system-ui,-apple-system,sans-serif;min-height:100vh}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.mono,.plaque,.lbl{font-family:'Plex Mono',ui-monospace,Menlo,monospace}
.lbl{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--papier-3)}
.cadre{width:var(--large);margin-inline:auto}
:focus-visible{outline:1.5px solid var(--papier);outline-offset:3px}

/* ---------- la régie (en-tête) ---------- */
.regie{position:sticky;top:0;z-index:20;background:rgba(18,18,17,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.regie .cadre{display:flex;align-items:center;gap:28px;height:64px}
.regie .mot{height:18px;width:auto;flex:none}
@media (max-width:700px){.regie .cadre{gap:16px}.regie .mot{height:14px}}
.canaux{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.canaux a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;font:400 10.5px/1 'Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--papier-2);white-space:nowrap}
.canaux a b{font-weight:400;color:var(--papier-3)}
.canaux a:hover{color:var(--papier)}
.canaux a[aria-current]{color:var(--papier);background:var(--encre-3)}
.canaux a[aria-current]::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lumiere);box-shadow:0 0 8px var(--lumiere)}

/* ---------- titres ---------- */
.tete{padding:clamp(48px,9vw,120px) 0 clamp(28px,5vw,56px)}
.tete h1{font:800 clamp(40px,7vw,92px)/.94 Inter,sans-serif;letter-spacing:-.045em;margin:14px 0 0}
.tete p.chapo{max-width:38em;font-size:clamp(16px,1.6vw,19px);color:var(--papier-2);margin:22px 0 0}
.filet{height:1px;background:var(--trait);border:0;margin:0}

/* ---------- la plaque (code d'appareil, gravure) ---------- */
.plaque{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--trait-fort);border-radius:3px;padding:5px 9px;color:var(--papier-2)}
.plaque b{font-weight:600;color:var(--papier)}

/* ---------- la DEL (l'état, et la seule couleur) ---------- */
.del{display:inline-flex;align-items:center;gap:9px;font:400 10.5px/1 'Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--papier-2)}
.del i{width:7px;height:7px;border-radius:50%;background:var(--encre-3);box-shadow:inset 0 0 0 1px var(--trait-fort)}
.del.on i{background:var(--lumiere);box-shadow:0 0 10px var(--lumiere)}
.del.capricieux i{background:var(--lumiere);animation:capricieux 3.2s steps(1) infinite}
@keyframes capricieux{0%,86%{opacity:1}88%{opacity:.2}90%{opacity:1}93%{opacity:.35}95%,100%{opacity:1}}

/* ---------- le rack (le parc) ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.filtres button{font:400 10.5px/1 'Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--papier-2);background:none;border:1px solid var(--trait-fort);border-radius:999px;padding:9px 14px;cursor:pointer}
.filtres button[aria-pressed=true]{color:var(--encre);background:var(--papier);border-color:var(--papier)}
.rack{border-top:1px solid var(--trait)}
.unite{position:relative;display:grid;grid-template-columns:92px 120px 1fr 1.25fr 120px;gap:22px;align-items:center;min-height:calc(var(--u)*2);padding:14px 10px;border-bottom:1px solid var(--trait);text-decoration:none;transition:background .3s}
.unite::before,.unite::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--trait-fort)}
.unite::before{left:-18px}.unite::after{right:-18px}
.unite:hover{background:var(--encre-2)}
.unite .vignette{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--encre-3)}
.unite .vignette img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) brightness(.78) contrast(1.05);transition:filter .76s var(--allume)}
.unite:hover .vignette img,.unite:focus-visible .vignette img{filter:none}
.unite .nom{font:800 22px/1.05 Inter,sans-serif;letter-spacing:-.03em}
.unite .fab{display:block;margin-top:6px;font:400 11px/1.3 'Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-3)}
.unite .q{color:var(--papier-2);font-size:15px;line-height:1.45}
.unite .an{font:400 12px/1.2 'Plex Mono',monospace;color:var(--papier-3);text-align:right}
.reserve{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 10px;border-bottom:1px dashed var(--trait-fort);color:var(--papier-3);font:400 11px/1.5 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:820px){
  .unite{grid-template-columns:86px 1fr;grid-template-areas:"v n" "v q" "p p";gap:6px 16px}
  .unite .vignette{grid-area:v}.unite .titre{grid-area:n}.unite .q{grid-area:q;font-size:14px}.unite .pied{grid-area:p;display:flex;justify-content:space-between;margin-top:8px}
  .unite .plaque-col,.unite .an{display:none}
  .unite::before,.unite::after{display:none}
}

/* ---------- le dossier (fiche Matière Première) ---------- */
.dossier{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start;padding:clamp(36px,6vw,80px) 0}
@media (max-width:900px){.dossier{grid-template-columns:1fr}}
.dossier h1{font:800 clamp(44px,7.5vw,104px)/.9 Inter,sans-serif;letter-spacing:-.05em;margin:18px 0 0}
.dossier .question{font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--papier);margin:26px 0 0;max-width:22em}
.rallumage{position:relative;margin:0;border-radius:3px;overflow:hidden;background:#0b0b0a}
.rallumage img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) sepia(.4) brightness(.62) contrast(1.1);transition:filter 1.2s var(--allume)}
.rallumage::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--allume);
  background:radial-gradient(60% 55% at var(--sx,30%) var(--sy,22%),color-mix(in srgb,var(--lumiere) 32%,transparent),transparent 70%);mix-blend-mode:screen}
.rallumage.allumee img{filter:grayscale(.15) brightness(1) contrast(1.02)}
.rallumage.allumee::after{opacity:1}
.rallumage figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;gap:16px;padding:16px 18px;background:linear-gradient(transparent,rgba(11,11,10,.92) 55%);font:400 10.5px/1.45 'Plex Mono',monospace;letter-spacing:.1em;color:var(--papier-2)}
.interrupteur{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--trait-fort);border-radius:999px;padding:8px 14px 8px 10px;color:var(--papier);font:400 10.5px/1 'Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;flex:none}
.interrupteur i{width:8px;height:8px;border-radius:50%;border:1px solid var(--papier-2)}
.interrupteur[aria-pressed=true] i{background:var(--lumiere);border-color:var(--lumiere);box-shadow:0 0 10px var(--lumiere)}

.puces{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 0;padding:0;list-style:none}
.puces li{font:400 11px/1 'Plex Mono',monospace;letter-spacing:.08em;color:var(--papier-2);border:1px solid var(--trait);border-radius:999px;padding:8px 12px}

.sections{display:grid;gap:0;border-top:1px solid var(--trait)}
.section{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--trait)}
@media (max-width:760px){.section{grid-template-columns:1fr;gap:12px}}
.section h2{font:400 11px/1.4 'Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--papier-3);margin:4px 0 0}
.temps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:760px){.temps{grid-template-columns:1fr}}
.temps div b{display:block;font:800 22px/1 Inter,sans-serif;letter-spacing:-.03em;margin-bottom:10px}
.temps div span{color:var(--papier-2);font-size:15px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 28px}
.kv div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dotted var(--trait-fort);font-size:14px}
.kv div span:first-child{font:400 11px/1.6 'Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-3)}
.kv div span:last-child{text-align:right;color:var(--papier-2)}
.vide{border:1px dashed var(--trait-fort);border-radius:3px;padding:22px;color:var(--papier-2);font-size:15px}
.vide .lbl{display:block;margin-bottom:8px}
.bouton{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--papier);border-radius:999px;padding:12px 18px;font:400 11px/1 'Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--papier);background:none;cursor:pointer}
.bouton:hover{background:var(--papier);color:var(--encre)}
.bouton.plein{background:var(--papier);color:var(--encre)}

/* ---------- pied ---------- */
.pied-site{border-top:1px solid var(--trait);margin-top:clamp(48px,8vw,110px)}
.pied-site .cadre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding:26px 0 34px;font:400 10.5px/1.6 'Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--papier-3)}

/* ---------- mouvement : rien n'apparaît, tout s'allume ---------- */
@keyframes allume{0%{opacity:0}7.9%{opacity:.7}15.8%{opacity:.15}26.3%{opacity:.75}34.2%{opacity:.45}55%{opacity:.88}75%{opacity:.97}100%{opacity:1}}
.s-allume{opacity:0}
.s-allume.on{animation:allume .76s linear forwards}
@media (prefers-reduced-motion:reduce){.s-allume{opacity:1}.s-allume.on{animation:none}*{transition:none!important;animation:none!important}}

/* ---------- ajustements téléphone ---------- */
@media (max-width:900px){
  .dossier .rallumage{order:-1}
  .rallumage figcaption > span{display:none}
  .rallumage figcaption{justify-content:flex-end}
}
@media (max-width:700px){.regie .mot{height:13px}.canaux a{padding:8px 9px}}

.unite.court{grid-template-columns:92px 120px 1fr 1.25fr}
@media (max-width:820px){.unite.court{grid-template-columns:86px 1fr}}
.evitement{position:absolute;left:-999px;top:8px;z-index:30;background:var(--papier);color:var(--encre);padding:8px 12px;font:400 11px/1 'Plex Mono',monospace}
.evitement:focus{left:8px}
.panne{padding:24px 10px;color:var(--papier-2)}