/* Numéro 43 — Landing agents commerciaux (V4 · refonte présentation)
   Mobile-first : la page est d'abord lue sur téléphone (≈80 %), l'ordinateur
   reprend EXACTEMENT les mêmes blocs, dans le même ordre, simplement
   recomposés en largeur (deux colonnes, photo qui déborde, carte en
   surimpression). Aucun bloc n'existe sur un seul des deux formats.
   Noir sur blanc, Helvetica Neue système, filets 1px, pas d'arrondi, pas
   d'ombre. Le mouvement attire l'attention, il ne la réclame jamais. */

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --line-strong: #111;
  --tint: #f6f4f0;               /* zone « cas concret » */
  --maxw: 1280px;                /* conteneur ordinateur */
  --pad: clamp(22px, 5vw, 64px); /* marge latérale, téléphone → ordinateur */
  --measure: 60ch;               /* longueur de ligne du texte courant */
  --header-h: 64px;
  --font: "Helvetica Neue", Arial, "Helvetica", sans-serif;
  /* Didone du logotype, pour la question du hero. Les substituts système
     sont là pour la seconde où Playfair n'est pas encore arrivé. */
  --font-serif: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

/* ══ Squelette ══════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(44px, 7vw, 80px); scroll-margin-top: var(--header-h); }
/* Deux cibles du sommaire ne sont pas des <section> : la bande de Baptiste
   et le volet « Votre temps ». Sans cette marge, l'ancre les amenait sous
   l'en-tête fixe, qui masquait leur premier titre. */
.temoignage-band[id], .apporte-sub[id] { scroll-margin-top: var(--header-h); }
#app > section + section { border-top: 1px solid var(--line); }
#app > section.media-band, #app > section.media-band + section,
#app > section.s-mandats-suite { border-top: none; }

/* Le texte se limite en longueur de ligne, jamais centré, jamais justifié :
   même comportement sur téléphone et ordinateur. */
.editorial, .origines { max-width: var(--measure); }
.block-title { max-width: 22ch; }
.block-title--lead { max-width: 18ch; }
.block-title--xl { max-width: 16ch; }

/* Bloc titre / corps. Téléphone : succession verticale. Ordinateur : le titre
   tient la colonne de gauche, le corps la colonne de droite — la largeur de
   l'écran est occupée au lieu de laisser un trou à droite. */
.sec-grid { display: grid; gap: clamp(22px, 4vw, 32px); }
/* min-width:0 : un carrousel ou un tableau dans la colonne ne doit jamais
   élargir la colonne au-delà de l'écran (débordement à droite sur mobile). */
.sec-grid > * { min-width: 0; }
.sec-head > *:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .sec-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .sec-head .block-title { max-width: 14ch; }
  .sec-head .block-title--lead { max-width: 14ch; font-size: 40px; }
  /* 02 : titre long, texte court — le titre prend la colonne large. */
  .s-probleme .sec-grid { grid-template-columns: 7fr 5fr; }
  .s-probleme .sec-head .block-title--lead { max-width: 20ch; font-size: 46px; }
}

/* ══ Typographie ════════════════════════════════════════════════ */
.surtitre {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 clamp(16px, 3vw, 22px);
}
.surtitre--hero { color: rgba(255,255,255,0.8); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

.block-title {
  font-size: clamp(26px, 6vw, 34px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.16; margin: 0 0 clamp(20px, 4vw, 28px); text-wrap: balance;
}
.block-title--lead { font-size: clamp(29px, 6.8vw, 40px); line-height: 1.1; }
.block-title--xl { font-size: clamp(33px, 8vw, 48px); line-height: 1.06; }

.editorial p {
  font-size: clamp(18px, 4.4vw, 21px); line-height: 1.48; letter-spacing: -0.01em;
  margin: 0 0 0.65em; text-wrap: pretty;
}
.editorial p:last-child { margin-bottom: 0; }
.editorial.compact p { font-size: clamp(16.5px, 4vw, 18.5px); line-height: 1.55; margin-bottom: 0.55em; }

.statement {
  font-size: clamp(20px, 4.8vw, 26px); font-weight: 500; letter-spacing: -0.015em;
  line-height: 1.3; margin: clamp(30px, 5vw, 44px) 0 0; max-width: 30ch; text-wrap: balance;
}
.statement--sm { font-size: clamp(18px, 4vw, 21px); margin-top: clamp(22px, 4vw, 30px); }
.statement--lg { font-size: clamp(26px, 6.4vw, 38px); line-height: 1.15; margin: 0; max-width: 20ch; }

@media (min-width: 1024px) {
  body { font-size: 18px; }
  .block-title { font-size: 38px; }
  .block-title--lead { font-size: 46px; }
  .block-title--xl { font-size: 58px; }
  .editorial p { font-size: 22px; }
  .editorial.compact p { font-size: 19px; }
  .statement { font-size: 28px; }
  .statement--sm { font-size: 22px; }
  .statement--lg { font-size: 42px; }
}

/* Apparition successive des lignes courtes (déclenchée par .reveal.in). */
.editorial.stagger p { opacity: 0; transform: translateY(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.in .editorial.stagger p { opacity: 1; transform: none; }
.editorial.stagger p:nth-child(2) { transition-delay: 70ms; }
.editorial.stagger p:nth-child(3) { transition-delay: 140ms; }
.editorial.stagger p:nth-child(4) { transition-delay: 210ms; }
.editorial.stagger p:nth-child(5) { transition-delay: 280ms; }

/* ══ Header ═════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand img { height: 22px; width: auto; display: block; transition: filter 0.35s var(--ease); }
.header-link {
  font-size: 13px; letter-spacing: 0.04em; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.3s var(--ease), border-color 0.2s var(--ease);
}
.site-header:not(.solid) .brand img { filter: invert(1) brightness(2); }
.header-link-arrow { margin-left: 0.4em; vertical-align: -0.05em; transition: transform 0.25s var(--ease); }
.header-link:hover .header-link-arrow { transform: translate(1.5px, -1.5px); }

.site-header:not(.solid) .header-link { color: rgba(255,255,255,0.85); }
.site-header:not(.solid) .header-link:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.site-header.solid { background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(8px); border-bottom-color: var(--line); }
.site-header.solid .header-link { color: var(--muted); }
.site-header.solid .header-link:hover { color: var(--ink); border-color: var(--line-strong); }

.progress {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 29; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ══ 01 bis · Vos priorités ═════════════════════════════════════
   Sommaire visuel. Deux mises en forme pour une même matière : en liste
   sur téléphone, en cartes à partir de la tablette. C'est le même balisage
   dans les deux cas — les huit cartes en mini-grille sur un écran de
   390 px seraient illisibles. */
.s-priorites { background: var(--tint); border-top: 1px solid var(--line); }
.prio-head { display: grid; gap: clamp(14px, 3vw, 22px); }
.prio-titre { max-width: 24ch; margin-bottom: 0; }
.prio-intro { max-width: 46ch; }
.prio-intro p { color: var(--muted); }

.prio-grille { margin-top: clamp(26px, 5vw, 44px); display: grid; gap: 0; }

/* ── Téléphone : une ligne par sujet ─────────────────────────────
   Icône à gauche, texte au centre, chevron à droite. Les lignes sont
   séparées d'un filet plutôt que posées en cartes : huit cartes empilées
   feraient huit fois la hauteur pour la même information. */
.prio-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: clamp(14px, 3.4vw, 18px) 0;
  border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.prio-carte:last-child { border-bottom: 1px solid var(--line); }
.prio-icone { display: flex; color: var(--ink); }
.prio-icone svg { display: block; }
.prio-corps { display: block; min-width: 0; }
.prio-carte-titre { display: block; font-size: clamp(15.5px, 3.8vw, 17px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.prio-carte-texte { display: block; margin-top: 3px; color: var(--muted); font-size: clamp(13.5px, 3.3vw, 15px); line-height: 1.45; }
.prio-chevron { display: flex; color: var(--muted); transition: transform 0.25s var(--ease); }
.prio-carte:hover .prio-chevron { transform: translateX(3px); }
.prio-carte:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Tablette et ordinateur : la ligne de cartes ─────────────────
   Cartes blanches sur le fond teinté, un filet très clair, aucune ombre.
   L'air vient du rembourrage, pas d'un effet de relief. */
@media (min-width: 720px) {
  .prio-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
  .prio-carte {
    display: block; align-items: stretch;
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--paper); border: 1px solid var(--line); border-radius: 0;
  }
  .prio-carte:last-child { border-bottom: 1px solid var(--line); }
  .prio-carte:hover { border-color: var(--line-strong); }
  .prio-icone { margin-bottom: clamp(14px, 2vw, 22px); }
  .prio-carte-titre { font-size: clamp(15px, 1.15vw, 16.5px); }
  .prio-carte-texte { margin-top: 8px; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.5; }
  /* Le chevron appartient à la liste : en carte, la surface entière se
     lit déjà comme cliquable. */
  .prio-chevron { display: none; }
}

/* Quatre par ligne, sur deux rangées, plutôt que huit d'un seul tenant.
   Huit cartes lisibles réclament environ 1680 px ; la colonne du site
   plafonne à 1280. En huit, chaque carte tombait à 132 px — « Jusqu'à 70 »
   se coupait après « 70 », le pourcentage passait à la ligne suivante.
   À quatre, la carte fait 276 px et le texte respire. Passer à huit
   supposerait de sortir cette section de la colonne commune. */
@media (min-width: 1024px) {
  .prio-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .prio-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
  .prio-intro { justify-self: end; }
}

/* ══ 01 ter · Notre positionnement ══════════════════════════════
   Fond blanc, beaucoup d'air. Sur téléphone : le titre et son texte, puis
   les trois piliers empilés, séparés d'un filet — une grille de trois
   colonnes y serait illisible. */
.s-positionnement { background: var(--paper); }
.pos-grille { display: grid; gap: 0; }
.pos-titre { max-width: 22ch; }
.pos-tete .editorial { max-width: 52ch; margin-top: clamp(16px, 3vw, 22px); }

.pos-pilier { padding: clamp(22px, 4vw, 28px) 0; border-top: 1px solid var(--line); }
.pos-pilier:first-of-type { margin-top: clamp(28px, 5vw, 40px); }
.pos-pilier:last-child { border-bottom: 1px solid var(--line); }
.pos-icone { display: flex; color: var(--ink); margin-bottom: clamp(12px, 2.4vw, 16px); }
.pos-icone svg { display: block; }
.pos-pilier-titre { margin: 0 0 clamp(6px, 1.4vw, 10px); font-size: clamp(16.5px, 3.8vw, 18px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.pos-pilier-texte { margin: 0; color: var(--muted); font-size: clamp(15px, 3.4vw, 16.5px); line-height: 1.55; }

/* ── Ordinateur : quatre colonnes, la première plus large ────────
   Les filets deviennent verticaux et passent en bordure gauche, à partir
   du premier pilier : la tête n'en porte pas, et aucun trait ne pend au
   bout de la rangée. */
@media (min-width: 900px) {
  .pos-grille {
    grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2.8fr));
    gap: clamp(28px, 3.4vw, 48px); align-items: start;
  }
  /* Les deux phrases du titre tiennent chacune sa ligne — c'est le rythme
     en deux temps de la page. À 40 px elles se brisaient en cinq lignes
     dans cette colonne ; à 36 px elles en font deux chacune. */
  .pos-titre { font-size: 36px; max-width: none; }
  .pos-pilier {
    padding: 0 0 0 clamp(28px, 3.4vw, 48px);
    border-top: 0; border-bottom: 0; border-left: 1px solid var(--line);
  }
  .pos-pilier:first-of-type { margin-top: 0; }
  .pos-pilier:last-child { border-bottom: 0; }
  .pos-icone { margin-bottom: clamp(18px, 2.4vw, 26px); }
  .pos-pilier-titre { font-size: clamp(16px, 1.3vw, 18px); }
  .pos-pilier-texte { font-size: clamp(14.5px, 1.1vw, 16px); }
}

/* ══ 01 · Hero ══════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 0; margin: 0; overflow: hidden; background: #0c0c0c; border: none !important;
}
.hero .hero-media, .hero .hero-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; aspect-ratio: auto; }
.hero .hero-ph { align-items: flex-start; }
.hero .hero-ph .ph-inner { margin-top: calc(var(--header-h) + 40px); }
.hero-triptych {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5px; background: rgba(255,255,255,0.16);
}
.hero-triptych .panel { position: relative; overflow: hidden; background: #0c0c0c; }
.hero-triptych .panel > video, .hero-triptych .panel > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-triptych .panel > .media-ph { position: absolute; inset: 0; align-items: flex-start; }
.hero-triptych .panel > .media-ph .ph-inner { margin-top: calc(var(--header-h) + 32px); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Deux couches. Une base plate, identique sur les trois panneaux : sans
     elle, un rush clair et un rush sombre ne se valaient pas et l'œil
     partait sur le plus lumineux. Puis un dégradé vertical qui charge le
     bas, où vit le texte. */
  background:
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 34%, rgba(0,0,0,0.12) 66%, rgba(0,0,0,0.22) 100%),
    rgba(0,0,0,0.3);
}
/* Renfort derrière la colonne de texte, en bas à gauche. */
.hero-scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 22% 92%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 62%); }
.hero .wrap { position: relative; z-index: 2; color: #fff; padding-top: calc(var(--header-h) + 24px); padding-bottom: clamp(60px, 12vh, 110px); }
.hero h1 {
  max-width: 20ch; font-size: clamp(33px, 8.6vw, 54px); line-height: 1.07; font-weight: 500;
  letter-spacing: -0.022em; margin: 0 0 22px; text-wrap: balance; color: #fff;
  text-shadow: 0 1px 28px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.4);
}
.hero .hero-text { margin-bottom: clamp(18px, 3vw, 24px); max-width: 44ch; }

/* Les trois preuves, séparées de points médians. Elles s'empilent en
   colonne sur téléphone : sur une seule ligne elles passeraient à trois
   lignes hachées, points compris. */
.hero-preuves {
  margin: 0 0 clamp(24px, 4vw, 32px); padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  color: rgba(255,255,255,0.92); font-size: clamp(14px, 3.5vw, 16px); line-height: 1.45;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.hero-preuves li { position: relative; padding-left: 16px; }
.hero-preuves li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.65); }
@media (min-width: 720px) {
  .hero-preuves { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  .hero-preuves li { padding-left: 0; }
  .hero-preuves li::before { display: none; }
  .hero-preuves li:not(:last-child)::after { content: "·"; margin-left: 22px; color: rgba(255,255,255,0.45); }
}

/* Deux actions : le bouton descend dans la page, le lien mène au
   formulaire. Le second reste en retrait — il s'adresse à qui est déjà
   décidé, pas à qui vient d'arriver. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 26px); }
.hero-lien {
  color: rgba(255,255,255,0.88); font-size: clamp(14.5px, 3.6vw, 16px);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,0.4);
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.hero-lien:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.9); }
.hero .hero-text p {
  font-size: clamp(16.5px, 4vw, 19px); line-height: 1.5; color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 18px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}
@media (min-width: 1024px) { .hero h1 { font-size: 62px; } .hero .hero-text p { font-size: 20px; } }
@keyframes heroReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero .surtitre--hero, .hero .hero-text, .hero .hero-preuves, .hero .hero-actions { opacity: 0; animation: heroReveal 0.7s var(--ease) both; }
.hero .surtitre--hero { animation-delay: 0.1s; }
.hero .hero-text { animation-delay: 0.62s; }
.hero .hero-preuves { animation-delay: 0.78s; }
.hero .hero-actions { animation-delay: 0.94s; }
.hero h1 .line { display: inline-block; opacity: 0; animation: heroReveal 0.7s var(--ease) both; animation-delay: calc(0.28s + var(--i) * 0.18s); }
/* L'affirmation reste en sans, la question bascule dans le didone du
   logotype : c'est le caractère qui marque le retournement. Un poil plus
   grande, l'italique ayant une hauteur d'œil plus basse à taille égale. */
.hero h1 .line--question {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) { .hero .surtitre--hero, .hero .hero-text, .hero .hero-preuves, .hero .hero-actions, .hero h1 .line { animation: none; opacity: 1; } }
/* Deux commandes cerclées sur le fond : la suite au centre, l'arrêt du
   mouvement à droite. Même gabarit, même trait, pour qu'elles se lisent
   comme une paire. */
.scroll-cue, .hero-motion {
  position: absolute; bottom: clamp(18px, 3vh, 30px); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45); background: rgba(0,0,0,0.18);
  color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.scroll-cue:hover, .hero-motion:hover { background: rgba(0,0,0,0.36); border-color: rgba(255,255,255,0.8); }
.scroll-cue:focus-visible, .hero-motion:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scroll-cue { left: 50%; transform: translateX(-50%); }
.scroll-cue:hover { transform: translateX(-50%) translateY(2px); }
.scroll-cue svg { animation: cue 2.4s var(--ease) infinite; }
.hero-motion { right: clamp(18px, 4vw, 40px); }
@keyframes cue { 0%, 62%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* ══ Médias : placeholder → vraie image ═════════════════════════ */
.media-ph {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #2a2a2a 0%, #171717 55%, #0e0e0e 100%);
}
.media-ph::before { content: ""; position: absolute; inset: 0; opacity: 0.06; z-index: 0; background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 7px); }
/* Teinte unique : il n'y a plus de déclinaison par secteur. */
.media-ph { background: radial-gradient(120% 120% at 30% 20%, #3a2f26 0%, #1c1512 55%, #0e0b09 100%); }
.media-ph.live::after { content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(38% 38% at 50% 50%, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%); animation: drift 15s ease-in-out infinite alternate; }
.media-ph.live::after { background: radial-gradient(38% 38% at 50% 50%, rgba(214,170,120,0.2), rgba(214,170,120,0) 70%); }
@keyframes drift { 0% { transform: translate(-16%,-12%) scale(1); } 50% { transform: translate(6%,8%) scale(1.06); } 100% { transform: translate(16%,12%) scale(1); } }
.media-ph .ph-inner { position: relative; z-index: 1; text-align: center; padding: 20px; max-width: 86%; }
.media-ph .ph-icon { color: rgba(255,255,255,0.55); margin: 0 auto 12px; }
.media-ph .ph-icon svg { width: 24px; height: 24px; }
.media-ph .ph-label { color: rgba(255,255,255,0.7); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; }
.media-ph .ph-tag { display: inline-block; margin-bottom: 10px; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 3px 9px; }
.media-ph .crop { position: absolute; width: 14px; height: 14px; z-index: 1; border-color: rgba(255,255,255,0.35); }
.media-ph .crop.tl { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.media-ph .crop.tr { top: 12px; right: 12px; border-top: 1px solid; border-right: 1px solid; }
.media-ph .crop.bl { bottom: 12px; left: 12px; border-bottom: 1px solid; border-left: 1px solid; }
.media-ph .crop.br { bottom: 12px; right: 12px; border-bottom: 1px solid; border-right: 1px solid; }

/* La photo recouvre le placeholder dès qu'elle est peinte. z-index au-dessus
   du halo (0) et du libellé (1) : le cadre sombre ne réapparaît jamais
   derrière une image chargée. */
.media-ph > .media-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.media-ph.media-ok > .media-img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .media-ph > .media-img { transition: none; } }

/* Placeholders dans de petites cases : pas de pastille, libellé réduit. */
.media-grid .ph-tag, .strip .ph-tag { display: none; }
.media-grid .ph-label, .strip .ph-label { font-size: 9px; letter-spacing: 0.12em; }
.media-grid .ph-icon { margin-bottom: 8px; }

/* Cadres : toutes les photos partagent le même filet. */
.frame, .inline-media, .mg-item, .ps-item, .reel, .overlap-photo, .strip-main { border: 1px solid var(--line); overflow: hidden; }
.frame > *, .inline-media > *, .mg-item > *, .ps-item > *, .overlap-photo > *, .strip-main > * { width: 100%; display: block; }

/* Photo au fil du texte : dans la colonne du corps, jamais plus large. */
.inline-media { margin: clamp(26px, 5vw, 40px) 0 0; }

/* Bande de respiration : la largeur du contenu, plafonnée en hauteur. */
.media-band .frame { width: 100%; }
@media (min-width: 1024px) { .media-band img, .media-band .media-ph { max-height: 64vh; object-fit: cover; } }

/* Série de vignettes : 3 toujours sur une ligne (jamais 2 + 1 orpheline). */
.media-grid { display: grid; gap: clamp(8px, 1.6vw, 16px); margin: clamp(26px, 5vw, 40px) 0 0; grid-template-columns: repeat(2, 1fr); }
.media-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mg-item { margin: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in .mg-item { opacity: 1; transform: none; }
.mg-item:nth-child(2) { transition-delay: 110ms; }
.mg-item:nth-child(3) { transition-delay: 220ms; }

/* Grille asymétrique (1 grande + 2 petites) : hauteurs fixées par la grille,
   les photos se recadrent — pas par les proportions de chaque fichier. */
.media-grid.asym { grid-template-columns: 1.35fr 1fr; grid-auto-rows: clamp(120px, 34vw, 190px); }
.media-grid.asym .mg-item:first-child { grid-row: 1 / 3; }
.media-grid.asym .mg-item > * { height: 100%; aspect-ratio: auto !important; object-fit: cover; }

/* Carrousel photo — le reportage refait à neuf, en 3:2 paysage.
   Sur téléphone il déborde jusqu'aux bords de l'écran (la première photo
   reste alignée sur le texte grâce au padding), avec un aperçu de la
   suivante pour montrer qu'on peut faire défiler. */
.photo-scroll {
  display: flex; gap: 8px; margin: clamp(26px, 5vw, 40px) 0 0;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  scroll-padding-left: var(--pad);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.photo-scroll::-webkit-scrollbar { display: none; }
.ps-item { flex: 0 0 86%; scroll-snap-align: start; margin: 0; }
@media (min-width: 720px) { .ps-item { flex-basis: 58%; } }
@media (min-width: 1024px) {
  /* Dans la colonne de contenu : une photo bien lisible + l'aperçu suivant. */
  .photo-scroll { margin-inline: 0; padding-inline: 0; scroll-padding-left: 0; }
  .ps-item { flex-basis: 62%; }
}

/* Réels : grands sur téléphone (l'un sous l'autre), côte à côte sur ordinateur. */
/* Deux réels côte à côte dès le téléphone. Empilés, ils faisaient 1220 px
   à eux seuls — un écran et demi de défilement pour deux teasers de dix
   secondes. Côte à côte, ils en font 300 et se lisent comme la paire
   qu'ils sont. */
.reels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 22px); margin: clamp(26px, 5vw, 40px) 0 0; }
@media (min-width: 720px) { .reels { gap: clamp(14px, 3vw, 22px); max-width: 560px; } }
.reel { position: relative; aspect-ratio: 9/16; background: #0c0c0c; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in .reel { opacity: 1; transform: none; }
.reel:nth-child(2) { transition-delay: 110ms; }
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.22); border: 0; padding: 0; cursor: pointer; transition: background 0.25s var(--ease), opacity 0.25s var(--ease); }
.reel-play-icon { display: flex; width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.75); color: #fff; background: rgba(0,0,0,0.15); backdrop-filter: blur(2px); }
.reel-play-icon svg { width: 22px; height: 22px; }
.reel-play:hover { background: rgba(0,0,0,0.34); }
.reel-label { position: absolute; left: 14px; bottom: 14px; z-index: 1; color: #fff; font-size: 12.5px; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.6); pointer-events: none; }
.reel.playing .reel-play, .reel.playing .reel-label { opacity: 0; pointer-events: none; }

/* Fondu des médias à l'apparition. */
.inline-media, .media-band .frame, .overlap-photo, .strip-main { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in .inline-media, .media-band.in .frame, .reveal.in .overlap-photo, .reveal.in .strip-main { opacity: 1; transform: none; }

/* ══ Carte en surimpression (03) ════════════════════════════════
   Téléphone : la photo occupe toute la largeur, la carte de texte vient
   chevaucher son bord bas. Ordinateur : la photo déborde à droite, la carte
   se pose sur son angle bas-gauche. Même principe, même ordre de lecture. */
.overlap { position: relative; }
.overlap-photo { margin: 0 calc(-1 * var(--pad)); }
.overlap-photo > * { aspect-ratio: 5/4 !important; object-fit: cover; }
.overlap-card {
  position: relative; z-index: 2; margin: -44px 0 0;
  background: var(--paper); border: 1px solid var(--line-strong);
  padding: clamp(24px, 5vw, 32px) clamp(20px, 4.5vw, 28px);
}
.overlap-card .block-title { margin-bottom: 16px; }
.overlap-card .surtitre { margin-bottom: 14px; }
.overlap-after { display: grid; gap: clamp(26px, 5vw, 40px); margin-top: clamp(26px, 5vw, 40px); }
@media (min-width: 1024px) {
  .overlap { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; margin-bottom: 128px; }
  .overlap-photo { grid-column: 5 / -1; grid-row: 1; margin: 0 calc(-1 * var(--pad)) 0 0; }
  .overlap-photo > * { aspect-ratio: 16/10 !important; }
  .overlap-card { grid-column: 1 / 8; grid-row: 1; margin: 0 0 -72px; padding: 44px 48px; }
  .overlap-card .block-title { max-width: 18ch; }
  .overlap-after { grid-template-columns: 6fr 6fr; column-gap: clamp(48px, 6vw, 96px); align-items: start; margin-top: 0; }
  .overlap-after > .media-grid { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .overlap-after > .statement { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.strip-head .editorial { max-width: var(--measure); }

/* ══ Bandeau + frise (04) ═══════════════════════════════════════
   Texte en tête, puis toutes les photos de la section sur une seule frise :
   une grande, trois portraits. Bas alignés, hauteurs inégales. */
.strip { display: grid; gap: 10px; margin-top: clamp(26px, 5vw, 40px); }
.strip-main > * { aspect-ratio: 4/3 !important; object-fit: cover; }
.strip .media-grid { margin: 0; }
@media (min-width: 1024px) {
  .strip { grid-template-columns: 5fr 7fr; gap: 16px; align-items: end; }
  .strip .media-grid { gap: 16px; }
}

/* grille de mots-clés : 2 colonnes dès le téléphone, 4 sur ordinateur */

/* en ligne : les phrases se suivent, sous leur libellé */

/* pastilles */

/* ══ 05 · Tableau comparatif ════════════════════════════════════ */
.compare { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.compare > * { padding: clamp(11px, 2.2vw, 15px) 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in .compare > * { opacity: 1; transform: none; }
.compare > *:nth-child(n+3):nth-child(-n+4) { transition-delay: 60ms; }
.compare > *:nth-child(n+5):nth-child(-n+6) { transition-delay: 120ms; }
.compare > *:nth-child(n+7):nth-child(-n+8) { transition-delay: 180ms; }
.compare > *:nth-child(n+9):nth-child(-n+10) { transition-delay: 240ms; }
.compare > *:nth-child(n+11):nth-child(-n+12) { transition-delay: 300ms; }
.compare > *:nth-child(odd) { border-right: 1px solid var(--line); padding-right: clamp(12px, 3vw, 28px); }
.compare > *:nth-child(even) { padding-left: clamp(12px, 3vw, 28px); }
.cmp-h { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.cmp-c { font-size: clamp(14.5px, 3.5vw, 17px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; text-wrap: pretty; }
@media (min-width: 1024px) { .cmp-c { font-size: 18px; } }

/* ══ 07 · Cas concret (zone teintée) ════════════════════════════ */
.case-wrap { background: var(--tint); border-block: 1px solid var(--line); }
.case-wrap > section + section { border-top: 1px solid rgba(17,17,17,0.08); }
.case-lieu { margin: 0 0 clamp(14px, 3vw, 22px); font-size: clamp(44px, 11vw, 80px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
.case-lieu-sub { display: block; margin-top: 10px; font-size: 0.28em; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.s-case { padding-block: clamp(44px, 7vw, 80px); }
.case-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: clamp(12px, 2.5vw, 18px); }
.case-num { font-size: clamp(28px, 7vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--muted); }
.case-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.case-title { font-size: clamp(21px, 4.8vw, 26px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.22; margin: 0; text-wrap: balance; max-width: 22ch; }
.case-details { margin: clamp(22px, 4vw, 32px) 0 0; }
.case-details dt { font-size: clamp(15.5px, 3.4vw, 17px); font-weight: 500; letter-spacing: -0.008em; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-details dt:first-child { margin-top: 0; }
.case-details dd { margin: 5px 0 0; color: var(--muted); font-size: clamp(15px, 3.3vw, 16.5px); line-height: 1.55; max-width: 60ch; }
@media (min-width: 720px) {
  .case-details dt { float: left; width: 34%; padding-right: 24px; }
  .case-details dd { margin-left: 34%; padding-top: 14px; border-top: 1px solid var(--line); }
  .case-details dt:first-child + dd { border-top: 1px solid var(--line); }
  .case-details::after { content: ""; display: table; clear: both; }
}
@media (min-width: 1024px) {
  .case-details dd { font-size: 17px; }
  .case-title { font-size: 25px; }
  /* Colonne de titre plus étroite, le corps (démarche, médias) prend le reste. */
  .s-case .sec-grid { grid-template-columns: 4fr 8fr; }
  .s-case .sec-head { position: sticky; top: calc(var(--header-h) + 32px); }
  .case-head { flex-wrap: wrap; }
}

/* ══ 08 · Quatre blocs ══════════════════════════════════════════ */
.quad { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.quad-item { background: var(--paper); padding: clamp(26px, 5vw, 36px) 0; opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in .quad-item { opacity: 1; transform: none; }
.quad-item:nth-child(2) { transition-delay: 90ms; }
.quad-item:nth-child(3) { transition-delay: 180ms; }
.quad-item:nth-child(4) { transition-delay: 270ms; }
.quad-num { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.quad-label { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.quad-title { margin: 0 0 10px; font-size: clamp(19px, 4.2vw, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.quad-text { color: var(--muted); font-size: clamp(15.5px, 3.4vw, 17px); line-height: 1.6; }
@media (min-width: 720px) {
  .quad { grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
  .quad-item { padding: clamp(30px, 4vw, 44px) clamp(24px, 3.5vw, 40px); }
}
@media (min-width: 1024px) { .quad-text { font-size: 17.5px; } }

/* ══ 11 · Sélection ═════════════════════════════════════════════ */
.opps { margin: clamp(26px, 5vw, 40px) 0 0; }
.opp { padding: clamp(18px, 3.5vw, 26px) 0; border-top: 1px solid var(--line); }
.opp:last-child { border-bottom: 1px solid var(--line); }
.opp-oui, .opp-non { opacity: 0; transform: translateY(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.in .opp-oui, .reveal.in .opp-non { opacity: 1; transform: none; }
.opp-non { transition-delay: 160ms; margin-top: 6px; color: var(--muted); font-size: clamp(16px, 3.6vw, 18px); line-height: 1.45; }
.opp-oui { font-size: clamp(20px, 4.6vw, 24px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; }
@media (min-width: 1024px) { .sec-body .opps { margin-top: 0; } }

/* ══ 12 · Pour qui ══════════════════════════════════════════════ */
.origines { margin: clamp(22px, 4.5vw, 32px) 0 0; }
.origines li { padding: 9px 0 9px 22px; position: relative; font-size: clamp(16.5px, 3.7vw, 18.5px); line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in .origines li { opacity: 1; transform: none; }
.origines li:nth-child(2) { transition-delay: 70ms; }
.origines li:nth-child(3) { transition-delay: 140ms; }
.origines li:nth-child(4) { transition-delay: 210ms; }
.origines li:nth-child(5) { transition-delay: 280ms; }
.origines li::before { content: ""; position: absolute; left: 0; top: 0.92em; width: 11px; height: 1px; background: var(--ink); }

/* ══ 13 · Rémunération ══════════════════════════════════════════ */
.big-figure { margin: 0 0 clamp(8px, 2vw, 14px); font-size: clamp(76px, 22vw, 140px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; }
.postes { margin: clamp(22px, 4.5vw, 32px) 0 0; }
.postes li { display: inline; font-size: clamp(17px, 3.8vw, 19px); font-weight: 500; letter-spacing: -0.012em; }
.postes li::after { content: " "; }

/* ══ 15 · Bordeaux ══════════════════════════════════════════════ */
.cta-row { margin-top: clamp(28px, 5vw, 40px); }

/* ══ 16 · FAQ ═══════════════════════════════════════════════════ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: inherit; text-align: left; cursor: pointer; background: none; border: 0; border-radius: 0; padding: clamp(18px, 3.6vw, 26px) 0; color: var(--ink); transition: color 0.2s var(--ease); }
.faq-q-txt { font-size: clamp(17px, 3.9vw, 20px); font-weight: 500; letter-spacing: -0.013em; line-height: 1.3; }
.faq-q:hover { color: var(--muted); }
.faq-sign { position: relative; flex: 0 0 auto; width: 13px; height: 13px; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.faq-sign::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: rotate(0deg); opacity: 0; }
.faq-panel { padding: 0 0 clamp(20px, 4vw, 30px); }
.faq-panel p { margin: 0 0 0.6em; color: var(--muted); font-size: clamp(16px, 3.5vw, 17.5px); line-height: 1.6; }
.faq-panel p:last-child { margin-bottom: 0; }
.faq-panel[hidden] { display: none; }
@media (min-width: 1024px) { .faq-panel p { font-size: 18px; } }

/* ══ Boutons ════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 16px; font-weight: 500;
  padding: 15px 28px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.hero .btn { background: #fff; color: #000; border-color: #fff; }
.hero .btn:hover { opacity: 1; background: rgba(255,255,255,0.9); }

.float-cta {
  position: fixed; right: 18px; bottom: 18px; z-index: 24; padding: 13px 22px; font-size: 14.5px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(10px) scale(0.97); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.float-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
.float-cta.visible:hover { transform: translateY(-2px); opacity: 0.92; }
@media (max-width: 480px) { .float-cta { right: 14px; left: 14px; bottom: 14px; justify-content: center; padding: 14px 18px; font-size: 14px; } }

/* ══ Page légale ════════════════════════════════════════════════
   Page de texte suivi : une seule colonne à la largeur de lecture, des
   titres qui hiérarchisent sans crier. Elle réutilise la feuille du site
   pour rester de la même famille, sans JavaScript. */
.page-legal { padding-top: var(--header-h); }
.legal-page { padding-block: clamp(36px, 6vw, 72px); }
.legal-page .block-title { max-width: 26ch; margin-bottom: clamp(28px, 5vw, 44px); }
.legal-page .editorial { max-width: var(--measure); }
.legal-titre {
  margin: clamp(38px, 6vw, 60px) 0 clamp(14px, 2.5vw, 20px);
  padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line);
  font-size: clamp(20px, 4.4vw, 26px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.2;
}
.legal-sous-titre {
  margin: clamp(26px, 4vw, 34px) 0 clamp(8px, 1.5vw, 12px);
  font-size: clamp(16px, 3.4vw, 18px); font-weight: 500; letter-spacing: -0.01em;
}
.legal-liste { margin: 0 0 0.65em; padding-left: 20px; max-width: var(--measure); }
.legal-liste li { margin-bottom: 0.4em; font-size: clamp(16.5px, 4vw, 18.5px); line-height: 1.55; }
.legal-page a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--muted); }
.legal-maj { margin: clamp(40px, 6vw, 64px) 0 0; padding-top: clamp(18px, 3vw, 24px); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
/* Les placeholders sautent aux yeux tant qu'ils ne sont pas remplacés. */
.legal-page .editorial p, .legal-liste li { overflow-wrap: break-word; }
@media (min-width: 1024px) { .legal-liste li { font-size: 19px; } }

/* ══ 17 · Formulaire ════════════════════════════════════════════ */
.form-title { margin: 0; font-size: clamp(22px, 5vw, 28px); font-weight: 500; letter-spacing: -0.018em; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(20px, 4vw, 28px); }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; letter-spacing: 0.02em; color: var(--muted); }
.field input, .field textarea, .field select { font: inherit; font-size: 16px; color: var(--ink); padding: 13px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); width: 100%; transition: border-color 0.2s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--line-strong); }
/* Chevron dessiné en CSS plutôt que celui du système, qui change d'allure
   d'un navigateur à l'autre. 16px sur le champ : en dessous, iOS zoome à la
   sélection et décale la page. */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select:invalid { color: var(--muted); }
/* Le champ doit laisser voir ce qu'on y écrit : inviter mille caractères
   dans quatre lignes visibles inviterait surtout à s'arrêter à quatre. */
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.counter { align-self: flex-end; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Pot de miel : sorti de l'écran plutôt que masqué en display:none, que
   certains robots reconnaissent comme un piège. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { margin-top: 24px; }
.form-actions .btn { width: 100%; justify-content: center; }
.form-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.form-status { margin-top: 18px; font-size: 15px; text-align: center; min-height: 1.2em; }
.form-status.err { color: #b00020; }
.form-done { margin-top: clamp(24px, 4vw, 32px); padding-top: clamp(24px, 4vw, 32px); border-top: 1px solid var(--ink); }
.form-done-title { margin: 0 0 12px; font-size: clamp(24px, 5.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .field label { font-size: 14px; } .form-note { font-size: 15px; } }

/* Le titre du formulaire tient en deux phrases, une par ligne : les deux
   temps se perdent si l'une des deux se casse. La plus longue demande
   520 px à 37 px de corps — d'où la colonne à parts égales plutôt que 5/7,
   et ce corps un cran sous les 40 px des autres têtes de section. */
@media (min-width: 1024px) {
  .form-section .sec-grid { grid-template-columns: 6fr 6fr; }
  .form-section .sec-head .block-title--lead { max-width: none; font-size: clamp(31px, 2.6vw, 37px); }
}

/* ══ Footer ═════════════════════════════════════════════════════ */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 48px; text-align: center; }
.site-footer .brand img { height: 20px; filter: invert(1); margin-inline: auto; opacity: 0.9; }
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; letter-spacing: 0.03em; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.site-footer a:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.site-footer .legal { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 24px; }

/* ══ Reveal ═════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ══ Structure en sept mouvements — compléments ═══════════════════ */

/* ── 03 · Ce que Numéro 43 apporte ─────────────────────────────── */

/* Volet « Votre image » : sous la carte en surimpression, les mots-clés à
   gauche et la preuve Baptiste à droite (comme le faisait déjà .media-grid
   dans .overlap-after — on étend juste la règle à .temoignage). */
.overlap-after > .temoignage { margin-top: 0; }
@media (min-width: 1024px) {
  .overlap-after > .temoignage { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}

/* Preuve Baptiste : une petite photo, une citation. Le filet du haut la
   détache visiblement des mots-clés qui précèdent. */
.temoignage {
  display: flex; gap: 18px; align-items: flex-start;
  padding-top: clamp(22px, 4vw, 32px); border-top: 1px solid var(--line);
}
.temoignage-photo { flex: 0 0 92px; aspect-ratio: 4/5; border: 1px solid var(--line); overflow: hidden; }
.temoignage-photo > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.temoignage .editorial { flex: 1; min-width: 0; }
@media (min-width: 1024px) { .temoignage-photo { flex-basis: 120px; } }

/* ── 04 · Grayan ────────────────────────────────────────────────── */

/* Le chiffre du résultat tient le rôle du titre de section. Sur téléphone
   il doit tenir en deux lignes, pas quatre. */
/* Le résultat s'affiche dans la tête de section (titre + faits saillants) :
   il n'a plus besoin de son propre plafond de largeur, un seul bloc reste. */

/* Les pièces produites se suivent dans la même colonne : intervalle constant. */
.s-case .reels + .photo-scroll,
.s-case .photo-scroll + .statement { margin-top: clamp(26px, 5vw, 40px); }
@media (min-width: 1024px) {
  .s-case .reels { max-width: none; }
}

/* ── Titres longs : la colonne de titre doit pouvoir les accueillir sans
   les couper en six lignes, et le corps ne doit pas se retrouver seul à
   droite d'une colonne de titre trop étroite. ─────────────────────── */
@media (min-width: 1024px) {
  .s-apporte .sec-head .block-title { max-width: 18ch; }
  /* Nommer les deux secteurs allonge le titre d'un tiers. Plutôt que de le
     laisser filer sur trois lignes face aux repères, on le compose un cran
     plus bas : il tient en deux lignes, comme sur la maquette, et reste
     au-dessus des titres de section courants. */
  .s-bordeaux .block-title--xl { max-width: 26ch; font-size: 48px; }
}

/* ── 02 · Conviction — texte et photo, deux colonnes ──────────────── */
/* Composition dédiée : contrairement au schéma titre-tête / corps des
   autres sections, le titre reste avec son texte dans la même colonne.
   .wrap garde sa largeur et son centrage standard (identiques à toutes
   les autres sections) — le bord gauche du texte reste donc aligné sur
   celui du reste de la page. */
/* ── 02 · Notre conviction ─────────────────────────────────────────
   Sur téléphone, l'ordre naturel : titre, texte, chute, puis la photo en
   pleine largeur. Sur ordinateur, la photo quitte le flux et devient le
   fond de la section. */
.s-conviction { position: relative; overflow: hidden; }
.s-conviction .wrap { position: relative; z-index: 1; }
.conviction-titre { max-width: none; }
.conviction-fond { margin-top: clamp(28px, 5vw, 40px); }
.conviction-fond img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid var(--line); }

.conviction-cols { margin-top: clamp(24px, 4vw, 34px); display: grid; gap: clamp(16px, 3vw, 24px); }
.conviction-cols .editorial { max-width: none; }

/* Le filet court ouvre la chute : il la détache du corps sans ajouter de
   séparateur pleine largeur. */
.conviction-chute {
  position: relative; margin-top: clamp(32px, 5vw, 48px);
  padding-top: clamp(22px, 3.5vw, 32px);
}
.conviction-chute::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: clamp(72px, 9vw, 110px); height: 1px; background: var(--line-strong);
}

@media (min-width: 900px) {
  .conviction-titre { max-width: 28ch; }
  .conviction-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); }
}

/* Le fond débordant ne s'active qu'à partir de 1150 px. En dessous, le
   texte occupe une part trop large de l'écran : la photo lui passait
   dessous au lieu de rester en marge. Elle reste alors dans le flux,
   sous le texte, comme sur téléphone. */
@media (min-width: 1150px) {
  /* Le texte s'arrête avant même que la photo commence : ramenée dans la
     marge commune, elle n'a plus le bord de l'écran pour s'éloigner. */
  .conviction-cols, .conviction-chute { max-width: 66%; }

  /* La photo déborde jusqu'au bord droit et s'efface vers la gauche : une
     atmosphère derrière le texte, pas une image à regarder. Le dégradé ne
     la rend franche qu'après la fin du texte — la lisibilité ne dépend
     donc pas de ce que montre la photo. */
  /* La photo s'arrête à la marge commune au lieu de filer jusqu'au bord de
     l'écran. Plutôt qu'un calcul à base de 100vw — faux de la largeur de
     l'ascenseur — ce conteneur reprend la géométrie exacte d'un .wrap
     (même max-width, même centrage, même padding) : son bord droit tombe
     donc au pixel sur celui du texte. */
  .conviction-fond {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
    display: flex; justify-content: flex-end;
    z-index: 0; pointer-events: none; opacity: 0.6;
    -webkit-mask-image: linear-gradient(to right, transparent 62%, #000 88%);
    mask-image: linear-gradient(to right, transparent 62%, #000 88%);
  }
  /* Le cadrage vise la partie claire de la pièce (fenêtres, plante) plutôt
     que la table et le parquet : c'est ce qui garde le fond lumineux, et
     donc le texte lisible par-dessus. */
  .conviction-fond img { width: 32%; height: 100%; aspect-ratio: auto; border: 0; object-position: 24% 50%; }
}

/* ── 03 · Développement + temps, un même bloc ─────────────────────── */
.apporte-sub {
  margin-top: clamp(32px, 6vw, 48px); padding-top: clamp(32px, 6vw, 48px);
  border-top: 1px solid var(--line);
}

/* ── 05 · Rémunération — bloc compact, une seule colonne. « Jusqu'à » et
   le chiffre forment un seul ensemble visuel. Même principe qu'en 02 :
   plafonner le contenu, jamais recentrer .wrap indépendamment. */
/* Le chiffre et sa condition dans une carte teintée d'un côté, ce que
   financent les honoraires de l'autre. « Jusqu'à » reste solidaire du
   chiffre, juste au-dessus — jamais séparé de lui. */
.remuneration-layout { display: grid; gap: clamp(26px, 4vw, 40px); }
@media (min-width: 900px) {
  .remuneration-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}
.remuneration-card { background: var(--tint); padding: clamp(26px, 4vw, 44px) clamp(22px, 3.5vw, 40px); }
.remuneration-figure { display: block; }
.remuneration-prefix { display: block; font-size: clamp(19px, 4vw, 24px); letter-spacing: -0.01em; color: var(--muted); }
.remuneration-card .big-figure { display: block; margin: 0; font-size: clamp(62px, 15vw, 104px); }
.remuneration-suffix { margin: 6px 0 clamp(22px, 4vw, 30px); font-size: clamp(16px, 3.6vw, 19px); color: var(--muted); }
.remuneration-paliers {
  margin-top: clamp(20px, 3.5vw, 28px); padding-top: clamp(18px, 3vw, 24px);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: clamp(15px, 3.2vw, 16.5px); line-height: 1.5;
}
.remuneration-moyens .volets { margin-top: clamp(24px, 4vw, 34px); }

/* La chute ferme la section sur toute la largeur, séparée d'un filet. */
.s-remuneration .statement--wide {
  max-width: none; margin-top: clamp(30px, 5vw, 44px);
  padding-top: clamp(26px, 4vw, 36px); border-top: 1px solid var(--line);
}

/* Cas concret : les supports (brochure, plaquette, reportage) restent
   disponibles mais n'occupent plus l'écran par défaut — un clic suffit. */
.case-supports { margin-top: clamp(26px, 5vw, 40px); padding-top: clamp(20px, 4vw, 28px); border-top: 1px solid var(--line); }
.case-supports summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.008em; color: var(--ink);
}
.case-supports summary::-webkit-details-marker { display: none; }
.case-supports-sign { position: relative; flex: 0 0 auto; width: 13px; height: 13px; }
.case-supports-sign::before, .case-supports-sign::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1px;
  background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.case-supports-sign::after { transform: rotate(90deg); }
.case-supports[open] .case-supports-sign::after { transform: rotate(0deg); opacity: 0; }
.case-supports .media-grid { margin-top: clamp(20px, 4vw, 28px); }

/* ══ Vos mandats — vidéo verticale + démarche en trois étapes ═════ */

/* Surtitre prolongé d'un filet : marque l'ouverture du bloc sans ajouter
   un titre de plus. */
.surtitre--rule { display: flex; align-items: center; gap: 20px; }
.surtitre--rule .rule { flex: 1; height: 1px; background: var(--line); }

.mandats-layout { display: grid; gap: clamp(28px, 5vw, 44px); }
@media (min-width: 900px) {
  .mandats-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}

/* La vidéo garde son cadrage 9:16 d'origine, sans recadrage. */
.loop-frame { position: relative; overflow: hidden; border: 1px solid var(--line); background: #f1efec; }
.loop-video { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.mandats-video .loop-frame { max-width: 340px; }
@media (min-width: 900px) { .mandats-video .loop-frame { max-width: none; } }

/* Indication du son : discrète, elle disparaît quand le son est actif. */
.loop-sound {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  pointer-events: none; transition: opacity 0.3s var(--ease);
}
.loop-sound-txt--tap { display: none; }
@media (hover: none) {
  .loop-sound-txt--hover { display: none; }
  .loop-sound-txt--tap { display: inline; }
}
.loop-sound-icon {
  width: 11px; height: 11px; flex: 0 0 auto; position: relative;
  border-left: 3px solid currentColor;
}
.loop-sound-icon::before {
  content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 1px;
  background: currentColor; transform: translateY(-50%) rotate(-38deg);
}
.loop-frame.sounding .loop-sound { opacity: 0; }

/* Les trois étapes : un numéro, un filet, un intitulé, une ligne. */

/* La chute ferme la section sur toute la largeur, séparée d'un filet. */
.s-mandats .statement--wide {
  max-width: none; margin-top: clamp(30px, 5vw, 44px);
  padding-top: clamp(26px, 4vw, 36px); border-top: 1px solid var(--line);
}

/* ══ Le collectif · Notre état d'esprit ══════════════════════════ */

/* Tête commune aux deux sections : le titre tient une colonne, l'intro
   l'autre — au lieu du titre seul avec du vide en face. */
.duo-head { display: grid; gap: clamp(18px, 3vw, 26px); }
@media (min-width: 900px) {
  .duo-head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .duo-head .block-title { margin-bottom: 0; max-width: 18ch; }
}

/* Photo d'équipe face aux trois façons de vivre ce collectif. */
.collectif-body { display: grid; gap: clamp(28px, 5vw, 40px); margin-top: clamp(30px, 5vw, 48px); }
.collectif-photo .inline-media { margin-top: 0; }
@media (min-width: 900px) {
  .collectif-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}

.volets { margin: 0; padding: 0; list-style: none; }
.volet { padding: clamp(18px, 3vw, 24px) 0; border-top: 1px solid var(--line); }
.volet:first-child { border-top: none; padding-top: 0; }
@media (min-width: 900px) { .volet:first-child { padding-top: 4px; } }
.volet-titre { font-size: clamp(18px, 3.8vw, 21px); font-weight: 500; letter-spacing: -0.014em; line-height: 1.25; }
.volet-texte { margin-top: 6px; color: var(--muted); font-size: clamp(15px, 3.2vw, 17px); line-height: 1.5; }

/* Bande de chute teintée, pleine largeur, centrée. */
.chute-band { background: var(--tint); border-block: 1px solid var(--line); padding-block: clamp(30px, 5vw, 48px); }
.chute-band .statement { margin: 0; max-width: none; text-align: center; }

/* ── 05 · Construire la bonne équipe ──────────────────────────────
   Titre d'un côté, repères chiffrés de l'autre, puis trois volets séparés
   de filets. Les filets sont posés en bordure gauche des volets à partir
   du deuxième : pas de trait qui pende au bout de la rangée. */
.bdx-head { display: grid; gap: clamp(20px, 4vw, 32px); }
.bdx-head .block-title { margin-bottom: 0; }
/* Dans le cas Grayan, les repères s'empilent : ils tiennent la colonne de
   tête, étroite, à côté du titre du cas. */
.reperes--case { flex-direction: column; gap: clamp(14px, 2.5vw, 20px); margin: clamp(16px, 3vw, 24px) 0 0; }
.reperes--case .repere + .repere { padding-left: 0; border-left: 0; }
.reperes--case .repere-chiffre { font-size: clamp(22px, 4.6vw, 30px); }

/* Colonnes dimensionnées sur leur contenu, pas à parts égales : à parts
   égales, « 5 personnes » se serrait dans 173 px alors qu'il en demande
   206, pendant que « 2 ans » en gaspillait 210 pour 90. */
.reperes { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 36px); align-self: start; }
.repere + .repere { padding-left: clamp(18px, 4vw, 36px); border-left: 1px solid var(--line); }
/* Pas de text-wrap: nowrap ici. Il empêchait « 5 personnes » de se couper,
   mais un mot insécable ne rétrécit pas : la grille des repères débordait
   alors de la page entre 900 et 1150 px, où sa colonne est la plus étroite.
   Le corps suit la largeur disponible à la place — le chiffre tient sur une
   ligne sans jamais forcer la mise en page. */
.repere-chiffre { margin: 0; font-size: clamp(24px, 2.9vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.repere-libelle { margin: 4px 0 0; color: var(--muted); font-size: clamp(14px, 3vw, 16px); line-height: 1.4; }

/* Préfixe eq- : .volet et .volets servent déjà au collectif et aux moyens
   de la rémunération, avec des règles contraires (empilement bordé en haut
   plutôt que grille en colonnes). */
.eq-volets {
  display: grid; gap: clamp(26px, 4vw, 34px);
  margin-top: clamp(30px, 5vw, 46px); padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.eq-num { margin: 0 0 clamp(10px, 2vw, 16px); color: var(--muted); font-size: 14px; letter-spacing: 0.04em; }
.eq-titre { margin: 0 0 clamp(10px, 2vw, 14px); font-size: clamp(17px, 3.6vw, 20px); font-weight: 500; letter-spacing: -0.014em; line-height: 1.3; }
.eq-volet .editorial { max-width: none; }
.eq-liste { margin: 0; padding: 0; list-style: none; }
/* Exactement la mesure de .editorial.compact p, celle des volets voisins,
   couleur comprise : la liste est au même niveau de discours, sa puce ne la
   rend pas secondaire. Elle était grisée, seule de sa rangée. */
.eq-liste li {
  position: relative; padding-left: 20px; margin-bottom: 0.55em;
  font-size: clamp(16.5px, 4vw, 18.5px); line-height: 1.55;
}
/* Le pendant desktop de .editorial.compact p. Il doit être déclaré ici, après
   la règle ci-dessus : à spécificité égale, c'est la dernière qui gagne. */
@media (min-width: 1024px) { .eq-liste li { font-size: 19px; } }
.eq-liste li:last-child { margin-bottom: 0; }
.eq-liste li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong);
}

@media (min-width: 900px) {
  .bdx-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 56px); align-items: start; }
  .eq-volets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px); }
  .eq-volet + .eq-volet { padding-left: clamp(28px, 3.5vw, 48px); border-left: 1px solid var(--line); }
}

/* La chute du bloc reçoit le rendez-vous à côté d'elle : cadrée à gauche
   plutôt que centrée comme les autres bandes. */
.chute-band--cta .wrap { display: grid; gap: clamp(22px, 4vw, 36px); }
.chute-band--cta .statement { text-align: left; }
/* La bascule se joue sur le corps autant que sur la graisse : le constat
   s'efface, ce qu'on en retient s'impose. */
.chute-band--cta .statement-fort { font-size: 1.3em; }
.chute-band--cta .cta-row { margin: 0; }
@media (min-width: 900px) {
  .chute-band--cta .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 64px); }
}

/* Chute en deux temps : la seconde ligne porte l'accent. */
.statement--duo .statement-doux { font-weight: 400; }
.statement--duo .statement-fort { font-weight: 500; }

/* Ce que nous aimons : deux colonnes sur ordinateur plutôt qu'une liste
   qui descend sur quatre écrans. */
.opps { margin-top: clamp(30px, 5vw, 48px); }
@media (min-width: 900px) {
  .opps { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); }
  .opp:last-child { border-bottom: none; }
  .opp:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Les parcours qui nous intéressent : encart teinté, à part du reste. */
.parcours {
  margin-top: clamp(30px, 5vw, 48px);
  background: var(--tint); padding: clamp(26px, 4vw, 40px) clamp(22px, 3.5vw, 40px);
  display: grid; gap: clamp(14px, 2.5vw, 20px);
}
@media (min-width: 900px) {
  .parcours { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
}
.parcours-label { font-size: clamp(19px, 3.8vw, 22px); font-weight: 500; letter-spacing: -0.014em; }
.parcours .editorial p { color: var(--muted); }

/* ══ Votre image — texte, chiffre, photo, puis la preuve Baptiste ═══ */

.image-layout { display: grid; gap: clamp(26px, 4vw, 40px); margin-top: clamp(22px, 3.5vw, 32px); }
@media (min-width: 900px) {
  .image-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}
.image-photo .inline-media { margin-top: 0; }

/* La journée de production : un chiffre, pas une phrase. */
.chiffre-bloc { display: flex; align-items: flex-start; gap: clamp(14px, 2.5vw, 22px); margin: clamp(20px, 3.5vw, 28px) 0; }
.chiffre-valeur {
  flex: 0 0 auto; font-size: clamp(56px, 12vw, 84px); font-weight: 500;
  letter-spacing: -0.04em; line-height: 0.85; color: #cfc7bd;
}
.chiffre-texte { font-size: clamp(19px, 4vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; padding-top: 0.12em; }
.chiffre-ligne { display: block; }

/* Prestations : une ligne courante séparée de points, pas des pastilles
   qui ressemblent à des boutons cliquables. */
.liste-inline { margin: clamp(18px, 3vw, 26px) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: clamp(15px, 3.2vw, 17px); line-height: 1.7; }
.liste-inline li { display: inline; }
.liste-inline li:not(:last-child)::after { content: " · "; color: var(--line-strong); opacity: 0.45; }

/* Baptiste : bande teintée pleine largeur, le réel face au texte. */
.temoignage-band { background: var(--tint); border-block: 1px solid var(--line); padding-block: clamp(36px, 6vw, 64px); }
.temoignage-layout { display: grid; gap: clamp(24px, 4vw, 36px); }
/* Même largeur de colonne et même bride que le réel des mandats, pour que
   les deux réels de la page fassent la même taille. */
.temoignage-reel .loop-frame { max-width: 340px; }
@media (min-width: 900px) {
  .temoignage-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
  .temoignage-texte { padding-left: clamp(32px, 4vw, 56px); border-left: 1px solid var(--line); }
  .temoignage-reel .loop-frame { max-width: none; }
}

/* La chute ferme le volet sur toute la largeur, séparée d'un filet. */
.s-apporte-chute { padding-top: 0; }
.s-apporte .statement--wide {
  max-width: none; margin-top: 0;
  padding-top: clamp(26px, 4vw, 36px); border-top: 1px solid var(--line);
}

/* Légende d'un réel : à gauche, l'indication de son passe à droite. */
.loop-caption {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  color: #fff; font-size: 12px; letter-spacing: 0.03em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6); pointer-events: none;
}
.loop-frame:has(.loop-caption) .loop-sound { left: auto; right: 12px; }
/* Réels en paire sur téléphone : le cadre fait ~165 px, la légende et
   l'indication de son ne tiennent pas côte à côte. L'indication garde sa
   seule icône — la légende dit ce qu'on regarde, l'icône dit qu'il y a du
   son, et les deux tiennent. */
@media (max-width: 719px) {
  .reels .loop-sound { padding: 6px 8px; }
  .reels .loop-sound-txt--hover, .reels .loop-sound-txt--tap { display: none; }
  .reels .loop-caption { font-size: 11px; right: 44px; }
}
.loop-frame--vide .loop-sound, .loop-frame--vide .loop-caption { display: none; }