@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
/* ═══════════════════════════════════════════════════════════
   TEMPLATE « SITE IMMERSIF » — feuille de style canonique
   NE PAS MODIFIER en dehors des tokens :root (thème + accent).
   Le thème se choisit par <html data-theme="dark"> (light par
   défaut) ; l'accent par --lime / --lime-ink.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ THÈME LIGHT (défaut) — surcharge dark plus bas ═══ */
  --ink-rgb: 26, 25, 21;          /* composantes RGB du texte (pour les rgba) */
  --bone: #f4f3f0;                /* toile de fond */
  --ink: #1a1915;                 /* texte principal */
  --ash: #82868e;                 /* texte secondaire */
  --white: #ffffff;               /* surfaces élevées (header, panneau, tuiles) */

  /* ═══ ACCENT — les 2 seules variables à changer pour une autre couleur ═══ */
  --lime: #0c447c;                /* accent (bouton CTA, bande devise, éléments accent) */
  --lime-ink: #ffffff;            /* texte posé SUR l'accent */

  --ink-faint: rgba(var(--ink-rgb), 0.16);

  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;           /* FILDARY : Inter pour l'UI */
  --geo: 'Spectral', Georgia, serif;                               /* FILDARY : Spectral, voix de la marque */
  --mono: 'Inter', ui-sans-serif, system-ui, sans-serif;           /* FILDARY : overlines en Inter */

  --t-heading: clamp(34px, 4.6vw, 57px);
  --radius: 2px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ═══ THÈME DARK — activé par <html data-theme="dark"> ═══ */
html[data-theme="dark"] {
  --ink-rgb: 242, 241, 236;
  --bone: #141311;
  --ink: #f2f1ec;
  --ash: #8f938f;
  --white: #201f1c;
  --ink-faint: rgba(var(--ink-rgb), 0.16);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.007em;
  line-height: 1.3;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; border-radius: var(--radius); }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 400;
}
.ash { color: var(--ash); }

/* ═══════════ SMOOTH WRAPPER ═══════════ */
body.is-smooth .smooth {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

/* ═══════════ PRELOADER ═══════════ */
/* preloader : le nom + un trait qui se remplit. À la fin le voile
   s'efface et le nom REJOINT sa place dans le dock — la page ne se
   substitue pas au loader, elle en sort. */
.loader {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.loader::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bone);
  transition: opacity .75s var(--ease-inout);
}
.loader.done { pointer-events: none; }
.loader.done::before { opacity: 0; }
.loader-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.loader-wordmark {
  font-size: 23px; letter-spacing: -0.007em; font-weight: 500;
  transform-origin: center center;
  transition: transform .9s var(--ease-inout);
  will-change: transform;
}
/* posé : le nom du loader s'efface pendant que le dock se révèle, sur la
   MÊME durée et au même endroit — un fondu croisé, jamais une bascule
   sèche ni un instant sans nom à l'écran */
.loader-wordmark.landed { opacity: 0; transition: opacity .32s var(--ease-out); }
.loader-rule {
  display: block; width: 128px; height: 1px;
  background: var(--ink-faint); overflow: hidden;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-inout);
}
.loader.done .loader-rule { opacity: 0; transform: scaleX(0.4); }
.loader-rule i {
  display: block; width: 100%; height: 100%;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
}
/* pendant le relais le dock est déjà à sa place, simplement invisible :
   il ne descend pas en même temps que le wordmark vole vers lui. */
body.handoff .dock {
  transform: translate(-50%, 0);
  opacity: 0;
  transition: none;
}

/* ═══════════ SCÈNES (pin émulé) ═══════════ */
.scene { position: relative; }
.scene .pin {
  height: 100vh;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

/* ═══════════ RÉVÉLATIONS GÉNÉRIQUES ═══════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ═══════════ S1 · HERO ═══════════ */
.s-hero .pin { background: var(--bone); }

.floaters { position: absolute; inset: 0; z-index: 1; }
.fl {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  overflow: hidden;
  border-radius: var(--radius);
  will-change: transform;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-inout);
  transition-delay: calc(var(--fi, 0) * 90ms + .15s);
}
.fl img { width: 100%; height: auto; transform: scale(1.3); transition: transform 1.7s var(--ease-out); transition-delay: calc(var(--fi, 0) * 90ms + .15s); }
body.is-ready .fl { clip-path: inset(0 0 0 0); }
body.is-ready .fl img { transform: scale(1); }

.hero-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.hero-kicker { margin-bottom: 28px; will-change: opacity; }
.hero-title { font-size: var(--t-heading); letter-spacing: -0.02em; line-height: 1.12; font-weight: 400; }
.hero-line1 { display: block; will-change: opacity; }
.hero-line2 {
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.hero-line2 .hl { flex: 0 0 auto; }

/* image qui naît puis grandit dans le texte */
.grow {
  display: block; flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  width: 0; height: 0;
  will-change: width, height;
  position: relative;
}
.grow img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 100vh;
  object-fit: cover;
  border-radius: 0;
  max-width: none;
}

/* calque série en lumière */
.spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.spot-intro {
  position: absolute; top: 44%; left: 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: var(--t-heading); letter-spacing: -0.02em;
  white-space: nowrap;
}
.spot-intro span { display: inline-block; will-change: opacity, transform; opacity: 0; }
/* ═══════════ S2 · MANIFESTE ═══════════ */
.s-fill .pin {
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fill-text {
  width: min(880px, 74vw);
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: -0.02em; line-height: 1.16;
  text-align: left;
}
.fill-text .fc { color: var(--ink-faint); transition: color .25s linear; }
.fill-text .fc.on { color: var(--ink); }
.fill-text.greyed .fc { color: rgba(var(--ink-rgb), 0.34); transition: color .6s; }

.boxed { position: relative; white-space: nowrap; }
.box-svg { position: absolute; inset: -0.22em -0.35em; width: calc(100% + 0.7em); height: calc(100% + 0.44em); overflow: visible; }
.box-svg path {
  fill: none; stroke: var(--ink); stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.fill-text.greyed .box-svg path { stroke: var(--ink-faint); transition: stroke .6s; }

/* ═══════════ S3 · SÉLECTION ═══════════ */
.collection {
  position: relative;
  background: var(--white);
  padding: 14vh var(--gutter) 30vh;
  margin-top: -100vh; /* recouvre le manifeste grisé SUR PLACE, pendant son épinglage */
  z-index: 2;
  overflow: visible;
}
.coll-head { text-align: center; margin-bottom: 10vh; position: relative; z-index: 1; }
.coll-title { font-size: var(--t-heading); letter-spacing: -0.02em; margin: 16px 0 10px; }
.coll-sub { color: var(--ash); margin-bottom: 18px; }
.coll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
  align-items: start;
  position: relative; z-index: 2;
}
.col { display: grid; gap: clamp(44px, 5vw, 84px); will-change: transform; }
.col:nth-child(2) { margin-top: 14vh; }
.col:nth-child(3) { margin-top: 4vh; }
.col:nth-child(4) { margin-top: 9vh; }
.card { position: relative; }
.card-img { position: relative; overflow: hidden; border-radius: var(--radius); }
.card-img img { width: 100%; transition: transform .9s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.045); }
.card figcaption { margin-top: 12px; font-size: 19px; letter-spacing: -0.007em; }
.card figcaption .mono { display: block; color: var(--ash); margin-top: 3px; }

/* carte vedette : voyage du centre du titre vers sa case */
#featuredCard { will-change: transform; position: relative; z-index: 3; }

/* ═══════════ S3bis · FEATURES BENTO ═══════════ */
/* VRAI bento : 4 tuiles de tailles CONTRASTÉES, jamais 4 cases égales
   (une grille régulière n'est pas un bento). 3 colonnes, 4 rangées :
   une grande, une haute, une haute, une grande — en diagonale.
   Toutes couvrent 2 rangées : aucune tuile écrasée en bandeau. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(230px, 31vh);
  gap: clamp(12px, 1.4vw, 20px);
  position: relative; z-index: 2;
}
.b-big  { grid-column: span 2; grid-row: span 2; }
.b-tall { grid-column: span 1; grid-row: span 2; }
.bento-grid .card {
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius);
  padding: 12px 12px 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bento-grid .card-img { flex: 1; min-height: 0; }
.bento-grid .card-img img { width: 100%; height: 100%; object-fit: cover; }
.bento-grid figcaption { margin-top: 12px; }

/* ═══════════ S4 · BANDE LIME ═══════════ */
.band { position: relative; z-index: 3; margin-top: -20vh; }
.diag { height: 12vw; position: relative; margin: -1px 0; }
.to-lime   { background: linear-gradient(to bottom right, transparent 49.7%, var(--lime) 50.3%); }
.from-lime { background: linear-gradient(to bottom right, var(--lime) 49.7%, transparent 50.3%); }
/* ═══════════ 5 · DEVISE — train de mots-clés (scène épinglée) ═══════════ */
.s-motto .pin { background: var(--lime); overflow: hidden; }
.motto-kicker {
  position: absolute; top: 13vh; left: 50%;
  transform: translateX(-50%);
  color: var(--lime-ink); opacity: 0.7;
}
.motto-track {
  position: absolute; top: 50%; left: 0;
  display: flex; align-items: baseline;
  gap: 7vw;
  white-space: nowrap;
  will-change: transform;
}
.mw {
  font-family: var(--geo);
  font-weight: 300;
  font-size: clamp(96px, 16vw, 250px);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--lime-ink);
  will-change: opacity;
}
.mw .sc { display: inline-block; will-change: transform; }
.motto-hint {
  position: absolute; bottom: 14vh; left: 50%;
  transform: translateX(-50%);
  color: var(--lime-ink);
  transition: opacity .25s;
  text-align: center;
  max-width: 80vw;
}
.motto-hint.swap { opacity: 0; }

/* ═══════════ S5 · NUIT + EXPLORER ═══════════ */
.s-night .pin { background: var(--bone); }
.night-line {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font-size: var(--t-heading); letter-spacing: -0.02em;
  z-index: 2;
}
.night-line .nw { will-change: opacity, transform; opacity: 0; }
.night-line .nw + .nw { margin-left: 0.28em; }
/* compteur monumental : le numéro d'étape, en filigrane, qui défile */
.bignum {
  position: absolute; right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: flex-start;
  font-size: min(44vh, 30vw);
  font-weight: 300; line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  z-index: 11; opacity: 0; pointer-events: none;
}
.bignum-roll { display: block; height: 1em; overflow: hidden; }
.bignum-roll > span { display: block; will-change: transform; }
.bignum-roll i { display: block; height: 1em; font-style: normal; letter-spacing: normal; padding-right: 0.06em; }
/* rideau de lames : couvre puis découvre, l'image ne recule jamais */
/* débord de 2 px sur les quatre côtés : le pin est translaté sur des
   valeurs fractionnaires, et un rideau calé à 0 laisse transparaître une
   ligne d'image sur les bords. */
.wipe { position: absolute; inset: -2px; z-index: 9; display: flex; pointer-events: none; overflow: hidden; }
.wipe span {
  flex: 1 1 0; position: relative; margin-right: -2px;
  min-width: 0;
  background: var(--bone);
  transform: scaleY(0); transform-origin: bottom;
  will-change: transform;
}
/* PAS d'arête dessinée sur les lames. Une lame rétractée sur un fond de
   même couleur ne doit RIEN laisser : un liseré ::before/::after y trace
   des traits parasites en travers de l'écran pendant le relais entre deux
   étapes (visibles en accent comme en neutre). La lame se lit à son
   remplissage quand elle passe sur l'image, pas à un filet. */
.wipe span:last-child { margin-right: 0; }
/* contenu de l'étape à gauche */
.psteps { position: absolute; left: var(--gutter); top: 50%; width: min(560px, 42vw); z-index: 12; }
.pstep {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.pstep-meta { display: block; margin-bottom: 14px; }
.pstep h3 {
  font-size: clamp(38px, 4.6vw, 64px);
  letter-spacing: -0.018em;
  margin-bottom: 16px;
}
.pstep p { font-size: 19px; line-height: 1.45; max-width: 26em; }

/* CTA de conversion en fin de processus */
.steps-cta {
  position: absolute; left: 50%; bottom: 8vh;
  transform: translateX(-50%);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0;
  z-index: 12;
  will-change: opacity, transform;
}
.steps-cta a { position: relative; display: inline-block; padding: 0.28em 0.55em; }
.cta-oval {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.cta-oval path { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ═══════════ 9 · OBJECTIONS (FINALE) ═══════════ */
.s-final .pin {
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
}
.final-text {
  position: relative; z-index: 2;
  text-align: center;
  font-size: var(--t-heading); letter-spacing: -0.02em; line-height: 1.2;
  padding: 0 var(--gutter);
  max-width: min(940px, 74vw); margin: 0 auto;
}
.fs { color: var(--ink-faint); transition: color .5s; }
.fs.on { color: var(--ink); }
.pill { position: relative; white-space: nowrap; }
.pill-svg {
  position: absolute; inset: -0.2em -0.3em;
  width: calc(100% + 0.6em); height: calc(100% + 0.4em);
  overflow: visible;
}
.pill-svg path {
  fill: none; stroke: var(--ink); stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}
.trail {
  position: absolute; inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.trail img {
  position: absolute; top: 0; left: 0;
  width: var(--tw, 150px);
  max-width: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* ═══════════ 8 · PREUVE SOCIALE (scène épinglée) ═══════════ */
.s-quote .pin {
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
}
/* témoignage : guillemet, parole, filet, signature — la grammaire d'un avis */
.q-stack { position: relative; z-index: 2; width: min(980px, 84vw); }
.q-glyph {
  display: block;
  font-size: clamp(88px, 8.5vw, 146px); line-height: 0.62;
  color: var(--ink-faint);
  margin-bottom: 6px;
  opacity: 0; will-change: opacity, transform;
}
.q-block { position: relative; }
.q-text {
  font-size: clamp(25px, 3vw, 46px);
  line-height: 1.28; letter-spacing: -0.018em;
  color: var(--ink);
  opacity: 0; will-change: opacity, transform;
}
.q-sign { margin-top: clamp(34px, 4.4vw, 58px); }
.q-rule {
  display: block; height: 1px; background: var(--ink-faint);
  transform: scaleX(0); transform-origin: left;
}
.q-sign-row {
  display: flex; align-items: baseline; gap: 20px;
  padding-top: 18px;
}
.q-name { font-size: 20px; font-weight: 500; opacity: 0; }
.q-ctx { flex: 1; opacity: 0; }
.q-fig {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 300; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0;
}
.q-fig .fig-pre { font-size: 0.58em; }
.q-fig .fig-unit { font-size: 0.46em; margin-left: 0.08em; }
/* pas de chiffre fourni : la signature se resserre, rien ne flotte */
.q-stack.no-fig .q-fig { display: none; }

.s-final .pin {
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
}
/* ═══════════ FOOTER ═══════════ */
.footer {
  position: relative; z-index: 2;
  background: var(--bone);
  padding: 16vh var(--gutter) 120px;
  text-align: center;
  overflow: hidden;
}
.footer-kicker { margin-bottom: 22px; }
.footer-mail {
  display: inline-block;
  font-size: var(--t-heading); letter-spacing: -0.02em;
  position: relative;
}
.footer-mail-text { position: relative; }
.footer-mail-text::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-inout);
}
.footer-mail:hover .footer-mail-text::after { transform: scaleX(1); transform-origin: left; }
.footer-reassurance { margin-top: 18px; }
.footer-name {
  margin-top: 6vh;
  font-size: clamp(60px, 12vw, 240px);
  letter-spacing: -0.02em; line-height: 1.05;
  white-space: nowrap;
}
.footer-name .ch { display: inline-block; overflow: hidden; vertical-align: bottom; }
.footer-name .chi {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.footer-name.in-view .chi { transform: translateY(0); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 8vh; padding-top: 19px;
  border-top: 1px solid var(--ink);
  text-align: left;
}

/* ═══════════ CHROME FIXE — barre flottante en haut ═══════════ */
.dock {
  position: fixed; top: 14px; left: 50%;
  transform: translate(-50%, -180%);
  background: var(--white);
  border-radius: var(--radius);
  display: flex; align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 18px;
  z-index: 100;
  transition: transform .9s var(--ease-out) .15s, opacity .32s var(--ease-out);
}
body.is-ready .dock { transform: translate(-50%, 0); }
.dock-wordmark { font-size: 19px; letter-spacing: -0.01em; font-weight: 500; margin-right: 14px; }
.dock-nav { display: flex; gap: 4px; margin-right: 8px; }
.dock-link { padding: 9px 10px; position: relative; }
.dock-link::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: 5px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.dock-link:hover::after { transform: scaleX(1); transform-origin: left; }
.dock-cta {
  background: var(--lime);
  color: var(--lime-ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: filter .3s;
}
.dock-cta:hover { filter: brightness(0.96); }

body.is-ready body.is-scrolled @keyframes chev { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }

/* ═══════════ MODE STATIQUE (tactile / réduit / étroit) ═══════════ */
body.static .scene { height: auto !important; }
body.static .scene .pin { height: auto; overflow: visible; }

body.static .s-hero .pin { min-height: 92vh; padding: 16vh 0 8vh; }
body.static .fl, body.static .fl img { clip-path: none; transform: none; transition: none; }
body.static .floaters { z-index: 0; }
body.static .hero-copy { position: relative; inset: auto; min-height: 56vh; z-index: 5; padding: 0 var(--gutter); }
body.static .grow { width: 1.6em; height: 1em; margin: 0 0.18em; }
body.static .grow img { width: 100%; height: 100%; position: static; transform: none; object-fit: cover; }
body.static .spot { position: relative; inset: auto; height: 92vh; pointer-events: auto; overflow: hidden; }
body.static .spot::before {
  content: ''; position: absolute; inset: 0;
  background: url('images/hero.jpg') center/cover;
}
body.static .spot-intro { top: 50%; transform: translateY(-50%); }
body.static .spot-intro span { opacity: 1; transform: none; }
body.static .callout { display: none; }

body.static .s-fill .pin { padding: 14vh 0; }
body.static .fill-text { width: auto; max-width: 800px; padding: 0 var(--gutter); }
body.static .fill-text .fc { color: var(--ink); }
body.static .collection { padding-bottom: 26vh; margin-top: 0; }
body.static .coll-grid { grid-template-columns: repeat(2, 1fr); }
body.static .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(240px, auto); }
body.static .b-big  { grid-column: span 2; grid-row: span 1; }
body.static .b-tall { grid-column: span 1; grid-row: span 1; }
body.static .col { margin-top: 0 !important; }

body.static .band { margin-top: 0; }

body.static .s-night .pin { padding: 0; }
body.static .night-line { position: relative; inset: auto; height: 46vh; }
body.static .night-line .nw { opacity: 1; }
/* les étapes s'empilent normalement : sans ça elles restent superposées
   et invisibles (elles sont absolues + opacity 0 pour la scène scrubée) */
body.static .psteps { position: static; width: auto; padding: 20px var(--gutter) 6vh; }
body.static .pstep {
  position: static; opacity: 1 !important; transform: none !important;
  padding: 24px 0; border-top: 1px solid var(--ink-faint);
}
body.static .steps-cta {
  position: static; opacity: 1 !important; transform: none !important;
  text-align: center; padding-bottom: 8vh;
}
body.static .disc-bgs, body.static .disc-shade, body.static .disc-thumbs, body.static .disc-card { display: none; }
body.static .disc-ui { position: relative; inset: auto; opacity: 1; }
body.static .disc-label { position: static; color: var(--ash); padding: 0 var(--gutter); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
body.static .disc-list { position: static; padding: 16px var(--gutter) 8vh; }
body.static .disc-list li {
  height: auto; padding: 20px 0;
  color: var(--ink); opacity: 1;
  border-top: 1px solid var(--ink);
  flex-direction: column; align-items: flex-start;
}
body.static .disc-desc { opacity: 1 !important; color: var(--ink); }

body.static .s-motto .pin { padding: 12vh var(--gutter); }
body.static .motto-kicker { position: static; transform: none; margin-bottom: 26px; }
body.static .motto-track { position: static; transform: none !important; flex-direction: column; align-items: flex-start; gap: 12px; white-space: normal; }
body.static .mw { opacity: 1 !important; font-size: clamp(56px, 13vw, 110px); }
body.static .mw .sc { transform: none !important; }
body.static .motto-hint { display: none; }
body.static .disc-cta { position: static; transform: none !important; opacity: 1 !important; color: var(--ink); margin: 4vh var(--gutter) 8vh; display: inline-block; }
body.static .disc-cta .cta-oval path { stroke: var(--ink); }
body.static .s-quote .pin { padding: 12vh var(--gutter); }
body.static .wipe, body.static .bignum { display: none; }
body.static .q-glyph, body.static .q-text, body.static .q-name,
body.static .q-ctx, body.static .q-fig { opacity: 1; }
body.static .q-rule { transform: scaleX(1); }
body.static .q-sign-row { flex-wrap: wrap; gap: 10px; }

body.static .s-final .pin { min-height: 60vh; padding: 14vh 0; }
body.static .fs { color: var(--ink); }
body.static .trail { display: none; }
body.static .footer-name .chi { transform: none; }

/* ═══════════ RESPONSIVE ÉTROIT ═══════════ */
@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --t-heading: clamp(27px, 6.6vw, 40px);
  }
  body { font-size: 17px; }

  /* ── barre de navigation : pleine largeur, ancrée en haut, pas une
     pilule flottante. Elle entre en glissant du haut, comme sur desktop. */
  .dock {
    top: 10px; left: 10px; right: 10px;
    width: auto; max-width: none;
    border-radius: var(--radius);
    transform: translateY(calc(-100% - 16px));
    justify-content: space-between;
    padding: 11px 12px 11px 16px;
    gap: 10px; white-space: nowrap;
    transition: transform .8s var(--ease-out) .1s, opacity .32s var(--ease-out);
  }
  body.is-ready .dock { transform: translateY(0); }
  body.handoff .dock { transform: translateY(0); opacity: 0; }
  .dock-wordmark { font-size: 17px; margin-right: 0; white-space: nowrap; }
  /* une seule ancre tient à côté du CTA sur un écran étroit */
  .dock-nav { display: flex; margin-right: 0; margin-left: auto; }
  .dock-nav .dock-link:first-child { display: none; }
  .dock-cta { padding: 9px 12px; font-size: 11px; white-space: nowrap; }
  .loader-rule { width: 96px; }

      body.is-scrolled 
  /* ── hero : le nuage reste DENSE et grand, il déborde des bords ; ce qui
     protège le titre, c'est le vide au centre, pas le nombre d'images.
     Les deux visuels de la bande centrale sont renvoyés en haut et en bas
     (leur `top` vient de --y en style inline, on surcharge `top`). */
  .hero-title { font-size: clamp(26px, 7vw, 40px); }
  .hero-kicker {
    font-size: 10px; line-height: 1.5; margin-bottom: 18px;
    white-space: normal; padding: 0 var(--gutter);
  }
  /* échelle bornée : sans plancher ni plafond, un 3:2 tombe à 70 px de
     large (un timbre) pendant qu'un 2:3 monte à 250 px. Le clamp resserre
     les extrêmes pour que les dix visuels pèsent le même poids visuel. */
  /* La largeur doit suivre celle de l'écran, pas rester en px fixes : le pas
     entre deux visuels d'une bande est de ~21 % de l'écran, donc en dessous
     de ~24 vw ils cessent de se toucher et la bande se troue (net à 768 px).
     Le plancher en vw garantit le recouvrement, le plafond évite qu'un 2:3
     ne fasse trois fois la hauteur des autres. */
  .fl { width: calc(var(--w) * 0.52); }
  /* les visuels débordent des DEUX bords. À gauche c'est gratuit (un `left`
     négatif n'allonge pas le document), à droite non : sans ce clip, le
     dernier visuel de chaque bande pousse scrollWidth au-delà de innerWidth
     et le mobile défile latéralement. On coupe au cadre, qui fait exactement
     la largeur de l'écran : le débord reste visible, le scroll disparaît. */
  .floaters { overflow: hidden; }
  /* placement explicite en DEUX BANDES : 0-30 % en haut, 70-100 % en bas.
     La bande centrale reste entièrement libre — c'est le vide qui rend le
     titre lisible, pas la suppression des visuels. Certains débordent
     volontairement des bords, comme sur la référence. */
  /* Deux bandes, centre libre pour le kicker + le titre.
     La bande HAUTE est ancrée par le BAS (`bottom`, `top:auto`) : ancrée
     par le haut, un visuel portrait descend dans la boîte du titre — la
     hauteur d'un .fl dépend du ratio de l'image, donc elle varie d'un
     site à l'autre. Ancrée par le bas, l'arête basse est garantie. */
  /* Chaque bande porte CINQ visuels, posés sur un pas régulier d'environ
     21 % : un qui déborde à gauche, trois dans le cadre, un qui déborde à
     droite. Les `left` d'une même bande ne doivent jamais laisser de trou
     de plus de ~25 % — c'est un trou au milieu d'une bande qui fait
     « images jetées au hasard », pas le chevauchement.
     L'amplitude verticale d'une bande reste dans 8 % : au-delà, les
     visuels s'égrènent en diagonale au lieu de faire bloc. */
  /* Les visuels gardent les positions --x/--y posées dans index.html : le
     hero fait exactement 100 vh, ces pourcentages retombent donc juste et
     le nuage s'éparpille tout autour du titre, comme sur desktop. La
     variété des largeurs vient de --w, qui change d'une position à
     l'autre — c'est elle qui empêche le nuage de se lire comme une grille,
     ne pas la remplacer par une largeur unique.
     Seuls trois visuels sont décalés, et VERTICALEMENT seulement : au
     début de la scène le moteur resserre le nuage vers le centre (pull de
     16 %), et sur un écran étroit ce resserrement pose 1, 6 et 7 en plein
     sur le titre. On les sort de sa bande sans toucher leur flanc, pour
     garder l'éparpillement gauche/droite. Décaler en `top` est sans risque :
     `measureFloaters()` lit la position de repos APRÈS le CSS. */
  .floaters .fl:nth-child(3) { top:  2%; }   /* x 40 % */
  .floaters .fl:nth-child(5) { top:  5%; }   /* x 85 % */
  .floaters .fl:nth-child(2) { top: 11%; }   /* x 21 % */
  .floaters .fl:nth-child(4) { top: 17%; }   /* x 63 % */
  .floaters .fl:nth-child(1) { top: 23%; }   /* x -4 % */
  .floaters .fl:nth-child(7)  { top: 59%; }  /* x 94 % */
  .floaters .fl:nth-child(10) { top: 63%; }  /* x 73 % */
  .floaters .fl:nth-child(6)  { top: 68%; }  /* x -2 % */
  .floaters .fl:nth-child(8)  { top: 73%; }  /* x 13 % */
  .floaters .fl:nth-child(9)  { top: 79%; }  /* x 44 % */
  /* le positionnement est en nowrap sur grand écran : il doit pouvoir
     revenir à la ligne ici, sinon il sort du cadre */
  .spot-intro {
    white-space: normal;
    font-size: clamp(23px, 6.2vw, 34px); line-height: 1.16;
    padding: 0 var(--gutter);
  }

  /* manifeste, sélection, devise */
  .fill-text { font-size: clamp(20px, 5.4vw, 28px); }
  .coll-title { font-size: clamp(27px, 7vw, 38px); }
  .coll-sub { font-size: 17px; }
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .card figcaption { font-size: 15px; }
  .mw { font-size: clamp(40px, 13vw, 68px); }

  /* processus */
  .pstep h3 { font-size: clamp(29px, 7.8vw, 42px); }
  .pstep p { font-size: 16px; }
  .steps-cta { font-size: clamp(21px, 5.8vw, 28px); }

  /* témoignage */
  .q-glyph { font-size: clamp(54px, 15vw, 88px); }
  .q-text { font-size: clamp(20px, 5.6vw, 30px); }
  .q-name { font-size: 17px; }
  .q-fig { font-size: clamp(26px, 7.4vw, 36px); }

  /* objections + footer */
  .final-text { max-width: none; }
  .footer-mail { font-size: clamp(26px, 8.4vw, 44px); }
  .footer-name { font-size: clamp(40px, 16vw, 78px); }
  .footer-bottom { flex-direction: column; gap: 10px; }

  /* ── RYTHME VERTICAL : les paddings du mode statique sont en vh et
     mangent 70 % d'un écran mobile. On les resserre section par section. */
  /* la copie du hero tient une hauteur d'écran : c'est elle qui donne au
     nuage la place de s'éparpiller AUTOUR du titre. À 44vh il ne restait
     que ~8vh sous le titre, donc les visuels du bas s'alignaient en une
     rangée collée au texte au lieu d'entourer la zone. */
  body.static .s-hero .pin { min-height: 88vh; padding: 10vh 0 6vh; }
  body.static .hero-copy { min-height: 64vh; }
  body.static .spot { height: 74vh; }
  body.static .s-fill .pin { padding: 9vh 0; }
  body.static .collection { padding-bottom: 12vh; }
  body.static .s-motto .pin { padding: 8vh var(--gutter); }
  body.static .s-quote .pin { padding: 9vh var(--gutter); }
  body.static .s-final .pin { min-height: 0; padding: 9vh 0; }
  body.static .psteps { padding: 14px var(--gutter) 4vh; }
  body.static .steps-cta { padding-bottom: 5vh; }
  body.static .night-line { height: 34vh; }
  /* la devise doit rester monumentale, c'est son rôle */
  body.static .mw { font-size: clamp(46px, 17vw, 92px) !important; }

  /* ══ SCÈNES ANIMÉES SUR MOBILE ══
     Le mode statique ne se déclenche plus que sur « prefers-reduced-motion » :
     les scènes scrubées tournent donc aussi sur téléphone, et trois mises en
     page pensées pour un grand écran doivent y être reprises. Les règles
     `body.static` plus haut ne suffisent pas — elles ne s'appliquent plus. */

  /* Processus : le texte de l'étape et le compteur géant sont CÔTE À CÔTE sur
     desktop (texte à gauche sur 42vw, chiffre à droite). À 375 px ça donne
     deux colonnes de 150 px illisibles — on les EMPILE, chiffre au-dessus,
     texte en dessous, chacun sur toute la largeur. */
  .psteps {
    left: var(--gutter); right: var(--gutter);
    width: auto; top: 40%;
  }
  .pstep h3 { font-size: clamp(32px, 9vw, 46px); }
  .pstep p { font-size: 17px; max-width: none; }
  .bignum {
    top: 11vh; bottom: auto; transform: none;
    font-size: min(30vh, 46vw);
  }

  /* CTA du processus : il est posé en `left: 50%`, donc sa largeur utile
     n'est que la moitié droite de l'écran et « Réserver une séance → » passe
     à la ligne. On lui rend toute la largeur et on interdit la coupure. */
  .steps-cta {
    /* NE PAS toucher à `left` ni à `transform` : app.js repose en inline un
       `translate(-50%, …)` pour l'entrée du CTA, il écrase tout `transform`
       posé en CSS. L'élément DOIT donc rester en `left: 50%`. Le vrai
       problème est ailleurs : sans largeur, un absolu posé à 50 % ne
       dispose que de la moitié droite de l'écran, et le libellé passe à la
       ligne. On lui donne sa largeur naturelle, bornée à l'écran. */
    width: max-content;
    max-width: calc(100% - 2 * var(--gutter));
    font-size: clamp(17px, 5.2vw, 26px);
  }
  .steps-cta a { white-space: nowrap; }

  /* Témoignage : nom / contexte / chiffre sont une rangée flex de trois
     colonnes. À cette largeur le contexte se réduit à une colonne de mots
     coupés — on empile, en gardant l'ordre parole → signature → chiffre. */
  .q-sign-row {
    flex-direction: column; align-items: flex-start;
    gap: 10px; padding-top: 16px;
  }
  .q-ctx { flex: none; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  /* 8 projets en une seule colonne font cinq écrans de haut : on reste
     sur deux colonnes, quitte à réduire les légendes. */
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .bento-grid { grid-template-columns: 1fr; }
  .card figcaption { font-size: 13px; }

  .dock-nav { display: none; }   /* sous 480 px, wordmark + CTA seulement */

  /* À 320-480 px le titre du hero occupe presque toute la largeur : deux
     visuels du nuage viennent mordre dessus. On les écarte de sa bande. */
  .floaters .fl:nth-child(1) { top: 12%; }
  .floaters .fl:nth-child(7) { top: 66%; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — typographie de marque (docs/DESIGN_SYSTEME.md)
   Spectral = la voix de la marque (titres, wordmark, grandes phrases)
   Inter    = toute l'interface (corps, overlines, chiffres, boutons)
   ═══════════════════════════════════════════════════════════ */
.mono { font-weight: 600; letter-spacing: 0.08em; }
.hero-title, .spot-intro, .coll-title, .night-line, .pstep h3, .mw {
  font-family: var(--geo); font-style: italic; font-weight: 500;
}
.fill-text, .q-text, .fs, #fs4 { font-family: var(--geo); }
.loader-wordmark, .dock-wordmark, .footer-name {
  font-family: var(--geo); font-weight: 600; letter-spacing: -0.012em;
}

/* AJOUT FILDARY — témoignage : le contexte du chiffre se colle au chiffre
   (desktop uniquement ; sous 900 px la rangée est déjà empilée). */
@media (min-width: 901px) {
  .q-ctx { flex: 0 1 auto; margin-left: auto; margin-right: -8px; text-align: right; max-width: 260px; }
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — navigation (liens de pages dans le dock,
   bouton « Réserver ma démo » du footer)
   ═══════════════════════════════════════════════════════════ */
.fx-footcta { margin-top: 28px; }
.fx-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--lime); color: var(--lime); padding: 14px 20px; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
.fx-btn:hover, .fx-btn.solid { background: var(--lime); color: var(--lime-ink); }
.fx-btn.solid:hover { background: #042c53; }
@media (max-width: 900px) { .dock-nav .fx-extra { display: none; } }

/* AJOUT FILDARY — nuage du hero : la vignette « cabinet » (6ᵉ) était la plus
   petite (116 px) ; on l'agrandit sans toucher au --x/--y inline. */
.floaters .fl:nth-child(6) { --w: 210px !important; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — « date pivot » animée dans l'image du hero
   Calque posé sur l'image de #grow1 (même boîte 100vw × 100vh,
   même zoom) ; piloté par la progression de la scène (content.js).
   ═══════════════════════════════════════════════════════════ */
.pv { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, #0f4f8f 0%, #0a3868 45%, #031f3d 100%); color: #fff; font-family: var(--sans); }
.pv::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 60px 60px; -webkit-mask: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%); mask: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%); }
/* champ de date */
.pv-field { position: absolute; left: 50%; top: 13%; width: min(640px, 86vw); transform: translate(-50%, 12px); opacity: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 20px 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.pv-lab { font: 600 12px/1.3 var(--sans); letter-spacing: .16em; color: #a9c8ea; }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.pv-date { font: 600 clamp(28px, 3.4vw, 44px)/1 var(--geo); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-date .ph { opacity: .28; }
.pv-caret { display: inline-block; width: 3px; height: .9em; background: #7fc0ff; vertical-align: -0.1em; margin-left: 4px; animation: pvBlink 1s steps(1) infinite; }
@keyframes pvBlink { 50% { opacity: 0; } }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); background: #fff; color: #042c53; border-radius: 10px; padding: 11px 16px; white-space: nowrap; transition: background .25s, color .25s; }
.pv-btn svg { width: 14px; height: 14px; display: none; }
.pv-btn.done { background: #dcfce7; color: #15803d; }
.pv-btn.done svg { display: block; }
/* promesse : phrase de relance sous le positionnement, puis 4 lignes */
.pv-after { position: absolute; left: 50%; top: calc(50% + clamp(34px, 5.2vh, 56px)); transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: italic 400 clamp(20px, 2vw, 28px)/1.3 var(--geo); color: #a9c8ea; opacity: 0; }
.pv-sides { position: absolute; left: 6%; right: 6%; bottom: 9%; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 40px); }
.pv-side { opacity: 0; border-top: 1px solid rgba(255,255,255,.28); padding-top: 16px; }
.pv-k { margin: 0 0 8px; font: 600 12px/1.35 var(--sans); letter-spacing: .1em; color: #a9c8ea; }
.pv-t { margin: 0; font: 400 clamp(14px, 1.15vw, 16px)/1.5 var(--sans); color: rgba(255,255,255,.9); text-wrap: pretty; }
.pv-t .s { display: none; }
@media (max-width: 1000px) { .pv-sides { grid-template-columns: repeat(2, 1fr); row-gap: 22px; bottom: 7%; } }
@media (max-width: 700px) {
  .pv-field { top: 16%; padding: 14px 16px; }
  .pv-lab { font-size: 9.5px; letter-spacing: .06em; }
  .pv-btn { font-size: 11px; padding: 9px 11px; }
}
@media (max-width: 560px) {
  .pv-after { white-space: normal; width: 86vw; text-align: center; top: calc(50% + 64px); font-size: 19px; }
  .pv-sides { grid-template-columns: 1fr; left: 7%; right: 7%; bottom: 5%; row-gap: 12px; }
  .pv-side { padding-top: 9px; }
  .pv-k { font-size: 10px; margin-bottom: 3px; }
  .pv-t { font-size: 13px; line-height: 1.4; }
  .pv-t .l { display: none; } .pv-t .s { display: inline; }
}
@media (max-width: 420px) {
  .pv-lab .nd { display: none; }
  .pv-row { flex-wrap: wrap; gap: 10px; }
  .pv-date { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — scène parcours : l'écran « Parcours créé » se
   construit au défilement, directement dans la page (content.js).
   On retire le rideau de lames et le défilé des étapes 01–07 ;
   l'image reste à l'écran jusqu'au bouton « Réserver ma démo ».
   Styles de l'app isolés sous .pcx (tokens du design system Fildary).
   ═══════════════════════════════════════════════════════════ */
body:not(.static) .s-night .wipe,
body:not(.static) .s-night .psteps,
body:not(.static) .s-night .bignum { display: none !important; }
body:not(.static) #nightLine { opacity: 1 !important; }


.pcx-box { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; background: #f7f8fa; }
.pcx { position: absolute; top: 50%; left: 50%; transform-origin: center center; display: flex;
  --ink:#0f172a; --ink-2:#1e293b; --ink-3:#475569; --ink-4:#64748b; --ink-5:#cbd5e1; --bg:#f7f8fa; --bg-2:#eef1f5; --surface:#fff; --sunk:#f8fafc; --border:#e2e8f0; --border-2:#f1f5f9;
  --accent:#0c447c; --accent-mid:#185fa5; --accent-soft:#e6f1fb; --accent-soft-2:#b5d4f4; --accent-ink:#042c53; --grad:linear-gradient(135deg,#1e5ba8 0%,#0c447c 60%,#042c53 100%);
  --green:#15803d; --green-soft:#dcfce7;
  font: 400 13px/19px 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bg); text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.pcx *, .pcx *::before, .pcx *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pcx svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -2px; }
.pcx .tn { font-variant-numeric: tabular-nums; }
/* barre latérale */
.pcx-side { width: 212px; flex: none; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; }
.pcx-brand { display: flex; gap: 10px; align-items: center; padding: 0 6px 24px; }
.pcx-brand img { width: 32px; height: 32px; border-radius: 7px; }
.pcx-brand b { display: block; font: 600 19px/1.1 'Spectral', Georgia, serif; color: var(--accent); letter-spacing: -.012em; }
.pcx-brand small { display: block; font-size: 12px; color: var(--ink-4); }
.pcx-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-3); font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.pcx-nav a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.pcx-nav svg { width: 16px; height: 16px; }
.pcx-nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; }
.pcx-foot { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 8px 0; font-size: 12px; color: var(--ink-4); }
.pcx-foot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; }
/* contenu */
.pcx-main { flex: 1; padding: 104px 48px 40px; position: relative; overflow: hidden; }
.pcx-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pcx-eyebrow { font: 700 12px/16px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pcx-ttl { font: italic 700 24px/30px 'Spectral', Georgia, serif; color: var(--accent-ink); margin: 6px 0 4px !important; }
.pcx-sub { font-size: 14px; color: var(--ink-3); }
.pcx-acts { display: flex; gap: 10px; }
.pcx-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px 'Inter', sans-serif; border-radius: 14px; padding: 9px 18px; white-space: nowrap; }
.pcx-btn.sec { background: var(--surface); border: 1.5px solid var(--border); color: var(--ink-2); }
.pcx-btn.pri { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(12,68,124,.3); padding: 10px 20px; }
.pcx-date { margin: 24px 0 20px; display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); }
.pcx-lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pcx-val { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px rgba(12,68,124,.12); border-radius: 10px; padding: 8px 14px; font: 600 16px 'Inter', sans-serif; }
.pcx-val svg { width: 16px; height: 16px; }
.pcx-sep { flex: 1; }
.pcx-note { font-size: 13px; color: var(--ink-3); }
.pcx-bd { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/16px 'Inter', sans-serif; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: var(--sunk); color: var(--ink-3); border: 1px solid var(--border); }
.pcx-bd.g { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pcx-bd.b { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pcx-bd.g::before, .pcx-bd.b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* tableau */
.pcx-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: start; }
.pcx-col { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); }
.pcx-col.j { border-color: var(--accent-soft-2); box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px rgba(0,0,0,.04); }
.pcx-ph { margin-bottom: 12px; }
.pcx-ov { display: block; min-height: 32px; font: 700 12px/16px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pcx-pd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-4); margin-top: 6px; }
.pcx-jp { font: 700 12px 'Inter', sans-serif; background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 2px 8px; }
.pcx-col.j .pcx-jp { background: var(--grad); color: #fff; }
.pcx-doc { background: var(--sunk); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.pcx-doc b { display: block; font-size: 13px; line-height: 17px; font-weight: 600; }
.pcx-cat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-4); margin: 3px 0 8px; }
.pcx-cat svg { width: 12px; height: 12px; }
.pcx-doc small { display: block; font-size: 12px; color: var(--ink-4); margin-top: 6px; }
.pcx-toast { position: absolute; right: 48px; bottom: 36px; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(15,23,42,.12); padding: 14px 18px; font-size: 13px; color: var(--ink-2); }
.pcx-toast i { width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
/* état initial (animé par content.js) */
.pcx-col, .pcx-doc, .pcx-toast, .pcx-note { opacity: 0; }
/* portrait / tablette : les étapes s'empilent */
.pcx.is-portrait .pcx-side, .pcx.is-portrait .pcx-acts, .pcx.is-portrait .pcx-note, .pcx.is-portrait .pcx-toast, .pcx.is-portrait .pcx-lbl { display: none; }
.pcx.is-portrait .pcx-main { padding: 74px 20px 120px; }
.pcx.is-portrait .pcx-ttl { font-size: 28px; line-height: 34px; }
.pcx.is-portrait .pcx-hd { display: block; }
.pcx.is-portrait .pcx-date { margin: 12px 0 10px; padding: 8px 12px; gap: 10px; }
.pcx.is-portrait .pcx-board { grid-template-columns: 1fr; gap: 6px; }
.pcx.is-portrait .pcx-col { padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border-radius: 14px; }
.pcx.is-portrait .pcx-ph { width: 100%; margin: 0 0 2px; display: flex; align-items: center; justify-content: space-between; }
.pcx.is-portrait .pcx-ov { min-height: 0; }
.pcx.is-portrait .pcx-pd { margin: 0; }
.pcx.is-portrait .pcx-doc { margin: 0; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.pcx.is-portrait .pcx-cat, .pcx.is-portrait .pcx-doc small { display: none; }
.pcx.is-portrait .pcx-doc b { font-size: 12px; line-height: 16px; }
/* téléphone : une ligne par étape, une pastille par document */
.pcx.is-phone .pcx-main { padding: 70px 16px 150px; }
.pcx.is-phone .pcx-ttl { font-size: 26px; line-height: 32px; }
.pcx.is-phone .pcx-pd .tn { display: none; }
.pcx.is-phone .pcx-board { gap: 7px; }
.pcx.is-phone .pcx-col { flex-wrap: nowrap; padding: 13px 14px; gap: 7px; }
.pcx.is-phone .pcx-ph { width: auto; flex: 1; margin: 0; }
.pcx.is-phone .pcx-doc { width: 14px; height: 14px; padding: 0; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-5); flex: none; }
.pcx.is-phone .pcx-doc > * { display: none !important; }
.pcx.is-phone .pcx-doc.sent { background: var(--accent); border-color: var(--accent); }
/* portrait : fondu bas pour que « Réserver ma démo » se pose sur une zone claire */
.pcx-box.is-portrait::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(rgba(247,248,250,0), #f7f8fa 72%); }
/* l'écran est dans .night-line (nowrap) et #grow2 (règle .grow img) : on neutralise ces héritages */
.pcx { white-space: normal; }
.pcx img { position: static !important; transform: none !important; width: 32px !important; height: 32px !important; max-width: none; object-fit: contain; border-radius: 7px; }
/* bandeau « Exemple de parcours » : légende du site posée sur l'écran de l'app */
.pcx-ex { display: block; margin: -28px 0 22px; padding: 12px 18px; background: #f4f3f0; border: 1px solid rgba(26,25,21,.14); border-left: 4px solid var(--accent); border-radius: 4px;
  font: 400 15px/1.45 'Inter', sans-serif; color: #1a1915; }
.pcx-ex b { font: italic 600 18px 'Spectral', Georgia, serif; color: var(--accent-ink); }
.pcx-ex .s { display: none; }
.pcx.is-portrait .pcx-ex { margin: -12px 0 14px; padding: 10px 14px; font-size: 14px; }
.pcx.is-phone .pcx-ex { font-size: 13px; }
.pcx.is-phone .pcx-ex .l { display: none; }
.pcx.is-phone .pcx-ex .s { display: inline; }
/* le bandeau prend de la place : on resserre l'écran paysage pour dégager le bouton final */
.pcx:not(.is-portrait) .pcx-main { padding-top: 92px; }
.pcx:not(.is-portrait) .pcx-ex { margin-bottom: 14px; }
.pcx:not(.is-portrait) .pcx-date { margin: 16px 0 14px; }
.pcx.is-phone .pcx-main { padding-top: 92px; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — second témoignage (même grammaire que .s-quote)
   ═══════════════════════════════════════════════════════════ */
.q2 { background: var(--bone); display: flex; justify-content: center; padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(96px, 16vh, 180px); }
.q2-stack { width: min(980px, 84vw); }
.q2 blockquote { margin: 0; }
.q2-glyph { display: block; font-size: clamp(88px, 8.5vw, 146px); line-height: .62; color: var(--ink-faint); margin-bottom: 6px; }
.q2-text { font-family: var(--geo); font-size: clamp(25px, 3vw, 46px); line-height: 1.28; letter-spacing: -0.018em; color: var(--ink); }
.q2-sign { margin-top: clamp(34px, 4.4vw, 58px); }
.q2-rule { display: block; height: 1px; background: var(--ink-faint); transform-origin: left; }
.q2-name { padding-top: 18px; font-size: 20px; font-weight: 500; }
/* révélation : guillemet → parole → filet → signature */
.q2-glyph, .q2-text, .q2-name { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.q2-rule { transform: scaleX(0); transition: transform .9s var(--ease-out); }
.q2.in .q2-glyph { opacity: 1; transform: none; }
.q2.in .q2-text { opacity: 1; transform: none; transition-delay: .15s; }
.q2.in .q2-rule { transform: scaleX(1); transition-delay: .55s; }
.q2.in .q2-name { opacity: 1; transform: none; transition-delay: 1s; }
@media (max-width: 900px) { .q2-text { font-size: clamp(20px, 5.6vw, 30px); } .q2-glyph { font-size: clamp(54px, 15vw, 88px); } .q2-name { font-size: 16px; } }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — photos du hero : une après l'autre, dans l'ordre
   du parcours (--fi posé par content.js). Cascade espacée à 220 ms.
   ═══════════════════════════════════════════════════════════ */
.fl { transition-duration: .9s; transition-delay: calc(var(--fi, 0) * 220ms + .15s); }
.fl img { transition-delay: calc(var(--fi, 0) * 220ms + .15s); }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — signature tracée en direct (tuile produit)
   Écran du téléphone reconstruit (600 × 820), cadré « cover » comme l'image.
   ═══════════════════════════════════════════════════════════ */
.sgx-box { position: absolute; inset: 0; overflow: hidden; background: #fff; pointer-events: none; }
.sgx { position: absolute; top: 50%; left: 50%; width: 600px; height: 820px; transform-origin: center center; display: grid; place-items: center; background: #fff;
  font: 400 13px/19px 'Inter', system-ui, sans-serif; color: #0f172a; text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased; white-space: normal; }
.sgx *, .sgx *::before, .sgx *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sgx .sgx-ic { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sgx-phone { width: 340px; height: 700px; border-radius: 52px; background: #0f172a; padding: 12px; box-shadow: 0 40px 80px -30px rgba(4,44,83,.35); }
.sgx-scr { height: 100%; border-radius: 41px; background: #f7f8fa; overflow: hidden; display: flex; flex-direction: column; }
.sgx-sb { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font: 600 13px 'Inter', sans-serif; }
.sgx-sb svg { height: 11px; width: auto; fill: #0f172a; }
.sgx-url { margin: 0 16px 10px; background: #eef1f5; border-radius: 10px; font-size: 12px; color: #475569; padding: 6px; display: flex; gap: 6px; justify-content: center; align-items: center; }
.sgx-pb { padding: 6px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 11px; }
.sgx-cab { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #475569; }
.sgx .sgx-cab img { position: static !important; transform: none !important; width: 26px !important; height: 26px !important; border-radius: 6px; }
.sgx-from { align-self: flex-start; display: flex; gap: 8px; align-items: center; font-size: 12px; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 12px; }
.sgx-from .sgx-ic { color: #0c447c; }
.sgx-doc { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.sgx-doc h3 { font: italic 700 20px/26px 'Spectral', Georgia, serif; color: #042c53; margin-bottom: 8px; }
.sgx-doc i { display: block; height: 7px; border-radius: 999px; background: #e2e8f0; margin: 8px 0; }
.sgx-ok { font-size: 12px; color: #15803d; font-weight: 600; display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.sgx-pad { position: relative; height: 92px; background: #fff; border: 1.5px dashed #cbd5e1; border-radius: 18px; }
.sgx-pad small { position: absolute; left: 14px; top: 10px; font: 700 12px 'Inter', sans-serif; letter-spacing: .08em; color: #64748b; }
.sgx-pad svg { position: absolute; left: 22px; right: 22px; top: 20px; bottom: 8px; width: calc(100% - 44px); height: calc(100% - 28px); }
.sgx-pad path { fill: none; stroke: #0c447c; stroke-width: 3.2; stroke-linecap: round; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .25, 1); }
.sgx-cta { position: relative; background: linear-gradient(135deg,#1e5ba8 0%,#0c447c 60%,#042c53 100%); box-shadow: 0 2px 8px rgba(12,68,124,.3); color: #fff; border-radius: 14px; text-align: center; padding: 13px; font-weight: 600; font-size: 14px; transition: background .4s, transform .25s; }
.sgx-cta .b { display: none; align-items: center; justify-content: center; gap: 8px; }
.sgx-box.signed .sgx-cta { background: #15803d; animation: sgxPress .35s ease-out; }
.sgx-box.signed .sgx-cta .a { display: none; }
.sgx-box.signed .sgx-cta .b { display: flex; }
@keyframes sgxPress { 40% { transform: scale(.96); } 100% { transform: none; } }
.sgx-foot { text-align: center; font-size: 12px; color: #64748b; }
.sgx-minor { display: flex; gap: 10px; align-items: flex-start; background: #e6f1fb; color: #042c53; border-radius: 14px; padding: 10px 12px; font-size: 12px; line-height: 17px; }
.sgx-minor .sgx-ic { margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — compteurs vivants (tuile « Vous n'y pensez plus »)
   ═══════════════════════════════════════════════════════════ */
.kpx { position: absolute; inset: 0; pointer-events: none; }
.kpx span { position: absolute; font-family: 'Inter', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.kpx span.tick { animation: kpxTick .35s ease-out; }
@keyframes kpxTick { 0% { opacity: .35; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
/* le zoom de survol décalerait les chiffres : on le coupe sur cette tuile */
.card-img:has(.kpx) img, .card:hover .card-img:has(.kpx) img { transform: none !important; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — « la pièce manquante » (scène « Pas un mailing… »)
   ═══════════════════════════════════════════════════════════ */
.s-final .trail { display: none !important; }   /* remplacée par la pièce manquante */
.gx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gx figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gx figcaption { font: 600 12px var(--sans); letter-spacing: .08em; color: var(--ash); }
.gx-stage { position: absolute; left: 50%; top: 22vh; width: 0; height: 0; }
.gx-stage > figure { position: absolute; left: 0; top: 0; }
.gx-tool { opacity: 0; will-change: opacity, transform, filter; }
.gx-tile { width: clamp(64px, 7vw, 92px); aspect-ratio: 1; display: grid; place-items: center; background: var(--white); border: 1px solid var(--ink-faint); border-radius: 20px; box-shadow: 0 12px 30px -16px rgba(var(--ink-rgb), .35); color: #475569; }
.gx-tile svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gx-slot { transform: translateX(-50%); opacity: 0; }
.gx-hole { width: clamp(76px, 8.4vw, 110px); aspect-ratio: 1; display: grid; place-items: center; border: 2px dashed rgba(var(--ink-rgb), .28); border-radius: 24px; transition: border-color .4s, background .4s, box-shadow .4s; }
.gx-slot.wait .gx-hole { animation: gxPulse 1.4s ease-in-out infinite; }
@keyframes gxPulse { 50% { border-color: var(--lime); box-shadow: 0 0 0 8px rgba(12, 68, 124, .08); } }
.gx-slot.done .gx-hole { border: 2px solid var(--lime); background: var(--white); box-shadow: 0 18px 40px -18px rgba(12, 68, 124, .55); animation: none; }
.gx-logo { width: 64% !important; height: auto !important; opacity: 0; border-radius: 16%; will-change: transform, opacity; }
.gx-slot figcaption { color: var(--lime); opacity: 0; }
@media (max-width: 600px) {
  .gx-stage { top: 22vh; }
  .gx figcaption { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — témoignages en carrousel horizontal (content.js)
   Même grammaire typographique que .q-* (scène d'origine).
   ═══════════════════════════════════════════════════════════ */
body:not(.static) .s-quote .q-stack, body:not(.static) .q2 { display: none !important; }
.qx { position: absolute; inset: 0; overflow: hidden; }
.qx-track { display: flex; width: 200%; height: 100%; will-change: transform; }
.qx-slide { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; }
.qx-stack { width: min(980px, 84vw); }
.qx-glyph { display: block; font-size: clamp(88px, 8.5vw, 146px); line-height: .62; color: var(--ink-faint); margin-bottom: 6px; opacity: 0; }
.qx-text { font-family: var(--geo); font-size: clamp(25px, 3vw, 46px); line-height: 1.28; letter-spacing: -0.018em; color: var(--ink); opacity: 0; }
.qx-sign { margin-top: clamp(34px, 4.4vw, 58px); }
.qx-rule { display: block; height: 1px; background: var(--ink-faint); transform: scaleX(0); transform-origin: left; }
.qx-row { display: flex; align-items: baseline; gap: 20px; padding-top: 18px; }
.qx-name { font-size: 20px; font-weight: 500; opacity: 0; }
.qx-ctx { margin-left: auto; text-align: right; max-width: 260px; opacity: 0; }
.qx-fig { font-size: clamp(30px, 3.2vw, 46px); font-weight: 300; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.qx-fig span { font-size: .46em; margin-left: .08em; }
.qx-dots { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: var(--ash); }
.qx-dots span { transition: color .3s; }
.qx-dots span.on { color: var(--ink); }
.qx-dots i { display: block; width: 64px; height: 1px; background: var(--ink-faint); position: relative; transform-origin: left; }
@media (max-width: 900px) {
  .qx-text { font-size: clamp(18px, 5vw, 30px); }
  .qx-glyph { font-size: clamp(54px, 15vw, 88px); }
  .qx-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qx-ctx { margin-left: 0; text-align: left; }
  .qx-name { font-size: 16px; }
  .qx-fig { font-size: clamp(26px, 7.4vw, 36px); }
}
/* renvoi vers la FAQ, sous « Réserver ma démo » */
.fx-faq { margin-top: 18px; font-size: 16px; color: var(--ash); }
.fx-faq a { color: var(--lime); font-weight: 600; border-bottom: 1px solid currentColor; display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — bouton de fin du parcours, dans le kit de marque
   (même famille que le bouton « Réserver ma démo » du pied de page :
   aplat bleu nuit, capitales Inter espacées, flèche au trait).
   Le moteur garde la main sur l'apparition (opacité + translate).
   ═══════════════════════════════════════════════════════════ */
.steps-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 16px; width: max-content; max-width: calc(100% - 2 * var(--gutter)); }
.steps-cta .cta-oval { display: none; }
.steps-cta a#stepsCtaLink { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: var(--lime); color: var(--lime-ink);
  font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-radius: 2px;
  box-shadow: 0 18px 40px -16px rgba(4, 44, 83, .55), 0 2px 6px rgba(4, 44, 83, .18); transition: background .25s, transform .25s var(--ease-out), box-shadow .25s; }
.steps-cta a#stepsCtaLink:hover { background: #042c53; transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(4, 44, 83, .6), 0 2px 6px rgba(4, 44, 83, .2); }
.steps-cta .cta-arrow { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.steps-cta a#stepsCtaLink:hover .cta-arrow { transform: translateX(4px); }
.steps-cta-sub { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(244, 243, 240, .92); padding: 5px 10px; border-radius: 2px; }
body.static .steps-cta-sub { background: none; }
@media (max-width: 600px) { .steps-cta { bottom: 3vh; gap: 8px; } .steps-cta a#stepsCtaLink { padding: 14px 22px; font-size: 12px; } .steps-cta-sub { font-size: 10px; } }

/* téléphone : lignes du parcours un peu plus serrées pour laisser respirer le bouton final */
.pcx.is-phone .pcx-board { gap: 5px; }
.pcx.is-phone .pcx-col { padding: 9px 14px; }
.pcx.is-phone .pcx-date { margin: 8px 0 8px; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — bande « Signé · Tracé · Archivé » placée AVANT
   « Vos avantages » : la bande succède au manifeste, et les
   tuiles ne remontent plus pour le recouvrir.
   ═══════════════════════════════════════════════════════════ */
#temps + .collection { margin-top: 0; }
#temps .from-lime { background: linear-gradient(to bottom right, var(--lime) 49.7%, var(--white) 50.3%); }   /* le biais débouche sur le blanc des tuiles */

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — bento sur mobile / tablette
   Sous 700 px la grille passe à une colonne : les tuiles « span 2 »
   créaient une seconde colonne implicite, où une tuile s'écrasait en
   bandeau étroit. Chaque tuile prend toute la largeur, hauteur au ratio
   de son visuel (plus de rognage aléatoire).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .bento-grid, body.static .bento-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento-grid .b-big, .bento-grid .b-tall { grid-column: 1 / -1; grid-row: auto; }
  .bento-grid .card-img { flex: none; aspect-ratio: 3 / 2; }
  .bento-grid .b-tall .card-img { aspect-ratio: 4 / 5; }
  .bento-grid .b-tall .card-img img { object-position: center top; }
  /* timeline : visuel recadré sur le volet daté (app-timeline-m.png) */
  .bento-grid .card-img:has(img[src*="app-timeline"]) { aspect-ratio: 4 / 5; }
  .bento-grid img[src*="app-timeline"] { object-position: center top; }
}


/* AJOUT FILDARY — lien « Comment ça fonctionne » sous « Vos avantages » */
.coll-more { margin: 0 0 18px; }
.coll-more a { font: 600 14px/1.4 var(--sans); color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(12, 68, 124, .3); padding-bottom: 2px; }
.coll-more a::after { content: ' →'; }
.coll-more a:hover { border-bottom-color: var(--lime); }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — « Signé / Tracé / Archivé » au doigt (tactile)
   Carrousel horizontal natif, aimanté ; le mot suivant dépasse à
   droite pour inviter au balayage ; lettres qui se posent au mot actif.
   ═══════════════════════════════════════════════════════════ */
.mx { position: relative; background: var(--lime); color: var(--lime-ink); }
.mx { overflow: hidden; }
.mx-in { display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; box-sizing: border-box; will-change: transform; }
.mx-k { text-align: center; opacity: .72; margin: 0 var(--gutter) 5vh; }
.mx-track { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 16vw; -webkit-overflow-scrolling: touch; }
.mx-track::-webkit-scrollbar { display: none; }
.mx-track:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 4px; }
.mx-s { flex: 0 0 68vw; scroll-snap-align: center; text-align: center; padding: 0 1vw; opacity: .5; transform: scale(.92); transition: opacity .45s, transform .6s var(--ease-out); }
.mx-s.on { opacity: 1; transform: none; }
.mx-w { display: block; font: 300 clamp(54px, 17vw, 120px)/1 var(--geo); letter-spacing: -.02em; white-space: nowrap; }
.mx-c { display: inline-block; transition: transform .7s var(--ease-out), opacity .5s; transition-delay: calc(var(--i) * 45ms); }
.mx:not(.is-in) .mx-c { transform: translateY(.28em) rotate(4deg); opacity: .35; }
.mx-s:not(.on) .mx-c { transform: translateY(.14em) rotate(3deg); }
.mx-h { font: 400 15px/1.55 var(--sans); max-width: 26ch; margin: 22px auto 0; opacity: 0; transform: translateY(8px); transition: opacity .5s .25s, transform .6s .25s var(--ease-out); }
.mx-s.on .mx-h { opacity: .9; transform: none; }
.mx-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 5vh; }
.mx-dots { display: flex; gap: 10px; }
.mx-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.35); transition: width .35s var(--ease-out), background .35s; cursor: pointer; }
.mx-dots button.on { width: 26px; background: #fff; }
.mx-swipe { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; transition: opacity .4s; }
@keyframes mx-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.mx.touched .mx-swipe { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mx-c, .mx-h, .mx-s { transition: none !important; } .mx-swipe svg { animation: none; } }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — témoignages au doigt (tactile)
   La scène épinglée devient une section normale ; les deux témoignages
   se balaient latéralement, le suivant dépasse à droite.
   ═══════════════════════════════════════════════════════════ */
.qm { overflow: hidden; }
.qm .pin { background: var(--bone); padding: 9vh 0 7vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; will-change: transform; }
.qm .q-stack { display: none; }
.qx.qx-touch { position: relative; inset: auto; overflow: visible; }
.qx-touch .qx-track { width: auto; height: auto; transform: none !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 7vw; -webkit-overflow-scrolling: touch; }
.qx-touch .qx-track::-webkit-scrollbar { display: none; }
.qx-touch .qx-slide { flex: 0 0 86vw; width: auto; height: auto; align-items: flex-start; scroll-snap-align: center; padding: 0 3vw; }
.qx-touch .qx-stack { width: 100%; }
.qx-touch .qx-dots { position: static; transform: none; justify-content: center; margin: 5vh 0 0; }
.qx-touch .qx-dots span { cursor: pointer; padding: 6px 2px; }
.qx-touch .qx-dots i { transition: transform .5s var(--ease-out); }
.qx-swipe { display: table; margin: 16px auto 0; padding: 9px 16px; border: 1px solid var(--ink-faint); border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); transition: opacity .4s; }
.qx-touch.touched .qx-swipe { opacity: 0; }
/* bords du carrousel en fondu : le témoignage voisin s'efface au lieu d'être coupé net */
.qx-touch .qx-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7vw, #000 93vw, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7vw, #000 93vw, transparent 100%); }

/* indication « ← Faites glisser → » : flèches qui oscillent */
.sw-l, .sw-r { display: inline-block; font-weight: 400; }
.sw-l { animation: sw-l 1.5s ease-in-out infinite; } .sw-r { animation: sw-r 1.5s ease-in-out infinite; }
@keyframes sw-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes sw-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .sw-l, .sw-r { animation: none; } }

/* carrousels tactiles : défilement horizontal SEULEMENT. Sans overflow-y
   explicite, la piste devient aussi défilable verticalement (animation
   d'arrivée qui dépasse de quelques pixels) et capture le doigt : la page
   ne descend plus (constaté depuis le second témoignage). */
.mx-track, .qx-touch .qx-track { overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-y: auto; }

/* carrousels tactiles : un geste = un seul mot / un seul témoignage,
   jamais plus (un balayage rapide sautait de « Signé » à « Archivé ») */
.mx-s, .qx-touch .qx-slide { scroll-snap-stop: always; }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — pied de page
   · liens : retour à la ligne entre deux liens, jamais au milieu
     (« MENTIONS LÉGALES » était coupé au bord droit sur mobile) ;
   · écran tactile : le contact fait exactement un écran, contenu centré,
     pour se caler en une seule position (voir content.js).
   ═══════════════════════════════════════════════════════════ */
.footer-bottom a { display: inline-block; white-space: nowrap; margin: 0 1.1em 4px 0; }
.footer-bottom a:last-child { margin-right: 0; }
html.fx-touch .footer { min-height: var(--fx-vh, 100vh); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: 11vh; padding-bottom: 4vh; }
html.fx-touch .footer-bottom { margin-top: 5vh; }
/* écrans tactiles peu hauts (≈ iPhone SE) : contact compacté pour tenir dans un écran */
@media (max-height: 740px) {
  html.fx-touch .footer { padding-top: 84px; padding-bottom: 2vh; }
  html.fx-touch .footer-kicker { margin-bottom: 12px; }
  html.fx-touch .footer-mail { font-size: clamp(24px, 7.4vw, 36px); }
  html.fx-touch .footer-reassurance { margin-top: 10px; }
  html.fx-touch .fx-footcta { margin-top: 18px; }
  html.fx-touch .fx-faq { margin-top: 12px; font-size: 15px; }
  html.fx-touch .footer > img { width: 44px !important; height: 44px !important; border-radius: 10px !important; margin: 20px auto 10px !important; }
  html.fx-touch .footer-name { font-size: clamp(36px, 12vw, 52px); }
  html.fx-touch .footer-bottom { margin-top: 3vh; padding-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — promesse du hero sur mobile
   · Le bloc faisait 100vh. Sur iPhone, Safari compte 100vh barres
     repliées : quand la barre d'adresse et la barre du bas sont
     affichées, le bas du bloc (le tableau « Côté cabinet… ») passait
     sous la barre du bas. 100svh = la hauteur réellement visible.
   · Petits écrans : la phrase « Vous n'avez plus à y penser » et le
     haut du tableau se chevauchaient ; la phrase remonte sous la date.
   ═══════════════════════════════════════════════════════════ */
.pv { height: 100svh; }
@media (max-width: 560px) {
  .pv-after { top: calc(16% + 118px); }
  .pv-sides { bottom: 8%; }   /* marge sous le tableau : il y a de la place au-dessus */
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — 4 témoignages (repères 01 02 03 04) et mention Gmail
   ═══════════════════════════════════════════════════════════ */
.qx-dots { gap: 16px; }
.qx-dots span { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.qx-dots span.on { border-bottom-color: currentColor; }
.fx-mailcompat { max-width: 34em; margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: var(--ash); }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — contraste des textes gris (audit du 04/10/2026)
   Le gris secondaire #82868e donnait 3,3:1 sur le fond : sous le seuil
   WCAG AA de 4,5:1 pour les petits textes (sur-titres, sous-titres,
   mentions). #6b6f76 (celui des pages intérieures) : 4,7:1.
   ═══════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) { --ash: #6b6f76; }
/* carte de la date sur téléphone : « NOUVEAU DOSSIER — » réaffiché (masqué sous 420 px auparavant), sur une ligne */
@media (max-width: 420px) { .pv-lab .nd { display: inline; } .pv-lab { font-size: 9px; letter-spacing: .04em; white-space: nowrap; } }

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — hero : sept cartes d'usage à la place des photos
   Chaque carte est un acte de soin dans une spécialité (chirurgie,
   dentaire, endoscopie, chirurgie pédiatrique, ophtalmologie, chirurgie
   esthétique, cabinet médical) : on voit tout de suite à qui Fildary
   s'adresse. Petites scènes en vraie 3D (CSS 3D) : carte inclinée,
   épaisseur, ombre portée détachée, éléments à des profondeurs
   différentes. Une horloge par carte (--u de 0 à 1, --r pour le retour à
   zéro), posée par content.js ; chaque élément déclare son début (--a) et
   sa durée (--d). Les accélérations sont calculées ici (pow, sin).
   ═══════════════════════════════════════════════════════════ */
.fl.fx { overflow: visible; border-radius: 0; clip-path: none !important; opacity: 0; transition: opacity .7s ease; transition-delay: 0s; }
body.is-ready .fl.fx.on { opacity: 1; }   /* chaque scène n'apparaît qu'à son tour (classe posée par proto-fx.js) */
body.static .fl.fx { opacity: 1; transition: none; }
.fx3 { position: relative; width: 100%; perspective: 1000px; }
.fx3 .vs { position: absolute; left: 0; top: 0; width: 260px; transform-origin: 0 0; transform: scale(var(--s, 1)); transform-style: preserve-3d; }   /* mise à l'échelle par transform : « zoom » réduit mal les textes sur Safari iPhone */
.fl.fx { will-change: auto; }   /* sans « will-change », le navigateur redessine la carte à sa taille du moment : pas de flou à l'agrandissement */
.vx { position: absolute; left: 0; top: 0; width: 260px; transform-style: preserve-3d; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  --ink: #0f172a; --ink2: #1e293b; --ink3: #475569; --ink4: #64748b; --line: #e2e8f0; --sunk: #f8fafc; --acc: #0c447c; --acc2: #185fa5; --accs: #e6f1fb; --g: #15803d; --gs: #dcfce7; --am: #b45309; --ams: #fef3c7;
  font-family: 'Inter', system-ui, sans-serif; color: var(--ink); --u: .93; --r: 1; --sh: 0; }
.vx * { box-sizing: border-box; position: absolute; margin: 0; }
.vx svg { overflow: visible; }
/* ombre portée détachée : elle glisse sous la carte quand celle-ci s'incline */
.vx::before { content: ''; position: absolute; left: 6%; right: 6%; top: 12%; bottom: -5%; border-radius: 28px; background: rgba(4, 44, 83, .22); filter: blur(20px); transform: translateZ(-90px); }

/* ── horloge → progression de l'élément ── */
.vx [style*="--a"] {
  --k: clamp(0, calc((var(--u) - var(--a)) / var(--d, .06)), 1);
  --kr: calc(var(--k) * var(--r));                                                                   /* retour à zéro inclus */
  --e: calc(1 - pow(1 - var(--kr), 3));                                                              /* décélération */
  --b: calc(1 + 2.70158 * pow(var(--kr) - 1, 3) + 1.70158 * pow(var(--kr) - 1, 2));                  /* rebond */
  --o: min(calc(var(--kr) * 3.5), 1);
}
.vx [style*="--a2"] { --k2: calc(clamp(0, calc((var(--u) - var(--a2)) / var(--d2, .06)), 1) * var(--r)); }
.vx .pop     { opacity: var(--o); transform: translateZ(calc(var(--z, 0px) * var(--e))) scale(calc(.55 + .45 * var(--b))); }
.vx .stamp   { opacity: var(--o); transform: translateZ(var(--z, 0px)) scale(calc(1.9 - .9 * var(--e))) rotate(calc((1 - var(--e)) * -9deg)); }
.vx .slide   { opacity: var(--o); transform: translate3d(calc((1 - var(--b)) * var(--dx, 0px)), calc((1 - var(--b)) * var(--dy, 18px)), var(--z, 0px)); }
.vx .rise    { opacity: var(--o); transform: translate3d(0, calc((1 - var(--e)) * 18px), calc(var(--z, 0px) * var(--e))); }
.vx .out     { opacity: calc(1 - var(--o)); transform: translateZ(var(--z, 0px)); }
.vx .flipin  { opacity: var(--o); transform: translateZ(1px) rotateX(calc((1 - var(--e)) * -95deg)); }
.vx .flipout { opacity: calc(1 - var(--kr)); transform: rotateX(calc(var(--e) * 95deg)); }
.vx .mid     { opacity: calc(var(--o) * (1 - var(--k2))); transform: translateZ(1px) rotateX(calc((1 - var(--e)) * -95deg + var(--k2) * 95deg)); }
.vx .fillx   { transform: scaleX(var(--e)); transform-origin: left; }
.vx .draw    { stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--kr))); }
.vx .tap     { opacity: calc(var(--kr) * (1 - var(--kr)) * 4); transform: translateZ(var(--z, 30px)) scale(calc(1.5 - .7 * var(--kr))); }
.vx .pulse   { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid currentColor; opacity: calc(var(--kr) * (1 - var(--kr)) * 2.2); transform: translateZ(var(--z, 2px)) scale(calc(.6 + .75 * var(--e))); }   /* onde courte : elle reste dans la carte */
.vx .press   { transform: scale(calc(1 - .07 * sin(var(--kr) * 3.14159))); transform-style: preserve-3d; }
.vx .lift    { transform: translateZ(var(--z, 0px)); }

/* ── pièces communes (charte de l'application) ── */
.vx .card { inset: 0; background: #fff; border: 1px solid #dde4ed; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 22px -14px rgba(15,23,42,.22); transform-style: preserve-3d; }
.vx .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #d3dde9; transform: translateZ(-9px); }                         /* épaisseur */
.vx .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(calc(110deg + var(--sh) * 55deg), rgba(4,44,83,.035), rgba(255,255,255,0) 55%); }   /* lumière selon l'angle, très légère : la carte reste blanche */
.vx .sweep { inset: 0; border-radius: 16px; overflow: hidden; pointer-events: none; }
.vx .sweep i { left: -70%; top: 0; width: 60%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(24,95,165,.13), rgba(255,255,255,0)); transform: translateX(calc(var(--kr) * 300%)); }
.vx .bar { height: 7px; border-radius: 99px; background: #e3e8ef; }
.vx .bar.d { background: var(--ink2); height: 8px; }
.vx .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 99px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .005em; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(4,44,83,.35); }
.vx .chip::before { content: ''; position: static; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vx .chip.g { background: var(--gs); color: var(--g); } .vx .chip.b { background: var(--accs); color: var(--acc); } .vx .chip.a { background: var(--ams); color: #92400e; }
.vx .chip.solid { background: var(--g); color: #fff; }
.vx .float { background: linear-gradient(180deg, #fff, #fafcfe); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 30px -14px rgba(4,44,83,.42); }
.vx .ttl { font: italic 600 17.5px/1.2 'Spectral', Georgia, serif; letter-spacing: -.005em; color: #042c53; white-space: nowrap; }
.vx .cap { font: 700 9px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink4); white-space: nowrap; }
.vx .num { font: 500 11px/1 Inter, sans-serif; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx .pdf { width: 26px; height: 30px; border-radius: 5px; background: #b91c1c; color: #fff; font: 700 8.5px/30px Inter, sans-serif; text-align: center; letter-spacing: .04em; }
.vx .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accs); color: var(--acc); font: 700 10.5px/30px Inter, sans-serif; text-align: center; }
.vx .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--accs); }
.vx .ic svg { left: 8px; top: 8px; width: 14px; height: 14px; stroke: var(--acc); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* étiquette de spécialité, DANS la carte, en haut à gauche ; en bleu plein pendant que la carte joue */
.vx .tg { left: 16px; top: 14px; height: 24px; padding: 0 11px; border-radius: 99px; background: var(--accs); color: var(--acc); font: 700 10px/24px Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; transform: translateZ(20px); transition: background .35s, color .35s; }
.vx.is-act .tg { background: var(--acc); color: #fff; }
.vx .tx { font: 600 12px/1.3 Inter, sans-serif; color: var(--ink2); white-space: nowrap; }
/* encart : une ligne en retrait dans la carte */
.vx .rw { left: 16px; width: 228px; height: 54px; border-radius: 12px; background: #f6f8fb; border: 1px solid #e9eef4; transform-style: preserve-3d; }
.vx .ring { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(12,68,124,.25), 0 8px 16px rgba(4,44,83,.3); }
.vx .rw .ic { left: 11px; top: 11px; } .vx .rw .pulse { left: 26px; top: 26px; } .vx .rw .chip { right: 10px; top: 15px; box-shadow: none; }
.vx .rw .chip.solid { box-shadow: 0 6px 12px -6px rgba(21,128,61,.6); }

/* 1 · consentement signé (ophtalmologie) */
.v-sign .pad { left: 16px; top: 182px; width: 228px; height: 104px; border: 1.5px dashed #cbd5e1; border-radius: 12px; transform-style: preserve-3d; }
.v-sign .pad svg { left: 0; top: -6px; width: 228px; height: 112px; }
.v-sign .pad path { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v-sign .pen { left: 0; top: -6px; width: 0; height: 0; offset-rotate: 0deg; offset-distance: calc(var(--kr) * 100%);
  opacity: calc(min(var(--kr) * 40, 1) * (1 - var(--k2))); transform: translateZ(22px) translate(calc(var(--k2) * 10px), calc(var(--k2) * -28px)) rotate(calc(sin(var(--kr) * 26) * 5deg)); filter: drop-shadow(-6px 10px 6px rgba(15,23,42,.28)); }
.v-sign .pen svg { left: -5px; top: -59px; width: 64px; height: 64px; }
.v-sign .cb { left: 16px; top: 154px; width: 16px; height: 16px; border-radius: 4.5px; border: 1.5px solid #9fb6d1; background: #fff; }
.v-sign .cb.on { background: var(--acc); border-color: var(--acc); }
.v-sign .cb.on svg { left: -1.5px; top: -1.5px; width: 16px; height: 16px; }
.v-sign .cb.on path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-sign .ring { left: 9px; top: 147px; width: 30px; height: 30px; }
.v-sign .tap { --z: 26px; }

/* 2 · préparation confirmée (endoscopie) */
.v-phone .bw { left: 16px; right: 16px; top: 120px; height: 42px; }
.v-phone .btn { inset: 0; border-radius: 12px; font: 600 12.5px/42px Inter, sans-serif; text-align: center; }
.v-phone .b0 { background: linear-gradient(135deg, #1e5ba8, #0c447c 60%, #042c53); color: #fff; box-shadow: 0 4px 10px rgba(12,68,124,.3); }
.v-phone .b1 { background: var(--gs); color: var(--g); font-weight: 700; }
.v-phone .ring { left: 110px; top: 121px; }
.v-phone .tap { --z: 30px; }

/* 3 · date de l'acte (chirurgie) : cinq jalons bien espacés autour du jour J */
.v-date .rail { left: 30px; top: 173px; width: 200px; height: 2px; background: #e3e8ef; }
.v-date .fl1, .v-date .fl2 { top: 173px; height: 2px; width: 100px; background: var(--acc2); }
.v-date .fl1 { left: 30px; transform-origin: right; } .v-date .fl2 { left: 130px; transform-origin: left; }
.v-date .nd { top: 167px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2.5px solid var(--acc2); }
.v-date .nd.j { top: 163px; width: 22px; height: 22px; margin-left: -11px; background: var(--acc); border-color: var(--acc); }
.v-date .halo { left: 130px; top: 174px; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(24,95,165,.28); animation: vx-halo 2.2s ease-out infinite; }
@keyframes vx-halo { from { transform: translateZ(6px) scale(1); opacity: .9; } to { transform: translateZ(6px) scale(2.2); opacity: 0; } }
.v-date .lb { top: 191px; width: 44px; margin-left: -22px; text-align: center; font: 600 9.5px/1 Inter, sans-serif; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-date .lb.j { color: var(--acc); font-weight: 700; }
.v-date .doc { top: 143px; width: 13px; height: 15px; margin-left: -6.5px; }
.v-date .doc path { fill: #fff; stroke: var(--acc2); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.v-date .doc path + path { fill: none; stroke: #9cc3ee; }
.v-date .field { left: 16px; top: 92px; height: 38px; padding: 0 14px 0 38px; border-radius: 11px; border: 1.5px solid var(--acc2); background: #fff; font: 600 18.5px/35px 'Spectral', Georgia, serif; color: #042c53; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(4,44,83,.45); }
.v-date .field svg { left: 12px; top: 10px; width: 16px; height: 16px; stroke: var(--acc); fill: none; stroke-width: 2; stroke-linecap: round; }
.v-date .field .ch { position: static; opacity: var(--o); }
.v-date .field .caret { position: static; display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--acc2); animation: vx-blink 1s steps(2) infinite; }
@keyframes vx-blink { 50% { opacity: 0; } }

/* 5 · remise datée (chirurgie esthétique) */
.v-log .line { left: 44px; top: 96px; width: 172px; height: 2px; background: var(--line); }
.v-log .fill { left: 44px; top: 96px; width: 172px; height: 2px; background: var(--g); }
.v-log .nd { top: 86px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 4px var(--gs); }
.v-log .nd::after { content: ''; position: absolute; left: 8px; top: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.v-log .ghost { top: 88px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid #cbd5e1; }
.v-log .pulse { top: 97px; color: var(--g); }
.v-log .lb { top: 118px; width: 70px; margin-left: -35px; text-align: center; font: 600 10px/1 Inter, sans-serif; color: var(--ink2); }
.v-log .tm { top: 134px; width: 70px; margin-left: -35px; text-align: center; }
.v-log .chip { box-shadow: none; }

/* 6 · dossier archivé (cabinet médical) */
.v-folder .back { left: 34px; top: 66px; width: 192px; height: 108px; border-radius: 12px; background: linear-gradient(#cfe0f5, #b3cdec); }
.v-folder .tab { left: 34px; top: 52px; width: 84px; height: 30px; border-radius: 10px; background: #cfe0f5; }
.v-folder .sh { left: 48px; top: 62px; width: 164px; height: 96px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.v-folder .drop { left: 56px; top: 58px; width: 148px; height: 96px; border-radius: 7px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 20px -10px rgba(15,23,42,.35); opacity: min(calc(var(--kr) * 6), 1); transform: translate3d(0, calc((1 - var(--b)) * -40px), 12px) rotate(calc((1 - var(--e)) * -8deg)); }
.v-folder .front { left: 26px; top: 106px; width: 208px; height: 76px; border-radius: 14px; background: linear-gradient(#ffffff, #f1f6fc); border: 1px solid #dbe5f1; box-shadow: 0 -6px 14px -8px rgba(4,44,83,.25), 0 12px 20px -14px rgba(4,44,83,.4); transform-origin: 50% 100%; transform: translateZ(20px) rotateX(calc(sin(var(--kr) * 3.14159) * -22deg)); }

/* 7 · les deux parents (chirurgie pédiatrique) */
.v-par .pr { left: 16px; width: 228px; height: 52px; border-top: 1px solid #f1f5f9; transform-style: preserve-3d; }
.v-par .pr .av { left: 0; top: 11px; } .v-par .pr .bar { left: 42px; } .v-par .pr .chip { right: 0; top: 15px; box-shadow: none; } .v-par .pr .pulse { left: 15px; top: 26px; }

/* sept cartes en couronne autour du titre (ordinateur) : tailles liées à l'écran
   (largeur ET hauteur, pour tenir aussi sur un portable peu haut) */
@media (min-width: 901px) {
  .floaters .fl.fx { cursor: default; }
  .floaters .fl.fx:nth-child(1)  { left: 3%;    top: 7%;    width: min(17vw, 27vh); }                                  /* cabinet médical */
  .floaters .fl.fx:nth-child(3)  { left: calc(50% - min(11.5vw, 17.5vh)); top: 6%; width: min(23vw, 35vh); }           /* chirurgie */
  .floaters .fl.fx:nth-child(5)  { left: 79.5%; top: 3%;    width: min(18.5vw, 29vh); }                                  /* dentaire */
  .floaters .fl.fx:nth-child(6)  { left: 0;     top: 42%;   width: min(20.5vw, 33vh); }                                /* chirurgie esthétique */
  .floaters .fl.fx:nth-child(7)  { left: 84%;   top: 42%;   width: min(18vw, 28vh); }                                /* endoscopie */
  .floaters .fl.fx:nth-child(8)  { left: 19.5%; top: 64%;   width: min(21vw, 32vh); }                                  /* ophtalmologie */
  .floaters .fl.fx:nth-child(10) { left: 66.5%; top: 65%;   width: min(19vw, 30vh); }                                  /* chirurgie pédiatrique */
}
@media (prefers-reduced-motion: reduce) { .v-date .halo, .v-date .field .caret { animation: none; } }
/* téléphone et tablette : trois cartes au-dessus du titre, quatre en dessous,
   sans chevauchement ; étiquettes de spécialité agrandies (sur deux lignes au besoin).
   La rangée du bas est placée par rapport au TITRE (milieu de l'écran), pas en
   pourcentage de la hauteur : sur iPhone, un pourcentage l'envoyait sous la barre de Safari. */
@media (max-width: 900px) {
  /* Les deux rangées sont accrochées au TITRE, mesuré par le script (--th : haut de la
     ligne « Consentements… », --tb : bas du titre, en px depuis le haut du hero). Sur
     iPhone, 100vh compte la barre du navigateur : un pourcentage plaçait les cartes
     tantôt sur le titre, tantôt sous la barre. Sans mesure : valeurs de repli. */
  .floaters .fl.fx:nth-child(1)  { left: 3%;    top: auto; bottom: calc(100% - var(--th, 36vh) + 22px); width: 29vw; }   /* cabinet médical */
  .floaters .fl.fx:nth-child(3)  { left: 35.5%; top: auto; bottom: calc(100% - var(--th, 36vh) + 34px); width: 29vw; }   /* chirurgie */
  .floaters .fl.fx:nth-child(6)  { left: 68%;   top: auto; bottom: calc(100% - var(--th, 36vh) + 22px); width: 29vw; }   /* chirurgie esthétique */
  .floaters .fl.fx:nth-child(8)  { left: 2.5%;  top: calc(var(--tb, 60vh) + 22px); width: 22vw; }   /* ophtalmologie */
  .floaters .fl.fx:nth-child(10) { left: 26.5%; top: calc(var(--tb, 60vh) + 36px); width: 22vw; }   /* chirurgie pédiatrique */
  .floaters .fl.fx:nth-child(5)  { left: 51%;   top: calc(var(--tb, 60vh) + 22px); width: 22vw; }   /* dentaire */
  .floaters .fl.fx:nth-child(7)  { left: 75.5%; top: calc(var(--tb, 60vh) + 36px); width: 22vw; }   /* endoscopie */
  /* le titre est centré sur la zone VISIBLE (hauteur relevée par le script), pas sur 100vh */
  .hero-copy { bottom: auto; height: var(--hvis, 100%); }
  .vx .tg { left: 10px; top: auto; bottom: calc(100% - 40px); height: auto; max-width: 258px; padding: 7px 14px; border-radius: 16px; white-space: normal; line-height: 1.12; font-size: 19px; letter-spacing: .05em; background: #fff; border: 1.5px solid var(--acc2); box-shadow: 0 10px 18px -9px rgba(4,44,83,.5); }
  .vx.is-act .tg { border-color: var(--acc); }
  .v-sign .tg, .v-par .tg, .v-notif .tg, .v-phone .tg { font-size: 21px; letter-spacing: .02em; padding: 8px 13px; border-radius: 18px; max-width: 252px; }
}

/* ═══════════════════════════════════════════════════════════
   AJOUT FILDARY — hero : titre « Suivez vos patients sans y penser. /
   Fildary s'en charge. » La première ligne est plus longue que l'ancienne :
   le corps du titre suit la largeur de l'écran pour qu'elle reste entre
   les cartes (ordinateur) et dans les marges (téléphone).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) { .hero-title { font-size: clamp(26px, 2.7vw, 50px); } }   /* « Simplifiez votre pratique, libérez votre secrétariat. » tient sur une ligne entre les cartes */
@media (max-width: 900px) { .hero-title { font-size: clamp(22px, 6.6vw, 40px); } }
/* la ligne « Consentements, devis… et tout autre document » est plus longue :
   sur un écran d'ordinateur étroit, elle passe sur deux lignes pour rester entre les cartes */
@media (min-width: 901px) { .hero-kicker { max-width: 56vw; margin-bottom: 22px; } }   /* reste entre les cartes ; sur un écran étroit, la première phrase passe sur deux lignes */
.hero-kicker .hk2 { display: block; }   /* « Consignes suivies et confirmées. » sur sa propre ligne */
/* un seul témoignage en ligne (7 octobre 2026) : ni points de carrousel, ni « Faites glisser » */
.qx-one .qx-dots, .qx-one .qx-swipe { display: none !important; }