/* =========================================================================
   Hypnosez — Gaëlle Crema
   Implémentation de « Hypnosez - Site v2 » (Claude Design).
   Les valeurs (couleurs, tailles, clamps, points de rupture) sont reprises
   telles quelles depuis la maquette.
   ========================================================================= */

/* ---------- Jetons ---------- */

:root {
  /* Couleurs */
  --cream-rgb:    246, 242, 234;
  --sand-rgb:     239, 232, 220;
  --sand-deep-rgb: 229, 220, 205;
  --ink-rgb:      47, 54, 48;
  --paper-rgb:    238, 231, 219;

  --cream:        #f6f2ea;  /* fond principal */
  --sand:         #efe8dc;  /* cartes, bandeaux clairs */
  --sand-deep:    #e5dccd;  /* fond de l'image */
  --ink:          #2f3630;  /* texte principal, bandeau sombre */
  --ink-soft:     #3d463e;
  --body:         #4d564e;  /* paragraphes */
  --muted:        #5a635b;  /* textes secondaires */
  --label:        #8a9689;  /* sur-titres, libellés */
  --sage:         #6f8a6c;  /* accent */
  --sage-deep:    #5f7a5c;  /* accent, survol */
  --sage-soft:    #9fb09c;  /* accent sur fond sombre */
  --clay:         #b7a99a;  /* numérotation */
  --paper:        #eee7db;  /* texte sur fond sombre */
  --white:        #fff;
  --footer:       #7d867e;

  /* Filets */
  --line:         rgba(var(--ink-rgb), .14);
  --line-soft:    rgba(var(--ink-rgb), .10);
  --line-strong:  rgba(var(--ink-rgb), .18);
  --line-paper:   rgba(var(--paper-rgb), .20);
  --nav-glass:    rgba(var(--cream-rgb), .52);
  --nav-sheen:    rgba(var(--cream-rgb), .08);
  --nav-shadow:   rgba(var(--ink-rgb), .10);

  /* Typographie */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Gabarit */
  --shell:    1240px;
  --gutter:   clamp(20px, 5vw, 56px);
  --section:  clamp(56px, 9vw, 110px);

  --radius:      4px;
  --radius-pill: 999px;
}

body[data-palette="taupe"] {
  --cream-rgb:    243, 238, 231;
  --sand-rgb:     231, 222, 211;
  --sand-deep-rgb: 214, 202, 188;
  --ink-rgb:      58, 50, 45;
  --paper-rgb:    242, 234, 224;

  --cream:        #f3eee7;
  --sand:         #e7ded3;
  --sand-deep:    #d6cabc;
  --ink:          #3a322d;
  --ink-soft:     #4b4039;
  --body:         #5c514a;
  --muted:        #6b6058;
  --label:        #9a8f84;
  --sage:         #8c7b68;
  --sage-deep:    #756654;
  --sage-soft:    #c5b8a7;
  --clay:         #b29986;
  --paper:        #f2eae0;
  --white:        #fff;
  --footer:       #8b8177;
}

body[data-palette="lin"] {
  --cream-rgb:    248, 244, 235;
  --sand-rgb:     239, 232, 218;
  --sand-deep-rgb: 222, 211, 193;
  --ink-rgb:      50, 55, 48;
  --paper-rgb:    243, 236, 224;

  --cream:        #f8f4eb;
  --sand:         #efe8da;
  --sand-deep:    #ded3c1;
  --ink:          #323730;
  --ink-soft:     #41483f;
  --body:         #50594f;
  --muted:        #626c61;
  --label:        #8f998e;
  --sage:         #7f916e;
  --sage-deep:    #697b5c;
  --sage-soft:    #aeb99d;
  --clay:         #bea78f;
  --paper:        #f3ece0;
  --white:        #fff;
  --footer:       #848d82;
}

body[data-palette="brume"] {
  --cream-rgb:    242, 243, 238;
  --sand-rgb:     229, 233, 224;
  --sand-deep-rgb: 211, 219, 210;
  --ink-rgb:      47, 58, 54;
  --paper-rgb:    236, 240, 232;

  --cream:        #f2f3ee;
  --sand:         #e5e9e0;
  --sand-deep:    #d3dbd2;
  --ink:          #2f3a36;
  --ink-soft:     #3d4b46;
  --body:         #4c5b56;
  --muted:        #60706a;
  --label:        #8d9b95;
  --sage:         #789083;
  --sage-deep:    #62786e;
  --sage-soft:    #a9bbb2;
  --clay:         #a5aaa0;
  --paper:        #ecf0e8;
  --white:        #fff;
  --footer:       #7e8b86;
}

body[data-palette="argile"] {
  --cream-rgb:    247, 240, 234;
  --sand-rgb:     237, 225, 217;
  --sand-deep-rgb: 221, 204, 194;
  --ink-rgb:      59, 48, 45;
  --paper-rgb:    245, 236, 229;

  --cream:        #f7f0ea;
  --sand:         #ede1d9;
  --sand-deep:    #ddccc2;
  --ink:          #3b302d;
  --ink-soft:     #4c3e39;
  --body:         #604f49;
  --muted:        #745f57;
  --label:        #a68f84;
  --sage:         #a77968;
  --sage-deep:    #8d6254;
  --sage-soft:    #d2aea1;
  --clay:         #bf9382;
  --paper:        #f5ece5;
  --white:        #fff;
  --footer:       #8c7a72;
}

body[data-palette="amande"] {
  --cream-rgb:    244, 244, 232;
  --sand-rgb:     232, 235, 214;
  --sand-deep-rgb: 215, 222, 193;
  --ink-rgb:      48, 56, 45;
  --paper-rgb:    241, 243, 228;

  --cream:        #f4f4e8;
  --sand:         #e8ebd6;
  --sand-deep:    #d7dec1;
  --ink:          #30382d;
  --ink-soft:     #404b3a;
  --body:         #525d4c;
  --muted:        #65715d;
  --label:        #929d84;
  --sage:         #879b6f;
  --sage-deep:    #71835d;
  --sage-soft:    #b4c39c;
  --clay:         #adad86;
  --paper:        #f1f3e4;
  --white:        #fff;
  --footer:       #838d78;
}

body[data-palette="craie"] {
  --cream-rgb:    250, 247, 240;
  --sand-rgb:     241, 238, 230;
  --sand-deep-rgb: 225, 222, 211;
  --ink-rgb:      52, 54, 51;
  --paper-rgb:    246, 242, 233;

  --cream:        #faf7f0;
  --sand:         #f1eee6;
  --sand-deep:    #e1ded3;
  --ink:          #343633;
  --ink-soft:     #444743;
  --body:         #555a54;
  --muted:        #686e66;
  --label:        #959c92;
  --sage:         #8d998b;
  --sage-deep:    #747f72;
  --sage-soft:    #b7c0b3;
  --clay:         #b9ad9d;
  --paper:        #f6f2e9;
  --white:        #fff;
  --footer:       #868b82;
}

/* Mélange de brume, craie et lin — moyenne canal par canal des trois, sauf le
   fond, repris tel quel à brume pour garder son verdâtre clair. */
body[data-palette="melange"] {
  --cream-rgb:    242, 243, 238;
  --sand-rgb:     236, 234, 224;
  --sand-deep-rgb: 219, 217, 205;
  --ink-rgb:      50, 56, 51;
  --paper-rgb:    242, 239, 230;

  --cream:        #f2f3ee;
  --sand:         #eceae0;
  --sand-deep:    #dbd9cd;
  --ink:          #323833;
  --ink-soft:     #414943;
  --body:         #505a53;
  --muted:        #636e66;
  --label:        #909b92;
  --sage:         #81937f;
  --sage-deep:    #6a7b69;
  --sage-soft:    #afbcab;
  --clay:         #b4aa99;
  --paper:        #f2efe6;
  --white:        #fff;
  --footer:       #838c83;
}

/* ---------- Bases ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img,
video { max-width: 100%; }

a {
  color: var(--sage);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}

.band--dark :focus-visible,
.card--sage:focus-visible { outline-color: var(--paper); }

/* Le titre visé par une ancre ne colle pas au bord haut. */
[id] { scroll-margin-top: 24px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius) 0;
  font-size: 14.5px;
}

.skip-link:focus {
  left: 0;
  color: var(--cream);
}

/* ---------- Gabarit ---------- */

/* Bande de contenu : 1240 px utiles, gouttières en plus. */
.shell {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--contact { padding-bottom: clamp(70px, 10vw, 130px); }
/* Section texte pleine largeur (« Votre accompagnement ») : mesure limitée pour la lisibilité. */
.section--prose .section__lede { max-width: 68ch; }

.band { background: var(--sand); }

.band--dark {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Grilles ---------- */

.grid { display: grid; }

.grid--info {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px;
  margin-block: 0;
  padding-block: clamp(30px, 4vw, 44px);
}

.grid--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 70px);
}

.duo--accompagnement {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
}

.duo--apropos  { align-items: center; }

.duo--faq {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: start;
}

.duo--contact {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}

/* Variantes de proportion des pages intérieures. */
.duo--even-center { align-items: center; }

/* « Venir au cabinet » : la colonne de texte porte les informations d'accès,
   elle est plus haute que le plan — les deux se calent en haut. */
.duo--acces { align-items: start; }

.duo--wide-left {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}

.duo--wide-right {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
}

/* « Vos besoins » : la colonne d'appoint se cale sur le milieu vertical de la
   colonne de texte. Les deux blocs se répondent au lieu de laisser un vide
   sous le plus court. */
.duo--besoin {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}

/* ---------- Titres et textes courants ---------- */

.eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

.eyebrow--light { color: var(--sage-soft); }

.section__title {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.01em;
}

.section__title em { font-style: italic; }

.section__title--lead { margin-bottom: 56px; }

.section__title--xl {
  font-size: clamp(31px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-bottom: 26px;
}

.section__title--xl em { color: var(--sage); }

.duo--apropos .section__title { margin-bottom: 24px; }
.duo--faq     .section__title { margin-bottom: 0; }
.duo--apropos .actions { margin-top: 26px; }

.section__lede {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--body);
  text-wrap: pretty;
}

.section__lede:last-child { margin-bottom: 0; }

/* Dernier paragraphe d'un bloc à deux paragraphes (« Qui suis-je »). */
.section__lede + .section__lede { margin-bottom: 30px; }

.section__lede--lg {
  font-size: 17px;
  max-width: 48ch;
  margin-bottom: 36px;
}

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

.btn {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 17px 34px;
  font-size: 15.5px;
  font-family: inherit;
}

.btn--sage {
  background: var(--sage);
  color: var(--cream);
}

.btn--sage:hover {
  background: var(--sage-deep);
  color: var(--cream);
}

.btn--ink {
  background: var(--ink);
  color: var(--cream);
}

.btn--ink:hover {
  background: var(--ink-soft);
  color: var(--cream);
}

.btn--outline {
  border: 1px solid rgba(var(--ink-rgb), .22);
  padding: 16px 32px;
  color: var(--ink);
}

.btn--outline:hover {
  border-color: rgba(var(--ink-rgb), .45);
  background: rgba(var(--ink-rgb), .04);
  color: var(--ink);
}

.btn--ghost {
  border: 1px solid rgba(var(--paper-rgb), .3);
  padding: 14px 30px;
  font-size: 15px;
  color: var(--paper);
}

.btn--ghost:hover {
  border-color: rgba(var(--paper-rgb), .6);
  background: rgba(var(--paper-rgb), .07);
  color: var(--paper);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---------- Termes égrenés ----------
   Remplace la grille de pastilles encadrées : les termes se lisent d'un trait,
   dans le serif de la marque, séparés par le filet sauge qui ouvre déjà
   « .outcome » et « .aside-liste ». Une ligne de texte, pas un nuage
   d'étiquettes.

   Les `li` restent en flux inline : le filet est collé au terme qui le
   précède, il ne peut donc pas se retrouver orphelin en début de ligne. */

.egrene {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* `nowrap` garde le terme et son filet soudés : la ligne ne peut casser
   qu'entre deux termes, jamais avant le filet ni au tiret d'un mot composé. */
.egrene li {
  display: inline;
  white-space: nowrap;
}

.egrene li:not(:last-child)::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 1px;
  margin: 0 13px;
  background: var(--sage);
}

.band--dark .egrene { color: var(--paper); }
.band--dark .egrene li:not(:last-child)::after { background: var(--sage-soft); }

/* Variante en liste : un terme par ligne, précédé d'un point. Pour les
   énumérations qui se lisent une à une plutôt que d'un trait — les formations
   complémentaires, par exemple. */

.egrene--liste li {
  display: block;
  white-space: normal;
  position: relative;
  padding-left: 22px;
}

.egrene--liste li + li { margin-top: 10px; }

.egrene--liste li::before {
  content: "";
  position: absolute;
  left: 0;
  /* En em : le point reste calé sur le milieu de la première ligne quelle que
     soit la taille du texte, qui varie avec la largeur de l'écran. */
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

/* Le filet qui sépare les termes en ligne n'a plus lieu d'être. */
.egrene--liste li:not(:last-child)::after { content: none; }

.band--dark .egrene--liste li::before { background: var(--sage-soft); }

/* ---------- En-tête ---------- */

.site-header {
  position: relative;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 30px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.brand__logo {
  width: 196px;
  height: auto;
  display: block;
}

.brand__tagline {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  order: 3;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 26px;
  background: var(--nav-glass);
  backdrop-filter: blur(28px) saturate(80%);
  -webkit-backdrop-filter: blur(28px) saturate(80%);
  border: 1px solid rgba(var(--ink-rgb), .2);
  box-shadow: 0 10px 30px var(--nav-shadow);
  border-radius: 26px;
  padding: 11px 26px;
  font-size: 14.5px;
  white-space: nowrap;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--nav-sheen);
}

.nav a { color: var(--ink); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--sage-deep); }

.site-header__cta {
  padding: 13px 26px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* ---------- Accueil ---------- */

/* Pas d'`overflow:hidden` ici : sur grand écran le film remonte derrière
   l'en-tête (top négatif). Le débordement latéral est déjà tenu par
   `overflow-x:hidden` sur <body>. */
.hero { position: relative; }

.hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  min-height: 640px;
  padding-block: clamp(40px, 6vw, 70px) clamp(56px, 8vw, 96px);
}

.hero__body {
  position: relative;
  z-index: 1;             /* le texte reste toujours au-dessus du film */
  flex: 1 1 400px;
  max-width: min(100%, 620px);
  animation: rise 1s cubic-bezier(.2, .7, .3, 1) both;
}

.hero .eyebrow {
  letter-spacing: .24em;
  margin-bottom: 26px;
}

.hero__title {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 82px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  color: var(--sage);
}

.hero__lede {
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
  max-width: 44ch;
  text-wrap: pretty;
}

.hero__media {
  position: relative;
  flex: 1 1 320px;
  align-self: stretch;
  min-height: clamp(240px, 40vh, 560px);
  border-radius: var(--radius);
  overflow: hidden;

  /* Décoratif, et posé par-dessus l'en-tête sur grand écran : le conteneur ne
     doit pas plus intercepter les clics que la vidéo elle-même, sinon il rend
     « Prendre rendez-vous » injoignable. */
  pointer-events: none;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;   /* décoratif : ne doit jamais intercepter un clic */

  /* Double dégradé : fondu latéral vers le texte + fondu haut/bas. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.85) 48%, #000 70%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.85) 48%, #000 70%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
}

/* ---------- Bandeau d'informations ---------- */

.infobar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.infobar dt {
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

.infobar dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Cartes « Accompagnement » ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.card {
  display: block;
  background: var(--sand);
  border-radius: var(--radius);
  padding: 30px 28px;
  color: var(--ink);
}

.card__icon {
  display: block;
  margin-bottom: 16px;
  color: var(--sage);
}

.card__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
}

.card__title--italic { font-style: italic; }

.card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

.card--sage {
  background: var(--sage);
  color: var(--cream);
}

.card--sage .card__text { color: rgba(var(--cream-rgb), .85); }

.card--sage:hover {
  background: var(--sage-deep);
  color: var(--cream);
}

/* ---------- Déroulé de la séance ---------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 34px;
  border-top: 1px solid var(--line-strong);
}

.step:first-child { padding-left: 0; }
.step:last-child  { padding-right: 0; }

.step__title {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
}

.step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.callout {
  margin-top: 46px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 36px) clamp(22px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
  justify-content: space-between;
}

.callout__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.35;
  max-width: 34ch;
}

.callout__title em {
  font-style: italic;
  color: var(--sage);
}

.callout__note {
  margin: 14px 0 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.callout__facts {
  display: flex;
  gap: 44px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.callout__facts dt {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--label);
}

.callout__facts dd { margin: 0; }

/* ---------- Qui suis-je ---------- */

.portrait {
  position: relative;
  margin: 0;
  background: var(--sand-deep);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- FAQ ---------- */

.faq__item {
  padding: 26px 0;
  border-top: 1px solid var(--line-paper);
}

.faq__item--last { border-bottom: 1px solid var(--line-paper); }

.faq__q {
  margin: 0 0 9px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
}

.faq__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(var(--paper-rgb), .72);
}

.faq__more { margin-top: 30px; }

/* ---------- Contact ---------- */

.section--contact .eyebrow { margin-bottom: 22px; }

.infocard {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  background: var(--sand);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px) clamp(22px, 3.5vw, 38px);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body);
}

.infocard > div + div {
  border-top: 1px solid rgba(var(--ink-rgb), .13);
  padding-top: 22px;
}

.infocard dt {
  margin-bottom: 8px;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}

.infocard dd { margin: 0; }

/* ---------- Pied de page ---------- */

.site-footer { border-top: 1px solid var(--line); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding-block: clamp(26px, 3.5vw, 34px);
  font-size: 13.5px;
  color: var(--footer);
}

.site-footer__inner p { margin: 0; }

.site-footer__links {
  display: flex;
  gap: 26px;
}

.site-footer__links a { color: var(--footer); }
.site-footer__links a:hover { color: var(--ink-soft); }

/* =========================================================================
   Pages intérieures — Accompagnement · La séance · FAQ & contact
   ========================================================================= */

/* Sur les pages intérieures, le bloc de marque ramène à l'accueil. */
a.brand,
a.brand:hover { color: var(--ink); }

/* ---------- Chapeau de page ---------- */

.page-hero {
  max-width: 70ch;
  padding-block: clamp(44px, 7vw, 80px) clamp(44px, 6vw, 70px);
  animation: rise .9s cubic-bezier(.2, .7, .3, 1) both;
}

.page-hero--narrow { max-width: 68ch; }

/* Chapeau sur deux colonnes (FAQ & contact) : pas de limite de mesure. */
.page-hero--full {
  max-width: none;
  padding-block: clamp(44px, 7vw, 80px) clamp(56px, 8vw, 90px);
}

.page-hero--full .page-hero__title { font-size: clamp(35px, 6vw, 66px); }

.page-hero .eyebrow {
  letter-spacing: .24em;
  margin-bottom: 24px;
}

.page-hero__title {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(35px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.page-hero__title em {
  font-style: italic;
  color: var(--sage);
}

.page-hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--body);
  text-wrap: pretty;
}

.page-hero__lede + .page-hero__lede { margin-top: 18px; }

.page-hero__lede--tight {
  font-size: 17.5px;
  max-width: 48ch;
  margin-bottom: 36px;
}

/* ---------- Sommaire des situations (« Vos besoins ») ----------
   Chaque vignette porte le pictogramme de la section qu'elle annonce : on
   repère la sienne à l'image avant même de lire le libellé, et le sommaire
   ne ressemble plus à une rangée d'étiquettes. */

.besoins-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0 0 70px;
  list-style: none;
}

.besoin {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  padding: 18px 18px 18px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.35;
  text-wrap: balance;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.besoin svg {
  flex: 0 0 auto;
  transition: color .2s ease;
}

/* Chaque vignette porte le fond de la section qu'elle annonce : crème, bandeau
   sable ou bandeau sombre. Le sommaire annonce donc aussi la couleur qu'on
   trouvera en arrivant. Le filet transparent de la base garde les trois tons
   exactement à la même taille — et les trois modificateurs restent au même
   niveau de spécificité, sinon la base les écraserait. */

/* Le fond de ces sections-là est le crème de la page : sans filet marqué, la
   vignette n'aurait aucun contour. */
.besoin--clair {
  background: var(--cream);
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.besoin--clair svg { color: var(--sage); }

.besoin--clair:hover {
  border-color: rgba(var(--ink-rgb), .34);
  background: var(--sand);
  color: var(--ink);
}

.besoin--sable {
  background: var(--sand);
  color: var(--ink-soft);
}

.besoin--sable svg { color: var(--sage); }

.besoin--sable:hover {
  background: var(--sand-deep);
  color: var(--ink);
}

.besoin--sombre {
  background: var(--ink);
  color: rgba(var(--paper-rgb), .88);
}

.besoin--sombre svg { color: var(--sage-soft); }

.besoin--sombre:hover {
  background: var(--ink-soft);
  color: var(--paper);
}

.besoin--clair:hover svg,
.besoin--sable:hover svg { color: var(--sage-deep); }

/* ---------- Motifs d'accompagnement ---------- */

.section--motif { padding-block: clamp(56px, 8vw, 100px); }
.section--flush-bottom { padding-bottom: 0; }

.motif__icon {
  display: block;
  margin-bottom: 22px;
  color: var(--sage);
}

.band--dark .motif__icon { color: var(--sage-soft); }

.motif__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.motif__title--lg {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: 22px;
}

.motif__text {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--body);
  text-wrap: pretty;
}

.motif__text:last-child { margin-bottom: 0; }
.motif__text em { font-style: italic; }

.motif__text--close  { margin-bottom: 12px; }
.motif__text--spaced { margin-bottom: 28px; }

.band--dark .motif__text { color: rgba(var(--paper-rgb), .78); }
.band--dark .motif__text:last-of-type { margin-bottom: 32px; }

/* ---------- Colonnes secondaires des motifs ---------- */

.motif-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Tuiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tiles--stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tile {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 26px;
}

.tile--paper   { background: var(--cream); padding: 26px 28px; }
.tile--outline { background: none; border: 1px solid rgba(var(--ink-rgb), .14); }

.tile--outline-dark {
  background: none;
  border: 1px solid rgba(var(--paper-rgb), .22);
  padding: 26px 28px;
}

.tile__title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
}

.tile--outline-dark .tile__title {
  font-family: var(--serif);
  font-size: 24px;
}

.tile__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

.tile--outline-dark .tile__text { color: rgba(var(--paper-rgb), .7); }

/* ---------- Liste en lignes ---------- */

.rows {
  margin: 0;
  padding: 12px 30px;
  background: var(--cream);
  border-radius: var(--radius);
  list-style: none;
}

.rows li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
  font-size: 15.5px;
  color: var(--ink-soft);
}

.rows li:last-child { border-bottom: 0; }

/* ---------- Citation ---------- */

.quote {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 34px 32px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.4;
}

.quote p { margin: 0; }

.quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.band--dark .quote {
  background: rgba(var(--paper-rgb), .08);
  border-color: rgba(var(--paper-rgb), .2);
  color: var(--paper);
}

.band--dark .quote cite { color: rgba(var(--paper-rgb), .68); }

/* ---------- Bandeau d'appel ---------- */

.cta-band {
  background: var(--sage);
  color: var(--cream);
}

.cta-band--dark {
  background: var(--ink);
  color: var(--paper);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(48px, 6.5vw, 76px);
}

.cta-band--dark .cta-band__inner { padding-block: clamp(52px, 7vw, 86px); }

.cta-band__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(25px, 3.8vw, 38px);
  line-height: 1.25;
}

.cta-band--dark .cta-band__title {
  max-width: 22ch;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.22;
}

.cta-band__title em { font-style: italic; }
.cta-band--dark .cta-band__title em { color: var(--sage-soft); }

.btn--paper {
  background: var(--cream);
  color: var(--ink);
}

.btn--paper:hover {
  background: var(--white);
  color: var(--ink);
}

.cta-band--dark .btn--paper { background: var(--paper); }

/* ---------- Plan d'accès ---------- */

.map-placeholder {
  background: var(--sand-deep);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.map-placeholder iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}

/* ---------- Informations d'accès ----------
   Paires libellé-valeur sous le plan : filets fins, pas de cadre. */

.acces {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.acces > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.acces dt {
  padding-top: .3em;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

.acces dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body);
}

/* ---------- Note pratique ----------
   Une consigne à lire avant de venir : détachée par un filet sauge, sans
   cadre ni aplat, pour qu'elle se remarque sans peser. */

.note {
  margin: 28px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--sage);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.band--dark .note {
  border-left-color: var(--sage-soft);
  color: var(--paper);
}

@media (max-width: 620px) {
  .acces > div { grid-template-columns: minmax(0, 1fr); }
  .acces dt { padding-top: 0; }
}

/* ---------- Ligne d'invitation ---------- */

.invite {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.5vw, 26px);
  line-height: 1.35;
  color: var(--sage-deep);
}

.band--dark .invite { color: var(--sage-soft); }

/* ---------- Étapes en progression ----------
   Le filet qui court au-dessus des trois colonnes tient lieu de fil du temps :
   chaque médaillon s'y pose, à cheval sur le trait, et remplace la
   numérotation 01 / 02 / 03 par un pictogramme.
   `--step-bg` doit reprendre le fond de la section pour que le médaillon
   interrompe proprement le filet ; `--step-pad-top` sert à la fois de retrait
   de l'étape et de calcul de la remontée du médaillon. */

.steps--parcours {
  --step-pad-top: 34px;
  --step-bg: var(--cream);
}

.band       .steps--parcours { --step-bg: var(--sand); }
.band--dark .steps--parcours { --step-bg: var(--ink); }

.steps--parcours .step { padding-top: var(--step-pad-top); }

.step__pip {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: calc(-1 * var(--step-pad-top) - 28px) 0 22px;
  border: 1px solid var(--sage-soft);
  border-radius: 50%;
  background: var(--step-bg);
  color: var(--sage);
}

.step__pip svg {
  width: 27px;
  height: 27px;
}

.band--dark .step__pip { color: var(--sage-soft); }

/* ---------- Cartes numérotées (« Comment je vous accompagne ? ») ---------- */

.cards--steps .card { padding: 32px 30px; }

.card__step {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
}

.card__step::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(var(--ink-rgb), .14);
}

/* ---------- Ce que l'on vient chercher ---------- */

.outcome {
  display: flex;
  gap: 16px;
  margin: 30px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.35;
  color: var(--sage-deep);
}

.outcome::before {
  content: "";
  flex: 0 0 auto;
  margin-top: .58em;
  width: 24px;
  height: 1px;
  background: var(--sage);
}

.band--dark .outcome {
  border-top-color: var(--line-paper);
  color: var(--sage-soft);
}

.band--dark .outcome::before { background: var(--sage-soft); }

/* ---------- Citation appuyée ---------- */

.pull {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 1px solid var(--sage);
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.4;
  color: var(--ink-soft);
}

.band--dark .pull {
  border-left-color: var(--sage-soft);
  color: var(--paper);
}

/* ---------- Colonne d'appoint ---------- */

.aside__label {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

.band--dark .aside__label { color: var(--sage-soft); }

/* ---------- Liste de la colonne d'appoint (« Vos besoins ») ----------
   Remplace les pastilles encadrées : chaque terme n'a plus de cadre à lui,
   un filet fin sépare les lignes et un tiret sauge les ouvre — le même
   tiret que « .outcome », juste en dessous. */

.aside-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.aside-liste li {
  display: flex;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

.aside-liste li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: .68em;
  width: 14px;
  height: 1px;
  background: var(--sage);
}

.band--dark .aside-liste { border-top-color: var(--line-paper); }

.band--dark .aside-liste li {
  border-bottom-color: var(--line-paper);
  color: rgba(var(--paper-rgb), .82);
}

.band--dark .aside-liste li::before { background: var(--sage-soft); }

.prose { max-width: 68ch; }

/* ---------- Parcours en cinq étapes (« Votre séance ») ----------
   Fil vertical d'un médaillon à l'autre : la progression se lit sans avoir à
   déchiffrer la numérotation. */

.parcours {
  margin: 0;
  padding: 0;
  list-style: none;
}

.parcours__etape {
  position: relative;
  padding: 0 0 42px 66px;
}

.parcours__etape:last-child { padding-bottom: 0; }

.parcours__etape::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 0;
  left: 20px;
  width: 1px;
  background: var(--line);
}

.parcours__etape:last-child::before { display: none; }

.parcours__pip {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sage-soft);
  border-radius: 50%;
  background: var(--cream);
  font-family: var(--serif);
  font-size: 18px;
  color: var(--sage-deep);
}

.band .parcours__pip { background: var(--sand); }

.parcours__title {
  margin: 0 0 14px;
  padding-top: 7px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.25;
}

.parcours__text {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}

.parcours__text:last-child { margin-bottom: 0; }

/* ---------- Durée et tarifs ---------- */

.tarifs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarif {
  display: flex;
  flex-direction: column;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 30px;
}

/* Sur un bandeau sable, la carte reprend le fond de page pour rester lisible. */
.band .tarif { background: var(--cream); }

.tarif__name {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

.tarif__price {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
  color: var(--ink);
}

.tarif__detail {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

.tarif__detail + .tarif__detail { margin-top: 8px; }

/* ---------- Questions fréquentes en accordéon ----------
   <details>/<summary> : la réponse ne s'ouvre qu'au clic, sans JavaScript,
   et la page s'imprime dépliée. */

.faq__item--pliable {
  padding: 0;
  border-top: 1px solid var(--line-paper);
}

.faq__q--bouton {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.45;
  transition: color .2s ease;
}

.faq__q--bouton::-webkit-details-marker { display: none; }

.faq__q--bouton::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s ease;
  opacity: .55;
}

.faq__q--bouton:hover,
.faq__item--pliable[open] > .faq__q--bouton { color: var(--sage-soft); }

.faq__item--pliable[open] > .faq__q--bouton::after {
  transform: translateY(1px) rotate(225deg);
}

.faq__body { padding-bottom: 28px; }

.faq__body .faq__a + .faq__a { margin-top: 14px; }
.faq__body .faq__list + .faq__a { margin-top: 18px; }

.faq__list {
  margin: 16px 0 0;
  padding: 0 0 0 22px;
  list-style: none;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.faq__list li { position: relative; padding: 3px 0; }

.faq__list li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: -22px;
  width: 9px;
  height: 1px;
  background: var(--sage);
}

.band--dark .faq__list { color: rgba(var(--paper-rgb), .72); }
.band--dark .faq__list li::before { background: var(--sage-soft); }

/* ---------- Portrait vertical ---------- */

.portrait--tall { aspect-ratio: 3 / 4; }

.portrait--tall img { object-position: 50% 20%; }

/* Le cadre 4/3 rogne les clichés qui ne sont pas à ce format. Quand le sujet
   se tient contre un bord — la coccinelle à gauche, la femme au champ à
   droite — tout le rognage est reporté sur le côté opposé pour le garder
   entier. */
.portrait--left  img { object-position: left 50%; }
.portrait--right img { object-position: right 50%; }

/* ---------- Bords fondus ----------
   Les photos ne sont plus posées dans un cadre net. Une copie floue de la
   photo diffuse ses couleurs derrière elle et ses bords s'effacent en
   dégradé : l'image se fond dans le fond de page au lieu de s'y découper.

   Le halo est une seconde balise <img> et non un background CSS : dans une
   variable, une url() relative se résout depuis le dossier de la feuille de
   style, pas depuis la page — le fichier n'était jamais trouvé. Même src que
   la photo, donc aucun téléchargement de plus. */

.fondu {
  position: relative;
  background: none;
  border-radius: 0;
  overflow: visible;
  /* Confine le halo au contexte d'empilement de la figure : sans cela, son
     z-index négatif le ferait passer derrière le fond de la page. */
  isolation: isolate;
}

/* Le halo déborde du cadre : ses propres bords tombent hors champ, seule sa
   couleur reste. Le flou doit être assez large pour qu'aucune forme ne s'y
   devine, sinon on lit une image dédoublée et non une diffusion. */
/* Sélecteur doublé : `.portrait img` est plus spécifique qu'une classe seule
   et imposerait sinon sa taille de cadre au halo. */
.fondu .fondu__halo {
  position: absolute;
  top: -7%;
  left: -7%;
  right: auto;
  bottom: auto;
  width: 114%;
  height: 114%;
  /* La règle globale img{max-width:100%} ramènerait le halo à la largeur du
     cadre et l'empêcherait de déborder. */
  max-width: none;
  z-index: -1;
  object-fit: cover;
  filter: blur(46px) saturate(1.3);
  opacity: .42;
  pointer-events: none;
}

.fondu img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Quand le sujet touche un bord — la coccinelle à gauche, la femme au champ à
   droite — le fondu de ce côté-là le voilerait. Il s'y resserre à 5 %, les
   trois autres bords gardent les 9 % : la photo se fond toujours dans la page,
   mais plus au prix du sujet. */
.fondu.portrait--left img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 5%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image:
    linear-gradient(to right,  transparent, #000 5%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}

.fondu.portrait--right img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}

/* =========================================================================
   Menu mobile
   Bouton et panneau sont construits par site.js à partir de la navigation
   existante : un seul endroit à maintenir pour les 4 pages, et les liens
   restent dans le HTML pour les moteurs.
   ========================================================================= */

.burger { display: none; }

.menu-mobile[hidden] { display: none; }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 8vw, 48px);
  background: var(--cream);
  overflow: hidden;
}

.menu-mobile__nav {
  position: relative;   /* au-dessus des papillons */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-mobile__nav a {
  padding: 8px 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
}

.menu-mobile__nav a[aria-current] {
  color: var(--sage);
  font-style: italic;
}

.menu-mobile__cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 34px;
}

/* ---------- Papillons ---------- */

/* Le papillon est celui du logo (Hypnosez - Logo.dc.html), repris tel quel.
   Les battements d'ailes et le vol plané réutilisent flapL / flapR / drift,
   déclarées dans la maquette d'origine mais restées inemployées. */

.papillons {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.papillon {
  position: absolute;
  left: 0;
  animation: traverse linear infinite;
  will-change: transform;
}

.papillon__vol {
  display: block;
  animation: drift ease-in-out infinite;
}

.papillon svg {
  display: block;
  width: 100%;
  height: auto;
}

.papillon__aile {
  transform-box: view-box;
  transform-origin: 60px 66px;
}

.papillon__aile--g { animation: flapL .52s ease-in-out infinite; }
.papillon__aile--d { animation: flapR .52s ease-in-out infinite; }

/* Quatre trajectoires : hauteurs, tailles, vitesses et décalages distincts,
   pour qu'aucun passage ne se superpose à un autre. */
.papillon--1 { top: 14%; width: 34px; opacity: .45; animation-duration: 17s; animation-delay: -1s; }
.papillon--2 { top: 38%; width: 52px; opacity: .34; animation-duration: 23s; animation-delay: -9s; }
.papillon--3 { top: 63%; width: 28px; opacity: .5;  animation-duration: 14s; animation-delay: -5s; }
.papillon--4 { top: 84%; width: 44px; opacity: .28; animation-duration: 27s; animation-delay: -16s; }

.papillon--1 .papillon__vol { animation-duration: 3.6s; }
.papillon--2 .papillon__vol { animation-duration: 5.2s; }
.papillon--3 .papillon__vol { animation-duration: 2.9s; }
.papillon--4 .papillon__vol { animation-duration: 6.1s; }

.papillon--2 .papillon__aile { animation-duration: .68s; }
.papillon--3 .papillon__aile { animation-duration: .44s; }
.papillon--4 .papillon__aile { animation-duration: .78s; }

@media (max-width: 899px) {
  /* La navigation n'est masquée que si le panneau existe — donc si le script
     a tourné. Sans JavaScript, la navigation d'origine reste en place. */
  body.menu-mobile-ready .nav,
  body.menu-mobile-ready .site-header__cta { display: none; }

  .site-header__inner {
    flex-wrap: nowrap;
    gap: 12px;
    padding-block: 22px;
  }

  .brand {
    min-width: 0;
  }

  .brand__logo {
    width: clamp(150px, 44vw, 196px);
  }

  .brand__tagline {
    display: none;
  }

  .burger {
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 46px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    margin-right: calc(-1 * var(--gutter) + 12px);
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    cursor: pointer;
  }

  .burger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .3s ease, opacity .2s ease;
  }

  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* L'en-tête reste au-dessus du panneau : le logo est visible et le bouton,
     devenu croix, sert à refermer. Cantonné au mobile — sur grand écran cet
     empilement ferait passer l'en-tête devant le film d'accueil. */
  .site-header {
    position: relative;
    z-index: 70;
  }
}

body.menu-ouvert { overflow: hidden; }

/* ---------- Animations ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Reprises de la maquette d'origine, où elles étaient déclarées sans emploi. */
@keyframes flapL {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(58deg); }
}

@keyframes flapR {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(-58deg); }
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0); }
  50%  { transform: translate(30px, -22px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes traverse {
  from { transform: translate3d(-18vw, 0, 0); }
  to   { transform: translate3d(118vw, 0, 0); }
}

/* =========================================================================
   Adaptations — points de rupture repris de la maquette
   ========================================================================= */

/* Le film prend la moitié droite de la bande de contenu, gouttière comprise,
   et remonte jusqu'en haut de page — il passe derrière l'en-tête, comme dans
   la maquette. `--masthead-h` (hauteur de l'en-tête) est posée par site.js ;
   sans JavaScript elle vaut 0 et le film s'arrête sous l'en-tête. */
@media (min-width: 900px) {
  .hero__media {
    --sw: min(100%, calc(var(--shell) + 2 * var(--gutter)));

    position: absolute;
    top: calc(-1 * var(--masthead-h, 0px));
    right: calc((100% - var(--sw)) / 2);
    width: calc(var(--sw) * .58);
    height: calc(100% + var(--masthead-h, 0px));
    min-height: 0;
    flex: 0 0 auto;
    border-radius: 0;
  }
}

@media (max-width: 1100px) {
  .grid--info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .duo,
  .cards,
  .tiles,
  .tarifs { grid-template-columns: minmax(0, 1fr); }

  /* Deux colonnes : dix vignettes s'y répartissent sans rangée boiteuse. */
  .besoins-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* En colonne unique la figure occupe toute la largeur du shell : les 7 % de
     débordement latéral du halo sortiraient de la page et y ajouteraient une
     barre de défilement horizontale. Le flou, lui, continue de peindre
     au-delà de la boîte — le fondu des bords est conservé. */
  .fondu .fondu__halo {
    left: 0;
    width: 100%;
  }

  .grid--trio,
  .grid--info { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__inner {
    min-height: 0;
    padding-block: clamp(30px, 7vw, 54px) clamp(48px, 8vw, 72px);
  }

  .hero__title {
    font-size: clamp(46px, 13.6vw, 64px);
    line-height: 1;
  }

  .hero__media { display: none; }

  .step,
  .step:first-child,
  .step:last-child { padding: 26px 0; }

  /* Colonnes empilées : le filet ne court plus d'un médaillon à l'autre. Le
     médaillon revient dans le flux, sinon il chevaucherait l'étape du dessus. */
  .steps--parcours { --step-pad-top: 26px; }
  .step__pip { margin-top: 0; }

  .nav {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    padding: 0;
    gap: 10px 18px;
  }

  .nav a { white-space: nowrap; }
}

@media (max-width: 620px) {
  .grid--info,
  .grid--trio,
  .duo,
  .cards,
  .tiles,
  .tarifs { grid-template-columns: minmax(0, 1fr); }

  .parcours__etape { padding-left: 54px; }

  .callout__facts {
    flex-wrap: wrap;
    gap: 22px 44px;
  }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Les papillons n'ont de sens qu'animés : figés, ils resteraient coincés en
     bout de course. On les retire plutôt que de les laisser en plan. */
  .papillons { display: none; }
}