/* Vespère — Production site overlay (sits on top of styles.css)
   Removes wireframe scaffolding, adds production polish.
*/

/* — Phase 4 — photos réelles dans les .ph wrappers — */
.ph.has-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.ph.has-img::before { display: none; }
.ph.has-img::after { z-index: 1; }
.ph.has-img .ph-label { z-index: 2; }

/* — Reset wireframe shell — */
body.site .section { border-bottom: none; }

/* — Nav collante, fond plein papier et filet bas ; se resserre au défilement — */
body.site .site-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 22px 64px;
  background: var(--paper);
  border-bottom: 1px solid transparent; /* aucun filet : le fond papier plein suffit à séparer la nav */
  transition: padding 0.3s;
}
body.site.scrolled .site-nav {
  padding: 14px 64px;
}
/* Grand écran : logo et bouton alignés sur les bords du contenu (conteneur --max centré) */
body.site .site-nav, body.site.scrolled .site-nav {
  padding-inline: max(64px, calc((100% - var(--max)) / 2));
}

body.site .section { opacity: 1; transform: none; }

/* — Photo placeholders : keep the editorial tone, but more refined edge — */
body.site .ph { box-shadow: 0 1px 0 rgb(var(--ink-rgb) / 0.04); }
body.site .ph::after { inset: 0; border: none; }
body.site .ph-label {
  bottom: 14px; left: 14px;
  font-size: 8.5px; letter-spacing: 0.18em;
  background: rgb(var(--paper-rgb) / 0.6);
  padding: 4px 8px;
  backdrop-filter: blur(4px);
}

/* — CTA in nav — bouton rectangulaire plein, se vide au survol — */
body.site .site-nav .nav-cta {
  border-radius: 0;
  padding: 10px 22px;
  font-size: 11px;
  text-decoration: none;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  transition: background 0.3s, color 0.3s, gap 0.3s;
}
body.site.scrolled .site-nav .nav-cta {
  background: var(--accent);
  color: var(--paper);
}
/* Survol et clavier : même aplat encre que le bouton du hero (anim.css) */
body.site .site-nav .nav-cta:hover,
body.site .site-nav .nav-cta:focus-visible {
  border-color: var(--ink);
  color: var(--paper);
}
/* Page Contact : le bouton marque la page active, vert plein, sans survol ni clic (parcours du site, Watt, 22/10) */
body.site .site-nav .nav-cta[aria-current="page"] {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
  pointer-events: none; cursor: default;
}
body.site .site-nav .nav-cta[aria-current="page"]::before { display: none; }
body.site .site-nav .brand { text-decoration: none; color: var(--ink); }

/* — Bouton du mode sombre : soleil puis lune, sans halo (option A d'Apelle, choix de Watt, 25/10) —
   À droite de la nav, avant « Prendre contact » ; sur mobile, à gauche du bouton « Menu » */
.nav-end { display: flex; align-items: center; gap: 24px; justify-self: end; }
/* Sans bordure : un seul bouton visible dans la barre, « Prendre contact » (Apelle ; vert : Watt, 25/10) */
.theme-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: var(--accent); cursor: pointer;
  transition: opacity .3s;
}
.theme-toggle:hover { opacity: .7; }
.theme-toggle svg { width: 20px; height: 20px; overflow: visible; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon {
  transform-origin: 12px 12px;
  transition: opacity .3s ease-out, transform .45s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle .tt-sun circle, .theme-toggle .tt-moon { fill: currentColor; }
.theme-toggle .tt-sun path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle .tt-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .tt-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .tt-moon { opacity: 1; transform: none; }
/* Changement de mode : fondu enchaîné de toute la page (View Transitions, setupThemeToggle), au clic seulement.
   Un fondu couleur par couleur faisait scintiller les textes (Watt, 23/10). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle .tt-sun, .theme-toggle .tt-moon { transition: none; }
}

/* — Stage spacing in production : restore proper page rhythm — */
body.site .page-stage { padding: 0; }

/* — Hero spacing : tighter to top because nav is sticky (ordinateur ; tablette et mobile plus bas) — */
@media (min-width: 1025px) { body.site .section.loose { padding-top: 96px; padding-bottom: 140px; } }

/* — Cursor refinements — */
body.site .btn, body.site .btn-link, body.site .nav-cta { cursor: pointer; }

/* — Smooth scroll throughout — */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* — Body becomes the canvas — */
body.site { background: var(--paper); }

/* ============================================================
   Pass E — Production polish
   ============================================================ */

/* — Brand mark : signature dot in accent green — */
.brand .brand-dot,
.ft-brand .brand-dot {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  margin-left: 1px;
}

/* — Les sections servent de repère aux éléments positionnés — */
body.site .section { position: relative; }

/* — Footer : deux lignes ; mêmes bords que le contenu (--max).
   Haut : logo à gauche, Instagram à droite. Bas : © à gauche, liens légaux à droite. — */
body.site .site-footer { padding: 80px max(64px, calc((100% - var(--max)) / 2)) 32px; }
.site-footer .ft-main { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding-bottom: 56px; }
.site-footer .ft-brand { display: inline-block; font-size: clamp(48px, 3.6vw, 76px); line-height: 0.95; text-decoration: none; }
/* Logo du pied : même logo que la nav, inversé (mot papier, point vert clair) */
.site-footer .ft-brand .brand-dot { color: var(--accent-mid); }
/* Instagram en texte, zone de 44 px (C10, Watt 22/10) */
.site-footer .ft-insta {
  display: inline-block; line-height: 44px;
  font-family: var(--mono); font-size: clamp(13px, 0.7vw, 16px); letter-spacing: 0.04em;
  color: var(--cream); text-decoration: none; white-space: nowrap; transition: color .3s;
}
.site-footer .ft-insta:hover, .site-footer .ft-insta:focus-visible { color: var(--accent-mid); }
.site-footer .ft-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgb(var(--cream-rgb) /0.14);
  font-family: var(--mono); font-size: clamp(11px, 0.55vw, 14px); letter-spacing: 0.04em; color: rgb(var(--cream-rgb) /0.5);
}
.site-footer .ft-legal { display: flex; gap: 32px; }
.site-footer .ft-legal a { color: inherit; text-decoration: none; transition: color .3s; }
.site-footer .ft-legal a:hover, .site-footer .ft-legal a:focus-visible { color: var(--cream); }

/* ── HERO PLEIN-BLEED (Direction B) ─────────────────────────── */

.hero-fullbleed {
  position: relative;
  min-height: 92svh;
  /* pas d'overflow:hidden — clippe les diacritiques É/È de Plus Jakarta Sans */
}

/* Ordinateur : le hero remplit exactement l'écran sous la nav (--nav-h) ;
   la section suivante commence juste sous le bord, jamais visible au chargement */
@media (min-width: 1025px) {
  .hero-fullbleed { min-height: calc(100svh - var(--nav-h) + 2px); }
}

/* Vidéo fond absolu : boucle verticale muette calée à droite (Watt, 26/10 : réglage 41 / 24 / 61 choisi sur maquette) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* clip sur le conteneur vidéo, pas sur la section */
  --hero-video-w: 41%;   /* largeur de la vidéo (plus large = plus zoomée) */
  --hero-fade-at: 61%;   /* début du fondu, depuis la gauche */
  --hero-fade-len: 24%;  /* longueur du fondu */
}
.hero-bg > video {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--hero-video-w);
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile : papier opaque à gauche, puis fondu en courbe douce (smoothstep) sur la vidéo, sans cassure visible */
.hero-bg-veil {
  position: absolute;
  inset: 0;
  --a: var(--hero-fade-at);
  --l: var(--hero-fade-len);
  background: linear-gradient(var(--hero-fade-dir, 90deg),
    var(--paper) 0%, var(--paper) var(--a),
    rgb(var(--paper-rgb) / .972) calc(var(--a) + var(--l) * .1), rgb(var(--paper-rgb) / .896) calc(var(--a) + var(--l) * .2),
    rgb(var(--paper-rgb) / .784) calc(var(--a) + var(--l) * .3), rgb(var(--paper-rgb) / .648) calc(var(--a) + var(--l) * .4),
    rgb(var(--paper-rgb) / .5)   calc(var(--a) + var(--l) * .5), rgb(var(--paper-rgb) / .352) calc(var(--a) + var(--l) * .6),
    rgb(var(--paper-rgb) / .216) calc(var(--a) + var(--l) * .7), rgb(var(--paper-rgb) / .104) calc(var(--a) + var(--l) * .8),
    rgb(var(--paper-rgb) / .028) calc(var(--a) + var(--l) * .9), transparent calc(var(--a) + var(--l)));
}
/* Mode sombre : vidéo assombrie, comme la salle après le service ; fondu bas vers la nuit (Apelle, 23/10) */
:root[data-theme="dark"] .hero-bg > video { filter: brightness(.62) saturate(.85); }
:root[data-theme="dark"] .hero-bg-veil::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--paper) 0%, rgb(var(--paper-rgb) / 0) 22%);
}

/* Offre et Qui sommes-nous : photos en fondu (1,5 s, une toutes les 4 s) à la place de la vidéo, même voile (Watt, 26/10) */
.hero-has-slides { position: relative; }
.hero-has-slides > .container { position: relative; z-index: 1; }
.hero-slides { position: absolute; top: 0; right: 0; width: var(--hero-video-w); height: 100%; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.hero-slides img.is-on { opacity: 1; }
:root[data-theme="dark"] .hero-slides img { filter: brightness(.62) saturate(.85); }

/* Pause de la vidéo (WCAG 2.2.2 : ce qui bouge seul plus de 5 s se met en pause) ; posé par anim.js */
.hero-pause {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(var(--cream-rgb) / 0.55);
  background: rgb(var(--black-rgb) / 0.4); color: var(--cream);
  display: grid; place-items: center;
  transition: background .25s, border-color .25s;
}
.hero-pause[hidden] { display: none; }
.hero-pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero-pause .hp-play, .hero-pause[aria-pressed="true"] .hp-pause { display: none; }
.hero-pause[aria-pressed="true"] .hp-play { display: block; }
.hero-pause:hover { background: var(--accent); border-color: var(--accent); }
.hero-pause:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }

/* Contenu texte au-dessus du fond */
.hero-fullbleed > .container {
  position: relative;
  z-index: 1;
}
.hero-text-col {
  max-width: 64ch;
}

/* Lede hero — sans-serif 300 ancré par une règle verte */
.hero-text-col .lede {
  font-weight: 300;
  font-size: 19px;
  line-height: 1.68;
  letter-spacing: 0.012em;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
/* Second niveau du chapeau : ce que fait Vespère, plus petit que l'accroche (Watt, 23/10) */
.hero-text-col .lede .hero-sub { display: block; margin-top: 8px; font-size: max(14px, 0.8em); line-height: 1.6; max-width: 46em; }

/* Grain éditorial — texture papier d'impression sur le voile */
.hero-bg-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>");
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — tablette + mobile
   Le site est desktop-first ; on adapte ici sans toucher au reste.
   ───────────────────────────────────────────────────────────── */

/* TABLETTE — paddings réduits, grid-3 → 2 colonnes */
@media (max-width: 1024px) {
  .section          { padding: 72px 40px; }
  .section.loose    { padding: 96px 40px; }
  /* body.site : même spécificité que les règles de la nav collante plus haut, sinon elles gagnent */
  body.site .site-nav          { padding: 22px 40px; }
  body.site.scrolled .site-nav { padding: 14px 40px; }
  .site-nav ul      { gap: 20px; }
  body.site .site-footer { padding: 80px 40px 32px; }
  .site-footer .ft-main  { gap: 40px; }
  .container.narrow { max-width: 100%; } /* même bord gauche que la nav (Tenon) */
  /* Titres de haut de page : même échelle que l'ordinateur, déclinée dans :root */
  .ap-title, .of-hero-title, .ct-title, .legal-hero h1, .p404-title { font-size: var(--fs-h1); }
  /* Cibles tactiles ≥ 44 px (Tenon, Apelle) */
  .site-footer .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* MOBILE — single column, nav simplifiée, paddings serrés */
@media (max-width: 768px) {
  /* SECTIONS — paddings horizontaux 20px partout */
  .section          { padding: 56px 20px; }
  .section.loose    { padding: 80px 20px; }

  /* NAV — version D (idée de Watt, maquette d'Apelle, go 23/10 07:28) : rang 1 logo, mode et « Contact » ;
     rang 2 les trois pages réparties sur toute la largeur, replié quand on descend, revenu au moindre geste
     vers le haut (classe nav-replie, setupScrollState). Barre fixe : la page ne saute pas quand le rang 2 se replie. */
  body.site .site-nav, body.site.scrolled .site-nav {
    position: fixed; left: 0; right: 0; top: 0;
    flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 0 20px;
    transition: box-shadow .25s;
  }
  body.site.scrolled .site-nav { box-shadow: 0 1px 0 rgb(var(--ink-rgb) / 0.14); }
  body.site .site-canvas { padding-top: 105px; } /* 60 px de rang 1 + 45 px de rang 2 */
  .site-nav .brand  { display: flex; align-items: center; height: 60px; font-size: 24px; margin-right: auto; transition: height .25s; }
  body.site.scrolled .site-nav .brand { height: 54px; }
  .nav-end          { display: flex; gap: 12px; }
  .nav-cta-more     { display: none; } /* « Prendre contact » devient « Contact » */
  body.site .site-nav .nav-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 11px; }
  .site-nav ul {
    order: 3; flex-basis: 100%; justify-content: space-between; gap: 0;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.14);
    transition: margin-top .25s ease, opacity .25s ease;
  }
  body.site .site-nav ul a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; font-size: 11px; color: var(--ink-mute); }
  body.site .site-nav ul a.current { color: var(--ink); }
  body.site .site-nav ul a::after { bottom: 10px; }
  body.nav-replie .site-nav ul { margin-top: -45px; opacity: 0; pointer-events: none; }
  body.nav-replie .site-nav ul:focus-within { margin-top: 0; opacity: 1; pointer-events: auto; } /* revient au clavier */
  .theme-toggle     { width: 44px; height: 44px; } /* cible tactile (Apelle, 23/10) */

  /* CONTAINERS — pas de padding additionnel (sections gèrent) */
  .container, .container.narrow { max-width: 100%; }

  /* TYPOGRAPHIE — H1/H2/H3 plus serrés */
  h1, .h1           { font-size: var(--fs-h1); letter-spacing: -0.025em; }
  h2, .h2           { font-size: clamp(28px, 7vw, 40px); }
  h3, .h3           { font-size: 20px; }
  .lede             { font-size: var(--fs-lead); }
  body.site .legal-id    { grid-template-columns: 1fr; } /* intitulé au-dessus de la valeur (Tenon, Apelle) ; body.site : la règle de base est plus bas */
  body.site .legal-id dd { border-top: 0; padding-top: 0; }
  /* Libellés mono lisibles (≥ 11 px) */
  body.site .ph-label { font-size: 11px; }
  .ap-anchors       { font-size: 12px; }
  /* Hauts de page : moins de vide sous le sommaire */
  body.site .section.ap-hero, body.site .section.of-hero, body.site .section.ct-hero { padding-bottom: 56px; }
  body.site .hero-fullbleed.section.loose { padding-top: 40px; }
  .hero-actions .btn-link { padding: 10px 0 8px; }
  .reel-dot { height: 44px; }
  /* Téléphone : bouton couper/activer seul (le volume se règle aux boutons de l'appareil ; iOS ignore video.volume) */
  .reel-volume { display: none; }
  /* 20 vidéos : compteur à la place des tirets, qui passeraient sur deux lignes */
  .reel-foot .reel-dots  { display: none; }
  .reel-foot .reel-count { display: block; }

  /* HERO FULLBLEED — texte plus dense, pas de label vertical */
  .hero-fullbleed .hero-text-col { max-width: 100%; }
  .hero-fullbleed .lede          { font-size: var(--fs-lead) !important; font-weight: 400; padding-left: 14px !important; }
  /* Vidéo carrée en haut (video/haut-accueil-tel.mp4, recadrée pour le téléphone), fondue vers le papier par le bas ; le titre
     commence dans le bas du fondu (opaque sur les grands écrans, presque opaque au plancher de 160 px) ; la vidéo raccourcit sur les petits écrans pour que « Partenaire social media…
     cafés. » tienne en entier dans le premier écran (348 px = menu, titre et cette phrase) ; boutons au défilement
     (option 1 d'Apelle, choix de Watt, 26/10) */
  .hero-fullbleed                { min-height: auto; --hero-tel-h: max(160px, min(100vw, calc(100svh - 348px))); }
  .hero-fullbleed > .container   { padding-top: calc(var(--hero-tel-h) - 72px); }
  .hero-bg { inset: 0 0 auto 0; height: var(--hero-tel-h); --hero-fade-dir: 0deg; --hero-fade-at: 8%; --hero-fade-len: 30%; }
  .hero-bg > video { width: 100%; }
  .hero-pause { top: 12px; bottom: auto; width: 44px; height: 44px; } /* cible du doigt : 44 px au moins (Apelle) */
  /* Photos en fondu : même principe, bande en haut fondue vers le papier, texte dessous */
  .hero-has-slides { --hero-tel-h: min(100vw, 52svh); }
  body.site .section.hero-has-slides { min-height: auto; padding-top: calc(var(--hero-tel-h) - 40px); }
  .hero-slides { width: 100%; }
  .hero-slides img { object-position: var(--tel-pos, 50% 50%); } /* cadrage propre à chaque photo, posé dans le HTML */

  /* FOOTER — identité pleine largeur */
  body.site .site-footer  { padding: 72px 20px 28px; }
  .site-footer .ft-main   { flex-wrap: wrap; gap: 16px 24px; padding-bottom: 48px; }
  .site-footer .ft-insta  { font-size: 14px; } /* 14 px au moins au téléphone (Apelle) */
  .site-footer .ft-brand  { font-size: clamp(56px, 18vw, 80px); }
  .site-footer .ft-meta   { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* GHOST text — masqué sur mobile (décoratif) */
  .ghost                  { display: none; }

}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.site .site-nav, .site-nav .brand, .site-nav ul { transition: none; } /* rang des pages : apparition directe */
}

/* PETIT MOBILE (≤ 480px) — derniers ajustements */
@media (max-width: 480px) {
  .section, .section.loose { padding-left: 16px; padding-right: 16px; }
  body.site .site-nav, body.site.scrolled .site-nav { padding: 0 16px; }
  /* 9 tirets + bouton son sur une ligne (Apelle) ; préfixe .reel-foot : passe devant les règles de base, plus bas */
  .reel-foot { gap: 12px; }
  .reel-foot .reel-dots { gap: 6px; }
  .reel-foot .reel-dot  { width: 20px; }
  body.site .site-footer  { padding-left: 16px; padding-right: 16px; }
  body.site .site-nav .nav-cta { white-space: nowrap; padding: 0 12px; }
}

/* ─────────────────────────────────────────────────────────────
   ACCUEIL v2 — refonte octobre 2026
   Hero deux phrases · 3 engagements · galerie vidéo · chiffres · RDV
   ───────────────────────────────────────────────────────────── */

/* HERO — une phrase par ligne, la seconde en vert, titre étiré en largeur */
.hero-text-col.hero-text-wide { max-width: none; }
/* H1 hero — couverture de magazine ; les tailles ordinateur, tablette et mobile suivent plus bas */
.hero-fullbleed h1.hero-duo {
  font-size: var(--fs-h1); /* échelle commune, déclinée par largeur dans :root */
  line-height: 1.1;
  letter-spacing: -0.038em;
  text-wrap: pretty;
  margin-top: 8px;   /* espace pour les accents de la 1re ligne */
  margin-bottom: 36px;
}
.hero-duo .hero-line { display: block; }
.hero-duo .hero-line-accent { color: var(--accent); }
.hero-duo .split-word { margin-right: 0.04em; }
@media (min-width: 1025px) {
  .hero-duo .hero-line { white-space: nowrap; }
}
/* Texte centré verticalement : évite le vide sous les boutons sur grand écran */
@media (min-width: 769px) {
  .hero-wide { display: flex; flex-direction: column; justify-content: center; }
  .hero-wide > .container { width: 100%; }
}
.hero-actions {
  margin-top: 44px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 28px;
}
/* Ordinateur : titre, sous-titre et écarts suivent l'écran ; valeurs inchangées jusqu'à 1440 px */
@media (min-width: 1025px) {
  .hero-fullbleed h1.hero-duo { line-height: 1.1; margin-bottom: max(36px, 0.45em); }
  .hero-text-col .lede { font-size: clamp(19px, 1.1vw, 28px); max-width: 40em; }
  .hero-actions { margin-top: max(44px, 4.5svh); }
}

/* ENGAGEMENTS — trois blocs, photo en alternance gauche / droite */
.engage-head { margin-bottom: clamp(40px, 3vw, 64px); }
.engage-head h2 { margin: 0; }
.engage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
/* Liste empilée : titre, paragraphe dessous ; sans numéros, ce ne sont pas des étapes (Apelle, choix de Watt, 23/10) */
/* Filets : pseudo-éléments qui se dessinent à l'apparition de chaque ligne (anim.css) */
.engage-list { list-style: none; margin: 0; padding: 0; }
.engage-item {
  display: grid; row-gap: 10px;
  padding: clamp(28px, 1.8vw, 44px) 0; position: relative;
}
.engage-item h3 { font-size: clamp(28px, 2.1vw, 44px); line-height: 1.12; margin: 0; text-wrap: balance; }
.engage-item p { font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5; max-width: 64ch; margin: 0; text-wrap: pretty; }
/* Photo à venir : lisible comme telle (cadre 4:5 via .ph-img-portrait, fond un ton plus foncé, filet) */
body.site .engage-photo .ph { background: var(--paper-3); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.14); }
body.site .engage-photo .ph::before { display: none; }
body.site .engage-photo .ph-label { font-size: 11px; }
@media (min-width: 1025px) {
  body.site .section.engage-section { padding-top: 96px; padding-bottom: 96px; }
  .engage-grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(64px, 6vw, 160px); align-items: start; }
  .engage-photo { width: clamp(400px, 22vw, 600px); }
}

/* GALERIE VIDÉO — carrousel horizontal, déborde à droite jusqu'au bord */
#realisations { scroll-margin-top: 64px; }
.reel-section { overflow: hidden; --reel-gap: 20px; }
.reel-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 48px;
}
.reel-head h2 { margin: 0; }
.reel-nav { display: flex; gap: 12px; flex-shrink: 0; }
.reel-section:not(.reel-ready) .reel-nav,
.reel-section:not(.reel-ready) .reel-foot { visibility: hidden; }
.reel-section.reel-static .reel-nav,
.reel-section.reel-static .reel-dots { display: none; }
.reel-section.reel-static .reel-track { overflow-x: hidden; }

.reel-arrow {
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--cream-rgb) /0.35);
  background: transparent; color: var(--cream);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, opacity .25s;
}
.reel-arrow svg { width: 18px; height: 18px; }
.reel-arrow:hover:not([aria-disabled="true"]) { background: var(--cream); border-color: var(--cream); color: var(--black); }
.reel-arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }

.reel-track {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: flex; gap: var(--reel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
}
.reel-track::-webkit-scrollbar { display: none; }

.reel-card {
  position: relative;
  flex: 0 0 clamp(220px, 21vw, 288px);
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  overflow: hidden;
  background: linear-gradient(160deg, #24221d 0%, #12110e 100%);
  color: var(--cream);
}
.reel-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(var(--black-rgb) /0) 55%, rgb(var(--black-rgb) /0.7) 100%);
  pointer-events: none;
  transition: opacity .4s;
}
.reel-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border: 1px solid rgb(var(--cream-rgb) /0.10);
  pointer-events: none;
}
.reel-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Miniature en fond de carte (posée par setupReelCarousel) : la vidéo ne se montre que pendant la lecture */
.reel-card.has-video { background-size: cover; background-position: center; }
.reel-ready .reel-card.has-video .reel-media { transition: opacity .3s; }
.reel-ready .reel-card.has-video:not(.is-live) .reel-media { opacity: 0; }
/* Vidéo retirée de l'affichage hors lecture : Opera ne peut plus y poser son bouton « passer » (Watt, 26/10) */
.reel-ready .reel-card.has-video:not(.is-playing) .reel-media { display: none; }
/* Défilement automatique : pas d'accroche, sinon chaque pas serait ramené à la carte la plus proche */
.reel-track.is-auto { scroll-snap-type: none; }
/* Toute la carte lance la vidéo (Watt, 26/10) : le bouton la couvre ; le petit rond en bas à droite
   (le svg, 44 px, sur la ligne du type) dit qu'elle se lit (Apelle) */
.reel-play {
  position: absolute; inset: 0; z-index: 2;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--cream);
  transition: opacity .3s;
}
.reel-play svg {
  position: absolute; right: 18px; bottom: 18px;
  width: 44px; height: 44px; padding: 13px 11px 13px 15px; box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgb(var(--cream-rgb) /0.55);
  background: rgb(var(--black-rgb) /0.45);
  fill: currentColor;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
}
button.reel-play { cursor: pointer; }
.reel-card.has-video:hover .reel-play svg { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.reel-card.is-playing::before,
.reel-card.is-playing .reel-play,
.reel-card.is-playing .reel-meta { opacity: 0; pointer-events: none; }
/* Au clavier, le bouton reste visible pour mettre en pause */
.reel-card.is-playing .reel-play:focus-visible { opacity: 1; pointer-events: auto; }
/* Son de la galerie : sur la ligne des tirets, calé à droite (Apelle, 25/10) */
.reel-sound { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.reel-sound-btn {
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent;
  color: rgb(var(--cream-rgb) /0.7);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .25s;
}
.reel-sound-btn:hover { color: var(--cream); }
.reel-sound-btn svg { width: 20px; height: 20px; }
.reel-sound-off,
.reel-sound.is-muted .reel-sound-on { display: none; }
.reel-sound.is-muted .reel-sound-off { display: inline; }
.reel-volume {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 20px; margin: 0;
  background: transparent; cursor: pointer;
}
.reel-volume::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--accent-mid) var(--vol, 0%), rgb(var(--cream-rgb) /0.35) var(--vol, 0%));
}
.reel-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; margin-top: -5px;
  border: 0; border-radius: 50%; background: var(--cream);
}
.reel-volume::-moz-range-track { height: 2px; background: rgb(var(--cream-rgb) /0.35); }
.reel-volume::-moz-range-progress { height: 2px; background: var(--accent-mid); }
.reel-volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cream); }
.reel-meta {
  position: absolute; left: 18px; right: 74px; bottom: 18px; z-index: 2; /* 74 = place du rond de lecture */
  display: flex; align-items: baseline; gap: 12px;
  pointer-events: none; /* le clic passe au bouton qui couvre la carte */
  transition: opacity .3s;
}
.reel-tag { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.1; }

.reel-foot { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.reel-dots { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.reel-count { display: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: rgb(var(--cream-rgb) /0.7); }
.reel-dot {
  position: relative;
  width: 28px; height: 20px; padding: 0;
  border: 0; background: transparent;
  cursor: pointer;
}
.reel-dot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: rgb(var(--cream-rgb) /0.25);
  transition: background .3s;
}
.reel-dot:hover::before { background: rgb(var(--cream-rgb) /0.6); }
.reel-dot.is-active::before { background: var(--accent-mid); }

.reel-arrow:focus-visible,
.reel-dot:focus-visible,
.reel-play:focus-visible,
.reel-sound-btn:focus-visible,
.reel-volume:focus-visible,
.reel-track:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }

/* CHIFFRES des cartes de cas clients — grand chiffre serif, « × » en italique vert ; taille et mise en page : .case-stats
   (les trois chiffres sans nom de l'Accueil sont retirés, version B, 23/10) */
.stat-n {
  font-family: var(--serif); font-weight: 400;
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.stat-x {
  font-style: italic; color: var(--accent);
  font-size: 0.6em; vertical-align: 0.28em;
  margin-right: 0.04em;
}
.stat-l { margin: 0; }
.stat-l strong { font-weight: 600; color: var(--accent); }

/* RENDEZ-VOUS — section verte : titre et bouton à gauche, chapeau à droite, puis les trois temps
   du contact côte à côte sur une ligne à points (option B d'Apelle, choix de Watt, 23/10) */
.cta-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start; /* chapeau aligné sur le haut du titre (Apelle) ; le sur-titre est au-dessus de la grille */
}
.cta-head h2 { margin-top: 0; }
@media (min-width: 769px) { .section.green.loose h2 { font-size: clamp(52px, 4.2vw, 76px); } } /* appel final, même titre sur toutes les pages : un peu plus grand que les autres titres, sur une ligne à 1440 */
.cta-head .lede { margin: 0; text-wrap: pretty; } /* pas de mot seul en fin de chapeau */
.cta-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 28px; margin-top: 40px;
}
.cta-steps {
  list-style: none; margin: clamp(64px, 5vw, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  position: relative;
}
.cta-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--cream-rule); } /* la ligne qui relie les points */
.cta-steps li { position: relative; padding-top: 34px; }
.cta-steps li::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--accent-mid); }
.cta-fact-k { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 1.7vw, 36px); line-height: 1.15; color: var(--cream); }
.cta-fact-v { display: block; margin-top: 12px; max-width: 32ch; font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5; color: var(--cream-soft); text-wrap: pretty; }
/* Ordinateur : sections de contenu au même rythme (96 px) ; bandeau vert final un peu plus ample,
   chapeau à l'échelle de celui du hero */
@media (min-width: 1025px) {
  body.site .section.reel-section { padding-top: 96px; padding-bottom: 96px; }
  body.site .section.green.loose { padding-top: 112px; padding-bottom: 112px; }
  .cta-head .lede { font-size: clamp(19px, 1.1vw, 28px); }
}

/* ACCUEIL v2 — tablette */
@media (max-width: 1024px) {
  .reel-section { --reel-gap: 16px; }
  .reel-card    { flex-basis: clamp(200px, 30vw, 260px); }
  .cta-head     { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* ACCUEIL v2 — mobile */
@media (max-width: 768px) {
  .hero-fullbleed h1.hero-duo { margin-bottom: 10px; } /* accroche rapprochée du titre pour laisser sa hauteur à la vidéo (Watt, 26/10) */
  .hero-actions { margin-top: 32px; }
  .engage-head  { margin-bottom: 40px; }
  .engage-grid  { grid-template-columns: 1fr; gap: 32px; }
  .engage-photo { max-width: none; }
  /* Photo 4:5 recadrée en 4:3 : le visage du cuisinier, sa main et le bol, les collègues derrière (Watt, 26/10) */
  .engage-photo .ph { aspect-ratio: 4 / 3; }
  .engage-photo .ph img { object-position: 50% 28%; }
  .engage-item  { padding: 24px 0; }
  .engage-item p { font-size: 16px; }
  .reel-head    { margin-bottom: 32px; }
  .reel-nav     { display: none; }
  .reel-card    { flex-basis: min(64vw, 300px); }
  /* Trois temps empilés, la ligne passe à la verticale d'un point à l'autre */
  .cta-steps    { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
  .cta-steps::before { display: none; }
  .cta-steps li { padding: 0 0 0 34px; }
  .cta-steps li::before { top: 0.45em; }
  .cta-steps li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: calc(0.45em + 13px); bottom: -32px; width: 1px; background: var(--cream-rule); }
}

/* ─────────────────────────────────────────────────────────────
   APPROCHE v2 — refonte octobre 2026
   Haut · cas clients · publicité · équipe · valeurs (réorganisation, Watt, 23/10)
   ───────────────────────────────────────────────────────────── */
#cas-clients, #campagnes, #equipe, #valeurs { scroll-margin-top: 64px; }

/* HERO — calé à gauche comme les autres pages (audit Apelle, 18/10) ; la 404 reste centrée (.is-centered) ;
   titre sur deux lignes comme l'Accueil ; sous-titre + sommaire en liens soulignés (langage .btn-link) */
.ap-hero > .ghost { position: absolute; }
.ap-title .hero-line { display: block; }
.ap-title .hero-line-accent { color: var(--accent); }
.ap-title .split-word { margin-right: 0.04em; }
.ap-hero-lede { margin: 36px 0 0; max-width: 44ch; font-size: var(--fs-lead); text-wrap: balance; }
.ap-hero .is-centered { text-align: center; }
.ap-hero .is-centered .eyebrow, .p404-actions { justify-content: center; }
.ap-hero .is-centered .ap-hero-lede, .p404-title { margin-inline: auto; }
.p404-title { max-width: 16ch; margin-block: 0; }
body.site .ap-hero:has(.is-centered) { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; } /* 404 : remplit l'écran (Apelle) */
.p404-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
/* Les entrées sont des .btn-link : même trait et même survol que « Voir nos créations » (Accueil) */
.ap-anchors {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 0 32px;
}
/* Cible tactile de 44 px (parcours du site, Watt, 22/10) ; le trait reste à sa place, juste sous le texte */
body.site .ap-anchors .btn-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } /* body.site : anim.css le passe en inline-block */
.ap-anchors .btn-link::before, .ap-anchors .btn-link::after { bottom: calc(50% - 1.1em); }
/* Trait et flèche sur la première entrée ; au survol (ou au clavier), ils passent sur l'entrée visée (Watt, 15/10) */
.ap-anchors .btn-link > span { transition: opacity .25s; }
.ap-anchors .btn-link:not(:first-child)::before,
.ap-anchors:has(.btn-link:hover, .btn-link:focus-visible) .btn-link:not(:hover, :focus-visible)::before { transform: scaleX(0); }
.ap-anchors .btn-link:not(:first-child) > span,
.ap-anchors:has(.btn-link:hover, .btn-link:focus-visible) .btn-link:not(:hover, :focus-visible) > span { opacity: 0; }
.ap-anchors .btn-link:hover > span, .ap-anchors .btn-link:focus-visible > span { opacity: 1; }
.ap-anchors .btn-link:focus-visible { color: var(--accent); outline-offset: 6px; }
.ap-anchors .btn-link:focus-visible::before { transform: scaleX(0); }
.ap-anchors .btn-link:focus-visible::after { transform: scaleX(1); }

/* EN-TÊTE DE SECTION commun à la page */
.ap-head { max-width: 760px; margin-bottom: 64px; }
.ap-head h2 { margin-bottom: 0; }
#valeurs .ap-head, #equipe .ap-head { max-width: none; } /* titres sur une ligne (Watt, 15/10 et 18/10) */
.ap-head .lede { margin: 20px 0 0; }
#livrables .ap-head .lede { max-width: 34em; text-wrap: pretty; } /* même mesure que le chapeau du haut de l'Offre (Apelle, 22/10) */

/* VALEURS — trois valeurs, le nom en grand */
.values3 {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.values3 li { padding: 0 40px 8px 0; }
.values3 li + li { padding-left: 40px; border-left: 1px solid var(--line); }
.values3-n {
  display: block; margin-bottom: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--accent);
}
.values3-name {
  margin: 0 0 18px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 2.6vw, 56px); line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.values3-text { margin: 0; max-width: 38ch; font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5; text-wrap: pretty; }
.values3-text strong { font-weight: 600; color: var(--accent); } /* mots clés en vert gras, comme les chiffres de l'Accueil */

/* CAS CLIENTS — fiches « plein cadre » (variante B d'Apelle, choix de Watt, 23/10) : volet aux couleurs de la charte
   du client, colonne Vespère (chiffres), feed 3 × 3. Empilées sur ordinateur, l'une sous l'autre ailleurs */
.case-stack { display: grid; gap: 48px; }
.case-peek { display: none; }
.case-volet h3:focus { outline: none; } /* reçoit le focus après l'échange (tabindex="-1"), sans contour */
.case-card { display: flex; flex-direction: column; background: var(--paper-2); overflow: hidden; }
.section.cream .case-card { background: var(--paper); } /* cartes claires sur fond crème */
.case-body { display: flex; flex-direction: column; }

/* Volet : la couverture de la charte du client */
.case-volet {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px 64px; text-align: center;
  background: var(--c-fond); color: var(--c-texte);
  font-family: var(--charte);
}
.case-volet > * { position: relative; z-index: 1; }
.case-volet p, .case-volet li { color: var(--c-texte); }
.case-mascotte { --c-fond: var(--mascotte-fond); --c-texte: var(--mascotte-texte); --c-accent: var(--mascotte-accent); --c-bande-1: var(--mascotte-fonce); --c-bande-2: var(--mascotte-accent); --c-lecture: var(--mascotte-lecture); }
.case-oken     { --c-fond: var(--oken-fond); --c-texte: var(--oken-texte); --c-accent: var(--oken-accent); --c-bande-1: var(--oken-bande-1); --c-bande-2: var(--oken-bande-2); --c-lecture: var(--oken-lecture); }
/* Aplat de lecture : le texte se pose sur un ton foncé de la charte, contraste 5,9 à 9,9 (variante B d'Apelle, choix de Watt, 23/10) */
.case-lecture { margin-top: 24px; padding: 14px 14px 16px; /* 24 px : de l'air sous le nom du restaurant (Watt, 26/10) */ max-width: 320px; background: var(--c-lecture); }
.case-volet h3 { margin: 0; line-height: 0; }
.case-logo-mascotte {
  display: block; width: 215px; aspect-ratio: 440 / 277;
  background: var(--c-texte);
  -webkit-mask: url(../img/cas/logo-mascotte.webp) center / contain no-repeat;
  mask: url(../img/cas/logo-mascotte.webp) center / contain no-repeat;
}
.case-logo-oken { display: block; width: 250px; height: auto; margin: 14px 0 6px; filter: brightness(0) invert(1); }
.case-volet .case-tone {
  margin: 0;
  font-weight: 700; font-size: 13px; line-height: 1.6;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-accent);
}
.case-points { list-style: none; margin: 10px 0 0; padding: 0; }
.case-points li { font-size: 14px; line-height: 1.75; }
.case-da {
  margin: 18px 0 0; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-texte) 35%, transparent);
  font-size: 13px; line-height: 1.5;
}
.case-da b {
  display: block; margin-bottom: 3px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-accent);
}
.case-volet .case-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: linear-gradient(90deg, var(--c-bande-1) 54px, var(--c-bande-2) 54px);
}
.case-volet .case-deco { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; } /* hauteur suivant la largeur posée dans le HTML */

/* Colonne Vespère : le type de lieu, puis les deux chiffres */
.case-main { padding: 36px 24px 32px; }
.case-meta {
  margin-bottom: 26px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.case-feed {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.case-feed .ph { aspect-ratio: 4 / 5; } /* format des photos du feed (Watt, 23/10) */
/* Feed tournant (Watt, 26/10) : la nouvelle photo se pose sur l'ancienne en fondu */
.case-feed .ph > img { transition: opacity .9s ease; }
.case-feed .ph > img.feed-new { opacity: 0; }
/* Chiffres : grand chiffre vert, libellé dessous, un filet au-dessus de chacun */
.case-stats { list-style: none; margin: 0; padding: 0; }
.case-stats li { padding: 18px 0 20px; border-top: 1px solid rgb(var(--ink-rgb) / 0.14); }
.case-stats .stat-n { font-size: 68px; color: var(--accent); }
.case-stats .stat-l { margin-top: 8px; font-size: 14px; line-height: 1.45; max-width: none; color: var(--ink-soft); }
.case-stats .stat-l strong { font-weight: inherit; }
/* Pas de mot seul en fin de bloc (Apelle, 26/10) */
.case-meta { text-wrap: balance; }
.case-stats .stat-l, .case-points li, .case-da { text-wrap: pretty; }
/* Ordinateur : fiche de 480 px, volet | chiffres | feed collé au bord droit sur toute la hauteur.
   Cartes dans la même case ; celle de derrière (.is-back) décalée, son contenu caché, sa bande nommée cliquable */
@media (min-width: 1025px) {
  .case-card { height: 480px; }
  .case-body { flex: 1; display: grid; grid-template-columns: clamp(300px, 25vw, 360px) minmax(0, 1fr) 384px; } /* 384 = 480 × 4/5 : photos du feed en 4:5 (Watt, 23/10) */
  .case-main { align-self: center; max-width: calc(290px + 52px + 55px); padding: 0 55px 0 52px; } /* 52 px après le volet, au moins 55 px avant les photos (Watt) */
  .case-feed { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .case-feed .ph { aspect-ratio: auto; }
  .case-body { min-height: 0; } /* la fiche garde sa hauteur : le feed reste en 4:5 même si le texte du milieu est long (Watt, 26/10) */
  /* Pile seulement avec JS (setupCaseStack) : sans lui, les deux fiches restent lisibles l'une sous l'autre (Tenon, 23/10) */
  .js .case-stack { --case-dx: 88px; --case-dy: 56px; gap: 0; padding: 0 var(--case-dx) var(--case-dy) 0; } /* 88 px : une bande de photos de l'autre cas reste visible (Apelle) */
  .js .case-card {
    grid-area: 1 / 1; position: relative; z-index: 2;
    box-shadow: 0 18px 32px -24px rgba(40,32,20,.35); /* la carte de devant se pose sur l'autre (Apelle) */
    transition: transform .6s cubic-bezier(.2,.7,.2,1), background-color .3s ease, box-shadow .6s ease;
  }
  .js .case-card.is-back {
    z-index: 1; cursor: pointer;
    transform: translate(var(--case-dx), var(--case-dy));
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .js .case-card.is-back:hover { transform: translate(calc(var(--case-dx) + 6px), calc(var(--case-dy) + 6px)); }
  .js .section.cream .case-card.is-back { background: var(--paper-3); }
  .js .section.cream .case-card.is-back:hover { background: var(--paper); }
  .js .case-body > * { transition: opacity .35s ease .2s, visibility 0s linear 0s; }
  /* Carte de derrière : seul son feed reste visible, dans la bande qui dépasse ; son nom s'affiche en bas à gauche, sous le volet caché */
  .js .case-card.is-back .case-body > :not(.case-feed) {
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  /* Feed de derrière en gris pâle : on ne le lit pas comme une 4e colonne de la fiche de devant (Apelle, ok de Watt, 26/10) */
  .js .case-card.is-back .case-feed { opacity: .3; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
  .js .case-card.is-back:hover .case-feed { opacity: .8; filter: none; }
  .js .case-peek {
    display: flex; position: absolute; inset: auto 0 0 0; height: var(--case-dy); z-index: 4;
    align-items: baseline; justify-content: flex-start; align-content: center; flex-wrap: wrap;
    gap: 16px; padding: 0 32px;
    background: none; border: 0; cursor: pointer; text-align: left;
    opacity: 0; visibility: hidden;
  }
  .js .case-card.is-back .case-peek { opacity: 1; visibility: visible; transition: opacity .3s ease .25s; }
  .case-peek:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .case-peek-name { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--ink); }
  .case-peek-cta { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
  .js .case-card.is-back:hover .case-peek-cta { text-decoration: underline; text-underline-offset: 4px; }
}
/* Petit ordinateur (1025-1279 px) : volet et marges resserrés pour que les chiffres tiennent dans la fiche
   à côté du feed de 384 px (bas de la grille coupé avant, Watt, 26/10) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .js .case-stack { --case-dx: 48px; } /* bande de la carte de derrière plus étroite : 40 px rendus au texte */
  /* Fiche de 440 px (feed de 352 = 440 × 4/5) : la place gagnée va au volet, qui respire (Watt, 26/10) */
  .case-card { height: 440px; }
  .case-body { grid-template-columns: clamp(250px, calc(41vw - 165px), 330px) minmax(0, 1fr) 352px; } /* 257 px à 1030, 327 px à 1200 : les chiffres gardent 190 px de texte */
  .case-volet { padding: 28px 26px 40px; }
  .case-logo-mascotte { width: 170px; }
  .case-logo-oken { width: 200px; margin: 8px 0 4px; }
  .case-lecture { margin-top: 20px; padding: 12px 16px 14px; }
  .case-volet .case-tone { font-size: 11.5px; }
  .case-points li { font-size: 12.5px; line-height: 1.6; }
  .case-da { margin-top: 10px; padding-top: 8px; font-size: 12px; }
  .case-main { padding: 0 24px 0 28px; }
  .case-meta { letter-spacing: .1em; }
  .case-stats .stat-n { font-size: 56px; }
  .case-stats .stat-l { font-size: 13px; }
}
/* Grand écran : la fiche grandit avec l'écran au lieu de laisser un vide au milieu (Apelle, 23/10) ;
   photos en 4:5 (largeur = hauteur × 4/5) */
@media (min-width: 1601px) {
  .case-card { height: clamp(480px, 28vw, 600px); }
  .case-body { grid-template-columns: clamp(360px, 22vw, 460px) minmax(0, 1fr) calc(clamp(480px, 28vw, 600px) * 4 / 5); }
  .case-main { max-width: 520px; justify-self: center; }
  .case-stats .stat-n { font-size: clamp(68px, 4.4vw, 96px); }
  .case-stats .stat-l { font-size: clamp(14px, .8vw, 17px); }
}
/* Téléphone : 3 slides par cas (charte, chiffres, photos) glissées au doigt, la suivante dépasse à droite ;
   bouton de cas au-dessus, repères dessous (idée de Watt, maquette d'Apelle, 23/10 ; setupCaseSlides dans anim.js).
   Les fiches et leur corps s'effacent (display: contents) : volet, chiffres et feed deviennent les 6 slides du rail. */
.case-switch, .case-steps { display: none; }
@media (max-width: 768px) {
  body.site .case-stack {
    display: flex; gap: 8px; align-items: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: -20px; padding-right: 44px; /* 44 = 64 − 20 : la dernière slide peut se caler à gauche comme les autres */
  }
  .case-stack::-webkit-scrollbar { display: none; }
  .case-card, .case-body { display: contents; }
  .case-volet, .case-main, .case-feed {
    flex: 0 0 calc(100vw - 64px); aspect-ratio: 4 / 5; /* 3 × 3 photos en 4:5 : la grille remplit la slide, les 3 slides ont sa hauteur */
    scroll-snap-align: start; overflow: hidden;
  }
  /* Slide 1 · charte */
  .case-volet { padding: 16px 16px 24px; }
  .case-logo-mascotte { width: clamp(130px, 41vw, 160px); }
  .case-logo-oken { width: clamp(180px, 56vw, 220px); margin: 8px 0 4px; }
  .case-lecture { width: 100%; max-width: none; margin-top: 12px; padding: 12px 14px 14px; }
  .case-volet .case-tone { font-size: 12px; }
  .case-points { margin-top: 8px; }
  .case-points li { font-size: clamp(12.5px, 3.5vw, 13.5px); line-height: 1.65; }
  .case-da { margin-top: 10px; padding-top: 10px; font-size: clamp(11.5px, 3.2vw, 12.5px); }
  .case-da b { font-size: 10.5px; }
  /* Slide 2 · chiffres */
  .case-main {
    display: flex; flex-direction: column; justify-content: center;
    padding: 16px 20px 18px; border-top: 8px solid var(--c-fond); background: var(--paper);
  }
  .case-meta { margin-bottom: 8px; font-size: 10.5px; line-height: 1.6; letter-spacing: 0.14em; }
  .case-stats li { padding: 10px 0 12px; }
  .case-stats .stat-n { font-size: clamp(48px, 15vw, 64px); }
  .case-stats .stat-l { margin-top: 4px; font-size: 13px; line-height: 1.4; }
  /* Slide 3 · photos */
  .case-feed { grid-template-rows: repeat(3, minmax(0, 1fr)); background: var(--paper-3); }
  .case-feed .ph { aspect-ratio: auto; }
  /* Bouton de cas */
  .case-switch {
    display: flex; margin: 0 0 14px; padding: 4px;
    border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.1);
  }
  .case-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px;
    border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-mute);
  }
  .case-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-fond); }
  .case-tab[aria-selected="true"] { background: var(--c-fond); color: var(--c-texte); }
  .case-tab[aria-selected="true"] .case-tab-dot { background: var(--c-accent); }
  .case-tab:focus-visible, .case-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Repères des 3 slides */
  .case-steps { display: flex; margin-top: 14px; border-top: 1px solid rgb(var(--ink-rgb) / 0.14); }
  .case-step {
    flex: 1; margin-top: -2px; padding: 10px 0 4px; min-height: 44px;
    border: 0; border-top: 3px solid transparent; background: none; cursor: pointer; text-align: left;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  }
  .case-step b { font-weight: 400; margin-right: 6px; color: rgb(var(--ink-rgb) / 0.35); }
  .case-step[aria-current="true"] { color: var(--ink); border-top-color: var(--c-fond); }
  .case-step[aria-current="true"] b { color: var(--c-fond); }
}
@media (max-width: 480px) { body.site .case-stack { margin-right: -16px; padding-right: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .js .case-card, .js .case-body > *, .js .case-peek, .js .case-card.is-back .case-body > *, .js .case-card.is-back .case-peek { transition: none; }
}
.case-note {
  margin: 40px 0 0; max-width: none; /* une seule ligne sur ordinateur (Watt) */
  font-family: var(--mono); font-size: clamp(12px, 0.6vw, 15px);
  letter-spacing: 0.02em;
  color: var(--ink-soft); /* plus foncé : lisible (audit Apelle, 18/10) */
}

/* PUBLICITÉ BIEN PILOTÉE — section à part : tiers contre nous */
.proofs { margin-top: 0; }
.proofs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proof { padding: 0 48px 8px 0; }
.proof + .proof { padding-left: 48px; border-left: 1px solid var(--line); }
.proof-name {
  margin: 0 0 20px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 1.7vw, 30px); line-height: 1.2;
  color: var(--accent);
}
/* Base des chiffres sur sa propre ligne : les deux titres ont la même hauteur, les chiffres s'alignent (Watt, 23/10) */
.proof-base {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-style: normal; font-size: 11px; line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.proof-stats {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.proof-n {
  display: block; margin-bottom: 8px;
  font-family: var(--serif); font-weight: 400;
  font-size: calc(var(--fs-figure) * 2 / 3); line-height: 0.9; /* un tiers plus petit que les chiffres de l'Accueil (Watt, 18/10) */
  letter-spacing: -0.03em; white-space: nowrap;
  color: var(--ink);
}
.proof-l { display: block; font-size: clamp(16px, 0.85vw, 19px); line-height: 1.45; color: var(--ink-soft); }
.proofs .lede { margin: 40px 0 0; }
/* Publicité : zone centrée à toutes les largeurs, pour varier le rythme ; le filet sert d'axe (Watt, Apelle, 16/10 ; téléphone : Watt, 23/10) */
#campagnes .ap-head { margin-inline: auto; text-align: center; }
#campagnes .eyebrow { justify-content: center; }
#campagnes .eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--accent); } /* tiret des deux côtés : le mot sur l'axe */
#campagnes .proofs, #campagnes .case-note { text-align: center; }
@media (min-width: 1025px) {
  #campagnes .proofs { max-width: 1040px; margin-inline: auto; }
  #campagnes .proof { padding: 0 64px 8px; }
  #campagnes .proof + .proof { padding-left: 64px; }
  #campagnes .proofs .lede { margin: 56px auto 0; font-size: clamp(19px, 1.1vw, 28px); text-wrap: balance; } /* conclusion sous les chiffres, à la taille d'un chapeau (Watt, 17/10) */  #campagnes .case-note { margin-top: 80px; text-align: center; } /* de l'air avant les sources (Watt) ; centrées comme la section qu'elles sourcent (Apelle, 17/10) */
}

/* ÉQUIPE — quatre portraits */
/* Titre et flèches de la galerie sur une ligne ; flèches visibles seulement quand les cartes défilent (anim.js) */
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.team-nav  { display: none; gap: 12px; flex-shrink: 0; }
.team-nav .reel-arrow { border-color: var(--line); color: var(--ink); }
.team-nav .reel-arrow:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.team-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
/* rangées alignées d'une carte à l'autre : photo (avec nom et métier), phrase, compétences */
.team-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.team-visual { position: relative; }
.team-photo { aspect-ratio: 4 / 5; } /* portrait vertical (Watt, 18/10) ; visage dans le tiers haut */
.team-photo.has-img > img { object-position: 50% 30%; }
body.site .team-photo .ph-label { top: 14px; bottom: auto; } /* « photo à venir » en haut : le bas porte le nom */
/* Nom et métier posés sur la photo, en étiquette (Watt, 18/10) : la section tient dans un écran */
.team-label {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; /* même boîte pour les quatre (Apelle) */
  padding: 10px 14px 9px; background: var(--paper);
}
.team-card h3 { font-size: clamp(22px, 1.4vw, 30px); line-height: 1.15; margin: 0; }
.team-role, .team-skills {
  font-family: var(--mono); font-size: clamp(11px, 0.55vw, 13px); line-height: 1.5; /* plus petit : chaque rôle tient sur une ligne (Watt, 23/10) */
  letter-spacing: 0.03em; text-transform: uppercase; /* resserré pour tenir sur une ligne (Watt, Apelle) */
}
.team-role   { margin-top: 2px; color: var(--accent); }
.team-card p { margin: 16px 0 0; font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5; }
.team-skills { margin-top: 12px; color: var(--ink-mute); }
/* Indépendants : la phrase verte répond au titre, les associés sont « entourés » par la mise en page (Watt, Apelle, 18/10) */
.team-more {
  margin: clamp(40px, 3vw, 56px) 0 0;
  text-align: left;
  font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5;
  color: var(--ink-soft);
}
.team-more p { margin: 0; max-width: 46em; font: inherit; color: inherit; } /* sinon la règle globale p de styles.css l'emporte (Tenon) */
.team-more .team-more-lead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 2.2vw, 48px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--accent); text-wrap: balance; margin-bottom: 12px;
}
@media (min-width: 1280px) {
  .team-grid  { gap: clamp(24px, 2vw, 40px); }
}
.team-role { min-height: 3em; } /* deux lignes réservées à toutes les largeurs : les prénoms s'alignent (Apelle) */
@media (min-width: 1280px) { .team-role { min-height: 0; } } /* une ligne pour tous : plus de place à réserver */
@media (min-width: 1280px) and (max-width: 1439px) {
  .team-role { letter-spacing: 0; font-size: 10.5px; } /* écran moyen : chaque rôle tient sur une ligne (Watt, 23/10) */
  .team-label { left: 8px; right: 8px; padding-left: 10px; padding-right: 10px; }
}
/* Fenêtre plus étroite : les profils passent en galerie à faire défiler, subgrid gardé (Watt, Apelle, 18/10) */
@media (max-width: 1279px) {
  #equipe { overflow-x: clip; } /* le débord à droite ne fait pas défiler la page */
  .team-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: max(min(272px, 82%), calc((100% - 48px) / 2.5));
    gap: 0 24px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    padding-bottom: 16px;
    margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); /* même débord que .reel-track */
  }
  .team-card { scroll-snap-align: start; }
  #equipe.team-scroll .team-nav { display: flex; }
  .team-grid:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }
}
/* Ruban « photos en préparation » (maquette B d'Apelle, Watt 26/10) : en travers des portraits, d'un bord à l'autre
   de l'écran, posé hors de la galerie pour rester fixe quand les cartes défilent. À retirer avec les portraits. */
#equipe { overflow-x: clip; } /* le ruban touche les bords sans faire défiler la page */
.team-wrap { position: relative; container-type: inline-size; --team-card-w: calc((100cqw - 3 * clamp(24px, 2vw, 40px)) / 4); }
.team-ribbon {
  position: absolute; z-index: 4; left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: calc(var(--team-card-w) * 1.25 * 0.34); /* vers le tiers haut de la photo (4:5), loin du nom */
  margin: 0; padding: 22px 64px; max-width: none; /* sinon la largeur de lecture de la règle globale p */
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 28px;
  background: var(--green); color: var(--cream);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.5);
}
.team-ribbon-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-soft);
}
.team-ribbon-txt { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2vw, 32px); line-height: 1.25; }
@media (max-width: 1279px) {
  .team-wrap { --team-card-w: max(min(272px, 82cqw), calc((100cqw - 48px) / 2.5)); } /* largeur d'une carte de la galerie */
}
@media (max-width: 768px) {
  .team-ribbon { display: block; padding: 16px 20px 18px; box-shadow: 0 14px 30px -16px rgb(0 0 0 / 0.55); }
  .team-ribbon-tag { display: block; font-size: 10.5px; margin-bottom: 6px; }
  .team-ribbon-txt { display: block; font-size: 22px; }
}

/* Photos à venir : même traitement que sur l'Accueil (cadre plein, filet), sans dégradé */
body.site .case-feed .ph, body.site .team-photo { background: var(--paper-3); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.14); }
body.site .case-feed .ph::before, body.site .team-photo::before { display: none; }

/* APPEL FINAL — aligné sur le contenu, comme le bloc vert de l'Accueil */
.ap-cta .lede { max-width: 40em; }

/* Ordinateur : sections au même rythme que l'Accueil (96 px) */
@media (min-width: 1025px) {
  body.site .section.ap-hero { padding-bottom: 96px; }
  /* Approche : premier écran plein, la section suivante n'apparaît qu'au défilement (remis par Watt, 23/10, après un essai resserré) */
  body.site .section.ap-hero-full { min-height: calc(100svh - var(--nav-h) + 2px); display: flex; flex-direction: column; justify-content: center; padding-block: 48px calc(48px + var(--nav-h) + 6svh); } /* centre optique : bloc à ~47 % de l'écran, nav comprise (Apelle, 15/10) */
  body.site .section.ap-hero-full > .container { width: 100%; max-width: var(--max); } /* même bord gauche que la nav */
  /* Titre à l'échelle commune ; chapeau et espaces qui grandissent avec lui (Apelle, 15/10) */
  body.site .ap-hero-full .ap-title { font-size: var(--fs-h1); line-height: 1.1; }
  body.site .legal-hero h1, body.site .p404-title { font-size: var(--fs-h1); line-height: 1.06; }
  body.site .ap-hero-full .ap-hero-lede { font-size: clamp(19px, 1.1vw, 28px); margin-top: max(36px, calc(0.35 * min(5.4vw, 10svh))); }
  body.site .ap-hero-full .ap-anchors { margin-top: max(48px, calc(0.45 * min(5.4vw, 10svh))); } /* sommaire juste sous le titre, sans chapeau */
  .ap-head .lede { font-size: clamp(19px, 1.1vw, 28px); }
  body.site #valeurs, body.site #cas-clients, body.site #campagnes { padding-top: 96px; padding-bottom: 96px; }
  /* Équipe : tient dans un écran (Apelle, 18/10) */
  body.site #equipe { padding-top: 72px; padding-bottom: 96px; }
  #equipe .eyebrow  { margin-bottom: 20px; }
  #equipe .ap-head  { margin-bottom: 32px; }}

/* APPROCHE v2 — tablette */
@media (max-width: 1024px) {
  .values3      { grid-template-columns: 1fr; border-top: none; }
  .values3 li, .values3 li + li { padding: 32px 0; border-left: none; border-top: 1px solid var(--line); }
  .values3 li:first-child { border-top-color: var(--ink); }
  .case-stack   { gap: 32px; }
}

/* APPROCHE v2 — mobile */
@media (max-width: 768px) {
  .ap-anchors   { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; font-size: 10px; } /* deux lignes de deux, aucune entrée seule (Apelle, 23/10) */
  .of-hero-index { grid-template-columns: repeat(3, max-content); gap: 0 24px; } /* Offre : trois entrées sur une ligne (26/10) */
  .ap-head      { margin-bottom: 40px; }
  .values3-name, .team-more .team-more-lead { font-size: 26px; } /* sous les titres de section (Apelle) */
  .proofs       { margin-top: 56px; }
  .proofs-grid  { grid-template-columns: 1fr; }
  .proof, .proof + .proof { padding: 28px 0; border-left: none; }
  .proof + .proof { border-top: 1px solid var(--line); }
  .team-card h3 { font-size: 22px; }
}

/* OFFRE — tableau des 4 temps : toute l'offre d'un regard, chaque livrable s'ouvre sur place
   (<details name="offre"> natif sans JS, animé par setupOfferAccordion dans anim.js ; option A d'Apelle, choix de Watt, 18/10) */
.offer-table {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 2.5vw, 48px);
  padding-top: 32px; border-top: 1px solid var(--ink);
}
/* rangées alignées d'une colonne à l'autre : numéro, temps, liste */
.offer-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.offer-time { margin: 8px 0 0; font-size: clamp(28px, 2vw, 40px); line-height: 1.1; }
.offer-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.offer-list li { border-bottom: 1px solid var(--line); }
.offer-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  min-height: 44px; box-sizing: border-box; /* cible tactile (parcours du site, Watt, 22/10) */
  padding: 14px 0;
  font-family: var(--serif); font-size: clamp(19px, 1.1vw, 22px); line-height: 1.3; color: var(--ink);
}
.offer-list summary::-webkit-details-marker { display: none; }
.offer-list summary::after {
  content: '+'; flex-shrink: 0;
  font-family: var(--mono); font-size: 16px; color: var(--accent);
  transition: transform .25s ease;
}
.offer-list details[open] summary { color: var(--accent); } /* le livrable ouvert se repère d'un coup d'œil */
.offer-list details[open] summary::after { transform: rotate(45deg); }
/* fermeture animée (setupOfferAccordion, anim.js) : le livrable reste [open] le temps du repli */
.offer-list details.is-closing summary { color: var(--ink); }
.offer-list details.is-closing summary::after { transform: none; }
@media (hover: hover) { .offer-list summary:hover { color: var(--accent); } } /* pas de survol « collé » au toucher (Tenon) */
.offer-list summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.offer-list details p { margin: 0; padding-bottom: 16px; max-width: none; font-size: clamp(15px, 0.85vw, 18px); line-height: 1.5; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .offer-list summary::after { transition: none; } }
/* OFFRE — haut de page : plein écran et centre optique (parenté Approche), titre calé à gauche, dernière ligne en vert (parenté Accueil) ;
   propre à l'Offre : trois lignes voulues (Apelle) ; titre tout en italique, sommaire sous le titre (Watt, 18/10) */
.of-hero-title { margin: 8px 0 0; }
.of-hero-line { display: block; }
.of-hero-accent { color: var(--accent); }
.of-hero-title .split-word { margin-right: 0.04em; }
.of-hero-index { margin-top: 40px; justify-content: flex-start; } /* sommaire sous le titre, calé à gauche */
.of-hero-lede { margin: 32px 0 0; max-width: 34em; font-size: var(--fs-lead); } /* l'offre en une phrase (audit, Apelle, 18/10) */
@media (min-width: 1025px) {
  body.site .section.of-hero { min-height: calc(100svh - var(--nav-h) + 2px); display: flex; flex-direction: column; justify-content: center; padding-block: 48px calc(48px + var(--nav-h) + 6svh); }
  body.site .of-hero > .container { width: 100%; }
  body.site .of-hero-title { font-size: var(--fs-h1); line-height: 1.06; }
  .of-hero-line { white-space: nowrap; }
  .of-hero-index { margin-top: max(48px, calc(0.45 * min(6.4vw, 11svh))); }
}
/* CONTACT — un seul écran (plan d'Apelle, 18/10) : titre calé à gauche comme l'Offre, trois moyens de contact
   en lignes à filet (même grammaire que les livrables de l'Offre), formulaire à droite (Watt, 26/10) */
.ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
.ct-title { margin: 8px 0 0; font-style: italic; font-size: var(--fs-h1); line-height: 1.04; }
.ct-title .split-word { margin-right: 0.04em; }
.ct-lede { margin: 32px 0 0; max-width: 34em; font-size: var(--fs-lead); }
/* Liens directs : trois boutons encadrés à pictos (option B d'Apelle, Watt 26/10 16:03) */
.ct-links { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; max-width: 30rem; }
.ct-row {
  --ct-btn-filet: #8a8476; /* 3:1 sur le papier clair */
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px 10px 14px;
  border: 1px solid var(--ct-btn-filet); color: var(--ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
[data-theme="dark"] .ct-row { --ct-btn-filet: #6b665b; } /* environ 3:1 sur #11100E */
.ct-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ct-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ct-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.ct-v { font-family: var(--serif); font-size: clamp(19px, 1.3vw, 22px); line-height: 1.2; }
a.ct-row::after { content: '→'; flex: none; font-size: 18px; color: var(--accent); transition: transform .25s ease; }
a.ct-row:hover, a.ct-row:focus-visible { background: var(--green); border-color: var(--green); color: var(--cream); }
a.ct-row:hover .ct-k, a.ct-row:focus-visible .ct-k { color: #cfe3dc; }
a.ct-row:hover .ct-ic, a.ct-row:focus-visible .ct-ic { background: rgb(244 239 230 / 0.14); }
a.ct-row:hover .ct-ic svg, a.ct-row:focus-visible .ct-ic svg, a.ct-row:hover::after, a.ct-row:focus-visible::after { stroke: var(--cream); color: var(--cream); }
a.ct-row:hover::after { transform: translateX(4px); }
a.ct-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ct-row { transition: none; } }.ct-steps { margin: 12px 0 0; font-size: clamp(15px, 0.85vw, 18px); color: var(--ink-mute); }
/* Formulaire sur une carte crème, fixe dans les deux modes (« la carte papier », A d'Apelle, Watt 26/10) :
   les couleurs de la carte redéfinissent l'encre localement ; champs à simple filet, deux colonnes, une au téléphone */
.ct-form {
  --ink: #0B0B0A; --ink-mute: #5e5a4f; --accent: #00594D; --ct-hint: #8a8476; --ct-filet: #8a8476; /* filet à 3:1 sur le crème (Apelle) */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px;
  padding: 36px 36px 34px; background: var(--cream); color: var(--ink); color-scheme: light;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
:root:not([data-theme="dark"]) .ct-form { box-shadow: 0 0 0 1px rgb(11 11 10 / 0.14), 0 30px 60px -30px rgb(0 0 0 / 0.25); } /* clair : la carte crème se détache du papier */
.ct-card-head { grid-column: 1 / -1; }
.ct-card-title { margin: 0; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink); }
.ct-card-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.ct-field { display: grid; gap: 6px; align-content: space-between; } /* étiquette sur deux lignes : les champs d'une même rangée restent alignés (Watt) */
.ct-field.is-wide, .ct-submit { grid-column: 1 / -1; }
.ct-field label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.ct-opt { text-transform: none; letter-spacing: 0.04em; opacity: 0.75; }
/* Besoins : cases à cocher sur deux colonnes, une au téléphone */
/* Besoins : liste déroulante à cases (details) ; le résumé se dessine comme les listes à choix */
.ct-multi-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.ct-multi-box { position: relative; min-width: 0; }
.ct-field { min-width: 0; } /* un résumé long se coupe en « … » au lieu d'élargir la carte */
.ct-multi-box summary {
  list-style: none; cursor: pointer; padding: 10px 28px 10px 0; border-bottom: 1px solid var(--ct-filet);
  font-family: var(--sans); font-size: clamp(16px, 0.95vw, 19px); line-height: 1.4; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ct-multi-box summary::-webkit-details-marker { display: none; }
.ct-multi-box summary:focus { outline: none; }
.ct-multi-box summary:focus-visible, .ct-multi-box[open] summary { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.ct-multi-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-multi-value.is-empty { color: var(--ct-hint); }
.ct-choices {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  display: grid; gap: 12px; margin: 0; padding: 16px 18px; min-width: 0;
  border: 1px solid var(--ct-filet); background: var(--cream); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35);
}
.ct-choices label { display: flex; align-items: flex-start; gap: 10px; font-family: var(--sans); font-size: 16px; line-height: 1.35; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.ct-choices input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border: 0; accent-color: var(--accent); cursor: pointer; }
.ct-choices input[type="checkbox"]:focus { box-shadow: none; }
.ct-choices input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-form-note a { color: var(--accent); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%; margin: 0; padding: 10px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--ct-filet);
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: clamp(16px, 0.95vw, 19px); line-height: 1.4; /* 16 px au moins : pas de zoom à la saisie sur iPhone */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-field textarea { resize: vertical; min-height: 7.2em; }
.ct-field ::placeholder { color: var(--ct-hint); opacity: 1; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.ct-field select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ct-field select:has(option[value=""]:checked) { color: var(--ct-hint); } /* « Choisir dans la liste » se lit comme une aide */
.ct-field option { background: var(--cream); color: var(--ink); }
.ct-form .btn { background: var(--green); border-color: var(--green); color: var(--cream); } /* le seul vert de la carte */
.ct-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.ct-form-note { margin: 0; font-size: clamp(15px, 0.85vw, 18px); color: var(--ink-mute); }
.ct-direct-lead { display: none; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ct-field input, .ct-field select, .ct-field textarea { transition: none; } }
@media (max-width: 768px) {
  .ct-form { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; margin-inline: -6px; } /* déborde un peu dans la marge */
  .ct-form .ct-pair { grid-column: auto; } /* site web et téléphone restent sur une ligne (Watt, 26/10) */
  .ct-form:has(.ct-pair) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ct-form > :not(.ct-pair) { grid-column: 1 / -1; }
  .ct-form > .ct-pair ~ :not(.ct-pair) { order: 1; } /* sur téléphone, le site web remonte à côté du téléphone (Watt, 26/10) */
  .ct-submit .btn { width: 100%; justify-content: center; min-height: 48px; } /* à portée du pouce */
}
@media (min-width: 1025px) {
  body.site .section.ct-hero { min-height: calc(100svh - var(--nav-h) + 2px); display: flex; flex-direction: column; justify-content: center; padding-block: 48px calc(48px + var(--nav-h) + 6svh); }
  .ct-title { font-size: var(--fs-h1); line-height: 1.06; }
  body.site .ct-hero > .container { width: 100%; }
  .ct-title .of-hero-line { white-space: normal; text-wrap: balance; } /* « a une histoire à raconter. » revient à la ligne avant la photo */
}
@media (prefers-reduced-motion: reduce) { a.ct-row::after { transition: none; } }
@media (max-width: 1024px) {
  /* une colonne : titre et chapeau, la carte, puis « Ou directement : » et les trois lignes (Apelle) */
  .ct-grid { grid-template-columns: 1fr; row-gap: 0; }
  .ct-main { display: contents; }
  .ct-form { order: 1; margin-top: 40px; }
  .ct-direct-lead { display: inline-flex; justify-self: start; order: 2; margin-top: 48px; }
  .ct-links { order: 3; margin-top: 8px; max-width: none; } /* boutons pleine largeur */
}
/* Offre, Vespère Flow : texte et onglets à gauche, écran de l'app à droite (option A d'Apelle, 26/10).
   Sans JS, les écrans s'empilent ; avec JS (.is-tabs), ils partagent la même case et seul l'actif se voit. */
.flow { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; }
.flow-text h2 { margin: 0 0 24px; }
.flow-text .lede { margin: 0; }
.flow-tabs { margin-top: 40px; border-top: 1px solid var(--line); }
.flow-tabs [role="tab"] { position: relative; display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 16px 0 16px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink-mute); text-align: left; cursor: pointer; }
.flow-tabs [role="tab"]:hover { color: var(--ink); }
.flow-tabs [aria-selected="true"] { color: var(--ink); font-weight: 600; }
.flow-tabs [aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--accent); }
.flow-n { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; }
.flow-tabs [aria-selected="true"] .flow-n { color: var(--accent); }
.flow-note { margin: 24px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); }
.flow-screens { display: grid; gap: 24px; }
.flow-screens.is-tabs { gap: 0; }
.flow-screens.is-tabs .flow-screen { grid-area: 1 / 1; transition: opacity .2s ease, visibility 0s; }
.flow-screens.is-tabs .flow-screen.is-off { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.flow-screen img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(11, 11, 10, .28), 0 2px 6px rgba(11, 11, 10, .06); }
:root[data-theme="dark"] .flow-screen img { border-color: transparent; } /* sombre : le filet gris marquait la coupure avec le fond (Watt, 26/10) */
.flow-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; }
.flow-dialog { width: min(96vw, 1600px, 150vh); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.flow-dialog::backdrop { background: rgba(11, 11, 10, .82); }
.flow-dialog-frame { position: relative; z-index: 1; }
/* Zoom à deux doigts et déplacement gérés par setupFlowTabs ; un clic sur l'image la ferme.
   Image zoomée entière, qui déborde de la fenêtre sur tout l'écran, sans recadrage (Watt, 26/10) */
.flow-dialog-frame img { display: block; width: 100%; height: auto; border-radius: 12px; transform-origin: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-out; }
.flow-dialog-close { position: fixed; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(11, 11, 10, .72); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .flow-screens.is-tabs .flow-screen, .flow-screens.is-tabs .flow-screen.is-off { transition: none; }
}
/* Fenêtre étroite : l'écran passe juste après la phrase, avant les onglets, pour arriver plus tôt au défilement (Watt, 26/10) */
@media (max-width: 1024px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow-text { display: contents; }
  .flow-screens { order: 1; margin-top: 32px; }
  .flow-tabs, .flow-note { order: 2; }
  .flow-tabs { margin-top: 32px; }
}
@media (max-width: 768px) {
  .flow-dialog { width: calc(100vw - 32px); }
}

/* FAQ : trois thèmes, question et réponse sur une même ligne (forme « entretien » d'Apelle, 18/10) */
.faq { border-top: 1px solid var(--ink); }
.faq dl { margin: 0; }
.faq-theme { margin: 56px 0 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.faq-group:first-child .faq-theme { margin-top: 32px; }
.faq-item dt { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 1.7vw, 34px); line-height: 1.2; text-wrap: balance; }
.faq-item dd { margin: 0; font-size: clamp(17px, 0.95vw, 21px); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.stat-l, .ap-cta .lede { text-wrap: pretty; } /* pas de mot seul en fin de paragraphe (Lexis) */
.faq-entretien .faq-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 8.3vw, 160px);
  padding: 28px 0; border-top: 1px solid var(--line);
}
.faq-entretien .faq-item dd { padding-top: 4px; }
/* Question en bouton (setupFaqToggles) : neutre sur grand écran, dépliable sur téléphone (Watt, 23/10) */
.faq-q { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-wrap: inherit; cursor: default; }
@media (max-width: 768px) {
  .faq-q { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; }
  .faq-q::after { content: '+'; flex: none; font-family: var(--mono); font-style: normal; font-size: 18px; color: var(--accent); }
  .faq-item.is-open .faq-q::after { content: '−'; }
  .js .faq-item:not(.is-open) dd { display: none; }
  .faq-entretien .faq-item { padding: 16px 0; }
}
@media (max-width: 1024px) {
  .faq-entretien .faq-item { grid-template-columns: 1fr; row-gap: 10px; }
  .faq-entretien .faq-item dd { max-width: 35em; } /* environ 75 signes par ligne en une colonne (Apelle) */
  .offer-table { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}
@media (max-width: 640px) {
  .offer-table { grid-template-columns: 1fr; }
}

/* ── ACCESSIBILITÉ — lien d'évitement + focus clavier ───────── */
/* Texte lu par les lecteurs d'écran seulement (ex. « 15 fois plus de » pour « ×15 ») */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Lien d'évitement : hors écran tant qu'il n'a pas le focus ;
   au focus, en haut à gauche, au-dessus de la nav et du préchargement. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  padding: 10px 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--accent-soft); outline-offset: 3px; }
#contenu:focus { outline: none; }

/* Focus clavier visible partout ; contour clair sur les fonds verts et sombres.
   Les règles .reel-*:focus-visible de la galerie restent prioritaires. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.section.green :focus-visible,
.section.dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent-soft); }

/* ── PAGES LÉGALES (mentions légales, confidentialité) ─────────────
   Haut de page repris de la 404, puis une colonne de lecture d'environ 68 signes. */
body.site .section.legal-hero { padding-bottom: clamp(48px, 3vw, 72px); }
body.site .section.legal-page { padding-top: 0; padding-bottom: clamp(96px, 5vw, 128px); }
.legal { font-size: clamp(17px, 0.95vw, 21px); max-width: 35em; margin: 0; } /* environ 75 signes par ligne, calée à gauche sous le titre */
.legal-section { padding: clamp(36px, 2.2vw, 56px) 0; border-top: 1px solid var(--line); }
.legal h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 1.6vw, 36px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.6em; }
.legal p { font-size: 1em; line-height: 1.55; max-width: none; margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 0.8em; }
.legal ul { margin: 0; padding-left: 1.2em; }
.legal li { line-height: 1.55; color: var(--ink-soft); }
.legal li + li { margin-top: 0.4em; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal-id { display: grid; grid-template-columns: clamp(200px, 12vw, 300px) minmax(0, 1fr); column-gap: 32px; margin: 0; }
.legal-id dt, .legal-id dd { padding: 12px 0; border-top: 1px solid var(--line-soft); line-height: 1.45; }
.legal-id dt { font-size: clamp(14px, 0.8vw, 18px); color: var(--ink-mute); }
.legal-id dd { margin: 0; color: var(--ink); }
.legal .legal-updated { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: clamp(12px, 0.6vw, 15px); color: var(--ink-mute); }
/* ── GRAND ÉCRAN (> 1600 px) ─────────────────────────────────────
   En fin de fichier pour l'emporter sur les règles de base ; rien ne change jusqu'à 1600 px.
   Les bords suivent --max (80 % de la largeur), comme la nav et .container. */
/* Hero : bloc au centre optique, boutons à l'échelle */
@media (min-width: 1601px) {
  body.site .hero-wide.section.loose { padding-top: 64px; padding-bottom: calc(64px + 8svh); }
  .hero-actions .btn, .hero-actions .btn-link, .cta-actions .btn, .cta-actions .btn-link, .ap-anchors .btn-link { font-size: clamp(12px, 0.6vw, 15px); }
  .hero-actions .btn, .cta-actions .btn { padding: 1.33em 2.33em; }
}
@media (min-width: 1601px) {
  /* Mots fantômes : même bord que le contenu */
  .ghost.bottom-right { right: max(64px, calc((100% - var(--max)) / 2)); }
}

/* ── NAV À L'ÉCHELLE (ordinateur) ───────────────────────────────
   Liens au vrai centre (grille 1fr auto 1fr) ; tailles inchangées jusqu'à 1440 px,
   puis la nav grandit avec le hero jusqu'à ~2500 px. */
@media (min-width: 1025px) {
  body.site .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); padding-block: 0; transition: height .3s; }
  body.site.scrolled .site-nav { height: calc(var(--nav-h) - 16px); padding-block: 0; }
  body.site .site-nav .brand { justify-self: start; font-size: clamp(26px, 1.8vw, 36px); }
  body.site .site-nav ul { gap: clamp(28px, 1.9vw, 40px); }
  body.site .site-nav ul a { font-size: clamp(12px, 0.75vw, 15px); }
  body.site .site-nav .nav-cta { justify-self: end; font-size: clamp(11px, 0.68vw, 14px); padding: max(10px, 0.9em) max(22px, 2em); }
}

/* Galerie, grand écran : cartes plus larges, la dernière visible dépasse franchement le bord */
@media (min-width: 1601px) {
  .reel-card { flex-basis: clamp(288px, 18vw, 340px); }
}
/* Galerie, très grand écran : six cartes remplissent exactement le conteneur, les suivantes défilent */
@media (min-width: 2100px) {
  .reel-card { flex-basis: calc((var(--max) - 5 * var(--reel-gap)) / 6); }
}

/* Chiffres de la publicité, très grand écran : ils suivent l'échelle des titres */
@media (min-width: 2100px) {
  .proof-n { font-size: calc(clamp(104px, 5.2vw, 128px) * 2 / 3); }
}