/* ==========================================================================
   EIA CONCEPT — Système de design
   Source unique de vérité pour l'ensemble du site et de la plateforme SIL-01.
   Direction issue du projet Claude Design « EIA Concept futuriste chaleureuse ».

   Sommaire
   01. Jetons (couleur, typographie, espacement, élévation)
   02. Réinitialisation et bases
   03. Typographie
   04. Grille et sections
   05. Composants — boutons, formulaires, cartes, tags, tableaux
   06. Composants signature — kicker, blueprint, liste-offres, stats, étapes
   07. En-tête, navigation, pied de page
   08. Utilitaires
   09. Responsive
   10. Impression
   ========================================================================== */

/* ── 01. Jetons ─────────────────────────────────────────────────────────── */
:root {
  /* Fond et texte — papier chaud, encre chaude. */
  --color-bg:            #fcfbf9;
  --color-surface:       #f3efe9;
  --color-surface-2:     #ece6de;
  --color-text:          #14110e;
  --color-text-strong:   #100d0b;
  --color-divider:       color-mix(in srgb, #14110e 14%, transparent);
  --color-divider-strong:color-mix(in srgb, #14110e 26%, transparent);

  /* Accent terracotta — rigueur industrielle, pas de vert générique. */
  --color-accent:        #b8400f;
  --color-accent-2:      #a1521f;
  --color-accent-100:    #fdf1e8;
  --color-accent-200:    #f9dcc5;
  --color-accent-300:    #f0bd97;
  --color-accent-400:    #e69c69;
  --color-accent-500:    #d8783d;
  --color-accent-600:    #a03509;
  --color-accent-700:    #84300c; /* 8,5:1 sur --color-bg — couleur des liens */
  --color-accent-800:    #5d240c;
  --color-accent-900:    #1c1411;

  --color-neutral-100:   #f6f3ef;
  --color-neutral-200:   #e9e4dc;
  --color-neutral-300:   #d6cfc5;
  --color-neutral-400:   #b3aaa0;
  --color-neutral-500:   #948b82;
  --color-neutral-600:   #787069; /* 4,7:1 sur --color-bg — plancher AA */
  --color-neutral-700:   #57504a; /* 7,7:1 sur --color-bg */
  --color-neutral-800:   #38322d;
  --color-neutral-900:   #221d19;

  /* Inversion — sections sombres (conversion, pied de page). */
  --color-ink:           #17130f;
  --color-ink-deep:      #0f0c0a;
  --color-on-ink:        #f7f4f0;
  --color-on-ink-muted:  #c8bcb0;
  --color-on-ink-faint:  #a89b8e;
  --color-on-ink-accent: #e0925c;

  /* Statuts — utilisés par la plateforme SIL-01. */
  --color-ok:            #2f6b3f;
  --color-ok-bg:         #e8f2e9;
  --color-warn:          #8a5a08;
  --color-warn-bg:       #fbf1dc;
  --color-danger:        #a3231a;
  --color-danger-bg:     #fbe9e7;

  /* Typographie */
  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading-weight: 600;

  /* Échelle typographique — ratio ~1,25 ancré sur 17px. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 17px;
  --text-md:   19px;
  --text-lg:   22px;
  --text-xl:   27px;
  --text-2xl:  34px;
  --text-3xl:  44px;
  --text-4xl:  52px;
  --text-5xl:  clamp(40px, 6.4vw, 84px);
  --label:     11px; /* pastille mono capitale */

  /* Espacement — pas de 8px, échelle géométrique. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 56px;
  --space-9: 80px;  --space-10: 128px;

  --measure: 1280px;   /* largeur de la grille éditoriale */
  --gutter: 40px;
  --section-y: 128px;

  --radius: 0;         /* le système est carré : objets de plan, pas de widgets */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #221d19 12%, transparent);
  --shadow-md: 0 4px 14px color-mix(in srgb, #221d19 14%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #221d19 18%, transparent);

  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 180ms;
}

/* ── 02. Réinitialisation et bases ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }

/* Le focus est toujours visible — critère d'acceptation du brief. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}
::selection { background: var(--color-accent-200); color: var(--color-text-strong); }

/* Lien d'évitement. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink); color: var(--color-on-ink);
  font-family: var(--font-heading); font-size: var(--text-sm);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── 03. Typographie ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-text-strong);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
  /* Jamais de dégradé sur un titre : c'est le défaut d'origine du site. */
  background: none;
}
h1 { font-size: var(--text-5xl); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--text-4xl); line-height: 1.06; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-600); }

strong, b { font-weight: 600; }
small { font-size: var(--text-sm); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

.lede { font-size: var(--text-md); color: var(--color-neutral-700); }
.muted { color: var(--color-neutral-700); }
.faint { color: var(--color-neutral-600); }
.mono { font-family: var(--font-mono); }

/* Pastille mono capitale — le repère de numérotation du système. */
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0;
}
.kicker-accent { color: var(--color-accent); }

/* Lien fléché — le seul « bouton tertiaire » du système. */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-base);
  text-decoration: none; color: var(--color-accent-700);
}
.arrow-link::after { content: "→"; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ── 04. Grille et sections ─────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.section { border-bottom: 1px solid var(--color-divider); }
.section > .wrap { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-tight > .wrap { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.section-surface { background: var(--color-surface); }
.section-ink { background: var(--color-ink); color: var(--color-on-ink); border-bottom: 0; }

/* Grille éditoriale 12 colonnes — l'ossature de toutes les mises en page. */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.c1  { grid-column: 1 / span 1; }   .c1-3 { grid-column: 1 / span 3; }
.c2-3{ grid-column: 2 / span 3; }   .c4-5 { grid-column: 4 / span 5; }
.c4-6{ grid-column: 4 / span 6; }   .c4-8 { grid-column: 4 / span 8; }
.c4-9{ grid-column: 4 / span 9; }   .c5-4 { grid-column: 5 / span 4; }
.c9-2{ grid-column: 9 / span 2; }   .c10-3{ grid-column: 10 / span 3; }
.c11-2{grid-column: 11 / span 2; }  .c12  { grid-column: 12 / span 1; }
.c1-6{ grid-column: 1 / span 6; }   .c8-5 { grid-column: 8 / span 5; }
.c1-12{grid-column: 1 / span 12; }  .c7-6 { grid-column: 7 / span 6; }

/* En-tête de section : pastille à gauche, titre sur la grille de droite. */
.section-head { margin-bottom: var(--space-9); align-items: start; }
.section-head .kicker { padding-top: 10px; }

/* Colonnes égales. */
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-9); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
.stack  { display: grid; gap: var(--space-4); }
.stack-lg { display: grid; gap: var(--space-6); }

/* ── 05. Composants ─────────────────────────────────────────────────────── */

/* Boutons — carrés, hairline, jamais d'ombre portée. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 46px; padding: 0 var(--space-5);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--text-sm); line-height: 1; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: var(--radius);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--color-accent); border-color: var(--color-accent); color: #fffdfb;
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fffdfb; }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.btn-ghost { border-color: transparent; color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-lg { height: 54px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-sm { height: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn-block { width: 100%; }
/* Sur fond sombre. */
.on-ink .btn-secondary { border-color: color-mix(in srgb, var(--color-on-ink) 32%, transparent); color: var(--color-on-ink); }
.on-ink .btn-secondary:hover { background: color-mix(in srgb, var(--color-on-ink) 10%, transparent); color: var(--color-on-ink); }

/* Formulaires. */
.field { display: block; }
.field > label, .label {
  display: block; font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 6px;
}
.input, .select, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: var(--text-sm); font-family: var(--font-body);
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider-strong); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input:hover, .select:hover { border-color: var(--color-neutral-600); }
.input:focus-visible, .select:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.6; }
.input::placeholder { color: var(--color-neutral-500); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.field-error { display: none; margin: 5px 0 0; font-size: var(--text-xs); color: var(--color-danger); }
.field-error[data-shown] { display: block; }
.field-hint { margin: 5px 0 0; font-size: var(--text-xs); color: var(--color-neutral-600); }

/* Sur fond sombre. */
.on-ink .field > label, .on-ink .label { color: var(--color-on-ink-muted); }
.on-ink .input, .on-ink .select, .on-ink textarea.input {
  background: #221c17; color: var(--color-on-ink);
  border-color: color-mix(in srgb, var(--color-on-ink) 24%, transparent);
}
.on-ink .input::placeholder { color: var(--color-on-ink-faint); }
.on-ink .input:hover { border-color: color-mix(in srgb, var(--color-on-ink) 45%, transparent); }
.on-ink .input:focus-visible { border-color: var(--color-on-ink-accent); }
.on-ink .field-hint, .on-ink .muted { color: var(--color-on-ink-faint); }
.on-ink a { color: var(--color-on-ink-accent); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: #fffdfb; }
.on-ink :focus-visible { outline-color: var(--color-on-ink-accent); }

/* Détails repliables — « Précisez votre contexte ». */
.disclosure { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.disclosure > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-accent-700);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+"; font-family: var(--font-mono); font-size: var(--text-base); }
.disclosure[open] > summary::before { content: "−"; }
.disclosure > .disclosure-body { padding-top: var(--space-5); }

/* Cartes. */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius);
}
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-xl); line-height: 1.12; margin: 0; }
.card-body { margin: 0; font-size: var(--text-sm); color: var(--color-neutral-700); flex: 1; }

/* Tags. */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius);
}
.tag-accent  { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-900); }
.tag-outline { border: 1px solid var(--color-divider-strong); color: var(--color-neutral-700); }
.tag-ok      { background: var(--color-ok-bg); color: var(--color-ok); }
.tag-warn    { background: var(--color-warn-bg); color: var(--color-warn); }
.tag-danger  { background: var(--color-danger-bg); color: var(--color-danger); }

/* Tableaux. */
/* Un tableau plus large que l'écran défile — encore faut-il que le lecteur
   le sache. Sans indice, la dernière colonne passe simplement inaperçue.
   Le dégradé n'apparaît que lorsque le défilement est réellement possible,
   et disparaît une fois arrivé au bout. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
}
.table-scroll[data-defile] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}
.table-scroll[data-defile="fin"] {
  -webkit-mask-image: none;
          mask-image: none;
}
.table-hint {
  display: none;
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
}
.table-scroll[data-defile] + .table-hint { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .table-scroll { scroll-behavior: smooth; }
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table caption { text-align: left; font-size: var(--text-xs); color: var(--color-neutral-600); padding-bottom: var(--space-3); }
.table th {
  text-align: left; font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider-strong); white-space: nowrap;
}
.table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0; vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bandeau de preuve — la barre de certification sous le hero. */
.proofbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7);
  padding: var(--space-5) 0;
  font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
}
.proofbar > .is-lead { color: var(--color-accent-700); }

/* ── 06. Composants signature ───────────────────────────────────────────── */

/* Cadre « plan technique » — marques de repérage aux quatre angles. */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px; pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Fond quadrillé discret — rappel du papier millimétré. */
.gridlines { position: relative; overflow: hidden; }
.gridlines::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
  background-size: 80px 100%;
}
.gridlines > * { position: relative; }

/* Liste d'offres — lignes de registre, pas de cartes. */
.registry { display: grid; }
.registry-row {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6);
  align-items: baseline;
  border-top: 1px solid var(--color-divider);
  padding: var(--space-7) 0;
  text-decoration: none; color: var(--color-text);
  transition: background var(--dur) var(--ease);
}
.registry-row:last-child { border-bottom: 1px solid var(--color-divider); }
.registry-row:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); color: var(--color-text); }
.registry-row:hover .registry-arrow { transform: translateX(4px); }
.registry-num { grid-column: 1 / span 1; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
.registry-title { grid-column: 2 / span 3; font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.08; margin: 0; }
.registry-desc { grid-column: 5 / span 4; margin: 0; font-size: var(--text-sm); color: var(--color-neutral-700); }
.registry-meta { grid-column: 9 / span 3; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-700); }
.registry-arrow { grid-column: 12 / span 1; text-align: right; font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-accent-700); transition: transform var(--dur) var(--ease); }

/* Problème adressé — filet supérieur, pastille, titre, conséquence. */
.issue { border-top: 1px solid var(--color-divider); padding: var(--space-6) 0 var(--space-7); }
.issue .kicker { color: var(--color-accent); letter-spacing: .14em; }
.issue h3 { font-size: 30px; margin: var(--space-3) 0; }
.issue p { margin: 0; color: var(--color-neutral-700); }

/* Statistiques — liste de définition à filet. */
.stats { margin: 0; display: grid; gap: var(--space-5); }
.stats > div { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.stats > div:first-child { border-top: 2px solid var(--color-accent); }
.stats dt { font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }
.stats dd { margin: 6px 0 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-3xl); line-height: 1; color: var(--color-text-strong); }
.stats .is-accent { color: var(--color-accent-700); }

/* Étapes de méthode. */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { border-top: 1px solid var(--color-divider); padding-top: var(--space-5); }
.steps h3 { font-size: var(--text-xl); margin: var(--space-3) 0; }
.steps p { margin: 0; font-size: var(--text-sm); color: var(--color-neutral-700); }

/* Encadré normatif — la référence à la norme, mise en évidence. */
.norm {
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-100);
  padding: var(--space-5) var(--space-6);
}
.norm .kicker { color: var(--color-accent-700); margin-bottom: var(--space-2); }
.norm p:last-child { margin-bottom: 0; }
.norm code { font-family: var(--font-mono); font-size: .92em; }

/* Fil d'Ariane. */
.crumbs {
  font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: var(--space-6) 0 0;
}
.crumbs a { color: var(--color-neutral-600); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--color-accent-700); }

/* Liste de faits — « pour qui », « inclus / hors périmètre ». */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.facts > li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); font-size: var(--text-base); color: var(--color-neutral-700); }
.facts > li::before { content: "→"; font-family: var(--font-mono); color: var(--color-accent); }
.facts-plain > li::before { content: "·"; }

/* FAQ. */
.faq { border-top: 1px solid var(--color-divider); }
.faq > details { border-bottom: 1px solid var(--color-divider); }
.faq > details > summary {
  cursor: pointer; list-style: none; padding: var(--space-5) 0;
  display: flex; justify-content: space-between; gap: var(--space-5); align-items: baseline;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-lg);
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-accent); }
.faq > details[open] > summary::after { content: "−"; }
.faq > details > div { padding: 0 0 var(--space-6); max-width: 68ch; color: var(--color-neutral-700); }

/* Vignette figurative — remplace les photos de banque d'images. */
.placeholder {
  display: grid; place-items: center; text-align: center; padding: var(--space-5);
  background: var(--color-surface); color: var(--color-neutral-600);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .12em;
}

/* Filtres de la page Réalisations. */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter {
  height: 34px; padding: 0 var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--color-neutral-700);
  border: 1px solid var(--color-divider); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--color-neutral-600); color: var(--color-text); }
.filter[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fffdfb; }

/* ── 07. En-tête, navigation, pied de page ──────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 72px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header > .wrap { display: flex; align-items: center; gap: var(--space-7); }
.brand {
  display: flex; flex-direction: column; gap: 2px;
  margin-right: auto; text-decoration: none; color: var(--color-text);
}
.brand-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 23px; letter-spacing: -0.02em; line-height: 1; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { font-size: 15px; text-decoration: none; color: var(--color-text); padding: 4px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }
.site-nav a[aria-current="page"] { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }
.nav-toggle { display: none; }

.site-footer { background: var(--color-ink-deep); color: #e8e0d8; }
.site-footer a { color: #e8e0d8; text-decoration: none; }
.site-footer a:hover { color: var(--color-on-ink-accent); text-decoration: underline; }
.site-footer .wrap { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); }
.footer-grid h2 {
  font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-on-ink-faint);
  margin: 0 0 var(--space-4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 15px; }
.footer-cert { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--color-on-ink-accent); letter-spacing: .04em; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, #e8e0d8 18%, transparent);
  font-size: var(--text-xs); color: var(--color-on-ink-faint);
}

/* ── 08. Utilitaires ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }
.rule-top { border-top: 1px solid var(--color-divider); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }   .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }  .mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }  .mt-9 { margin-top: var(--space-9); }
.mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); }
.measure { max-width: 68ch; }
.measure-sm { max-width: 52ch; }
.flex { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.flex-between { display: flex; gap: var(--space-5); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.items-end { align-items: end; }
.items-center { align-items: center; }
.is-hidden { display: none !important; }

/* ── 09. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --gutter: 28px; --section-y: 96px; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; --section-y: 72px; --text-4xl: 36px; --text-3xl: 32px; --text-2xl: 27px; }
  body { font-size: 16px; }

  /* La grille 12 colonnes se replie en une seule colonne. */
  .grid12 { grid-template-columns: 1fr; gap: var(--space-5); }
  .grid12 > * { grid-column: 1 / -1 !important; }
  .section-head { margin-bottom: var(--space-7); }
  .section-head .kicker { padding-top: 0; }

  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; gap: 0; }
  .cols-3 > *, .cols-4 > * { margin-top: 0; }
  .steps, .facts { gap: 0; }

  /* Le registre d'offres devient une pile lisible. */
  .registry-row { grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-5) 0; }
  .registry-num { grid-column: 1; grid-row: 1; }
  .registry-title { grid-column: 2; grid-row: 1; font-size: var(--text-xl); }
  .registry-desc { grid-column: 2; grid-row: 2; }
  .registry-meta { grid-column: 2; grid-row: 3; }
  .registry-arrow { grid-column: 2; grid-row: 4; text-align: left; }

  /* Navigation repliable. */
  .site-header { height: 60px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 var(--space-3); background: transparent;
    border: 1px solid var(--color-divider); cursor: pointer;
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--color-text);
  }
  .site-nav {
    position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
    padding: var(--space-2) var(--gutter) var(--space-5);
    box-shadow: var(--shadow-md);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-md); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--color-divider); }
  .header-cta { display: none; }
  .site-nav .header-cta { display: inline-flex; margin-top: var(--space-4); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .brand-sub { display: none; }
}

@media (max-width: 520px) {
  :root { --text-5xl: 34px; }
  .btn { width: 100%; }
  .flex > .btn { width: 100%; }
}

/* Cible tactile confortable. */
@media (pointer: coarse) {
  .btn, .filter { min-height: 46px; }
  .site-nav a { min-height: 46px; display: flex; align-items: center; }
}

/* ── 10. Impression ─────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { border: 0; }
  .section > .wrap { padding: 0 0 18pt; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3 { break-after: avoid; }
  .table, .issue, .card { break-inside: avoid; }
}