/* ============================================================
   EDC SPA MANAGEMENT — main.css
   DA validée 2026-05-18 · Mot guide : Présence
   Fraunces (display) + Manrope (body) · Palette terre-chaude
   ============================================================ */

/* ── 1 · Tokens ─────────────────────────────────────────────── */
:root {
  /* Fonds */
  --bg:        #0F0E0C;
  --bg-alt:    #16140F;
  --surface:   #1E1B14;
  --surface-2: #221E16;
  --bg-glass:  rgba(15, 14, 12, 0.82);

  /* Accent */
  --accent:        #B89968;
  --accent-soft:   #8A7350;
  --accent-faint:  rgba(184, 153, 104, 0.08);
  --accent-line:   rgba(184, 153, 104, 0.18);

  /* Texte */
  --text-bright:  #F4EDE2;
  --text-medium:  #A89F92;
  --text-faint:   #6B645A;

  /* Lignes */
  --rule:        #28241E;
  --card-border: #3A3328;  /* +1 cran de chaleur — bordure visible sans crier */

  /* Sémantique */
  --error: #D97A5B;

  /* Typographie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Échelle typo composants — 3 niveaux normalisés pour éviter l'inflation */
  --fs-card-xl: clamp(32px, 4vw, 56px);     /* pilier-5 (notre-approche, page éditoriale) */
  --fs-card-lg: clamp(28px, 3vw, 36px);     /* pilier (home), philo-3 */
  --fs-card-md: clamp(20px, 1.8vw, 24px);   /* ref, module, step, conference, book, testimonial-quote */

  /* Layout */
  --wrap:        1200px;
  --wrap-narrow: 880px;
  /* Hauteur de la nav sticky — soustraite au hero pour que la section
     occupe exactement la fenêtre visible sans dépassement */
  --nav-h:       72px;
  /* Padding vertical des sections — pensé pour que le GAP entre 2 sections
     adjacentes (= padding-bottom de A + padding-top de B) reste premium
     sans devenir un trou visuel. Valeurs calibrées sur les paires les plus
     critiques (lg+lg = ~128-176px de gap, normal+normal = ~96-144px). */
  --section-y:    clamp(48px, 6vw, 80px);   /* défaut — sections normales */
  --section-y-lg: clamp(64px, 7vw, 96px);   /* sections phares — piliers, refs, awards */
  --section-y-md: clamp(32px, 4vw, 56px);   /* transitions — sym, philo, press */

  /* Easing & timings */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --fast:    180ms;
  --med:     280ms;
  --slow:    600ms;

  /* Animations sensorielles (refonte 2026-05-19) — sobre & élégant.
     ease-out : courbe d'entrée qui décélère vite, donne une sensation de "pose".
     ease-soft : sortie sensible, sans rebond ni rappel. */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --anim-sm:   240ms;   /* shake erreur formulaire, micro-feedback */
  --anim-md:   400ms;   /* image fade-in, form success */
  --anim-lg:   800ms;   /* reveal mask/blur, view transition */
  --rise-dist: 36px;    /* translateY pour .r--rise (blocs photo) */
  --lift-dist: 4px;     /* translateY pour hover-lift cards */
}

/* ── 2 · Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Clippe le débordement horizontal du drawer mobile off-canvas (translateX(100%))
     sans créer de conteneur de défilement — préserve la nav sticky. Corrige aussi
     le bandeau cookies fixe dont les boutons sortaient de l'écran sur mobile. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-medium);
  background-color: var(--bg);
  /* Halos atmosphériques (le grain est porté par body::before, voir plus bas,
     pour qu'il s'applique aussi au hero et que la couleur effective soit
     identique partout — pas de couture visible entre sections). */
  background-image:
    radial-gradient(ellipse 110% 55% at 50% 0%, rgba(184, 153, 104, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 100%, rgba(138, 115, 80, 0.035) 0%, transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 900px, 100% 1200px;
  background-position: top center, bottom right;
  background-attachment: scroll, scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* clip (et non hidden) : hidden forcerait overflow-y à « auto », faisant du
     body un conteneur de défilement → casse la nav sticky. clip clippe sans
     créer de scroll container. */
  overflow-x: clip;
}

/* Grain ivoire-chaud appliqué EN OVERLAY FIXED sur tout le viewport
   (au-dessus du hero et des sections de contenu, mais sous la nav sticky
   et le drawer mobile qui doivent rester nets). Garantit que la couleur
   perçue est strictement la même partout — plus de césure entre hero
   et section piliers. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
address { font-style: normal; }

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

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── 2b · View Transitions API (navigation inter-pages native) ─
   Cross-fade sobre du <main> entre les pages. Header et footer
   restent stables (animation: none = sensation de continuité de la
   nav). Aucun morphing nommé sur les titres : tester les deux H1 de
   tailles différentes (124px vs 92px) provoquait un warp brutal.
   Fallback : Firefox / Safari non supportés → navigation classique,
   zéro casse. Chrome/Edge 126+ via HTTP(S) uniquement. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--anim-lg);
  animation-timing-function: var(--ease-out);
}

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}

/* Skip link a11y */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-110%);
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  z-index: 100;
  transition: transform var(--med) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 0;
}

/* ── 3 · Utilitaires layout ─────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

@media (max-width: 768px) {
  .wrap { padding: 0 24px; }
}

/* Images dans les conteneurs media */
.hero__media img,
.pilier__media img,
.ref__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Filtre fin sur les images du site (cohérence chromatique terre-chaude) */
.hero__media img,
.pilier__media img,
.ref__media img {
  filter: saturate(0.92) contrast(1.02);
}

/* Hero : la photo doit se fondre dans la palette */
.hero__media img {
  object-position: center 35%;
  filter: saturate(0.85) contrast(1.05) brightness(0.92);
}

/* Portrait Elodie (pilier 3) — garder le visage visible */
.pilier__media img[src*="elodie"] {
  object-position: center 30%;
}

/* Placeholder photo (fallback dev) */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  position: relative;
  background-color: var(--bg-alt);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(244, 237, 226, 0.025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(244, 237, 226, 0.025) 39px 40px);
}
.img-placeholder::after {
  content: attr(data-photo);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── 4 · Scroll reveal ──────────────────────────────────────── */
.r {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.r.in {
  opacity: 1;
  transform: none;
}

/* Variantes de reveal — héritent du même IntersectionObserver que .r,
   aucun JS additionnel. À combiner avec .r : class="r r--mask". */

/* Opacity seule — pour textes longs où le translateY gêne la lecture */
.r.r--fade {
  transform: none;
  transition: opacity var(--anim-lg) var(--ease-out);
}

/* TranslateY plus large — pour blocs photo et bio-portrait */
.r.r--rise {
  transform: translateY(var(--rise-dist));
  transition: opacity var(--anim-lg) var(--ease-out),
              transform var(--anim-lg) var(--ease-out);
}

/* Rideau clip-path — révèle l'image de haut en bas, sensation cinématique
   (à poser sur le CONTENEUR de l'image, jamais sur l'<img> elle-même) */
.r.r--mask {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--anim-lg) var(--ease-out);
  will-change: clip-path;
}
.r.r--mask.in { clip-path: inset(0); }

/* Blur léger — pour citations Fraunces, accroches éditoriales */
.r.r--blur {
  filter: blur(8px);
  transition: opacity var(--anim-lg) var(--ease-out),
              transform var(--anim-lg) var(--ease-out),
              filter   var(--anim-lg) var(--ease-out);
}
.r.r--blur.in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4b · Hover patterns unifiés ──────────────────────────────
   Trois patterns réutilisables pour couvrir les composants statiques.
   Appliqués DIRECTEMENT sur les sélecteurs existants (pas de pollution
   HTML). Cohérence : tous easent en var(--ease-out), durées calibrées
   pour rester sobres. Aucun :focus pour ne pas piéger la navigation
   clavier — les hovers sont purement visuels au pointeur. */

/* ── A · "lift discret" — cards informatives ─────────────────── */
.result,
.continent,
.coord,
.conference__col,
.book {
  transition: transform var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out),
              background var(--med) var(--ease-out);
  will-change: transform;
}
.result:hover,
.continent:hover,
.coord:hover,
.conference__col:hover,
.book:hover {
  transform: translateY(calc(var(--lift-dist) * -1));
  box-shadow: inset 0 -1px 0 var(--accent-line);
}
/* Variante dense — lift réduit à -2px */
.testimonial {
  transition: transform var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out),
              background var(--med) var(--ease-out);
  will-change: transform;
}
.testimonial:hover {
  transform: translateY(-2px);
}
/* Couverture livre — l'image dans .book s'agrandit légèrement */
.book__cover img {
  transition: transform var(--slow) var(--ease-out);
  will-change: transform;
}
.book:hover .book__cover img { transform: scale(1.03); }

/* ── B · "accent bar" — filet bronze qui se déploie ──────────── */
.parcours__date {
  position: relative;
  display: inline-block;
}
.parcours__date::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--slow) var(--ease-out);
}
.parcours__row:hover .parcours__date::after {
  transform: scaleX(1);
}

/* ── C · "image reveal" — scale léger sur photos ─────────────── */
.team-photos__item,
.bio-portrait__media,
.cred__quote-portrait,
.interlude {
  overflow: hidden;
}
.team-photos__item img,
.bio-portrait__media img,
.cred__quote-portrait img,
.interlude img {
  transition: transform var(--slow) var(--ease-out),
              filter    var(--med)  var(--ease-out);
  will-change: transform;
}
.team-photos__item:hover img,
.interlude:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05) brightness(1);
}
/* Bacquié (home) : garder le N&B au survol pour rester cohérent avec la grille. */
.cred__quote-portrait:hover img {
  transform: scale(1.04);
  filter: grayscale(1);
}
/* Bio-portrait : scale plus discret, le portrait doit rester stable */
.bio-portrait__media:hover img {
  transform: scale(1.02);
  filter: saturate(1) contrast(1.04) brightness(1);
}

/* ── 4c · Parallax (photos de fond uniquement) ────────────────
   JS pose --py via RAF. Aucune animation sans data-parallax.
   Cap dur ±24px côté JS pour rester subtil.
   Le scale(1.08) initial agrandit l'image de 8% pour absorber le
   translate sans révéler le fond `--surface` du conteneur. Sans ce
   scale, le translate ±24px laisse une bande vide en haut ou en bas.
   Réservé aux images `.section__bg` et `.hero__media img` qui sont
   en position absolute / inset 0. À NE PAS poser sur des images
   dans un conteneur à aspect-ratio strict (team-photos, bio-portrait)
   — l'object-fit cover gère mal le translate dans ces cas-là. */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
  transform-origin: center center;
}

/* ── 5 · Typographie commune ────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-feature-settings: "tnum" 1;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-bright);
  text-wrap: balance;
}

.section-head {
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head .eyebrow + .section__title {
  margin-top: 20px;
}
/* Section-head intermédiaire (reprise dans une même section, ex: "Missions réalisées") */
.section-head--reprise {
  margin-top: clamp(64px, 7vw, 96px);
  margin-bottom: 32px;
}

.section-foot {
  margin-top: 56px;
}

/* Mise en accent inline (bronze sans gras supplémentaire) */
.text-accent {
  color: var(--accent);
  font-weight: 400;
}

/* ── 6 · Liens & boutons ────────────────────────────────────── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  padding-bottom: 6px;
  position: relative;
  transition: color var(--med) var(--ease);
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-soft);
  transform-origin: right center;
  transition: background var(--med) var(--ease), transform var(--med) var(--ease);
}
.link-arrow:hover {
  color: var(--text-bright);
}
.link-arrow:hover::after {
  background: var(--text-bright);
  transform-origin: left center;
}
.link-arrow .arr,
.link-arrow .arr-ext {
  display: inline-block;
  transition: transform var(--med) var(--ease);
}
.link-arrow:hover .arr { transform: translateX(6px); }
.link-arrow:hover .arr-ext { transform: translate(4px, -4px); }

.btn {
  display: inline-block;
  padding: 18px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  border: 1px solid var(--accent);
  background: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--med) var(--ease), background var(--med) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--slow) var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: scaleX(1); }

/* Variante primaire — bronze plein au repos, devient outlined au hover.
   Utilisée sur les CTA principaux (hero index, form submit, contact final). */
.btn.btn--primary {
  background: var(--accent);
  color: var(--bg);
}
.btn.btn--primary::before { content: none; }
.btn.btn--primary:hover {
  background: transparent;
  color: var(--accent);
}

/* Variante CTA finale — outlined avec présence renforcée :
   padding généreux, fond bronze translucide au repos, flèche animée,
   hover qui bascule en bronze plein avec scale léger. */
.btn.btn--cta {
  padding: 22px 40px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: rgba(184, 153, 104, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.btn.btn--cta .arr {
  display: inline-block;
  transition: transform var(--med) var(--ease);
  color: var(--accent);
}
.btn.btn--cta:hover .arr {
  transform: translateX(6px);
  color: var(--bg);
}

/* ── 7 · Navigation ─────────────────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-glass);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: site-header;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: 20px;
  padding-bottom: 20px;
  white-space: nowrap;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--text-bright);
  transition: opacity var(--fast);
}
.nav__brand:hover { opacity: 0.78; }
.nav__brand-logo {
  display: block;
  height: 30px;
  width: auto;
}
/* Inline SVG wordmark — uses the page's Fraunces web font (an <img> SVG is
   sandboxed and would fall back to a generic serif). Font-sizes match the
   source artwork's viewBox geometry; the SVG scales to .nav__brand-logo height. */
.nav__brand-logo-edc {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 9, "wght" 400;
  font-size: 43px;
  fill: var(--text-bright);
}
.nav__brand-logo-spa {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 9, "wght" 300;
  font-size: 36px;
  fill: var(--text-faint);
}
.nav__links {
  display: flex;
  gap: 24px;
  margin-left: auto;
  margin-right: 0;
}
.nav__links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-medium);
  position: relative;
  padding: 4px 0;
  transition: color var(--fast);
}
.nav__links a:hover { color: var(--text-bright); }
.nav__links a.on {
  color: var(--accent);
  font-weight: 500;
}
.nav__links a.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
}
.nav__cta.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-faint);
}
.nav__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 11px 22px;
  border: 1px solid var(--rule);
  color: var(--text-bright);
  transition: border-color var(--med), background var(--med);
}
.nav__cta:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
}

/* Switcher de langue FR / EN */
.nav__lang {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-left: 18px;
  padding: 11px 0;
  transition: color var(--fast);
}
.nav__lang:hover { color: var(--text-bright); }
@media (max-width: 1180px) {
  .nav__lang { margin-left: auto; margin-right: 18px; }
}

/* Burger mobile — caché en desktop, révélé en dessous de 1180px (la nav
   complète — marque + 6 liens + switcher EN + CTA — tient sur une ligne dès
   ~1167px ; en dessous on bascule sur le burger). */
.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  position: relative;
  z-index: 62;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-bright);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}
.nav-wrap.nav--open .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-wrap.nav--open .nav__burger span:nth-child(2) {
  opacity: 0;
}
.nav-wrap.nav--open .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* IMPORTANT — .nav-wrap porte backdrop-filter (et view-transition-name) : elle
   devient donc le bloc conteneur de ses descendants position:fixed. Le drawer,
   le scrim et le CTA se calaient sur la boîte de l'en-tête (~90px de haut) au
   lieu du viewport — d'où le menu réduit au coin haut-droit sur mobile.
   Correctif : l'en-tête étant collée en haut, pleine largeur et sans padding,
   ses bords haut/gauche/droite coïncident avec ceux du viewport. On ancre donc
   sur top/left/right et on donne la hauteur en unités viewport (dvh) plutôt que
   d'utiliser bottom:0 — résultat identique que le bloc conteneur soit l'en-tête
   ou le viewport. */

/* Scrim derrière le drawer mobile */
.nav-wrap::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  background: rgba(15, 14, 12, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
  z-index: 55;
}

@media (max-width: 1180px) {
  .nav__burger { display: flex; }

  /* Drawer slide-from-right pour les liens nav */
  .nav__links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(380px, 86vw);
    margin: 0;
    /* Bas généreux : le CTA fixe se pose par-dessus le drawer, on réserve sa
       hauteur pour que le dernier lien reste atteignable sur petit écran. */
    padding: 96px 32px 104px;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transform: translateX(100%);
    transition: transform 360ms var(--ease);
    z-index: 60;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
  }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: "opsz" 72;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--text-bright);
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav__links a.on {
    color: var(--accent);
    font-weight: 400;
  }
  .nav__links a.on::after { display: none; }

  /* CTA Contact rejoint le drawer en bas */
  .nav__cta {
    display: none;
  }
  .nav-wrap.nav--open .nav__cta {
    display: inline-block;
    position: fixed;
    right: 32px;
    /* Même raison que le drawer : on part du haut et on remonte de sa propre
       hauteur + 40px, pour poser le CTA à 40px du bas du viewport. */
    top: 100vh;
    top: 100dvh;
    transform: translateY(calc(-100% - 40px));
    width: calc(min(380px, 86vw) - 64px);
    text-align: center;
    z-index: 61;
  }

  /* Ouverture du drawer */
  .nav-wrap.nav--open .nav__links {
    transform: translateX(0);
  }
  .nav-wrap.nav--open::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bloque le scroll du body quand le drawer est ouvert (géré aussi en JS pour iOS) */
  body.has-drawer-open {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .nav__brand-logo { height: 26px; }
}

/* ── 8 · A · Hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  /* Soustrait la hauteur de la nav sticky pour tenir dans la fenêtre */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  /* 1fr (content centré verticalement) · auto (stats en bas) */
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Assombrissement progressif gauche → droite : la zone du texte (gauche)
       est nettement assombrie sans flou, la photo respire côté droit. */
    linear-gradient(90deg,
      rgba(15, 14, 12, 0.78) 0%,
      rgba(15, 14, 12, 0.68) 25%,
      rgba(15, 14, 12, 0.46) 50%,
      rgba(15, 14, 12, 0.24) 75%,
      rgba(15, 14, 12, 0.14) 100%),
    /* Halo bronze atmosphérique discret côté gauche */
    radial-gradient(ellipse 50% 60% at 28% 50%, rgba(184, 153, 104, 0.05) 0%, transparent 65%),
    /* Gradient vertical multi-stops — fusion seamless vers var(--bg) en bas */
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.22) 0%,
      rgba(15, 14, 12, 0.30) 35%,
      rgba(15, 14, 12, 0.46) 55%,
      rgba(15, 14, 12, 0.70) 75%,
      rgba(15, 14, 12, 0.92) 90%,
      var(--bg) 100%);
  z-index: 2;
}
.hero__content,
.hero__stats {
  position: relative;
  z-index: 3;
}

.hero__content {
  grid-row: 1;
  align-self: center;
  padding-top: clamp(80px, 9vw, 120px);
  padding-bottom: clamp(48px, 6vw, 96px);
  /* Décale le contenu plus à gauche (cohérent avec hero-inner--photo) */
  max-width: none;
  padding-left: clamp(40px, 5.5vw, 104px);
  padding-right: clamp(40px, 5vw, 96px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 8vw, 124px);
  letter-spacing: -0.034em;
  line-height: 1.02;
  color: var(--text-bright);
  margin: 28px 0 36px;
  max-width: 16ch;
  text-wrap: balance;
  /* Détache le titre du fond photo sans assombrir la photo */
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}
.hero__sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-bright);
  max-width: 590px;
  margin-bottom: 44px;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
.hero__cta { margin-top: 4px; }
.hero__cta .link-arrow {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Domaines d'intervention en chips éditoriaux — remplace l'ancien sub-text
   narratif. Chaque chip = un mot-clé SEO isolé, plus scannable, sans
   redondance avec la nav et les stats.
   Desktop : 1 seule ligne. Mobile : wrap multi-lignes. */
.hero__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}
.hero__tags li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  padding: 8px 16px;
  border: 1px solid rgba(244, 237, 226, 0.22);
  background: rgba(15, 14, 12, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .hero__tags {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
}

/* L'eyebrow du hero est sur photo : remonter le contraste (text-medium au lieu
   de text-faint) + text-shadow subtle pour décoller du fond animé. */
.hero .eyebrow {
  color: var(--text-medium);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* Stagger des reveals dans le hero */
.hero .eyebrow.r        { transition-delay: 0.05s; }
.hero__title.r          { transition-delay: 0.18s; }
.hero__sub.r            { transition-delay: 0.30s; }
.hero__cta.r            { transition-delay: 0.42s; }
.hero__stats.r          { transition-delay: 0.55s; }

.hero__stats {
  grid-row: 2;
  padding-top: 28px;
  padding-bottom: clamp(32px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 56px;
  border-top: 1px solid rgba(244, 237, 226, 0.18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero__stats li { white-space: nowrap; }
.hero__stats li + li { position: relative; }
.hero__stats li + li::before {
  content: "·";
  position: absolute;
  left: -32px; top: 0;
  color: var(--accent);
}

@media (max-width: 768px) {
  .hero__title { font-size: clamp(40px, 13vw, 72px); margin: 20px 0 28px; }
  .hero__sub { font-size: 16px; margin-bottom: 36px; }
  .hero__stats { gap: 10px 24px; font-size: 10px; letter-spacing: 0.18em; }
  .hero__stats li + li::before { left: -16px; }
}

/* ── 9 · B · 3 Piliers ──────────────────────────────────────── */
.piliers {
  padding: var(--section-y-lg) 0;
}
.piliers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Stagger entre les 3 cartes */
.piliers__grid > li:nth-child(2) .pilier.r { transition-delay: 0.1s; }
.piliers__grid > li:nth-child(3) .pilier.r { transition-delay: 0.2s; }

.pilier {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  transition: transform var(--slow) var(--ease), border-color var(--med), background var(--med);
}
.pilier::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--accent);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform var(--slow) var(--ease);
}
.pilier:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.pilier:hover::before { transform: scaleY(1); }
.pilier__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pilier__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: 14px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  padding: 32px 32px 0;
  font-variant-numeric: tabular-nums;
}
.pilier__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-lg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-bright);
  margin: 16px 32px 14px;
}
.pilier__line {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-medium);
  margin: 0 32px 24px;
  max-width: 28ch;
}
.pilier__more {
  margin: auto 32px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.pilier__more .arr {
  display: inline-block;
  transition: transform var(--med) var(--ease);
}
.pilier:hover .pilier__more .arr { transform: translateX(5px); }

@media (max-width: 980px) {
  .piliers__grid { grid-template-columns: 1fr; gap: 16px; }
  .piliers__grid > li .pilier.r { transition-delay: 0s; }
}

/* ── 10 · C · Chiffres-clés ─────────────────────────────────── */
.stats {
  padding: var(--section-y) 0;
  position: relative;
  isolation: isolate;
}

/* Variante avec photo en fond : la grille des 4 chiffres apparaît
   directement sur l'image piscine + montagne. Overlay sombre calibré
   pour préserver le contraste du texte ivoire chaud. */
.stats--photo {
  padding: clamp(112px, 13vw, 184px) 0;
  background-color: var(--surface);
  background-image: url('../images/interludes/interlude-piscine-montagne.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.stats--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.72) 0%,
      rgba(15, 14, 12, 0.52) 35%,
      rgba(15, 14, 12, 0.52) 65%,
      rgba(15, 14, 12, 0.78) 100%);
  z-index: -1;
}
/* Sur photo, retirer les rules de grille (peu lisibles sur image)
   et utiliser des séparateurs ivoire-translucides plus contrastés. */
.stats--photo .stats__grid {
  border-top: 0;
  border-bottom: 0;
}
.stats--photo .stat {
  border-right-color: rgba(244, 237, 226, 0.16);
}
.stats__grid {
  display: grid;
  /* 4e cellule plus large pour absorber le chiffre long "+300 000"
     ET son label "personnes nous font confiance" sur une seule ligne */
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--rule);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }

/* Stagger des 4 chiffres */
.stat:nth-child(2).r { transition-delay: 0.08s; }
.stat:nth-child(3).r { transition-delay: 0.16s; }
.stat:nth-child(4).r { transition-delay: 0.24s; }

.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-bright);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Chiffre long (+300 000) — réduit légèrement pour tenir dans la cellule */
.stat--long .stat__num {
  font-size: clamp(40px, 5vw, 80px);
}
/* Label long (« personnes nous font confiance ») — sans bridage de largeur,
   sans wrap : la 4e cellule a déjà 1.4fr pour l'accueillir. */
.stat--long .stat__lbl {
  max-width: none;
  white-space: nowrap;
}
.stat__lbl {
  font-size: 15px;
  color: var(--text-medium);
  max-width: 18ch;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 32px 24px; }
  .stat:first-child { padding-left: 0; }
  .stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .stat:nth-child(3) { border-right: 1px solid var(--rule); padding-left: 0; border-top: 1px solid var(--rule); }
  .stat:nth-child(4) { border-top: 1px solid var(--rule); padding-right: 0; }
}
@media (max-width: 520px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; padding: 28px 0; border-top: 1px solid var(--rule); }
  .stat:first-child { border-top: 0; }
}

/* ── 11 · D · Références visuelles ──────────────────────────── */
.refs-home {
  padding: var(--section-y-lg) 0;
}
.refs-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Stagger en damier sur les références */
.refs-home__grid > li:nth-child(3n+2) .ref.r { transition-delay: 0.08s; }
.refs-home__grid > li:nth-child(3n+3) .ref.r { transition-delay: 0.16s; }
.refs-home__grid > li:nth-child(n+4) .ref.r { transition-delay: 0.20s; }
.refs-home__grid > li:nth-child(n+5) .ref.r { transition-delay: 0.28s; }
.refs-home__grid > li:nth-child(n+6) .ref.r { transition-delay: 0.36s; }

.ref {
  background: var(--surface);
  border: 1px solid var(--card-border);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--slow) var(--ease), border-color var(--med);
}
.ref::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--slow) var(--ease);
}
.ref:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
}
.ref:hover::after { transform: scaleX(1); }
.ref__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ref__body {
  padding: 24px 28px 32px;
}
.ref__loc {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.ref__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-md);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-bright);
  margin-bottom: 12px;
}
.ref__mission {
  font-size: 13px;
  color: var(--text-medium);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .refs-home__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .refs-home__grid { grid-template-columns: 1fr; }
}

/* ── 12 · E · Crédibilité partenaires + Bacquié ─────────────── */
.cred {
  padding: var(--section-y) 0;
}
.cred__quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.cred__quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto 40px;
}
.cred__quote blockquote p {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--text-bright);
  text-wrap: balance;
}
.cred__quote figcaption {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cred__quote-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.cred__quote-role {
  font-size: 13px;
  color: var(--text-faint);
}

/* Variante split — portrait + citation côte à côte (plus humain, moins "aphorisme") */
.cred__quote--split {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  max-width: 980px;
  text-align: left;
  margin: clamp(40px, 5vw, 72px) auto 0;
  align-items: center;
}
.cred__quote--split::before { display: none; }
.cred__quote-portrait {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  background: #fbf9f5;
  border: 1px solid var(--rule);
}
.cred__quote-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.cred__quote--split blockquote p {
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-medium);
  text-align: left;
  text-wrap: pretty;
}
.cred__quote--split figcaption {
  margin-top: 32px;
  text-align: left;
  align-items: flex-start;
  position: relative;
  padding-left: 56px;
}
/* Petit filet bronze horizontal qui précède le nom — ancre visuelle subtile */
.cred__quote--split figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 40px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 768px) {
  .cred__quote--split {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .cred__quote-portrait {
    margin: 0 auto;
    width: 140px;
    height: 140px;
  }
  .cred__quote--split blockquote p { text-align: center; }
  .cred__quote--split figcaption {
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-top: 24px;
  }
  .cred__quote--split figcaption::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ── 13 · F · Presse / Ticker ───────────────────────────────── */
/* ── Grille de grands noms / partenaires — tuiles carrées jointives, fond
   clair, infos au survol. Composant réutilisé (home + page conception). ── */
.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.partner-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.partner-grid__media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.partner-grid__media img {
  filter: grayscale(1);
  transition: filter var(--med) var(--ease-out), transform var(--med) var(--ease-out);
}
.partner-grid__media--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Logos déjà blancs (PNG transparents) : affichés tels quels sur le fond sombre,
   pas d'inversion ni de désaturation. */
.partner-grid__media--logo img { max-width: 82%; max-height: 66%; width: auto; height: auto; object-fit: contain; filter: none; mix-blend-mode: normal; }
.partner-grid__media--mono {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.04em;
  color: #b6ada0;
}
.partner-grid__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 14, 12, 0.55) 55%, rgba(15, 14, 12, 0.92) 100%);
  opacity: 0;
  transition: opacity var(--med) var(--ease-out);
}
.partner-grid__item:hover .partner-grid__veil { opacity: 1; }
.partner-grid__item:hover .partner-grid__media img { transform: scale(1.04); }
.partner-grid__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.15;
  color: #fff;
}
.partner-grid__role {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Sans survol possible (tactile) : infos toujours visibles. */
@media (hover: none) {
  .partner-grid__veil { opacity: 1; }
}

.press {
  padding-top: var(--section-y-md);
  padding-bottom: 0;
}
/* Home : le bandeau suit directement le hero → on resserre le haut (il reste
   sur le fond --bg par défaut, continu avec « Notre expertise » qui suit). */
.hero + .press { padding-top: 0; }
/* Variante « séparateur » compacte (page Elodie) : fond --bg par défaut, comme
   les sections voisines, et hauteur réduite — le bandeau sert de respiration. */
.press--sep { padding-top: 0; padding-bottom: 0; }
.press--sep .ticker { padding: 22px 0; }

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 0;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.ticker__track {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  justify-content: center;
  will-change: transform;
}
/* L'animation ne tourne qu'une fois les listes clonées par JS (setupTicker) :
   sans JS, le bandeau reste lisible (rangée statique centrée). */
.ticker--ready .ticker__track {
  justify-content: flex-start;
  animation: ticker 48s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
/* Le <span> couvre les retombées presse dont l'article n'est plus
   en ligne : le logo reste, sans lien mort. */
.ticker__list a,
.ticker__list li > span { display: flex; align-items: center; }
.ticker__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.ticker__list li {
  white-space: nowrap;
  padding: 0 40px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ticker__list li img {
  height: clamp(24px, 2.6vw, 32px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--med) var(--ease-out);
}
.ticker__list li:hover img { opacity: 0.9; }
.ticker__list li::after {
  content: "·";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-55%);
  color: var(--accent-soft);
  font-size: 18px;
}
/* Triple liste, animation parcourt UNE liste complète (-33.333%) :
   reset invisible car les 2 autres listes garantissent qu'il y a toujours
   du contenu à droite ET à gauche de la zone visible au moment du loop. */
@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker--ready .ticker__track { animation: none; }
}

/* ── 14 · G · Accroche philosophique ────────────────────────── */
.philo {
  padding: var(--section-y-md) 0;
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* Variante avec photo en fond : l'eyebrow + l'accroche apparaissent
   directement sur l'image salon de spa. Overlay calibré pour le texte
   grand format Fraunces qui occupe le centre. */
.philo--photo {
  padding: clamp(140px, 17vw, 224px) 0;
  background-color: var(--surface);
  background-image: url('../images/interludes/interlude-salon-bois.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.philo--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%,
      rgba(15, 14, 12, 0.88) 0%,
      rgba(15, 14, 12, 0.78) 40%,
      rgba(15, 14, 12, 0.65) 75%,
      rgba(15, 14, 12, 0.78) 100%);
  z-index: -1;
}
/* Renforcer la présence du texte centré sur la photo */
.philo--photo .philo__line {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
/* Lien "Notre approche" plus visible sur la photo : padding + bordure douce */
.philo--photo .philo__link .link-arrow {
  padding: 12px 24px;
  border: 1px solid var(--accent-line);
  border-radius: 0;
  background: rgba(15, 14, 12, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.philo--photo .philo__link .link-arrow::after { display: none; }
.philo--photo .philo__link .link-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.philo .eyebrow { display: inline-block; margin-bottom: 48px; }
.philo__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 6.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--text-bright);
  margin-bottom: 56px;
  text-wrap: balance;
}
.philo__link { font-size: 15px; }

/* ── 15 · H · Awards timeline ───────────────────────────────── */
.awards {
  padding: var(--section-y-lg) 0;
}
.awards__line {
  position: relative;
  padding-left: 40px;
  border-top: 1px solid var(--rule);
}
.awards__line::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent-line) 8%,
    var(--accent-line) 92%,
    transparent 100%);
}
.award {
  padding: 32px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  gap: 40px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--med) var(--ease), padding-left var(--med) var(--ease);
}
.award::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 50%;
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1px solid var(--accent-soft);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background var(--med) var(--ease), border-color var(--med), transform var(--med) var(--ease);
}
.award:hover {
  background: linear-gradient(90deg, var(--accent-faint) 0%, transparent 80%);
  padding-left: 12px;
}
.award:hover::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.15);
}
.award__year {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -0.025em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.award__name {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  color: var(--text-bright);
  line-height: 1.4;
}
.awards__foot {
  margin-top: 56px;
  max-width: 720px;
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .awards__line { padding-left: 28px; }
  .awards__line::before { left: 4px; }
  .award { grid-template-columns: 70px 1fr; gap: 16px; padding: 22px 0; }
  .award::before { left: -28px; width: 7px; height: 7px; }
  .award__year { font-size: 26px; }
  .award:hover { padding-left: 8px; }
}

/* ── 16 · I · Sym Biologic ──────────────────────────────────── */
.sym {
  padding: var(--section-y-md) 0;
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* Variante avec photo Sym Biologic en background.
   La photo officielle a un fond bleu qu'on neutralise via filter CSS
   (désaturation + brightness) puis un overlay sombre pour rester dans la
   palette terre-chaude du site. */
.sym--photo {
  padding: clamp(112px, 13vw, 184px) 0;
  background-color: var(--surface);
  overflow: hidden;
}
.sym__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  /* Désature le bleu d'origine, assombrit, ramène vers une dominante chaude */
  filter: saturate(0.32) brightness(0.62) contrast(1.08) sepia(0.18);
}
.sym--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,
      rgba(15, 14, 12, 0.78) 0%,
      rgba(15, 14, 12, 0.62) 50%,
      rgba(15, 14, 12, 0.82) 100%);
  z-index: -1;
}
/* Renforcer la présence du texte centré */
.sym--photo .sym__line {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.sym .eyebrow { display: inline-block; margin-bottom: 32px; }
.sym__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-bright);
  max-width: 720px;
  margin: 0 auto 44px;
  text-wrap: balance;
}
/* Variante « paragraphe long » (Sym sur Notre approche) : corps lisible Manrope,
   aligné à gauche, mesure confortable — au lieu du grand format display. */
.sym__line--para {
  font-family: var(--font-body);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: clamp(16px, 1.4vw, 18px);
  letter-spacing: 0;
  line-height: 1.72;
  color: var(--text-medium);
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: left;
  text-wrap: pretty;
}

/* ── 16a · Section--photo générique (réutilisable) ──────────────
   Pattern photo en background avec overlay sombre — réutilisé sur les pages
   intérieures pour respirer entre les sections texte (équivalent du pattern
   .stats--photo / .philo--photo / .sym--photo de la home, version générique).
   Usage : <section class="section section--photo">
             <img class="section__bg" src="..." alt="..." aria-hidden="true">
             <div class="wrap">...</div>
           </section> */
.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface);
  padding: clamp(112px, 13vw, 184px) 0;
}
.section--photo > .section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  filter: saturate(0.8) contrast(1.04) brightness(0.5);
}
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 95% at 50% 50%,
      rgba(15, 14, 12, 0.88) 0%,
      rgba(15, 14, 12, 0.74) 45%,
      rgba(15, 14, 12, 0.90) 100%);
  z-index: -1;
}
.section--photo > .wrap { position: relative; }
/* Renforcer la présence du texte sur la photo */
.section--photo .section__title,
.section--photo .lead,
.section--photo .philo__line,
.section--photo .sym__line,
.section--photo .eyebrow {
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
}
/* Interludes photo (conception, références) : ligne de transition, pas le grand
   statement de la home → taille réduite, plus adaptée au texte. */
.section--photo .philo__line {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.18;
  margin-bottom: 0;
}

/* Adaptations des cards .results dans une section--photo : on les rend
   semi-transparentes pour laisser deviner la photo derrière, avec backdrop-blur */
.section--photo .results {
  background: transparent;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
.section--photo .result {
  background: rgba(15, 14, 12, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.section--photo .result__num {
  font-size: clamp(40px, 4.2vw, 64px);
  margin-bottom: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  /* Uniformiser visuellement les chiffres : le « +10 ans » ne dépasse plus */
  line-height: 1.05;
  white-space: nowrap;
}
.section--photo .result__line {
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  max-width: none;
  margin: 0;
}

/* Le lead-footnote dans une section--photo s'aligne sur la largeur des cards
   au-dessus (pas de max-width 720px qui le restreindrait à 60% du wrap) */
.section--photo .lead--footnote {
  max-width: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 980px) {
  .section--photo .results {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .section--photo .results {
    grid-template-columns: 1fr;
  }
  .section--photo .result {
    min-height: 0;
  }
}

/* ── 16b · Interludes photo pleine largeur ──────────────────── */
/* Ruptures cinématographiques entre sections texte — articulent la page
   sans changer la couleur de fond. La photo est l'élément narratif,
   pas un fond décoratif. Sans wrap : largeur viewport bord à bord. */
.interlude {
  width: 100%;
  height: clamp(380px, 62vh, 680px);
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.interlude img,
.interlude .img-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
.interlude img {
  object-fit: cover;
  /* Cohérence chromatique avec la palette terre-chaude (idem hero) */
  filter: saturate(0.88) contrast(1.03);
}
.interlude .img-placeholder {
  /* Override le min-height: 200px du placeholder de base */
  min-height: 0;
}
/* Vignette douce haut + bas — intègre la photo à la palette anthracite
   sans noircir le centre (la photo reste l'élément principal) */
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.28) 0%,
      transparent 22%,
      transparent 78%,
      rgba(15, 14, 12, 0.35) 100%);
  pointer-events: none;
}

/* Variantes pour chevauchement éditorial : vignette renforcée
   côté zone de chevauchement, pour que le texte chevauchant reste lisible. */
.interlude--overlap-top::after {
  background:
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.70) 0%,
      rgba(15, 14, 12, 0.40) 12%,
      transparent 32%,
      transparent 78%,
      rgba(15, 14, 12, 0.35) 100%);
}
.interlude--overlap-bottom::after {
  background:
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.28) 0%,
      transparent 22%,
      transparent 60%,
      rgba(15, 14, 12, 0.45) 82%,
      rgba(15, 14, 12, 0.72) 100%);
}

@media (max-width: 768px) {
  .interlude { height: clamp(260px, 48vh, 440px); }
}

/* ── 17 · J · CTA final ─────────────────────────────────────── */
.cta-final {
  padding: clamp(72px, 9vw, 120px) 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  /* Fond surface + halo bronze atmosphérique au top — différencie clairement
     la card du reste de la page, signal de moment terminal premium */
  background:
    radial-gradient(ellipse 55% 65% at 50% 0%,
      rgba(184, 153, 104, 0.08) 0%,
      transparent 70%),
    var(--surface);
}
/* Layout split asymétrique : message à gauche, coordonnées + CTA à droite,
   séparés par une rule verticale. Plus de centré marketing. */
.cta-final__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}

.cta-final__msg .eyebrow {
  display: inline-block;
  margin-bottom: 32px;
}
.cta-final__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--text-bright);
  text-wrap: balance;
}

/* Colonne droite : bouton + coordonnées directes */
.cta-final__contact {
  border-left: 1px solid var(--card-border);
  padding-left: 64px;
  padding-top: 12px;
}
.cta-final__btn-row {
  margin-bottom: 48px;
}

.cta-final__coords {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.cta-final__coords li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cta-final__coord-h {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cta-final__coord-v,
.cta-final__coords a {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-bright);
}
.cta-final__coords a {
  color: var(--accent);
  transition: color var(--med) var(--ease);
}
.cta-final__coords a:hover {
  color: var(--text-bright);
}
.cta-final__coords .arr-ext {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--med) var(--ease);
}
.cta-final__coords a:hover .arr-ext {
  transform: translate(2px, -2px);
}

@media (max-width: 880px) {
  .cta-final__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cta-final__contact {
    border-left: 0;
    border-top: 1px solid var(--card-border);
    padding-left: 0;
    padding-top: 40px;
  }
}

/* ── 18 · Footer ────────────────────────────────────────────── */
.footer {
  background: var(--bg);
  padding: 80px 0 32px;
  font-size: 14px;
  view-transition-name: site-footer;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  margin-bottom: 14px;
}
.footer__tag {
  font-size: 14px;
  color: var(--text-medium);
  line-height: 1.55;
  max-width: 28ch;
  margin-bottom: 24px;
}
.footer__addr {
  color: var(--text-medium);
  line-height: 1.65;
  font-size: 14px;
}
.footer__addr a {
  color: var(--accent);
  transition: color var(--fast);
}
.footer__addr a:hover { color: var(--text-bright); }
.footer__h {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 24px;
}
.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__nav a {
  color: var(--text-medium);
  font-size: 14px;
  transition: color var(--fast);
}
.footer__nav a:hover { color: var(--text-bright); }
.footer__nav .arr-ext {
  color: var(--text-faint);
  margin-left: 4px;
  display: inline-block;
  transition: transform var(--med) var(--ease);
}
.footer__nav a:hover .arr-ext { transform: translate(2px, -2px); color: var(--accent); }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* Variante sans filet (page 404 : footer minimal, pas de colonnes au-dessus) */
.footer__base--bare {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 768px) {
  .footer__cols { grid-template-columns: 1fr; gap: 40px; }
  .footer__base { flex-direction: column; }
}

/* ============================================================
   PAGES INTÉRIEURES — classes partagées
   ============================================================ */

/* ── 19 · Hero intérieur ────────────────────────────────────── */
.hero-inner {
  padding: clamp(140px, 18vw, 220px) 0 clamp(64px, 8vw, 112px);
  border-bottom: 1px solid var(--rule);
  position: relative;
  /* Hauteur FIXE identique pour tous les heros des pages intérieures
     (sauf elodie qui override en height: auto) — homogénéité de navigation,
     le contenu reste centré dans cette zone via flex. */
  height: clamp(680px, 80svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Variante sans bottom padding (ex: elodie-crocilla, hero court qui enchaîne
   directement sur la bio). Padding top réduit, AUCUNE min-height ni centrage
   vertical : le hero se contente du contenu réel + padding-top. */
.hero-inner--flush {
  padding-top: clamp(80px, 9vw, 112px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 0;
  height: auto;
  min-height: 0;
  justify-content: flex-start;
}

/* Variante hero contenant un bio-portrait complet (page Elodie) : l'eyebrow
   et le H1 restent au-dessus du grid bio-portrait, alignés à gauche.
   Le portrait + le body bio occupent la grille en dessous. */
.hero-inner--bio {
  padding-bottom: clamp(72px, 9vw, 120px);
}
.hero-inner--bio .hero-inner__title {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.hero-inner--bio .bio-portrait__body { padding-top: 0; }
.hero-inner--bio .bio-portrait__role { margin-bottom: 28px; }

/* Variante avec photo de fond — pour les hero des pages intérieures qui
   méritent une présence visuelle dès l'arrivée (toutes sauf elodie qui
   reste flush). Pattern inspiré du hero home : spotlight inversé localisé
   sur la zone gauche du texte + fade vertical seamless vers var(--bg). */
.hero-inner--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface);
}
.hero-inner--photo > .section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  /* Assombri pour garantir la lisibilité du texte clair par-dessus, quelle que
     soit la luminosité de la photo. */
  filter: saturate(0.8) contrast(1.04) brightness(0.5);
}
.hero-inner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Assombrissement progressif gauche → droite (le texte vit côté gauche).
       Photo nette partout, texte lisible grâce au contraste sans flou. */
    linear-gradient(90deg,
      rgba(15, 14, 12, 0.82) 0%,
      rgba(15, 14, 12, 0.72) 25%,
      rgba(15, 14, 12, 0.50) 50%,
      rgba(15, 14, 12, 0.28) 75%,
      rgba(15, 14, 12, 0.18) 100%),
    /* Halo bronze atmosphérique discret côté gauche */
    radial-gradient(ellipse 50% 70% at 25% 50%, rgba(184, 153, 104, 0.06) 0%, transparent 65%),
    /* Fade vertical vers var(--bg) en bas — fusion seamless */
    linear-gradient(180deg,
      rgba(15, 14, 12, 0.20) 0%,
      rgba(15, 14, 12, 0.32) 50%,
      rgba(15, 14, 12, 0.62) 80%,
      rgba(15, 14, 12, 0.92) 95%,
      var(--bg) 100%);
  z-index: -1;
}
.hero-inner--photo > .wrap {
  position: relative;
  /* Décale le contenu plus à gauche du viewport — pattern éditorial luxe
     (Aman, Soneva) où le bloc texte se rapproche du bord gauche pour laisser
     la photo respirer côté droit. Annule le centrage du wrap standard. */
  max-width: none;
  padding-left: clamp(40px, 5.5vw, 104px);
  padding-right: clamp(40px, 5vw, 96px);
}
.hero-inner--photo .hero-inner__title,
.hero-inner--photo .hero-inner__sub,
.hero-inner--photo .hero-inner__caption,
.hero-inner--photo .eyebrow {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
}
/* Pas de border-bottom sur hero-inner--photo : le gradient se charge de la
   transition avec la section suivante (pas de couture visible) */
.hero-inner--photo { border-bottom: 0; }
.hero-inner__caption {
  margin-bottom: 28px;
  display: inline-block;
}
/* L'eyebrow des hero-inner est plus lumineux que les eyebrows de sections —
   il sert d'amorce d'arrivée, doit être bien lisible (texte court). */
.hero-inner .eyebrow,
.hero-inner__caption {
  color: var(--text-medium);
  font-size: 13px;
}
.hero-inner--photo .eyebrow,
.hero-inner--photo .hero-inner__caption {
  color: var(--text-bright);
}
.hero-inner__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(40px, 6.5vw, 92px);
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--text-bright);
  margin-bottom: 32px;
  max-width: 18ch;
  text-wrap: balance;
}
/* Variantes de largeur pour H1 longs (citations, titres en 2 lignes) */
.hero-inner__title--quote { max-width: 24ch; }
.hero-inner__title--wide  { max-width: 22ch; }

/* Mise en accent inline dans un H1 (ex: 2e ligne en bronze) */
.hero-inner__title-accent { color: var(--accent); }

.hero-inner__sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-medium);
  max-width: 620px;
  text-wrap: pretty;
}
.hero-inner__sub + .hero-inner__sub { margin-top: 16px; }

@media (max-width: 768px) {
  .hero-inner__title { font-size: clamp(36px, 11vw, 64px); }
  .hero-inner__sub { font-size: 16px; }
}

/* ── 20 · Sections génériques ───────────────────────────────── */
.section {
  padding: var(--section-y) 0;
}
/* Les modificateurs section--alt et section--surface créent une respiration
   visuelle subtile entre sections contiguës sur fond --bg. Le fond --bg-alt
   (#16140F) est assez proche du --bg (#0F0E0C) pour ne pas casser la
   continuité, tout en marquant un changement de registre. */
.section--alt,
.section--surface { background: var(--bg-alt); }

/* Texte d'introduction sous H2 — pas de margin-top négatif fragile :
   on resserre le margin-bottom de section-head quand un .lead suit. */
.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-medium);
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head:has(+ .lead) { margin-bottom: 24px; }
/* Variante utilisée comme "deuxième lead" rapproché du précédent */
.lead--tight {
  margin-top: 24px;
  margin-bottom: 0;
}
/* Variante utilisée en fin de section (footnote sous une grille de résultats) */
.lead--footnote {
  margin-top: 48px;
  margin-bottom: 0;
}

/* ── 21 · Steps list (8 prestations, 7 missions) ────────────── */
.steps {
  display: flex;
  flex-direction: column;
}
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding-left var(--med) var(--ease), background var(--med);
}
.step:first-child { border-top: 1px solid var(--rule); }
.step:hover {
  padding-left: 12px;
  background: linear-gradient(90deg, var(--accent-faint) 0%, transparent 80%);
}
.step__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(28px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step__body {
  max-width: 760px;
}
.step__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-md);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-bright);
  margin-bottom: 12px;
}
.step__line {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-medium);
}

/* Variante sans numéro — utilisée pour les listes de missions non comptables
   (ex: missions internationales de conseil). Le rail vertical reste à gauche
   pour préserver l'identité visuelle "steps", mais sans chiffre. */
.step--unnumbered {
  grid-template-columns: 24px 1fr;
}
.step--unnumbered .step__num {
  align-self: center;
  width: 16px;
  height: 1px;
  background: var(--accent-soft);
  font-size: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .step { grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; }
  .step--unnumbered { grid-template-columns: 16px 1fr; }
  .step__num { font-size: 22px; }
  .step--unnumbered .step__num { font-size: 0; }
  .step__name { font-size: 19px; }
  .step:hover { padding-left: 8px; }
}

/* ── 22 · 5 Piliers (notre-approche) ────────────────────────── */
.piliers-5 {
  display: flex;
  flex-direction: column;
}
.pilier-5 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pilier-5:first-child { border-top: 1px solid var(--rule); }
.pilier-5__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pilier-5__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-card-xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-bright);
  margin-top: 16px;
}
.pilier-5__line {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-medium);
  max-width: 540px;
}

@media (max-width: 880px) {
  .pilier-5 { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .pilier-5__name { font-size: clamp(28px, 8vw, 44px); margin-top: 8px; }
}

/* Ancrage Stanford */
.stanford-anchor {
  margin-top: 56px;
  text-align: center;
}
.stanford-anchor__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: clamp(21px, 2.1vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-bright);
  max-width: 640px;
  margin: 0 auto;
  text-wrap: balance;
}
.stanford-anchor__cert {
  margin: 16px auto 0;
  font-family: var(--font-body);
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── 23 · Philo 3 points ────────────────────────────────────── */
.philo-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.philo-3__item {
  background: var(--bg);
  padding: 56px 40px;
  transition: background var(--med);
}
.philo-3__item:hover { background: var(--surface); }
.philo-3__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-lg);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 24px;
}
.philo-3__line {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-medium);
}

@media (max-width: 880px) {
  .philo-3 { grid-template-columns: 1fr; }
  .philo-3__item { padding: 40px 28px; }
}

/* ── 24 · Modules de formation (6) ──────────────────────────── */
.modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.module {
  background: var(--surface);
  border: 1px solid var(--card-border);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--med), background var(--med);
}
.module::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--slow) var(--ease);
}
.module:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.module:hover::before { transform: scaleY(1); }
.module__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-md);
  letter-spacing: -0.015em;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.module__line {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-medium);
}

@media (max-width: 768px) {
  .modules { grid-template-columns: 1fr; }
  .module { padding: 32px 28px; }
}

/* ── 25 · Résultats chiffrés (gestion-exploitation) ─────────── */
.results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}
.result {
  background: var(--bg);
  padding: 40px 24px;
}
.result__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
  font-variant-numeric: lining-nums tabular-nums;
}
.result__line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-medium);
}

@media (max-width: 900px) {
  .results { grid-template-columns: repeat(2, 1fr); }
  .result { padding: 32px 24px; }
}
@media (max-width: 520px) {
  .results { grid-template-columns: 1fr; }
  .result { padding: 32px 24px; }
}

/* ── 26 · Partners bar (architectes / spas listés) ──────────── */
.partners-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.partners-bar li {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--text-medium);
  transition: color var(--med);
}
.partners-bar li:hover { color: var(--text-bright); }
.partners-bar--small li { font-size: 16px; }

/* ── 27 · Continents (coaching international) ───────────────── */
.continents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}
.continent {
  background: var(--bg);
  padding: 32px 24px;
  text-align: center;
}
.continent__name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.continent__cities {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: 17px;
  color: var(--text-bright);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .continents { grid-template-columns: repeat(2, 1fr); }
}

/* ── 28 · Filtres références ────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.filter-btn {
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-medium);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color var(--med), border-color var(--med), background var(--med);
}
.filter-btn:hover {
  color: var(--text-bright);
  border-color: var(--accent-soft);
}
.filter-btn.on {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.filter-btn__count {
  opacity: 0.6;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* Grille références filtrable (13 cartes) */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.refs-grid > li.is-hidden {
  display: none;
}

@media (max-width: 980px) {
  .refs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .refs-grid { grid-template-columns: 1fr; }
}

/* ── 29 · Témoignages (6) ───────────────────────────────────── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.testimonial {
  background: var(--surface);
  border: 1px solid var(--card-border);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color var(--med),
              transform var(--med) var(--ease-out);
  will-change: transform;
}
.testimonial:hover { border-color: var(--accent-line); }

/* Variante featured — utilisée quand un seul témoignage validé occupe toute la grille
   (placeholders cachés via [hidden] tant que les autres citations ne sont pas validées) */
.testimonial--featured {
  grid-column: 1 / -1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 48px;
}
.testimonial--featured .testimonial__quote {
  font-size: clamp(22px, 2.2vw, 28px);
}
.testimonial--featured .testimonial__author {
  justify-content: center;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}

@media (max-width: 768px) {
  .testimonial--featured { padding: 40px 28px; }
}
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-card-md);
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--text-bright);
  text-wrap: pretty;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.testimonial__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
}
.testimonial__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.testimonial__role {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonial { padding: 32px 28px; }
}

/* Éditorial — témoignages longs en pleine largeur (Références) */
.testimonials--stack {
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin-inline: auto;
}
.testimonials--stack .testimonial {
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 48px 0;
  gap: 26px;
}
.testimonials--stack .testimonial:first-child {
  border-top: none;
  padding-top: 0;
}
.testimonials--stack .testimonial:hover { transform: none; }
.testimonials--stack .testimonial__quote {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.62;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 40;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
.testimonials--stack .testimonial__quote p { margin: 0; }
@media (max-width: 768px) {
  .testimonials--stack .testimonial { padding: 36px 0; }
}

/* ─── Témoignages : roster + lecteur (CSS pur, hauteur = 1 témoignage) ───
   Un sélecteur compact de clients à gauche, le témoignage actif lu à droite.
   Évite la pile pleine hauteur quand les témoignages sont longs. */
.tmoins {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 290px) 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
  margin-top: 4px;
}
.tmoins__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }

.tmoins__roster { display: flex; flex-direction: column; gap: 2px; }
.tmoins__pick {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border-radius: 9px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--fast), background var(--fast);
}
.tmoins__pick:hover { opacity: 0.9; background: var(--surface); }
.tmoins__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--card-border);
  display: grid; place-items: center;
  transition: border-color var(--fast);
}
.tmoins__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmoins__avatar--mono { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.05em; color: var(--text-faint); }
.tmoins__pick-txt { min-width: 0; }
.tmoins__pick-name { display: block; font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 40; font-size: 16px; line-height: 1.2; color: var(--text-bright); }
.tmoins__pick-role { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Panneaux empilés dans une même cellule grid : la scène prend toujours la
   hauteur du témoignage le plus long → aucun décalage au changement de témoin. */
.tmoins__stage { display: grid; min-width: 0; max-width: 60ch; }
.tmoins__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.tmoins__quote {
  margin: 0;
  display: flex; flex-direction: column; gap: 0.85em;
  font-family: var(--font-display); font-weight: 300;
  font-variation-settings: "opsz" 40;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.62; letter-spacing: -0.005em;
  color: var(--text-medium);
}
.tmoins__quote p { margin: 0; }
.tmoins__cite { display: flex; align-items: center; gap: 15px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); font-style: normal; }
.tmoins__cite-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface); border: 1px solid var(--card-border); }
.tmoins__cite-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmoins__cite-txt { min-width: 0; }
.tmoins__cite-name { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-bright); }
.tmoins__cite-role { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--text-faint); }

#tmoin-0:checked ~ .tmoins__roster .tmoins__pick:nth-child(1),
#tmoin-1:checked ~ .tmoins__roster .tmoins__pick:nth-child(2),
#tmoin-2:checked ~ .tmoins__roster .tmoins__pick:nth-child(3),
#tmoin-3:checked ~ .tmoins__roster .tmoins__pick:nth-child(4),
#tmoin-4:checked ~ .tmoins__roster .tmoins__pick:nth-child(5) { opacity: 1; background: var(--accent-faint); }
#tmoin-0:checked ~ .tmoins__roster .tmoins__pick:nth-child(1) .tmoins__pick-name,
#tmoin-1:checked ~ .tmoins__roster .tmoins__pick:nth-child(2) .tmoins__pick-name,
#tmoin-2:checked ~ .tmoins__roster .tmoins__pick:nth-child(3) .tmoins__pick-name,
#tmoin-3:checked ~ .tmoins__roster .tmoins__pick:nth-child(4) .tmoins__pick-name,
#tmoin-4:checked ~ .tmoins__roster .tmoins__pick:nth-child(5) .tmoins__pick-name { color: var(--accent); }
#tmoin-0:checked ~ .tmoins__roster .tmoins__pick:nth-child(1) .tmoins__avatar,
#tmoin-1:checked ~ .tmoins__roster .tmoins__pick:nth-child(2) .tmoins__avatar,
#tmoin-2:checked ~ .tmoins__roster .tmoins__pick:nth-child(3) .tmoins__avatar,
#tmoin-3:checked ~ .tmoins__roster .tmoins__pick:nth-child(4) .tmoins__avatar,
#tmoin-4:checked ~ .tmoins__roster .tmoins__pick:nth-child(5) .tmoins__avatar { border-color: var(--accent); }
#tmoin-0:checked ~ .tmoins__stage .tmoins__panel:nth-child(1),
#tmoin-1:checked ~ .tmoins__stage .tmoins__panel:nth-child(2),
#tmoin-2:checked ~ .tmoins__stage .tmoins__panel:nth-child(3),
#tmoin-3:checked ~ .tmoins__stage .tmoins__panel:nth-child(4),
#tmoin-4:checked ~ .tmoins__stage .tmoins__panel:nth-child(5) { visibility: visible; opacity: 1; animation: tmoinIn 0.5s var(--ease-out) both; }
#tmoin-0:focus-visible ~ .tmoins__roster .tmoins__pick:nth-child(1),
#tmoin-1:focus-visible ~ .tmoins__roster .tmoins__pick:nth-child(2),
#tmoin-2:focus-visible ~ .tmoins__roster .tmoins__pick:nth-child(3),
#tmoin-3:focus-visible ~ .tmoins__roster .tmoins__pick:nth-child(4),
#tmoin-4:focus-visible ~ .tmoins__roster .tmoins__pick:nth-child(5) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* état actif piloté par JS (fiable cross-navigateur) — voir setupTestimonials() */
.tmoins__pick.is-on { opacity: 1; background: var(--accent-faint); }
.tmoins__pick.is-on .tmoins__pick-name { color: var(--accent); }
.tmoins__pick.is-on .tmoins__avatar { border-color: var(--accent); }
.tmoins__panel.is-on { visibility: visible; opacity: 1; animation: tmoinIn 0.5s var(--ease-out) both; }

@keyframes tmoinIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 860px) {
  .tmoins { grid-template-columns: 1fr; gap: 26px; }
  .tmoins__roster { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent; }
  .tmoins__pick { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 10px 12px; min-width: 90px; flex-shrink: 0; }
  .tmoins__pick-role { display: none; }
  .tmoins__pick-name { font-size: 13px; }
  .tmoins__stage { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tmoins__panel { animation: none !important; }
}

/* Référence mise en avant (ex. Yacht privé) — média + texte, avant la grille */
.ref-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.ref-feature__media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.ref-feature__badge {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.ref-feature__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); color: var(--text-bright);
  line-height: 1.15; margin: 8px 0 12px;
}
@media (max-width: 720px) {
  .ref-feature { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; padding-bottom: 40px; }
}

/* ── 30 · Strip « Récompensé par » — logos d'organismes d'awards ── */
.awards-orgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
}
.awards-orgs img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity var(--med) var(--ease-out);
}
.awards-orgs a:hover img,
.awards-orgs img:hover { opacity: 1; }
@media (max-width: 600px) { .awards-orgs img { height: 40px; } }

/* ── 31 · Bio + parcours (elodie-crocilla) ──────────────────── */
.bio-portrait {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.bio-portrait__media {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  overflow: hidden;
}
.bio-portrait__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bio-portrait__body { padding-top: 32px; }
.bio-portrait__role {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.bio-portrait__role span { color: var(--accent); }
.bio-portrait__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-bright);
  border-left: 1px solid var(--accent);
  padding-left: 24px;
  margin-bottom: 40px;
  text-wrap: balance;
}
.bio-portrait__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-medium);
}
.bio-portrait__text + .bio-portrait__text { margin-top: 20px; }

@media (max-width: 880px) {
  .bio-portrait { grid-template-columns: 1fr; gap: 40px; }
  .bio-portrait__media { aspect-ratio: 4 / 3; max-width: 480px; }
}

/* Bio « En quelques mots » — intro éditoriale 2 colonnes : la citation
   accompagne le récit (colonne de gauche en sticky). Sous le hero d'Elodie. */
.bio-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.bio-intro__aside { position: sticky; top: 116px; }
.bio-intro__quote {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  text-wrap: balance;
}
.bio-intro__body {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
.bio-intro__body p {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.72;
  color: var(--text-medium);
}
.bio-intro__body .bio-intro__signoff {
  margin-top: 0.3em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--text-bright);
}
@media (max-width: 860px) {
  .bio-intro { grid-template-columns: 1fr; gap: 26px; }
  .bio-intro__aside { position: static; }
}

/* Parcours (timeline horizontale ou liste 2-cols) */
.parcours {
  display: flex;
  flex-direction: column;
}
.parcours__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 56px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.parcours__row:first-child { border-top: 1px solid var(--rule); }
.parcours__date {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.015em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.parcours__name {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-bright);
}

@media (max-width: 768px) {
  .parcours__row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .parcours__date { font-size: 18px; }
}

/* ── 32 · Livres (auteure) ──────────────────────────────────── */
.books {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.book {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.book__cover {
  width: 180px;
  aspect-ratio: 2 / 3;
  background: var(--surface);
  flex-shrink: 0;
}
.book__cover .img-placeholder { min-height: 0; }
.book__cover picture {
  display: block;
  width: 100%;
  height: 100%;
}
.book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book__body { flex: 1; padding-top: 8px; }
.book__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-md);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.book__line {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-medium);
  margin-bottom: 24px;
}
/* Deux destinations par ouvrage : le site de l'auteure et Amazon. */
.book__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

@media (max-width: 880px) {
  .books { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .book { flex-direction: column; }
  .book__cover { width: 140px; }
}

/* ── 33 · Conférencière + Photo duo/équipe ─────────────────── */
.conference {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.conference__col {
  background: var(--surface);
  padding: 48px 40px;
  border: 1px solid var(--card-border);
}
.conference__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-md);
  letter-spacing: -0.015em;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.conference__line {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-medium);
  margin-bottom: 32px;
}
.conference__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.conference__tag {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--rule);
}

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

/* Photo duo + équipe */
.team-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.team-photos__item {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
}
.team-photos__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .team-photos { grid-template-columns: 1fr; }
}

/* ── 34 · Formulaire contact ────────────────────────────────── */
.form {
  display: grid;
  gap: 28px;
  max-width: 720px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form__label .req { color: var(--accent); }
.form__input,
.form__textarea,
.form__select {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-bright);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  width: 100%;
  transition: border-color var(--med), background var(--med);
}
.form__textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--font-body);
}
.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 48px;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--accent);
  outline: 0;
  background: var(--surface-2);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--text-faint); }

.form__error {
  font-size: 13px;
  color: var(--error);
  display: none;
  margin-top: 4px;
}
.form__group.has-error .form__input,
.form__group.has-error .form__textarea,
.form__group.has-error .form__select {
  border-color: var(--error);
}
.form__group.has-error .form__error { display: block; }

.form__submit {
  margin-top: 16px;
  justify-self: start;
}

.form__success {
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 48px 40px;
  text-align: center;
  /* Le bloc peut s'afficher sous le formulaire resté visible : il lui faut
     de l'air pour ne pas se coller au bouton d'envoi. */
  margin-top: 32px;
}
.form__success h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--text-bright);
  margin-bottom: 16px;
}
.form__success p {
  color: var(--text-medium);
  line-height: 1.6;
}
/* Variante affichée quand aucune messagerie n'a pris la main. */
.form__success--ko { border-color: var(--error); }

/* Repli affiché quand aucun client mail ne s'ouvre. */
.form__success .form__fallback {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--accent-line);
  font-size: 14px;
  color: var(--text-faint);
}
.form__copy {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__copy:hover { color: var(--text-bright); }

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

/* Animations formulaire — shake erreur + reveal success.
   Le shake se déclenche à chaque ajout de la classe .has-error (gérée
   par main.js). Le success utilise la classe .in déjà posée par le JS. */
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
.form__group.has-error .form__input,
.form__group.has-error .form__textarea,
.form__group.has-error .form__select {
  animation: shake-x var(--anim-sm) var(--ease-out) 1;
  border-color: var(--error);
}
.form__group.has-error .form__label { color: var(--accent); }

.form__success {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--anim-md) var(--ease-out),
              transform var(--anim-md) var(--ease-out);
}
.form__success.in {
  opacity: 1;
  transform: scale(1);
}

/* ── 35 · Coordonnées (contact) ─────────────────────────────── */
.coords {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.coord {
  background: var(--bg);
  padding: 56px 40px;
  transition: background var(--med);
}
/* Survol identique à .philo-3__item : changement de fond, pas de lift (le lift
   héritait du groupe .coord/.book et créait un cadre disgracieux). */
.coord:hover { background: var(--surface); transform: none; }
/* « Coordonnées » calquées sur le design philo-3 (Prendre soin / Refuser /
   Durer) : grand titre Fraunces accent + valeur en corps lisible. */
.coord__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-card-lg);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 16px;
}
.coord__h {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.coord__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-medium);
}
.coord__body a { color: var(--text-bright); transition: color var(--med); }
.coord__body a:hover { color: var(--accent); }
.coords--2 { grid-template-columns: repeat(2, 1fr); }
.coord__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 20px;
  color: var(--text-faint);
}
.coord__icon svg { width: 100%; height: 100%; display: block; }

@media (max-width: 768px) {
  .coords,
  .coords--2 { grid-template-columns: 1fr; }
}

/* ── 35b · Awards Gallery (carousel scroll horizontal) ────────── */
/* Scroll horizontal manuel avec scroll-snap pour montrer plus d'images
   sans prendre plus de hauteur/largeur. Fade aux bords via mask gradient. */
.awards-gallery {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.awards-gallery::-webkit-scrollbar { height: 6px; }
.awards-gallery::-webkit-scrollbar-track { background: transparent; }
.awards-gallery::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 3px; }
.awards-gallery::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.awards-gallery li {
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 360px);
  scroll-snap-align: start;
  margin: 0;
}
.awards-gallery figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--card-border);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.awards-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--slow) var(--ease), filter var(--med) var(--ease);
  filter: saturate(0.92) contrast(1.02);
}
.awards-gallery figure:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05);
}
.awards-gallery figcaption {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  flex: 1;
}
/* Dates retirées de la galerie photos (années sans cliché : 2023/2025).
   La légende mène désormais sur l'intitulé de la distinction, ancrée par un accent bronze. */
.awards-gallery__year { display: none; }
.awards-gallery figcaption::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.awards-gallery__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-bright);
}

@media (max-width: 640px) {
  .awards-gallery li { width: 78vw; }
}

/* ── 36 · Awards 30 — timeline par année (elodie-crocilla) ──── */
.awards-tl {
  border-top: 1px solid var(--rule);
}
.awards-tl__row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.awards-tl__year {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.awards-tl__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.awards-tl__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.awards-tl__what {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-bright);
}
.awards-tl__org {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .awards-tl__row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .awards-tl__year { font-size: 34px; }
}

/* ── 37 · 404 ──────────────────────────────────────────────── */
.notfound {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  text-align: center;
}
.notfound__inner {
  width: 100%;
  padding: 80px 0;
}
.notfound__code {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(96px, 18vw, 240px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 32px;
}
.notfound__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--text-bright);
  letter-spacing: -0.018em;
  margin-bottom: 40px;
  text-wrap: balance;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.notfound__cta { margin-top: 16px; }

/* ── 38 · prefers-reduced-motion — bloc consolidé final ────────
   Override de tous les nouveaux composants animés ajoutés par la
   refonte 2026-05-19. Le bloc historique (section 4) reste actif ;
   ce bloc-ci le complète pour les hovers, le parallax, les view
   transitions, le shake formulaire, et toutes les variantes .r--*. */
@media (prefers-reduced-motion: reduce) {
  /* Reveals étendus — tous neutralisés */
  .r--fade,
  .r--rise,
  .r--mask,
  .r--blur,
  .r--mask.in,
  .r--blur.in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Hover patterns A/B/C — pas de transform, durée nulle */
  .result, .continent, .coord, .conference__col, .book,
  .testimonial,
  .result:hover, .continent:hover, .coord:hover,
  .conference__col:hover, .book:hover,
  .testimonial:hover,
  .team-photos__item img, .bio-portrait__media img,
  .cred__quote-portrait img, .interlude img,
  .team-photos__item:hover img, .bio-portrait__media:hover img,
  .cred__quote-portrait:hover img, .interlude:hover img,
  .book__cover img, .book:hover .book__cover img {
    transform: none !important;
    transition: none !important;
  }
  .parcours__date::after { display: none !important; }

  /* Parallax — neutralisé (double ceinture, JS bail early aussi) */
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }

  /* Form shake + success — annulés */
  .form__group.has-error .form__input,
  .form__group.has-error .form__textarea,
  .form__group.has-error .form__select { animation: none !important; }
  .form__success,
  .form__success.in {
    transform: none !important;
    transition: none !important;
  }

  /* View Transitions — désactivées sur toutes les zones nommées */
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer) { animation: none !important; }
}

/* ============================================================
   16 · Bandeau cookies (cookies.js)
   ============================================================ */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border-top: 1px solid var(--card-border);
  /* Marge basse augmentée de la safe-area iOS (barre gestuelle) */
  padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-soft);
}
#cookie-banner.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner__text {
  flex: 1 1 360px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-medium);
  margin: 0;
}
.cookie-banner__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__text a:hover { color: var(--text-bright); }

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px;
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cookie-banner__btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.cookie-banner__btn--accept {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.cookie-banner__btn--accept:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  /* En colonne, l'axe principal devient la hauteur : sans ce reset, le
     flex-basis de 360px du paragraphe s'applique en HAUTEUR et étirait le
     bandeau sur la moitié de l'écran (texte en haut, boutons tout en bas). */
  .cookie-banner__text {
    flex: 0 1 auto;
  }
  .cookie-banner__btn {
    flex: 1;
  }
}