/* WAW, le dossier de COMEX. Styles du site (s'appuie sur tokens.css). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--tracker-h) + var(--s-6));
  caret-color: var(--lit);
  accent-color: var(--lit);
  scrollbar-color: var(--c-greige-600) var(--surface-sheet);
  scrollbar-width: thin;
  interpolate-size: allow-keywords;
  background: var(--surface-sheet);
}
html:has(.sommaire[open]) { overflow: hidden; }
@media (min-width: 64em) {
  html:has(.tracker--has-sub) { scroll-padding-top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-6)); }
}
body {
  margin: 0;
  background: var(--surface-sheet);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
::selection { background: var(--lit); color: var(--c-paper-100); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a, button, summary, label[for], select { touch-action: manipulation; }
button, summary, .btn { -webkit-user-select: none; user-select: none; }
p, dl, dd { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.icon { width: 1rem; height: 1rem; flex: none; display: inline-block; vertical-align: -0.15em; }

.skip {
  position: fixed;
  left: var(--g-margin);
  top: var(--s-3);
  z-index: 60;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink-900);
  color: var(--c-paper-100);
  font-size: var(--t-small);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.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;
}

/* Surfaces : grège (couverture), feuille claire, et un seul aplat encre par page (la fermeture).
   Chaque surface redéfinit ses rôles de texte et de filet : les composants n'ont qu'un jeu de couleurs. */
[data-surface="cover"] {
  background: var(--surface-cover);
  --text-muted: var(--text-muted-on-cover);
  --rule: var(--rule-on-cover);
}
[data-surface="sheet"] { background: var(--surface-sheet); }
[data-surface="ink"], .tracker[data-on="ink"] {
  --text: var(--text-on-ink);
  --text-muted: var(--text-muted-on-ink);
  --text-muted-on-cover: var(--text-muted-on-ink);
  --rule: var(--rule-on-ink);
  --rule-on-cover: var(--rule-on-ink);
  --rule-strong: var(--text-on-ink);
  --lit: var(--lit-on-ink);
  --lit-pressed: var(--c-greige-600);
  --focus: var(--lit-on-ink);
  --btn-bg: var(--btn-ink-bg);
  --btn-fg: var(--btn-ink-fg);
  --btn-bg-hover: var(--btn-ink-bg-hover);
}
[data-surface="ink"] { background: var(--surface-ink); color: var(--text); }
[data-surface="ink"] ::selection { background: var(--c-greige-500); color: var(--c-ink-900); }

/* ---------- Grille maître ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g-gutter);
  width: 100%;
  max-width: var(--g-max);
  margin-inline: auto;
  padding-inline: var(--g-margin);
}
@media (max-width: 47.99em) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Typographie ---------- */
.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display--page { font-size: clamp(2.25rem, 1.3rem + 3.3vw, 4.75rem); line-height: 1.04; }
.h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 36ch; text-wrap: pretty; }
.body-copy { max-width: 66ch; text-wrap: pretty; }
.body-copy p + p { margin-top: var(--s-4); }
.label { font-size: var(--t-label); font-stretch: 90%; font-weight: 500; letter-spacing: 0.012em; line-height: 1.35; }

/* ---------- Filet tracé : toute pièce [data-draw] porte un filet supérieur ---------- */
[data-draw] { position: relative; }
[data-draw]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--rule-w);
  background: var(--rule);
  transform-origin: left center;
  pointer-events: none;
}
[data-surface="cover"] [data-draw]::before { background: var(--rule-on-cover); }

/* Le filet qui ouvre une liste est à l'encre pleine ; les suivants restent atténués. */
.rows > :first-child::before, .index__list > :first-child::before, .offres > :first-child::before,
.convictions__list > :first-child::before, .direct > :first-child::before, .associes > :first-child::before { background: var(--rule-strong); }

/* ---------- Actions ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border: 0;
  border-radius: 0;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 500;
  font-stretch: 92%;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-hover) var(--e-out), color var(--d-hover) var(--e-out), transform var(--d-press) var(--e-out);
}
.btn--ink { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ink.is-lit { background: var(--lit); }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--btn-bg-hover); }
}
.btn:active { transform: scale(0.97); }
.btn--ink:active { background: var(--lit-pressed); }
.btn[aria-disabled="true"] { cursor: progress; }

.link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  font-size: var(--t-small);
  font-weight: 500;
  font-stretch: 92%;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--d-hover) ease;
}
/* Deux filets : l'ancien se retire vers la droite, le nouveau se trace depuis la gauche.
   Des transitions, pas des images clés : un survol interrompu repart de l'état affiché. */
.link-line::before, .link-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.6rem;
  height: var(--rule-w);
  background: currentColor;
}
.link-line::after { transform-origin: right center; transition: transform 220ms var(--e-out) 120ms; }
.link-line::before { transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .link-line:hover { color: var(--lit); }
  .link-line:hover::after { transform: scaleX(0); transition-delay: 0ms; }
  .link-line:hover::before { transform: scaleX(1); transition-duration: 320ms; transition-delay: 120ms; }
}
.link-line:active, .index__link:active .index__name, .direct__row a:active, .pied__contact a:active { color: var(--lit); }

/* ---------- Traqueur (en-tête) ---------- */
.tracker {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--tracker-bg, var(--surface-cover));
  /* Une seule durée pour le fond et pour tout ce qui est posé dessus : jamais de texte clair sur un fond encore clair. */
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
  view-transition-name: tracker;
}
.tracker__logo, .tracker__menu, .tracker__rail { transition: color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out); }
.tracker[data-on="cover"] { --tracker-bg: var(--surface-cover); }
.tracker[data-on="sheet"] { --tracker-bg: color-mix(in srgb, var(--surface-sheet) 92%, transparent); }
/* Sur l'aplat encre, l'en-tête passe en feuille : logo, liens, bouton clair, segment allumé en grège. */
.tracker[data-on="ink"] { --tracker-bg: var(--surface-ink); color: var(--text); }
@supports (backdrop-filter: blur(1px)) {
  .tracker[data-on="sheet"] { backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); }
}
.tracker__inner { position: relative; max-width: var(--g-max); margin-inline: auto; padding-inline: var(--g-margin); }
.tracker__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-6);
  height: var(--tracker-h);
}
.tracker__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.logo { height: var(--logo-h); width: auto; }
.tracker__now { display: none; }
.tracker__list { display: flex; justify-content: flex-end; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.tracker__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-label);
  font-weight: 500;
  font-stretch: 92%;
  letter-spacing: 0.014em;
  text-decoration: none;
  color: var(--text);
  transition: color var(--d-base) var(--e-out);
}
.tracker__link.is-lit, .tracker__link[aria-current="page"], .tracker__link[aria-current="true"] { color: var(--lit); }
@media (hover: hover) and (pointer: fine) { .tracker__link:hover { color: var(--lit); } }
.tracker__end { display: flex; align-items: center; gap: var(--s-5); }
.tracker__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-size: var(--t-label); font-weight: 500; font-stretch: 92%; letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--d-base) var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .tracker__lang:hover { color: var(--lit); } }
.tracker__cta { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--t-label); }
.tracker__cta[aria-current="page"] { background: var(--lit); }
.tracker__menu { display: none; }
.tracker__rdv { display: none; }
.tracker__rail {
  position: absolute;
  left: var(--g-margin); right: var(--g-margin); bottom: 0;
  height: var(--rule-w);
  background: var(--rule);
}
.tracker[data-on="cover"] .tracker__rail { background: var(--rule-on-cover); }
.tracker__lit {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: var(--rule-w);
  background: var(--lit);
  transform-origin: left center;
  transform: translateX(var(--lit-x, 0px)) scaleX(var(--lit-w, 0));
  transition: transform 420ms var(--e-in-out);
}

/* Sous-traqueur : les chapitres de la page en cours */
.tracker__sub { display: none; }
@media (min-width: 64em) {
  .tracker--has-sub .tracker__sub {
    position: relative;
    display: block;
    height: var(--tracker-sub-h);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tracker--has-sub .tracker__sub::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule-w); background: var(--rule-on-cover);
  }
  .tracker--has-sub[data-on="sheet"] .tracker__sub::before { background: var(--rule); }
  .tracker__sublist { display: flex; gap: var(--s-6); height: 100%; align-items: center; }
  .tracker__sublink {
    display: inline-flex; align-items: center; min-height: 36px;
    font-size: var(--t-label); font-stretch: 92%; text-decoration: none; white-space: nowrap;
    color: var(--text-muted-on-cover); transition: color var(--d-base) var(--e-out);
  }
  .tracker[data-on="sheet"] .tracker__sublink { color: var(--text-muted); }
  .tracker .tracker__sublink.is-lit { color: var(--text); }
  @media (hover: hover) { .tracker__sublink:hover { color: var(--text); } }
}

/* Sommaire plein écran (dialog natif, mobile et tablette) */
.sommaire {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--surface-cover);
  color: var(--text);
}
.sommaire::backdrop { background: transparent; }
.sommaire[open] { display: flex; flex-direction: column; animation: sommaire-in 300ms var(--e-out); }
@keyframes sommaire-in { from { opacity: 0; } to { opacity: 1; } }
.sommaire__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--tracker-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--g-margin) 0;
}
.sommaire__bar::after { content: ""; position: absolute; left: var(--g-margin); right: var(--g-margin); bottom: 0; height: var(--rule-w); background: var(--rule-on-cover); }
.sommaire__close {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 0 0 var(--s-3);
  background: none; border: 0; cursor: pointer;
  font-size: var(--t-label); font-weight: 500; font-stretch: 92%;
}
.sommaire__inner {
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8);
  padding: var(--s-7) var(--g-margin) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sommaire__list li { position: relative; }
.sommaire__list li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--rule-w); background: var(--rule-on-cover); }
.sommaire__list a {
  display: block;
  padding: var(--s-4) 0;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  line-height: 1.1;
  text-decoration: none;
}
.sommaire__list a[aria-current="page"] { color: var(--lit); }
.sommaire__foot { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-small); }
.sommaire__foot a { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }

.tracker__menu-icon { position: relative; width: 1.25rem; height: 0.5rem; display: inline-block; }
.tracker__menu-icon i {
  position: absolute; left: 0; right: 0; height: var(--rule-w); background: currentColor;
  transition: transform var(--d-base) var(--e-out), top var(--d-base) var(--e-out);
}
.tracker__menu-icon i:first-child { top: 0; }
.tracker__menu-icon i:last-child { top: calc(100% - 1px); }
.tracker__menu-icon.is-x i { top: calc(50% - 0.5px); }
.tracker__menu-icon.is-x i:first-child { transform: rotate(45deg); }
.tracker__menu-icon.is-x i:last-child { transform: rotate(-45deg); }

@media (max-width: 55.99em) {
  :root { --tracker-h: 3.5rem; }
  .tracker__row { grid-template-columns: auto 1fr auto; column-gap: var(--s-4); }
  .tracker__nav, .tracker__lang, .tracker__cta { display: none; }
  .tracker__now {
    display: block;
    justify-self: start;
    min-width: 0;
    max-width: 100%; /* sans plafond, un libellé long déborde sur « Nous contacter » */
    font-size: var(--t-label); font-weight: 500; font-stretch: 92%;
    color: var(--lit);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tracker__menu {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-3);
    min-width: 44px; min-height: 44px; padding: 0 0 0 var(--s-3);
    background: none; border: 0; cursor: pointer;
    font-size: var(--t-label); font-weight: 500; font-stretch: 92%;
  }
  /* Téléphone : le rendez-vous reste à un geste après la couverture ; le libellé du sommaire
     passe en texte masqué (le bouton garde son nom accessible et sa zone de 44 px). */
  .tracker__end { gap: var(--s-4); }
  .tracker__rdv {
    position: relative; display: inline-flex; align-items: center; min-height: 44px;
    font-size: var(--t-label); font-weight: 500; font-stretch: 92%; white-space: nowrap;
    text-decoration: none; color: var(--text); transition: color 100ms var(--e-out);
  }
  .tracker__rdv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.7rem; height: var(--rule-w); background: currentColor; }
  .tracker__rdv:active { color: var(--lit); }
  .tracker__menu-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Pièce (exhibit) et ligne de source ---------- */
.exhibit__frame { position: relative; overflow: hidden; background: var(--c-greige-400); }
.exhibit__img { width: 100%; height: auto; }
.source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  font-size: var(--t-label);
  font-stretch: 92%;
  line-height: 1.4;
  color: var(--text-muted);
}
.source__num { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
[data-surface="cover"] .source { color: var(--text-muted-on-cover); }

/* ---------- Couverture (accueil) ---------- */
.cover {
  overflow-x: clip;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--tracker-h) + env(safe-area-inset-top) + clamp(2rem, 5vh, 4rem));
  padding-bottom: var(--s-5);
}
.cover__grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
.cover__text { display: contents; }
/* Le titre de couverture est une phrase entière (texte de l'ancien site, à la demande de WAW) : un cran sous le display. */
.cover__title { grid-column: 1 / span 8; grid-row: 1; align-self: start; font-size: clamp(2rem, 1.15rem + 3.3vw, 4.75rem); }
.cover__lead { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--s-6); color: var(--text); }
.cover__actions { grid-column: 1 / span 6; grid-row: 4; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); }
.cover__exhibit {
  grid-column: 9 / -1; grid-row: 1 / 5; align-self: stretch;
  margin-top: calc(-1 * clamp(2rem, 5vh, 4rem));
  margin-right: calc(-1 * (var(--g-margin) + (100vw - min(100vw, var(--g-max))) / 2));
}
.cover__exhibit .exhibit__frame { height: 100%; min-height: 24rem; }
.cover__exhibit .exhibit__img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
@media (max-width: 63.99em) and (min-width: 48em) {
  .cover__title { grid-column: 1 / span 7; }
  .cover__lead, .cover__actions { grid-column: 1 / span 6; }
  .cover__exhibit { grid-column: 8 / -1; }
}
@media (max-width: 47.99em) {
  .cover { min-height: 0; padding-top: calc(var(--tracker-h) + env(safe-area-inset-top) + var(--s-6)); }
  .cover__grid { grid-template-rows: auto; }
  .cover__title, .cover__lead, .cover__actions, .cover__exhibit { grid-column: 1 / -1; grid-row: auto; }
  .cover__lead { margin-top: var(--s-5); }
  .cover__actions { margin-top: var(--s-6); }
  .cover__exhibit { margin: var(--s-8) calc(-1 * var(--g-margin)) 0; align-self: auto; }
  .cover__exhibit .exhibit__frame { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}

/* ---------- En-tête des pages intérieures ---------- */
.head {
  padding-top: calc(var(--tracker-h) + env(safe-area-inset-top) + var(--s-9));
  padding-bottom: var(--s-9);
}
@media (min-width: 64em) {
  .tracker--has-sub ~ main .head { padding-top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-9)); }
}
.head__title { grid-column: 1 / span 10; }
.head__lead { grid-column: 1 / span 6; margin-top: var(--s-6); color: var(--text-muted-on-cover); }
@media (max-width: 47.99em) {
  .head { padding-top: calc(var(--tracker-h) + env(safe-area-inset-top) + var(--s-7)); padding-bottom: var(--s-8); }
  .head__title, .head__lead { grid-column: 1 / -1; }
}

/* ---------- Rangées terme / texte ---------- */
.rows { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rows__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: var(--s-5) 0 var(--s-7); }
.rows__term { grid-column: 1 / span 5; }
.rows__text { grid-column: 7 / span 6; max-width: 62ch; text-wrap: pretty; }
.rows__text p + p { margin-top: var(--s-2); }
[data-surface="cover"] .rows__text { color: var(--text-muted-on-cover); }
[data-surface="sheet"] .rows__text { color: var(--c-ink-700); }
@media (max-width: 47.99em) {
  .rows__term, .rows__text { grid-column: 1 / -1; }
  .rows__text { margin-top: var(--s-3); }
}

/* ---------- Synthèse (accueil) ---------- */
.synthese { padding: var(--s-9) 0 var(--s-8); }
.synthese__grid { row-gap: var(--s-8); }
.synthese__title { grid-column: 1 / span 10; }
.synthese__body { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); color: var(--c-ink-700); }
@media (max-width: 63.99em) { .synthese__body { grid-column: 4 / -1; } }
@media (max-width: 47.99em) { .synthese__title, .synthese__body { grid-column: 1 / -1; } }

/* « Nous travaillons aux côtés de » : logos à l'encre, taille optique égale (--lh calculé par _tools/logos.js),
   sept par ligne sur ordinateur, jamais de légende sous un logo. */
.refs { grid-column: 1 / -1; margin-top: var(--s-6); padding-top: var(--s-5); }
/* Les mêmes logos en bas de What we do (demande de WAW, 4 novembre 2026). */
.refs-page { padding: var(--s-8) 0 var(--s-9); }
.refs-page .refs { margin-top: 0; }
.refs::before { background: var(--rule-strong); }
.refs__title { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.008em; }
.refs__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-6) var(--g-gutter); margin-top: var(--s-7); align-items: center; }
.refs__item { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; }
.refs__logo { width: 100%; height: var(--lh); object-fit: contain; }
@media (max-width: 63.99em) {
  .refs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6) var(--s-7); }
  .refs__item { width: 9rem; }
}
@media (max-width: 47.99em) {
  .refs__list { gap: var(--s-5) var(--s-4); margin-top: var(--s-6); }
  .refs__item { width: 6.25rem; min-height: 3.5rem; }
  .refs__logo { height: calc(var(--lh) * 0.8); }
}

/* ---------- Index des expertises (accueil) ---------- */
.index { padding: var(--s-9) 0 var(--s-8); }
.index__title { grid-column: 1 / span 9; margin-bottom: var(--s-8); }
.index__list { grid-column: 1 / span 7; grid-row: 2; border-bottom: var(--rule-w) solid var(--rule); }
.index__item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule-w);
  background: var(--text); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-base) var(--e-out);
}
.index__item.is-active::after { transform: scaleX(1); }
.index__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) 0 var(--s-5);
  text-decoration: none;
}
.index__name {
  grid-column: 1;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  line-height: 1.3; letter-spacing: -0.008em;
  color: var(--text-muted);
  transition: color var(--d-base) var(--e-out);
}
.index__offers { grid-column: 1; font-size: var(--t-small); line-height: 1.5; color: var(--text-muted); max-width: 62ch; }
.index__go {
  grid-column: 2; grid-row: 1; align-self: start; padding-top: 0.45rem;
  display: inline-flex; color: var(--text-muted);
  transition: color var(--d-base) var(--e-out);
}
.index__go .icon { transition: transform var(--d-base) var(--e-out); }
.index__item.is-active .index__name, .index__item.is-active .index__go { color: var(--text); }
.index__item.is-active .index__go .icon { transform: translateX(3px); }
.index__aside { grid-column: 9 / -1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--tracker-h) + var(--s-6)); }
.index__frame { aspect-ratio: 4 / 5; }
.index__plate { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms var(--e-out); }
.index__plate:not(.is-armed) { display: none; } /* non armée : ni affichée ni chargée (site.js arme les voisines) */
.index__plate.is-active { opacity: 1; }
.index__plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1800ms var(--e-out-soft); }
.index__plate.is-active img { transform: none; }
.index__more { margin-top: var(--s-4); }
@media (max-width: 63.99em) {
  .index__list { grid-column: 1 / -1; }
  .index__aside { grid-column: 1 / -1; grid-row: 3; position: static; }
  .index__exhibit { display: none; }
  .index__more { margin-top: var(--s-6); }
}

/* ---------- Équipe (accueil) ---------- */
.equipe { padding: var(--s-9) 0 var(--s-8); }
.equipe__title { grid-column: 1 / span 9; margin-bottom: var(--s-8); }
.equipe__exhibit { grid-column: 1 / -1; grid-row: 2; }
.equipe__exhibit .exhibit__frame { aspect-ratio: 21 / 9; }
.equipe__exhibit .exhibit__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.associes { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g-gutter); align-items: start; }
.associes__more { grid-column: 1 / -1; padding-top: var(--s-3); }
.associe { padding: var(--s-4) 0 var(--s-5); }
.associe__name { font-family: var(--f-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.3; }
.associe__role { margin-top: var(--s-1); font-size: var(--t-label); font-weight: 500; font-stretch: 92%; }
.associe__creds { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.5; color: var(--text-muted); }
.associes__more { padding-top: var(--s-3); }
@media (max-width: 63.99em) {
  .equipe__exhibit .exhibit__frame { aspect-ratio: 16 / 10; }
  .associes { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: var(--s-7); }
  .associes__more { grid-column: 1 / -1; padding-bottom: 0; }
}

/* ---------- Insight ---------- */
.insight { padding: var(--s-9) 0 var(--s-8); }
.insight__grid { align-items: end; }
.doc { grid-column: 2 / span 3; grid-row: 1; }
.doc--feature { grid-column: 1 / span 4; }
/* La couverture de la note est posée à plat, cernée d'un filet d'encre : pas d'ombre floue sur le site. */
.doc__frame { box-shadow: 0 0 0 var(--rule-w) var(--rule-strong); }
.insight__text { grid-column: 6 / span 7; grid-row: 1; }
.insight__label { margin-top: var(--s-4); color: var(--text-muted); }
[data-surface="cover"] .insight__label { color: var(--text-muted-on-cover); }
.insight__intro { margin-top: var(--s-6); max-width: 52ch; color: var(--c-ink-700); }
/* Deux notes à la suite : un filet les sépare, dans les marges de la grille. */
.insight--page + .insight--page { padding-top: 0; }
.insight--page + .insight--page .insight__grid { position: relative; padding-top: var(--s-8); }
.insight--page + .insight--page .insight__grid::before { content: ""; position: absolute; top: 0; left: var(--g-margin); right: var(--g-margin); height: var(--rule-w); background: var(--rule); }
.insight__questions { margin-top: var(--s-5); }
.insight__questions li {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem); line-height: 1.3;
  padding-bottom: 0.08em;
}
.insight__questions li + li { margin-top: var(--s-1); }
.insight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); }
/* Taille et langue de la note : sous la rangée d'actions sur grand écran, juste sous le bouton quand elles s'empilent. */
.insight__file { flex-basis: 100%; order: 3; margin-top: calc(var(--s-4) * -0.5); font-size: var(--t-label); color: var(--text-muted); }
@media (max-width: 47.99em) { .insight__file { order: 0; } }
[data-surface="cover"] .insight__intro { color: var(--text-muted-on-cover); }
@media (max-width: 63.99em) {
  .doc, .doc--feature { grid-column: 1 / span 5; }
  .insight__text { grid-column: 7 / -1; }
}
@media (max-width: 47.99em) {
  .doc, .doc--feature { grid-column: 1 / span 3; grid-row: 1; }
  .insight__text { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-7); }
}

/* Accueil : renvoi vers la table ronde, une rangée tracée sous la note. */
.ecoute {
  grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-7); padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6);
}
.ecoute::before { background: var(--rule-strong); }
.ecoute__text { max-width: 62ch; font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.35; text-wrap: pretty; }
.ecoute__meta { margin-left: var(--s-2); font-family: var(--f-sans); font-size: var(--t-label); font-weight: 500; font-stretch: 92%; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 47.99em) { .ecoute { grid-row: auto; flex-direction: column; } .ecoute__meta { display: block; margin: var(--s-1) 0 0; } }

/* ---------- Analyses : la table ronde « Regards croisés » ---------- */
.table-ronde { padding: var(--s-10) 0 var(--s-9); }
.table-ronde__grid { row-gap: 0; }
/* Plusieurs tables rondes : un épisode par bloc, séparés par un filet (4 novembre 2026). */
.table-ronde__grid + .table-ronde__grid { margin-top: var(--s-9); padding-top: var(--s-8); background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--g-margin)) var(--rule-w) no-repeat; }
.table-ronde__title { grid-column: 1 / span 8; grid-row: 1; }
.table-ronde__text { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--s-6); color: var(--text-muted); }
.table-ronde__text p + p { margin-top: var(--s-4); }
.convives { grid-column: 8 / -1; grid-row: 2 / 4; align-self: start; margin-top: var(--s-6); }
.convives > :first-child::before { background: var(--rule-strong); }
.convive { padding: var(--s-4) 0 var(--s-5); }
.convive__name { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: 1.375rem; line-height: 1.3; }
.convive__role { margin-top: var(--s-1); font-size: var(--t-small); line-height: 1.5; color: var(--text-muted); max-width: 40ch; }
.table-ronde__listen { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--s-8); }
.table-ronde__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin-top: var(--s-3); font-size: var(--t-label); font-stretch: 92%; color: var(--text-muted); }
.table-ronde__meta .link-line { color: var(--text); }
/* Invités : médaillon rond (portrait noir et blanc fourni par WAW), puis nom et rôle. */
.convive--photo { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: center; }
.convive__photo { display: block; width: 4.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-greige-500); }
.convive__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 63.99em) {
  .table-ronde__title { grid-column: 1 / span 10; }
  .table-ronde__text, .table-ronde__listen { grid-column: 1 / span 7; }
  .convives { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s-7); }
  .table-ronde__listen { grid-row: auto; }
}
@media (max-width: 47.99em) { .table-ronde__title, .table-ronde__text, .table-ronde__listen { grid-column: 1 / -1; grid-row: auto; } }

/* Lecteur : un bouton carré à l'encre, un filet de lecture d'un pixel avec un repère, le temps en chiffres tabulaires.
   Masqué sans JS (le lien vers Ausha suffit). Le bouton s'allume en bordeaux pendant la lecture. */
.lecteur { display: none; }
.js .lecteur { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-5); }
.lecteur__play {
  position: relative; display: inline-grid; place-items: center;
  width: var(--btn-h); height: var(--btn-h); padding: 0; border: 0; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: background-color var(--d-hover) var(--e-out), transform var(--d-press) var(--e-out);
}
.lecteur__play:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .lecteur__play:hover { background: var(--btn-bg-hover); } }
.lecteur.is-playing .lecteur__play { background: var(--lit); }
.lecteur__icon { grid-area: 1 / 1; display: inline-flex; transition: opacity 160ms var(--e-out), transform 160ms var(--e-out); }
.lecteur__icon .icon { width: 1.125rem; height: 1.125rem; }
.lecteur__icon--pause, .lecteur.is-playing .lecteur__icon--play { opacity: 0; transform: scale(0.8); }
.lecteur.is-playing .lecteur__icon--pause { opacity: 1; transform: none; }
.lecteur.is-loading .lecteur__play::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--rule-w);
  background: var(--btn-fg); transform-origin: left center; animation: sending 1.4s var(--e-in-out) infinite;
}
.lecteur__name { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: 1.0625rem; line-height: 1.3; }
.lecteur__time { font-size: var(--t-label); font-stretch: 92%; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); }
.lecteur__error { grid-column: 1 / -1; margin-top: var(--s-4); font-size: var(--t-small); color: var(--lit); }
.lecteur__seek {
  --p: 0%;
  display: block; width: 100%; height: 2.75rem; margin: 0; padding: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lecteur__seek::-webkit-slider-runnable-track {
  height: var(--rule-w);
  background: linear-gradient(to right, var(--text) 0 var(--p), var(--rule) var(--p) 100%);
}
.lecteur__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 2px; height: 1rem; margin-top: calc(-0.5rem + 0.5px);
  border: 0; border-radius: 0; background: var(--text);
}
.lecteur__seek::-moz-range-track { height: var(--rule-w); background: var(--rule); }
.lecteur__seek::-moz-range-progress { height: var(--rule-w); background: var(--text); }
.lecteur__seek::-moz-range-thumb { width: 2px; height: 1rem; border: 0; border-radius: 0; background: var(--text); }
.lecteur__seek:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Rendez-vous (accueil) ---------- */
.close { padding: var(--s-10) 0; }
.close__title { grid-column: 1 / span 10; }
.close__lead { grid-column: 1 / span 6; margin-top: var(--s-6); color: var(--text-muted); }
.close__lines { grid-column: 1 / -1; margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-7); }
.close__email, .close__phone {
  position: relative;
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
  min-height: 44px; display: inline-flex; align-items: center;
}
.close__email::after, .close__phone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: var(--rule-w);
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-base) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .close__email:hover, .close__phone:hover { color: var(--lit); }
  .close__email:hover::after, .close__phone:hover::after { transform: scaleX(1); }
}
.close__action { grid-column: 1 / -1; margin-top: var(--s-7); }
@media (max-width: 47.99em) { .close__title, .close__lead { grid-column: 1 / -1; } }

/* ---------- Le cabinet ---------- */
.manifeste { padding: var(--s-9) 0; }
.manifeste__label { grid-column: 1 / span 3; padding-top: 0.75rem; color: var(--text-muted); }
.manifeste__body {
  grid-column: 4 / span 8;
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem);
  line-height: 1.3; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.manifeste__body p + p { margin-top: var(--s-6); }
.manifeste__body .manifeste__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-top: var(--s-6); font-family: var(--f-sans); font-size: var(--t-small); letter-spacing: 0; }

/* « WAW en cinq questions » : titre tenu à gauche, questions sous filets à droite (réponses directes pour les moteurs). */
.questions { padding: var(--s-10) 0 var(--s-9); }
.questions__title { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-6)); }
.questions__list { grid-column: 6 / -1; }
.questions__list > :first-child::before { background: var(--rule-strong); }
.question { padding: var(--s-5) 0 var(--s-6); }
.question__q { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.008em; text-wrap: balance; }
.question__a { margin-top: var(--s-3); max-width: 62ch; color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 63.99em) {
  .questions__title { grid-column: 1 / -1; position: static; margin-bottom: var(--s-7); }
  .questions__list { grid-column: 1 / -1; }
}
@media (max-width: 47.99em) { .manifeste__label, .manifeste__body { grid-column: 1 / -1; } .manifeste__body { margin-top: var(--s-4); } }

/* Même respiration au-dessus et au-dessous de chaque conviction : le filet appartient au titre qu'il ouvre. */
.convictions { padding: var(--s-9) 0; }
.convictions__list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.conviction { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: var(--s-7) 0; }
.conviction:last-child { padding-bottom: 0; }
.conviction__title { grid-column: 1 / span 6; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); }
.conviction__text { grid-column: 7 / span 6; color: var(--text-muted-on-cover); }
@media (max-width: 47.99em) { .conviction__title, .conviction__text { grid-column: 1 / -1; } .conviction__text { margin-top: var(--s-4); } }

.team { padding: var(--s-9) 0 var(--s-9); }
.team__title { grid-column: 1 / span 8; }
/* Phrase d'accroche de l'équipe (texte WAW), puis la présentation reprise de l'ancien site. */
.team__statement { grid-column: 1 / span 8; margin-top: var(--s-7); font-family: var(--f-serif); font-weight: 400; font-size: var(--t-h2-small); line-height: 1.15; letter-spacing: -0.016em; text-wrap: balance; }
.team__pitch { grid-column: 1 / span 7; margin-top: var(--s-5); }
.team__intro { grid-column: 1 / span 7; margin-top: var(--s-6); color: var(--c-ink-700); }
.team__list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--s-9); margin-top: var(--s-9); }
.profil { grid-column: span 4; scroll-margin-top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-5)); }
/* Portraits serrés : le cadrage resserre sur le visage et les épaules, comme une planche contact. */
.profil__frame { aspect-ratio: 4 / 5; }
.profil__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; scale: 1.16; transform-origin: 50% 12%; }
.profil__name { margin-top: var(--s-5); }
.profil__role { margin-top: var(--s-1); font-size: var(--t-label); font-weight: 500; font-stretch: 92%; }
.profil__creds { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.5; color: var(--text-muted); }
.profil__bio { margin-top: var(--s-5); color: var(--c-ink-700); }
.profil__more { margin-top: var(--s-3); }
.profil__more summary {
  position: relative;
  display: inline-flex; align-items: center; min-height: var(--btn-h);
  font-size: var(--t-small); font-weight: 500; font-stretch: 92%;
  list-style: none; cursor: pointer; color: var(--text);
}
.profil__more summary::-webkit-details-marker { display: none; }
.profil__more summary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.6rem; height: var(--rule-w); background: currentColor;
}
@media (hover: hover) and (pointer: fine) { .profil__more summary:hover { color: var(--lit); } }
.profil__shut, .profil__more[open] .profil__open { display: none; }
.profil__more[open] .profil__shut { display: inline; }
.profil__rest { padding-top: var(--s-3); }
.profil__rest p + p { margin-top: var(--s-4); }
.profil__more::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 400ms var(--e-out), content-visibility 400ms allow-discrete;
}
.profil__more[open]::details-content { block-size: auto; }
@media (max-width: 63.99em) and (min-width: 48em) { .team__statement, .team__pitch, .team__intro { grid-column: 1 / span 10; } .profil { grid-column: span 6; } }
/* Côte à côte, les profils partagent leurs rangées (photo, nom, fonction, texte) : un nom sur deux lignes
   ne décale plus la fonction ni le texte de son voisin (retour de WAW, 4 novembre 2026). */
@media (min-width: 48em) {
  .team__list { row-gap: 0; }
  .profil { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
}
@media (max-width: 63.99em) and (min-width: 48em) { .profil:nth-child(n + 3) { margin-top: var(--s-9); } }
@media (max-width: 47.99em) { .team__title, .team__statement, .team__pitch, .team__intro, .profil { grid-column: 1 / -1; } .team__statement { margin-top: var(--s-6); } .team__intro { margin-top: var(--s-5); } }

/* ---------- Analyses : The Drop (fiches) ---------- */
.drops { padding: var(--s-9) 0 var(--s-9); }
.drops__title { grid-column: 1 / span 6; }
.drops__intro { grid-column: 1 / span 6; margin-top: var(--s-4); color: var(--text-muted); }
.drops__list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: var(--s-7); }
.drops__list > :first-child::before { background: var(--rule-strong); }
.drop-card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-top: var(--s-6); }
.drop-card__link { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-content: start; color: inherit; text-decoration: none; }
.drop-card__exhibit { grid-column: 1 / span 4; grid-row: 1 / span 4; }
.drop-card__frame { aspect-ratio: 4 / 5; }
.drop-card__frame .exhibit__img { width: 100%; height: 100%; object-fit: cover; }
.drop-card__label { grid-column: 6 / span 7; grid-row: 2; margin-top: var(--s-3); color: var(--text-muted); }
.drop-card__title {
  grid-column: 6 / span 7; grid-row: 1;
  font-family: var(--f-serif); font-weight: 400; font-size: var(--t-h2-small); line-height: 1.12; letter-spacing: -0.016em; text-wrap: balance;
  transition: color var(--d-hover) ease;
}
.drop-card__lead { grid-column: 6 / span 6; grid-row: 3; margin-top: var(--s-5); max-width: 56ch; color: var(--c-ink-700); text-wrap: pretty; }
.drop-card__more {
  grid-column: 6 / span 7; grid-row: 4; align-self: start; justify-self: start; margin-top: var(--s-6); padding-bottom: var(--s-1);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); font-weight: 500; font-stretch: 92%; letter-spacing: 0.01em;
  border-bottom: var(--rule-w) solid currentColor;
  transition: color var(--d-hover) ease;
}
.drop-card__more .icon { transition: transform var(--d-base) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .drop-card__link:hover .drop-card__title, .drop-card__link:hover .drop-card__more { color: var(--lit); }
  .drop-card__link:hover .drop-card__more .icon { transform: translateX(3px); }
}
.drop-card__link:active .drop-card__title { color: var(--lit); }
@media (max-width: 63.99em) {
  .drop-card__exhibit { grid-column: 1 / span 5; }
  .drop-card__label, .drop-card__title, .drop-card__lead, .drop-card__more { grid-column: 7 / -1; }
}
@media (max-width: 47.99em) {
  .drops__title, .drops__intro { grid-column: 1 / -1; }
  .drop-card__exhibit { grid-column: 1 / span 3; grid-row: auto; margin-bottom: var(--s-6); }
  .drop-card__label, .drop-card__title, .drop-card__lead, .drop-card__more { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Article (The Drop) ---------- */
/* Spécificité doublée : ces rangées passent avant celles de .head--exhibit, déclarées plus bas. */
.head--exhibit.head--article .head__grid { grid-template-rows: auto auto auto 1fr; }
.head--article .head__meta { grid-column: 1 / span 8; grid-row: 3; margin-top: var(--s-6); color: var(--text-muted-on-cover); }
.head--article .head__meta a { color: var(--text); text-underline-offset: 0.25em; text-decoration-thickness: var(--rule-w); }
@media (hover: hover) and (pointer: fine) { .head--article .head__meta a:hover { color: var(--lit); } }
.head--exhibit.head--article .head__title { grid-row: 1; font-size: clamp(2rem, 1.25rem + 2.4vw, 3.75rem); line-height: 1.08; }
.head--exhibit.head--article .head__lead { grid-row: 2; }
.head--exhibit.head--article .head__exhibit { grid-row: 1 / 5; }
.article__cover .exhibit__frame { aspect-ratio: 4 / 5; }
.article__cover .exhibit__img { width: 100%; height: 100%; object-fit: cover; }
.article { padding: var(--s-9) 0 var(--s-9); }
.article__body { grid-column: 3 / span 7; max-width: 42rem; }
.article__body > * + * { margin-top: var(--s-4); }
.article__body > .article__h2 { margin-top: var(--s-8); }
.article__body > .article__h3 { margin-top: var(--s-6); }
.article__body > .article__h3 + * { margin-top: var(--s-3); }
.article__h2 {
  padding-top: var(--s-4); border-top: var(--rule-w) solid var(--rule-strong);
  font-family: var(--f-serif); font-weight: 400; font-size: var(--t-h2-small); line-height: 1.15; letter-spacing: -0.014em; text-wrap: balance;
}
.article__n { display: block; margin-bottom: var(--s-3); font-family: var(--f-sans); font-size: var(--t-label); font-weight: 500; font-stretch: 90%; letter-spacing: 0.012em; color: var(--text-muted); }
.article__h3 { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: 1.3125rem; line-height: 1.3; text-wrap: balance; }
.article__quote {
  padding-left: var(--s-5); border-left: var(--rule-w) solid var(--rule-strong);
  font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.3; text-wrap: pretty;
}
.article__body > .article__quote { margin-block: var(--s-6); }
.article__case { padding: var(--s-4) var(--s-5); background: color-mix(in srgb, var(--c-greige-400) 38%, transparent); font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-700); }
.article__list { padding-left: 0; list-style: none; counter-reset: point; }
.article__list li { position: relative; padding-left: 1.75rem; }
.article__list li + li { margin-top: var(--s-3); }
.article__list--ul li::before { content: "/"; position: absolute; left: 0.2rem; color: var(--text-muted); }
.article__list--ol li { counter-increment: point; }
.article__list--ol li::before { content: counter(point); position: absolute; left: 0; font-family: var(--f-serif); font-weight: var(--w-serif-small); color: var(--text-muted); }
.article__list strong { font-weight: 600; color: var(--text); }
.article__body > .article__figure { margin-block: var(--s-8); }
.article__figure .exhibit__frame { aspect-ratio: 4 / 3; }
.article__figure .exhibit__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.article__back { grid-column: 3 / span 7; margin-top: var(--s-8); }
@media (max-width: 63.99em) { .article__body, .article__back { grid-column: 1 / span 10; } }
@media (max-width: 47.99em) {
  .head--article .head__meta { grid-column: 1 / -1; grid-row: auto; }
  .head--exhibit.head--article .head__grid { grid-template-rows: none; }
  .head--exhibit.head--article .head__title, .head--exhibit.head--article .head__lead, .head--exhibit.head--article .head__exhibit { grid-row: auto; }
  .head--exhibit.head--article .head__exhibit { grid-column: 1 / -1; margin-top: var(--s-7); }
  .article__body, .article__back { grid-column: 1 / -1; }
}

/* Point de cadrage des photos de domaine recadrées (cadre 4/5 sur grand écran, 16/10 sur mobile). */
.focus-bas { object-position: 50% 92%; }
.focus-porte { object-position: 72% 78%; }

/* ---------- Expertises ---------- */
.domaines { padding: var(--s-9) 0 var(--s-8); }
.domaines__aside { grid-column: 1 / span 5; }
.domaines__sticky { position: sticky; top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-6)); }
.domaines__frame { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--tracker-h) - var(--tracker-sub-h) - 4rem); margin-inline: auto; }
.domaines__list { grid-column: 7 / span 6; }
.domaine { padding-bottom: var(--s-9); scroll-margin-top: calc(var(--tracker-h) + var(--tracker-sub-h) + var(--s-5)); }
.domaine__exhibit { display: none; }
.domaine__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); margin-bottom: var(--s-6); }
.offre { padding: var(--s-5) 0 var(--s-6); }
.offre__title { font-family: var(--f-serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.3; text-wrap: balance; }
.offre__text { margin-top: var(--s-3); max-width: 60ch; color: var(--c-ink-700); text-wrap: pretty; }
.offre__toggle { display: none; }
@media (max-width: 63.99em) {
  .domaines__aside { display: none; }
  .domaines__list { grid-column: 1 / -1; }
  .domaine__exhibit { display: block; max-width: 34rem; margin-bottom: var(--s-7); }
  .domaine__exhibit .exhibit__frame { aspect-ratio: 16 / 10; }
  .domaine__exhibit .exhibit__img { width: 100%; height: 100%; object-fit: cover; }
  .domaine { scroll-margin-top: calc(var(--tracker-h) + var(--s-5)); }
}
/* Téléphone : chaque intervention se replie derrière son titre (la page passe de 16 000 à environ 6 000 px). */
@media (max-width: 47.99em) {
  .js .offre { padding: 0; }
  .js .offre__name { display: none; }
  .js .offre__toggle {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
    width: 100%; min-height: 3.5rem; padding: var(--s-4) 0;
    background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; color: inherit; text-wrap: balance;
  }
  .js .offre__toggle { transition: color 100ms var(--e-out); }
  .js .offre__toggle:active { color: var(--lit); } /* retour dès l'appui, pas au relâché */
  .js .offre__toggle .icon { margin-top: 0.3em; transition: transform 280ms var(--e-out); }
  .js .offre.is-open .offre__toggle .icon { transform: rotate(45deg); }
  /* Dépliage : hauteur vers auto (interpolate-size, hérité de html) et fondu ; la fermeture est plus brève.
     Replié, le texte est masqué aux lecteurs d'écran (visibility), après la fin du repli. */
  .js .offre__text {
    margin-top: 0; overflow: clip;
    transition: height 280ms var(--e-out), opacity 240ms var(--e-out) 40ms, visibility 0s;
  }
  .js .offre__copy { padding-bottom: var(--s-5); } /* l'espace vit dans le contenu : seule la hauteur s'anime */
  .js .offre:not(.is-open) .offre__text {
    height: 0; opacity: 0; visibility: hidden;
    transition: height 200ms var(--e-out), opacity 120ms var(--e-out), visibility 0s 200ms;
  }
}
.methode { padding: var(--s-9) 0 var(--s-10); }
.methode__title { grid-column: 1 / span 8; margin-bottom: var(--s-7); }
@media (max-width: 47.99em) { .methode__title { grid-column: 1 / -1; } }

/* ---------- Étape suivante ---------- */
.next { padding: var(--s-8) 0 var(--s-9); }
.next__link {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  padding-top: var(--s-6);
  text-decoration: none;
}
.next__title { grid-column: 1 / span 8; font-family: var(--f-serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance; transition: color var(--d-base) var(--e-out); }
.next__text { grid-column: 1 / span 6; margin-top: var(--s-3); color: var(--text-muted); }
.next__cue {
  grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-small); font-weight: 500; font-stretch: 92%;
}
.next__cue .icon { transition: transform var(--d-base) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .next__link:hover .next__title, .next__link:hover .next__cue { color: var(--lit); }
  .next__link:hover .next__cue .icon { transform: translateX(4px); }
}
.next__link:active .next__cue .icon { transform: translateX(6px); }
@media (max-width: 47.99em) {
  .next__title, .next__text, .next__cue { grid-column: 1 / -1; }
  .next__cue { grid-row: auto; justify-self: start; margin-top: var(--s-5); }
}

/* ---------- Contact ---------- */
.contact { padding: var(--s-9) 0 var(--s-10); }
.contact__aside { grid-column: 10 / -1; grid-row: 1; align-self: start; position: sticky; top: calc(var(--tracker-h) + var(--s-6)); }
.discretion { padding-top: var(--s-5); }
.discretion::before { background: var(--rule-strong); }
.discretion__statement { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.discretion__note { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--text-muted); max-width: 32ch; }
.direct__row { padding: var(--s-4) 0 var(--s-5); }
.direct__row dt { color: var(--text-muted); }
.direct__row dd { margin-top: var(--s-2); }
.direct__row a, .direct__value {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  font-family: var(--f-serif); font-weight: 300; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  text-decoration: none; overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) { .direct__row a:hover { color: var(--lit); } }
.form, .form__done { grid-column: 1 / span 8; grid-row: 1; }
.form__title { margin-bottom: var(--s-2); }
.form__note { font-size: var(--t-label); color: var(--text-muted); }
.form__standalone { margin-top: var(--s-5); padding: var(--s-4) 0; border-block: var(--rule-w) solid var(--rule); font-size: var(--t-small); }
.form__summary { margin-top: var(--s-5); padding: var(--s-4) 0; border-block: var(--rule-w) solid var(--lit); color: var(--lit); font-size: var(--t-small); }
.form__summary:focus { outline: none; }
.form__summary ul { margin-top: var(--s-2); }
.form__summary a { display: inline-flex; min-height: 32px; align-items: center; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--g-gutter); margin-top: var(--s-7); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--t-small); font-weight: 500; line-height: 1.4; margin-bottom: var(--s-2); }
.field__req { color: var(--text); }
.field__opt { font-weight: 400; color: var(--text-muted); }
.field__help { margin: calc(-1 * var(--s-1)) 0 var(--s-2); font-size: var(--t-label); color: var(--text-muted); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 var(--s-4);
  font-family: var(--f-sans);
  font-size: max(16px, 1rem);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-field);
  border: var(--rule-w) solid var(--field-border);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.field textarea { min-height: 11rem; padding: var(--s-3) var(--s-4); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-ink-700); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--text); background: var(--surface-field-focus); }
.field [aria-invalid="true"] { border-color: var(--lit) !important; }
.field__select { position: relative; }
.field__select select { padding-right: var(--s-7); cursor: pointer; }
.field__select::after {
  content: ""; position: absolute; right: var(--s-4); top: 50%;
  width: 0.5rem; height: 0.5rem; margin-top: -0.375rem;
  border-right: var(--rule-w) solid var(--text); border-bottom: var(--rule-w) solid var(--text);
  transform: rotate(45deg); pointer-events: none;
}
.field__err { margin-top: var(--s-2); font-size: var(--t-small); color: var(--lit); }
.field--check .check { display: flex; align-items: flex-start; gap: var(--s-3); }
.field--check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; cursor: pointer; }
.field--check label { font-weight: 400; margin: 0; cursor: pointer; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__actions { margin-top: var(--s-7); }
.form__submit[aria-disabled="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: var(--rule-w); width: 100%;
  background: var(--lit); transform-origin: left center; animation: sending 1.4s var(--e-in-out) infinite;
}
@keyframes sending { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.form__status { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); min-height: 1.5em; }
.form__error { margin-top: var(--s-3); font-size: var(--t-small); color: var(--lit); }
.form__done { padding-top: var(--s-6); }
.form__done:focus { outline: none; }
.form__done p { max-width: 28ch; }
@media (max-width: 63.99em) {
  .contact__aside { grid-column: 1 / -1; grid-row: auto; position: static; }
  .discretion__note { max-width: 52ch; }
  .form, .form__done { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s-8); }
}
@media (max-width: 47.99em) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- Pages légales et 404 ---------- */
.legal { padding: var(--s-8) 0 var(--s-10); }
.lost { padding: var(--s-8) 0 var(--s-10); }
.lost__list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-7); }

/* ---------- Pied ---------- */
/* Le pied prolonge l'aplat encre ouvert par l'étape suivante (ou par le rendez-vous sur l'accueil). */
.pied { padding: 0 0 calc(var(--s-5) + env(safe-area-inset-bottom)); }
.pied__grid { position: relative; row-gap: var(--s-8); padding-top: var(--s-9); }
.pied__grid::before { content: ""; position: absolute; top: 0; left: var(--g-margin); right: var(--g-margin); height: var(--rule-w); background: var(--rule); }
main > [data-surface="ink"]:last-child { padding-bottom: var(--s-9); }
/* Accueil : le rendez-vous juste au-dessus porte déjà l'e-mail et le téléphone. */
.page-home .pied__contact { display: none; }
.page-home .pied__signature { grid-column: 1 / -1; }
.pied__signature {
  grid-column: 1 / span 8;
  display: flex; flex-wrap: wrap; gap: 0 0.28em;
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  line-height: 1.02; letter-spacing: -0.024em;
}
.pied__words { position: relative; display: inline-grid; padding-bottom: 0.1em; }
.pied__word { grid-area: 1 / 1; font-style: italic; opacity: 0; }
.pied__word.is-on { opacity: 1; }
.pied__contact { grid-column: 9 / -1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); font-size: var(--t-small); }
.pied__contact a { text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; gap: var(--s-2); }
/* E-mail et téléphone dans la même taille et la même typo (retour de WAW). */
.pied__email, .pied__phone { font-family: var(--f-serif); font-size: var(--t-h3); }
@media (hover: hover) and (pointer: fine) { .pied__contact a:hover, .pied__base a:hover { color: var(--lit); } }
.pied__base {
  position: relative;
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6);
  padding-top: var(--s-4);
  font-size: var(--t-label); font-stretch: 92%; color: var(--text-muted-on-cover);
}
.pied__base::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule-w); background: var(--rule-on-cover); }
.pied__base a { text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.pied__rights { margin-right: auto; }
.pied__mono { height: 0.875rem; width: auto; color: var(--text); }
@media (max-width: 47.99em) {
  .pied__signature, .pied__contact { grid-column: 1 / -1; }
  .pied__rights { flex-basis: 100%; order: -1; margin: 0; }
  .pied__mark { display: none; }
}


/* Mobile : toute pièce de la grille reprend la pleine largeur (une colonne de lecture),
   sauf les exceptions voulues ci-dessous. Évite les colonnes implicites. */
@media (max-width: 47.99em) {
  .grid > * { grid-column: 1 / -1; }
  .grid > .doc { grid-column: 1 / span 3; }
}

/* ---------- En-têtes à pièce (gabarit maître des pages intérieures) ---------- */
.head--exhibit .head__grid { grid-template-rows: auto auto 1fr auto; }
.head--exhibit .head__title { grid-column: 1 / span 8; grid-row: 1; }
.head--exhibit .head__lead { grid-row: 2; }
.head__exhibit { grid-column: 9 / -1; grid-row: 1 / 4; align-self: end; }
.head__source { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s-8); }
.head__exhibit .direct__row a, .head__exhibit .direct__value { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); }
@media (max-width: 63.99em) and (min-width: 48em) {
  .head--exhibit .head__title { grid-column: 1 / span 7; }
  .head--exhibit .head__exhibit { grid-column: 8 / -1; }
}
@media (max-width: 47.99em) {
  .head--exhibit .head__grid { grid-template-rows: auto; }
  .head--exhibit .head__title, .head--exhibit .head__lead, .head__exhibit, .head__source { grid-column: 1 / -1; grid-row: auto; }
  .head__exhibit { margin-top: var(--s-8); }
  .head__source { margin-top: var(--s-5); flex-direction: column; gap: var(--s-1); }
}

/* ---------- Le cabinet : la signature WAW en pièce typographique ---------- */
.sig__lead { margin-bottom: var(--s-4); color: var(--text-muted); }
.sig__word {
  padding: var(--s-2) 0 var(--s-1);
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.625rem);
  line-height: 1.12; letter-spacing: -0.02em;
}
.sig__w { font-style: normal; font-weight: 400; }
/* Les mots arrivent avec leurs filets, après le titre : la pièce ne passe pas devant la conclusion. */
.motion .sig__word { opacity: 0; transform: translateY(0.35em); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out); transition-delay: calc(var(--delay, 0ms) + 80ms); }
.motion .sig__word.is-in { opacity: 1; transform: none; }
.sig__list > :first-child::before { background: var(--rule-strong); }
@media (max-width: 47.99em) {
  .sig__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g-gutter); }
  .sig__word { font-size: 2rem; }
  .sig__list > :nth-child(2)::before { background: var(--rule-strong); }
}

/* ---------- Expertises : un grand « 6 » et le sommaire des domaines ---------- */
.head--six .head__grid { grid-template-rows: auto auto auto; }
.head--six .head__title { grid-column: 1 / span 8; grid-row: 1; }
.head--six .head__lead { grid-row: 2; }
.six__num {
  grid-column: 9 / -1; grid-row: 1 / 3; justify-self: end; align-self: end;
  margin-bottom: -0.05em;
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(10rem, 2rem + 28vw, 32rem);
  line-height: 0.74; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}
.six__num span { display: block; }
.six { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-9); }
.six__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g-gutter); }
.six__list > .six__item::before { background: var(--rule-strong); }
.six__link { display: flex; flex-direction: column; gap: var(--s-2); min-height: 44px; padding: var(--s-4) 0 var(--s-2); text-decoration: none; }
.six__n { font-size: var(--t-label); font-stretch: 92%; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); }
.six__label { font-family: var(--f-serif); font-weight: var(--w-serif-small); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.3; text-wrap: balance; transition: color var(--d-hover) ease; }
@media (hover: hover) and (pointer: fine) { .six__link:hover .six__label { color: var(--lit); } }
.six__link:active .six__label { color: var(--lit); }
.motion .six__num span { opacity: 0; transform: translateY(6%); transition: opacity 1200ms var(--e-out), transform 1400ms var(--e-out); transition-delay: var(--delay, 0ms); }
.motion .six__num.is-in span { opacity: 1; transform: none; }
@media (max-width: 63.99em) {
  .head--six .head__title { grid-column: 1 / span 9; }
  .six__num { grid-column: 10 / -1; font-size: clamp(8rem, 2rem + 16vw, 14rem); }
  .six__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); }
}
@media (max-width: 47.99em) {
  .head--six .head__grid { grid-template-rows: auto; }
  .head--six .head__title, .head--six .head__lead, .six__num, .six { grid-column: 1 / -1; grid-row: auto; }
  .six__num { justify-self: start; margin-top: var(--s-7); font-size: 9.5rem; }
  .six { margin-top: var(--s-6); }
  .six__list { grid-template-columns: 1fr; row-gap: 0; }
  .six__link { flex-direction: row; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; }
  .six__n { min-width: 1.25rem; }
}

/* La couverture porte le seul élément allumé de la première vue : l'action. */
.cover .cover__actions .btn--ink { background: var(--lit); }
@media (hover: hover) and (pointer: fine) { .cover .cover__actions .btn--ink:hover { background: var(--lit-pressed); } }
.cover .cover__actions .btn--ink:active { background: var(--lit-pressed); }

/* Petits titres en serif : graisse 500 pour que les déliés tiennent à l'écran. */
.associe__name, .offre__title, .index__name, .direct__row a, .direct__value, .pied__email, .pied__phone, .profil__name { font-weight: var(--w-serif-small); }
@media (max-width: 47.99em) { .h3 { font-weight: var(--w-serif-small); } }

/* Toucher : chaque cible fait au moins 44 px de haut au doigt (WCAG 2.5.5, Apple), sans changer le dessin. */
@media (pointer: coarse), (max-width: 47.99em) {
  .pied__contact a, .pied__base a, .sommaire__foot a, .tracker__sublink, .tracker__cta { min-height: 44px; }
}

/* ---------- Le reflet du verre ----------
   La lumière d'un verre de vin rouge posée sur la nappe : sous le manifeste du cabinet
   et sur l'aplat encre de fin de page. Le canevas vit sous le contenu. */
[data-reflet] { position: relative; isolation: isolate; overflow: clip; }
[data-reflet] > .grid { position: relative; z-index: 1; }
.reflet { position: absolute; z-index: 0; display: block; pointer-events: none; }
.manifeste .reflet { left: 30%; top: 2%; width: 66%; height: 96%; }
.close .reflet { left: 40%; top: 0; width: 64%; height: 100%; }
.pied .reflet { left: -6%; top: 0; width: 66%; height: 100%; }
@media (max-width: 47.99em) {
  .manifeste .reflet { left: -25%; top: 10%; width: 150%; height: 85%; }
  .close .reflet { left: -20%; top: 34%; width: 140%; height: 66%; }
  .pied .reflet { left: -25%; width: 150%; height: 72%; }
}
/* Sans WebGL : la même tache, immobile, en dégradé. */
.reflet--css { background: radial-gradient(ellipse 42% 38% at 50% 52%, var(--reflet-fallback-sheet), transparent 72%); }
.close .reflet--css, .pied .reflet--css { background: radial-gradient(ellipse 42% 38% at 50% 52%, var(--reflet-fallback-ink), transparent 72%); }

/* ---------- Mouvement (armé seulement si JS et mouvement autorisé) ---------- */
.motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.motion [data-split] .w > span { display: inline-block; transform: translateY(108%); transition: transform 1100ms var(--e-out); transition-delay: calc(var(--i) * 32ms + var(--delay, 0ms) + 80ms); }
.motion [data-split].is-in .w > span { transform: none; }
.motion [data-rise] { opacity: 0; transform: translateY(0.75rem); transition: opacity 600ms var(--e-out), transform 600ms var(--e-out); transition-delay: var(--delay, 0ms); }
.motion [data-rise].is-in { opacity: 1; transform: none; }
.motion [data-exhibit] .exhibit__frame { clip-path: inset(0 0 100% 0); transition: clip-path 1400ms var(--e-out); transition-delay: var(--delay, 0ms); }
.motion [data-exhibit] .exhibit__img { transform: scale(1.06); transition: transform 2200ms var(--e-out-soft); transition-delay: var(--delay, 0ms); }
.motion [data-exhibit].is-in .exhibit__frame { clip-path: inset(0 0 0 0); }
.motion [data-exhibit].is-in .exhibit__img { transform: none; }
.motion .doc[data-exhibit] .exhibit__frame { clip-path: none; opacity: 0; transform: translateY(1.5rem); transition: opacity 1000ms var(--e-out), transform 1400ms var(--e-out); }
.motion .doc[data-exhibit].is-in .exhibit__frame { opacity: 1; transform: none; }
.motion [data-draw]::before { transform: scaleX(0); transition: transform var(--d-draw) var(--e-out); transition-delay: var(--delay, 0ms); }
.motion [data-draw].is-in::before { transform: scaleX(1); }
.motion .pied__word { transform: translateY(0.14em); transition: opacity 480ms var(--e-out), transform 480ms var(--e-out); }
.motion .pied__word.is-on { transform: none; }
.motion .pied__word.is-out { transform: translateY(-0.06em); transition-duration: 280ms; }

/* ---------- Signature : lecture pilotée au défilement ----------
   Hors couverture et en-têtes, les filets se tracent et les pièces se dévoilent au rythme exact
   du défilement, dans les deux sens. Amélioration progressive : sans animation-timeline,
   les entrées uniques ci-dessus restent. Les textes ne sont jamais pilotés (lisibilité). */
@supports (animation-timeline: view()) {
  .motion section:not(.cover, .head) [data-draw], .motion nav.next [data-draw] { view-timeline: --rule block; }
  .motion section:not(.cover, .head) [data-draw]::before, .motion nav.next [data-draw]::before {
    transition: none;
    animation: rule-draw linear both;
    animation-timeline: --rule;
    animation-range: entry 10% cover 32%;
  }
  .motion section:not(.cover, .head) [data-exhibit] { view-timeline: --exhibit block; }
  .motion section:not(.cover, .head) [data-exhibit]:not(.doc) .exhibit__frame {
    transition: none;
    animation: frame-reveal linear both;
    animation-timeline: --exhibit;
    animation-range: entry 0% cover 42%;
  }
  .motion section:not(.cover, .head) [data-exhibit]:not(.doc) .exhibit__img {
    transition: none;
    animation: plate-settle linear both;
    animation-timeline: --exhibit;
    animation-range: entry 0% contain 40%;
  }
  .motion section:not(.cover, .head) .doc[data-exhibit] .exhibit__frame {
    transition: none;
    animation: doc-lift linear both;
    animation-timeline: --exhibit;
    animation-range: entry 0% cover 38%;
  }
}
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes frame-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes plate-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes doc-lift { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }

/* Transitions entre pages du dossier : l'en-tête reste, la page change. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--e-in-out) both; }
::view-transition-new(root) { animation: vt-in 560ms var(--e-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(0.75rem); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  /* Mouvement réduit ne veut pas dire aucun repère : les fondus courts restent, sans déplacement ni flou. */
  .index__plate { transition: opacity 200ms ease !important; }
  .sommaire[open] { animation-duration: 200ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .tracker[data-on="sheet"] { --tracker-bg: var(--surface-sheet); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root {
    --rule: color-mix(in srgb, var(--c-ink-900) 60%, transparent);
    --rule-on-cover: color-mix(in srgb, var(--c-ink-900) 70%, transparent);
    --text-muted: var(--c-ink-700);
    --text-muted-on-cover: var(--c-ink-900);
    --field-border: var(--c-ink-900);
    --rule-on-ink: color-mix(in srgb, var(--c-paper-100) 60%, transparent);
    --text-muted-on-ink: var(--c-paper-100);
  }
}

/* ---------- Passe luxe (3 novembre 2026) ----------
   Finition d'agence sur le monde existant : plus d'air dans la couverture, des actions qui se posent comme
   un trait d'encre, des logos et des photos qui répondent au survol, une couverture qui prend de la profondeur
   au défilement, un fil de lecture sur les articles. Rien de nouveau dans la charte : mêmes couleurs, mêmes
   angles droits, aucune ombre. */

/* Couverture : un cran d'air au-dessus du titre, un titre un peu moins massif, un chapeau plus serré. */
@media (min-width: 48em) {
  .cover { padding-top: calc(var(--tracker-h) + env(safe-area-inset-top) + clamp(2.5rem, 8vh, 6rem)); }
  .cover__exhibit { margin-top: calc(-1 * clamp(2.5rem, 8vh, 6rem)); }
}
.cover__title { font-size: clamp(2rem, 1.1rem + 3.05vw, 4.375rem); letter-spacing: -0.032em; line-height: 1.04; }
.cover__lead { max-width: 34ch; color: var(--c-ink-700); }

/* Actions : l'encre se pose de gauche à droite au survol et se retire vers la droite, comme un trait de plume.
   Le fond de repos ne change pas : c'est la couche posée par-dessus qui porte la couleur de survol. */
.btn { isolation: isolate; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--btn-bg-hover));
  transform: scaleX(0); transform-origin: right center;
  transition: transform 460ms var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--btn-bg); }
  .btn:hover::after { transform: scaleX(1); transform-origin: left center; }
  .cover .cover__actions .btn--ink:hover { background: var(--lit); }
}
.cover .cover__actions .btn--ink { --btn-fill: var(--lit-pressed); }

/* En-tête : l'appel n'est plus un bloc plein mais un filet, pour laisser au logo et au titre le poids de la vue.
   Au survol, l'encre le remplit ; sur l'aplat encre, le papier. La page Contact le garde allumé. */
.tracker__cta:not([aria-current="page"]) { background: transparent; color: var(--text); box-shadow: inset 0 0 0 var(--rule-w) currentColor; --btn-fill: var(--btn-bg); }
.tracker__cta:not([aria-current="page"])::after { transition-duration: 380ms; }
@media (hover: hover) and (pointer: fine) {
  .tracker__cta:not([aria-current="page"]):hover { background: transparent; color: var(--btn-fg); box-shadow: inset 0 0 0 var(--rule-w) var(--btn-bg); }
}
.tracker__cta { transition: color 380ms var(--e-out), box-shadow 380ms var(--e-out), background-color var(--d-base) var(--e-out); }

/* Logos : un ton à peine sous l'encre (ce ne sont pas des liens, ils ne réagissent pas au survol) ; à l'arrivée, ils se posent l'un après l'autre. */
.refs__logo { opacity: 0.85; }
.motion .refs__list[data-rise] { opacity: 1; transform: none; }
.motion .refs__list .refs__item { opacity: 0; transform: translateY(0.5rem); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out); transition-delay: calc(var(--n, 0) * 45ms + 120ms); }
.motion .refs__list.is-in .refs__item { opacity: 1; transform: none; }

/* Index des domaines : la rangée lue avance d'un cran vers sa flèche. */
.index__name { transition: color var(--d-base) var(--e-out), translate 520ms var(--e-out); }
.index__item.is-active .index__name { translate: 0.375rem 0; }

/* Photos qui se regardent de près : un rapprochement lent au survol (propriété scale, distincte du
   transform des entrées, pour que les deux ne se gênent pas). */
.drop-card__exhibit .exhibit__img, .insight .doc .exhibit__img, .profil__exhibit .exhibit__img, .equipe__exhibit .exhibit__img {
  transition: transform 2200ms var(--e-out-soft), scale 1400ms var(--e-out);
}
.motion .drop-card__exhibit[data-exhibit] .exhibit__img, .motion .insight .doc[data-exhibit] .exhibit__img,
.motion .profil__exhibit[data-exhibit] .exhibit__img, .motion .equipe__exhibit[data-exhibit] .exhibit__img {
  transition: transform 2200ms var(--e-out-soft), scale 1400ms var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .drop-card__link:hover .exhibit__img, .insight .doc:hover .exhibit__img, .equipe__exhibit:hover .exhibit__img { scale: 1.035; }
  .profil:hover .profil__frame img { scale: 1.2; }
}

/* Couverture : la photo se rapproche un peu à mesure qu'on descend (aucune translation : pas de parallaxe) ;
   entière au repos ; propriété scale, indépendante de l'entrée. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cover__exhibit .exhibit__img { animation: cover-drift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}
@keyframes cover-drift { from { scale: 1; } to { scale: 1.05; } }

/* Fil de lecture des articles : le segment allumé de l'en-tête suit la lecture de la page. */
.tracker__read { display: none; }
@supports (animation-timeline: scroll()) {
  .tracker__read {
    display: block; position: absolute; inset: 0;
    background: var(--lit);
    transform-origin: left center;
    animation: read-progress linear both; animation-timeline: scroll(root block);
  }
  .tracker[data-on="ink"] .tracker__read { background: var(--lit-on-ink); }
  .tracker__rail:has(.tracker__read) .tracker__lit { opacity: 0; }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Lecture : ponctuation suspendue là où le navigateur la sait (Safari), césure jamais forcée. */
.body-copy, .article__body { hanging-punctuation: first allow-end last; }

@media (prefers-reduced-motion: reduce) {
  .motion .refs__list .refs__item { transform: none; }
  .index__item.is-active .index__name { translate: none; }
  .tracker__read { animation: read-progress linear both; animation-timeline: scroll(root block); animation-duration: auto !important; }
}

/* Couverture : le passage en italique, dans la même serif (graisse 300, assez grande pour ses déliés),
   comme les mots soulignés des credentials WAW. Les jambages descendants de l'italique (p, g) gardent leur place. */
.cover__title em { font-style: italic; font-weight: 300; letter-spacing: -0.02em; }
.motion [data-split] .w--em { padding-bottom: 0.2em; margin-bottom: -0.2em; }

/* Appel de l'en-tête pressé (au doigt, sans survol) : rempli d'encre, texte papier, jamais encre sur bordeaux. */
.tracker__cta:not([aria-current="page"]):active { background: var(--btn-bg); color: var(--btn-fg); }

/* Formulaire : la confirmation et le récapitulatif d'erreurs arrivent par un fondu court (retour d'action). */
@media (prefers-reduced-motion: no-preference) {
  .form__done:not([hidden]), .form__summary:not([hidden]) { animation: form-state-in 360ms var(--e-out) both; }
}
@keyframes form-state-in { from { opacity: 0; transform: translateY(0.375rem); } }

/* Cible du lien « The Drop #1 » sous le chapeau : au moins 24 px de haut (WCAG 2.5.8), 44 px au doigt. */
.head--article .head__meta a { display: inline-flex; align-items: center; min-height: 1.75rem; }
@media (pointer: coarse) { .head--article .head__meta a { min-height: 44px; } }

/* Finition du mouvement (revue du 3 novembre) : la sortie est plus rapide que l'entrée.
   Remplissage des boutons 360 ms à l'entrée, 240 ms au retrait ; appel de l'en-tête 300 / 200 ms ;
   rangée de l'index 300 ms ; rapprochement des photos 1400 ms à l'aller, 700 ms au retour. */
.btn::after { transition-duration: 240ms; }
.tracker__cta:not([aria-current="page"])::after { transition-duration: 200ms; }
.tracker__cta { transition: color 200ms var(--e-out), box-shadow 200ms var(--e-out), background-color var(--d-base) var(--e-out); }
.index__name { transition: color var(--d-base) var(--e-out), translate 300ms var(--e-out); }
.drop-card__exhibit .exhibit__img, .insight .doc .exhibit__img, .profil__exhibit .exhibit__img, .equipe__exhibit .exhibit__img,
.motion .drop-card__exhibit[data-exhibit] .exhibit__img, .motion .insight .doc[data-exhibit] .exhibit__img,
.motion .profil__exhibit[data-exhibit] .exhibit__img, .motion .equipe__exhibit[data-exhibit] .exhibit__img {
  transition: transform 2200ms var(--e-out-soft), scale 700ms var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transition-duration: 360ms; }
  .tracker__cta:not([aria-current="page"]):hover { transition-duration: 300ms; }
  .tracker__cta:not([aria-current="page"]):hover::after { transition-duration: 300ms; }
  .drop-card__link:hover .exhibit__img, .insight .doc:hover .exhibit__img, .equipe__exhibit:hover .exhibit__img, .profil:hover .profil__frame img {
    transition: transform 2200ms var(--e-out-soft), scale 1400ms var(--e-out);
  }
}
@media (hover: hover) and (pointer: fine) {
  .motion .drop-card__link:hover .drop-card__exhibit[data-exhibit] .exhibit__img,
  .motion .insight .doc[data-exhibit]:hover .exhibit__img,
  .motion .equipe__exhibit[data-exhibit]:hover .exhibit__img,
  .motion .profil:hover .profil__exhibit[data-exhibit] .exhibit__img {
    transition: transform 2200ms var(--e-out-soft), scale 1400ms var(--e-out);
  }
}

/* Bouton pressé à la souris : la couche de survol prend la teinte pressée (bordeaux profond ; grège profond sur l'encre). */
@media (hover: hover) and (pointer: fine) {
  .btn--ink:active::after { background: var(--lit-pressed); transition: none; }
  /* Appel de l'en-tête : le texte ne pâlit qu'une fois l'encre posée sous lui. */
  .tracker__cta:not([aria-current="page"]):hover { transition: color 140ms var(--e-out) 150ms, box-shadow 300ms var(--e-out); }
}