/*
Theme Name: PostureConseil 2026
Theme URI: https://www.postureconseil.fr/
Author: PostureConseil
Description: Refonte 2026 : concept « Strates » (aquarelles animées), parcours « Confier une recherche » et « Avant-première ». Les contenus restent gérés par les blocs ACF existants.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: postureconseil-2026
*/

/* ==========================================================================
   PostureConseil — maquette de refonte (02/10/2026)
   Concept « Strates » : les aquarelles de la marque deviennent vivantes.
   Contrastes vérifiés WCAG AA (voir commentaires des tokens).
   ========================================================================== */

:root {
  /* Palette de marque */
  --paper: #FBF8F3;        /* fond papier chaud */
  --paper-2: #F4EEE5;      /* section sable clair */
  --white: #FFFFFF;
  --ink: #091C37;          /* marine : 16:1 sur papier */
  --ink-2: #102848;
  --ink-soft: #4B5B70;     /* texte secondaire : 6,4:1 sur papier */
  --line: rgba(9, 28, 55, .12);
  --line-strong: rgba(9, 28, 55, .22);
  --teal: #268C96;         /* décoratif / grands textes */
  --teal-ink: #1F7880;     /* texte turquoise : 4,9:1 sur papier ; blanc dessus : 5,2:1 */
  --teal-light: #7FD1D8;   /* turquoise sur marine : 9,7:1 */
  --coral: #E95F2A;        /* boutons : texte marine dessus = 5:1 (blanc = 3,4:1, refusé) */
  --coral-deep: #C94A1C;   /* erreurs, texte corail : blanc dessus = 4,7:1 */
  --sand: #FBC68E;         /* sable sur marine : 11:1 */
  --sand-soft: #FDE7CF;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-brand: "El Messiri", Georgia, serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --ribbon-h: 34px;

  --shadow-s: 0 1px 2px rgba(9, 28, 55, .06), 0 4px 14px rgba(9, 28, 55, .06);
  --shadow-m: 0 2px 6px rgba(9, 28, 55, .06), 0 18px 40px -12px rgba(9, 28, 55, .22);
  --shadow-l: 0 30px 80px -24px rgba(9, 28, 55, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.035  0 0 0 0 0.11  0 0 0 0 0.215  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
[hidden] { display: none !important; } /* l'attribut hidden doit toujours l'emporter */
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; }
sup { font-size: .5em; vertical-align: super; line-height: 0; }

:focus-visible { outline: 2.5px solid var(--teal-ink); outline-offset: 3px; border-radius: 6px; }
.avant :focus-visible, .site-footer :focus-visible, .menu-mobile :focus-visible { outline-color: var(--teal-light); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 12px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Accents typographiques : l'italique serif ponctue les titres */
.section-title em, .hero-title em, .avant em, .brief-q em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ---------- Bandeau de maquette ---------- */
.proto-ribbon {
  height: var(--ribbon-h);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 16px;
  background: var(--ink); color: var(--sand);
  font-size: 12.5px; letter-spacing: .02em; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.proto-ribbon span:last-child { color: rgba(255, 255, 255, .78); }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--white);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--pill);
  background: var(--bg); color: var(--fg);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .35s;
}
.btn::after { /* remplissage qui balaie au survol */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill, var(--ink));
  transform: translateY(101%); border-radius: inherit;
  transition: transform .55s var(--ease-out);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--fg-hover, var(--white)); }
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-coral { --bg: var(--coral); --fg: var(--ink); --fill: var(--ink); --fg-hover: var(--white); }
.btn-sand { --bg: var(--sand); --fg: var(--ink); --fill: var(--white); --fg-hover: var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--ink); --fill: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-outline-light { --bg: transparent; --fg: var(--white); --fill: var(--white); --fg-hover: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }

.btn-text {
  background: none; border: 0; padding: 10px 4px; color: var(--ink-soft); font-weight: 500; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.btn-text:hover { color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; text-decoration: none; color: var(--teal-ink);
}
.link-arrow span { transition: transform .4s var(--ease-out); }
.link-arrow:hover span { transform: translateX(5px); }
.link-light { color: var(--teal-light); }
/* « Débloquer toutes les offres » : bouton qui a l'allure d'un lien ; le cadenas s'ouvre au survol */
button.link-arrow { background: none; border: 0; padding: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.link-unlock .lock { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.link-unlock .lock-shackle { transform-box: view-box; transform-origin: 16px 11px; transition: transform .5s var(--ease-out); }
.link-unlock:hover .lock-shackle, .link-unlock:focus-visible .lock-shackle { transform: translateY(-3px) rotate(18deg); }
@media (prefers-reduced-motion: reduce) { .link-unlock .lock-shackle { transition: none; } }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink);
  margin-bottom: 22px;
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: currentColor; }
.kicker-light { color: var(--teal-light); }

.section-title {
  font-size: clamp(2.2rem, 4.6vw, 4.1rem);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 640;
  max-width: 15em;
}
.section-title em { color: var(--teal-ink); }
.section-lead { margin-top: 22px; max-width: 34em; color: var(--ink-soft); font-size: 18px; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  transition: transform .6s var(--ease-out), background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.site-header.is-scrolled {
  background: rgba(251, 248, 243, .78);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 44px; height: 44px; border-radius: 6px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-brand); font-weight: 600; font-size: 25px; letter-spacing: -.01em; }
.brand-name sup { font-family: var(--font-sans); font-size: 9px; margin-left: 1px; vertical-align: 1.4em; }
.brand-tag { font-size: 12px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; background: none;
  border-radius: var(--pill); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink);
}
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px;
  background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.nav-link:hover::after, .nav-link.is-current::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-trigger .chev { width: 12px; height: 12px; margin-right: -2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Rubrique = lien vers sa page + flèche qui ouvre les autres pages (survol à la souris, clic ou clavier) */
.nav-item[data-dropdown] { display: flex; align-items: center; }
.nav-main { padding-right: 3px; }
.nav-main::after { right: 3px; }
.nav-item.is-open > .nav-main::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: inline-grid; place-items: center; width: 26px; height: 34px; margin-left: -1px; padding: 0; border: 0; border-radius: var(--pill); background: none; color: var(--ink); cursor: pointer; }
.nav-toggle .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 5; width: 430px; padding: 10px; display: grid; gap: 2px;
  border-radius: 24px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-l), 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform-origin: 30px 0;
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* pont de survol */
.np-link { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 16px; text-decoration: none; transition: background-color .3s; }
.np-link:hover, .np-link:focus-visible, .np-link[aria-current="page"] { background: var(--paper-2); }
.np-art { width: 52px; height: 52px; border-radius: 50%; background: var(--art) var(--pos, 50% 50%) / cover; box-shadow: inset 0 0 0 1px rgba(9, 28, 55, .08); transition: transform .7s var(--ease-out); }
.np-link:hover .np-art { transform: scale(1.08) rotate(-8deg); }
.np-title { display: block; font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.np-desc { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.header-ctas { display: flex; gap: 10px; }

.burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--ink); position: relative;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--white); border-radius: 2px;
  transition: transform .45s var(--ease-out), top .45s var(--ease-out);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink); color: var(--white);
  padding: calc(var(--header-h) + var(--ribbon-h) + 28px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; gap: 36px; }
.menu-mobile nav a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mm-main { font-size: clamp(1.8rem, 8vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.25; padding: 6px 0; }
.mm-group { margin-top: 18px; padding-bottom: 6px; font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.mm-sub { padding: 9px 0; font-size: 19px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.mm-main + .mm-sub { margin-top: 2px; }
.menu-mobile nav .mm-sub { padding-left: 16px; }
.mm-sub + .mm-main { margin-top: 14px; }
.mm-sub[aria-current="page"], .mm-main[aria-current="page"] { color: var(--sand); }
.menu-mobile-ctas { display: grid; gap: 12px; }
.menu-mobile-ctas .btn { width: 100%; white-space: normal; text-align: center; }
body.menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .brand { color: var(--white); }
body.menu-open .brand-tag { color: rgba(255, 255, 255, .7); }
body.menu-open .burger { background: var(--white); }
body.menu-open .burger span { background: var(--ink); }

/* ---------- Héros ---------- */
.hero { position: relative; overflow-x: clip; padding-block: clamp(28px, 5vh, 64px) clamp(88px, 12vh, 120px); }
.hero-grid {
  min-height: calc(100svh - var(--header-h) - var(--ribbon-h) - 120px);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero-title { font-weight: 640; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink);
}
.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 0 rgba(233, 95, 42, .5); animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(233, 95, 42, .45); } 80%, 100% { box-shadow: 0 0 0 12px rgba(233, 95, 42, 0); } }

.statement { display: block; font-size: clamp(2.7rem, 5.1vw, 5.6rem); line-height: 1; letter-spacing: -.045em; }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-in { display: inline-block; position: relative; }
.line-accent { padding-top: .04em; }
.line-accent em { color: var(--teal-ink); font-size: 1.12em; letter-spacing: -.02em; }
.underline {
  position: absolute; left: 0; right: .1em; bottom: .06em; height: .09em; border-radius: 99px;
  background: var(--coral); transform-origin: left;
}
.hero-lead { margin-top: 28px; max-width: 31em; font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ink-soft); }

.doors { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; }
.door {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: 158px; padding: 22px 64px 22px 24px;
  border: 0; border-radius: 22px;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.door::before { /* reflet qui traverse au survol */
  content: ""; position: absolute; inset: -40% -60%; z-index: -1;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform 1.1s var(--ease-out);
}
.door:hover::before { transform: translateX(60%); }
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.door-client { background: var(--coral); color: var(--ink); }
.door-cand { background: var(--ink); color: var(--white); }
.door-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.door-cand .door-kicker { color: var(--sand); opacity: 1; }
.door-title { margin-top: 10px; font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.door-meta { margin-top: auto; padding-top: 14px; font-size: 13.5px; opacity: .82; }
.door-arrow {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; transition: transform .6s var(--ease-out), background-color .4s;
}
.door-client .door-arrow { background: rgba(9, 28, 55, .1); }
.door-cand .door-arrow { background: rgba(255, 255, 255, .12); }
.door-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.door:hover .door-arrow { transform: translateX(3px) rotate(-45deg); }

.hero-visual { position: relative; justify-self: center; width: min(100%, 560px); }
.orb { position: relative; width: 100%; aspect-ratio: 1; touch-action: pan-y; }
.orb-canvas, .orb-fallback { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.orb-fallback { object-fit: cover; object-position: 50% 50%; }
.orb.has-gl .orb-fallback { opacity: 0; }
.orb::after { /* ombre portée : le disque « flotte » au-dessus du papier */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -7%; height: 12%;
  background: radial-gradient(closest-side, rgba(9, 28, 55, .28), transparent); filter: blur(10px); z-index: -1;
}
.orbit { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; pointer-events: none; }
.orbit-ring { fill: none; stroke: rgba(9, 28, 55, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbit-scan {
  fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 110 1750; transform-origin: 300px 300px; animation: spin 9s linear infinite;
}
.orbit-dots { transform-origin: 300px 300px; animation: spin 120s linear infinite; }
.orbit-dots circle { fill: var(--ink); opacity: .28; }
.orbit-dots .is-key { fill: var(--coral); opacity: 1; }
.orbit-dots .is-key-halo { fill: var(--coral); opacity: .22; transform-box: fill-box; transform-origin: center; animation: halo 2.6s var(--ease-out) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes halo { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.6); opacity: 0; } }

.live-card {
  position: absolute; left: -6%; bottom: 4%; z-index: 2;
  display: grid; gap: 2px; min-width: 268px; max-width: 360px; padding: 14px 18px 15px;
  border-radius: 18px; background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-m);
}
.live-head { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: ping 2s var(--ease-out) infinite; }
.live-viewport { display: block; height: 1.45em; overflow: hidden; font-size: 16.5px; font-weight: 640; letter-spacing: -.015em; }
.live-title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.live-meta { font-size: 13px; color: var(--ink-soft); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.scroll-cue-line { width: 1.5px; height: 44px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue-line::after {
  content: ""; position: absolute; inset: 0; background: var(--coral);
  transform: translateY(-100%); animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* Masquage avant l'intro (retiré par le JS ou par le filet de sécurité) */
.js .site-header, .js .hero-eyebrow, .js .line-in, .js .hero-lead, .js .door, .js .live-card, .js .orb, .js .scroll-cue { opacity: 0; }

/* ---------- Missions en cours ---------- */
.missions { border-block: 1px solid var(--line); padding-block: 22px 26px; background: rgba(255, 255, 255, .35); }
.missions-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--ink-soft); }
.missions-head strong { color: var(--ink); font-weight: 650; }
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2BA36B; margin-right: 10px; vertical-align: 1px; animation: ping-green 2.2s var(--ease-out) infinite; }
@keyframes ping-green { 0% { box-shadow: 0 0 0 0 rgba(43, 163, 107, .45); } 80%, 100% { box-shadow: 0 0 0 10px rgba(43, 163, 107, 0); } }
.marquee { margin-top: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-item { display: inline-flex; align-items: baseline; gap: 14px; padding-right: 38px; white-space: nowrap; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; letter-spacing: -.025em; }
.marquee-item small { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-soft); }
.marquee-item::after { content: "✦"; font-size: 15px; color: var(--coral); align-self: center; margin-left: 24px; }

/* ---------- Manifeste ---------- */
.manifesto { padding-block: clamp(110px, 16vw, 200px) clamp(90px, 12vw, 150px); }
.manifesto-text {
  font-size: clamp(1.85rem, 3.7vw, 3.5rem); line-height: 1.16; letter-spacing: -.03em; font-weight: 450;
  max-width: 22em;
}
.manifesto-text .word { display: inline-block; }
.values { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.values li { position: relative; padding-top: 26px; }
.value-line { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--ink); transform-origin: left; }
.value-num { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--teal-ink); }
.values h3 { margin-top: 6px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.values p { margin-top: 8px; font-size: 15.5px; color: var(--ink-soft); }

/* ---------- Expertises ---------- */
.expertises { padding-block: clamp(90px, 11vw, 150px); background: var(--paper-2); }
.section-head { margin-bottom: clamp(44px, 6vw, 72px); }
.panels { display: flex; gap: 14px; height: clamp(500px, 62vh, 600px); }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-l);
  color: var(--white); cursor: pointer; outline-offset: 4px;
  transition: flex-grow .9s var(--ease-out), box-shadow .6s var(--ease-out);
}
.panel.is-active { flex-grow: 3.3; box-shadow: var(--shadow-l); }
.panel-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18); transition: transform 1.6s var(--ease-out);
}
.panel.is-active .panel-art { transform: scale(1.02); }
.panel-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 28, 55, .92) 0%, rgba(9, 28, 55, .55) 42%, rgba(9, 28, 55, .08) 75%);
  transition: opacity .6s;
}
.panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 26px 28px; }
.panel-num { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--sand); }
.panel-title { margin-top: 4px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; max-width: 14em; }
.t-short { display: none; }
.panel:not(.is-active) .t-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel:not(.is-active) .t-short { display: inline; }
.panel-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-out); }
.panel-more > * { min-height: 0; }
.panel-more-in { overflow: hidden; min-height: 0; }
.panel.is-active .panel-more { grid-template-rows: 1fr; }
.panel-more p, .panel-more .tags, .panel-more .panel-link { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s var(--ease-out); }
.panel.is-active .panel-more p, .panel.is-active .panel-more .tags, .panel.is-active .panel-more .panel-link { opacity: 1; transform: none; transition-delay: .25s; }
.panel-more p { margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, .88); max-width: 30em; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tags li { padding: 5px 11px; border-radius: var(--pill); font-size: 12.5px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); white-space: nowrap; }
.panel-link { display: inline-flex; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 15px; color: var(--sand); text-decoration: none; }
.panel-link span { transition: transform .4s var(--ease-out); }
.panel-link:hover span { transform: translateX(5px); }

/* ---------- Méthode ---------- */
.method { position: relative; background: var(--paper); overflow-x: clip; } /* la frise (≈ 2 700 px) ne doit jamais élargir la page */
.method-pin { padding-block: clamp(90px, 10vw, 130px); }
.method-head { margin-bottom: 40px; }
.method-track { position: relative; padding-left: max(var(--gutter), (100vw - var(--container)) / 2); width: max-content; }
.method-wave { position: absolute; left: 0; top: 0; width: 100%; height: 110px; overflow: visible; }
.wave-base { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 7; }
.wave-progress { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; }
.wave-dot { fill: var(--coral); stroke: var(--paper); stroke-width: 4; }
.steps { display: flex; gap: 26px; padding-top: 120px; padding-right: max(var(--gutter), (100vw - var(--container)) / 2); }
.step {
  position: relative; width: 340px; flex: none; padding: 30px 30px 32px; border-radius: var(--radius-l);
  background: var(--white); border: 1px solid var(--line);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color .5s;
}
.step::before { /* ancre vers la vague */
  content: ""; position: absolute; left: 32px; top: -58px; width: 1.5px; height: 58px;
  background: linear-gradient(var(--line-strong), transparent);
}
.step.is-current { transform: translateY(-10px); box-shadow: var(--shadow-m); border-color: transparent; }
.step-num { font-family: var(--font-serif); font-style: italic; font-size: 54px; line-height: 1; color: var(--teal); transition: color .5s; }
.step.is-current .step-num { color: var(--coral); }
.step h3 { margin-top: 18px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.step p { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }
.method-foot { margin-top: 40px; display: flex; align-items: center; gap: 22px; }
.method-progress { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.method-progress span { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.method-count { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-soft); }
.method-count span { color: var(--ink); font-weight: 650; }

/* ---------- Candidats ---------- */
.avant { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: clamp(100px, 13vw, 170px); }
.avant-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 82% 46%, rgba(38, 140, 150, .38), transparent 70%),
    radial-gradient(28vw 28vw at 92% 84%, rgba(233, 95, 42, .26), transparent 70%),
    radial-gradient(30vw 30vw at 8% 0%, rgba(251, 198, 142, .08), transparent 70%);
}
.avant-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.avant .section-title { color: var(--white); max-width: 13em; }
.avant .section-title em { color: var(--sand); }
.avant-lead { margin-top: 24px; font-size: 18.5px; color: rgba(255, 255, 255, .8); max-width: 32em; }
.avant-steps { margin-top: 40px; display: grid; gap: 22px; }
.avant-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.avant-step-num {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(251, 198, 142, .55); color: var(--sand); font-family: var(--font-serif); font-style: italic; font-size: 21px;
}
.avant-steps strong { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.avant-steps div > span { display: block; color: rgba(255, 255, 255, .72); font-size: 15.5px; margin-top: 2px; }
.avant-ctas { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.reassure { margin-top: 18px; font-size: 13.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .62); }

.avant-visual { position: relative; display: grid; place-items: center; min-height: 640px; }
.rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rings span { position: absolute; border-radius: 50%; border: 1px solid rgba(127, 209, 216, .16); animation: breathe 6s var(--ease-io) infinite; }
.rings span:nth-child(1) { width: 420px; height: 420px; }
.rings span:nth-child(2) { width: 560px; height: 560px; animation-delay: -2s; border-color: rgba(127, 209, 216, .1); }
.rings span:nth-child(3) { width: 700px; height: 700px; animation-delay: -4s; border-color: rgba(127, 209, 216, .06); }
@keyframes breathe { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }

.phone {
  position: relative; width: 300px; height: 620px; border-radius: 52px; padding: 11px;
  background: linear-gradient(145deg, #1d2f4b, #030b17 60%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14) inset, 0 50px 100px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4);
}
.phone-screen {
  position: relative; height: 100%; border-radius: 42px; overflow: hidden; color: var(--white);
  background: var(--ink-2) 40% 50% / cover;
}
.is-near .phone-screen, html:not(.js) .phone-screen { background-image: url("assets/art-d1dba32e.jpg"); }
.phone-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(3, 11, 23, .25), rgba(3, 11, 23, .55)); }
.phone-island { position: absolute; top: 12px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 2; }
.phone-time { position: relative; margin-top: 64px; text-align: center; font-size: 66px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.phone-date { position: relative; text-align: center; margin-top: 8px; font-size: 16px; font-weight: 500; opacity: .9; }
.notifs { position: absolute; left: 12px; right: 12px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.notif {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 11px 12px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
}
.notif img { width: 36px; height: 36px; border-radius: 9px; }
.notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .02em; opacity: .78; white-space: nowrap; }
.notif-top span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sand); opacity: 1; }
.notif-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-body { font-size: 12.5px; line-height: 1.35; opacity: .9; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Entreprises ---------- */
.client { padding-block: clamp(100px, 12vw, 160px); }
.client-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.proofs { margin-top: 40px; display: grid; gap: 20px; }
.proofs li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; }
.proof-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: var(--shadow-s); color: var(--teal-ink); }
.proof-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.proofs strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
/* Le texte seulement : le picto est lui aussi un <span>, et ne doit pas perdre son centrage */
.proofs li > div > span { display: block; font-size: 15px; color: var(--ink-soft); }

.brief-card {
  position: relative; padding: clamp(26px, 3vw, 38px); border-radius: 30px; background: var(--white);
  box-shadow: var(--shadow-l), 0 0 0 1px var(--line);
}
.brief-card::before { /* liseré aquarelle */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 30px 30px 0 0;
  background: linear-gradient(90deg, var(--ink), var(--teal) 40%, var(--sand) 70%, var(--coral));
}
.brief-card-head { display: flex; justify-content: space-between; align-items: center; }
.brief-badge { padding: 6px 12px; border-radius: var(--pill); background: var(--sand-soft); font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #7A3A12; }
.brief-time { font-size: 13.5px; color: var(--ink-soft); }
.brief-q { margin-top: 26px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.brief-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-start {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 13px 18px; border-radius: var(--pill); border: 1.5px solid var(--line-strong); background: var(--white);
  font-size: 15.5px; font-weight: 550; letter-spacing: -.01em;
  transition: color .35s, border-color .35s, transform .5s var(--ease-out);
}
.chip-start::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scale(0); border-radius: inherit; transition: transform .5s var(--ease-out); }
.chip-start:hover { color: var(--white); border-color: var(--ink); transform: translateY(-2px); }
.chip-start:hover::after { transform: scale(1); }
.chip-start-alt { border-style: dashed; }
.brief-hint { margin-top: 20px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Fondateur ---------- */
.founder { padding-block: clamp(80px, 10vw, 140px); background: var(--paper-2); overflow-x: clip; }
.founder-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.founder-photo { position: relative; margin: 0; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; filter: grayscale(1) contrast(1.05); }
.founder-orbit { position: absolute; inset: -8%; width: 116%; height: 116%; overflow: visible; }
.founder-orbit circle { fill: none; stroke: var(--teal); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.founder-quote { margin: 0; }
.founder-quote > p:first-child { font-family: var(--font-serif); font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.16; letter-spacing: -.012em; }
.founder-quote footer { margin-top: 28px; display: flex; flex-direction: column; }
.founder-quote footer strong { font-size: 17px; font-weight: 650; }
.founder-quote footer span { color: var(--ink-soft); font-size: 15px; }
.tech-note { margin-top: 30px; padding-left: 18px; border-left: 2px solid var(--teal); color: var(--ink-soft); font-size: 15.5px; max-width: 36em; }

/* ---------- Deux portes ---------- */
.final-doors { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.big-door {
  --x: 50%; --y: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(380px, 62vh, 560px); padding: clamp(32px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  border: 0; background: transparent; color: var(--ink);
  transition: color .35s .22s; /* le texte blanchit une fois l'aquarelle arrivée dessous */
}
.big-door + .big-door { border-left: 1px solid var(--line); }
.big-door-art {
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  clip-path: circle(46px at calc(100% - 92px) 92px);
  transition: clip-path .95s var(--ease-out);
}
.final.is-near .big-door-art, html:not(.js) .big-door-art { background: linear-gradient(to top, rgba(9, 28, 55, .78), rgba(9, 28, 55, .25)), var(--art) center / cover; }
.big-door:hover, .big-door:focus-visible { color: var(--white); }
.big-door:hover .big-door-art, .big-door:focus-visible .big-door-art { clip-path: circle(150% at var(--x) var(--y)); }
.big-door-kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.big-door-title { margin-top: 14px; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 650; line-height: 1.02; letter-spacing: -.04em; max-width: 11em; }
.big-door-meta { margin-top: 22px; font-size: 16.5px; opacity: .85; display: inline-flex; gap: 10px; }
.big-door-meta span { transition: transform .5s var(--ease-out); }
.big-door:hover .big-door-meta span { transform: translateX(6px); }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; background: var(--ink); color: rgba(255, 255, 255, .78); padding-top: clamp(72px, 9vw, 110px); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.brand-light { color: var(--white); }
.brand-light .brand-tag { color: rgba(255, 255, 255, .62); }
.footer-brand p { margin-top: 18px; max-width: 22em; font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 6px; }
.footer-col a, .footer-link { font-size: 15px; text-decoration: none; color: rgba(255, 255, 255, .82); background: none; border: 0; padding: 0; text-align: left; }
.footer-col a:hover, .footer-link:hover { color: var(--sand); }
.footer-col a.footer-title { font-size: 12px; color: rgba(255, 255, 255, .5); }
.footer-col a.footer-title:hover { color: var(--sand); }
.footer-giant { margin-top: clamp(56px, 8vw, 100px); overflow: hidden; line-height: .8; text-align: center; }
.footer-giant span {
  display: inline-block; font-family: var(--font-brand); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(3.4rem, 13.6vw, 14rem); line-height: 1.04; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--teal), var(--sand) 55%, var(--coral)); background-size: cover; background-position: 50% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-footer.is-near .footer-giant span, html:not(.js) .footer-giant span { background-image: url("assets/art-4b1a696e.jpg"); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px; color: rgba(255, 255, 255, .6);
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--sand); }

/* ---------- Barre d'action mobile ---------- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 22px;
  background: rgba(9, 28, 55, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -12px rgba(9, 28, 55, .5);
  transform: translateY(150%); transition: transform .7s var(--ease-out);
}
.dock.is-visible { transform: none; }
.dock-btn { min-height: 48px; border: 0; border-radius: 15px; font-weight: 650; font-size: 15px; }
.dock-client { background: var(--coral); color: var(--ink); }
.dock-cand { background: var(--teal-ink); color: var(--white); }

/* ---------- Parcours (feuille modale) ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(9, 28, 55, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet-panel {
  position: relative; width: min(1080px, 100% - 48px); height: min(720px, 100% - 48px);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  background: var(--paper); border-radius: 32px; overflow: hidden; box-shadow: 0 40px 120px -20px rgba(3, 11, 23, .6);
}
.sheet-aside { position: relative; color: var(--white); overflow: hidden; }
.sheet-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.sheet-aside-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 28, 55, .94) 18%, rgba(9, 28, 55, .45) 60%, rgba(9, 28, 55, .15)); }
.sheet-aside-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; }
.sheet-aside-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.sheet-aside-title { margin-top: 12px; font-family: var(--font-serif); font-size: 36px; line-height: 1.08; }
.sheet-aside-text { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.sheet-summary { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.sheet-summary li { padding: 5px 11px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: 12.5px; }

.sheet-main { position: relative; display: flex; flex-direction: column; min-height: 0; }
.sheet-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 26px 40px 0 48px; }
.sheet-progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.sheet-progress span { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.sheet-count { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sheet-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); box-shadow: var(--shadow-s); display: grid; place-items: center; transition: transform .5s var(--ease-out); }
.sheet-close:hover { transform: rotate(90deg); }
.sheet-close svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.sheet-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sheet-stage { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 48px 32px; }
.sheet-foot { display: flex; align-items: center; gap: 16px; padding: 16px 40px 18px 48px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .55); }
.sheet-foot .btn { margin-left: auto; }
.sheet-enter { font-size: 12.5px; color: var(--ink-soft); }
.sheet-foot.is-done { display: none; }

/* Cibles de focus programmatique (annonce de l'étape) : pas de cadre visuel */
.step-q:focus, .done-title:focus { outline: none; }
.step-q { font-size: clamp(26px, 2.6vw, 34px); font-weight: 650; letter-spacing: -.03em; line-height: 1.12; max-width: 18em; }
.step-hint { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); max-width: 34em; }
fieldset.group { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.group > legend { padding: 0; float: left; width: 100%; }
fieldset.group > legend + * { clear: both; }
.group { margin-top: 26px; }
.group + .group { margin-top: 22px; }
.group-label { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.group-label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; gap: 9px; border: 0; padding: 0; margin: 0; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--pill); background: var(--white); border: 1.5px solid var(--line-strong);
  font-size: 15px; font-weight: 550; letter-spacing: -.005em; line-height: 1.2;
  transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
}
.opt span::before { /* coche qui apparaît */
  content: ""; width: 0; height: 9px; margin-right: -8px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -2px); opacity: 0; transition: width .35s var(--ease-out), margin .35s var(--ease-out), opacity .2s;
}
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.opt input:checked + span::before { width: 5px; margin-right: 0; opacity: 1; }
.opt input:focus-visible + span { outline: 2.5px solid var(--teal-ink); outline-offset: 3px; }
.opt input:active + span { transform: scale(.96); }
.opts-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.opts-cards .opt span { width: 100%; min-height: 64px; border-radius: 16px; padding: 14px 18px; font-size: 16px; }
.more-toggle { margin-top: 12px; background: none; border: 0; padding: 4px 0; color: var(--teal-ink); font-weight: 600; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; }

.fields { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { position: relative; }
.field-full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; padding: 24px 16px 10px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--white);
  font: inherit; font-size: 16.5px; color: var(--ink); transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field label {
  position: absolute; left: 17px; top: 17px; font-size: 16px; color: var(--ink-soft); pointer-events: none;
  transform-origin: left top; transition: transform .35s var(--ease-out), color .3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 4px rgba(38, 140, 150, .15); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--teal-ink); }
.field .opt-tag { font-size: .85em; color: var(--ink-soft); }
.field.has-error input, .field.has-error textarea { border-color: var(--coral-deep); }
.field-error { display: block; margin-top: 6px; font-size: 13.5px; color: var(--coral-deep); font-weight: 500; }
.quick { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.quick button { padding: 7px 12px; border-radius: var(--pill); border: 1px dashed var(--line-strong); background: transparent; font-size: 13.5px; color: var(--ink-soft); }
.quick button:hover { border-color: var(--ink); color: var(--ink); }
.consent { margin-top: 18px; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.consent.has-error { color: var(--coral-deep); }

/* Dépôt de CV */
.drop {
  position: relative; margin-top: 26px; padding: 34px 24px; border-radius: 22px; text-align: center;
  background: var(--white); cursor: pointer; transition: background-color .3s, transform .5s var(--ease-out);
}
.drop { border: 2px dashed var(--line-strong); }
.drop:hover { border-color: var(--teal); }
.drop.is-over { background: rgba(38, 140, 150, .07); border-color: var(--teal-ink); border-style: solid; transform: scale(1.01); }
.drop.is-over .drop-arrow { animation: lift .8s var(--ease-io) infinite alternate; }
@keyframes lift { to { transform: translateY(-4px); } }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { width: 64px; height: 64px; margin: 0 auto; color: var(--teal-ink); }
.drop-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { margin-top: 14px; font-size: 18px; font-weight: 650; }
.drop-sub { margin-top: 4px; font-size: 14.5px; color: var(--ink-soft); }
.drop-btn { margin-top: 18px; }
.file-card {
  margin-top: 26px; display: grid; grid-template-columns: 52px 1fr 44px; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-m);
}
.file-ico { width: 52px; height: 62px; border-radius: 8px; background: var(--sand-soft); display: grid; place-items: center; font-size: 11px; font-weight: 750; color: #7A3A12; letter-spacing: .04em; position: relative; }
.file-ico::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--paper) rgba(122, 58, 18, .25) transparent; }
.file-name { font-weight: 650; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: 13.5px; color: var(--ink-soft); }
.file-ring { width: 44px; height: 44px; }
.file-ring circle { fill: none; stroke-width: 3; }
.file-ring .bg { stroke: var(--line); }
.file-ring .fg { stroke: var(--teal-ink); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 22px 22px; }
.file-ring .tick { fill: none; stroke: var(--teal-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.file-remove { margin-top: 10px; }
.or-sep { margin: 22px 0 0; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Écran de réussite */
.done { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: 12px; }
.done-mark { width: 96px; height: 96px; }
.done-mark circle { fill: none; stroke: var(--teal); stroke-width: 2; }
.done-mark path { fill: none; stroke: var(--teal-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.done-title { margin-top: 24px; font-size: clamp(28px, 3vw, 38px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; max-width: 16em; }
.done-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--teal-ink); }
.done-text { margin-top: 14px; font-size: 16.5px; color: var(--ink-soft); max-width: 32em; }
.done-recap { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.done-recap li { padding: 6px 12px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); font-size: 13.5px; }
.done-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.done-proto { margin-top: 22px; font-size: 13px; color: var(--ink-soft); padding: 10px 14px; border-radius: 12px; background: rgba(9, 28, 55, .05); display: inline-block; }
.done-orbit { position: relative; width: 132px; height: 132px; }
.done-orbit svg { width: 100%; height: 100%; overflow: visible; }
.done-orbit .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.done-orbit .pt { fill: var(--ink); opacity: .3; }
.done-orbit .me { fill: var(--coral); }
.done-orbit .initials { position: absolute; inset: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-weight: 650; font-size: 22px; letter-spacing: .02em; }

/* ---------- Curseur ---------- */
.cursor, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; }
.cursor {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1.5px solid rgba(9, 28, 55, .45);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background-color .35s, border-color .35s, opacity .3s;
}
.cursor-label { font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--ink); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--sand); border-color: var(--sand); }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-dark { border-color: rgba(255, 255, 255, .55); }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--coral); }
.has-cursor .cursor, .has-cursor .cursor-dot { opacity: 1; }
.has-cursor .cursor.is-hidden, .has-cursor .cursor-dot.is-hidden { opacity: 0; }

/* ==========================================================================
   Multi-pages : transitions, pages de contenu, page candidats, pages simples
   ========================================================================== */

/* Rideau de transition entre les pages : quatre strates de la marque */
.wipe { position: fixed; inset: 0; z-index: 450; pointer-events: none; }
.wipe span { position: absolute; inset: 0; transform: translateY(101%); }
.wipe span:nth-child(1) { background: var(--coral); }
.wipe span:nth-child(2) { background: var(--sand); }
.wipe span:nth-child(3) { background: var(--teal-ink); }
.wipe span:nth-child(4) { background: var(--ink); }
.is-arriving .wipe span { transform: none; }

.section-more { margin-top: 44px; }
.method-foot .link-arrow { white-space: nowrap; }

/* Haut de page : texte + fenêtre en arche sur l'aquarelle de la page */
.page-hero { position: relative; overflow-x: clip; padding-block: clamp(26px, 4vh, 48px) clamp(56px, 8vw, 104px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: min(76svh, 700px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 13.5px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs--light, .crumbs--light a { color: rgba(255, 255, 255, .66); }
.crumbs--light a:hover, .crumbs--light [aria-current] { color: var(--white); }
.page-kicker { margin-bottom: 18px; }
.page-title { font-size: clamp(2.45rem, 5.2vw, 5.1rem); line-height: 1.03; letter-spacing: -.045em; font-weight: 640; max-width: 13.5em; }
.page-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--teal-ink); letter-spacing: -.012em; }
.page-lead { margin-top: 26px; max-width: 36em; font-size: clamp(17px, 1.3vw, 19.5px); color: var(--ink-soft); }
.page-lead p + p { margin-top: 12px; }
.page-lead strong { color: var(--ink); font-weight: 650; }
.page-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero-visual { position: relative; justify-self: center; width: min(100%, 430px); }
.window { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 30px 30px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-l); }
.window img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; }
.window-orbit { position: absolute; left: -11%; top: -8%; width: 122%; aspect-ratio: 1; overflow: visible; pointer-events: none; }
.window-orbit circle { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.window-orbit .window-dot { fill: var(--coral); stroke: none; }

/* Corps de page : sommaire collant + contenu */
.page-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-block: clamp(36px, 5vw, 72px) clamp(80px, 10vw, 140px); }
.page-body:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); }
.toc { position: sticky; top: calc(var(--header-h) + 28px); }
.toc-title { margin-bottom: 14px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.toc ol { display: grid; border-left: 1.5px solid var(--line); }
.toc a { display: block; margin-left: -1.5px; padding: 7px 0 7px 16px; border-left: 1.5px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: color .3s, border-color .3s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--coral); }
.toc-progress { margin-top: 20px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.toc-progress span { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.page-content { min-width: 0; max-width: 840px; }
.page-content > * + * { margin-top: clamp(26px, 3.5vw, 42px); }
.page-content > .block-title--lead:not(:first-child) { margin-top: clamp(64px, 8vw, 104px); }

.block-title { font-size: clamp(1.75rem, 2.9vw, 2.6rem); line-height: 1.1; letter-spacing: -.032em; font-weight: 640; scroll-margin-top: 110px; }
.block-title.is-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
.prose { font-size: 18px; line-height: 1.72; color: var(--ink-2); overflow-wrap: anywhere; } /* adresses web longues des pages légales */
.prose p + p { margin-top: 16px; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose .block-title { margin-bottom: 14px; }
.prose * + .block-title { margin-top: 40px; }
.prose a { color: var(--teal-ink); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.duo-col { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.duo-col p + p { margin-top: 12px; }
.duo-col strong { color: var(--ink); font-weight: 650; }
.duo-title { margin-bottom: 12px; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 650; color: var(--ink); scroll-margin-top: 110px; }
.duo-col--card { background: var(--ink); box-shadow: none; color: rgba(255, 255, 255, .86); }
.duo-col--card .duo-title { color: var(--white); }
.duo:has(.features) { grid-template-columns: 1fr; }
.duo-col:has(.features) { padding: 0; background: none; box-shadow: none; }
.duo-title a, .block-title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .55s var(--ease-out); }
.duo-title a:hover, .block-title a:hover { background-size: 100% 1.5px; }
.duo-col:has(.features) > .duo-title { font-size: clamp(1.75rem, 2.9vw, 2.6rem); line-height: 1.1; letter-spacing: -.032em; }
.duo-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-weight: 650; font-size: 15px; color: var(--teal-ink); text-decoration: none; }
.duo-link-art { width: 34px; height: 34px; border-radius: 50%; background: var(--art) var(--pos, 50% 50%) / cover; transition: transform .7s var(--ease-out); }
.duo-link:hover .duo-link-art { transform: scale(1.12) rotate(-10deg); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { padding: 8px 14px; border-radius: var(--pill); background: var(--paper-2); font-size: 14.5px; font-weight: 550; line-height: 1.3; color: var(--ink); }
.duo-col--card .chips li { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); color: var(--white); }

.timeline { position: relative; display: grid; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1.5px; }
.timeline::before { background: var(--line-strong); }
.timeline::after { background: var(--coral); transform-origin: top; transform: scaleY(var(--tl-p, 0)); }
.tl-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 16px 0; }
.tl-num {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--line-strong); font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--teal-ink);
  transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--ease-out);
}
.tl-item.is-on .tl-num { background: var(--coral); border-color: var(--coral); color: var(--ink); transform: scale(1.06); }
.tl-title { margin-top: 13px; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 650; color: var(--ink); }
.tl-body p { margin-top: 6px; font-size: 16.5px; color: var(--ink-soft); }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.feature { position: relative; overflow: hidden; padding: 26px 26px 28px; border-radius: var(--radius-m); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.feature-line { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--teal), var(--sand), var(--coral)); transform-origin: left; }
.feature-num { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--teal-ink); }
.feature-title { margin-top: 6px; font-size: 20px; letter-spacing: -.02em; font-weight: 650; color: var(--ink); }
.feature p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.strata-rule { height: 10px; border: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10'><path d='M0 5 Q15 0 30 5 T60 5' fill='none' stroke='%23C3CAD3' stroke-width='1.5'/></svg>") repeat-x center; }
.block-image img { border-radius: var(--radius-l); }

/* Pages : portes de fin et lectures liées */
.final--page .big-door { min-height: clamp(320px, 50vh, 460px); }
.related { padding-block: clamp(80px, 10vw, 130px); background: var(--paper-2); }
.related-head { margin-bottom: clamp(32px, 4vw, 48px); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel-card { position: relative; display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.rel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.rel-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: var(--ink); }
.rel-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.rel-card:hover .rel-art img { transform: scale(1.14); }
.rel-kicker { margin: 18px 10px 0; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.rel-title { margin: 6px 10px 0; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
.rel-desc { margin: 4px 10px 0; font-size: 15px; color: var(--ink-soft); }
.rel-arrow { position: absolute; right: 24px; top: 24px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(.6) rotate(-45deg); transition: opacity .4s, transform .6s var(--ease-out); }
.rel-card:hover .rel-arrow { opacity: 1; transform: none; }
.rel-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pages légales */
.page-hero--simple { padding-block: clamp(28px, 4vw, 48px) 8px; }
.page-hero--simple .page-title { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.legal { font-size: 16.5px; line-height: 1.7; }
.legal .legal-title { margin: 40px 0 10px; font-size: 22px; letter-spacing: -.02em; font-weight: 650; color: var(--ink); scroll-margin-top: 110px; }
.legal .legal-title:first-child { margin-top: 0; }

/* Remerciement et 404 */
.status { display: grid; place-items: center; min-height: calc(100svh - var(--header-h) - var(--ribbon-h)); padding-block: 56px 80px; text-align: center; overflow-x: clip; }
.status-inner { display: grid; justify-items: center; }
.status-orbit { position: relative; width: 220px; height: 220px; margin-bottom: 30px; }
.status-orbit svg { width: 100%; height: 100%; overflow: visible; }
.so-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 7; }
.so-dots circle { fill: var(--ink); opacity: .26; }
.so-key { fill: var(--coral); }
.status-code { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: 72px; color: var(--teal-ink); }
.status-check { position: absolute; inset: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); }
.status-check svg { width: 52px; height: 52px; fill: none; stroke: var(--sand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.status-title { max-width: 13em; margin-inline: auto; }
.status-text { margin-top: 18px; max-width: 34em; font-size: 18px; color: var(--ink-soft); }
.status-links { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 26px; }

/* Page candidats */
.r-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: clamp(30px, 5vh, 60px) clamp(64px, 8vw, 110px); }
.r-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42vw 42vw at 82% 52%, rgba(38, 140, 150, .4), transparent 70%), radial-gradient(30vw 30vw at 96% 92%, rgba(233, 95, 42, .28), transparent 70%), radial-gradient(34vw 34vw at 4% 0%, rgba(251, 198, 142, .1), transparent 70%); }
.r-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 90px); align-items: center; min-height: min(80svh, 760px); }
.r-title { color: var(--white); max-width: 12.5em; }
.r-title em { color: var(--sand); }
.r-lead { color: rgba(255, 255, 255, .8); }
.r-hero .page-lead strong { color: var(--white); }
.r-drop { position: relative; margin-top: 34px; max-width: 580px; border-radius: 22px; border: 1.5px dashed rgba(251, 198, 142, .55); background: rgba(255, 255, 255, .06); transition: background-color .4s, border-color .4s, transform .6s var(--ease-out); }
.r-drop:hover, .r-drop.is-over { background: rgba(255, 255, 255, .11); border-color: var(--sand); border-style: solid; }
.r-drop.is-over { transform: scale(1.015); }
.r-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.r-drop-label { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 16px 16px 20px; cursor: pointer; }
.r-drop-input:focus-visible + .r-drop-label { outline: 2.5px solid var(--teal-light); outline-offset: 4px; border-radius: 22px; }
.r-drop-icon { width: 54px; height: 54px; color: var(--sand); }
.r-drop-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.r-drop:hover .drop-arrow, .r-drop.is-over .drop-arrow { animation: lift .8s var(--ease-io) infinite alternate; }
.r-drop-text strong { display: block; font-size: 17px; font-weight: 650; }
.r-drop-text span { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.r-drop-alt { margin-top: 16px; }
.r-drop-alt .link-arrow { font-size: 15px; text-align: left; }
.r-drop-btn { pointer-events: none; }
.r-hero-visual { position: relative; display: grid; place-items: center; min-height: 620px; }

.r-who, .r-why, .r-quotes { padding-block: clamp(88px, 11vw, 140px); }
.who-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.who-item { padding: 30px; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.who-num { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--teal); }
.who-item h3 { margin-top: 14px; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 650; }
.who-item p { margin-top: 8px; font-size: 16px; color: var(--ink-soft); }
.r-how { padding-block: clamp(80px, 10vw, 130px); background: var(--paper-2); }
.r-how-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reason { padding: 28px; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.reason:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.reason-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--sand-soft); color: #7A3A12; transition: transform .7s var(--ease-out); }
.reason:hover .reason-icon { transform: rotate(-8deg) scale(1.06); }
.reason-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reason h3 { margin-top: 18px; font-size: 20px; letter-spacing: -.02em; font-weight: 650; }
.reason p { margin-top: 8px; font-size: 16px; color: var(--ink-soft); }
.r-stats { position: relative; overflow: hidden; padding-block: clamp(80px, 10vw, 130px); background: var(--ink); color: var(--white); }
.r-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40vw 30vw at 10% 100%, rgba(38, 140, 150, .3), transparent 70%), radial-gradient(30vw 24vw at 100% 0%, rgba(233, 95, 42, .18), transparent 70%); pointer-events: none; }
.stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.stat { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); }
.stat-value { display: block; font-size: clamp(3.6rem, 8vw, 7rem); line-height: 1; letter-spacing: -.05em; font-weight: 300; color: var(--sand); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-light); }
.stat p { margin-top: 8px; max-width: 22em; font-size: 16px; color: rgba(255, 255, 255, .78); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.quote-card { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 30px; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.quote-card blockquote { margin: 0; font-family: var(--font-serif); font-size: 21px; line-height: 1.32; color: var(--ink); }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; font-weight: 650; }
.quote-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--sand); font-family: var(--font-serif); font-style: italic; font-size: 20px; }
.missions--reseau { background: var(--white); }
.r-final { padding-block: clamp(90px, 11vw, 150px); text-align: center; background: var(--paper-2); }
.r-final .section-title { max-width: 15em; margin-inline: auto; }
.r-final-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.reassure--dark { color: var(--ink-soft); }

/* Masquage avant l'intro des pages intérieures */
.js .page-hero .crumbs, .js .page-kicker, .js .page-lead, .js .page-ctas > *, .js .window, .js .window-orbit,
.js .r-drop, .js .r-hero .reassure, .js .status-orbit, .js .status-text, .js .status-links > * { opacity: 0; }

/* Multi-pages : responsive */
@media (max-width: 1180px) {
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .nav-panel { width: 380px; }
}
@media (max-width: 1023px) {
  .page-hero-grid, .r-hero-grid, .r-how-grid { grid-template-columns: 1fr; min-height: 0; }
  .page-hero-visual { width: min(100% - 96px, 320px); margin-top: 8px; }
  .window { aspect-ratio: 1 / 1; }
  .r-hero-visual { min-height: 0; padding-block: 24px; }
  .duo { grid-template-columns: 1fr; }
  .who-list, .quotes { grid-template-columns: 1fr; }
  .reasons, .related-grid, .related-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 767px) {
  .page-title { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .page-ctas .btn { width: 100%; white-space: normal; text-align: center; }
  .page-hero-visual { width: min(100% - 120px, 240px); }
  .features, .reasons, .related-grid, .related-grid--4 { grid-template-columns: 1fr; }
  .prose { font-size: 17px; }
  .r-drop-label { grid-template-columns: 44px minmax(0, 1fr); }
  .r-drop-icon { width: 44px; height: 44px; }
  .r-drop-btn { grid-column: 1 / -1; width: 100%; }
  .r-hero-visual { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
  .status-orbit { width: 180px; height: 180px; }
  .status-check { inset: 42px; }
  .status-code { font-size: 58px; }
}

/* ---------- Coexistence CSS / GSAP ---------- */
.is-intro .site-header, .is-intro .door { transition: none !important; }
.magnetic { transition: color .35s, box-shadow .5s var(--ease-out) !important; }

/* Méthode épinglée (bureau) : la scène tient dans l'écran */
@media (min-width: 1024px) {
  .method.is-pinned .method-pin { height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; padding-block: 48px; }
  .method.is-pinned .method-head { margin-bottom: 18px; }
}
/* Méthode sans épinglage (sans JS ou animations réduites) : défilement horizontal natif */
html:not(.js) .method-track, .method.is-static .method-track { width: auto; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); }
html:not(.js) .method-foot, .method.is-static .method-foot { display: none; }
html:not(.js) .method-wave, .method.is-static .method-wave { display: none; }
html:not(.js) .steps, .method.is-static .steps { padding-top: 46px; }
.method.is-static .step { scroll-snap-align: start; }

/* Écrans tactiles : l'aquarelle des deux portes est visible d'emblée */
@media (hover: none) {
  .big-door { color: var(--white); }
  .big-door-art { clip-path: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .header-ctas .btn-ghost { display: none; }
  .burger { display: block; }
  .values { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual { width: min(100%, 460px); margin-top: 24px; }
  .doors { max-width: none; }
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; min-height: 132px; transition: min-height .9s var(--ease-out), box-shadow .6s; }
  .panel.is-active { min-height: 440px; }
  .panel:not(.is-active) .t-full { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
  .panel:not(.is-active) .t-short { display: none; }
  /* Méthode : frise verticale */
  .method-track { width: auto; padding: 0 var(--gutter); max-width: 720px; margin-inline: auto; }
  .method-wave { display: none; }
  .steps { flex-direction: column; padding: 0 0 0 34px; gap: 18px; position: relative; }
  .steps::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1.5px; background: var(--line-strong); }
  .steps::after { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1.5px; background: var(--coral); transform-origin: top; transform: scaleY(var(--line-p, 0)); }
  .step { width: auto; transition: box-shadow .7s var(--ease-out), border-color .5s; }
  .step::before { left: -31px; top: 34px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2px solid var(--coral); }
  .step.is-current { transform: none; }
  .method-foot { display: none; }
  .avant-grid, .client-grid, .founder-grid { grid-template-columns: 1fr; }
  .avant-visual { min-height: 0; padding-top: 24px; }
  .founder-photo { width: min(100%, 300px); }
  .sheet-panel { grid-template-columns: 1fr; width: min(720px, 100% - 32px); }
  .sheet-aside { display: none; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; --ribbon-h: 42px; }
  body { font-size: 16px; }
  .proto-ribbon { flex-direction: column; gap: 0; white-space: normal; font-size: 11.5px; line-height: 1.35; }
  .proto-ribbon-sep { display: none; }
  .header-ctas { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 21px; }
  .brand-tag { font-size: 11px; }
  .hero { padding-top: 18px; padding-bottom: 72px; }
  .eyebrow { margin-bottom: 18px; font-size: 12px; }
  .statement { font-size: clamp(2.35rem, 10.4vw, 3.2rem); letter-spacing: -.04em; }
  .hero-lead { margin-top: 18px; }
  .doors { grid-template-columns: 1fr; margin-top: 26px; gap: 10px; }
  .door { min-height: 0; padding: 18px 64px 18px 20px; }
  .door-title { font-size: 18.5px; margin-top: 6px; }
  .door-meta { padding-top: 8px; }
  .hero-visual { width: min(100% - 48px, 340px); } /* l'orbite (114 %) reste dans l'écran */
  .live-card { left: 0; right: 0; bottom: -18px; margin-inline: auto; min-width: 0; max-width: 300px; }
  .scroll-cue { display: none; }
  .missions-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .values { grid-template-columns: 1fr; gap: 30px; }
  .panel.is-active { min-height: 420px; }
  .panel-body { padding: 22px; }
  .avant-steps li { grid-template-columns: 38px 1fr; }
  .avant-step-num { width: 38px; height: 38px; font-size: 18px; }
  .avant-visual { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); padding-block: 36px; }
  .phone { width: 262px; height: 540px; border-radius: 46px; }
  .phone-screen { border-radius: 36px; }
  .phone-time { font-size: 56px; }
  .rings span:nth-child(1) { width: 340px; height: 340px; }
  .rings span:nth-child(2) { width: 460px; height: 460px; }
  .rings span:nth-child(3) { width: 580px; height: 580px; }
  .avant-ctas .btn { width: 100%; white-space: normal; text-align: center; }
  .final-doors { grid-template-columns: 1fr; }
  .big-door { min-height: 300px; }
  .big-door + .big-door { border-left: 0; border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dock { display: grid; }
  /* Parcours plein écran */
  .sheet { place-items: stretch; }
  .sheet-panel { width: 100%; height: 100%; border-radius: 0; }
  .sheet-head { padding: calc(18px + env(safe-area-inset-top)) 16px 0 20px; }
  .sheet-stage { padding: 18px 20px 28px; }
  .sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 20px; }
  .sheet-enter { display: none; }
  .fields { grid-template-columns: 1fr; }
  .opts-cards { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .sheet-enter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js .site-header, .js .hero-eyebrow, .js .line-in, .js .hero-lead, .js .door, .js .live-card, .js .orb, .js .scroll-cue,
  .js .page-hero .crumbs, .js .page-kicker, .js .page-lead, .js .page-ctas > *, .js .window, .js .window-orbit,
  .js .r-drop, .js .r-hero .reassure, .js .status-orbit, .js .status-text, .js .status-links > * { opacity: 1; }
  .wipe { display: none; }
}

/* ---------- WordPress ---------- */
.pc-gf-proxy { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer-noscript { padding-bottom: 24px; color: rgba(255, 255, 255, .8); }
.send-error { margin-top: 18px; }
.block-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-l); }
.duo-figure img { border-radius: var(--radius-m); }
.duo-figure figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.duo-btn { margin-top: 18px; }
.block-form { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }

/* ---------- Extensions tierces ---------- */
/* Bandeau cookies (GDPR Cookie Consent) : carte compacte aux couleurs du site */
#cookie-law-info-bar {
  left: auto !important; right: 24px !important; top: auto !important; bottom: 24px !important;
  width: min(440px, calc(100% - 48px)) !important; max-width: none !important; padding: 20px 22px !important;
  border-radius: 22px !important; background: rgba(255, 255, 255, .97) !important; color: var(--ink-soft) !important;
  box-shadow: var(--shadow-l), 0 0 0 1px var(--line) !important; font-family: var(--font-sans) !important; z-index: 95 !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#cookie-law-info-bar .cli-bar-container { display: block !important; }
#cookie-law-info-bar .cli-bar-message { width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--ink-soft) !important; }
#cookie-law-info-bar .cli-bar-message a { color: var(--teal-ink) !important; }
#cookie-law-info-bar .cli-bar-btn_container { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; }
#cookie-law-info-bar .cli-bar-btn_container a, #cookie-law-info-bar .cli-plugin-button {
  margin: 0 !important; padding: 9px 15px !important; border-radius: 999px !important; font-family: var(--font-sans) !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important;
}
#cookie-law-info-bar #wt-cli-accept-all-btn, #cookie-law-info-bar .wt-cli-accept-all-btn { background: var(--coral) !important; color: var(--ink) !important; }
#cookie-law-info-bar #cookie_action_close_header_reject, #cookie-law-info-bar .cli_settings_button { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line-strong) !important; }
@media (max-width: 767px) {
  #cookie-law-info-bar { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important; padding: 16px !important; border-radius: 18px !important; }
  #cookie-law-info-bar .cli-bar-message { font-size: 12px !important; }
  #cookie-law-info-bar .cli-bar-btn_container { gap: 6px; margin-top: 12px !important; }
  #cookie-law-info-bar .cli-bar-btn_container a { padding: 8px 12px !important; font-size: 12.5px !important; }
}
/* Badge reCAPTCHA masqué : Google l'autorise si la mention figure dans le parcours (étape coordonnées du brief) */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.recaptcha-note a { color: var(--teal-ink); }