/* =========================================================================
   SOLUXA — Landing
   Système : grotesque suisse (Archivo) · filets 1px · blanc / gris / navy
   ========================================================================= */

/* ---------- Tokens ----------
   Palette imposée par le client : bleu très foncé #030c1d, gris clair #f3f5f7,
   gris #808080 et jaune #d2ee49. Le jaune ne porte jamais de texte sur fond
   clair (1.3:1) : il ne sert que de trait, de point et de fond. */
:root {
  /* Surfaces */
  --paper: #ffffff;
  --paper-2: #f3f5f7; /* gris clair des sections */
  --paper-3: #e9edf1;
  --navy: #030c1d; /* bleu très foncé */
  --navy-deep: #030c1d;
  --navy-line: #2a3242;
  /* Le bleu de marque est presque noir : il ne se lit pas comme un bleu dans un
     petit corps. Ce bleu-ci est là pour être vu — 5,3:1 sur le gris clair. */
  /* --blue-mark: #1b4f9e; */
  --blue-mark: #030c1d;

  /* Encres */
  --ink: #030c1d; /* 19.6:1 sur blanc */
  --ink-2: #5f6266; /* corps secondaire — 4.9:1 sur gris clair */
  --ink-3: #6f7175; /* méta / index — 4.5:1 sur gris clair */
  --mute: #808080; /* lignes de titre atténuées (grand corps) */
  --on-dark: #ffffff;
  --on-dark-2: #b6bcc2; /* 10.2:1 sur le bleu foncé */
  --on-dark-3: #9aa0a6; /* 7.4:1 sur le bleu foncé */

  /* Accent */
  --accent: #d2ee49; /* jaune — 15:1 sur le bleu foncé */
  --green: var(--accent);
  --green-deep: var(--accent);
  --green-ink: var(--ink); /* pas de texte jaune sur fond clair */
  --green-soft: var(--accent);

  /* Filets */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --line-dark: color-mix(in srgb, white 16%, transparent);

  /* Rythme */
  --gut: clamp(1.25rem, 4.5vw, 4.5rem);
  --max: 98rem;
  --sec: clamp(4rem, 9vw, 6.5rem);
  --sec-sm: clamp(3.5rem, 7vw, 6rem);

  /* Type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Titres : Neue Haas Grotesk si la machine la possède (elle n'est pas
     diffusable en fonte web), sinon Helvetica Neue sur macOS/iOS, sinon
     Inter Tight — la grotesque libre dont les proportions et le resserrement
     s'en approchent le plus. */
  --display:
    "Neue Haas Grotesk Display Pro", "NeueHaasDisplay",
    "Neue Haas Grotesk Text Pro", "Helvetica Neue", "Inter Tight", "Archivo",
    Helvetica, Arial, sans-serif;

  --t-display: clamp(2.9rem, 8.7vw, 7.6rem);
  --t-big: clamp(2.1rem, 5vw, 3.9rem);
  --t-sub: clamp(1.45rem, 2.6vw, 2.2rem);
  --t-body: clamp(1.0625rem, 1.2vw, 1.25rem);
  --t-micro: 0.8125rem;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.62, 0.05, 0.2, 1);

  /* Z */
  /* échelle sémantique : le menu plein écran passe sous la barre, pour que le
     logo et le bouton de fermeture restent visibles et cliquables. */
  --z-rules: 0;
  --z-map: 1;
  --z-totop: 50;
  --z-menu: 60;
  --z-nav: 70;
  --z-prog: 80;
  --z-cursor: 100;

  --bg: var(--paper);
  --fg: var(--ink);

  /* Le logo est fourni en encre foncée : il s'inverse sur les fonds sombres. */
  --logo-filter: none;
  --scrim: 0.52;
}

/* ---------- Thème sombre ----------
   Un seul jeu de jetons est réécrit : toute la page suit. Les sections déjà
   sombres (tone-dark) conservent leur identité, elles se contentent de
   s'accorder au reste. */
:root[data-theme="dark"] {
  --paper: #0a1223;
  --paper-2: #111a2c;
  --paper-3: #182135;
  --navy: #030c1d;
  --navy-deep: #030c1d;
  --navy-line: #333c4d;
  --blue-mark: #8fb6f0; /* le bleu s'éclaircit pour tenir sur fond sombre */

  --ink: #ffffff;
  --ink-2: #b6bcc2;
  --ink-3: #9aa0a6;
  --mute: #808080;

  --green-ink: var(--accent); /* le jaune redevient lisible sur fond sombre */

  --line: color-mix(in srgb, white 15%, transparent);
  --line-soft: color-mix(in srgb, white 8%, transparent);
  --line-dark: color-mix(in srgb, white 15%, transparent);

  --logo-filter: brightness(0) invert(1);
  --scrim: 0.62;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
/* Lenis pilote le défilement dès que le script est actif : deux moteurs de
   défilement en parallèle produisent les à-coups qu'on cherche à supprimer. */
html.js {
  scroll-behavior: auto;
}

/* La bascule de thème ne doit pas déclencher un fondu sur chaque élément :
   on ne fait transiter que les grandes surfaces, pendant un court instant. */
html.is-theming *,
html.is-theming *::before,
html.is-theming *::after {
  transition:
    background-color 0.45s var(--e-io),
    border-color 0.45s var(--e-io),
    color 0.45s var(--e-io),
    fill 0.45s var(--e-io) !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /*font-family: var(--sans);*/
  font-family: var(--display);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--navy);
  color: #fff;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}
.skip:focus {
  transform: translate(-50%, 0);
}

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

/* ---------- Typographie ---------- */
/* Les titres passent sur la grotesque d'affichage ; le texte courant reste sur
   Archivo, plus ouvert et plus confortable en petit corps. */
.big,
.statement,
.hero__title,
h1,
h2,
h3,
h4,
.kw__w,
.pole__t,
.drawer__t,
.cas__join,
.hero__stats dt,
.kpi dt,
.presence__foot b,
.menu__links a {
  font-family: var(--display);
}
/* Même densité que les mots de la bande d'engagements (Clair · Agile · …) :
   graisse maximale de la grotesque, chasse pleine et approche resserrée. */
.big,
.statement,
.hero__title,
.drawer__t {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
  font-stretch: 100%;
}
.hero__title {
  font-size: var(--t-display);
}
.big,
.statement {
  font-size: var(--t-big);
}

/* La ligne sert de masque à l'animation de révélation, elle doit donc recadrer.
   Mais avec un interlignage sous 1 la boîte de ligne est plus courte que les
   glyphes : les accents des capitales et les jambages du bas passaient sous le
   masque. On donne au masque la hauteur qui manque et on la reprend en marge
   négative — le texte est entier, l'interlignage visuel ne bouge pas.
   Le script compense en démarrant les lignes plus bas (voir main.js). */
.line {
  display: block;
  overflow: hidden;
  padding-block: 0.22em;
  margin-block: -0.22em;
}
/* Les coupes sont écrites dans le markup pour le masque de révélation ;
   quand une ligne repasse sur deux en petit écran, on la rééquilibre. */
.line > span {
  display: block;
  will-change: transform;
  text-wrap: balance;
}
.line--mute > span {
  color: var(--mute);
}
.tone-dark .line--mute > span {
  color: var(--on-dark-3);
}

.sub {
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-block: clamp(3rem, 6vw, 5rem) 0;
  padding-bottom: 1.5rem;
}

.micro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.tone-dark .micro {
  color: var(--on-dark-3);
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.sec-head__note {
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.sec-head > .big + .sec-head__note,
.sec-head > .statement + .sec-head__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.tone-dark .sec-head__note {
  color: var(--on-dark-2);
}
.sec-head__note b {
  color: var(--ink);
  font-weight: 600;
}
.tone-dark .sec-head__note b {
  color: var(--on-dark);
}

/* ---------- Fond : papier millimétré ----------
   Les cinq filets verticaux coupaient les titres et les tableaux ; ils cèdent
   la place à une trame de papier millimétré. Deux pas seulement : le
   millimètre, presque imperceptible, et le demi-centimètre, à peine plus
   marqué. Le tout reste sous le seuil de lecture — on le sent, on ne le lit
   pas. La trame est fixe : elle ne défile pas avec la page, comme une feuille
   posée sous le contenu. */
.rules {
  position: fixed;
  inset: 0;
  z-index: var(--z-rules);
  pointer-events: none;
  --mm: 4px; /* un millimètre de la planche, à l'échelle écran */
  --mm-1: color-mix(in srgb, var(--navy) 1%, transparent);
  --mm-5: color-mix(in srgb, var(--navy) 2.5%, transparent);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--mm-5) 0 1px,
      transparent 1px calc(var(--mm) * 5)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--mm-5) 0 1px,
      transparent 1px calc(var(--mm) * 5)
    ),
    repeating-linear-gradient(
      to right,
      var(--mm-1) 0 1px,
      transparent 1px var(--mm)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--mm-1) 0 1px,
      transparent 1px var(--mm)
    );
  opacity: 0;
  animation: rulesIn 1.4s var(--e-out) 0.2s forwards;
}
/* Les cinq filets du balisage n'ont plus d'objet ; on les garde muets pour ne
   pas toucher au HTML des autres livraisons. */
.rules i {
  display: none;
}
:root[data-theme="dark"] .rules {
  --mm-1: color-mix(in srgb, white 0.8%, transparent);
  --mm-5: color-mix(in srgb, white 1.8%, transparent);
}
@keyframes rulesIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rules {
    opacity: 1;
    animation: none;
  }
}

/* ---------- Curseur ----------
   Un simple point, discret et professionnel : ni halo, ni anneau, ni étiquette.
   Le liseré clair le garde lisible sur les photos de nuit comme sur le blanc. */
.cursor {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.cursor.is-on {
  opacity: 1;
}
.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  translate: -200px -200px;
  transform: translateZ(0);
  border-radius: 50%;
  will-change: translate;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}
.cursor.on-dark .cursor__dot,
:root[data-theme="dark"] .cursor__dot {
  background: var(--green-soft);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4);
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---------- Avancement de lecture ----------
   Un filet de 2 px collé au bord haut de la fenêtre, au-dessus de la barre :
   il reste lisible même quand le header se rétracte au défilement. */
.prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--z-prog);
  pointer-events: none;
  background: color-mix(in oklch, var(--ink) 8%, transparent);
}
.prog i {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Retour en haut ----------
   Discret, hors du flux de lecture : il n'apparaît qu'une fois la page
   suffisamment descendue pour que le geste ait un sens. */
.totop {
  position: fixed;
  z-index: var(--z-totop);
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition:
    opacity 0.4s var(--e-out),
    translate 0.4s var(--e-out),
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.totop.is-in {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.totop:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.totop:active {
  scale: 0.94;
}
.totop svg {
  transition: translate 0.3s var(--e-out);
}
.totop:hover svg {
  translate: 0 -2px;
}
@media (prefers-reduced-motion: reduce) {
  .totop {
    transition: opacity 0.2s;
  }
  .totop,
  .totop.is-in {
    translate: none;
  }
}

/* ---------- Appels à l'action ----------
   Pas de pastille ni de bouton plein : un mot, un filet, une flèche. Le trait
   se retire par la droite puis revient par la gauche au survol. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  background: transparent;
  border: 0;
  padding: 0 0 0.38em;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink);
  transition: color 0.35s var(--e-out);
  text-align: left;
}
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.5s var(--e-out);
}
.cta:hover,
.cta:focus-visible {
  color: var(--green-ink);
}
.cta:hover::after,
.cta:focus-visible::after {
  animation: underline 0.7s var(--e-out);
}
.cta__arrow {
  flex: none;
  align-self: center;
  transition: transform 0.45s var(--e-out);
}
.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow {
  transform: translate(0.28em, -0.28em);
}
@keyframes underline {
  0% {
    transform: scaleX(1);
  }
  42% {
    transform: scaleX(0);
    transform-origin: right;
  }
  43% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.cta--sm {
  font-size: 0.875rem;
  font-weight: 500;
}
.cta--lg {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}
.tone-dark .cta {
  color: var(--on-dark);
}
.tone-dark .cta:hover,
.tone-dark .cta:focus-visible {
  color: var(--green-soft);
}

.link-arrow {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-bottom: 3px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.45s var(--e-out);
}
.link-arrow:hover {
  color: var(--green-ink);
}
.link-arrow:hover::after {
  animation: underline 0.7s var(--e-out);
}

/* ---------- Statut / orbite ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.status--light {
  color: var(--on-dark-2);
}
.orbit {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.status--light .orbit {
  border-color: var(--line-dark);
}
.orbit i {
  position: absolute;
  inset: 0;
  animation: orbit 5.5s linear infinite;
}
.orbit i::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px 1px color-mix(in oklch, var(--green) 60%, transparent);
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  transition:
    transform 0.55s var(--e-out),
    background-color 0.4s,
    border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in oklch, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav.is-hidden {
  transform: translateY(-101%);
}
.nav.on-dark {
  color: var(--on-dark);
}
.nav.on-dark.is-stuck {
  background: color-mix(in oklch, var(--navy-deep) 96%, transparent);
  border-bottom-color: var(--line-dark);
}
/* au-dessus d'une section navy, l'appel à l'action doit basculer comme le reste
   de la barre : en navy sur navy, il devenait illisible. */
.nav.on-dark .cta {
  color: var(--on-dark);
}
.nav.on-dark .cta:hover,
.nav.on-dark .cta:focus-visible {
  color: var(--green-soft);
}
/* Sur fond sombre, on ne repeint pas le logo : on montre l'autre fichier, celui
   du pied de page, qui garde sa feuille verte. */
.nav.on-dark .nav__mark--clair,
:root[data-theme="dark"] .nav__mark--clair {
  opacity: 0;
}
.nav.on-dark .nav__mark--sombre,
:root[data-theme="dark"] .nav__mark--sombre {
  opacity: 1;
}

.nav__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(0.9rem, 1.6vw, 1.4rem) var(--gut);
  display: flex;
  align-items: center;
  gap: 2rem;
}
/* Les deux versions du logo sont superposées : celle du dessous garde la place,
   celle du dessus se pose dessus. Le fondu remplace le basculement sec. */
.nav__logo {
  flex: none;
  position: relative;
  display: block;
  line-height: 0;
}
.nav__mark {
  width: clamp(96px, 8vw, 118px);
  height: auto;
  transition: opacity 0.4s;
}
.nav__mark--sombre {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.nav__links {
  margin-left: auto;
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  font-size: 0.875rem;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  padding-block: 4px;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--e-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__links a.is-active {
  color: var(--green-ink);
}
.nav.on-dark .nav__links a.is-active {
  color: var(--green-soft);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* ---------- Interrupteur de thème ----------
   Un vrai basculeur : rail à filet, molette qui glisse et s'enfonce sous la
   pression. Ni icône lune, ni pictogramme soleil. */
.switch {
  flex: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.switch__track {
  position: relative;
  display: block;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--ink) 5%, transparent);
  transition:
    background-color 0.45s var(--e-out),
    border-color 0.45s;
}
.switch__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate3d(0, -50%, 0);
  transition:
    transform 0.5s var(--e-out),
    width 0.28s var(--e-out),
    background-color 0.45s;
}
.switch:hover .switch__track {
  border-color: var(--green);
}
.switch:active .switch__knob {
  width: 22px;
}
.switch[aria-checked="true"] .switch__track {
  background: color-mix(in oklch, var(--green) 26%, transparent);
  border-color: var(--green);
}
.switch[aria-checked="true"] .switch__knob {
  transform: translate3d(22px, -50%, 0);
  background: var(--green);
}
.switch[aria-checked="true"]:active .switch__knob {
  transform: translate3d(16px, -50%, 0);
}
.nav.on-dark .switch__track {
  border-color: var(--line-dark);
  background: color-mix(in oklch, white 8%, transparent);
}
.nav.on-dark .switch__knob {
  background: var(--on-dark);
}
.nav.on-dark .switch[aria-checked="true"] .switch__knob {
  background: var(--green);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 6px;
}
.burger i {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.4s var(--e-out),
    opacity 0.3s;
}
.burger.is-open i:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.burger.is-open i:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
  .nav__right {
    margin-left: auto;
  } /* .nav__links portait le margin auto */
  .burger {
    display: grid;
    align-content: center;
    margin-right: -10px;
  }
  .nav__cta {
    display: none;
  }
}

/* Menu mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--navy-deep);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gut) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--e-out);
}
.menu[hidden] {
  display: none;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
}
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--e-out),
    transform 0.5s var(--e-out),
    color 0.3s;
}
.menu.is-open .menu__links a {
  opacity: 1;
  transform: none;
}
.menu__links a:hover {
  color: var(--green-soft);
}
.menu__links em {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-style: normal;
  color: var(--on-dark-3);
  letter-spacing: 0.1em;
}
.menu__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--on-dark-2);
}

/* =========================================================================
   HERO
   ========================================================================= */
/* Le cliché occupe toute la surface ; le texte s'installe à gauche sur un
   voile dégradé, assez dense sous les mots pour tenir le contraste AA et
   assez léger à droite pour que la photo reste franchement lisible. */
/* Le cliché n'occupe que la partie haute — la bande de chiffres n'empiète plus
   dessus. La zone d'image garde ainsi un rapport proche de celui du fichier
   source : le cadrage reste large et la salle de réunion, à gauche, visible. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--on-dark);
}
.hero__bg {
  grid-area: 1 / 1;
  position: relative;
  z-index: -2;
  overflow: hidden;
}
/* Le cadrage est poussé vers la droite : la scène sort de dessous la colonne de
   texte au lieu d'être recouverte par elle. */
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% center;
}
/* La gauche devient une vraie colonne bleue — aplat jusqu'à 14 %, fondu court
   jusqu'à 38 % — puis la photo reprend franchement la main. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgb(3, 12, 29) 0%,
      rgba(3, 12, 29, 0.97) 14%,
      rgba(3, 12, 29, 0.74) 24%,
      rgba(3, 12, 29, 0.36) 32%,
      rgba(3, 12, 29, 0.12) 40%,
      rgba(3, 12, 29, 0.03) 52%,
      rgba(3, 12, 29, 0.03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 12, 29, 0.4) 0%,
      transparent 15%,
      transparent 70%,
      rgba(3, 12, 29, 0.46) 100%
    );
}

.hero__in {
  grid-area: 1 / 1;
  position: relative;
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gut);
  /* Le hero ne fait plus une hauteur d'écran : la bande de chiffres reste
     visible sans défiler et l'image est moins rognée. */
  min-height: clamp(24rem, 54vh, 38rem);
  padding-top: clamp(5.5rem, 9vh, 7rem);
  padding-bottom: clamp(2rem, 4vh, 3.25rem);
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-end;
  gap: clamp(0.9rem, 1.7vw, 1.4rem);
}
.hero .status {
  margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
}
/* Capitales et filet de séparation : le titre porte le hero, le chapeau vient
   au-dessous, détaché par un cheveu clair. */
.hero__title {
  max-width: 24ch;
  font-size: clamp(3rem, 9.4vw, 8.4rem);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
/* La deuxième ligne rentre d'un cran, comme sur la planche. */
.hero__title .line--in {
  padding-left: 0.55em;
}
.hero__rule {
  width: min(100%, 34rem);
  height: 1px;
  background: color-mix(in oklch, white 26%, transparent);
  margin-block: clamp(0.25rem, 1.2vw, 0.9rem);
}
/* chaque ligne se déplace de sa propre quantité : la profondeur naît de
   l'écart entre les lignes, jamais d'un mouvement automatique. */
.hero__title [data-tilt-line] {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 0.9s var(--e-out);
}
.hero__lead {
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  line-height: 1.5;
  color: var(--on-dark-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}
.hero__cta .cta {
  color: var(--on-dark);
}
/* Le filet de l'appel à l'action passe au jaune : c'est le seul accent du hero. */
.hero__cta .cta::after {
  background: var(--accent);
}
.hero__cta .cta:hover,
.hero__cta .cta:focus-visible {
  color: var(--green-soft);
}
.link-arrow--light {
  color: var(--on-dark-2);
}
.link-arrow--light:hover {
  color: var(--green-soft);
}

.hero__stats {
  grid-area: 2 / 1;
  position: relative;
  border-top: 1px solid var(--line-dark);
  background: var(--navy-deep);
}
.hero__stats div {
  border-left-color: var(--line-dark) !important;
}
.hero__stats dt {
  color: var(--on-dark);
}
.hero__stats dd {
  color: var(--on-dark-2) !important;
}
.hero__stats dl {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__stats div {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0.75rem, 2vw, 2rem)
    clamp(1.5rem, 3vw, 2.5rem) 0;
  border-left: 1px solid var(--line);
  padding-left: clamp(0.75rem, 2vw, 2rem);
}
.hero__stats div:first-child {
  border-left: 0;
  padding-left: 0;
}
.hero__stats dt {
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero__stats dd {
  margin-top: 0.85rem;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .hero__in {
    padding-top: clamp(6rem, 18vh, 9rem);
  }
  .hero__bg img {
    object-position: 62% center;
  }
  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(4, 11, 22, 0.72) 0%,
      rgba(4, 11, 22, 0.5) 42%,
      rgba(4, 11, 22, 0.8) 100%
    );
  }
  .hero__title {
    max-width: none;
  }
  .hero__stats dl {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__stats div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .hero__stats div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }
}

/* =========================================================================
   Sections — tons
   ========================================================================= */
.tone-grey {
  background: var(--paper-2);
}
.tone-dark {
  background: var(--navy-deep);
  color: var(--on-dark);
}
.tone-dark {
  --line: var(--line-dark);
}

section {
  position: relative;
  z-index: 2;
}

.sec-head {
  padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}
/* Titre à gauche, note dans la colonne de droite alignée sur la dernière ligne
   du titre, comme sur la planche. En dessous de 860 px la note repasse sous le
   titre. */
.sec-head--split .sec-head__note {
  max-width: 46ch;
}
@media (min-width: 861px) {
  .sec-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
  }
  .sec-head--split.sec-head > .big + *,
  .sec-head--split.sec-head > .statement + * {
    margin-top: 0;
    padding-bottom: 0.4em;
  }
}

/* =========================================================================
   02 · ENJEU
   ========================================================================= */
.enjeu {
  padding-block: var(--sec) 0;
}
.statement {
  padding-bottom: 0;
}
/* Titre à gauche, chapeau aligné sur sa dernière ligne à droite. Aucun filet
   entre l'accroche et le titre de section : les deux se lisent comme un seul
   bloc typographique, l'indentation suffit à marquer le changement de niveau. */
.enjeu__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.enjeu__lead {
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
  padding-bottom: 0.4em;
}

/* Les quatre enjeux : quatre encadrés au trait fin, posés côte à côte et
   séparés par du vide. Pas de fond ni d'ombre — seul le filet dessine la
   colonne. La lecture se fait à l'horizontale, d'un seul regard. */
.issues {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.4vw, 2.25rem);
  align-items: start;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.issue {
  border: 1px solid var(--line);
  background: var(--paper);
  transition:
    border-color 0.45s,
    box-shadow 0.45s;
}
.issue[open] {
  border-color: color-mix(in oklch, var(--ink) 26%, transparent);
  border-bottom: 3px solid var(--accent);
}
.issue:hover {
  border-color: color-mix(in oklch, var(--ink) 32%, transparent);
}
.issue > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem);
}
.issue > summary::-webkit-details-marker {
  display: none;
}
.issue__k {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding-right: 2rem;
  font-family: var(--mono);
}
.issue h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.issue summary p {
  color: var(--ink-2);
  text-wrap: pretty;
}
/* Croix : deux traits, dont un pivote pour composer le « + » fermé. */
.issue__x {
  position: absolute;
  top: clamp(1.4rem, 2.2vw, 2rem);
  right: clamp(1.1rem, 1.8vw, 1.6rem);
  width: 13px;
  height: 13px;
}
.issue__x::before,
.issue__x::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink);
  transition: transform 0.45s var(--e-out);
}
.issue__x::after {
  transform: rotate(90deg);
}
.issue[open] .issue__x::before {
  transform: rotate(45deg);
}
.issue[open] .issue__x::after {
  transform: rotate(-45deg);
}

.issue__body {
  padding: 0 clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.4rem, 2.2vw, 2rem);
}
.issue__ask {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.issue__body ul {
  list-style: none;
}
.issue__body li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-wrap: pretty;
}
.issue__body li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .enjeu__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .issues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .issue__k {
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
}
@media (max-width: 520px) {
  .issues {
    grid-template-columns: 1fr;
  }
}

/* Rangées à filets */
/*.rows li {
  border-bottom: 1px solid var(--line);
}*/
.rows--num li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  transition: padding-left 0.5s var(--e-out);
}
.rows--num li:first-child {
  border-top: 1px solid var(--line);
}
.rows--num li:hover {
  padding-left: 1rem;
}
.rows__i {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  padding-top: 0.55em;
  transition: color 0.35s;
}
.rows--num li:hover .rows__i {
  color: var(--green-ink);
}
.tone-dark .rows--num li:hover .rows__i {
  color: var(--green-soft);
}
.rows--num h3,
.rows--num h4 {
  grid-column: 2;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.rows--num p {
  grid-column: 2;
  margin-top: 0.5rem;
  color: var(--ink-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.tone-dark .rows--num p {
  color: var(--on-dark-2);
}
@media (max-width: 640px) {
  .rows--num li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .rows--num h3,
  .rows--num h4,
  .rows--num p {
    grid-column: 1;
  }
  .rows__i {
    padding-top: 0;
  }
}
.rows--dark li {
  border-color: var(--line-dark);
}
.rows--dark li:first-child {
  border-top-color: var(--line-dark);
}
.rows--dark .rows__i {
  color: var(--on-dark-3);
}

.rows--plain li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 0.35rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(0.85rem, 1.5vw, 1.2rem) 0;
}
/*.rows--plain li:first-child {
  border-top: 1px solid var(--line);
}*/
.rows--plain h4 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.rows--plain p {
  color: var(--ink-2);
}
@media (max-width: 700px) {
  .rows--plain li {
    grid-template-columns: 1fr;
  }
}

/* Bloc citation : aplat bleu nuit, rien d'autre. La phrase porte seule.
   Le texte part volontairement un cran sous le blanc pur, à environ 10:1. */
.pull {
  position: relative;
  margin-top: clamp(4rem, 9vw, 8rem);
  background: oklch(0.158 0.04 258);
  color: oklch(0.86 0.012 250);
  padding-block: clamp(5rem, 10vw, 8.5rem);
}
.pull__label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.5rem;
}
/* Les coupes de ligne sont écrites dans le balisage : aucune largeur maximale
   ne vient les recouper une seconde fois. */
.pull__q {
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: pretty;
  max-width: 100%;
}

/* =========================================================================
   05 · LE TERRAIN — bande citation
   Bande courte : la citation tient la largeur, la photo n'occupe que la marge
   droite. Le texte n'est jamais posé sur l'image, il n'a donc pas besoin de
   voile pour rester lisible.
   ========================================================================= */
/* La colonne de texte est volontairement serrée : la citation est écrite à la
   même échelle que « Le principe Soluxa », elle la remplit donc presque
   entièrement et l'image remonte juste derrière elle. */
.terrain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  align-items: stretch;
  background: var(--navy-deep);
  color: var(--on-dark);
}
.terrain__in {
  display: flex;
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  padding-right: clamp(1rem, 2vw, 2rem);
}
.terrain__q {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.16;
  color: var(--on-dark);
}
.terrain__img {
  position: relative;
  overflow: hidden;
  min-height: clamp(8rem, 16vw, 13rem);
}
.terrain__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La photo ne bute plus contre l'aplat : le bleu la recouvre entièrement sur son
   bord gauche puis se retire progressivement. La couture verticale disparaît,
   l'image semble émerger du fond. */
.terrain__img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--navy-deep) 82%, transparent) 12%,
    color-mix(in srgb, var(--navy-deep) 48%, transparent) 27%,
    color-mix(in srgb, var(--navy-deep) 18%, transparent) 42%,
    transparent 58%
  );
}
@media (max-width: 760px) {
  .terrain {
    grid-template-columns: 1fr;
  }
  .terrain__in {
    padding-inline: var(--gut);
  }
  .terrain__img {
    min-height: 42vw;
    order: -1;
  }
  /* Empilés, les deux blocs se touchent par une arête horizontale : le fondu
     bascule donc vers le bas de l'image. */
  .terrain__img::after {
    background: linear-gradient(
      180deg,
      transparent 45%,
      color-mix(in srgb, var(--navy-deep) 30%, transparent) 72%,
      color-mix(in srgb, var(--navy-deep) 72%, transparent) 88%,
      var(--navy-deep) 100%
    );
  }
}

/* =========================================================================
   03 / 04 · AVANT & APRÈS — schémas de coordination
   Deux sections jumelles : même titre à trois lignes, même schéma, même bande
   de mots. Seule la géométrie change — dispersée d'abord, alignée ensuite.
   ========================================================================= */
/* Les deux sections jumelles doivent tenir d'un seul tenant sur un écran
   d'ordinateur portable : respiration réduite, schéma plus plat, textes plus
   grands. Tout ce qui est gagné ici l'est sur le vide, pas sur la lecture. */
.flux {
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.flux--apres {
  background: var(--paper);
}
.flux__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.flux__note {
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
  padding-bottom: 0.4em;
}
.mute-w {
  font-style: normal;
  color: var(--mute);
}
@media (max-width: 900px) {
  .flux__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Le schéma : un calque de traits en coordonnées relatives, des étiquettes
   HTML posées par-dessus. Les traits sont dessinés dans un carré normalisé et
   étirés à la boîte ; le trait garde son épaisseur grâce au vector-effect. */
.scheme {
  position: relative;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  /* Jamais de `min-height` avec un `aspect-ratio` : dès que la hauteur déduite
     de la largeur passe sous le plancher, c'est la LARGEUR que le navigateur
     augmente — le schéma débordait alors de la page. La hauteur est donc
     entièrement confiée au rapport, qui se redresse par paliers. */
  aspect-ratio: 100 / 22;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
}
@media (max-width: 1200px) {
  .scheme {
    aspect-ratio: 100 / 28;
  }
}
.scheme__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.scheme__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  padding-bottom: 1.15rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  line-height: 1.45;
  color: var(--ink-2);
}
/* La pastille marque le point exact où le trait aboutit. */
.scheme__node::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--accent);
}
.scheme__hub {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  color: var(--ink);
  background: var(--paper-2);
  padding-inline: 0.75rem;
}
.flux--apres .scheme__hub {
  background: var(--paper);
}
.scheme__hub--mark {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.2rem;
}

@media (max-width: 760px) {
  .scheme {
    aspect-ratio: 100 / 66;
  }
  .scheme__node {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
  /* Les deux étiquettes d'extrémité sont centrées sur leur pastille et
     mordraient sur la marge : on les recale vers l'intérieur. */
  .scheme--scatter .scheme__node:first-of-type {
    transform: translate(-30%, -100%);
  }
  .scheme--scatter .scheme__node:last-of-type {
    transform: translate(-70%, -100%);
  }
}

/* Bande de mots sous le schéma : un intitulé au-dessus, quatre termes alignés
   sur la même grille que le schéma, entre deux cheveux. */
.band {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.band__k {
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
}
.band ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(0.9rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid var(--line);
}
.band li {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  text-wrap: pretty;
}
@media (max-width: 620px) {
  .band ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }
}

/* =========================================================================
   06 · QUATRE PRINCIPES
   ========================================================================= */
.principes {
  padding-block: var(--sec);
}
.principes__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.principes .rows--num li {
  border-top: 1px solid var(--line);
}
.principes .rows--num li:last-child {
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .principes__in {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   07 · BANDE D'ENGAGEMENTS — Clair / Agile / Sur mesure / Évolutif
   Une bande basse, jamais plein écran. Le rail file de droite à gauche
   pendant que la colonne de calage traverse l'écran ; sans script, ou en
   mouvement réduit, il se parcourt simplement à la main.
   ========================================================================= */
.kw {
  background: var(--navy-deep);
  color: var(--on-dark);
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
  padding-inline: var(--gut);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.kw::-webkit-scrollbar {
  display: none;
}
.kw__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.kw__item {
  flex: 0 0 auto;
  border-right: 1px solid var(--line-dark);
  padding-inline: clamp(1.5rem, 3.5vw, 3.5rem);
}
.kw__item:first-child {
  padding-left: 0;
}
.kw__w {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--on-dark);
  margin: 0;
  white-space: nowrap;
}
/* La bande reste collée aux sections voisines : le rail avance pendant qu'elle
   traverse l'écran, sans jamais l'occuper seule. */
.kw-pin {
  position: relative;
  background: var(--paper-2);
}

/* =========================================================================
   05 · PÔLES
   ========================================================================= */
.poles {
  padding-block: var(--sec);
}
.poles__list {
  position: relative;
  border-top: 1px solid var(--line);
}

/* Une rangée = index à gauche, titre au centre, description à droite. Pas de
   fond au survol : la planche tient sur des filets, le survol se contente de
   déplier le pôle qui porte le fil du mandat. */
.pole {
  position: relative;
  display: grid;
  grid-template-columns: 12rem minmax(0, 0.8fr) minmax(0, 1.35fr);
  align-items: start;
  gap: 0.4rem clamp(1.5rem, 3.5vw, 4rem);
  padding-block: clamp(1.75rem, 3.6vw, 2.9rem);
  border-bottom: 1px solid var(--line);
}
.pole__i {
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.6em;
  font-family: var(--mono);
}
.pole__t {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.pole__c {
  padding-top: 0.35rem;
}
.pole__d {
  color: var(--ink-2);
  max-width: 48ch;
  text-wrap: pretty;
}
/* Les trois domaines sont une signature, pas une mention légale : ils passent
   au bleu de la marque et à la taille des autres libellés. */
.pole__tags {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-mark);
  font-weight: 600;
  font-family: var(--mono);
}
.tone-dark .pole__tags {
  color: var(--on-dark);
}
/* Indicateur d'ouverture : une croix qui n'apparaît que sur le pôle dépliable. */
.pole__x {
  position: absolute;
  top: clamp(1.75rem, 3.6vw, 2.9rem);
  right: 0;
  width: 13px;
  height: 13px;
}
.pole__x::before,
.pole__x::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink-3);
  transition: transform 0.5s var(--e-out);
}
.pole__x::before {
  transform: rotate(0deg);
}
.pole__x::after {
  transform: rotate(90deg);
}

/* Le pôle Projets et son fil forment un même bloc : le filet du bas passe sur
   l'enveloppe, sinon il couperait le pôle de la séquence qu'il annonce. Ce
   filet-là est jaune, comme sur la planche. */
.pole-wrap {
  border-bottom: 3px solid var(--accent);
}
.pole-wrap .pole {
  border-bottom: 0;
}

.fil__in {
  overflow: hidden;
  min-height: 0;
}
.fil {
  display: grid;
  grid-template-rows: 1fr;
}
/* Là où le survol existe, le fil est replié : il se déplie au survol du pôle
   ou dès qu'un élément du bloc reçoit le focus clavier. */
@media (hover: hover) and (pointer: fine) {
  .fil {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.8s var(--e-out);
  }
  .pole-wrap:hover .fil,
  .pole-wrap:focus-within .fil {
    grid-template-rows: 1fr;
  }
  .pole-wrap:hover .pole__x::before,
  .pole-wrap:focus-within .pole__x::before {
    transform: rotate(45deg);
  }
  .pole-wrap:hover .pole__x::after,
  .pole-wrap:focus-within .pole__x::after {
    transform: rotate(-45deg);
  }
}
.fil .seq {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3.25rem);
}

@media (max-width: 1000px) {
  .pole {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
  .pole__c {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .pole {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .pole__i,
  .pole__t,
  .pole__c {
    grid-column: 1;
  }
  .pole__x {
    display: none;
  }
}

/* Séquence */
.seq {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.seq__track {
  position: relative;
}
.seq__line {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.seq__line i {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--e-out);
}
.seq__line i.is-in {
  transform: scale(1);
}
.seq ol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 2vw, 2rem);
}
.seq li {
  padding-top: 2rem;
  position: relative;
}
.seq li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--ink-3);
  transition:
    background-color 0.4s,
    border-color 0.4s;
}
.seq li:hover::before {
  background: var(--green);
  border-color: var(--green);
}
/* Étape déjà atteinte par l'étoile filante */
.seq li.is-lit::before {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--green) 16%, transparent);
}
.seq li.is-lit span {
  color: var(--green-ink);
}

/* Chaque étape se découvre au passage de l'étoile, pas avant : le texte est
   solidaire de sa pastille. L'état caché n'est armé que par le script — sans
   lui, ou en mouvement réduit, la séquence reste lisible d'emblée. */
.seq.is-armed li > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s var(--e-out),
    transform 0.55s var(--e-out);
}
.seq.is-armed li.is-lit > * {
  opacity: 1;
  transform: none;
}

/* L'étoile filante parcourt le filet et allume chaque étape au passage. */
.seq__star {
  position: absolute;
  top: 9px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 14px 3px color-mix(in oklch, var(--green) 60%, transparent);
}
.seq__star::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 54px;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(
    270deg,
    color-mix(in oklch, var(--green) 75%, transparent),
    transparent
  );
}
@media (prefers-reduced-motion: reduce) {
  .seq__star {
    display: none;
  }
  /* sans JS d'animation, le filet doit être plein d'emblée */
  .seq .seq__line i {
    transform: scale(1);
  }
}
.seq span {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.seq h4 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.seq p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: 0.4rem;
  line-height: 1.45;
}
@media (max-width: 900px) and (min-width: 701px) {
  .seq ol {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
  }
}
/* Sous 700px, six colonnes ne tiennent pas : la séquence bascule à la
   verticale. Le filet devient un fil qui descend le long des étapes et
   l'étoile filante le suit du haut vers le bas — même trajet, autre axe. */
@media (max-width: 700px) {
  .seq__line {
    top: 9px;
    bottom: 9px;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .seq__line i {
    width: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }
  .seq ol {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .seq li {
    padding: 0 0 1.6rem 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: baseline;
  }
  .seq li:last-child {
    padding-bottom: 0;
  }
  .seq li::before {
    top: 6px;
    left: 0;
  }
  .seq li h4 {
    margin-top: 0;
  }
  .seq li p {
    grid-column: 1 / -1;
    margin-top: 0.3rem;
  }
  .seq__star {
    left: 3.5px;
    top: 0;
  }
  .seq__star::before {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 3px;
    width: 2px;
    height: 44px;
    transform: translateX(-50%);
    background: linear-gradient(
      0deg,
      color-mix(in oklch, var(--green) 75%, transparent),
      transparent
    );
  }
}

/* =========================================================================
   06 · ÉTUDE DE CAS
   ========================================================================= */
/* Section resserrée : l'étude de cas est une planche de chiffres, pas une
   promenade. Marges réduites, image moins haute, rangées plus courtes. */
.cas {
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cas .sec-head {
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.cas__media {
  --cas-h: clamp(200px, 30vh, 340px);
  position: relative;
  margin-block: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.25rem);
}
/* le recadrage ne concerne que l'image : la légende, placée après, reste hors
   du contexte d'empilement créé par la parallaxe. */
.cas__frame {
  overflow: hidden;
  will-change: transform;
}
/* La vue de Laténa est très panoramique : dans un cadre haut, un recadrage centré
   ne retiendrait que le flanc de colline. On garde le bas, où le village éclairé
   et la rive portent le sujet. */
.cas__media img {
  width: 100%;
  height: var(--cas-h);
  object-fit: cover;
  object-position: 50% 68%;
}

/* Les deux mots partent écartés de part et d'autre du cadre, puis se rejoignent
   au centre de l'image pendant qu'elle grandit. Hors script (ou en mouvement
   réduit) ils sont déjà réunis : la composition tient sans animation. */
.cas__join {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--cas-h);
  z-index: 2;
  margin: 0;
  pointer-events: none;
  /* Les deux mots voyagent bien au-delà du cadre avant de se rejoindre. Sans
     recadrage ils débordent de la page et créent une barre de défilement
     horizontale. `clip` recadre sans fabriquer de conteneur défilable, et sur
     l'axe horizontal seulement : la ligne reste centrée verticalement. */
  overflow-x: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.9rem);
  font-size: clamp(2.25rem, 7.5vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--on-dark);
  text-shadow: 0 0.15em 2.5rem rgb(0 0 0 / 0.5);
}
.cas__jw {
  display: block;
  will-change: transform;
}

/* Le nom du mandat tient la colonne de gauche ; les six chiffres occupent
   trois colonnes sur deux rangs, comme sur la planche. L'ensemble reste
   assez court pour se lire d'un seul écran. */
.cas__facts {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.cas__id .micro {
  color: var(--ink-3);
}
.cas__sub {
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 0.8rem;
  color: var(--ink-3);
  font-weight: 500;
}
.cas__place {
  margin-top: 0.9rem;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi > div {
  padding: clamp(0.7rem, 1.2vw, 1rem) clamp(0.75rem, 2vw, 2rem);
  /*border-left: 1px solid var(--line);*/
  /*border-bottom: 1px solid var(--line);*/
}
.kpi > div:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}
/*.kpi > div:nth-child(-n + 3) {
  border-top: 1px solid var(--line);
}*/
/* Les quatre prestations passent sur deux colonnes : la planche de l'étude de
   cas se lit d'un seul regard au lieu de dérouler. */
@media (min-width: 801px) {
  .cas .rows--plain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  /*.cas .rows--plain li:nth-child(2) {
    border-top: 1px solid var(--line);
  }*/
  .cas .rows--plain li {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kpi dt {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.kpi dd {
  margin-top: 0.55rem;
  max-width: 22ch;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 800px) {
  .cas__facts {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .kpi {
    grid-template-columns: 1fr 1fr;
  }
  .kpi > div:nth-child(3n + 1) {
    border-left: 1px solid var(--line);
    padding-left: clamp(0.75rem, 2vw, 2rem);
  }
  .kpi > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .kpi > div:nth-child(-n + 3) {
    border-top: 0;
  }
  .kpi > div:nth-child(-n + 2) {
    border-top: 1px solid var(--line);
  }
}

/* =========================================================================
   07 · ÉQUIPE
   ========================================================================= */
/* La section ne se referme pas : la bande des métiers vient se coller sous la
   photo, sans respiration intermédiaire. L'ensemble tient d'un seul écran. */
.equipe {
  padding-block: clamp(2.75rem, 5vw, 4rem) 0;
  overflow-x: clip;
}
.equipe .sec-head {
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.equipe__note {
  align-self: end;
}
/* La ligne d'engagement est soulignée d'un cheveu, comme sur la planche ;
   seul « 1 mandat » prend l'accent. */
.equipe__rule {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.equipe__rule b {
  color: var(--green-ink);
  font-weight: 600;
}

/* Les chiffres tiennent une colonne étroite ; la photo file jusqu'au bord
   droit de la page. */
.equipe__band {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  margin-block: clamp(1.25rem, 2.5vw, 2rem) 0;
  padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  padding-right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
.equipe__nums {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.equipe__nums > div {
  padding-block: clamp(0.75rem, 1.6vw, 1.25rem);
}
.equipe__nums > div + div {
  border-top: 1px solid var(--line);
}
.equipe__nums dt {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.equipe__nums dd {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Hauteur imposée, et non plancher : sinon la photo reprend son rapport
   d'origine et fait à elle seule les deux tiers d'un écran. */
.equipe__fig {
  overflow: hidden;
  will-change: transform;
  /*height: clamp(14rem, 23vw, 20rem);*/
  height: 470px;
}
.equipe__fig img {
  width: 100%;
  height: 95%;
  object-fit: contain;
  object-position: right;
}
@media (max-width: 800px) {
  .equipe__band {
    grid-template-columns: 1fr;
    padding-right: var(--gut);
  }
  .equipe__nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .equipe__nums > div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-left: 1rem;
  }
  .equipe__fig {
    height: auto;
  }
  .equipe__fig img {
    aspect-ratio: 16/10;
    object-position: bottom;
  }
}

/* Bande des métiers : huit intitulés répartis sur toute la largeur, immobiles. */
.metiers {
  list-style: none;
  margin: 0;
  background: var(--navy-deep);
  color: var(--on-dark);
  padding: clamp(1rem, 2vw, 1.5rem) var(--gut);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.75rem;
}
.metiers li {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .metiers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 1rem;
  }
}
@media (max-width: 520px) {
  .metiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   08 · PRÉSENCE / CARTE
   ========================================================================= */
.presence {
  padding-block: var(--sec);
  overflow: hidden;
  background-color: var(--paper); /* adapt to dark mode */
}
.presence__grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
/* La carte et la colonne d'annotations partagent la même cellule : la carte
   déborde par la droite, l'accroche et la légende restent devant. */
.presence__side,
.presence__map {
  grid-column: 2;
  grid-row: 1;
}
.presence__side {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  z-index: 2;
  padding-block: clamp(1rem, 3vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.presence .sec-head__note {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

/* Quatre chiffres empilés sous le titre, séparés par des cheveux, alignés sur
   le bord gauche du titre. */
.presence__nums {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.presence__nums > div {
  padding-block: clamp(1rem, 2.2vw, 1.75rem);
}
.presence__nums > div + div {
  border-top: 1px solid var(--line);
}
.presence__nums dt {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.presence__nums dd {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.presence__map {
  position: relative;
  z-index: var(--z-map);
}
/* La carte est volontairement recadrée : la Suisse romande — seule zone
   pointée — occupe la colonne, l'est du pays sort par le bord de l'écran. */
.presence__map svg {
  display: block;
  width: 240%;
  max-width: none;
  height: auto;
  margin-left: 20%;
}
.presence__legend {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.presence__legend p {
  position: relative;
  padding-left: 1.35rem;
}
.presence__legend .dot {
  position: absolute;
  left: 0;
  top: 0.5em;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
.dot--site {
  background: var(--green);
}
.dot--ref {
  background: var(--navy);
}
:root[data-theme="dark"] .dot--ref {
  background: var(--blue-mark);
}

/* habillage de la carte au design system */
.presence__map .cs-st5 {
  fill: oklch(0.925 0.006 250);
  stroke: none;
} /* territoire */
:root[data-theme="dark"] .presence__map .cs-st5 {
  fill: var(--paper-2);
}
.presence__map .cs-st9 {
  fill: oklch(0.965 0.012 230);
} /* lacs */
:root[data-theme="dark"] .presence__map .cs-st9 {
  fill: var(--paper-3);
}
.presence__map .cs-st1 {
  fill: var(--navy);
  stroke: var(--paper);
  stroke-width: 0.35px;
}
:root[data-theme="dark"] .presence__map .cs-st1 {
  fill: var(--blue-mark);
}
.presence__map .cs-st2,
.presence__map .cs-st3,
.presence__map .cs-st4 {
  stroke: color-mix(in oklch, var(--navy) 28%, transparent);
}
:root[data-theme="dark"] .presence__map .cs-st2,
:root[data-theme="dark"] .presence__map .cs-st3,
:root[data-theme="dark"] .presence__map .cs-st4 {
  stroke: var(--line);
}

.presence__map .cs-pin {
  transition: filter 0.4s var(--e-out);
}
.presence__map .cs-pin.is-hi {
  filter: drop-shadow(
    0 0 6px color-mix(in oklch, var(--green) 85%, transparent)
  );
}

/* animation des points de la carte */
.presence__map .cs-st1 {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.presence__map.is-in .cs-st1 {
  animation: dotIn 0.7s var(--e-out) forwards;
}
@keyframes dotIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.presence__map .cs-pin {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.presence__map.is-in .cs-pin {
  animation: pinIn 0.9s var(--e-out) both;
}
@keyframes pinIn {
  0% {
    transform: translateY(-14px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

/* Entre 900 et 1200 px la colonne de droite se resserre : à cadrage constant la
   carte viendrait butter contre les chiffres. On la ramène donc à l'échelle. */
@media (min-width: 901px) and (max-width: 1200px) {
  .presence__map svg {
    width: 185%;
    margin-left: 12%;
  }
}
@media (max-width: 900px) {
  .presence__grid {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  /* la colonne texte retrouve sa gouttière droite ; seule la carte déborde */
  .presence__text {
    padding-right: var(--gut);
  }
  .presence__side,
  .presence__map {
    grid-column: 1;
    grid-row: auto;
  }
  .presence__side {
    padding-right: var(--gut);
    padding-block: 0;
  }
  .presence .sec-head__note {
    margin-top: 2rem;
  }
  /* Empilée sous le texte, la carte n'a plus rien à recouvrir : elle revient
     à une échelle où la Romandie tient dans la largeur de l'écran. */
  .presence__map svg {
    width: 145%;
    margin-left: 0;
  }
  .presence__legend {
    margin-top: 1.25rem;
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
}
@media (max-width: 560px) {
  .presence__map svg {
    width: 175%;
  }
}

/* =========================================================================
   11 · NOS THÉMATIQUES — accordéon horizontal
   Six onglets debout ; celui qui est ouvert déploie une fiche blanche soulignée
   de jaune. Sur mobile l'accordéon bascule en pile verticale.
   ========================================================================= */
/* Largeurs relevées sur la planche à 1280 px : onglet fermé 76 px, onglet
   ouvert 412 px, image 334 × 188. Le rail se resserre à l'ouverture pour que la
   fiche démarre juste après l'intitulé. */
.thema[hidden] {
  display: none;
}
.thema {
  padding-block: var(--sec);
  --rail: clamp(3.4rem, 5.9vw, 4.75rem);
  --rail-open: clamp(2.4rem, 3.8vw, 3rem);
}
.thema__track {
  display: flex;
  align-items: stretch;
  max-width: var(--max);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-inline: var(--gut);
  min-height: clamp(24rem, 48vw, 39rem);
}
.thema__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  flex: 0 0 var(--rail);
  border-left: 1px solid var(--line);
  /*transition: flex-basis 0.7s var(--e-out);*/
  transition: flex-basis 2s var(--e-out);
}
.thema__item:last-child {
  border-right: 1px solid var(--line);
}
.thema__item.is-open {
  flex: 0 0 clamp(19rem, 32vw, 26rem);
  background: var(--paper);
}

/* L'onglet debout : intitulé et surtitre pivotés, numéro au pied. */
.thema__rail {
  position: absolute;
  inset: 0;
  width: var(--rail);
  transition: width 0.7s var(--e-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.thema__t,
.thema__k {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.thema__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.thema__k {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: wrap;
}
.thema__n {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.thema__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.thema__item.is-open .thema__k,
.thema__item.is-open .thema__n {
  color: var(--ink-2);
}
.thema__item.is-open .thema__n {
  font-weight: 600;
}
.thema__rail:hover .thema__t {
  color: var(--green-ink);
}

/* Le panneau ne se déplie qu'une fois l'onglet ouvert. */
.thema__panel {
  height: calc(100vh - 190px);
  margin-left: var(--rail-open);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--e-out),
    visibility 0.5s;
}
.thema__item.is-open .thema__rail {
  width: var(--rail-open);
}
.thema__item.is-open .thema__panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.18s;
}
.thema__item.is-open {
  border-bottom: 3px solid var(--accent);
}
.thema__pin {
  padding-right: clamp(1rem, 2.4vw, 1.85rem);
  padding-top: clamp(1rem, 2.4vw, 1.85rem);
}
.thema__pin img {
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: clamp(1.25rem, 2.3vw, 1.85rem);
}
.thema__pin h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 18ch;
}
.thema__pin p {
  margin-top: 1rem;
  color: var(--ink-2);
  max-width: 38ch;
  text-wrap: pretty;
}

@media (max-width: 820px) {
  .thema__track {
    display: block;
    min-height: 0;
  }
  .thema__item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .thema__item:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .thema__item.is-open {
    flex: none;
  }
  .thema__rail,
  .thema__item.is-open .thema__rail {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1rem;
    padding-block: 1.1rem;
  }
  .thema__t,
  .thema__k {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .thema__n {
    margin-left: auto;
  }
  .thema__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 1rem;
  }
  .thema__panel {
    height: auto;
    margin-left: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition:
      grid-template-rows 0.5s var(--e-out),
      opacity 0.4s,
      visibility 0.5s;
  }
  .thema__item.is-open .thema__panel {
    grid-template-rows: 1fr;
  }
  .thema__pin {
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .thema__pin::after {
    content: "";
    display: block;
    height: 1.5rem;
  }
  .thema__pin img {
    max-width: none;
  }
}

/* =========================================================================
   10 · CONTACT
   ========================================================================= */
/* Bande jaune pleine largeur. Le jaune ne porte que de l'encre bleu très foncé
   (15:1) ; aucun texte clair n'y est posé. La moitié droite reste libre pour
   l'assistant, sans aucune séparation dessinée. */
.contact {
  background: var(--accent);
  color: var(--navy-deep);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}
.contact__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
.contact .big {
  color: var(--navy-deep);
}
.contact__note {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 46ch;
  color: var(--navy-deep);
  text-wrap: pretty;
}
/* Trois appels d'action empilés : le premier plein, les deux autres filaires. */
.contact__acts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1.15rem, 2.2vw, 1.6rem);
  border: 1px solid var(--navy-deep);
  background: none;
  color: var(--navy-deep);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.35s var(--e-out),
    color 0.35s var(--e-out);
}
.act svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.4s var(--e-out);
}
.act:hover svg,
.act:focus-visible svg {
  transform: translate(3px, -3px);
}
.act--solid {
  background: var(--navy-deep);
  color: var(--accent);
}
.act--solid:hover,
.act--solid:focus-visible {
  background: color-mix(in srgb, var(--navy-deep) 84%, #fff);
}
.act:not(.act--solid):hover,
.act:not(.act--solid):focus-visible {
  background: var(--navy-deep);
  color: var(--accent);
}
/* Variante posée sur fond sombre (pied de page). */
.act--ghost {
  border-color: var(--accent);
  color: var(--accent);
  background: none;
}
.act--ghost:hover,
.act--ghost:focus-visible {
  background: var(--accent);
  color: var(--navy-deep);
}

@media (max-width: 900px) {
  .contact__in {
    grid-template-columns: 1fr;
  }
  .contact__slot {
    display: none;
  }
  .act {
    width: 100%;
    justify-content: space-between;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.form[hidden],
.qf[hidden] {
  display: none;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
}
@media (max-width: 560px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.field {
  position: relative;
  padding-top: 1.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  padding: 0.55rem 0;
  font-size: 1rem;
  color: var(--on-dark);
  border-radius: 0;
  transition: border-color 0.35s;
}
.field textarea {
  resize: vertical;
  min-height: 3.5rem;
}
.field select {
  appearance: none;
  cursor: pointer;
}
.field select option {
  color: #111;
  background: #fff;
}
.field--select::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 1.1rem;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--on-dark-2);
  border-bottom: 1px solid var(--on-dark-2);
  transform: rotate(45deg);
  pointer-events: none;
}
.field label {
  position: absolute;
  left: 0;
  top: 2rem;
  font-size: 1rem;
  color: var(--on-dark-3);
  pointer-events: none;
  transition:
    transform 0.4s var(--e-out),
    font-size 0.4s var(--e-out),
    color 0.3s;
  transform-origin: left top;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--green);
  outline: none;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  transform: translateY(-1.5rem) scale(0.72);
  color: var(--green-soft);
}
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select:valid + label {
  color: var(--on-dark-3);
}

.form__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--green-soft);
  min-height: 1.4em;
}

/* ---------- Pièces jointes ----------
   Le champ natif reste dans le flux pour rester focusable au clavier, mais c'est
   l'étiquette qui porte l'apparence : un bouton filaire aux codes du formulaire. */
.files {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.files__input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.files__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    color 0.3s;
}
.files__btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.files__btn:hover {
  border-color: var(--on-dark);
  background: var(--paper);
}
.files__input:focus-visible + .files__btn {
  outline: 2px solid var(--navy-deep);
  outline-offset: 2px;
}
.files__hint {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--on-dark-3);
}
.files__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.files__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line-dark);
  font-size: 0.875rem;
  color: var(--on-dark-2);
}
.files__list li span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files__list li span:last-child {
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-micro);
}

/* ---------- Questionnaire (retour d'expérience) ----------
   Champs encadrés, sections numérotées, listes de cases sur deux colonnes.
   Le panneau du tiroir s'élargit pour l'accueillir. */
.qf {
  display: flex;
  flex-direction: column;
}
.qf__id {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
}
.qf__f,
.qf__free {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.qf__f label,
.qf__free label {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.qf__f input,
.qf__free textarea,
.opt {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
}
.qf__f input {
  padding: 0.85rem 1rem;
}
.qf__free {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.qf__free textarea {
  padding: 0.85rem 1rem;
  resize: vertical;
  min-height: 6rem;
}
.qf__f input:focus,
.qf__free textarea:focus {
  outline: none;
  border-color: var(--navy-deep);
}

.qf__sec {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.qf__n {
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--green-ink);
}
.qf__body h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.qf__q {
  margin-top: 0.6rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qf__hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.qf__free .qf__hint {
  margin-top: 0.6rem;
}

.qf__g {
  border: 0;
  padding: 0;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}
.qf__g legend {
  padding: 0;
  margin-bottom: 0.85rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.2vw, 0.9rem) clamp(0.75rem, 1.8vw, 1.5rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.qf__g .opts {
  margin-top: 0;
}
.opts--row {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}
.opt input {
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--navy-deep);
  cursor: pointer;
}
.opt:hover {
  border-color: var(--ink-3);
}
.opt:has(input:checked) {
  border-color: var(--navy-deep);
  background: var(--paper-2);
}
.opt:has(input:focus-visible) {
  outline: 2px solid var(--navy-deep);
  outline-offset: 2px;
}
.opt--num {
  justify-content: center;
  padding-inline: 0;
}
.opt--num input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opt--num {
  position: relative;
  font-family: var(--mono);
}

@media (max-width: 720px) {
  .qf__id,
  .opts,
  .opts--row {
    grid-template-columns: 1fr;
  }
  .qf__sec {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .scale {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* =========================================================================
   TIROIR — demande de projet (glisse depuis la droite)
   ========================================================================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.drawer[hidden] {
  display: none;
}
.drawer__veil {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--navy-deep) 62%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.55s var(--e-io);
}
/* Le tiroir s'ouvre en gris clair : on retourne les jetons « sur fond sombre »
   vers leurs équivalents clairs, le formulaire suit sans être réécrit. */
.drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  /*width: min(38rem, 100vw);*/
  width: min(40rem, 100vw);
  background: var(--paper-2);
  color: var(--ink);
  --on-dark: var(--ink);
  --on-dark-2: var(--ink-2);
  --on-dark-3: var(--ink-3);
  --line-dark: var(--line);
  --green: var(--navy-deep);
  --green-soft: var(--ink-2);
  border-left: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem)
    calc(clamp(1.75rem, 4vw, 3rem) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.72s var(--e-out);
  box-shadow: -2rem 0 5rem -1.5rem rgb(0 0 0 / 0.55);
}
/* Le questionnaire de satisfaction demande deux colonnes : le panneau s'élargit
   et l'en-tête se réduit au titre. */
/*.drawer__panel.is-wide {
  width: min(72rem, 100vw);
}*/
.drawer__panel.is-wide .drawer__head .status {
  display: none;
}
.drawer__panel.is-wide .drawer__t {
  max-width: 16ch;
}
.drawer__panel.is-wide .drawer__lead {
  max-width: 62ch;
}

.drawer.is-open .drawer__veil {
  opacity: 1;
}
.drawer.is-open .drawer__panel {
  transform: translate3d(0, 0, 0);
}

.drawer__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.drawer__head .status {
  margin: 0;
}
.drawer__x {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0 0;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.35s,
    transform 0.45s var(--e-out);
}
.drawer__x::before,
.drawer__x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--on-dark);
  transform-origin: center;
}
.drawer__x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.drawer__x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__x:hover {
  border-color: var(--green);
  transform: rotate(90deg);
}

.drawer__t {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.02;
  color: var(--on-dark);
  margin: 0 0 0.85rem;
}
.drawer__lead {
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  max-width: 38ch;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.drawer__send {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.drawer__foot {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}
.drawer__foot a {
  transition: color 0.3s;
}
.drawer__foot a:hover {
  color: var(--green-soft);
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel {
    transition: none;
  }
  .drawer__veil {
    transition: none;
  }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot {
  padding-block: clamp(4rem, 8vw, 7rem) 2.5rem;
  background: var(--navy-deep);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 860px) {
  .foot__grid {
    grid-template-columns: 1fr;
  }
}
.foot__logo {
  width: 132px;
  height: auto;
  margin-bottom: 1.5rem;
}
.foot__brand p {
  color: var(--on-dark-2);
  max-width: 40ch;
  font-size: 0.9375rem;
}
.foot__claim {
  margin-top: clamp(2rem, 4vw, 3.5rem) !important;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--on-dark-2) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-micro) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
/* Le point de séparation reste accroché au mot qui précède : en fin de ligne il
   se lit comme une virgule, alors qu'en tête de ligne il flotte. */
.foot__claim span {
  white-space: nowrap;
}
.foot__claim span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.6em;
}
.foot__col h2 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 1.25rem;
}
.foot__col address {
  font-style: normal;
}
.foot__col p {
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  margin-bottom: 0.85rem;
}
.foot__col b {
  color: var(--on-dark);
  font-weight: 600;
}
.foot__col a {
  transition: color 0.3s;
}
.foot__col a:hover {
  color: var(--green-soft);
}

.foot__labels {
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.foot__labels h2 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 1.25rem;
}
/* Les labels ne sont pas des pastilles : une file d'intitulés séparés par des
   cheveux, comme sur la planche. */
.foot__labels ul {
  display: flex;
  flex-wrap: wrap;
}
.foot__labels li {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: var(--on-dark);
  padding-inline: clamp(1rem, 2.2vw, 2rem);
}
.foot__labels li:first-child {
  padding-left: 0;
}
.foot__labels li + li {
  border-left: 1px solid var(--line-dark);
}

.foot__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--on-dark-3);
}
.foot__legal a:hover {
  color: var(--green-soft);
}

/* =========================================================================
   Révélations
   L'état masqué n'est jamais posé par la CSS : main.js n'arme que ce qui est
   sous la ligne de flottaison, puis relâche les styles inline. Sans JS, sans
   Motion ou dans un moteur de rendu sans IntersectionObserver, tout est lisible.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media,
  .cas__media,
  .equipe__fig {
    clip-path: none !important;
  }
  .hero__media img,
  .cas__media img,
  .equipe__fig img {
    transform: none !important;
  }
  .cursor {
    display: none;
  }
}

#reference .cas__frame {
  height: clamp(200px, 33vw, 440px);
}
#reference .cas__frame img {
  height: 100%;
}

#reference .cas__join {
  top: 50%;
  transform: translateY(-50%);
}

.iframe-soluxa {
  width: 100%;
  /*height: calc(100vh - 300px);*/
  border: none;
  display: block;
}

/*.iframe-form-2 {
  height: 1165px;
}

@media (max-width: 1024px) {
  .equipe__fig {
    height: 300px;
  }
}*/

@media (max-width: 800px) {
  .equipe__fig {
    height: auto;
  }
  .thema__pin p,
  .thema__pin h3 {
    padding: 18px;
    max-width: 100%;
  }
  .thema__pin p {
    margin-top: 0px;
    padding-top: 0px;
  }
}

/*@media (max-width: 567px) {
  .iframe-soluxa {
    height: 738px;
    max-height: none;
  }
  .iframe-form-2 {
    height: 1292px !important;
  }
}

@media (max-width: 400px) {
  .iframe-soluxa {
    height: 765px;
  }
}*/