/* ==========================================================================
   Rezofran
   Design system, une seule feuille. Ordre : polices, tokens, reset,
   typographie, primitives, composants, sections, motion, préférences.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/SchibstedGrotesk-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/SchibstedGrotesk-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: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/SchibstedGrotesk-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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   Palette dérivée du logo Rezofran, pas du kit Elementor hérité.
   -------------------------------------------------------------------------- */

:root {
  /* Marque */
  --ink: #14112e;
  --indigo: #2a245a;
  --indigo-lift: #3b3479;
  --accent: #dedc00;

  /* Surfaces */
  --paper: #fbfbfc;
  --paper-2: #f1f1f5;
  --paper-3: #e8e8ef;

  /* Texte */
  --fg: var(--ink);
  --fg-muted: #5b5776;
  --fg-faint: #837fa0;
  --fg-on-dark: #ffffff;
  --fg-on-dark-muted: #b9b5d4;

  /* Filets */
  --line: rgb(42 36 90 / 0.13);
  --line-strong: rgb(42 36 90 / 0.24);
  --line-on-dark: rgb(255 255 255 / 0.16);

  /* Rayon unique, appliqué partout. Pilules pour l'interactif seulement. */
  --r: 14px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Rythme */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 65ch;
  --shell: 1240px;
  --section-y: clamp(2.75rem, 4.5vw, 5rem);

  /* Motion. Réponses courtes, amortissement critique par défaut. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 600ms;

  /* Ombres teintées vers l'indigo, jamais du noir pur */
  --shadow-lift: 0 1px 2px rgb(20 17 46 / 0.05), 0 12px 32px rgb(20 17 46 / 0.07);
  --shadow-deep: 0 2px 4px rgb(20 17 46 / 0.08), 0 28px 64px rgb(20 17 46 / 0.16);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100e22;
    --paper-2: #171533;
    --paper-3: #201d42;
    --fg: #f2f1f8;
    --fg-muted: #a6a2c4;
    --fg-faint: #837fa0;
    --indigo: #221d4c;
    --indigo-lift: #3b3479;
    --line: rgb(255 255 255 / 0.11);
    --line-strong: rgb(255 255 255 / 0.2);
    --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.36);
    --shadow-deep: 0 2px 4px rgb(0 0 0 / 0.5), 0 28px 64px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--fg);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : hidden ferait du body un conteneur de défilement,
     ce qui désactive les timelines de scroll de la section réseau. */
  overflow-x: clip;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.on-dark :focus-visible,
.dna :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--accent);
}

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

/* --------------------------------------------------------------------------
   4. Typographie
   Tracking et interlignage varient avec la taille. Jamais une valeur unique.
   -------------------------------------------------------------------------- */

.t-display {
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.t-h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 20ch;
}

.t-h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

.t-h4 {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.t-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--fg-muted);
  max-width: 46ch;
}

.t-body {
  max-width: var(--measure);
  color: var(--fg-muted);
}

.t-num {
  font-size: clamp(2.75rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

.t-label {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.t-fg {
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   5. Primitives de layout
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--indigo);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: translate var(--t-base) var(--ease-out);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

/* Titre de section : filet court en accent, puis le titre. Zéro eyebrow. */
.sec-head {
  display: grid;
  gap: 1.25rem;
  max-width: 62ch;
}

.sec-head::before {
  content: "";
  width: 42px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   6. Boutons et liens
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--indigo);
  --btn-fg: #fff;
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform 100ms var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.btn:hover {
  --btn-bg: var(--ink);
  box-shadow: var(--shadow-lift);
}

/* Retour au pointer-down, pas au relâchement. */
.btn:active {
  transform: scale(0.985);
  box-shadow: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-line: var(--indigo);
  box-shadow: none;
}

.btn--on-dark {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
}

.btn--on-dark:hover {
  --btn-bg: #fff;
}

.btn--ghost-on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-line: var(--line-on-dark);
}

.btn--ghost-on-dark:hover {
  --btn-bg: rgb(255 255 255 / 0.08);
  --btn-line: rgb(255 255 255 / 0.4);
  box-shadow: none;
}

.btn__arrow {
  width: 1em;
  height: 1em;
  flex: none;
  transition: translate var(--t-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  translate: 3px 0;
}

/* Lien texte : soulignement jaune qui se déplie du bord d'attaque. */
.link {
  --u: var(--accent);
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding-bottom: 2px;
}

.link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--u);
  transform-origin: left;
  scale: 0 1;
  transition: scale var(--t-base) var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  scale: 1 1;
}

.link--quiet {
  font-weight: 400;
  color: var(--fg-muted);
}

.link--quiet:hover {
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   7. En-tête
   Matière translucide, le contenu passe dessous. Pas de barre opaque.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transition: box-shadow var(--t-base) var(--ease-out);
}

/* Bord de scroll en dégradé, pas un filet de 1px. */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--paper) 60%, transparent),
    transparent
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}

.site-header[data-stuck="true"]::after {
  opacity: 1;
}

.site-header[data-stuck="true"] {
  box-shadow: 0 1px 0 var(--line);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

/* Le logo est un lockup complet, symbole plus nom plus baseline, en 6:1.
   En dessous de 34px de haut la baseline devient illisible. */
.brand img {
  width: auto;
  height: 34px;
}

@media (max-width: 560px) {
  .brand img {
    height: 30px;
  }

  /* Sur un petit écran, logo, sélecteur de langue, bouton et menu ne tiennent
     pas sur une ligne. Le bouton est repris en tête du panneau, il ne perd
     donc rien à sortir d'ici. */
  .header-actions > .btn {
    display: none;
  }
}

.brand__dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .brand__light {
    display: none;
  }
  .brand__dark {
    display: block;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 1.4vw, 1.5rem);
}

.nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--t-base) var(--ease-out);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--fg);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  scale: 1 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
}

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang > * {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--fg-faint);
  transition: background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.lang > [aria-current="true"] {
  background: var(--indigo);
  color: #fff;
}

.lang > a:hover {
  color: var(--fg);
  background: var(--paper-2);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

.header-phone svg {
  width: 15px;
  height: 15px;
  color: var(--fg-faint);
}

.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex: none;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: translate var(--t-base) var(--ease-out),
    rotate var(--t-base) var(--ease-out), opacity var(--t-fast) linear;
}

.burger span + span {
  margin-top: 4px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  translate: 0 5.5px;
  rotate: 45deg;
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  translate: 0 -5.5px;
  rotate: -45deg;
}

/* Panneau mobile : sort et rentre par le même chemin. */
.mobile-panel {
  position: fixed;
  inset: 68px 0 auto;
  z-index: 99;
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem var(--gutter) 2rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
  translate: 0 -8px;
  opacity: 0;
  visibility: hidden;
  transform-origin: top;
  transition: translate 350ms var(--ease-out), opacity 200ms var(--ease-out),
    visibility 0s linear 350ms;
}

.mobile-panel[data-open="true"] {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-panel a {
  padding: 0.8125rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mobile-panel__phone {
  color: var(--indigo);
  border-bottom: 0 !important;
}

@media (prefers-color-scheme: dark) {
  .mobile-panel__phone {
    color: #cfcbe8;
  }
}

.mobile-panel .btn {
  margin-top: 0.5rem;
  justify-self: start;
}

/* Le numéro sort du header avant que la navigation ne se replie : six entrées
   plus un numéro plus le sélecteur de langue ne tiennent pas sur une ligne
   en dessous de 1340px, et une navigation sur deux lignes est cassée. */
@media (max-width: 1340px) {
  .header-phone {
    display: none;
  }
}

@media (max-width: 1140px) {
  .nav {
    display: none;
  }
  .burger {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   Split asymétrique 6/5 avec une colonne creuse. Jamais centré.
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  align-items: center;
}

.hero__copy {
  grid-column: 1 / span 7;
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
  justify-items: start;
}

/* Le titre d'accueil est une phrase complète, il se coupe tout seul.
   La mesure le force sur trois lignes, ce qui est la bonne silhouette ici. */
.hero__title {
  max-width: 20ch;
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  text-wrap: balance;
}

/* Le second membre du titre porte la couleur de marque, en ligne. */
.hero__title em {
  font-style: normal;
  color: var(--indigo);
  position: relative;
}

@media (prefers-color-scheme: dark) {
  .hero__title em {
    color: #cfcbe8;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__visual {
  grid-column: 9 / span 4;
  position: relative;
}

@media (max-width: 980px) {
  .hero__copy {
    grid-column: 1 / -1;
  }
  .hero__visual {
    grid-column: 1 / -1;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* Figure de réseau : le concept du site, pas une décoration. */
.netfig {
  width: 100%;
  height: auto;
  overflow: visible;
}

.netfig__dot {
  fill: var(--line-strong);
}

.netfig__edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
}

/* Comme pour la carte : masqué seulement si JavaScript peut le rejouer. */
.js .netfig__edge {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}

.netfig__edge--soft {
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.netfig__node {
  fill: var(--indigo);
  transform-box: fill-box;
  transform-origin: center;
}

.js .netfig__node {
  scale: 0;
}

@media (prefers-color-scheme: dark) {
  .netfig__node {
    fill: #cfcbe8;
  }
}

.netfig__hub {
  fill: var(--indigo);
}

.netfig__hub-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}

/* Séquence : le hub, puis les liens qui se tracent, puis les satellites. */
.js .netfig[data-play="true"] .netfig__hub,
.js .netfig[data-play="true"] .netfig__hub-ring {
  animation: nf-pop 620ms var(--ease-out) both;
}

.js .netfig[data-play="true"] .netfig__edge {
  animation: nf-draw 900ms var(--ease-out) both;
  animation-delay: calc(280ms + var(--i) * 70ms);
}

.js .netfig[data-play="true"] .netfig__node {
  animation: nf-pop 520ms var(--ease-out) both;
  animation-delay: calc(620ms + var(--i) * 70ms);
}

.js .netfig:not([data-play="true"]) .netfig__hub,
.js .netfig:not([data-play="true"]) .netfig__hub-ring {
  scale: 0;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes nf-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nf-pop {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

/* --------------------------------------------------------------------------
   8 bis. Bandes d'appel à l'action
   Une tous les deux écrans environ. Même libellé de bouton partout, seul
   le texte qui l'entoure change selon le moment de la lecture.
   -------------------------------------------------------------------------- */

.ctaband {
  background: var(--indigo);
  color: var(--fg-on-dark);
  position: relative;
  overflow: clip;
}

.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dégradé très léger, demandé par le client, tenu à la limite du visible. */
  background: radial-gradient(
    90% 140% at 88% 10%,
    rgb(222 220 0 / 0.16),
    transparent 62%
  );
  pointer-events: none;
}

.ctaband__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.ctaband__copy {
  display: grid;
  gap: 0.75rem;
  max-width: 46ch;
}

.ctaband__copy h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.ctaband__copy p {
  color: var(--fg-on-dark-muted);
  font-size: 1rem;
}

.ctaband .btn {
  flex: none;
}

/* --------------------------------------------------------------------------
   8 ter. Le moment « ambassadeurs »
   Le texte sur de l'indigo plein, la photographie sur la moitié droite qui
   déborde jusqu'au bord. Plus lisible qu'un texte posé sur une image, des
   arêtes nettes, et deux fois moins haut qu'une bande pleine largeur.
   -------------------------------------------------------------------------- */

.ambassadors {
  position: relative;
  overflow: clip;
  background: var(--indigo);
  color: var(--fg-on-dark);
  min-height: clamp(22rem, 32vw, 28rem);
  display: grid;
  align-items: center;
}

.ambassadors__media {
  position: absolute;
  inset: 0 0 0 48%;
}

.ambassadors__media picture,
.ambassadors__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* Fondu vers l'indigo sur le bord d'attaque : la photographie n'est pas
   coupée au couteau, elle sort de la couleur. */
.ambassadors__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--indigo) 0%,
    rgb(42 36 90 / 0.72) 14%,
    rgb(42 36 90 / 0.12) 42%,
    transparent 70%
  );
}

.ambassadors .shell {
  position: relative;
}

.ambassadors__copy {
  display: grid;
  gap: 1rem;
  max-width: 42ch;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.ambassadors__copy .ambassadors__quote {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: #fff;
  text-wrap: balance;
}

.ambassadors__copy .ambassadors__quote em {
  font-style: normal;
  color: var(--accent);
  display: block;
}

.ambassadors__copy p:not(.ambassadors__quote) {
  color: var(--fg-on-dark-muted);
  font-size: 0.9688rem;
  max-width: 46ch;
}

@media (max-width: 860px) {
  .ambassadors {
    display: block;
    min-height: 0;
  }
  .ambassadors__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }
  .ambassadors__media::after {
    background: linear-gradient(to bottom, transparent 40%, var(--indigo) 100%);
  }
  .ambassadors__copy {
    max-width: none;
    padding-block: clamp(2rem, 6vw, 3rem);
  }
}

/* --------------------------------------------------------------------------
   8 ter bis. Ouverture de page en pleine largeur
   Utilisée par Qui sommes-nous et Pourquoi Rezofran, jamais sur l'accueil.
   -------------------------------------------------------------------------- */

.fullband {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 40vw, 32rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ink);
  color: var(--fg-on-dark);
}

.fullband__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.fullband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(20 17 46 / 0.94) 0%,
    rgb(20 17 46 / 0.78) 34%,
    rgb(20 17 46 / 0.34) 74%,
    rgb(20 17 46 / 0.2) 100%
  );
}

.fullband__copy {
  display: grid;
  gap: 1.25rem;
  max-width: 56ch;
}

.fullband__title {
  color: #fff;
  max-width: 15ch;
}

.fullband__title em {
  font-style: normal;
  color: var(--accent);
}

.fullband__lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--fg-on-dark-muted);
  max-width: 46ch;
}

/* --- Emplacements client, mise en page ------------------------------- */

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Carte de presse, alignée sur les emplacements en attente qui l'entourent. */
/* --- Bouton large, pour les appels à l'action principaux -------------- */

.btn--lg {
  min-height: 3.375rem;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   8 quater. Grille de cartes à icône
   Le client a demandé des cartes et des icônes modernes. Cartes au filet,
   jamais à l'ombre portée, et une seule famille d'icônes (Phosphor).
   -------------------------------------------------------------------------- */

/* Colonnes explicites plutôt qu'auto-fit : les deux grilles comptent huit
   cartes, et 8 se divise par 4, 2 et 1. Aucune cellule vide, à aucune largeur. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

@media (min-width: 1100px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--paper);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  transition: background var(--t-base) var(--ease-out);
}

.card:hover {
  background: var(--paper-2);
}

.card__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.375rem;
  color: var(--indigo);
}

@media (prefers-color-scheme: dark) {
  .card__icon {
    color: #b3aede;
  }
}

.card__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.card p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Variante numérotée, pour les huit raisons. */
.card--numbered {
  counter-increment: card;
  position: relative;
}

.card--numbered::after {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2rem);
  right: clamp(1.5rem, 2.6vw, 2rem);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.cards--counted {
  counter-reset: card;
}

/* --------------------------------------------------------------------------
   8 quinquies. Comparatif
   Deux colonnes, pas de barres de progression ni de coches vertes.
   -------------------------------------------------------------------------- */

.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.versus__head {
  padding: 1rem 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--line);
}

.versus__head--us {
  color: var(--indigo);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  .versus__head--us {
    color: #b3aede;
  }
}

.versus__cell {
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--fg-muted);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
}

.versus__cell--us {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: 0;
  border-left: 1px solid var(--line);
  color: var(--fg);
  font-weight: 500;
}

@media (max-width: 720px) {
  .versus {
    grid-template-columns: 1fr;
  }
  .versus__head--us,
  .versus__cell--us {
    border-left: 0;
    padding-left: 0;
  }
  .versus__head--them,
  .versus__cell--them {
    opacity: 0.72;
  }
}

/* --------------------------------------------------------------------------
   8 sexies. Emplacements en attente de contenu client
   Rendus visibles et assumés plutôt que masqués : c'est une demande
   explicite adressée au client, pas un trou dans la page.
   -------------------------------------------------------------------------- */

.slot {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--fg-muted);
}

.slot__tag {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slot p {
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.slot__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.slot__logo {
  height: 3rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--indigo) 8%, transparent);
}

.slot__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--indigo) 8%, transparent);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
  color: var(--fg-faint);
}

.slot__video svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   9. Bandeau de preuve
   Quatre chiffres séparés par des filets. Pas de cartes.
   -------------------------------------------------------------------------- */

.proof {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Compteur en attente du chiffre réel. Assumé, pas masqué. */
.proof__todo {
  display: inline-grid;
  place-items: center;
  min-width: 3.25rem;
  height: 3rem;
  padding-inline: 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.proof__note {
  padding-block: 1.25rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--fg-faint);
}

.proof__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.2vw, 2rem);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.proof__item + .proof__item {
  border-left: 1px solid var(--line);
}

.proof__item:first-child {
  padding-left: 0;
}

.proof__item:last-child {
  padding-right: 0;
}

.proof__value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.proof__unit {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

.proof__label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 26ch;
}

/* Trois colonnes : le quatrième élément ouvre une seconde rangée, séparée
   par un filet horizontal plutôt que par un vide. */
.proof__item:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

.proof__item:nth-child(3n) {
  padding-right: 0;
}

.proof__item:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .proof__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proof__item {
    padding-inline: 0;
    border-left: 0;
    border-top: 0;
  }
  .proof__item:nth-child(2n) {
    padding-left: clamp(1rem, 4vw, 2rem);
    border-left: 1px solid var(--line);
  }
  .proof__item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .proof__list {
    grid-template-columns: 1fr;
  }
  .proof__item {
    padding-inline: 0 !important;
    border-left: 0 !important;
  }
  .proof__item + .proof__item {
    border-top: 1px solid var(--line);
  }
  .proof__label {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   10. Équipe
   Le fondateur en carte large, les quatre autres reliés par le motif réseau.
   -------------------------------------------------------------------------- */

.team__head {
  grid-column: 1 / span 5;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  position: sticky;
  top: 7rem;
}

.team__body {
  grid-column: 7 / span 6;
  display: grid;
  gap: 1.5rem;
}

.team__note {
  display: grid;
  gap: 0.75rem;
  color: var(--fg-muted);
  font-size: 1rem;
}

.team__note::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
}

/* Sur la page Qui sommes-nous, la grille n'est plus dans la grille 12. */
.team__people--page {
  grid-column: auto;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.team__people {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  position: relative;
}

/* Le trait qui relie les points du réseau. La figure du logo, en petit. */
.team__people::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--accent) 0 12%,
    var(--line) 12% 100%
  );
}

.person {
  padding-top: 1.75rem;
  display: grid;
  gap: 0.875rem;
  align-content: start;
}

.person--founder {
  grid-column: span 2;
}

.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.person--founder .person__photo {
  aspect-ratio: 8 / 5;
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Placeholder : initiale en creux, pas d'avatar générique. */
.person__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(
    150deg,
    var(--paper-2),
    color-mix(in srgb, var(--indigo) 9%, var(--paper-2))
  );
}

.person__ph span {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--indigo) 22%, transparent);
}

.person__todo {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.person__role {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--indigo);
}

@media (prefers-color-scheme: dark) {
  .person__role {
    color: #b3aede;
  }
}

.person__bio {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

@media (max-width: 1000px) {
  .team__head,
  .team__body {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 860px) {
  .team__people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .person--founder {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .team__people {
    grid-template-columns: 1fr;
  }
  .person--founder {
    grid-column: span 1;
  }
  .person--founder .person__photo {
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   11. Méthode
   Timeline verticale. Les étapes n'ont pas le même poids, la grille ne ment pas.
   -------------------------------------------------------------------------- */

.method__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.steps {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  position: relative;
}

/* Huit étapes en une seule colonne occupaient un écran et demi. Deux colonnes
   de quatre gardent la progression et rendent la page lisible d'un coup. */
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .step:nth-child(-n + 2) {
    border-top: 0;
  }
  .step:nth-child(2n) {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    border-left: 1px solid var(--line);
  }
}

/* Frise à huit étapes : plus de photographie par étape, le client a demandé
   une frise simple. Chaque étape porte en revanche qui l'exécute. */
.step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  align-items: start;
}

.step__by {
  justify-self: end;
  align-self: start;
  margin-top: 0.25rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
}

.step__by[data-by="us"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.step__by[data-by="option"] {
  border-style: dashed;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.legend__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.legend .step__by {
  margin-top: 0;
}

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

.step__rail {
  position: relative;
  display: grid;
  align-content: start;
}

.step__n {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  transition: color var(--t-slow) var(--ease-out),
    -webkit-text-stroke-color var(--t-slow) var(--ease-out);
  font-variant-numeric: tabular-nums;
}

.step[data-seen="true"] .step__n {
  color: var(--indigo);
  -webkit-text-stroke-color: transparent;
}

@media (prefers-color-scheme: dark) {
  .step[data-seen="true"] .step__n {
    color: #cfcbe8;
  }
}

/* Le trait de progression, rempli en jaune au passage. */
.step__line {
  position: absolute;
  left: calc(1.25rem - 1px);
  top: 3.75rem;
  bottom: calc(-1 * clamp(2rem, 4vw, 3rem) - 1px);
  width: 2px;
  background: var(--line);
  overflow: hidden;
}

.step:last-child .step__line {
  display: none;
}

.step__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  background: var(--accent);
  transform-origin: top;
  scale: 1 0;
  transition: scale 900ms var(--ease-out);
}

.step[data-seen="true"] .step__line::after {
  scale: 1 1;
}

.step__content {
  display: grid;
  gap: 1rem;
  max-width: 62ch;
}

.step__summary {
  color: var(--fg-muted);
  max-width: 54ch;
}

.step__points {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.step__points li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 58ch;
}

.step__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6875em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--indigo);
}

@media (prefers-color-scheme: dark) {
  .step__points li::before {
    border-color: #9d98cf;
  }
}

@media (max-width: 1000px) {
  .step {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
  .step__by {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.25rem;
  }
}

@media (max-width: 640px) {
  .step {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .step__line {
    display: none;
  }
  .step__by {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   11 bis. Réseau
   La séquence signature. Le maillage se construit à mesure qu'on défile :
   c'est exactement ce que Rezofran vend, montré au lieu d'être écrit.

   Deux implémentations pour un seul rendu :
   - là où `animation-timeline` existe, la séquence est scrubbée au défilement
     et tourne hors du thread principal, donc sans à-coups ;
   - ailleurs, elle se joue une fois à l'entrée dans le champ, au temps.
   Aucun écouteur sur l'événement scroll dans les deux cas.
   -------------------------------------------------------------------------- */

.net2 {
  background: var(--ink);
  color: var(--fg-on-dark);
  position: relative;
}

/* Ouverture : la rue commerçante, qui se fond dans le noir. */
.net2__intro {
  position: relative;
  isolation: isolate;
  min-height: clamp(17rem, 24vw, 21rem);
  display: grid;
  align-items: end;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.net2__intro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.net2__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* La rue reste lisible en haut, le texte trouve son contraste en bas,
     et la section se fond dans le noir de la séquence qui suit. */
  background: linear-gradient(
    to top,
    var(--ink) 0%,
    rgb(20 17 46 / 0.94) 26%,
    rgb(20 17 46 / 0.6) 58%,
    rgb(20 17 46 / 0.3) 100%
  );
}

.net2__intro-copy {
  display: grid;
  gap: 1.25rem;
}

.net2__title {
  color: #fff;
  max-width: 17ch;
}

.net2__lede {
  color: var(--fg-on-dark-muted);
  max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* La piste donne sa durée à la séquence. La scène reste collée pendant. */
.net2__track {
  position: relative;
  height: 280vh;
}

.net2__stage {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  overflow: clip;
}

/* Texture : la photo aérienne nocturne, réduite à un champ de lumières.
   Les points chauds de l'image répondent aux nœuds de la carte. */
.net2__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: image-set(
      url("../img/reseau-aerien.webp") type("image/webp"),
      url("../img/reseau-aerien.jpg") type("image/jpeg")
    )
    center / cover no-repeat;
  /* Assez présent pour qu'on lise des milliers de lumières, assez discret
     pour que la carte reste le sujet. */
  opacity: 0.16;
  mask-image: radial-gradient(100% 78% at 50% 46%, #000 0%, transparent 72%);
}

.net2__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.net2__beats {
  display: grid;
  gap: 1.5rem;
  align-content: center;
}

.beat {
  position: relative;
  padding-left: 1.5rem;
  color: var(--line-on-dark);
  transition: opacity 400ms var(--ease-out), color 400ms var(--ease-out);
  opacity: 0.38;
}

.beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.beat h3 {
  color: #fff;
  margin-bottom: 0.375rem;
}

.beat p {
  color: var(--fg-on-dark-muted);
  font-size: 0.9688rem;
  max-width: 38ch;
}

.net2__map-wrap {
  position: relative;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.net2__note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-faint);
  max-width: 46ch;
  text-align: center;
}

.netmap {
  width: 100%;
  max-width: min(100%, 68vh);
  height: auto;
  overflow: visible;
}

.netmap__land {
  fill: rgb(255 255 255 / 0.05);
  stroke: rgb(255 255 255 / 0.3);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.netmap__link {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.netmap__city {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
}

/* L'état masqué n'existe que si JavaScript peut le rejouer.
   Sans lui, le schéma s'affiche complet, ce qui est l'information utile. */
.js .netmap__link {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}

.js .netmap__city {
  scale: 0;
}

.netmap__hub {
  fill: var(--accent);
}

.netmap__hub-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.55;
}

@keyframes nm-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nm-pop {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes nm-beat {
  to {
    opacity: 1;
    color: var(--accent);
  }
}

/* Repli : séquence au temps, jouée une fois à l'entrée dans le champ. */
.js .net2__stage[data-seen="true"] .netmap__link {
  animation: nm-draw 900ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms);
}

.js .net2__stage[data-seen="true"] .netmap__city {
  animation: nm-pop 460ms var(--ease-out) both;
  animation-delay: calc(320ms + var(--i) * 110ms);
}

.js .net2__stage[data-seen="true"] .beat {
  animation: nm-beat 500ms var(--ease-out) both;
  animation-delay: calc(400ms + var(--i) * 620ms);
}

/* Mode scrubbé : le défilement pilote la progression, via l'API ViewTimeline
   côté JavaScript (voir site.js). Les animations au temps ci-dessus sont
   alors neutralisées pour ne pas se battre avec elle.

   Pourquoi pas `animation-timeline` en CSS : la propriété est plus élégante,
   mais quand elle est reconnue sans être réellement active, l'élément reste
   figé sur son état de départ, et la carte reste vide. Le pilotage WAAPI
   permet de vérifier que la timeline vit avant de masquer quoi que ce soit. */
.net2__stage[data-mode="scrub"] .netmap__link,
.net2__stage[data-mode="scrub"] .netmap__city,
.net2__stage[data-mode="scrub"] .beat {
  animation: none;
}

@media (max-width: 900px) {
  .net2__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .net2__track {
    height: 250vh;
  }
  .netmap {
    max-width: min(100%, 44vh);
  }
  .beat p {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   12. ADN
   Ferme le mouvement sombre ouvert par la section réseau.
   -------------------------------------------------------------------------- */

.dna {
  background: var(--indigo);
  color: var(--fg-on-dark);
  position: relative;
  overflow: hidden;
}

/* Motif réseau en filigrane, hérité du hero. */
.dna__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(
    120% 90% at 88% 8%,
    #000 0%,
    transparent 68%
  );
}

.dna .shell {
  position: relative;
}

.dna__grid {
  align-items: start;
}

.dna__head {
  grid-column: 1 / span 5;
}

.dna__title {
  color: #fff;
}

.dna__contracts {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dna__contracts li {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-on-dark);
}

.dna__contracts li:first-child {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.dna__body {
  grid-column: 7 / span 6;
  display: grid;
  gap: 1.25rem;
}

.dna__body p {
  color: var(--fg-on-dark-muted);
  max-width: 58ch;
}

.dna__quote {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-column: 1 / -1;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-on-dark);
  display: grid;
  gap: 1.5rem;
}

.dna__quote blockquote {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: #fff;
  max-width: 18ch;
  text-wrap: balance;
}

.dna__cite {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-style: normal;
}

.dna__cite-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.dna__cite-name {
  font-weight: 650;
  color: #fff;
  line-height: 1.3;
}

.dna__cite-role {
  font-size: 0.875rem;
  color: var(--fg-on-dark-muted);
  line-height: 1.3;
}

@media (max-width: 980px) {
  .dna__head,
  .dna__body {
    grid-column: 1 / -1;
  }
  .dna__body {
    margin-top: 1rem;
  }
}

/* --------------------------------------------------------------------------
   13. Vidéo
   Séquence dédiée. Façade cliquable : rien n'est chargé avant le clic.
   -------------------------------------------------------------------------- */

.video__head {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.video__frame {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--indigo);
  border: 1px solid var(--line);
}

.video__frame img,
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video__facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  cursor: pointer;
  color: #fff;
}

.video__facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgb(20 17 46 / 0.15),
    rgb(20 17 46 / 0.72)
  );
  transition: background var(--t-base) var(--ease-out);
}

.video__facade:hover::before {
  background: linear-gradient(
    200deg,
    rgb(20 17 46 / 0.05),
    rgb(20 17 46 / 0.62)
  );
}

.video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4rem, 8vw, 5.5rem);
  height: clamp(4rem, 8vw, 5.5rem);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.video__facade:hover .video__play {
  transform: scale(1.06);
  box-shadow: 0 12px 40px rgb(222 220 0 / 0.35);
}

.video__facade:active .video__play {
  transform: scale(0.97);
}

.video__play svg {
  width: 40%;
  height: 40%;
  margin-left: 8%;
}

.video__meta {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.video__consent {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------------
   14. Offre
   Argument de coût en display, puis quatre points en liste éditoriale.
   -------------------------------------------------------------------------- */

.offer {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.offer__pitch {
  grid-column: 1 / span 6;
  display: grid;
  gap: 1.5rem;
  align-content: center;
}

.offer__media {
  grid-column: 8 / span 5;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
}

.offer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer__claim {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 17ch;
}

.offer__claim mark {
  background: none;
  color: inherit;
  position: relative;
  white-space: nowrap;
}

/* Surlignage jaune derrière le mot fort. Le texte reste encre, contraste tenu. */
.offer__claim mark::before {
  content: "";
  position: absolute;
  inset-inline: -0.1em;
  bottom: 0.06em;
  height: 0.42em;
  background: var(--accent);
  z-index: -1;
  border-radius: 2px;
}

.offer__note {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  max-width: 44ch;
}

.offer__list {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.offer__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  display: grid;
  gap: 0.625rem;
  align-content: start;
  border-bottom: 1px solid var(--line);
}

.offer__item:nth-child(odd) {
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

.offer__item:nth-child(even) {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid var(--line);
}

.offer__item p {
  color: var(--fg-muted);
  font-size: 0.9688rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .offer__pitch,
  .offer__media {
    grid-column: 1 / -1;
  }
  .offer__list {
    grid-template-columns: 1fr;
  }
  .offer__item {
    padding-inline: 0 !important;
    border-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contact {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.contact__aside {
  grid-column: 1 / span 4;
  display: grid;
  gap: 2.25rem;
  align-content: start;
}

.contact__block {
  display: grid;
  gap: 0.375rem;
}

.contact__block a {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  text-decoration: none;
  justify-self: start;
}

.contact__block address {
  font-style: normal;
  white-space: pre-line;
  color: var(--fg-muted);
}

.contact__form {
  grid-column: 6 / span 7;
}

@media (max-width: 980px) {
  .contact__aside,
  .contact__form {
    grid-column: 1 / -1;
  }
  .contact__form {
    margin-top: 1rem;
  }
}

/* Champs : label au-dessus, aide en dessous, erreur sous le champ. */
.form {
  display: grid;
  gap: 1rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4375rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.004em;
}

.field label span {
  font-weight: 400;
  color: var(--fg-faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-faint);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--fg-faint);
}

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 18%, transparent);
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.field__error {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b4223a;
}

@media (prefers-color-scheme: dark) {
  .field__error {
    color: #ff8fa3;
  }
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea {
  border-color: #b4223a;
}

.field[data-invalid="true"] .field__error {
  display: block;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.28rem;
  accent-color: var(--indigo);
  flex: none;
}

.consent label {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form__status {
  font-size: 0.875rem;
  font-weight: 600;
}

.form__status[data-state="error"] {
  color: #b4223a;
}

.form__done {
  display: none;
  gap: 0.5rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper);
}

.form[data-sent="true"] {
  display: none;
}

.form__done[data-show="true"] {
  display: grid;
}

.form__done-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

@media (max-width: 560px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

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

.site-footer {
  background: var(--ink);
  color: var(--fg-on-dark);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}

.footer__grid {
  gap: clamp(2rem, 4vw, 3rem);
}

.footer__brand {
  grid-column: 1 / span 4;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.footer__brand img {
  height: 42px;
  width: auto;
}

.footer__tagline {
  color: var(--fg-on-dark-muted);
  font-size: 0.9375rem;
  max-width: 30ch;
}

.footer__col {
  grid-column: span 2;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.footer__col:nth-of-type(2) {
  grid-column: 6 / span 2;
}

.footer__col h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.25rem;
}

.footer__col a,
.footer__col address {
  font-size: 0.9375rem;
  font-style: normal;
  color: var(--fg-on-dark-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
  white-space: pre-line;
}

.footer__col a:hover {
  color: #fff;
}

.footer__bottom {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--fg-faint);
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-on-dark-muted);
  text-decoration: none;
  font-weight: 600;
}

.footer__top:hover {
  color: #fff;
}

@media (max-width: 860px) {
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__col,
  .footer__col:nth-of-type(2) {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .footer__col,
  .footer__col:nth-of-type(2) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   18. Page formations
   -------------------------------------------------------------------------- */

.page-hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.page-hero__copy {
  grid-column: 1 / span 7;
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}

.page-hero__title em {
  font-style: normal;
  color: var(--indigo);
}

@media (prefers-color-scheme: dark) {
  .page-hero__title em {
    color: #cfcbe8;
  }
}

@media (max-width: 900px) {
  .page-hero__copy {
    grid-column: 1 / -1;
  }
}

.course {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.course__media {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
}

.course__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course__body {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.course__level {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.course__body p {
  color: var(--fg-muted);
  max-width: 54ch;
}

@media (max-width: 760px) {
  .course {
    grid-template-columns: 1fr;
  }
}

.more {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r);
  background: var(--indigo);
  color: #fff;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.more p {
  color: var(--fg-on-dark-muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   19. Reveals au scroll
   IntersectionObserver, jamais d'écouteur sur l'événement scroll.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--t-slow) var(--ease-out),
    translate var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.js .reveal[data-seen="true"] {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   20. Préférences utilisateur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 180ms !important;
    transition-property: opacity, color, background-color, border-color !important;
  }

  .js .reveal {
    translate: none;
  }

  .js .netfig .netfig__node,
  .js .netfig .netfig__hub,
  .js .netfig .netfig__hub-ring {
    scale: 1 !important;
  }

  .js .netfig .netfig__edge,
  .js .netmap__link {
    stroke-dashoffset: 0 !important;
  }

  .js .netmap__city {
    scale: 1 !important;
  }

  .js .beat {
    opacity: 1 !important;
    color: var(--accent) !important;
  }

  .js .netfig .netfig__label {
    opacity: 1 !important;
  }

  .step__line::after {
    scale: 1 1 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .mobile-panel {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgb(42 36 90 / 0.34);
    --line-strong: rgb(42 36 90 / 0.6);
    --fg-muted: #3b3760;
    --fg-faint: #4a466e;
  }

  .btn--ghost {
    --btn-line: currentColor;
  }
}

/* --------------------------------------------------------------------------
   21. Impression
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-panel,
  .hero__visual,
  .video,
  .contact__form,
  .footer__top {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .dna,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .dna__body p,
  .footer__col a {
    color: #333 !important;
  }

  .reveal {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* --------------------------------------------------------------------------
   19. Pages juridiques
   Une colonne de texte, mesure courte, aucune mise en scène. Ces pages se
   lisent en entier ou pas du tout : tout ce qui distrait est retiré.
   -------------------------------------------------------------------------- */

.legalpage {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.legalpage__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.legalpage__back {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

/* --- Le bloc de prose ------------------------------------------------- */

.prose {
  max-width: 68ch;
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1.125rem;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--fg);
  letter-spacing: -0.018em;
  line-height: 1.25;
  text-wrap: balance;
}

.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.prose h3 {
  font-size: 1.125rem;
  font-weight: 650;
  margin-top: 2rem;
}

.prose h4 {
  font-size: 1rem;
  font-weight: 650;
  margin-top: 1.75rem;
}

/* Le premier titre ne pousse pas : le filet de l'en-tête sert déjà de respiration. */
.prose > :first-child {
  margin-top: 0;
}

.prose a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

@media (prefers-color-scheme: dark) {
  .prose a {
    color: #b3aede;
  }
}

.prose ul {
  padding-left: 1.125rem;
  display: grid;
  gap: 0.625rem;
}

.prose li {
  list-style: disc;
}

.prose li::marker {
  color: var(--accent-ink);
}

/* --- Le tableau des cookies ------------------------------------------- */

/* Cinquante-cinq lignes : il déborde de la mesure de lecture, et c'est normal.
   Il défile dans son propre conteneur pour ne jamais pousser la page. */
.prose__tablewrap {
  max-width: none;
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  -webkit-overflow-scrolling: touch;
}

.prose__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
}

.prose__table th,
.prose__table td {
  text-align: left;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose__table th {
  position: sticky;
  top: 0;
  background: var(--paper-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

.prose__table tbody tr:last-child td {
  border-bottom: 0;
}

.prose__table code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.prose__empty {
  color: var(--fg-faint);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   20. La photo d'équipe
   Cinq portraits alignés sur du blanc, comme une photo de groupe prise en
   studio. Le prénom apparaît au survol et à la tabulation. Les portraits
   sont détourés et se posent directement sur le fond de la page.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   20. L'équipe
   Le portrait du fondateur accompagne son texte, les quatre autres sont en
   cartes avec le prénom à côté. Aucune interaction au survol : le prénom est
   lisible d'emblée, donc accessible au clavier et au lecteur d'écran.
   Les portraits sont étalonnés sur la largeur de tête et coupés au même
   niveau de buste : même échelle de visage d'une carte à l'autre.
   -------------------------------------------------------------------------- */

/* Les portraits sont détourés : ils se posent sur le fond de la page, sans
   cadre ni aplat blanc. Toute boîte autour reviendrait à réintroduire la
   couture qu'on vient d'enlever. */
.portrait {
  display: block;
}

.portrait img,
.portrait picture {
  display: block;
  width: 100%;
  height: auto;
}

/* Le portrait du fondateur occupe la colonne laissée libre par le titre, et
   tient l'équilibre avec la longue colonne de texte à droite. */
.portrait--founder {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 28rem;
}

.portrait__cap {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  max-width: 20rem;
}

.portrait__cap b {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--fg);
}

.portrait__cap span {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* Les quatre autres : portrait détouré à gauche, prénom à côté. */
.pcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  /* Sans borne, une carte pleine largeur laisserait un vide immense à droite
     du prénom. À rouvrir en deux colonnes si l'équipe affichée repasse à quatre. */
  max-width: 34rem;
}

.pcard {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: var(--r);
  background: var(--paper-2);
  overflow: hidden;
  transition: background var(--t-base) var(--ease-out);
}

.pcard:hover {
  background: color-mix(in srgb, var(--indigo) 6%, var(--paper-2));
}

.pcard__img {
  display: block;
  align-self: end;
}

.pcard__img img {
  display: block;
  width: 100%;
  height: auto;
}

.pcard__name {
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  align-self: center;
}

.team2__values {
  margin-top: 0.75rem;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--fg);
  max-width: 44ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   21. Mur de logos des enseignes accompagnées
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   21. Les enseignes accompagnées
   Une carte par enseigne : le logo sur du blanc, puis le secteur, le nom et
   une phrase sur son activité. Le logo seul ne disait rien à un franchiseur
   qui ne connaît pas la marque.
   -------------------------------------------------------------------------- */

.refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.ref {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.ref:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* Le logo garde son fond blanc d'origine : les fichiers fournis par le client
   sont pour la plupart des JPEG sur blanc, toute autre couleur ferait une
   couture visible. */
.ref__logo {
  display: grid;
  place-items: center;
  background: #fff;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  min-height: 7.5rem;
  border-bottom: 1px solid var(--line);
}

/* Les logos sont rognés de leurs marges blanches à l'export, donc leur poids
   optique est comparable. Le carré large des logos ronds est compensé par une
   hauteur maximale un peu plus basse que la largeur. */
.ref__logo img {
  display: block;
  max-width: 11rem;
  max-height: 3.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ref__body {
  display: grid;
  gap: 0.4375rem;
  align-content: start;
  padding: clamp(1.125rem, 2.2vw, 1.5rem);
}

.ref__sector {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.ref__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--fg);
}

.ref__text {
  font-size: 0.9063rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Quand le compte d'enseignes ne remplit pas la dernière rangée, la dernière
   carte s'étire sur ce qui manque et bascule à l'horizontale : l'élargissement
   se lit comme une mise en page, pas comme un reste. L'étirement est calculé
   au build, `--span3` vaut 1 quand la rangée tombe juste. */
.ref:last-child {
  grid-column: span var(--span3, 1);
}

.refs[style*="--span3:2"] .ref:last-child,
.refs[style*="--span3:3"] .ref:last-child {
  grid-template-rows: none;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  align-items: center;
}

.refs[style*="--span3:2"] .ref:last-child .ref__logo,
.refs[style*="--span3:3"] .ref:last-child .ref__logo {
  height: 100%;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}

.refs[style*="--span3:2"] .ref:last-child .ref__body,
.refs[style*="--span3:3"] .ref:last-child .ref__body {
  align-content: center;
  max-width: 62ch;
}

@media (max-width: 980px) {
  .refs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ref:last-child {
    grid-column: span var(--span2, 1);
  }
}

@media (max-width: 620px) {
  .refs {
    grid-template-columns: 1fr;
  }
  .refs .ref:last-child {
    grid-column: span 1;
    grid-template-rows: auto 1fr;
    grid-template-columns: none;
  }
  .refs .ref:last-child .ref__logo {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   22. Les partenaires
   -------------------------------------------------------------------------- */

.partners__card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
}

.partners__copy {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}

/* Le titre du client est long. Il ne doit pas écraser la liste qui est
   l'information utile du bloc. */
.partners__copy .t-h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

/* Des pastilles rangées en grille laissaient des cellules vides, des hauteurs
   inégales et des libellés coupés en deux. Une liste à filets encaisse les
   intitulés longs sans se déformer, et se lit de haut en bas. */
.partners__list {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--line);
}

.partners__list li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg);
}

.partners__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
  translate: 0 -0.15em;
}

@media (max-width: 820px) {
  .partners__card {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   23. Comparatif
   Deux panneaux côte à côte. Celui de Rezofran est surélevé, porte un filet
   jaune et coche chaque ligne : le client voulait ses prestations mieux
   mises en valeur, et le tableau à plat ne le faisait pas.
   -------------------------------------------------------------------------- */

.vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

.vs__panel {
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

/* Le concurrent : plat, en retrait, sans relief. */
.vs__panel--them {
  border: 1px solid var(--line);
  background: transparent;
}

/* Rezofran : une vraie surface, une bordure d'accent complète, une ombre
   courte. Jamais de filet sur une seule arête, c'est le tic des thèmes tout
   faits, et la règle vaut pour le haut comme pour la gauche. */
.vs__panel--us {
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 2px rgb(20 17 46 / 0.04), 0 12px 28px -18px rgb(20 17 46 / 0.28);
}

.vs__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.vs__label--us {
  color: var(--indigo);
}

@media (prefers-color-scheme: dark) {
  .vs__label--us {
    color: #b3aede;
  }
}

.vs__list {
  display: grid;
  gap: 0.875rem;
}

.vs__row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9688rem;
  line-height: 1.55;
}

.vs__panel--them .vs__row {
  color: var(--fg-muted);
}

.vs__panel--us .vs__row {
  color: var(--fg);
  font-weight: 500;
}

.vs__mark {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex: none;
}

/* Pas de croix rouge : on ne caricature pas le concurrent, on le laisse gris. */
.vs__mark--them {
  border: 1px solid var(--line-strong);
  background: transparent;
}

.vs__mark--them::after {
  content: "";
  width: 0.5rem;
  height: 1px;
  background: var(--fg-faint);
}

.vs__mark--us {
  background: var(--accent);
  color: var(--ink);
}

.vs__mark--us svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (max-width: 780px) {
  .vs {
    grid-template-columns: 1fr;
  }
  /* Sur mobile, Rezofran passe en premier : c'est l'argument, pas la comparaison. */
  .vs__panel--us {
    order: -1;
  }
}

/* Sur-titre du hero, demandé par le client au-dessus du sous-titre. */
.hero__kicker {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--indigo);
  max-width: 34ch;
  text-wrap: balance;
}

@media (prefers-color-scheme: dark) {
  .hero__kicker {
    color: #b3aede;
  }
}

/* Deux adresses au pied de page : siège social et bureaux. */
.footer__col address + address {
  margin-top: 0.75rem;
}

.footer__col address b {
  font-weight: 650;
  color: var(--fg-on-dark);
}

/* Ouverture courte, pour une page qui n'a qu'un titre et une phrase. */
.page-hero--short {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   24. Aperçu des enseignes sur l'accueil
   Six logos en petit, et un lien vers la page qui les présente toutes.
   -------------------------------------------------------------------------- */

.minilogos {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.minilogos__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.minilogos__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.75rem;
  align-items: center;
}

.minilogos__list img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 2.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   25. La carte de presse
   Seule preuve tierce du site. Une carte large : le fac-similé à gauche, le
   propos et le PDF à droite. Bordure complète, jamais de filet sur une arête.
   -------------------------------------------------------------------------- */

.press2 {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.press2__scan {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: 17rem;
}

.press2__scan img,
.press2__scan picture {
  display: block;
  width: 100%;
  height: auto;
}

.press2__copy {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  align-content: center;
}

.press2__quote {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--fg);
  max-width: 46ch;
  text-wrap: pretty;
}

.press2__cite {
  display: grid;
  gap: 0.125rem;
  font-style: normal;
}

.press2__cite b {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg);
}

.press2__cite span {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.press2__meta {
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

@media (max-width: 780px) {
  .press2 {
    grid-template-columns: 1fr;
  }
  .press2__scan {
    max-width: 12rem;
  }
}

/* Piège à robots. Sorti du flux sans `display:none`, que certains automates
   savent détecter, et retiré du parcours au clavier. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   26. Page 404
   -------------------------------------------------------------------------- */

.erreur {
  padding-top: clamp(3rem, 7vw, 6rem);
  min-height: 60vh;
}

.erreur__lede {
  max-width: 46ch;
  margin-top: 0.75rem;
}

.erreur__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}

.erreur__contact {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  color: var(--fg-muted);
  max-width: 52ch;
}