/* ============================================================
   Lightworker Collective — Composants (components.css)
   Page « Aide » (réorientation douce). Nav, boutons, hero sombre,
   placeholder vidéo, poème, recadrage, cartes de services en verre
   liquide, bande CTA, footer, formulaire <dialog>.
   Toutes les couleurs et polices viennent de brand.css.

   STRATÉGIE RESPONSIVE (charte §4) — pensée dès le départ :
   • un seul seuil qui compte : 900px ;
   • aucune media query ne redéfinit une taille de police : tout est
     en clamp() fluide, et l'échelle de base :root{font-size} est
     indexée sur la HAUTEUR (bloc en fin de fichier) ;
   • tout visuel en px/vw pur reçoit une borne vh (fin de fichier) ;
   • le bloc @media (min-width:900px) and (max-height:780px) reste
     EN FIN DE FICHIER (question de cascade, pas de spécificité).
   ============================================================ */

/* Décalage d'ancre sous la nav sticky */
[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------
   Navigation — sticky, TRANSPARENTE sur le hero, fond révélé au
   scroll (--nav-op posée par main.js). Le hero de cette page étant
   SOMBRE (theme-charcoal), la nav reste en crème et son fond révélé
   est un verre foncé : une seule couleur de texte, lisible sur
   TOUTES les sections (charte §6.1, adaptée au contexte sombre).
   ------------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-soft);
  --ink: var(--cream);
  --focus-ring: var(--cream);
  --hairline: color-mix(in srgb, var(--cream) 16%, transparent);
}

/* Couche de fond translucide + blur (verre FONCÉ), révélée graduellement. */
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--charcoal) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: var(--nav-op, 0);
  transition: opacity 0.25s var(--ease-soft);
  pointer-events: none;
}

.site-nav.is-scrolled { border-bottom-color: var(--hairline); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: 0.85rem;
  /* Header PLEINE LARGEUR : logo près du bord gauche, bouton près du bord droit. */
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 3.5vw, 3rem);
}

/* Le logo reste à GAUCHE et pousse le reste à DROITE. */
.nav-inner .logo { margin-right: auto; margin-left: clamp(0.5rem, 1.3vw, 1.4rem); }

.nav-links { display: none; /* mobile : dans le panneau burger */ }

.nav-links a {
  font-family: var(--font-display);   /* Royal */
  font-weight: 500;
  font-size: 0.88rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  text-decoration: none;
  position: relative;
  padding-block: 0.3em;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-celestial-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-soft);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* Bouton CTA de la nav : bleu #4B6D77 (lisible sur le verre foncé), hover bleu clair. */
.nav-cta {
  margin-left: 0;
  white-space: nowrap;
  --btn-bg: #4B6D77;
  --btn-ink: var(--cream);
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft);
}
.nav-cta:hover,
.nav-cta:focus-visible { --btn-bg: var(--color-celestial-light); }
.nav-cta .btn-arrow { display: inline-flex; align-items: center; }
.nav-cta .btn-arrow svg { width: 1.05em; height: 1.05em; display: block; }

/* Burger minimaliste (crème sur fond sombre) */
.nav-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.burger-lines,
.burger-lines::before,
.burger-lines::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cream);
  transition: transform 0.35s var(--ease-soft), opacity 0.35s;
}

.burger-lines { position: relative; }
.burger-lines::before { position: absolute; top: -7px; }
.burger-lines::after  { position: absolute; top: 7px; }

.site-nav.is-open .burger-lines { background: transparent; }
.site-nav.is-open .burger-lines::before { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .burger-lines::after  { transform: translateY(-7px) rotate(-45deg); }

/* Panneau mobile (verre foncé) */
.site-nav.is-open .nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem) 1.8rem;
  background: color-mix(in srgb, var(--charcoal) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-nav.is-open .nav-links a { font-size: 1.05rem; padding-block: 0.5em; color: var(--cream); }

@media (min-width: 1024px) {
  .nav-links { display: flex; gap: 1.9rem; }
  .nav-burger { display: none; }
  .nav-cta { margin-left: 0; }
}

/* ------------------------------------------------------------
   Logotype LIGHTWORKER — GELÉ (demande cliente). Polices
   historiques épinglées (Cormorant + Poppins), une seule couleur
   héritée du fond via --ink.
   ------------------------------------------------------------ */

.logo {
  display: inline-block;
  text-decoration: none;
  color: var(--ink, var(--cream));
  line-height: 1;
  white-space: nowrap;
}

.logo-light {
  font-family: var(--font-logo-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
}

.logo-worker {
  font-family: var(--font-logo-sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  margin-left: 0.1em;
}

.logo-collective {
  display: block;
  font-family: var(--font-logo-sans);
  font-weight: 500;
  font-size: 0.52rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.38em;
}

/* Logotype généreux du footer */
.footer-brand .logo-light { font-size: 2.4rem; }
.footer-brand .logo-worker { font-size: 1.58rem; }
.footer-brand .logo-collective { font-size: 0.62rem; }

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);   /* Royal */
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  line-height: 1;
  text-decoration: none;
  padding: 0.78em 1.75em;
  border-radius: var(--radius-btn);
  background: var(--btn-bg, var(--charcoal));
  color: var(--btn-ink, var(--cream));
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}

.btn-arrow { display: inline-block; transition: transform 0.35s var(--ease-soft); }

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--powder-blue) 45%, transparent);
}

.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow { transform: translateX(3px); }

.btn--sm { padding: 0.62em 1.4em; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}

/* Bouton « appel » — variante douce (fond presque blanc, texte bleu, flèche
   cerclée). Au survol, un fond plein bleu balaye G->D, le texte passe blanc,
   la flèche cerclée s'inverse. C'est le CTA doux signature. */
.btn--call {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-block: 1.05em;
  background: color-mix(in srgb, var(--color-celestial-tides) 9%, var(--white));
  color: var(--color-celestial-tides);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-celestial-tides) 28%, transparent);
  transition: color 0.35s var(--ease-soft), transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.btn--call::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-celestial-tides);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-soft);
}
.btn--call .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--color-celestial-tides);
  color: var(--white);
  font-size: 0.82em;
  line-height: 1;
  transition: background-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.btn--call .btn-arrow svg { width: 0.95em; height: 0.95em; display: block; }
.btn--call:hover,
.btn--call:focus-visible {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px transparent;
}
.btn--call:hover::before,
.btn--call:focus-visible::before { transform: scaleX(1); }
.btn--call:hover .btn-arrow,
.btn--call:focus-visible .btn-arrow {
  background: #fff;
  color: var(--color-celestial-tides);
}

/* Même bouton en VERRE LIQUIDE BLEU (bande CTA, hero sombre) : pilule bleue
   ~72 % translucide + flou d'arrière-plan, texte blanc, reflet haut ;
   survol se remplit de bleu clair. */
.btn--call.btn--blue {
  /* Verre bleu à ~30 % d'opacité : on voit la photo à travers, juste teintée
     de bleu. Le backdrop-filter dépolit l'arrière-plan pour garder le texte net. */
  background: color-mix(in srgb, var(--color-celestial-tides) 30%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  color: #fff;
  text-shadow: 0 1px 6px color-mix(in srgb, var(--color-celestial-tides) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent),
    0 12px 30px color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
}
.btn--call.btn--blue::before { background: color-mix(in srgb, var(--color-celestial-light) 60%, transparent); }
.btn--call.btn--blue .btn-arrow {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-celestial-tides);
}
.btn--call.btn--blue:hover,
.btn--call.btn--blue:focus-visible { color: #fff; }
.btn--call.btn--blue:hover .btn-arrow,
.btn--call.btn--blue:focus-visible .btn-arrow {
  background: #fff;
  color: var(--color-celestial-tides);
}

/* ------------------------------------------------------------
   Têtes de section
   ------------------------------------------------------------ */

.section-head { max-width: 46rem; margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1.3rem; font-size: 1.14rem; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Badges + puces de situations
   ------------------------------------------------------------ */

.badge-row { display: flex; flex-wrap: wrap; gap: 0.65rem 0.8rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.6em 1.15em;
  border-radius: var(--radius-btn);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--white) 45%, transparent);
}

/* Rangée de « puces de situations » — la personne se reconnaît. Verre doux. */
.situation-row {
  display: flex;
  flex-wrap: wrap;                 /* mobile : peut passer à la ligne */
  justify-content: center;
  gap: 0.45rem 0.5rem;
  max-width: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
/* Desktop : les 5 tags tiennent sur UNE seule ligne. */
@media (min-width: 900px) { .situation-row { flex-wrap: nowrap; } }

.situation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.7rem;               /* un peu plus petit */
  letter-spacing: 0.04em;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-btn);
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 22%, transparent);
}
.situation-chip > span[aria-hidden] { color: var(--color-celestial-tides); opacity: 0.7; }

/* ------------------------------------------------------------
   Médias + placeholders d'images (fallback lwImgFallback)
   ------------------------------------------------------------ */

.media {
  position: relative;
  border-radius: var(--radius-soft);
  overflow: hidden;
  background: color-mix(in srgb, var(--sage) 20%, var(--cream));
}
.media img,
.media video { width: 100%; height: 100%; object-fit: cover; }

.img-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: inherit;
  border: 1.5px dashed var(--cream);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sage) 36%, var(--cream)),
    color-mix(in srgb, var(--teal) 28%, var(--cream))
  );
}
.img-placeholder > span {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--charcoal) 78%, var(--cream));
  padding: 0.9em 1.3em;
  border-radius: 12px;
  background: color-mix(in srgb, var(--white) 38%, transparent);
}
.media.is-missing img { opacity: 0; }
.media.is-missing .img-placeholder { display: flex; }

.ratio-45  { aspect-ratio: 4 / 5; }
.ratio-34  { aspect-ratio: 3 / 4; }
.ratio-11  { aspect-ratio: 1 / 1; }

/* ------------------------------------------------------------
   HERO — sombre, intime (theme-charcoal hero--dark). Colonne
   centrée : badge · H1 doux · lead · 2 CTA · accroche italique.
   2 blooms bleus qui respirent (max 2 par écran).
   ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(120px, 20vh, 210px) var(--section-y);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Fond photo (groupe de la retraite) + « petit filtre foncé » : un voile
   charcoal dégradé, plus dense en bas, pour garder le texte crème lisible sans
   noyer la photo. background-color = repli si l'image manque. */
.hero.hero--dark {
  background-color: var(--charcoal);
  background-image:
    /* Voile central doux : protège la colonne de texte (photo brillante,
       visages) sans assombrir les bords -> la photo reste visible. */
    radial-gradient(92% 72% at 50% 45%,
      color-mix(in srgb, var(--charcoal) 40%, transparent) 0%,
      transparent 74%),
    /* Voile vertical léger, un peu plus dense en bas (CTA + accroche). */
    linear-gradient(180deg,
      color-mix(in srgb, var(--charcoal) 50%, transparent) 0%,
      color-mix(in srgb, var(--charcoal) 44%, transparent) 45%,
      color-mix(in srgb, var(--charcoal) 72%, transparent) 100%),
    url('../img/fond-hero.webp?v=2');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero--dark .eyebrow { color: var(--color-celestial-light); }
.hero--dark h1 { color: var(--cream); }
.hero--dark .accent { color: var(--color-celestial-light); }
/* Ombre douce : sécurise la lisibilité du texte nu par-dessus la photo,
   ce qui permet de garder le filtre léger. */
.hero--dark .hero-title,
.hero--dark .hero-lead,
.hero--dark .hero-accroche { text-shadow: 0 2px 18px color-mix(in srgb, var(--charcoal) 62%, transparent); }
.hero--dark .btn--ghost {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cream) 45%, transparent);
}
.hero--dark .btn--ghost:hover,
.hero--dark .btn--ghost:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--cream);
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.15rem, 2.6vw, 1.8rem);
  max-width: 48rem;
  margin-inline: auto;
}

/* Eyebrow du hero, façon pilule douce « Tu es au bon endroit ». */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.55em 1.2em;
  border-radius: var(--radius-btn);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-celestial-light);
  /* Verre foncé : lisible aussi bien sur la photo que sur le repli charcoal. */
  background: color-mix(in srgb, var(--charcoal) 42%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--color-celestial-light) 34%, transparent);
}
.hero-eyebrow > span[aria-hidden] { opacity: 0.85; }

.hero-title { margin: 0; }
.hero-lead {
  margin: 0;
  max-width: 40rem;
  font-family: var(--font-editorial);   /* Georgia */
  font-weight: 300;                      /* Georgia n'a pas de coupe « thin » : rendu au plus léger disponible (~regular) */
  font-size: 1rem;                       /* taille réduite (avant 1.16rem) */
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--cream) 84%, transparent);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  margin-top: 0.4rem;
}
.hero-cta-row .btn { margin-top: 0; }

/* Accroche Georgia italique sous les CTA */
.hero-accroche {
  margin: 0.4rem 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-celestial-light) 90%, var(--cream));
}

/* ------------------------------------------------------------
   Mot vidéo de Kiki — média (gauche) + intention (droite).
   Placeholder vidéo propre : la vraie vidéo sera intégrée plus tard.
   ------------------------------------------------------------ */

.video-feature { background-color: var(--cream); }

.video-feature-grid {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .video-feature-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.video-feature-media { width: 100%; max-width: 420px; margin-inline: auto; }
@media (min-width: 900px) {
  .video-feature-media { margin-inline: 0; }
}

.video-frame {
  position: relative;
  border-radius: var(--radius-soft);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--sage) 20%, var(--cream));
  box-shadow: 0 32px 80px color-mix(in srgb, var(--charcoal) 16%, transparent);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder : dégradé de marque + blooms, en attendant la vraie vidéo. */
.video-frame--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 85% at 28% 8%, color-mix(in srgb, var(--color-celestial-light) 34%, transparent), transparent 58%),
    radial-gradient(120% 90% at 82% 100%, color-mix(in srgb, var(--aubergine) 60%, transparent), transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--aubergine) 85%, #000), var(--charcoal));
}

.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--charcoal) 40%, transparent);
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.video-play svg { width: 26px; height: 26px; color: var(--charcoal); margin-left: 4px; }
.video-play:hover,
.video-play:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--powder-blue) 55%, transparent);
}

/* Étiquette « vidéo à venir » en bas du cadre */
.video-tag {
  position: absolute;
  left: 50%;
  bottom: clamp(0.9rem, 2vw, 1.3rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.05em;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: color-mix(in srgb, var(--charcoal) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
}

.video-feature-copy { max-width: 40rem; }
.video-feature-copy .eyebrow { margin-bottom: 0.9rem; }
.video-feature-copy h2 { margin-bottom: 1.1rem; }
.video-feature-copy p { color: var(--ink-soft); font-size: 1.1rem; }
.video-feature-copy .btn--call { margin-top: 1.8rem; }

/* ------------------------------------------------------------
   « Ce que tu vis » — poème sur bande bleue (theme-aubergine)
   ------------------------------------------------------------ */

.poeme {
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  line-height: 1.95;
  max-width: 44rem;
  margin-inline: auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;   /* Cormorant Light — vrai serif fin */
  text-align: center;
}
.poeme .poeme-line { display: block; }
.poeme .poeme-line + .poeme-line { margin-top: 0.3em; }

/* La « chute » — plus forte, en Royal, détachée du reste. */
.poeme-chute {
  display: block;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.poeme-chute em.accent { font-family: var(--font-accent); color: var(--color-celestial-light); }

/* ============================================================
   SCÈNE « Le mot de Kiki » → « Ce que tu vis » (épinglée + scrubée).
   Base (mobile / sans-JS / reduced-motion) : wrappers transparents, piste à 0
   -> les deux sections s'empilent normalement (le poème garde son reveal IO).
   Enrichi (.is-on, posé par main.js sur desktop) : le mot de Kiki s'épingle,
   la section bleue se fond PAR-DESSUS, puis le titre (mot par mot) et le poème
   se révèlent au scroll. Voir main.js / initKikiReveal.
   ============================================================ */
.ku-runway { height: 0; }

/* Scène épinglée : activée dès 380px (mobile inclus). Le JS ne la déclenche que
   si le contenu TIENT dans 100svh (fits()) ; sinon repli statique -> jamais cassé.
   Les valeurs mobiles sont resserrées dans le bloc @media (max-width:899px) plus bas. */
@media (min-width: 380px) {
  .ku-reveal.is-on { position: relative; }

  .ku-reveal.is-on .ku-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  /* Les deux sections occupent le MÊME emplacement (superposées) pendant la scène. */
  .ku-reveal.is-on .ku-stage > section {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    padding-block: clamp(1.5rem, 5vh, 4rem);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .ku-reveal.is-on #mot-de-kiki { z-index: 1; }

  /* La section bleue se fond PAR-DESSUS (opacité scrubée 0 → 1 par le JS). */
  .ku-reveal.is-on #ce-que-tu-vis {
    z-index: 2;
    opacity: 0;
    will-change: opacity;
  }

  /* En scène, titre (mots) + poème pilotés au pixel : pas de transition (sinon
     décalage avec le scroll). L'en-tête reste « allumée » (elle apparaît avec le
     fondu du bleu) ; les mots et les lignes sont posés par le JS. */
  .ku-reveal.is-on #ce-que-tu-vis .section-head {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ku-reveal.is-on .ku-word {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform;
  }
  /* Paragraphes + cartes : pilotés au pixel par le JS -> pas de transition. */
  .ku-reveal.is-on #ce-que-tu-vis .recadrage-para,
  .ku-reveal.is-on #ce-que-tu-vis .reassure-card {
    opacity: 0;
    transition: none;
    will-change: opacity, transform;
  }
  /* Mots des paragraphes : état « gris » avant révélation (JS scrube l'opacité). */
  .ku-reveal.is-on #ce-que-tu-vis .ku-pword {
    opacity: 0.22;
    transition: none;
  }
  /* Les 2 paragraphes se SUPERPOSENT (même cellule) -> relais en fondu, jamais
     affichés en même temps. */
  .ku-reveal.is-on #ce-que-tu-vis .reveal-stack { gap: 0; }
  .ku-reveal.is-on #ce-que-tu-vis .reveal-stack > .recadrage-para { grid-area: 1 / 1; }

  /* Piste TRÈS LONGUE : révélation « texte » lente + inertie + temps mort. Plus
     de distance -> un scroll rapide reste dans la scène le temps du reveal. */
  .ku-reveal.is-on .ku-runway { height: 640vh; height: 640svh; }

  /* La section suivante MONTE par-dessus le poème épinglé — motion AUTO
     (transition CSS DÉCLENCHÉE au scroll : main.js pose .is-up au seuil). Montée
     DOUCE : 1,5 s + easing gentil (départ posé, arrivée qui décélère) pour qu'elle
     ne « claque » plus. Elle chevauche le dernier écran de la scène (margin
     négatif), démarre EN BAS (translateY 100vh) et remonte pour recouvrir ;
     fond opaque + ombre haute = couverture nette. */
  .ku-reveal.is-on + #services {
    position: relative;
    z-index: 5;
    margin-top: -100vh;
    transform: translateY(100vh);
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.28);
  }
  .ku-reveal.is-on + #services.is-up { transform: translateY(0); }
}

/* ============================================================
   SCÈNE ÉPINGLÉE — ADAPTATION MOBILE (< 900px).
   Le contenu desktop (titre + 1 paragraphe + 3 cartes visibles ENSEMBLE) est trop
   haut pour un écran de téléphone. On COMPACTE et surtout on fait PARTAGER la même
   zone au poème et aux cartes : le paragraphe se révèle, se fond, puis les cartes
   s'y posent (chorégraphie séquentielle pilotée par le JS). -> tout tient dans 100svh.
   ============================================================ */
@media (max-width: 899px) {
  /* Rembourrage vertical resserré : + de place pour le contenu. */
  .ku-reveal.is-on .ku-stage > section { padding-block: clamp(0.8rem, 2.5vh, 1.6rem); }

  /* Poème + cartes dans la MÊME cellule de grille (superposés). */
  .ku-reveal.is-on #ce-que-tu-vis .container {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
  }
  .ku-reveal.is-on #ce-que-tu-vis .section-head {
    grid-area: 1 / 1;
    margin-bottom: clamp(1rem, 3vh, 1.6rem);
  }
  .ku-reveal.is-on #ce-que-tu-vis .recadrage-lede,
  .ku-reveal.is-on #ce-que-tu-vis .reassure-grid {
    grid-area: 2 / 1;    /* même cellule -> superposition */
    margin: 0;
    width: 100%;
    align-self: start;   /* collé sous le titre (plus le gros vide au centre) */
  }

  /* Compactage pour tenir dans la hauteur. */
  .ku-reveal.is-on #ce-que-tu-vis .recadrage-para { font-size: 1.16rem; line-height: 1.55; }
  /* Cartes PLUS PETITES (rembourrage, icône et textes resserrés). */
  .ku-reveal.is-on #ce-que-tu-vis .reassure-grid { gap: 0.7rem; }
  .ku-reveal.is-on #ce-que-tu-vis .reassure-card { padding: 0.7rem 1rem; gap: 0.25rem; }
  .ku-reveal.is-on #ce-que-tu-vis .reassure-icon { width: 32px; height: 32px; margin-bottom: 0.05rem; }
  .ku-reveal.is-on #ce-que-tu-vis .reassure-icon .check { width: 16px; height: 16px; }
  .ku-reveal.is-on #ce-que-tu-vis .reassure-title { font-size: 0.9rem; }
  .ku-reveal.is-on #ce-que-tu-vis .reassure-desc { font-size: 0.82rem; line-height: 1.4; }

  /* « Le mot de Kiki » (base de la scène) : vidéo PLUS GRANDE + plus d'air avant
     le texte (le texte descend), tout en gardant la base dans 100svh. */
  .ku-reveal.is-on #mot-de-kiki .video-feature-media { max-width: 260px; }
  .ku-reveal.is-on #mot-de-kiki .video-feature-grid { gap: 2.8rem; }
  .ku-reveal.is-on #mot-de-kiki .video-feature-copy h2 { font-size: 1.35rem; }
  .ku-reveal.is-on #mot-de-kiki .video-feature-copy p { font-size: 0.9rem; line-height: 1.45; }

  /* Étiquette « Message de Kiki · vidéo à venir » resserrée : elle débordait du
     cadre étroit (rognée à droite). Plus petite + interlettrage réduit -> tient. */
  .video-tag { font-size: 0.58rem; letter-spacing: 0.05em; padding: 0.45em 0.85em; }

  /* Montée AU SCROLL (PAS de transform) sur mobile : la section monte par-dessus la
     scène épinglée grâce au margin négatif + z-index, EN MÊME TEMPS que son image
     sticky -> parfaitement synchronisé (le transform désynchronisait l'image fixe et
     laissait une bande noire). On garde le calage svh. */
  .ku-reveal.is-on + #services {
    margin-top: -100svh;
    transform: none;
    transition: none;
  }
  .ku-reveal.is-on + #services.is-up { transform: none; }

  /* « Quelle que soit ta situation » sur MOBILE : image DÉDIÉE qui STICK dans le
     viewport pendant que le contenu défile par-dessus (au lieu d'être étirée sur
     toute la hauteur). La couche sticky = ::before (100svh, hors flux). On n'utilise
     PAS background-attachment:fixed (ignoré par Safari iOS). Le padding vertical
     passe sur .container pour que l'image parte du tout haut de la section. */
  #services.section {                /* .section => spécificité > la règle #services de base */
    background-image: none;
    padding-block: 0;
    isolation: isolate;
    /* CLIP (pas hidden) : borne l'image sticky à la section pour qu'elle ne déborde
       PAS sur la bande bleue suivante. `clip` ne casse pas `position: sticky`
       (contrairement à `hidden` qui créerait un conteneur de défilement). */
    overflow: clip;
  }
  #services::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    height: 100svh;
    margin-bottom: -100svh;   /* hors flux : le contenu passe par-dessus */
    z-index: -1;
    pointer-events: none;
    background-color: var(--charcoal);
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--charcoal) 40%, transparent) 0%,
        color-mix(in srgb, var(--charcoal) 50%, transparent) 55%,
        color-mix(in srgb, var(--charcoal) 62%, transparent) 100%),
      url('../img/fond-section-mobile.webp?v=1');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #services > .container { padding-block: clamp(3.5rem, 12vw, 6rem); }
}

/* Sécurité : jamais de scène épinglée en reduced-motion (le JS ne l'active pas,
   mais on neutralise .is-on au cas où). */
@media (prefers-reduced-motion: reduce) {
  .ku-reveal.is-on .ku-stage { position: static; height: auto; overflow: visible; }
  .ku-reveal.is-on .ku-stage > section { position: relative; inset: auto; }
  .ku-reveal.is-on #ce-que-tu-vis { opacity: 1; }
  .ku-reveal.is-on .ku-runway { height: 0; }
  .ku-reveal.is-on + #services { margin-top: 0; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   « Ce n'est pas un refus » — recadrage (theme-white).
   Intro éditorial (1re phrase en lead Georgia) + 3 cartes rassurantes
   (icône crochet cerclée qui se dessine). Voir animations.css check-draw.
   ------------------------------------------------------------ */

.recadrage-lede { max-width: 42rem; margin-inline: auto; text-align: center; }

/* Les DEUX paragraphes ont EXACTEMENT le même réglage visuel (Georgia, grand).
   En repli ils s'empilent (grid + gap) ; en scène ils se superposent pour se
   relayer en fondu (voir .ku-reveal.is-on plus bas). */
.reveal-stack { display: grid; gap: 1.6rem; }

.recadrage-para {
  margin: 0;
  font-family: var(--font-editorial);   /* Georgia */
  font-size: clamp(1.24rem, 2.2vw, 1.55rem);
  line-height: 1.6;
  color: var(--charcoal);
}

/* Mots de la révélation « texte » (gris -> plein), pilotés par le JS en scène. */
.ku-pword { display: inline; }

.reassure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 760px) { .reassure-grid { grid-template-columns: repeat(3, 1fr); } }

.reassure-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: clamp(1.7rem, 3vw, 2.3rem) clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-celestial-tides) 5%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 14%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--charcoal) 6%, transparent);
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}
.reassure-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-celestial-tides) 32%, transparent);
  box-shadow: 0 28px 62px color-mix(in srgb, var(--charcoal) 11%, transparent);
}

.reassure-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--white);
  background: var(--color-celestial-tides);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-celestial-tides) 35%, transparent);
  margin-bottom: 0.35rem;
}
.reassure-icon .check { width: 26px; height: 26px; color: var(--white); }

.reassure-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.28;
  text-transform: uppercase;      /* titres des cartes en MAJUSCULE (demande cliente) */
  letter-spacing: 0.045em;
  color: var(--charcoal);
}
.reassure-desc {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 26ch;
}

/* Contexte BLEU (section épinglée theme-aubergine) : textes clairs + cartes en
   verre translucide clair (sans backdrop-filter -> pas de piège Chrome aux
   coins ; le bleu transparaît). */
.theme-aubergine .recadrage-para { color: var(--cream); }

.theme-aubergine .reassure-card {
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--cream) 22%, transparent);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.theme-aubergine .reassure-card:hover {
  border-color: color-mix(in srgb, var(--cream) 45%, transparent);
  box-shadow:
    0 30px 66px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.theme-aubergine .reassure-icon {
  background: var(--color-celestial-light);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.theme-aubergine .reassure-title { color: var(--cream); }
.theme-aubergine .reassure-desc { color: color-mix(in srgb, var(--cream) 76%, transparent); }

/* ------------------------------------------------------------
   Services adaptés — cartes en VERRE LIQUIDE (recette .lwf-boite :
   flou dans un ::before, parent overflow:hidden + isolation:isolate
   -> évite le piège Chrome des taches dans les coins §6.3).
   ------------------------------------------------------------ */

/* Container plus large pour cette section : cartes plus larges -> le bouton
   « Discuter avec Kiki » tient sur une seule ligne (plus long). L'en-tête et les
   puces gardent leur propre max-width, donc restent centrées/étroites.
   Fond photo (session) + voile crème dégradé : plus dense en haut (titre/texte
   lisibles), plus léger en bas où les cartes en verre GIVRENT la photo. */
#services {
  --container: 1280px;
  /* Section plus BASSE (moins de padding) : son ratio se rapproche de celui de la
     photo (16/9) -> `cover` recadre peu = image bien moins zoomée, plein cadre. */
  padding-block: clamp(70px, 7.5vw, 110px);
  background-color: var(--charcoal);   /* repli si l'image manque */
  background-image:
    /* Voile SOMBRE (charcoal) : la photo devient nettement plus foncée / feutrée
       (ambiance nocturne). Les cartes en verre clair ressortent, et le texte de
       l'en-tête passe en clair (voir overrides plus bas). */
    linear-gradient(180deg,
      color-mix(in srgb, var(--charcoal) 38%, transparent) 0%,
      color-mix(in srgb, var(--charcoal) 46%, transparent) 42%,
      color-mix(in srgb, var(--charcoal) 56%, transparent) 100%),
    url('../img/fond-section.webp?v=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fond désormais SOMBRE : on force le texte de l'en-tête en clair (le thème
   `cream` vise un fond clair, ses encres foncées deviendraient illisibles). Les
   CARTES restent en verre clair à texte foncé — inchangées. */
#services .section-head { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 26px rgba(0, 0, 0, 0.55); }
/* Eyebrow en PASTILLE « verre liquide » blanche à texte BLEU (demande client).
   inline-block => pilule dimensionnée au contenu, centrée par le text-align du
   .section-head. Le flou est porté par le ::before clippé (overflow:hidden +
   isolation) pour éviter la tache d'angle de Chrome (recette charte §6.3). */
#services .section-head .eyebrow {
  display: inline-block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-celestial-tides);          /* texte BLEU, lisible sur blanc */
  padding: 0.6em 1.35em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--white) 78%, transparent);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.20),
    0 3px 10px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);     /* arête haute (verre) */
  text-shadow: none;                              /* annule le halo hérité du .section-head */
}
#services .section-head .eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 150% at 22% -25%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 62%),
    color-mix(in srgb, var(--white) 60%, transparent);   /* verre blanc translucide */
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
}
#services .section-head h2 { color: var(--cream); }
#services .section-head .lead { color: color-mix(in srgb, var(--cream) 86%, transparent); }

/* Puces de situations en VERRE bleu translucide + texte clair (pour se poser sur
   le fond sombre au lieu de pastilles blanches criardes). */
#services .situation-chip {
  color: color-mix(in srgb, var(--cream) 92%, transparent);
  background: color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  border-color: color-mix(in srgb, var(--cream) 32%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#services .situation-chip > span[aria-hidden] { color: var(--color-celestial-light); opacity: 0.95; }

.svc-grid {
  display: grid;
  gap: clamp(1.7rem, 3vw, 2.7rem);   /* plus d'air entre les 4 cartes */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}

.svc-card {
  position: relative;
  isolation: isolate;   /* garde les pseudos en z-index négatif à l'intérieur */
  overflow: hidden;     /* détoure l'ENFANT ::before (piège Chrome) */
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: transparent;   /* AUCUN flou ici */
  border: 1px solid color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.06),
    inset 0 2px 1px rgba(255, 255, 255, 0.9),          /* arête haute (3D) */
    inset 0 -2px 4px color-mix(in srgb, var(--color-celestial-tides) 10%, transparent);
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
/* La matière : teinte + flou, détourée par l'overflow du parent. */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--white) 62%, transparent),
      color-mix(in srgb, var(--color-celestial-light) 12%, color-mix(in srgb, var(--white) 52%, transparent)) 52%,
      color-mix(in srgb, var(--white) 56%, transparent));
  /* Flou FAIBLE (20 -> 4px) : verre nettement translucide, on voit la photo à
     travers la carte. L'opacité (50 %) garde le texte foncé lisible par-dessus. */
  -webkit-backdrop-filter: blur(4px) saturate(1.45);
  backdrop-filter: blur(4px) saturate(1.45);
}
/* Reflet spéculaire par-dessus la matière. */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 68% at 18% -8%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 26%);
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.08),
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px color-mix(in srgb, var(--color-celestial-tides) 14%, transparent);
}

.svc-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--color-celestial-tides);
  background: color-mix(in srgb, var(--color-celestial-tides) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--color-celestial-tides) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  margin-bottom: 0.3rem;
}
.svc-icon svg { width: 24px; height: 24px; }

.svc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.28;
  text-transform: uppercase;      /* titres des cartes en MAJUSCULE */
  letter-spacing: 0.04em;
  color: var(--charcoal);
}
/* Halo blanc discret : détache le texte foncé des zones sombres de la photo qui
   transparaissent à travers le verre translucide (lisibilité sans opacifier). */
.svc-title, .svc-desc { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
/* margin-bottom:auto = c'est le TEXTE qui absorbe l'espace libre (au lieu du
   bouton) -> le bouton garde son propre écart fixe au-dessus, sur toutes les
   cartes, même quand le texte est long. */
.svc-desc { font-size: 0.9rem; line-height: 1.55; color: color-mix(in srgb, var(--charcoal) 88%, var(--white)); margin-bottom: auto; }

/* Bouton d'appel = variante DOUCE .btn--call (pensée pour les fonds clairs) :
   pilule presque blanche, texte + flèche cerclée BLEUS, balayage bleu au survol.
   S'accorde avec les cartes en verre clair. Compacte, largeur du contenu, en bas. */
.svc-btn {
  margin-top: 1.4rem;       /* écart garanti au-dessus du bouton (le texte pousse via son margin-bottom:auto) */
  align-self: flex-start;   /* pilule à gauche, comme le contenu de la carte */
}
.svc-btn.btn--call {
  padding: 0.7em 1.3em;     /* bouton compact */
  font-size: 11.5px;        /* texte plus petit (au lieu de 13px) */
  letter-spacing: 1.1px;
  border-radius: 22px;      /* même arrondi que les cartes (au lieu de la pilule) */
}

/* Les 4 cartes FLOTTENT doucement (gauche-droite + haut-bas), chacune à son
   rythme -> mouvement organique. On anime la propriété `translate` (indépendante
   de `transform`) pour composer avec le survol/reveal sans conflit. Coupé sous
   prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes svc-float-a {
    0%, 100% { translate: 0 0; }
    25%      { translate: 7px -9px; }
    50%      { translate: -5px 6px; }
    75%      { translate: 5px 8px; }
  }
  @keyframes svc-float-b {
    0%, 100% { translate: 0 0; }
    30%      { translate: -8px 7px; }
    55%      { translate: 6px -7px; }
    80%      { translate: -4px -5px; }
  }
  .svc-card { animation: svc-float-a 9s ease-in-out infinite; will-change: translate; }
  .svc-card:nth-child(2) { animation-name: svc-float-b; animation-duration: 11s;   animation-delay: -2.5s; }
  .svc-card:nth-child(3) { animation-name: svc-float-a; animation-duration: 10.5s; animation-delay: -5s; }
  .svc-card:nth-child(4) { animation-name: svc-float-b; animation-duration: 12s;   animation-delay: -1.2s; }
}

/* ------------------------------------------------------------
   Bande CTA finale (theme-teal) — centrée, 1 bloom.
   ------------------------------------------------------------ */

.cta-band { text-align: center; overflow: hidden; }

/* Galaxie : le canvas des particules couvre la bande, derrière le contenu. */
.cta-band .galaxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 1.9rem);
}
.cta-band-inner .lead { font-size: 1.16rem; color: var(--ink-soft); margin: 0; }
.cta-band-inner .btn { margin-top: 0.4rem; }

.cta-micro {
  margin: 0.2rem 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--cream) 85%, transparent);
}

/* ------------------------------------------------------------
   Footer — fond charcoal. Logo généreux, devise italique,
   grille de liens, icônes sociales en verre liquide bleu.
   ------------------------------------------------------------ */

.site-footer { padding-block: calc(var(--section-y) * 0.62) 2.4rem; }

.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 2.2fr 1fr 1fr; gap: 4rem; }
}

.footer-devise {
  margin-top: 1.7rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.6;
  max-width: 26rem;
  color: var(--ink-soft);
}

.footer-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1.2rem;
}

.footer-col ul { display: grid; gap: 0.55rem; }
.footer-col a {
  font-size: 0.98rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Icônes en LIQUID GLASS BLEU. Sélecteurs à 3 classes pour passer devant
   `.footer-col a:hover` (qui souligne). */
.footer-col .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-social .social-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--color-celestial-light);
  text-decoration: none;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-celestial-light) 26%, transparent),
    color-mix(in srgb, var(--color-celestial-light) 9%, transparent));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--color-celestial-light) 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 28%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.4s var(--ease-soft),
    background 0.4s var(--ease-soft),
    box-shadow 0.4s var(--ease-soft),
    color 0.4s var(--ease-soft),
    border-color 0.4s var(--ease-soft);
}
.footer-social .social-icon svg { width: 20px; height: 20px; display: block; }
.footer-social .social-icon:hover,
.footer-social .social-icon:focus-visible {
  transform: translateY(-3px);
  color: var(--cream);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--color-celestial-light) 75%, transparent);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-celestial-light) 55%, transparent),
    color-mix(in srgb, var(--color-celestial-light) 24%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 45%, transparent),
    0 14px 30px color-mix(in srgb, var(--color-celestial-light) 32%, transparent);
}

.footer-legal {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.footer-legal a { color: inherit; text-underline-offset: 3px; }
.link-btn { text-decoration: underline; text-underline-offset: 3px; color: inherit; }

/* ============================================================
   POP-UP FORMULAIRE — <dialog> natif « Appel Boussole »
   Une étape à la fois. Le balisage est INJECTÉ par main.js.
   ============================================================ */

.lwf {
  width: 100%;
  max-width: min(540px, calc(100vw - 2rem));
  /* Le UA centre un <dialog> modal avec margin:auto — mais le reset
     (* { margin:0 }, brand.css) l'écrasait. On le rétablit (piège §11.3). */
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--charcoal);
}
.lwf::backdrop {
  background: color-mix(in srgb, var(--charcoal) 38%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* LIQUID GLASS de marque (.lwf-boite) : verre clair très flouté, biseau lumineux
   en haut, ombre douce en bas. Le flou vit dans ::before (piège Chrome §6.3). */
.lwf-boite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  padding: clamp(1.5rem, 3.6vw, 2.3rem);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.30),
    0 10px 26px rgba(0, 0, 0, 0.12),
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px color-mix(in srgb, var(--color-celestial-tides) 12%, transparent);
}
.lwf-boite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--white) 88%, transparent),
      color-mix(in srgb, var(--color-celestial-light) 10%, color-mix(in srgb, var(--white) 76%, transparent)) 52%,
      color-mix(in srgb, var(--white) 82%, transparent));
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  backdrop-filter: blur(34px) saturate(1.7);
}
.lwf-boite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 68% at 18% -8%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 26%);
}

/* Tête : progression + compteur + fermeture */
.lwf-tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
/* `display:flex` écrase le `display:none` par défaut de [hidden] : on le rétablit
   pour que l'écran de succès puisse VRAIMENT masquer la tête ET le pied (sinon la
   barre de progression + les boutons Retour/Envoyer restaient visibles = 2 boutons). */
.lwf-tete[hidden] { display: none; }
.lwf-progres {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-celestial-tides) 16%, transparent);
  overflow: hidden;
}
.lwf-progres-barre {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #4B6D77;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-soft);
}
.lwf-compteur {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--charcoal) 45%, var(--white));
  white-space: nowrap;
}
.lwf-fermer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.lwf-fermer svg { width: 17px; height: 17px; }
.lwf-fermer:hover { background: color-mix(in srgb, var(--charcoal) 8%, transparent); color: var(--charcoal); }

/* Scène : l'étape COURANTE est en flux (la scène grandit avec son contenu) ;
   la SORTANTE passe en absolu le temps de son fondu. Avant, TOUTES les étapes
   étaient en absolu dans une scène figée à 208px -> une étape haute (titre sur
   2 lignes + 6 options) débordait vers le HAUT (justify-content:center) et la
   barre de progression « barrait » le titre. */
.lwf-scene { position: relative; min-height: 208px; }

.lwf-etape {
  position: relative;         /* en FLUX : plus de débordement vers le haut */
  min-height: 208px;          /* plancher : petites étapes centrées, pas riquiqui */
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.34s var(--ease-soft), transform 0.34s var(--ease-soft);
}
/* Étape SORTANTE : superposée en absolu (n'impose plus sa hauteur à la scène). */
.lwf-etape.part-gauche,
.lwf-etape.part-droite { position: absolute; inset: 0; }
.lwf-etape.vient-droite { opacity: 0; transform: translateX(36px); }
.lwf-etape.vient-gauche { opacity: 0; transform: translateX(-36px); }
.lwf-etape.part-gauche  { opacity: 0; transform: translateX(-36px); }
.lwf-etape.part-droite  { opacity: 0; transform: translateX(36px); }

.lwf-question {
  margin: 0;
  font-family: var(--font-display);   /* Royal */
  font-weight: 500;
  font-size: clamp(1.32rem, 3.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--charcoal);
}
.lwf-requis {
  margin-left: 0.28em;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.62em;
  vertical-align: super;
  color: #b4453f;
}

.lwf-aide {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--charcoal) 58%, var(--white));
}

.lwf-champ {
  width: 100%;
  margin-top: 1.15rem;
  padding: 0.75em 0.1em;
  font: inherit;
  font-size: 1.06rem;
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--charcoal) 16%, transparent);
  border-radius: 0;
  transition: border-color 0.3s var(--ease-soft);
}
.lwf-champ:focus { outline: none; border-bottom-color: #4B6D77; }
textarea.lwf-champ { resize: vertical; min-height: 4.4em; }

/* Choix (options) */
.lwf-choix { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }
.lwf-option {
  flex: 1 1 auto;
  min-width: 116px;
  padding: 0.85em 1.4em;
  border-radius: 14px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4B6D77;
  background: color-mix(in srgb, #4B6D77 6%, var(--white));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #4B6D77 26%, transparent);
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.lwf-option:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #4B6D77; }
.lwf-option.is-choisi { background: #4B6D77; color: var(--cream); box-shadow: none; }

.lwf-erreur {
  margin: 0.7rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #b4453f;
}

/* Pied : retour / suivant */
.lwf-pied[hidden] { display: none; }   /* idem tête : masquable sur l'écran de succès */
.lwf-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: clamp(1.2rem, 3vw, 1.7rem);
}
.lwf-prec {
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--charcoal) 55%, var(--white));
  padding: 0.6em 0.2em;
  transition: color 0.3s var(--ease-soft);
}
.lwf-prec:hover { color: var(--charcoal); }
.lwf-prec[hidden] { display: none; }
.lwf-suiv {
  margin-left: auto;
  padding: 0.85em 1.9em;
  border-radius: 14px;
  background: #4B6D77;
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft);
}
.lwf-suiv:hover {
  background: var(--color-celestial-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, #4B6D77 40%, transparent);
}

/* États : envoi, succès */
.lwf-etat { align-items: center; text-align: center; }
.lwf-etat .lwf-aide { margin-top: 0.7rem; }
.lwf-etat .lwf-suiv { margin: 1.4rem auto 0; }
.lwf-spin {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, #4B6D77 22%, transparent);
  border-top-color: #4B6D77;
  animation: lwf-tourne 0.75s linear infinite;
}
@keyframes lwf-tourne { to { transform: rotate(360deg); } }
.lwf-coche {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 0.3rem;
  border-radius: 50%;
  color: var(--cream);
  background: #4B6D77;
}
.lwf-coche svg { width: 25px; height: 25px; }

/* Piège à robots : hors écran, JAMAIS display:none. */
.lwf-pot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lwf-etape, .lwf-progres-barre, .lwf-option, .lwf-suiv { transition: none; }
  .lwf-spin { animation: none; }
}

/* ============================================================
   VERSANT MOBILE — @media (max-width: 899px)
   Aucune règle ne redéfinit une taille de police globale : on ne
   relève QUE des planchers de clamp() qui s'écrasent sur petit écran.
   ============================================================ */
@media (max-width: 899px) {
  .hero { padding-block: clamp(96px, 16vh, 140px) var(--section-y); }

  /* Le hero est en 100svh : le viewport le PLUS PETIT (barre d'URL affichée). */
  .hero { min-height: 100svh; }

  /* Poème : le terme 2.1vw s'écrase sous ~690px ; on relève le plancher
     (base partagée .poeme intouchée) et on plafonne à 1.45rem. */
  .poeme { font-size: clamp(1.3rem, 5vw, 1.45rem); }

  /* Titre du hero AGRANDI sur mobile : le h1 global (clamp 2.1rem, 4.6vw, 3.4rem)
     tombait sur son plancher 2.1rem -> petit, grosses marges. On repasse en vw
     (11vw) pour qu'il REMPLISSE la largeur, plafonné à 3.2rem, plancher 2.3rem
     (sûr sur les petits écrans). Ligne resserrée pour un titre plus impactant. */
  .hero-title { font-size: clamp(2.3rem, 11vw, 3.2rem); line-height: 1.1; }

  /* Média vidéo un peu plus PETIT sur mobile (il dominait l'écran). */
  .video-feature-media { max-width: 280px; }

  /* Cartes « rassurantes » PLUS PETITES + PLUS D'AIR entre elles, et section
     allongée (plus de respiration verticale). */
  .reassure-grid { gap: 1.9rem; margin-top: clamp(2.6rem, 7vw, 3.4rem); }
  .reassure-card { padding: 1.25rem 1.2rem; gap: 0.45rem; }
  .reassure-icon { width: 44px; height: 44px; margin-bottom: 0.2rem; }
  .reassure-icon .check { width: 22px; height: 22px; }
  .reassure-title { font-size: 1rem; }
  .reassure-desc { font-size: 0.9rem; }

  /* Bande CTA « Et si le premier pas… » : REMPLIT toute la hauteur de l'écran,
     contenu centré verticalement, plus d'air entre les éléments, titre plus gros. */
  .cta-band {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cta-band-inner { gap: clamp(2rem, 6.5vw, 3.2rem); }
  .cta-band h2 { font-size: clamp(2rem, 8.5vw, 2.7rem); line-height: 1.15; }
  .cta-band-inner .lead { font-size: 1.2rem; }
  .cta-micro { font-size: 1.14rem; }

  /* Cartes de SERVICES (#services) plus petites sur mobile. */
  .svc-grid { gap: clamp(1.3rem, 4vw, 2rem); margin-top: clamp(2rem, 6vw, 3rem); }
  .svc-card { padding: 1.15rem 1.2rem; gap: 0.5rem; border-radius: 18px; }
  .svc-icon { width: 40px; height: 40px; }
  .svc-icon svg { width: 21px; height: 21px; }
  .svc-title { font-size: 1.02rem; }
  .svc-desc { font-size: 0.86rem; }
  .svc-btn { margin-top: 1rem; }
  .svc-btn.btn--call { font-size: 11px; padding: 0.6em 1.1em; }
}

/* ============================================================
   ÉCHELLE PILOTÉE PAR LA HAUTEUR — le vrai correctif « laptop ».
   Toute la typo est en vw/rem (dépend de la LARGEUR) ; un laptop est
   large mais BAS -> « tout est trop gros ». On indexe :root{font-size}
   sur la HAUTEUR : 16px au-dessus de ~900px de haut (grand écran
   INCHANGÉ), descente jusqu'à ~13,5px à 758px. Réservé au desktop.
   Les visuels en px/vw purs reçoivent une borne vh, calée à l'œil.
   ============================================================ */
@media (min-width: 900px) {
  :root { font-size: clamp(12.5px, 1.78vh, 16px); }

  /* Cadre vidéo (placeholder) : max-width:420px est du pixel pur. Avec son
     aspect-ratio 4/5 il occupe ~80 % d'un laptop bas. Borne vh calée à l'œil
     (54vh = 486px à 900px de haut > 420px : grand écran intact). */
  .video-feature-media { max-width: min(420px, 54vh); }
}

/* ============================================================
   LAPTOP LARGE ET BAS — @media (min-width:900px) and (max-height:780px)
   CE BLOC RESTE EN FIN DE FICHIER (question de cascade). On rogne les
   rembourrages / recentre les visuels, JAMAIS le texte.
   ============================================================ */
@media (min-width: 900px) and (max-height: 780px) {
  /* La vidéo rétrécie (54vh) laisse du vide à sa gauche : on la recentre dans
     sa colonne (le desktop la garde collée à gauche). */
  .video-feature-media { margin-inline: auto; }
}