/* bureauduclic.ch — une feuille quadrillée bleue, encre marine, un plan isométrique où les
   anneaux respirent en sonar et où des cubes se relient. Le quadrillage est là dès le premier
   rendu, sans tracé d'entrée (Damien, 2026-09-04 : « affiche la grille directement »). */

/* ---------- Polices ---------- */

@font-face {
  font-family: "Omnes";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/omnes-medium.woff2) format("woff2");
}
@font-face {
  font-family: "Omnes";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/omnes-semibold.woff2) format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */

:root {
  --ink: #1f2536;
  --white: #ffffff;
  --rose: #fbe8f2;
  --blue: #c0d3eb;
  /* Papier bleu, motif blanc (Damien, 2026-09-04, « pour un moment ») ; le rose reste à portée.
     Sur l'encre, le texte est blanc : boutons et mot du logo. Changer --paper suffit. */
  --paper: var(--blue); /* le rose (var(--rose)) a été revu le 2026-09-04 et écarté : motif trop pâle dessus */
  --pattern: var(--white);
  --grid-line: color-mix(in oklab, var(--pattern) 70%, transparent);
  --ring: var(--pattern);
  --ring-base: 0.45;
  --ink-soft: color-mix(in oklab, var(--ink) 72%, var(--paper));

  /* Le module : conteneur de 12 colonnes, cellule de proportion --cell-ratio (7/6 sur la feuille
     de construction, 1 pour un carré). Sous 1152 px la cellule suit la fenêtre. */
  --cols: 12;
  --cell-ratio: 1;
  --cell-w: min(6rem, calc(100vw / var(--cols)));
  --cell-h: calc(var(--cell-w) * var(--cell-ratio));
  --site-w: calc(var(--cell-w) * var(--cols));
  --gutter: calc(var(--cell-w) / 2);
  --inset: 0.75rem;

  --font-display: "Omnes", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Rythme : tout multiple de 24 px, quatre lignes par cellule de 96 px. Les lignes du
     quadrillage tombent ainsi entre deux lignes de texte, jamais dedans. */
  --text: 1rem;
  --text-s: 0.9375rem;
  --text-l: 1.125rem;
  --leading: 1.5rem;
  --h3: 1.25rem;
  --h2: 2rem;
  --h1: 3rem;
}

/* ---------- Base ---------- */

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text) / var(--leading) var(--font-text);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: pretty;
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--leading);
}

strong {
  font-weight: 700;
}

/* ---------- Le plan isométrique ---------- */

/* Projection : rotateX(56°) puis rotateZ(-45°), sans perspective — donc une transformation
   affine 2D : x' = 0,70711 (x + y), y' = 0,39531 (y - x). Le calque, lui, reste plat et suit
   la page ; c'est ce qui permet de couvrir toute sa hauteur sans calque 3D géant. Le contenu
   reste à plat par-dessus ; il ne s'inscrit plus dans la grille, c'est le prix du relief. */
:root {
  --iso-x: 0.70711;
  --iso-y: 0.39531;
  --iso-cell: 6rem;
  --iso: matrix(0.70711, -0.39531, 0.70711, 0.39531, 0, 0);
}

.rings {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
  /* Fondu en haut et en bas de page : le motif s'atténue sous l'en-tête et avant le pied de
     page, comme un plan qui se prolonge à l'infini (Damien, 2026-09-04). Doux dans les deux
     sens (« moins violent ») : 40 % tout en haut, plein à 840 px ; plein jusqu'à 1 080 px du
     bas, 35 % au bord du pied de page. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.75) 360px, #000 840px, #000 calc(100% - 1080px), rgba(0, 0, 0, 0.35) calc(100% - 48px));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.75) 360px, #000 840px, #000 calc(100% - 1080px), rgba(0, 0, 0, 0.35) calc(100% - 48px));
}

/* Le quadrillage projeté est périodique : une tuile de 2·iso-x × 2·iso-y cellules contient
   exactement ses deux diagonales, une couche par famille de lignes. Les nœuds sont aux coins
   des tuiles, donc en (0, 0). Affiché tel quel au chargement. */
.rings::before,
.rings::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: calc(2 * var(--iso-x) * var(--iso-cell)) calc(2 * var(--iso-y) * var(--iso-cell));
}
.rings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23fff' stroke-opacity='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.rings::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23fff' stroke-opacity='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Les anneaux : neuf ellipses de rayons 1 à 9 cellules ---------- */

/* Les foyers du fond à 65 % : le sonar reste en retrait du réseau de cubes sans s'effacer
   (Damien, 2026-09-04 : 45 % choisi sur planche, puis « augmente la visibilité des sonars »).
   Le quadrillage, lui, garde sa pleine valeur. */
.rings .ripple {
  opacity: 0.65;
}
.ripple {
  position: absolute;
  width: calc(var(--iso-cell) * 18);
  height: calc(var(--iso-cell) * 18);
  margin: calc(-9 * var(--iso-cell)) 0 0 calc(-9 * var(--iso-cell));
  transform-origin: 50% 50%;
  transform: var(--iso);
  pointer-events: none;
}
.ripple svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ripple ellipse {
  cx: 50%;
  cy: 50%;
  rx: calc(var(--n) * var(--iso-cell));
  ry: calc(var(--n) * var(--iso-cell));
  fill: none;
  stroke: var(--ring);
  stroke-width: 1;
  opacity: var(--ring-base);
}
.ripple ellipse:nth-child(1) { --n: 1; }
.ripple ellipse:nth-child(2) { --n: 2; }
.ripple ellipse:nth-child(3) { --n: 3; }
.ripple ellipse:nth-child(4) { --n: 4; }
.ripple ellipse:nth-child(5) { --n: 5; }
.ripple ellipse:nth-child(6) { --n: 6; }
.ripple ellipse:nth-child(7) { --n: 7; }
.ripple ellipse:nth-child(8) { --n: 8; }
.ripple ellipse:nth-child(9) { --n: 9; }

/* Les foyers : le damier de neuf cellules du plan, mais chaque foyer est décalé de quelques
   cellules (toujours sur un nœud), un tiers est supprimé (un quart d'abord, puis quatre foyers
   de plus : « un peu moins de sonar », puis celui du bord gauche dont les anneaux passaient
   derrière les cubes ; les foyers 3 et 5 sont plafonnés pour la même raison — Damien,
   2026-09-04), le nombre d'anneaux varie et chaque
   foyer bat avec sa propre phase — sinon le réseau fait moquette (Damien, 2026-09-04). Deux
   foyers ne sont jamais à moins de 13 cellules l'un de l'autre, ni à moins de 560 px de
   hauteur dans la même colonne projetée. Coordonnées --u/--v en cellules du plan. */
.rings .ripple {
  left: calc(var(--iso-x) * (var(--u) + var(--v)) * var(--iso-cell));
  top: calc(var(--iso-y) * (var(--v) - var(--u)) * var(--iso-cell));
}
.rings .ripple:nth-child(1) { --u: 21; --v: 19; --phase: -2.8s; }
.rings .ripple:nth-child(1) ellipse:nth-child(n+6) { display: none; }
.rings .ripple:nth-child(2) { --u: 11; --v: 10; --phase: -1.0s; }
.rings .ripple:nth-child(3) { --u: -6; --v: 10; --phase: -2.9s; }
.rings .ripple:nth-child(3) ellipse:nth-child(n+7) { display: none; }
.rings .ripple:nth-child(4) { --u: 7; --v: 26; --phase: -3.1s; }
.rings .ripple:nth-child(4) ellipse:nth-child(n+6) { display: none; }
.rings .ripple:nth-child(5) { --u: -12; --v: 29; --phase: -0.0s; }
.rings .ripple:nth-child(5) ellipse:nth-child(n+6) { display: none; }
.rings .ripple:nth-child(6) { --u: -29; --v: 28; --phase: -3.1s; }
.rings .ripple:nth-child(6) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(7) { --u: -17; --v: 56; --phase: -2.2s; }
.rings .ripple:nth-child(7) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(8) { --u: -36; --v: 39; --phase: -0.7s; }
.rings .ripple:nth-child(9) { --u: -35; --v: 52; --phase: -0.9s; }
.rings .ripple:nth-child(10) { --u: -42; --v: 65; --phase: -0.9s; }
.rings .ripple:nth-child(11) { --u: -60; --v: 61; --phase: -1.5s; }
.rings .ripple:nth-child(11) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(12) { --u: -47; --v: 82; --phase: -0.2s; }
.rings .ripple:nth-child(12) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(13) { --u: -60; --v: 84; --phase: -1.3s; }
.rings .ripple:nth-child(13) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(14) { --u: -81; --v: 79; --phase: -0.1s; }
.rings .ripple:nth-child(14) ellipse:nth-child(n+6) { display: none; }
.rings .ripple:nth-child(15) { --u: -62; --v: 98; --phase: -2.7s; }
.rings .ripple:nth-child(15) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(16) { --u: -70; --v: 111; --phase: -2.9s; }
.rings .ripple:nth-child(16) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(17) { --u: -84; --v: 102; --phase: -3.0s; }
.rings .ripple:nth-child(17) ellipse:nth-child(n+8) { display: none; }
.rings .ripple:nth-child(18) { --u: -81; --v: 120; --phase: -0.6s; }
.rings .ripple:nth-child(18) ellipse:nth-child(n+6) { display: none; }
.rings .ripple:nth-child(19) { --u: -102; --v: 100; --phase: -1.3s; }
.rings .ripple:nth-child(19) ellipse:nth-child(n+6) { display: none; }

/* Sonar : aucune géométrie ne bouge. Une onde d'opacité part de chaque foyer et traverse ses
   anneaux l'un après l'autre ; chaque foyer a sa phase, et le retard négatif fait que le plan
   est déjà vivant au premier rendu. */
.rings ellipse {
  animation: sonar 3.5s cubic-bezier(0.3, 0, 0.5, 1) infinite;
  animation-delay: calc(var(--phase, 0s) + var(--n) * 0.18s - 3.5s);
}

@keyframes sonar {
  0%, 100% { opacity: var(--ring-base); stroke-width: 1; }
  7% { opacity: 1; stroke-width: 2; }
  26% { opacity: var(--ring-base); stroke-width: 1; }
}

/* ---------- Le réseau (posé par network.js) ---------- */

/* Deux calques : les faisceaux sous le contenu, comme le quadrillage ; les cubes au-dessus,
   sinon la boîte de <main> intercepterait les pointeurs. Les calques laissent passer les
   pointeurs, seuls les cubes se prennent. */
.network {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  touch-action: none;
}
.network--cubes {
  z-index: 2;
}
.network__cube {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.network__cube.is-dragging {
  cursor: grabbing;
}
/* Là où un clic poserait un cube, le curseur vise le nœud (classe posée par network.js) ;
   le « copier » avec son plus a été écarté (Damien, 2026-09-04). */
html.can-place {
  cursor: crosshair;
}
.network__packet {
  fill: var(--ink);
}
.network__packet--ring circle {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.network__packet--light path {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.network__packet--light .network__glow {
  stroke-width: 7;
  opacity: 0.35;
  filter: blur(3px);
}
.network__links path {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  opacity: 0.9;
}
.network__face {
  stroke: var(--white);
  stroke-width: 1;
  stroke-linejoin: round;
}
/* Les faces suivent le papier : blanc cassé dessus, papier ombré d'encre sur les côtés. */
.network__face--top {
  fill: color-mix(in oklab, var(--paper) 40%, var(--white));
}
.network__face--left {
  fill: color-mix(in oklab, var(--paper) 88%, var(--ink));
}
.network__face--right {
  fill: color-mix(in oklab, var(--paper) 75%, var(--ink));
}

/* ---------- En-tête ---------- */

.site-header {
  position: relative;
  z-index: 1;
  width: var(--site-w);
  min-height: var(--cell-h);
  margin-inline: auto;
  padding: 0 var(--inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  color: var(--ink);
  text-decoration: none;
}
.brand .logo {
  height: clamp(2.75rem, 2rem + 1.5vw, 3.5rem);
  width: auto;
  overflow: visible;
}
.logo__plate,
.logo__burst {
  fill: currentColor;
}
.logo__word {
  fill: var(--white);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.site-nav a {
  display: inline-block;
  padding: 0.6rem 0;
  font: 500 1rem / 1 var(--font-display);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
}

/* ---------- Sections : 12 colonnes, rail de 3, mesure de 7 ---------- */

main {
  position: relative;
  z-index: 1;
}

main > section {
  width: var(--site-w);
  margin-inline: auto;
  /* 168 px au-dessus, 72 en dessous : 240 px de vide entre deux blocs. Les cubes du réseau
     (network.js) en demandent 192 ; sans le réseau, 4 / 2 interlignes suffisent. */
  padding-block: calc(var(--leading) * 7) calc(var(--leading) * 3);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-w));
  align-content: start;
}

/* Le hero descend de deux interlignes de plus sous l'en-tête. */
main > section:first-child {
  padding-top: calc(var(--leading) * 9);
}

main > section > * {
  grid-column: 5 / 12;
  padding-inline: var(--inset);
}
main > section > .eyebrow {
  grid-column: 1 / 4;
}

.eyebrow {
  font: 500 var(--text-s) / var(--leading) var(--font-display);
  margin: 0;
  color: var(--ink-soft);
}


main > section > h2 {
  font-size: var(--h2);
  line-height: calc(var(--leading) * 1.75);
  letter-spacing: -0.005em;
  margin-bottom: var(--leading);
}
main > section > h2[id] {
  scroll-margin-top: var(--leading);
}

.lede {
  font-size: var(--text-l);
  line-height: calc(var(--leading) * 1.25);
}

.note {
  font: 500 var(--text) / var(--leading) var(--font-display);
}

main ul:not([class]) {
  list-style: none;
  padding: 0 var(--inset);
}
/* Tiret en guise de puce (Damien, 2026-09-04 : « un tiret, pas un carré »), aligné sur le
   bord du texte ; une demi-ligne entre deux entrées pour que la liste respire. */
main ul:not([class]) > li {
  position: relative;
  padding-left: 1.25rem;
}
main ul:not([class]) > li + li {
  margin-top: calc(var(--leading) / 2);
}
main ul:not([class]) > li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--leading) 1.5rem;
}
.cta > a {
  font: 600 var(--text) / var(--leading) var(--font-text);
  text-decoration: none;
}
.cta > a:not(.mail) {
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color 120ms ease, color 120ms ease;
}
.cta > a:not(.mail):hover {
  background: var(--paper);
  color: var(--ink);
}
.cta > a.mail {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Hero : le titre traverse la grille, le texte reste sur sept colonnes, les anneaux prennent la droite. */
[data-editable="hero"] > * {
  grid-column: 1 / 8;
}
[data-editable="hero"] > .eyebrow {
  grid-column: 1 / -1;
  padding-top: 0;
  margin-bottom: var(--leading);
}
[data-editable="hero"] > h1 {
  grid-column: 1 / 11;
  font-size: var(--h1);
  line-height: calc(var(--leading) * 2.25);
  letter-spacing: -0.01em;
  margin-bottom: var(--leading);
  text-wrap: balance;
}

/* Expertises : des rangées de la grille, titre sur 4 colonnes, texte sur 7. */
[data-editable="expertises"] > dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding: 0;
  margin: 0 0 var(--leading);
}
[data-editable="expertises"] dt,
[data-editable="expertises"] dd {
  margin: 0;
  padding: var(--leading) var(--inset);
}
[data-editable="expertises"] dt {
  grid-column: 1 / 5;
  font: 500 var(--h3) / calc(var(--leading) * 1.25) var(--font-display);
}
[data-editable="expertises"] dd {
  grid-column: 5 / 12;
}

/* Pour qui : six voix, trois par rangée de quatre colonnes. */
.quotes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  list-style: none;
  padding: 0;
}
.quotes > li {
  grid-column: span 4;
  padding: var(--leading) var(--inset);
  text-wrap: pretty;
}
.quotes > li::before {
  content: "« ";
}
.quotes > li::after {
  content: " »";
}

/* L'équipe : six colonnes chacun. */
.people {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  list-style: none;
  padding: 0;
}
.people > li {
  padding: var(--leading) var(--inset) 0;
}
.people > li:nth-child(1) {
  grid-column: 1 / 7;
}
.people > li:nth-child(2) {
  grid-column: 7 / 13;
}
.people h3 {
  font: 500 var(--h3) / calc(var(--leading) * 1.25) var(--font-display);
}
.people .role {
  color: var(--ink-soft);
}

/* Pages secondaires : les titres de rubrique restent dans la mesure. */
[data-editable="body"] > h2 {
  font-size: var(--h3);
  line-height: var(--leading);
  margin-top: var(--leading);
}
[data-editable="body"] > h2:first-child {
  margin-top: 0;
}

/* ---------- Pied de page : une ligne, petit texte, peu d'air ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--leading) * 7);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
}
.site-footer__inner {
  width: var(--site-w);
  margin-inline: auto;
  padding: calc(var(--leading) / 2) var(--inset);
}
.site-footer p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  line-height: var(--leading);
}
.site-footer a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer a:hover {
  border-bottom-color: var(--white);
}

/* ---------- Petits écrans : tout s'empile sur les douze colonnes ---------- */

@media (max-width: 45rem) {
  :root {
    --inset: var(--gutter);
    /* Douze colonnes sur 390 px : les anneaux se serrent, on les atténue. */
    --ring-base: 0.28;
  }

  /* Grille du plan plus serrée : cellule de 64 px au lieu de 96, anneaux et cubes suivent
     (les cubes gardent leur taille à l'écran, network.js compense). Les foyers, posés en
     cellules, remontent d'un tiers : les trois derniers sont redescendus pour couvrir le bas
     de la page, qui est plus longue sur mobile. */
  :root {
    --iso-cell: 4rem;
  }
  .rings .ripple:nth-child(17) { --u: -128; --v: 132; }
  .rings .ripple:nth-child(18) { --u: -150; --v: 152; }
  .rings .ripple:nth-child(19) { --u: -138; --v: 146; }

  /* En-tête sur deux rangées : le logo, puis le menu sur toute la largeur, quatre entrées
     réparties, une ligne de 48 px — un menu voulu, pas un retour à la ligne. */
  .site-header {
    padding: var(--leading) var(--gutter) 0;
    row-gap: 0;
    min-height: 0;
  }
  .brand {
    height: calc(var(--leading) * 2);
    align-items: center;
  }
  .site-nav {
    flex-basis: 100%;
  }
  .site-nav ul {
    justify-content: space-between;
    gap: 0;
  }
  .site-nav a {
    padding: calc(var(--leading) / 2) 0;
    font-size: var(--text-s);
    line-height: var(--leading);
    color: var(--ink);
  }

  /* Titres et respiration ramenés à l'échelle de l'écran (tour mobile du 2026-09-04) :
     h1 36/42 au lieu de 48/54, h2 28/36, 168 px entre deux blocs au lieu de 240. */
  main > section {
    padding-block: calc(var(--leading) * 5) calc(var(--leading) * 2);
  }
  main > section:first-child {
    padding-top: calc(var(--leading) * 6);
  }
  [data-editable="hero"] > h1 {
    font-size: 2.25rem;
    line-height: calc(var(--leading) * 1.75);
  }
  main > section > h2 {
    font-size: 1.75rem;
    line-height: calc(var(--leading) * 1.5);
  }
  .site-footer {
    margin-top: calc(var(--leading) * 5);
  }

  main > section > *,
  main > section > .eyebrow,
  [data-editable="hero"] > *,
  [data-editable="hero"] > h1,
  [data-editable="hero"] > .eyebrow {
    grid-column: 1 / -1;
  }
  main > section > .eyebrow {
    margin-bottom: 0.25rem;
  }

  [data-editable="expertises"] dt,
  [data-editable="expertises"] dd,
  .quotes > li,
  .people > li:nth-child(1),
  .people > li:nth-child(2) {
    grid-column: 1 / -1;
  }
  [data-editable="expertises"] dt {
    padding-bottom: 0;
  }
}

/* ---------- Mouvement réduit : tout est dessiné d'emblée ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ripple ellipse {
    animation: none !important;
    opacity: 0.7;
  }
  .cta > a:not(.mail) {
    transition: none;
  }
}