/* ══════════════════════════════════════════════════════════════
   octavealdebert.com : feuille partagée entre les pages.
   Tokens : source unique de vérité, voir design.md (privé).
   Aucune valeur hors de ces échelles.
   ══════════════════════════════════════════════════════════════ */

/* Fontes auto-hébergées (sous-ensemble latin, couvre le français).
   Archivo et Source Serif 4 sont des fontes variables : un fichier par famille. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url("/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/plex-mono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/plex-mono-500-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/fonts/source-serif-4-var-latin.woff2") format("woff2");
}

:root{
  /* Couleurs : palette Okabe–Ito. Bleu = calcul, vermillon = essai.
     Les accents sont des couleurs de tracé : ils échouent en texte
     courant (4,45:1 et 3,32:1). Pour du texte, utiliser les variantes. */
  --ground:#EBEEF1;
  --ground-deep:#E1E5EA;
  --surface:#F6F8F9;
  --ink:#14181C;
  --ink-soft:#2A3138;
  --muted:#5C6670;
  --rule:#CBD3DA;         /* décoratif seulement (1,30:1) */
  --rule-strong:#748493;  /* bordures interactives (3,30:1) */
  --calcul:#0072B2;
  --essai:#D55E00;
  --calcul-text:#00588A;  /* 6,53:1 */
  --essai-text:#A34800;   /* 5,18:1 */

  /* Familles */
  --display:"Archivo",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Tailles, régime micro (données techniques) */
  --t-axis:0.5625rem;
  --t-micro:0.6875rem;
  --t-xs:0.75rem;
  --t-sm:0.8125rem;
  /* Tailles, régime texte (raison de 1,2 environ) */
  --t-base:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  --t-md:1.1875rem;
  --t-lg:1.4375rem;
  --t-display:clamp(2.0625rem,1.35rem + 3vw,3.4375rem);
  --t-contact:clamp(1.4375rem,1rem + 1.4vw,2rem);

  /* Espacements, base 4 px */
  --s-1:0.25rem;
  --s-2:0.5rem;
  --s-3:0.75rem;
  --s-4:1rem;
  --s-5:1.5rem;
  --s-6:2rem;
  --s-7:2.5rem;
  --s-8:4rem;
  --s-9:6rem;

  /* Grille */
  --gutter:clamp(var(--s-4),5vw,var(--s-8));
  --measure:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ── Bandeau de tête ──────────────────────── */
.masthead{border-bottom:1px solid var(--rule)}
.masthead__inner{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  align-items:baseline;justify-content:space-between;
  padding-block:var(--s-4);
}
.masthead__name{
  font-family:var(--display);font-weight:800;
  font-size:var(--t-base);letter-spacing:-.01em;
}
a.masthead__name{color:var(--ink);text-decoration:none}
.masthead__nav{
  display:flex;gap:var(--s-5);
  font-family:var(--mono);font-size:var(--t-xs);
}
.masthead__nav a{color:var(--muted);text-decoration:none;padding-block:var(--s-1)}
.masthead__nav a:hover{color:var(--ink)}
.masthead__nav a[aria-current="page"]{
  color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--essai);
}

/* ── Héros (accueil) ──────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(var(--s-6),5vw,var(--s-8));
  align-items:center;
  padding-block:clamp(var(--s-7),7vw,var(--s-9));
}
.hero__title{
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-display);
  line-height:1.02;
  letter-spacing:-.032em;
  margin:var(--s-4) 0 0;
  text-wrap:balance;
}
/* Exception documentée : --essai en grand texte (3,32:1, seuil de 3:1
   au-delà de 24 px). Ne pas reproduire ailleurs. */
.hero__title em{font-style:normal;color:var(--essai)}
.hero__lede{
  margin:var(--s-5) 0 0;
  max-width:42ch;
  color:var(--ink-soft);
}

/* ── Figure : réponse en fréquence ────────── */
.plot{margin:0}
.plot__frame{
  background:var(--surface);
  border:1px solid var(--rule);
  padding:var(--s-2) var(--s-2) var(--s-1);
}
.plot svg{display:block;width:100%;height:auto}
.grid-line{stroke:var(--rule);stroke-width:1}
.axis-line{stroke:var(--ink);stroke-width:1}
.axis-label{font-family:var(--mono);font-size:var(--t-axis);fill:var(--muted)}
.axis-title{font-family:var(--mono);font-size:var(--t-axis);fill:var(--ink);letter-spacing:.08em}
.trace{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.trace--essai{stroke:var(--essai)}
.trace--calcul{stroke:var(--calcul);stroke-dasharray:5 3}

.plot__bar{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  align-items:center;justify-content:space-between;
  margin-top:var(--s-3);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
}
.legend{display:flex;gap:var(--s-4);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:var(--s-2)}
.swatch{width:16px;height:0;border-top-width:2px;flex:none}
.swatch--essai{border-top:2px solid var(--essai)}
.swatch--calcul{border-top:2px dashed var(--calcul)}
.replay{
  font:inherit;font-family:var(--mono);font-size:var(--t-xs);
  background:none;border:1px solid var(--rule-strong);color:var(--muted);
  padding:var(--s-1) var(--s-3);cursor:pointer;
}
.replay:hover{border-color:var(--ink);color:var(--ink)}
.readout{color:var(--ink);font-weight:500}
.readout b{color:var(--calcul-text);font-weight:500;font-variant-numeric:tabular-nums}
.plot__caption{
  margin:var(--s-3) 0 0;font-family:var(--mono);font-size:var(--t-micro);
  line-height:1.5;color:var(--muted);
}
.plot__caption a{color:inherit;border-bottom:1px solid var(--rule-strong);text-decoration:none}
.plot__caption a:hover{color:var(--ink);border-bottom-color:currentColor}

/* ── Sections ─────────────────────────────── */
.band{border-top:1px solid var(--rule);padding-block:clamp(var(--s-7),5vw,var(--s-8))}
.band__title{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-lg);letter-spacing:-.015em;line-height:1.25;
  margin:var(--s-4) 0 var(--s-6);
}
.cards{
  display:grid;gap:clamp(var(--s-5),3vw,var(--s-7));
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.card h3{
  font-family:var(--display);font-weight:700;font-size:var(--t-base);
  margin:0 0 var(--s-2);letter-spacing:-.01em;
}
.card p{margin:0;font-size:var(--t-base);color:var(--ink-soft)}
.card--calcul{border-top:2px solid var(--calcul);padding-top:var(--s-4)}
.card--essai{border-top:2px solid var(--essai);padding-top:var(--s-4)}
.card--both{
  padding-top:var(--s-4);
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--calcul),var(--essai)) 1;
}

.stack{
  display:grid;gap:var(--s-5) var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  font-family:var(--mono);font-size:var(--t-sm);
}
.stack h3{
  font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 var(--s-2);
}
.stack ul{margin:0;padding:0;list-style:none}
.stack li{padding:var(--s-1) 0;border-bottom:1px dotted var(--rule)}

.more{margin:var(--s-6) 0 0;font-family:var(--mono);font-size:var(--t-sm)}
.more a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--essai)}
.more a:hover{color:var(--essai-text)}

.contact__line{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-contact);
  letter-spacing:-.02em;margin:var(--s-4) 0 0;
}
.contact__line a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--essai)}
.contact__line a:hover{color:var(--essai-text)}
.contact__note{margin:var(--s-4) 0 0;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);max-width:56ch}

footer{border-top:1px solid var(--rule);background:var(--ground-deep)}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:space-between;
  padding-block:var(--s-5);
  font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);
}
.footer__inner a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.footer__inner a:hover{color:var(--ink);border-bottom-color:currentColor}

/* ── Page travaux ─────────────────────────── */
.pagehead{padding-block:clamp(var(--s-7),6vw,var(--s-8)) 0}
.pagehead__title{
  font-family:var(--display);font-weight:800;
  font-size:var(--t-display);line-height:1.05;letter-spacing:-.032em;
  margin:var(--s-4) 0 0;text-wrap:balance;
}
.pagehead p{max-width:68ch;color:var(--ink-soft)}

.projmenu__label{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:var(--s-6) 0 0;
}
.projmenu{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin:var(--s-2) 0 0;padding:0;list-style:none;
}
.projmenu a{
  display:inline-block;
  font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule-strong);
  padding:var(--s-1) var(--s-3);
}
.projmenu a:hover{border-color:var(--ink);color:var(--ink)}
.projmenu a.is-active{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.badge{
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule);padding:0 var(--s-2);
  vertical-align:middle;white-space:nowrap;
}

.case{border-top:1px solid var(--rule);padding-block:clamp(var(--s-6),4vw,var(--s-7))}
.case[hidden]{display:none}
.case__title{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-lg);letter-spacing:-.015em;line-height:1.25;
  margin:var(--s-3) 0 var(--s-4);
}
.case h3{
  font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:var(--s-6) 0 var(--s-2);
}
.case p{max-width:70ch;margin:var(--s-3) 0;color:var(--ink-soft)}

.datatable{
  border-collapse:collapse;
  font-family:var(--mono);font-size:var(--t-sm);
  margin:var(--s-4) 0;
  font-variant-numeric:tabular-nums;
}
.datatable th,.datatable td{
  padding:var(--s-2) 0 var(--s-2) var(--s-6);
  text-align:right;
  border-bottom:1px dotted var(--rule);
}
.datatable th:first-child,.datatable td:first-child{padding-left:0;text-align:left}
.datatable thead th{
  font-weight:500;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule-strong);
}
.datatable .col-calcul{color:var(--calcul-text)}
.datatable .col-essai{color:var(--essai-text)}

/* Figures des études de cas.
   Les SVG sont produits par les scripts de production des projets et
   tokenisés : aucune couleur en dur, chaque teinte est un var(--token)
   avec repli. Provenance : public/img/index.json. */
.figrow{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  margin:var(--s-5) 0;
}
.fig{margin:0}
.fig img,
.fig svg{
  display:block;width:100%;height:auto;
  background:var(--surface);
  border:1px solid var(--rule);
  padding:var(--s-3);
}
/* La figure vedette est insérée en SVG inline plutôt qu'en <img> :
   elle hérite alors des variables de couleur et des fontes de la page,
   donc changer un token ici la reteinte sans rien régénérer. */
.fig--inline svg text{font-family:var(--mono)}
.fig figcaption{
  margin-top:var(--s-2);
  font-family:var(--mono);font-size:var(--t-micro);
  line-height:1.5;color:var(--muted);
}

.wip{
  font-family:var(--mono);font-size:var(--t-xs);
  color:var(--muted);line-height:1.5;
  border:1px dashed var(--rule-strong);
  padding:var(--s-3) var(--s-4);
  max-width:60ch;
}

/* Sortie d'étude de cas : retour au sommaire ou étude suivante.
   Même langage que le menu (.projmenu a) : mono, bordure interactive. */
.case__nav{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px dotted var(--rule);
}
.case__nav a{
  display:inline-block;
  font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule-strong);
  padding:var(--s-1) var(--s-3);
}
.case__nav a:hover{border-color:var(--ink);color:var(--ink)}

/* Décalage de 3 px prescrit par design.md §5 (valeur propre au focus,
   volontairement hors échelle d'espacement). */
a:focus-visible,button:focus-visible{outline:2px solid var(--calcul);outline-offset:3px}

/* Point de rupture unique : 800 px (les media queries
   n'acceptent pas var(), la valeur est donc écrite en clair). */
@media (max-width:800px){
  .hero{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* À l'impression, les études de cas masquées par le menu de la page
   travaux redeviennent toutes visibles : le papier reçoit le document
   complet, quel que soit l'état du menu à l'écran. */
@media print{
  .case[hidden]{display:block}
}