/* dev.css — page d'attente « le site fait peau neuve ».
   Tokens et motifs : Design System rév. 2026.07 (docs/Design_System.md dans le
   dépôt principal — ce dossier n'en dépend pas au runtime).

   AUTONOME : styles, script du routeur PCB, polices et images vivent tous ici.
   Le dossier peut être déployé seul comme racine d'un site. La contrepartie est
   que les tokens sont dupliqués depuis css/home.css : un changement de palette
   se répercute à deux endroits.

   Échelle typo alignée sur la refonte 2026.08 de la landing. */

/* ============================================================
   FONTES — self-hostées, pas de CDN (DS §4 / interdit #9)
   Mêmes fichiers que le reste du site. Repli système tant qu'ils
   ne sont pas déposés dans fonts/.
   ============================================================ */
@font-face {
  font-family: 'Sora';
  src: url('fonts/sora-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'B612 Mono';
  src: url('fonts/b612-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'B612 Mono';
  src: url('fonts/b612-mono-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root{
  /* Nuit (primaire) — DS §10 */
  --nuit:#0E141B;
  --panneau:#18202A;
  --ligne:#222B36;
  --texte:#E9EEF3;
  --gris:#8A97A6;
  --ambre:#FFB300;
  --repere:#3A4552;              /* §6 — fiducielles, graduations majeures. Lu par circuit.js. */
  --blanc:#FFFFFF;               /* §2 — blanc logo, le plus lumineux de la vue */

  --sans:'Sora',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'B612 Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --chanfrein:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);   /* §6 */
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}   /* border-radius:0 → interdit #1 */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--nuit);color:var(--texte);
  line-height:1.65;font-size:18px;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ambre);color:var(--nuit)}
/* Focus clavier — anneau ambre (§3 : état transitoire, ne concurrence pas
   la règle « une action ambrée par vue »). */
:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}

.label{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}   /* §4 label d'instrument */

/* ============================================================
   GABARIT — la fiche occupe le haut, la bande circuit comble le reste
   ============================================================ */
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.contenu{flex:0 0 auto;padding:56px 24px 64px}

/* ---------- Readout bar réduite (§7) ---------- */
.bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;width:100%;margin:0 auto;padding:0 24px;height:56px;border-bottom:1px solid var(--ligne)}
/* translateY(-9.5%) recentre l'encre du SVG (≈19 % de vide en haut) */
.identite{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blanc)}
.identite .logo{height:22px;width:auto;display:block;transform:translateY(-9.5%)}
.identite span{color:var(--gris);font-weight:400}
.etat-vue{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* ---------- Feuille de plan (§6) ---------- */
.fiche{position:relative;max-width:1080px;margin:0 auto;border:1px solid var(--ligne);
  padding:44px clamp(24px,5vw,48px) 40px;overflow:hidden}

/* Règle graduée — ticks mineurs /24px (--ligne, 4px), majeurs /96px (--repere, 8px) */
.fiche .regle{position:absolute;top:0;left:0;width:100%;height:8px;display:block;pointer-events:none}
.fiche .regle .tick-mineur{stroke:var(--ligne)}
.fiche .regle .tick-majeur{stroke:var(--repere)}

/* Fiducielles PCB (cercle + croix) — coins opposés, --repere */
.fiduciel{position:absolute;width:16px;height:16px;color:var(--repere);pointer-events:none;z-index:1}
.fiduciel-tl{top:12px;left:12px}
.fiduciel-br{bottom:12px;right:12px}

.fiche-tete{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px}
.numero-panneau,.fiche-ref{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

.kicker{margin-bottom:24px}
h1{font-size:clamp(38px,6.5vw,68px);font-weight:700;letter-spacing:-.025em;line-height:1.05;max-width:16ch}   /* §4 Display */
.sub{font-size:19px;color:var(--texte);margin-top:20px;max-width:48ch}   /* hiérarchie par luminance, pas par taille */
/* Motto — mono, casse d'origine, jamais traduit (§1) */
.baseline{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--gris);margin-top:24px}

/* CTA ambre — l'unique action ambrée de la vue (§3). Parallélogramme (§6). */
.btn-primary{display:inline-flex;align-items:center;min-height:44px;background:var(--ambre);color:var(--nuit);
  clip-path:var(--chanfrein);font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:0 32px;margin-top:40px;transition:background-color .15s ease-out}
.btn-primary:hover{background:var(--texte)}
.btn-primary:focus-visible{background:var(--texte)}   /* le clip-path peut rogner l'outline sur certains navigateurs */
.btn-primary.lit{text-transform:none;letter-spacing:.02em}   /* littéral technique (e-mail) : jamais de casse forcée (§4) */

/* Cartouche intégré au cadre (§7) */
.fiche-cartouche{margin-top:44px;padding-top:20px;border-top:1px solid var(--ligne);
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;
  color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 16px}
.fiche-cartouche .sep{color:var(--repere)}

/* ---------- Bande circuit : comble le bas de l'écran ---------- */
.bande-circuit{position:relative;flex:1 1 auto;min-height:140px;overflow:hidden}
.bande-circuit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 90%);mask-image:linear-gradient(to bottom,transparent 0%,#000 90%)}
.bande-circuit .circuit{position:absolute;top:0;left:0;width:100%;height:calc(100% + 20vh);display:block}

@media (max-width:640px){
  .contenu{padding:32px 16px 40px}
  .fiche{padding:36px 20px 32px}
  .fiche-tete{margin-bottom:32px}
  .btn-primary{margin-top:32px;padding:0 24px;width:100%;justify-content:center}
  .bande-circuit{min-height:100px}
}
@media (max-width:520px){.identite span{display:none}}

/* ============================================================
   INTRO — séquence de boot d'instrument (1×/session).
   Exception assumée au §7 « rien ne bouge sans interaction » : un auto-test.
   Logo BLANC (§2, jamais recoloré) ; seul le caret est ambre (§3).
   ============================================================ */
html.intro-actif{overflow:hidden}          /* scroll verrouillé le temps de l'intro */
.intro{display:none}
.intro-actif .intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9999;background:var(--nuit);
  animation:intro-sortie .5s ease-out 3s forwards;        /* barre pleine à 2,5 s → pause 500 ms → sortie à 3 s */
}
.intro-logo{display:flex;flex-direction:column;align-items:flex-start;gap:18px;opacity:0;animation:intro-entree .5s ease-out forwards}
.intro-svg{width:min(88vw,660px);height:auto;fill:var(--blanc)}
/* Sous-titre « machine à écrire » : mono, casse d'origine (§1), caret ambre */
.intro-sub{font-family:var(--mono);font-size:16px;line-height:1;letter-spacing:0;color:var(--gris);white-space:nowrap;display:inline-flex;align-items:center;height:20px}   /* hauteur fixe → aucun décalage quand la frappe commence */
.intro-caret{display:inline-block;width:8px;height:17px;margin-left:4px;background:var(--ambre);animation:intro-caret .8s step-end infinite}
/* La barre se dessine le long de son chemin (effet « serpent ») via un masque tracé, ~2 s. */
.intro-serpent-trace{stroke-dasharray:1;stroke-dashoffset:1;animation:intro-serpent 2s cubic-bezier(0.76,0,0.24,1) .5s forwards}
@keyframes intro-entree{to{opacity:1}}
@keyframes intro-serpent{to{stroke-dashoffset:0}}
@keyframes intro-caret{50%{opacity:0}}
@keyframes intro-sortie{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .intro{display:none !important}
}