/* ==========================================================================
   AC&R — Acoustical Construction & Research
   Système : « planche technique ». Filets d'or, plaques numérotées,
   typographie didone en display, IBM Plex en texte et en donnée.
   Ordre du fichier : tokens → base → primitives → composants → sections → media
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Encres. Le noir tire vers le lie-de-vin : toute la grisaille est teintée,
     ce qui évite l'effet « noir neutre + une section violette ». */
  --ink:        #08070a;
  --ink-2:      #0c0a11;
  --ink-3:      #131019;
  --ink-4:      #1b1622;

  --wine:       #40142d;
  --wine-2:     #5c1c40;
  --wine-3:     #7a2a55;

  --gold:       #c29949;
  --gold-2:     #e2c085;
  --gold-3:     #8d6c30;

  --bone:       #ede9e3;
  --slate:      #a09aab;
  --slate-2:    #6b6577;

  --line:       rgb(194 153 73 / .17);
  --line-2:     rgb(237 233 227 / .07);
  --line-3:     rgb(194 153 73 / .38);

  /* Typographie */
  --display: "Cormorant Garamond", "Bodoni Moda", "Times New Roman", serif;
  --sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.85rem, 7.4vw, 6.6rem);
  --fs-h2:      clamp(2rem, 4.2vw, 3.6rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 1.75rem);
  --fs-lead:    clamp(1.02rem, 1.25vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .7rem;

  /* Rythme */
  --pad:        clamp(20px, 5.2vw, 88px);
  --shell:      1560px;
  --measure:    64ch;
  --plate-y:    clamp(76px, 9.5vw, 168px);
  --gap:        clamp(28px, 3.6vw, 56px);

  --nav-h:      74px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 var(--fs-body)/1.65 var(--sans);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

::selection { background: var(--wine-2); color: var(--bone); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 12px 18px;
  background: var(--gold); color: var(--ink);
  font: 500 var(--fs-small)/1 var(--mono);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Primitives typographiques --------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.display {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: .94;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.014em;
  text-wrap: balance;
}

.h3 {
  font: 500 var(--fs-h3)/1.25 var(--sans);
  letter-spacing: -.01em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: color-mix(in oklab, var(--bone) 82%, var(--slate));
  max-width: var(--measure);
}

.prose p + p { margin-top: 1.05em; }
.prose { color: color-mix(in oklab, var(--bone) 76%, var(--slate)); max-width: var(--measure); }
.prose strong { color: var(--bone); font-weight: 500; }

.label {
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.label--mute { color: var(--slate-2); }

.mono { font-family: var(--mono); font-size: var(--fs-small); }

.gold { color: var(--gold-2); }
.italic { font-style: italic; }

/* Rule = filet doré, l'unité structurelle du site. */
.rule {
  border: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-3), var(--line) 42%, transparent);
}

/* --- 4. Boutons --------------------------------------------------------- */

.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.btn:hover { --btn-bg: var(--gold-2); }
.btn svg { flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  border-color: var(--line-3);
}
.btn--ghost:hover {
  --btn-bg: rgb(194 153 73 / .1);
  --btn-fg: var(--gold-2);
  border-color: var(--gold);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Lien fléché : le soulignement se dessine au survol. */
.arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2);
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.arrow::after { content: "→"; transition: transform .25s var(--ease); }
.arrow:hover { border-color: var(--gold); }
.arrow:hover::after { transform: translateX(5px); }

/* --- 5. Navigation ------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgb(8 7 10 / .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-2);
}
.nav__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 46px);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 38px; height: 38px; }
.brand__txt { display: flex; flex-direction: column; gap: 3px; }
.brand__mark {
  font: 600 1.02rem/1 var(--display);
  letter-spacing: .04em; color: var(--bone);
}
.brand__sub {
  font: 400 .55rem/1 var(--mono);
  letter-spacing: .19em; text-transform: uppercase; color: var(--slate-2);
}

.nav__set { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav__set--end { margin-left: auto; }

.nav__link {
  position: relative;
  font: 400 .78rem/1 var(--sans);
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--bone) 72%, var(--slate));
  padding-block: 8px;
  transition: color .22s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold);
  transition: right .28s var(--ease);
}
.nav__link:hover { color: var(--bone); }
.nav__link:hover::after, .nav__link[aria-current]::after { right: 0; }
.nav__link[aria-current] { color: var(--gold-2); }

.nav__sep { width: 1px; height: 20px; background: var(--line-2); flex: none; }

.nav__cta {
  padding: 11px 20px;
  border: 1px solid var(--line-3);
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.nav__cta:hover { background: rgb(194 153 73 / .12); border-color: var(--gold); }

.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--line-2);
  color: var(--bone); cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1px; margin: 4px auto;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panneau mobile : plein écran, groupé, pas un menu desktop empilé. */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: var(--ink);
  padding: clamp(28px, 7vw, 48px) var(--pad) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  display: none; flex-direction: column; gap: 34px;
}
.drawer[data-open] { display: flex; animation: fade .3s var(--ease); }
.drawer__group { display: flex; flex-direction: column; gap: 2px; }
.drawer__title { margin-bottom: 14px; }
.drawer__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--display); font-size: 1.9rem; font-weight: 500; line-height: 1;
}
.drawer__link span {
  font: 400 .68rem/1 var(--mono); letter-spacing: .1em;
  color: var(--slate-2); text-align: right; max-width: 46%;
}
.drawer__foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.drawer__foot a { font-family: var(--mono); font-size: .85rem; color: var(--gold-2); }

/* Sous 480 px, la description ne tient pas à droite du titre : elle passe
   dessous plutôt que de se casser en trois lignes contre le bord. */
@media (max-width: 480px) {
  .drawer__link { flex-direction: column; align-items: flex-start; gap: 7px; }
  .drawer__link span { text-align: left; max-width: 100%; }
}

@keyframes fade { from { opacity: 0; transform: translateY(-8px); } }

/* --- 6. Plaques (sections) ---------------------------------------------- */

.plate { padding-block: var(--plate-y); position: relative; }
.plate--flush { padding-block: 0; }
.plate--tight { padding-block: clamp(52px, 6vw, 96px); }

.plate__head {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(34px, 4.4vw, 68px);
}
.plate__num {
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .2em; color: var(--gold); flex: none;
}
.plate__name {
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate-2);
}
.plate__aside { margin-left: auto; text-align: right; }

/* Grille éditoriale asymétrique : titre à gauche, propos décalé à droite. */
.split {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); }
  .split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--flip > :first-child { order: 2; }
}
.split__sticky { align-self: start; }
@media (min-width: 900px) {
  .split__sticky { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* --- 7. Héros ----------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 76px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -25%; height: 120%;
  background:
    radial-gradient(58% 52% at 18% 34%, rgb(64 20 45 / .58), transparent 68%),
    radial-gradient(42% 40% at 84% 12%, rgb(194 153 73 / .09), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid { display: grid; gap: clamp(38px, 5vw, 64px); }
@media (min-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); align-items: center; gap: clamp(48px, 5vw, 88px); }
}

.hero__eyebrow { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 26px; }
.hero__title { margin-bottom: 26px; }
.hero__title em { font-style: italic; color: var(--gold-2); }
.hero__lead { margin-bottom: 34px; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin-top: 38px; padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font: 400 .72rem/1.5 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate-2);
}
.hero__meta b { color: var(--gold); font-weight: 500; }

/* --- 8. Planche interactive (Fig. 01) ----------------------------------- */

.fig {
  border: 1px solid var(--line);
  background: linear-gradient(178deg, var(--ink-2), var(--ink));
}
.fig__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
}
.fig__bar span:last-child { color: var(--slate-2); letter-spacing: .1em; text-align: right; }
.fig__canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .fig__canvas { aspect-ratio: 4 / 3; } }

.fig__readout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.fig__readout div {
  padding: 13px 16px;
  border-right: 1px solid var(--line-2);
}
.fig__readout div:last-child { border-right: 0; }
.fig__readout dt {
  font: 400 .6rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: 7px;
}
.fig__readout dd { font: 500 1.02rem/1 var(--mono); color: var(--bone); }
.fig__readout dd small { font-size: .68rem; color: var(--slate-2); font-weight: 400; }

.fig__controls {
  display: grid; gap: 2px;
  border-top: 1px solid var(--line-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 560px) { .fig__controls { grid-template-columns: minmax(0, 1fr); } }
.ctrl { padding: 13px 16px; border-right: 1px solid var(--line-2); }
.ctrl:last-child { border-right: 0; }
.ctrl__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 9px;
  font: 400 .64rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-2);
}
.ctrl__top b { color: var(--gold-2); font-weight: 500; letter-spacing: .04em; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: none; cursor: ew-resize; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: var(--line-3);
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--line-3); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 3px; height: 16px; margin-top: -8px;
  background: var(--gold-2); border: 0; border-radius: 0;
  box-shadow: 0 0 12px rgb(226 192 133 / .5);
}
input[type="range"]::-moz-range-thumb {
  width: 3px; height: 16px;
  background: var(--gold-2); border: 0; border-radius: 0;
}
.fig__caption {
  padding: 13px 16px;
  border-top: 1px solid var(--line-2);
  font: 400 .7rem/1.6 var(--mono);
  color: var(--slate-2);
}
.fig__caption b { color: var(--slate); font-weight: 400; }

/* --- 9. Table des domaines ---------------------------------------------- */

.domains { border-top: 1px solid var(--line); }

.domain {
  position: relative;
  display: grid; gap: 6px 40px;
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .3s var(--ease);
}
@media (min-width: 860px) {
  .domain {
    grid-template-columns: 4.4rem minmax(0, 5fr) minmax(0, 6fr) auto;
    align-items: baseline;
    padding-inline: clamp(10px, 1.6vw, 26px);
  }
}
.domain::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 100%;
  background: linear-gradient(90deg, rgb(64 20 45 / .5), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.domain:hover::before, .domain:focus-within::before { opacity: 1; }
.domain:hover, .domain:focus-within { border-color: var(--line-3); }

.domain > * { position: relative; }
.domain__mark {
  font: 400 .68rem/1.2 var(--mono); letter-spacing: .14em;
  color: var(--gold-3); padding-top: .5em; white-space: nowrap;
}
.domain__name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -.012em;
  transition: color .3s var(--ease);
}
.domain:hover .domain__name { color: var(--gold-2); }
.domain__name a::after { content: ""; position: absolute; inset: 0; }
.domain__body { color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }
.domain__keys {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font: 400 .66rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-3);
}
.domain__go {
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .16em;
  color: var(--gold); white-space: nowrap;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
@media (max-width: 859px) { .domain__go { opacity: 1; transform: none; margin-top: 14px; } }
.domain:hover .domain__go, .domain:focus-within .domain__go { opacity: 1; transform: none; }

/* --- 10. Figures documentaires ------------------------------------------ */

figure.plate-fig { border: 1px solid var(--line-2); background: var(--ink-2); }
figure.plate-fig img { width: 100%; }
figure.plate-fig figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
  font: 400 .72rem/1.6 var(--mono); color: var(--slate-2);
}
figure.plate-fig figcaption b { color: var(--gold); font-weight: 500; letter-spacing: .1em; }

/* Comparateur A/B : bascule, pas de volet coulissant — les axes des deux
   captures ne sont pas alignés au pixel, un volet suggérerait le contraire. */
.ab { border: 1px solid var(--line); background: var(--ink-2); }
.ab__bar {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--line-2);
  padding: 8px;
}
.ab__bar > .label { margin-right: auto; padding-left: 8px; }
.ab__btn {
  padding: 9px 18px; background: none; border: 1px solid transparent;
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-2); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ab__btn:hover { color: var(--bone); }
.ab__btn[aria-selected="true"] {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
}
.ab__stage { position: relative; }
.ab__stage img {
  width: 100%;
  transition: opacity .42s var(--ease);
}
.ab__stage img + img { position: absolute; inset: 0; }
.ab__stage img[data-hidden] { opacity: 0; }
.ab__note {
  padding: 12px 16px; border-top: 1px solid var(--line-2);
  font: 400 .72rem/1.6 var(--mono); color: var(--slate-2);
}

/* Onglets d'indicateurs */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 18px; }
.tabs button {
  padding: 11px 18px; background: none;
  border: 1px solid var(--line-2);
  font: 400 var(--fs-label)/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs button:hover { color: var(--bone); }
.tabs button[aria-selected="true"] { color: var(--gold-2); border-color: var(--gold); }
[role="tabpanel"][hidden] { display: none; }

/* --- 11. Projets -------------------------------------------------------- */

.project {
  display: grid; gap: clamp(22px, 3vw, 44px);
  padding-block: clamp(34px, 4vw, 62px);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 900px) {
  .project { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .project--flip > :first-child { order: 2; }
}
.project__media { position: relative; overflow: hidden; background: var(--ink-3); }
.project__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .9s var(--ease), filter .6s var(--ease);
  filter: saturate(.86) contrast(1.04);
}
.project:hover .project__media img { transform: scale(1.03); filter: saturate(1) contrast(1.04); }
.project__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.02;
  margin: 14px 0 16px;
}
.project__specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 22px 0;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.project__specs div { background: var(--ink); padding: 13px 15px; }
.project__specs dt {
  font: 400 .6rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: 7px;
}
.project__specs dd { font: 400 .84rem/1.3 var(--sans); color: var(--bone); }

/* --- 12. Séquence méthode ----------------------------------------------- */

.steps { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { background: var(--ink); padding: clamp(22px, 2.4vw, 34px); position: relative; }
.step__n {
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .2em;
  color: var(--gold); margin-bottom: 20px; display: block;
}
.step h3 { margin-bottom: 12px; }
.step p { color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }
.step::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0;
  background: var(--gold);
  transition: width .5s var(--ease);
}
.step:hover::after { width: 100%; }

/* --- 13. Listes techniques ---------------------------------------------- */

.spec { border-top: 1px solid var(--line); }
.spec li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-small); color: var(--slate);
}
.spec li::before {
  content: "—"; color: var(--gold-3); flex: none;
  font-family: var(--mono); font-size: .8em;
}
.spec li b { color: var(--bone); font-weight: 500; }

/* Liste à clé/valeur avec conducteur pointillé, façon fiche technique. */
.kv { border-top: 1px solid var(--line); }
.kv > div {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.kv dt {
  font: 400 .72rem/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2); flex: none;
}
.kv .dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.kv dd { font-size: var(--fs-small); color: var(--bone); text-align: right; }

.cols { display: grid; gap: var(--gap); }
@media (min-width: 780px) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.block { border-top: 1px solid var(--line); padding-top: 22px; }
.block h3 { margin-bottom: 14px; }
.block p { color: var(--slate); font-size: var(--fs-small); line-height: 1.65; }

/* --- 14. Champ lie-de-vin ----------------------------------------------- */

.field {
  position: relative;
  background:
    radial-gradient(72% 120% at 8% 0%, rgb(64 20 45 / .82), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-block: 1px solid var(--line-2);
}

.quote {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 2.9vw, 2.35rem); line-height: 1.25;
  letter-spacing: -.01em; color: var(--bone);
  max-width: 22ch;
}

/* --- 15. Statuts logiciels ---------------------------------------------- */

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border: 1px solid var(--line-3);
  font: 500 .62rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-2);
  white-space: nowrap;
}
.status::before {
  content: ""; width: 5px; height: 5px; background: var(--gold); flex: none;
}
.status--dev { color: var(--slate-2); border-color: var(--line-2); }
.status--dev::before { background: var(--slate-2); }

.modules { border-top: 1px solid var(--line); }
.module {
  display: grid; gap: 8px 30px;
  padding: 22px 0; border-bottom: 1px solid var(--line-2);
}
@media (min-width: 820px) {
  .module { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; align-items: center; }
}
.module__name { font: 500 1.06rem/1.2 var(--sans); letter-spacing: -.005em; }
.module__name small {
  display: block; margin-top: 5px;
  font: 400 .66rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-3);
}
.module p { color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }

/* --- 16. Formulaire ----------------------------------------------------- */

.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 680px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field-group { display: flex; flex-direction: column; gap: 9px; }
.field-group label {
  font: 400 .68rem/1 var(--mono); letter-spacing: .15em;
  text-transform: uppercase; color: var(--slate-2);
}
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%; padding: 13px 15px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  color: var(--bone);
  font: 400 .95rem/1.5 var(--sans);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.field-group textarea { resize: vertical; min-height: 148px; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
  outline: none; border-color: var(--gold); background: var(--ink-3);
}
.field-group select { appearance: none; cursor: pointer; }
.hp { position: absolute; left: -9999px; }

.note {
  border-left: 1px solid var(--gold-3);
  padding: 4px 0 4px 18px;
  font-size: var(--fs-small); line-height: 1.65;
  color: var(--slate);
}

.alert {
  padding: 14px 18px; border: 1px solid var(--line-3);
  background: rgb(194 153 73 / .08);
  font-size: var(--fs-small); color: var(--bone);
}
.alert--bad { border-color: rgb(180 70 70 / .5); background: rgb(120 40 40 / .16); }

/* --- 17. Pied de page --------------------------------------------------- */

.foot { border-top: 1px solid var(--line); padding-block: clamp(48px, 5vw, 84px) 34px; }
.foot__grid { display: grid; gap: var(--gap); }
@media (min-width: 840px) {
  .foot__grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); }
}
.foot__col h4 {
  font: 400 var(--fs-label)/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: 20px;
}
.foot__col li { margin-bottom: 11px; }
.foot__col a {
  font-size: var(--fs-small); color: color-mix(in oklab, var(--bone) 72%, var(--slate));
  transition: color .2s var(--ease);
}
.foot__col a:hover { color: var(--gold-2); }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  margin-top: clamp(40px, 5vw, 70px); padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font: 400 .7rem/1.6 var(--mono); letter-spacing: .06em; color: var(--slate-2);
}

/* --- 18. Fil d'ariane --------------------------------------------------- */

.crumb {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: clamp(24px, 3vw, 40px);
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-2);
}
.crumb a:hover { color: var(--gold-2); }
.crumb span { color: var(--gold-3); }

/* --- 19. En-tête de page intérieure ------------------------------------- */

.pagehead { padding-block: clamp(38px, 5vw, 78px) clamp(44px, 5.5vw, 88px); }
.pagehead .display { font-size: clamp(2.4rem, 6vw, 5.2rem); }
.pagehead__lead { margin-top: 26px; }

/* --- 20. Galerie -------------------------------------------------------- */

.gallery { display: grid; gap: 14px; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure.plate-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery--wide figure:first-child { grid-column: 1 / -1; }
.gallery--wide figure:first-child img { aspect-ratio: 16 / 9; }

/* --- 21. Révélation au défilement --------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

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

/* --- 22. Adaptations mobile --------------------------------------------- */

@media (max-width: 1023px) {
  .nav__set--mid, .nav__set--end { display: none; }
  .burger { display: block; }
}

@media (max-width: 700px) {
  :root { --nav-h: 66px; }
  .fig__bar { flex-direction: column; align-items: flex-start; gap: 5px; }
  .fig__bar span:last-child { text-align: left; }
  .brand__sub { display: none; }
  .fig__readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__readout div:nth-child(3) { grid-column: 1 / -1; border-right: 0; }
  .fig__readout div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .project__specs { grid-template-columns: minmax(0, 1fr); }
  .plate__head { flex-wrap: wrap; gap: 10px; }
  .plate__aside { margin-left: 0; text-align: left; width: 100%; }
  .foot__bottom { flex-direction: column; }
  /* iOS zoome les champs sous 16 px. */
  .field-group input, .field-group select, .field-group textarea { font-size: 16px; }
}

@media print {
  .nav, .drawer, .burger, .fig__controls { display: none; }
  body { background: #fff; color: #000; }
}

/* --- 23. Schéma d'architecture ------------------------------------------ */

.diagram { padding: clamp(18px, 2.4vw, 34px); }
.diagram svg { width: 100%; height: auto; }
.diagram .d-title {
  font: 500 15px var(--sans); fill: var(--bone); letter-spacing: -.01em;
}
.diagram .d-sub {
  font: 400 11px var(--mono); fill: var(--slate-2); letter-spacing: .08em;
}
.diagram .d-mod rect { fill: var(--ink-3); stroke: rgb(194 153 73 / .24); }
.diagram .d-mod--live rect { fill: rgb(194 153 73 / .13); stroke: var(--gold); }
.diagram .d-rot { font-size: 12px; letter-spacing: .16em; fill: var(--gold-3); }

.diagram-list { display: none; padding: 4px 0 0; }
.diagram-list li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.diagram-list li:last-child { border-bottom: 0; }
.diagram-list b { font: 500 .95rem/1.2 var(--sans); }
.diagram-list span {
  font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; color: var(--slate-2);
}

/* Sous 760 px, un schéma de 1000 px de large rend le texte illisible :
   on bascule sur la liste équivalente plutôt que de laisser zoomer. */
@media (max-width: 759px) {
  .diagram { display: none; }
  .diagram-list { display: block; }
}

/* --- 24. Champs à compléter --------------------------------------------- */
/* Visible en clair pour Dorian, discret pour un visiteur : à retirer une
   fois les informations renseignées. */
.todo {
  color: var(--wine-3) !important;
  font-style: italic;
}
.todo::before { content: "⚑ "; }


/* ========================================================================== 
   25. V4 Hybrid — AC&R visual direction + Claude information architecture
   ========================================================================== */

/* The editorial system stays technical; the display face is deliberately
   warmer than the original V4 candidate to reconnect it with the current
   AC&R visual language. */
.display, .h2 { font-weight: 500; }
.h2 em { font-style: italic; color: var(--gold-2); }

/* --- Home visual hero ---------------------------------------------------- */
.home-hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #050506;
}
.home-hero__media,
.home-hero__veil { position: absolute; inset: 0; }
.home-hero__media { z-index: -3; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero__veil {
  z-index: -2;
  background:
    radial-gradient(ellipse 46% 78% at 50% 49%, rgba(5,5,6,.86) 0%, rgba(5,5,6,.68) 43%, rgba(5,5,6,.24) 76%, rgba(5,5,6,.10) 100%),
    linear-gradient(0deg, rgba(5,5,6,.78) 0%, rgba(5,5,6,.18) 34%, rgba(5,5,6,.16) 100%);
}
.home-hero__inner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-block: clamp(92px, 12vh, 150px) clamp(88px, 10vh, 128px);
}
.home-hero__copy {
  width: min(760px, 58vw);
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.home-hero__eyebrow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-bottom: 24px;
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.home-hero__eyebrow span { color: var(--slate); }
.home-hero__title {
  margin: 0 0 28px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.5rem, 6.8vw, 7rem);
  line-height: .88;
  letter-spacing: -.025em;
  text-shadow: 0 3px 30px rgba(0,0,0,.34);
}
.home-hero__title em { color: var(--gold-2); font-weight: 400; }
.home-hero .btn-row { justify-content: center; }
.home-hero__lead {
  max-width: 60ch;
  margin: 0 auto 32px;
  color: color-mix(in oklab, var(--bone) 86%, var(--slate));
  font-size: clamp(.98rem, 1.2vw, 1.14rem);
  line-height: 1.72;
}
.home-hero__domains {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 38px; padding-top: 18px;
  border-top: 1px solid rgb(237 233 227 / .11);
  font: 500 .66rem/1.4 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.home-hero__domains span::before { content: "·"; color: var(--gold); margin-right: 9px; }
.home-hero__domains span:first-child::before { content: ""; margin: 0; }
.home-hero__scroll {
  position: absolute; left: var(--pad); bottom: 26px;
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 .62rem/1 var(--mono); letter-spacing: .19em; text-transform: uppercase;
  color: var(--slate); transition: color .25s var(--ease);
}
.home-hero__scroll:hover { color: var(--gold-2); }
.home-hero__scroll span { color: var(--gold); font-size: .9rem; }

/* The modal explorer becomes the transition between image and evidence. */
.modal-demo {
  background:
    radial-gradient(80% 100% at 78% 40%, rgb(64 20 45 / .24), transparent 62%),
    var(--ink-2);
}
.modal-demo__grid { align-items: start; }
.modal-demo__legend {
  display: flex; align-items: center; gap: 10px;
  margin-top: 26px;
  font: 400 .67rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2);
}
.modal-demo__legend span {
  width: 34px; height: 1px;
  background: linear-gradient(90deg,var(--gold-2),var(--gold),var(--wine-3));
}

/* --- Research ------------------------------------------------------------ */
.research-page .pagehead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(65% 150% at 18% 50%, rgb(64 20 45 / .50), transparent 68%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid var(--line);
}
.research-page .pagehead::after {
  content: "R";
  position: absolute; right: 5vw; bottom: -18%;
  font: 500 clamp(11rem, 26vw, 27rem)/.72 var(--display);
  color: rgb(194 153 73 / .035); pointer-events: none;
}
.research-page .quote { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 3.5rem); line-height: 1.02; font-weight: 400; }

/* --- Software hero ------------------------------------------------------- */
.software-hero {
  position: relative;
  min-height: min(790px, calc(100svh - var(--nav-h)));
  display: grid; align-items: center; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #050606;
}
.software-hero__media,
.software-hero__veil { position: absolute; inset: 0; }
.software-hero__media { z-index: -3; }
.software-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .82; }
.software-hero__veil {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,6,6,.99) 0%, rgba(5,6,6,.96) 29%, rgba(5,6,6,.76) 48%, rgba(5,6,6,.34) 72%, rgba(5,6,6,.48) 100%),
    linear-gradient(0deg, rgba(5,6,6,.88) 0%, transparent 40%, rgba(5,6,6,.28) 100%);
}
.software-hero__inner { width: 100%; padding-block: clamp(82px, 10vh, 128px); }
.software-hero__copy { max-width: 710px; }
.software-hero__title {
  margin: 20px 0 10px;
  font: 500 clamp(3.7rem, 7.2vw, 7.4rem)/.9 var(--display);
  letter-spacing: -.025em;
}
.software-hero__title em { color: var(--gold-2); font-weight: 400; }
.software-hero__tagline {
  margin-bottom: 24px;
  font: 400 clamp(1.14rem, 1.8vw, 1.65rem)/1.25 var(--display);
  font-style: italic; color: var(--gold);
}
.software-page-v4 .diagram .d-mod--live rect { fill: rgb(47 111 159 / .18); stroke: #2F6F9F; }
.software-page-v4 .diagram .d-mod--live .d-title { fill: #b7d2e6; }

/* --- IsoQline product identity ------------------------------------------ */
.isoqline-page {
  --isq-blue: #2F6F9F;
  --isq-blue-2: #6ea2c8;
  --isq-blue-soft: rgb(47 111 159 / .18);
  background: #0D0D0D;
}
.isoqline-page .crumb a:hover,
.isoqline-page .gold { color: var(--isq-blue-2); }
.isoqline-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 100px) clamp(64px, 8vw, 116px);
  border-bottom: 1px solid rgb(47 111 159 / .28);
  background:
    radial-gradient(60% 90% at 86% 36%, rgb(47 111 159 / .19), transparent 70%),
    radial-gradient(44% 80% at 7% 24%, rgb(194 153 73 / .07), transparent 70%),
    #0D0D0D;
}
.isoqline-hero__grid { display: grid; gap: clamp(42px, 6vw, 92px); align-items: center; }
@media (min-width: 1080px) { .isoqline-hero__grid { grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); } }
.isoqline-kicker { color: var(--isq-blue-2); }
.isoqline-hero__title {
  margin: 16px 0 10px;
  font: 500 clamp(4rem, 8vw, 8.6rem)/.82 var(--display);
  letter-spacing: -.035em; color: var(--bone);
}
.isoqline-hero__title span { color: var(--isq-blue-2); text-shadow: 0 0 34px rgb(47 111 159 / .35); }
.isoqline-hero__tagline {
  margin-bottom: 24px;
  font: 400 clamp(1.45rem, 2.6vw, 2.55rem)/1.02 var(--display);
  font-style: italic; color: var(--gold-2);
}
.isoqline-btn {
  --btn-bg: var(--isq-blue);
  --btn-fg: #f4f7fa;
  border-color: var(--isq-blue);
}
.isoqline-btn:hover { --btn-bg: var(--isq-blue-2); }
.isoqline-hero__screen {
  position: relative;
  border: 1px solid rgb(47 111 159 / .38);
  background: #07090a;
  box-shadow: 0 26px 80px rgb(0 0 0 / .45), 0 0 60px rgb(47 111 159 / .07);
}
.isoqline-hero__screen::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(120deg, rgb(47 111 159 / .24), transparent 25%, transparent 75%, rgb(194 153 73 / .14));
  mix-blend-mode: screen;
}
.isoqline-hero__screen img { width: 100%; }
.isoqline-hero__screen figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 14px;
  border-top: 1px solid rgb(47 111 159 / .25);
  font: 500 .62rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--isq-blue-2);
}
.isoqline-hero__screen figcaption span:last-child { color: var(--slate-2); text-align: right; }
.isoqline-page .status { border-color: rgb(47 111 159 / .45); color: var(--isq-blue-2); background: rgb(47 111 159 / .08); }
.isoqline-page .plate__num { color: var(--isq-blue-2); }
.isoqline-page .plate__head { border-color: rgb(47 111 159 / .18); }
.isoqline-page .field {
  background:
    radial-gradient(60% 120% at 86% 25%, rgb(47 111 159 / .075), transparent 70%),
    var(--ink-2);
}

/* --- Responsive refinements --------------------------------------------- */
@media (max-width: 900px) {
  .home-hero { min-height: 820px; align-items: end; }
  .home-hero__copy { max-width: 680px; }
  .home-hero__veil {
    background:
      linear-gradient(0deg, rgba(5,5,6,.99) 0%, rgba(5,5,6,.91) 43%, rgba(5,5,6,.44) 72%, rgba(5,5,6,.34) 100%),
      linear-gradient(90deg, rgba(5,5,6,.68), rgba(5,5,6,.16));
  }
  .home-hero__inner { padding-top: 280px; padding-bottom: 108px; }
  .home-hero__copy { max-width: 620px; }
  .software-hero { min-height: 760px; align-items: end; }
  .software-hero__inner { padding-top: 250px; padding-bottom: 90px; }
  .software-hero__veil {
    background: linear-gradient(0deg, rgba(5,6,6,.99) 0%, rgba(5,6,6,.91) 48%, rgba(5,6,6,.42) 78%, rgba(5,6,6,.30) 100%);
  }
}

@media (max-width: 700px) {
  .home-hero { min-height: min(860px, calc(100svh - var(--nav-h) + 120px)); }
  .home-hero__media img { object-position: center top; }
  .home-hero__inner { display: block; padding-top: 290px; padding-bottom: 92px; }
  .home-hero__copy { width: 100%; max-width: 100%; margin-inline: 0; text-align: left; }
  .home-hero__eyebrow { justify-content: flex-start; font-size: .58rem; gap: 6px 12px; }
  .home-hero__lead { margin-left: 0; margin-right: 0; }
  .home-hero .btn-row { justify-content: flex-start; }
  .home-hero__title { font-size: clamp(3.05rem, 14vw, 4.55rem); line-height: .9; max-width: 9ch; }
  .home-hero__lead { font-size: .95rem; line-height: 1.65; max-width: 36ch; }
  .home-hero .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .home-hero__domains { display: grid; grid-template-columns: 1fr 1fr; justify-content: initial; gap: 8px 12px; text-align: left; }
  .home-hero__domains span::before { content: "·"; margin-right: 7px; }
  .home-hero__scroll { display: none; }

  .software-hero { min-height: 790px; }
  .software-hero__media img { object-position: 62% top; }
  .software-hero__inner { padding-top: 300px; padding-bottom: 76px; }
  .software-hero__title { font-size: clamp(3.5rem, 16vw, 5rem); }
  .software-hero__copy .btn { flex: 1 1 100%; justify-content: center; }

  .isoqline-hero { padding-top: 42px; }
  .isoqline-hero__title { font-size: clamp(4rem, 20vw, 6.2rem); }
  .isoqline-hero__screen figcaption { flex-direction: column; gap: 4px; }
  .isoqline-hero__screen figcaption span:last-child { text-align: left; }
  .isoqline-page .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll { display: none; }
}

/* ========================================================================== 
   26. V4.1 — Domain system, section index & internal-page refinement
   ========================================================================== */

/* A second navigation level for long technical pages. It behaves like the
   index of a technical dossier rather than a marketing tab bar. */
.section-index {
  position: sticky;
  top: var(--nav-h);
  z-index: 82;
  border-bottom: 1px solid var(--line-2);
  /* Avoid stacking a second live backdrop-filter under the main sticky nav:
     Safari/WebKit can repaint both layers continuously on long pages. */
  background: rgb(8 7 10 / .97);
}
.section-index__track {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  overflow-anchor: none;
  scroll-behavior: auto;
  scrollbar-width: none;
}
.section-index__track::-webkit-scrollbar { display: none; }
.section-index a {
  position: relative;
  flex: 0 0 auto;
  padding: 14px clamp(15px, 1.8vw, 26px) 13px;
  border-left: 1px solid var(--line-2);
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate-2);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.section-index a:last-child { border-right: 1px solid var(--line-2); }
.section-index a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.section-index a:hover { color: var(--bone); background: rgb(237 233 227 / .025); }
.section-index a[aria-current="location"] { color: var(--gold-2); }
.section-index a[aria-current="location"]::after { transform: scaleX(1); }
.section-index--isoqline a[aria-current="location"] { color: var(--isq-blue-2); }
.section-index--isoqline a::after { background: var(--isq-blue, #2F6F9F); }

/* Fragment navigation already inherits the main-nav clearance from
   html{scroll-padding-top}. Adding --nav-h again here double-counted the
   sticky header and stopped section-index clicks slightly before the target.
   Only add the small clearance required by the contextual index itself. */
section[id] { scroll-margin-top: 0; }
.section-index ~ section[id] { scroll-margin-top: 16px; }

/* The four domains share one pagehead grammar while keeping distinct visual
   pressure. The large number is navigational, not decorative branding. */
.domain-page {
  --domain-mark: "";
  --domain-glow: rgb(64 20 45 / .36);
  --domain-accent: var(--gold);
}
.engineering-page {
  --domain-mark: "01";
  --domain-glow: rgb(194 153 73 / .11);
}
.construction-page {
  --domain-mark: "02";
  --domain-glow: rgb(64 20 45 / .56);
}
.research-page {
  --domain-mark: "03";
  --domain-glow: rgb(64 20 45 / .68);
}

.pagehead--domain {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(74% 145% at 10% 46%, var(--domain-glow), transparent 67%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid var(--line);
}
.pagehead--domain::after {
  content: var(--domain-mark);
  position: absolute;
  z-index: -1;
  right: clamp(18px, 5vw, 82px);
  bottom: -.18em;
  font: 500 clamp(10rem, 24vw, 25rem)/.72 var(--display);
  letter-spacing: -.07em;
  color: rgb(194 153 73 / .035);
  pointer-events: none;
  user-select: none;
}
.domain-page .pagehead .label { color: var(--gold); }
.domain-page .pagehead .lead { max-width: 58ch; }

/* The former Research-specific watermark is superseded by the shared domain
   system, which makes Engineering / Construction / Research read as siblings. */
.research-page .pagehead::after { content: var(--domain-mark); }

/* Realisations: more photographic in tone, but still part of the same dossier
   system. */
.projects-page .pagehead--projects {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(62% 140% at 84% 35%, rgb(194 153 73 / .095), transparent 68%),
    radial-gradient(55% 110% at 12% 50%, rgb(64 20 45 / .40), transparent 72%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.projects-page .pagehead--projects::after {
  content: "R";
  position: absolute;
  z-index: -1;
  right: 5vw;
  bottom: -.18em;
  font: 500 clamp(10rem, 23vw, 23rem)/.72 var(--display);
  color: rgb(194 153 73 / .032);
}

/* Bureau: deliberately quieter than the product and domain pages. */
.bureau-page .pagehead--bureau {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 130% at 14% 48%, rgb(64 20 45 / .34), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid var(--line);
}
.bureau-page .pagehead--bureau::after {
  content: "AC&R";
  position: absolute;
  z-index: -1;
  right: 4vw;
  bottom: -.13em;
  font: 500 clamp(7rem, 17vw, 17rem)/.8 var(--display);
  letter-spacing: -.06em;
  color: rgb(194 153 73 / .028);
  white-space: nowrap;
}

/* Current item also appears in the full-screen mobile drawer. */
.drawer__link[aria-current="page"] { color: var(--gold-2); }
.drawer__link[aria-current="page"] span { color: var(--gold-3); }

@media (max-width: 700px) {
  .section-index a { padding-block: 13px 12px; font-size: .58rem; }
  .section-index__track { padding-inline: 0; }
  .pagehead--domain::after,
  .projects-page .pagehead--projects::after,
  .bureau-page .pagehead--bureau::after { opacity: .72; right: -2vw; }
}

/* ========================================================================== 
   28. V4.2 — Homepage allégée
   L’accueil redevient une porte d’entrée : manifeste, quatre domaines,
   une démonstration, une réalisation, un aperçu Software, puis CTA.
   ========================================================================== */

.home-v4--light .plate--home {
  padding-block: clamp(64px, 7.2vw, 118px);
}

.home-v4--light .plate--home .plate__head {
  margin-bottom: clamp(30px, 3.7vw, 56px);
}

.home-domain-intro {
  margin-bottom: clamp(34px, 4vw, 58px);
}

/* Une seule réalisation sur l’accueil : le dossier complet reste sur /projets. */
.home-project {
  padding-block: 0;
  border-top: 0;
}
.home-project__specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 20px;
}

/* Teaser Software compact : la capture illustre le produit sans transformer
   la homepage en fiche IsoQline. */
.home-software__grid {
  align-items: center;
}
.home-software__copy {
  max-width: 620px;
}
.home-software__prose {
  margin: 24px 0 28px;
}
.home-software__copy .btn-row {
  align-items: center;
}
.home-software__screen {
  box-shadow: 0 24px 70px rgb(0 0 0 / .24);
}
.home-software__screen img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

/* CTA final : pas de formulaire sur l’accueil. La page Contact porte le
   détail et les champs, la homepage ne conserve que l’intention. */
.home-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(76px, 8vw, 126px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(70% 160% at 8% 70%, rgb(64 20 45 / .42), transparent 66%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.home-cta::after {
  content: "AC&R";
  position: absolute;
  right: 3vw;
  bottom: -12%;
  font: 500 clamp(6rem, 15vw, 15rem)/.72 var(--display);
  letter-spacing: -.04em;
  color: rgb(194 153 73 / .026);
  pointer-events: none;
}
.home-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(34px, 5vw, 92px);
}
.home-cta__inner > div:first-child .label {
  margin-bottom: 18px;
}
.home-cta__action {
  align-self: end;
}
.home-cta__action .lead {
  margin-bottom: 28px;
}

@media (min-width: 900px) {
  .home-cta__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
  }
}

@media (max-width: 899px) {
  .home-v4--light .plate--home {
    padding-block: clamp(58px, 10vw, 86px);
  }
  .home-project__specs {
    grid-template-columns: 1fr;
  }
  .home-software__copy {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .home-cta {
    padding-block: 64px 72px;
  }
  .home-cta__action .btn-row .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ========================================================================== 
   31. V4.2.3 — Ingénierie : rythme éditorial resserré
   Test ciblé : conserver tout le contenu et la hiérarchie, mais réduire les
   respirations verticales héritées du système « planche technique ».
   ========================================================================== */

@media (min-width: 701px) {
  .engineering-page .plate {
    padding-block: clamp(60px, 6.4vw, 112px);
  }

  .engineering-page .plate--tight {
    padding-block: clamp(44px, 4.8vw, 76px);
  }

  .engineering-page .plate__head {
    margin-bottom: clamp(28px, 3.2vw, 48px);
  }

  /* Le CTA final reste une conclusion, pas une nouvelle « pleine page ». */
  .engineering-page > .plate:last-of-type {
    padding-block: clamp(64px, 6.8vw, 108px);
  }
}


/* ========================================================================== 
   32. V4.2.4 — Construction : continuité éditoriale & rythme photographique
   La preuve visuelle quitte l'ouverture de page pour devenir le §05 réel.
   §01–§04 sont resserrés, avec légèrement plus d'air qu'Ingénierie.
   ========================================================================== */

@media (min-width: 701px) {
  .construction-page .plate {
    padding-block: clamp(68px, 7.2vw, 124px);
  }

  .construction-page .plate--tight {
    padding-block: clamp(52px, 5.4vw, 86px);
  }

  .construction-page .plate__head {
    margin-bottom: clamp(30px, 3.5vw, 52px);
  }

  /* La galerie est une preuve de réalisation, pas une nouvelle pleine page
     pour chaque image : la première vue reste ample mais contenue. */
  .construction-page .construction-realisations {
    padding-block: clamp(58px, 6vw, 96px);
  }

  .construction-page .construction-gallery > figure:first-child img {
    aspect-ratio: 2 / 1;
    max-height: 60vh;
    object-fit: cover;
    object-position: center 52%;
  }

  /* La seconde grande vue conserve son rôle documentaire, puis les deux
     détails concluent la galerie en diptyque. */
  .construction-page .construction-gallery > figure:nth-child(2) {
    grid-column: 1 / -1;
  }

  .construction-page .construction-gallery > figure:nth-child(2) img {
    aspect-ratio: 16 / 9;
  }

  .construction-page > .plate:last-of-type {
    padding-block: clamp(70px, 7.2vw, 116px);
  }
}


/* ================================================================
   V4.3 — Ressources & Technical Notes
   ================================================================ */
.resources-head { padding-bottom: clamp(72px, 8vw, 126px); }
.resource-types {
  display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line-2);
}
.resource-types > div { min-width:0; padding:clamp(24px,3vw,42px); border-right:1px solid var(--line-2); }
.resource-types > div:last-child { border-right:0; }
.resource-types .mono { display:block; margin-bottom:28px; color:var(--gold); font-size:.68rem; }
.resource-types strong { display:block; margin-bottom:9px; color:var(--bone); font-weight:500; }
.resource-types p { color:var(--slate); line-height:1.65; font-size:var(--fs-small); }
.resource-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:32px; }
.resource-count { color:var(--gold-2); }
.resource-list { display:grid; gap:18px; }
.resource-card { border:1px solid var(--line-2); background:linear-gradient(145deg,rgba(64,20,45,.12),rgba(8,7,10,.12)); }
.resource-card__meta { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line-2); }
.resource-card__meta span { padding:10px 14px; border-right:1px solid var(--line-2); color:var(--slate-2); font:500 .62rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.resource-card__meta span:first-child { color:var(--gold-2); }
.resource-card h2,.resource-card h3 { color:var(--bone); font-family:var(--serif); font-weight:400; line-height:1.05; }
.resource-card h2 { font-size:clamp(2rem,3.1vw,3.9rem); max-width:17ch; }
.resource-card h3 { font-size:clamp(1.7rem,2.4vw,3rem); }
.resource-card--featured { padding-bottom:0; }
.resource-card--featured h3,.resource-card--featured > p { margin:clamp(22px,2.5vw,34px); }
.resource-card--featured > p { max-width:62ch; color:var(--slate); line-height:1.72; }
.resource-card__body { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:clamp(36px,6vw,90px); padding:clamp(28px,4vw,58px); }
.resource-card__body p { max-width:68ch; margin-top:18px; color:var(--slate); line-height:1.75; }
.resource-card__aside { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-top:6px; }
.resource-card__aside .label { border:1px solid var(--line-2); padding:7px 9px; }
.resource-card__aside .mono { margin-top:12px; color:var(--slate-2); font-size:.68rem; }
.resource-card__foot { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:15px 18px; border-top:1px solid var(--line-2); color:var(--slate-2); font:500 .64rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.resource-card__foot a { color:var(--gold-2); }
.resources-preview .resource-card { align-self:start; }

.article-head { padding:clamp(80px,9vw,148px) 0 clamp(68px,7vw,112px); border-bottom:1px solid var(--line-2); }
.article-shell { width:min(900px,calc(100% - 48px)); margin-inline:auto; }
.article-kicker { display:flex; justify-content:space-between; gap:20px; margin-bottom:34px; color:var(--gold-2); font:500 .68rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.article-head h1 { max-width:16ch; color:var(--bone); font-family:var(--serif); font-weight:400; font-size:clamp(3rem,6vw,6.9rem); line-height:.93; letter-spacing:-.035em; }
.article-deck { max-width:34ch; margin-top:32px; color:var(--bone-2); font:400 clamp(1.3rem,2vw,1.75rem)/1.45 var(--serif); font-style:italic; }
.article-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:42px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.article-meta span { padding:11px 16px 11px 0; margin-right:16px; color:var(--slate-2); font:500 .62rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.article-body { padding-block:clamp(64px,7vw,112px) 110px; color:var(--slate); font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.86; }
.article-body > p,.article-section > p { max-width:74ch; }
.article-body p + p { margin-top:1.15em; }
.article-body strong { color:var(--bone); font-weight:500; }
.article-lead { color:var(--bone); font:400 clamp(1.7rem,2.8vw,2.65rem)/1.25 var(--serif); }
.article-section { padding-top:clamp(82px,9vw,138px); scroll-margin-top:16px; }
.article-section__num { margin-bottom:12px!important; color:var(--gold); font:500 .66rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.article-section h2,.article-scope h2 { max-width:19ch; margin-bottom:34px; color:var(--bone); font:400 clamp(2.15rem,4vw,4.1rem)/1 var(--serif); letter-spacing:-.02em; }
.article-body blockquote { margin:38px 0; padding:22px 0 22px 28px; border-left:1px solid var(--gold); color:var(--bone-2); font:italic 400 clamp(1.25rem,2vw,1.7rem)/1.5 var(--serif); max-width:66ch; }
.equation { display:flex; align-items:center; justify-content:center; gap:.25em; margin:38px 0; padding:34px 18px; border-block:1px solid var(--line-2); color:var(--bone); font:400 clamp(1.6rem,3.2vw,3rem)/1.2 var(--serif); }
.frac,.sqrt-frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; font-size:.82em; line-height:1.1; }
.frac > span:first-child,.sqrt-frac > span:first-child { width:100%; padding-inline:.2em; border-bottom:1px solid currentColor; text-align:center; }
.tech-figure { margin:46px 0 52px; border:1px solid var(--line-2); background:rgba(255,255,255,.012); }
.tech-figure figcaption { display:flex; gap:16px; padding:13px 16px; border-top:1px solid var(--line-2); color:var(--slate-2); font:400 .67rem/1.5 var(--mono); }
.tech-figure figcaption span { color:var(--gold-2); white-space:nowrap; }
.neck-diagram { position:relative; height:330px; overflow:hidden; }
.neck-diagram__cavity { position:absolute; left:14%; right:14%; bottom:38px; height:170px; border:1px solid var(--gold); border-top:0; background:linear-gradient(180deg,rgba(64,20,45,.08),rgba(64,20,45,.2)); }
.neck-diagram__cavity span { position:absolute; left:20px; bottom:16px; color:var(--gold-2); font:500 .72rem var(--mono); }
.neck-diagram__plate { position:absolute; left:8%; right:8%; top:105px; height:14px; background:rgba(237,233,227,.16); border-block:1px solid rgba(237,233,227,.26); }
.neck-diagram__neck { position:absolute; left:50%; top:119px; width:64px; height:90px; transform:translateX(-50%); border-inline:1px solid var(--gold); }
.neck-diagram__neck::before,.neck-diagram__neck::after { content:""; position:absolute; left:-22px; right:-22px; height:1px; background:rgba(194,153,73,.32); }
.neck-diagram__neck::before { top:-22px; } .neck-diagram__neck::after { bottom:-22px; }
.neck-diagram__neck span { position:absolute; right:-68px; top:32px; color:var(--slate-2); font:500 .66rem var(--mono); }
.neck-diagram__eff { position:absolute; left:50%; top:48px; height:192px; border-left:1px dashed var(--gold-2); }
.neck-diagram__eff::before,.neck-diagram__eff::after { content:""; position:absolute; left:-5px; width:9px; height:1px; background:var(--gold-2); }
.neck-diagram__eff::before { top:0; } .neck-diagram__eff::after { bottom:0; }
.neck-diagram__eff span { position:absolute; left:15px; top:3px; white-space:nowrap; color:var(--gold-2); font:500 .66rem var(--mono); }
.damping-chart { display:block; width:100%; height:auto; padding:18px 14px 4px; }
.chart-axis { stroke:rgba(237,233,227,.2); stroke-width:1; }
.chart-guide { stroke:rgba(194,153,73,.28); stroke-width:1; stroke-dasharray:5 7; }
.curve { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.curve--1 { stroke:var(--gold-2); } .curve--2 { stroke:rgba(164,108,141,.86); } .curve--3 { stroke:rgba(237,233,227,.42); }
.damping-chart text { fill:var(--slate-2); font:12px var(--mono); }
.article-chain { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:34px 0; padding:22px 0; border-block:1px solid var(--line-2); color:var(--bone); font:500 .66rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.article-chain span { padding:9px 11px; border:1px solid var(--line-2); }
.article-chain i { color:var(--gold); font-style:normal; }
.article-scope { margin-top:clamp(92px,10vw,150px); padding:clamp(28px,4vw,52px); border:1px solid rgba(194,153,73,.32); background:rgba(64,20,45,.12); }
.article-scope h2 { font-size:clamp(1.9rem,3vw,3rem); }
.article-scope dl > div { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; padding:17px 0; border-top:1px solid var(--line-2); }
.article-scope dt { color:var(--gold-2); font:500 .64rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.article-scope dd { color:var(--slate); }
.article-references { margin-top:80px; padding-top:32px; border-top:1px solid var(--line-2); }
.article-references ol { margin:20px 0 0 20px; }
.article-references li { margin-bottom:12px; padding-left:6px; }
.article-end { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:72px; padding-top:32px; border-top:1px solid var(--line-2); }

@media (max-width: 1080px) {
  .nav__set--end .nav__link { padding-inline:8px; }
}
@media (max-width: 760px) {
  .resource-types { grid-template-columns:1fr; }
  .resource-types > div { border-right:0; border-bottom:1px solid var(--line-2); }
  .resource-types > div:last-child { border-bottom:0; }
  .resource-card__body { grid-template-columns:1fr; }
  .resource-card__aside { flex-direction:row; flex-wrap:wrap; }
  .resource-card__foot { align-items:flex-start; flex-direction:column; }
  .article-shell { width:min(100% - 34px,900px); }
  .article-head { padding-top:62px; }
  .article-head h1 { font-size:clamp(2.65rem,12vw,4.5rem); }
  .article-meta { display:grid; }
  .article-meta span { border-bottom:1px solid var(--line-2); margin:0; padding:9px 0; }
  .article-meta span:last-child { border-bottom:0; }
  .article-body { font-size:1rem; line-height:1.78; }
  .article-section { padding-top:78px; }
  .neck-diagram { height:280px; }
  .neck-diagram__cavity { left:8%; right:8%; }
  .neck-diagram__eff span { font-size:.58rem; }
  .article-scope dl > div { grid-template-columns:1fr; gap:8px; }
  .article-chain { align-items:flex-start; flex-direction:column; }
  .article-chain i { transform:rotate(90deg); margin-left:20px; }
}

/* --- V4.3.1 Software pass ----------------------------------------------- */
@media (min-width: 901px) {
  .software-page-v4 .software-principle {
    padding-block: clamp(64px, 7vw, 96px);
  }
  .software-page-v4 .software-principle .plate__head {
    margin-bottom: clamp(42px, 5vw, 68px);
  }
}
.software-page-v4 .diagram--suite svg {
  display: block;
  width: 100%;
  height: auto;
}
.software-page-v4 .diagram--suite .d-sub {
  font-size: 12px;
}
.software-page-v4 #produits-etat .modules {
  margin-top: 4px;
}

/* --- V4.3.2 Ecosystem / interoperability -------------------------------- */
.ecosystem-flow {
  background:
    radial-gradient(55% 70% at 90% 8%, rgb(64 20 45 / .18), transparent 72%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.ecosystem-flow__intro { margin-bottom: clamp(44px, 6vw, 84px); }
.ecosystem-flow__note { margin-top: 20px; color: var(--muted); max-width: 62ch; }
.workflow {
  position: relative;
  margin-top: clamp(34px, 4vw, 54px);
  border: 1px solid var(--line);
  background: rgb(255 255 255 / .012);
  overflow: hidden;
}
.workflow::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--wine-3));
}
.workflow--audio::before { background: linear-gradient(180deg, var(--wine-2), var(--gold)); }
.workflow__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 28px;
  align-items: end;
  padding: 26px 30px 24px;
  border-bottom: 1px solid var(--line-2);
}
.workflow__index {
  display: block; margin-bottom: 10px;
  font: 600 .68rem/1 var(--mono); letter-spacing: .16em; color: var(--gold);
}
.workflow__title {
  margin: 0;
  font: 500 clamp(1.65rem, 2.7vw, 2.65rem)/1 var(--display);
  letter-spacing: -.015em;
}
.workflow__head p {
  margin: 0; color: var(--muted); text-align: right;
  font: 400 .92rem/1.55 var(--sans);
}
.workflow__rail {
  display: grid;
  grid-template-columns: minmax(118px,1fr) 62px minmax(118px,1fr) 62px minmax(118px,1fr) 62px minmax(118px,1fr) 62px minmax(118px,1fr) 62px minmax(118px,1fr);
  align-items: stretch;
  padding: 30px;
}
.workflow-step {
  position: relative;
  min-height: 142px;
  padding: 20px 17px 16px;
  border: 1px solid var(--line-2);
  background: linear-gradient(145deg, rgb(255 255 255 / .025), transparent 65%);
}
.workflow-step::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: rgb(194 153 73 / .42);
}
.workflow-step--isoqline { border-color: rgb(47 111 159 / .55); background: linear-gradient(145deg, rgb(47 111 159 / .13), transparent 70%); }
.workflow-step--isoqline::after { background: #2F6F9F; }
.workflow-step--measure { border-color: rgb(194 153 73 / .50); }
.workflow-step__n {
  display: block; margin-bottom: 18px;
  font: 600 .62rem/1 var(--mono); letter-spacing: .12em; color: var(--muted-2);
}
.workflow-step strong {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5em; margin-bottom: 10px; text-align: center;
  font: 600 .84rem/1.25 var(--sans); color: var(--bone);
}
.workflow-step > span:last-child {
  display: block; color: var(--muted); font: 400 .72rem/1.45 var(--sans);
}
.workflow-transfer {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; padding-top: 2px;
}
.workflow-transfer i {
  position: absolute; left: 5px; right: 6px; top: 55%; height: 1px;
  background: linear-gradient(90deg, rgb(194 153 73 / .30), rgb(194 153 73 / .92));
}
.workflow-transfer i::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  width: 8px; height: 8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: rotate(45deg);
}
.workflow-transfer span {
  position: absolute; z-index: 1; left: 50%; top: calc(55% - 25px); transform: translateX(-50%);
  width: 76px; padding: 2px 3px; background: var(--ink); color: var(--gold-2); text-align: center;
  font: 500 .56rem/1.25 var(--mono); letter-spacing: .01em;
}
.workflow-transfer--iterative b {
  position: absolute; z-index: 1; left: 50%; top: calc(55% + 10px); transform: translateX(-50%);
  white-space: nowrap; color: rgb(194 153 73 / .68);
  font: 500 .50rem/1 var(--mono); letter-spacing: .035em;
}
.workflow-step--electro { border-color: rgb(194 153 73 / .40); }
.workflow-step--sono { border-color: rgb(64 20 45 / .82); background: linear-gradient(145deg, rgb(64 20 45 / .18), transparent 70%); }
.workflow__result {
  display: grid; grid-template-columns: 105px 1fr; gap: 20px;
  padding: 17px 30px 19px; border-top: 1px solid var(--line-2);
  background: rgb(64 20 45 / .12);
}
.workflow__result span { color: var(--gold); font: 600 .64rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.workflow__result strong { font: 400 .9rem/1.5 var(--sans); color: var(--text); }
.ecosystem-flow__benefits {
  display: grid; grid-template-columns: repeat(4,1fr);
  margin-top: clamp(34px, 4vw, 52px); border-block: 1px solid var(--line-2);
}
.ecosystem-flow__benefits span {
  padding: 17px 14px; text-align: center; color: var(--muted);
  font: 600 .67rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border-right: 1px solid var(--line-2);
}
.ecosystem-flow__benefits span:last-child { border-right: 0; }

@media (max-width: 1180px) {
  .workflow__rail {
    grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
  }
  .workflow-transfer { display: none; }
  .workflow-step { min-height: 132px; }
  .workflow-step::before {
    content: "→"; position: absolute; right: 12px; top: 12px;
    color: rgb(194 153 73 / .45); font: 400 1rem/1 var(--mono);
  }
  .workflow-step:nth-of-type(11)::before { display:none; }
}
@media (max-width: 720px) {
  .software-hero__copy { max-width: none; }
  .software-hero__tagline { max-width: 24ch; }
  .workflow__head { grid-template-columns: 1fr; padding: 22px 20px; }
  .workflow__head p { text-align: left; }
  .workflow__rail { grid-template-columns: 1fr; padding: 20px; gap: 10px; }
  .workflow-step { min-height: auto; padding: 16px 16px 15px 58px; }
  .workflow-step__n { position: absolute; left: 16px; top: 19px; margin: 0; }
  .workflow-step strong { min-height: 0; margin-bottom: 5px; }
  .workflow-step::before { content: "↓"; right: 14px; top: 15px; }
  .workflow__result { grid-template-columns: 1fr; gap: 7px; padding: 16px 20px 18px; }
  .ecosystem-flow__benefits { grid-template-columns: 1fr 1fr; }
  .ecosystem-flow__benefits span:nth-child(2) { border-right:0; }
  .ecosystem-flow__benefits span:nth-child(-n+2) { border-bottom:1px solid var(--line-2); }
}

/* --- Correctifs de tokens manquants ------------------------------------- */
/* `--serif` et `--bone-2` étaient utilisées par .resource-card, .article-*
   et .equation sans jamais être déclarées : la déclaration `font:` devenait
   invalide et les titres d'article perdaient famille ET taille. */
:root {
  --serif: var(--display);
  --bone-2: color-mix(in oklab, var(--bone) 78%, var(--slate));
}

/* --- Fiche de spécifications (IsoQline) --------------------------------- */

.specsheet { display: grid; gap: clamp(38px, 4.4vw, 66px); }
.specsheet__block { display: grid; gap: 20px; }

.specsheet__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.specsheet__id {
  flex: none;
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: .2em; color: var(--gold);
}
.specsheet__title {
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate-2);
}
.specsheet__scope {
  margin-left: auto;
  font: 400 .66rem/1.4 var(--mono);
  letter-spacing: .1em; color: var(--gold-3); text-align: right;
}

/* Équation compacte : la variante .equation de la note NT-001 est trop
   grande pour une fiche technique, où la formule est une donnée parmi
   d'autres et non le sujet de la page. */
.specsheet__equation {
  padding: 26px 18px;
  border: 1px solid var(--line-2);
  background: rgb(255 255 255 / .012);
  color: var(--bone);
  font: 400 clamp(.95rem, 1.9vw, 1.3rem)/1.7 var(--mono);
  text-align: center;
  overflow-x: auto;
}
.specsheet__equation small {
  display: block; margin-top: 12px;
  font-size: .72rem; color: var(--slate-2); letter-spacing: .04em;
}

@media (max-width: 640px) {
  .specsheet__head { flex-wrap: wrap; gap: 8px 14px; }
  .specsheet__scope { margin-left: 0; width: 100%; text-align: left; }
}

/* Garde-fou : dans un conteneur flex, un <sub>/<sup> nu devient un item
   autonome et l'indice se détache de sa lettre (« f 0 » au lieu de « f₀ »).
   Les grouper avec le texte qui précède est la seule correction fiable ;
   cette règle rattrape les cas où l'on aurait oublié le <span>. */
.equation > sub, .equation > sup,
.spec li > sub, .spec li > sup,
.kv dd > sub, .kv dd > sup {
  margin-left: -.25em;
}

/* --- Listes techniques et fiches clé/valeur sur écran étroit ------------- */
/* En dessous de ~620 px, deux colonnes flex n'ont plus la place : le terme
   se comprime en colonne d'un mot et la définition part hors cadre. Le flux
   normal (terme puis définition sur la même ligne, qui s'enroule) est plus
   lisible et supprime le débordement. */
@media (max-width: 620px) {
  .spec li { display: block; }
  .spec li::before { margin-right: 10px; }

  .kv > div { flex-direction: column; align-items: stretch; gap: 6px; }
  .kv .dots { display: none; }
  .kv dd { text-align: left; }
}

/* --- Matrice de décision (fiche produit) -------------------------------- */
/* Une question par ligne, un verdict à droite. Le verdict porte son texte :
   la couleur n'est jamais le seul porteur de l'information. */

.matrix { border-top: 1px solid var(--line); }
.matrix__row {
  display: flex; align-items: baseline; gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.matrix__q { font-size: var(--fs-small); line-height: 1.55; color: var(--bone); }
.matrix__v {
  /* Largeur commune : les verdicts forment une colonne, pas un escalier. */
  margin-left: auto; flex: none;
  min-width: 11.5ch; text-align: center;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  font: 500 .64rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.matrix__v--yes { color: var(--gold-2); border-color: var(--line-3); background: rgb(194 153 73 / .1); }
.matrix__v--part { color: var(--slate); border-color: var(--line-2); }
.matrix__v--no { color: var(--wine-3); border-color: rgb(122 42 85 / .42); }

@media (max-width: 560px) {
  .matrix__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .matrix__v { margin-left: 0; min-width: 0; }
}

/* --- Renvoi vers l'annexe technique ------------------------------------- */

.annexe-link {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 46px);
  margin-top: clamp(44px, 5vw, 76px);
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgb(64 20 45 / .32), transparent 62%);
}
.annexe-link .btn { margin-left: auto; flex: none; }

@media (max-width: 720px) {
  .annexe-link { flex-direction: column; align-items: flex-start; }
  .annexe-link .btn { margin-left: 0; }
}

/* Libellés de transfert du schéma d'écosystème : la largeur est fixée pour
   caler le diagramme, mais « caractérisation » ne tient pas sur une ligne et
   débordait du fond. La césure est autorisée plutôt que d'élargir la boîte,
   ce qui décalerait les colonnes voisines. */
.workflow-transfer span {
  overflow-wrap: break-word;
  hyphens: auto;
}