/* ═══════════════════════════════════════════════════════════════════════
   CAROLINE FACY — sexothérapeute existentielle
   Même grammaire que « Voyage au centre de l’Éros » v5 : mêmes fontes,
   même trame, mêmes gestes. Seule la matière change — le pétrole et
   l’indigo cèdent la place au rose et au violet du nuancier de la boule.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — Les huit repères du nuancier — */
  --rose:        #e61b6d;   /* rose flashy    · Pantone 213 C */
  --rose-poudre: #e994a7;   /* rose poudré    · Pantone 197 C */
  --mauve:       #b27cb3;   /* mauve          · Pantone 7439 C */
  --pourpre:     #96547e;   /* pourpre        · Pantone 682 C */
  --violet-vif:  #725189;   /* violet lumineux· Pantone 7678 C */
  --violet:      #483262;   /* violet profond · Pantone 269 C */
  --nuit:        #2a1c40;   /* violet nuit    · Pantone 2695 C */
  --or:          #c3a06f;   /* doré           · Pantone 872 C */

  /* — Dérivées : les fonds les plus sombres et les ors clairs — */
  --nuit-deep: #17102a;
  --abysse:    #0e0919;
  --or-clair:  #e9d5b1;
  --or-sourd:  #9a7c53;

  /* — Clairs — */
  --nacre:  #fbf6f2;
  --ivoire: #f4e8e6;
  --sable:  #e6d2cd;
  --encre:  #22162b;

  --trait:    rgba(233,213,177,.16);
  --trait-s:  rgba(34,22,43,.14);
  --or-trait: rgba(195,160,111,.42);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --shell: min(1260px, calc(100vw - 72px));
  --head-h: 86px;
  --ease:   cubic-bezier(.2,.8,.2,1);
  --ease-s: cubic-bezier(.33,1,.68,1);
}

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 18px);
}
body {
  margin: 0; background: var(--nuit-deep); color: var(--nacre);
  font-family: var(--sans); font-size: 17px; line-height: 1.68;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
img[hidden], [hidden] { display: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.018em; margin: 0; text-wrap: balance; }
p { margin: 0 0 18px; }
em { font-style: italic; }
cite { font-style: italic; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shell { width: var(--shell); margin-inline: auto; }
.copy { font-size: .45em; vertical-align: super; letter-spacing: 0; }

.grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; opacity: .045; mix-blend-mode: overlay; }

/* ── Apparition au défilement ──────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-s), transform 1s var(--ease-s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Barre de progression ──────────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; background: rgba(255,255,255,.05); }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet-vif), var(--mauve) 30%, var(--rose) 62%, var(--or) 100%); box-shadow: 0 0 14px rgba(230,27,109,.45); }

/* ── Bandeau ───────────────────────────────────────────────────────── */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 110; border-bottom: 1px solid transparent; transition: background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease); }
.masthead.is-scrolled { background: rgba(23,16,42,.82); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--trait); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: var(--head-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-boule {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: url("assets/logo-96.png") center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(230,27,109,.4));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .brand-boule { transform: rotate(8deg) scale(1.06); filter: drop-shadow(0 0 14px rgba(230,27,109,.6)); }
/* Le bloc de marque passe sur deux lignes : le nom, puis la discipline.
   Les deux tiennent dans les 86 px du bandeau. */
.brand-texte { display: flex; flex-direction: column; gap: 3px; }
.brand-word { font-family: var(--serif); font-size: 1.05rem; line-height: 1.08; }
.brand-sur { font-family: var(--serif); font-size: .76rem; line-height: 1.1; letter-spacing: .015em; color: var(--or-clair); }
.brand-word i { font-style: italic; color: var(--rose-poudre); }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a { position: relative; text-decoration: none; font-size: .75rem; letter-spacing: .055em; text-transform: uppercase; color: rgba(251,246,242,.62); transition: color .3s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--rose); transition: right .4s var(--ease); }
.nav a:hover, .nav a.is-active { color: var(--nacre); }
.nav a:hover::after, .nav a.is-active::after { right: 0; }
.nav-cta {
  border: 1px solid var(--or-trait); background: none; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; font: inherit;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or-clair);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav-cta:hover { background: var(--rose); border-color: var(--rose); color: #fff; }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span:not(.sr-only) { position: absolute; left: 11px; width: 22px; height: 1px; background: var(--nacre); transition: transform .35s var(--ease); }
.burger span:not(.sr-only):nth-of-type(1) { top: 19px; }
.burger span:not(.sr-only):nth-of-type(2) { top: 25px; }
.burger[aria-expanded="true"] span:not(.sr-only):nth-of-type(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:not(.sr-only):nth-of-type(2) { transform: translateY(-3px) rotate(-45deg); }

/* ── Boutons ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 11px; padding: 16px 32px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; font-family: var(--sans); font-size: .82rem; letter-spacing: .085em; text-transform: uppercase; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn span { transition: transform .4s var(--ease); }
.btn:hover span { transform: translate(3px,3px); }
.btn-rose { background: linear-gradient(118deg, var(--rose) 0%, var(--pourpre) 58%, var(--violet) 100%); color: #fff; box-shadow: 0 14px 42px rgba(230,27,109,.26); }
.btn-rose:hover { transform: translateY(-2px); box-shadow: 0 20px 54px rgba(230,27,109,.36); }
.btn-line { background: transparent; border-color: var(--trait); color: var(--nacre); }
.btn-line:hover { border-color: var(--rose-poudre); color: var(--rose-poudre); }
.btn-encre { background: transparent; border-color: rgba(134,73,111,.42); color: #86496f; }
.btn-encre:hover { border-color: var(--rose); color: var(--rose); background: rgba(255,255,255,.6); }
.btn-lg { padding: 20px 42px; font-size: .88rem; }
.btn-sm { padding: 12px 22px; font-size: .72rem; }

/* ── Surtitres ─────────────────────────────────────────────────────── */
.kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 26px; font-size: .73rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-poudre); font-weight: 500; }
.kicker::before { content: ""; width: 42px; height: 1px; background: var(--or-trait); }

/* ═══ I. LE SEUIL ═══════════════════════════════════════════════════ */
.seuil {
  position: relative; min-height: 100svh; display: grid;
  grid-template-columns: 1.02fr .98fr; align-items: center; gap: 40px;
  padding: calc(var(--head-h) + 40px) 0 80px;
  width: var(--shell); margin-inline: auto;
  background: radial-gradient(120% 90% at 18% 30%, rgba(114,81,137,.34) 0%, transparent 62%);
}
.seuil-copy { max-width: 560px; }
/* « Sexothérapie existentielle » se détache en haut de section, sous le
   bandeau : elle sort du flux pour ne pas pousser le bloc de texte, qui
   reste centré dans la hauteur. L'espace qu'elle occupait entre la
   baseline et le nom est laissé vide, par une marge sur la baseline. */
.seuil h1 { font-size: clamp(2.3rem, 11.5vw, 4.143rem); white-space: nowrap; }
.seuil h1 em { color: var(--rose-poudre); }
.seuil-sub { margin: 24px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.24rem; line-height: 1.42; color: var(--mauve); }
/* La baseline précède désormais le nom : elle porte l'annonce, le nom
   signe. Elle monte donc d'un cran en corps et passe en nacre — en mauve
   et sous le titre, elle n'était qu'un commentaire. */
.seuil-lead { margin: 30px 0 0; max-width: 540px; font-family: var(--serif); font-style: italic; font-size: clamp(1.26rem, 2.1vw, 1.62rem); line-height: 1.42; color: var(--nacre); }
.seuil-metier { margin: 14px 0 0; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-poudre); }
.seuil-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Le marbré et la boule : l’image n’a pas de bord, elle se dissout.
   Deux masques croisés — un fondu vertical sur le cadre, un fondu
   latéral sur la matière — pour qu’aucune arête ne se devine. */
.seuil-image {
  position: relative; align-self: center;
  width: 108%; margin-left: -8%;
  aspect-ratio: 1 / 1; max-height: 78svh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 18%, #000 82%, rgba(0,0,0,.5) 93%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 18%, #000 82%, rgba(0,0,0,.5) 93%, transparent 100%);
}
.seuil-photo {
  position: absolute; inset: 0; display: block;
  background: url("assets/marbre-rose.jpg") no-repeat 55% var(--sy, 50%) / cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.72) 26%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.72) 26%, #000 40%);
}
.seuil-boule {
  position: absolute; right: 4%; bottom: 2%; width: 56%; aspect-ratio: 900 / 866;
  background: url("assets/boule-rose.webp") no-repeat center / contain;
  filter: drop-shadow(0 24px 60px rgba(230,27,109,.28));
  animation: flotte 13s ease-in-out infinite;
}
@keyframes flotte { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }

/* ═══ II. SEXOTHÉRAPIE ══════════════════════════════════════════════ */
.sexo { position: relative; padding: 140px 0 132px; background: linear-gradient(180deg, var(--nacre) 0%, var(--ivoire) 100%); color: var(--encre); }
.sexo .kicker { color: var(--pourpre); }
.sexo .kicker::before { background: rgba(150,84,126,.4); }

.sexo-haut { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 66px; align-items: start; }
.sexo-portrait { margin: 0; position: relative; }
.sexo-portrait img { width: 100%; border-radius: 2px; }
.sexo-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 55%, rgba(230,27,109,.12) 100%);
}
.sexo-bio h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 26px; }
.sexo-bio h2 em { color: var(--pourpre); }
.sexo-bio .lede { font-family: var(--serif); font-size: 1.32rem; line-height: 1.5; color: #35233d; }
.sexo-bio p { color: #4d3c4e; font-size: 1rem; }
.sexo-bio cite { color: var(--pourpre); }

/* Le cursus : un encart sobre entre la bio et l’approche. Il énumère,
   il ne raconte pas — corps plus petit, filet au-dessus. */
.sexo-cursus { position: relative; z-index: 1; margin: 76px 0 0; padding-top: 0; max-width: 860px; }
.sexo-cursus p:not(.kicker) { margin: 0; font-size: .97rem; line-height: 1.68; color: #473851; }

.sexo-quoi { position: relative; margin: 84px 0 0; padding-top: 0; }
/* La boule veille derrière le texte, dissoute dans le crème : elle est là
   sans qu'on la regarde — c'est le propos du paragraphe. */
.sexo-quoi-boule {
  position: absolute; right: -4%; top: -26%; width: min(56%, 740px); aspect-ratio: 900/866;
  background: url("assets/boule-rose.webp") center/contain no-repeat;
  opacity: .22; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, rgba(0,0,0,.4) 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 42%, rgba(0,0,0,.4) 72%, transparent 100%);
}
.sexo-quoi > *:not(.sexo-quoi-boule) { position: relative; }
/* Le bloc occupe toute la largeur : on borne le titre et les colonnes
   pour garder une ligne lisible, et le tiers de droite revient à la
   boule — c’est elle qui tient le vide plutôt que de le laisser béant. */
.sexo-quoi h3 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); margin-bottom: 34px; max-width: 640px; }
.sexo-quoi-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 54px; max-width: 920px; }
.sexo-quoi-grid p { margin: 0; color: #4d3c4e; }
.sexo-quoi-grid em { color: var(--pourpre); font-style: italic; }

/* ═══ II bis. L’ONDE — le bandeau vidéo ═════════════════════════════
   L’eau rose en ondes concentriques, à peine assombrie pour que le
   texte porte. Reprise du bandeau du site Éros : même dispositif, autre
   matière. */
.onde { position: relative; padding: 108px 0; text-align: center; overflow: hidden; background: var(--nuit-deep); }
.onde-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.05) brightness(.8); }
.onde-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,16,42,.6) 0%, rgba(23,16,42,.2) 34%, rgba(23,16,42,.24) 66%, rgba(23,16,42,.66) 100%);
}
.onde .shell { position: relative; z-index: 2; }
.onde h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.9rem); line-height: 1.16;
  max-width: 940px; margin-inline: auto; color: #fffdfc;
  text-shadow: 0 2px 30px rgba(14,9,25,.75);
}
.onde h2 em { color: var(--rose-poudre); }

/* ═══ II ter. POUR QUI, POURQUOI ════════════════════════════════════ */
.pourquoi { position: relative; padding: 58px 0 122px; background: linear-gradient(180deg, var(--ivoire) 0%, var(--nacre) 68%, var(--ivoire) 100%); color: var(--encre); }

/* Le ruban : les motifs se croisent, ils ne se lisent pas en liste. */
/* Le ruban est collé sous le bandeau vidéo : il en est la suite, pas une
   section à part. Fond repris du haut de la section suivante. */
.onde-motifs { background: var(--ivoire); }
.motifs { padding: 30px 0 28px; margin-bottom: 0; background: transparent; color: var(--encre); overflow: hidden; }
.motifs-titre { width: var(--shell); margin-inline: auto; color: var(--pourpre); }
.motifs-titre::before { background: rgba(150,84,126,.42); }
.motifs-piste {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.motifs-ruban { display: flex; width: max-content; gap: 14px; animation: defile 74s linear infinite; }
.motifs:hover .motifs-ruban, .motifs-ruban:focus-within { animation-play-state: paused; }
.motifs-ruban span {
  flex: none; padding: 14px 26px; border: 1px solid rgba(150,84,126,.26); border-radius: 999px;
  font-family: var(--serif); font-size: 1.1rem; white-space: nowrap;
  background: rgba(255,255,255,.66); color: #4d3c4e;
}
.motifs-ruban span:nth-child(3n) { border-color: rgba(230,27,109,.42); color: var(--pourpre); }
@keyframes defile { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 7px)) } }

/* ── La constellation ──────────────────────────────────────────────
   Six dimensions autour d’un même foyer. Le foyer, c’est la boule à
   facettes : elle pulse, et de chaque battement part un fil qui va
   jusqu’à une dimension. Rien ne se lit en liste — tout rayonne.

   Le SVG s’étire avec le cadre (preserveAspectRatio="none") : les fils
   restent accrochés aux médaillons quelle que soit la largeur. En
   dessous de 1020px la figure n’a plus la place de s’ouvrir, elle se
   replie en colonne et le fil devient vertical. */
.pourquoi-head { max-width: 720px; margin-bottom: 26px; }
.pourquoi-head h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); color: #2f1f38; margin-bottom: 20px; }
.pourquoi-head h2 em { color: var(--rose); }
.pourquoi-head .lede { max-width: 620px; font-size: 1.06rem; line-height: 1.66; color: #4d3c4e; }

.constel { position: relative; min-height: 700px; margin-top: 10px; }
.constel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.constel-fils path {
  fill: none; stroke: url("#filFoyer"); stroke-width: 1.5; opacity: .5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s var(--ease-s);
}
.constel.is-in .constel-fils path { stroke-dashoffset: 0; }
.constel-fils path:nth-child(2) { transition-delay: .1s; }
.constel-fils path:nth-child(3) { transition-delay: .2s; }
.constel-fils path:nth-child(4) { transition-delay: .3s; }
.constel-fils path:nth-child(5) { transition-delay: .4s; }
.constel-fils path:nth-child(6) { transition-delay: .5s; }
.constel-fils path:nth-child(7) { transition-delay: .6s; }
.constel-flux path {
  fill: none; stroke: var(--rose); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: .13, .87; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(230,27,109,.55));
}
.constel.is-in .constel-flux path { opacity: .9; animation: fluxfoyer 4.2s linear infinite; }
.constel.is-in .constel-flux path:nth-child(2) { animation-delay: .7s; }
.constel.is-in .constel-flux path:nth-child(3) { animation-delay: 1.4s; }
.constel.is-in .constel-flux path:nth-child(4) { animation-delay: 2.1s; }
.constel.is-in .constel-flux path:nth-child(5) { animation-delay: 2.8s; }
.constel.is-in .constel-flux path:nth-child(6) { animation-delay: 3.5s; }
.constel.is-in .constel-flux path:nth-child(7) { animation-delay: 4.2s; }
@keyframes fluxfoyer { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
.constel-ancre { fill: var(--rose); opacity: .7; }
.fil-goutte { display: none; }

/* Le foyer : la boule bat, trois ondes s’en détachent. */
.foyer {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 150px; height: 150px; display: grid; place-items: center; z-index: 3;
}
.foyer::before {
  content: ""; position: absolute; width: 184px; height: 184px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(251,246,242,.96) 38%, rgba(251,246,242,.62) 60%, transparent 76%);
}
.foyer::after {
  content: ""; position: absolute; width: 172px; height: 172px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(230,27,109,.3), transparent 66%);
  animation: foyerhalo 3.6s cubic-bezier(.37,0,.63,1) infinite;
}
@keyframes foyerhalo {
  0%, 100% { transform: scale(.82); opacity: .4 }
  50%      { transform: scale(1.2);  opacity: .9 }
}
/* La boule tourne : c’est la vidéo du cadran, ralentie de moitié — un
   tour en trente secondes. Son rush a un fond nuit ; plutôt que de le
   masquer à moitié sur l’ivoire, on l’assume en écrin : un puits sombre
   cerclé de rose, d’où part toute la constellation. Le battement porte
   sur l’écrin, jamais sur la vidéo elle-même : un transform + filter sur
   le média force Safari à le rastériser en basse définition. */
.foyer-disque {
  position: relative; z-index: 2; display: block; width: 120px; height: 120px;
  border-radius: 50%; overflow: hidden;
  box-shadow:
    0 14px 30px -14px rgba(72,50,98,.5),
    0 0 0 1px rgba(230,27,109,.3);
  will-change: transform;
  animation: foyerbat 3.6s cubic-bezier(.37,0,.63,1) infinite;
}
.foyer-boule {
  position: absolute; left: -8%; top: -8%; display: block;
  width: 116%; height: 116%; object-fit: cover;
  background: var(--nuit-deep);
}
@keyframes foyerbat {
  0%        { transform: scale(1) }
  17%       { transform: scale(1.072) }
  32%       { transform: scale(1.014) }
  46%       { transform: scale(1.042) }
  68%, 100% { transform: scale(1) }
}
.foyer-onde {
  position: absolute; width: 108px; height: 108px; border-radius: 50%;
  border: 1.5px solid var(--rose); opacity: 0; transform: scale(.45);
  animation: foyeronde 3.6s cubic-bezier(.33,0,.67,1) infinite;
}
.foyer-onde.o2 { animation-delay: 1.2s; }
.foyer-onde.o3 { animation-delay: 2.4s; }
@keyframes foyeronde {
  0%   { transform: scale(.45); opacity: .62 }
  78%  { opacity: 0 }
  100% { transform: scale(2); opacity: 0 }
}

/* Les six dimensions : un médaillon, un rang, un titre, un souffle. */
.dim {
  position: absolute; transform: translate(-50%,-50%);
  width: 188px; text-align: center; z-index: 2;
  animation: dimflotte 8s var(--ease) infinite;
}
.d-soi        { top: 13.3%; left: 50.0%; }
.d-couple     { top: 27.1%; left: 79.1%; animation-delay: -1.14s; }
.d-famille    { top: 58.2%; left: 86.3%; animation-delay: -2.29s; }
.d-palpitant  { top: 83.1%; left: 66.1%; animation-delay: -3.43s; }
.d-reussite   { top: 83.1%; left: 33.9%; animation-delay: -4.57s; }
.d-argent     { top: 58.2%; left: 13.7%; animation-delay: -5.71s; }
.d-esprit     { top: 27.1%; left: 20.9%; animation-delay: -6.86s; }
@keyframes dimflotte {
  0%, 100% { transform: translate(-50%,-50%) }
  50%      { transform: translate(-50%, calc(-50% - 10px)) }
}
.dim-in { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.constel.is-in .dim-in { opacity: 1; transform: none; }
.constel.is-in .dim:nth-of-type(1) .dim-in { transition-delay: .18s; }
.constel.is-in .dim:nth-of-type(2) .dim-in { transition-delay: .32s; }
.constel.is-in .dim:nth-of-type(3) .dim-in { transition-delay: .46s; }
.constel.is-in .dim:nth-of-type(4) .dim-in { transition-delay: .6s; }
.constel.is-in .dim:nth-of-type(5) .dim-in { transition-delay: .74s; }
.constel.is-in .dim:nth-of-type(6) .dim-in { transition-delay: .88s; }
.constel.is-in .dim:nth-of-type(7) .dim-in { transition-delay: 1.02s; }

.dim-sceau {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; padding: 6px; margin: 0 auto 14px; border-radius: 50%;
  color: var(--rose);
  background: radial-gradient(circle at 50% 34%, #fff, var(--nacre) 72%);
  box-shadow: 0 16px 36px -16px rgba(230,27,109,.55), inset 0 0 0 1px rgba(230,27,109,.16);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Les pictos de Caroline sont d’un seul ton sur fond transparent : on ne
   les pose pas en image mais en masque, et c’est le CSS qui donne la
   couleur — prune au repos, rose au survol, sans second fichier. */
.dim-picto {
  display: block; width: 100%; height: 100%;
  background: var(--violet);
  -webkit-mask: var(--picto) center / contain no-repeat;
          mask: var(--picto) center / contain no-repeat;
  transition: background .45s var(--ease);
}
.dim:hover .dim-picto { background: var(--rose); }
.d-soi        .dim-picto { --picto: url("assets/picto-soi.webp") }
.d-couple     .dim-picto { --picto: url("assets/picto-couple.webp") }
.d-famille    .dim-picto { --picto: url("assets/picto-famille.webp") }
.d-palpitant  .dim-picto { --picto: url("assets/picto-palpitant.webp") }
.d-reussite   .dim-picto { --picto: url("assets/picto-reussite.webp") }
.d-argent     .dim-picto { --picto: url("assets/picto-argent.webp") }
.d-esprit     .dim-picto { --picto: url("assets/picto-esprit.webp") }
.dim-sceau::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(230,27,109,.34); opacity: 0;
}
.dim:hover .dim-sceau { transform: translateY(-6px) scale(1.06); box-shadow: 0 24px 50px -16px rgba(230,27,109,.68), inset 0 0 0 1px rgba(230,27,109,.3); }
.dim:hover .dim-sceau::after { opacity: 1; animation: sceauanneau 1.5s var(--ease) infinite; }
@keyframes sceauanneau {
  0%   { transform: scale(1); opacity: .8 }
  100% { transform: scale(1.34); opacity: 0 }
}
.dim-sceau::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 215%; height: 215%;
  transform: translate(-50%,-50%) scale(.3); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 36%, var(--eclat, rgba(230,27,109,.55)) 54%, transparent 76%);
  opacity: 0; animation: sceaueclat 4.8s var(--ease) infinite;
}
.d-soi        .dim-sceau::before { --eclat: rgba(230,27,109,.55); animation-delay: 0.4s; }
.d-couple     .dim-sceau::before { --eclat: rgba(233,148,167,.72); animation-delay: 1.1s; }
.d-famille    .dim-sceau::before { --eclat: rgba(178,124,179,.66); animation-delay: 1.8s; }
.d-palpitant  .dim-sceau::before { --eclat: rgba(230,27,109,.55); animation-delay: 2.5s; }
.d-reussite   .dim-sceau::before { --eclat: rgba(195,160,111,.7); animation-delay: 3.2s; }
.d-argent     .dim-sceau::before { --eclat: rgba(150,84,126,.62); animation-delay: 3.9s; }
.d-esprit     .dim-sceau::before { --eclat: rgba(114,81,137,.62); animation-delay: 4.6s; }
/* Le fil et la goutte, version repliée (voir la requête média plus bas).
   La goutte descend en pourcentage pur — pas de calc() dans une image-clé
   de background-position, toutes les fontes ne l’interpolent pas — et
   c’est un fondu qui masque le retour en haut de course. */
@keyframes filcourant { from { background-position: 50% 0% } to { background-position: 50% 100% } }
/* Trois élans, jamais d’arrêt : les courbes gardent une pente non nulle aux
   jonctions, et du plus lent au plus rapide le rapport n’est que de 1,35 —
   assez pour qu’on sente la respiration, pas assez pour qu’on la compte. */
@keyframes filgoutte {
  0%   { transform: translate(-50%, 0);    opacity: 1; animation-timing-function: cubic-bezier(.42,.36,.58,.64) }
  36%  { transform: translate(-50%, 32%);  animation-timing-function: cubic-bezier(.42,.36,.58,.64) }
  70%  { transform: translate(-50%, 70%);  opacity: 1; animation-timing-function: cubic-bezier(.42,.36,.58,.64) }
  100% { transform: translate(-50%, 100%); opacity: 0 }
}
@keyframes sceaubat { 0%, 100% { transform: none } 50% { transform: translateY(-5px) } }

@keyframes sceaueclat {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: 0 }
  8%   { opacity: .9 }
  40%  { opacity: 0 }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0 }
}

.dim-num { display: block; margin-bottom: 6px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or-sourd); font-weight: 600; }
.dim h3 { font-size: 1.26rem; color: #2f1f38; margin-bottom: 6px; }
.dim p { margin: 0; font-size: .88rem; line-height: 1.45; color: #4d3c4e; }

.champs-cta { margin-top: 48px; text-align: center; }

/* ═══ II quater. LE CŒUR ÉNERGÉTIQUE — bandeau ══════════════════════ */
.coeur {
  position: relative; min-height: 62svh;
  display: grid; grid-template-columns: minmax(0,53fr) minmax(0,47fr); align-items: center;
  color: var(--nacre);
  background:
    radial-gradient(60% 50% at 88% 16%, rgba(114,81,137,.34) 0%, transparent 64%),
    linear-gradient(192deg, var(--violet) 0%, var(--nuit-deep) 62%);
}
.coeur-image {
  position: relative; align-self: center; width: 112%;
  aspect-ratio: 16 / 10; max-height: 58svh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent 100%);
}
.coeur-photo {
  position: absolute; inset: 0; display: block;
  background: url("assets/reseau-boules.webp") 62% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.72) 30%, #000 46%);
          mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.72) 30%, #000 46%);
}
.coeur-texte { position: relative; z-index: 2; padding: 92px calc((100vw - var(--shell)) / 2) 92px clamp(32px, 4vw, 68px); }
.coeur-head { max-width: 620px; }
.coeur-head h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.16; color: #fffdfc; }
.coeur-head h2 em { color: var(--rose); }

/* Le récit de la voie de l’Éros : un texte long, tenu en deux colonnes
   pour qu’aucune ligne ne dépasse la mesure confortable. */
.eros-recit { margin-top: 34px; }
.eros-recit p { margin: 0; font-size: 1rem; line-height: 1.72; color: rgba(251,246,242,.74); }
.eros-recit em { font-style: italic; color: var(--rose-poudre); }

/* ═══ III. LA VOIE DE L’ÉROS ════════════════════════════════════════ */
.eros { position: relative; overflow: hidden; padding: 140px 0 146px; background: linear-gradient(172deg, var(--nuit-deep) 0%, var(--violet) 48%, var(--nuit) 100%); }
.eros-halo { position: absolute; inset: -12% -20% auto; height: 80%; background: radial-gradient(56% 60% at 78% 14%, rgba(230,27,109,.18), transparent 68%); pointer-events: none; }
.eros .shell { position: relative; }
.eros-head { max-width: none; margin-bottom: 74px; }
.eros-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 20px; max-width: 900px; }
.eros-head h2 em { color: var(--rose-poudre); }
.eros-head .lede { margin: 0; font-size: 1.05rem; color: rgba(251,246,242,.78); }

/* Trois blocs à la verticale : chaque offre prend la largeur, son visuel
   d'un côté, son texte de l'autre — et le second s'inverse, pour que
   l'œil ne s'installe pas dans une trame. */
.eros-blocs { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.offre {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center; gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: background .5s var(--ease);
}
.offre:hover { background: rgba(255,255,255,.06); }
.offre-inverse .offre-visuel { order: 2; }
.offre-visuel { position: relative; margin: 0; align-self: stretch; overflow: hidden; }
.offre-visuel img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
/* Les deux lieux du stage alternent. Le Hameau reste dans le flux et donne sa
   hauteur à la figure ; Marrakech se superpose et passe en fondu. Trois
   secondes chacun, une demi-seconde de fondu. */
.offre-duo .duo-b {
  position: absolute; inset: 0; opacity: 0;
  animation: duoalterne 7s ease-in-out infinite;
}
@keyframes duoalterne {
  0%, 43%  { opacity: 0 }
  50%, 93% { opacity: 1 }
  100%     { opacity: 0 }
}

.offre-texte { padding: 46px 46px 44px; }
.offre h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.14; margin-bottom: 8px; }
.offre-type { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--mauve); }
.offre p { font-size: .96rem; line-height: 1.64; color: rgba(251,246,242,.72); }
.offre-lien { margin: 22px 0 0; }
.offre-note { margin: 18px 0 0; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--mauve); }
.offre strong { color: var(--rose-poudre); font-weight: 400; }
.offre em { font-style: italic; color: var(--rose-poudre); }
.offre-bouton { margin: 26px 0 0; }
.offre-bouton .btn { text-align: left; }
.offre-lien a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rose-poudre); border-bottom: 1px solid rgba(233,148,167,.3); padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.offre-lien a:hover { color: #fff; border-bottom-color: var(--rose); }
.offre-lien svg { width: 13px; height: 13px; }

/* La Carte : l'animation remplace le visuel, et les textes des axes se
   lisent dessous plutôt qu'à côté. */
.offre-carte { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); }
/* L'animation prend la place du visuel, à gauche — ainsi les trois blocs
   alternent : image à gauche, image à droite, animation à gauche. */
.offre-carte { grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); }
/* ── La Carte, bande claire ────────────────────────────────────────
   Elle quitte le cadre des trois offres pour s'installer sur sa propre
   bande, pleine largeur et en clair : au milieu d'une section sombre,
   c'est ce qui la détache le mieux. Le cadran, lui, garde sa nuit —
   son canvas dessine en « lighter », c'est-à-dire en additif : sur un
   fond clair, les éclats disparaîtraient purement et simplement. Il
   est donc posé dans un écrin sombre, comme une fenêtre sur le soir. */
.carte-bande {
  position: relative; z-index: 1; margin: 96px 0 92px; padding: 16px 0;
  background: linear-gradient(180deg, var(--nacre) 0%, var(--ivoire) 58%, var(--nacre) 100%);
}
.carte-bande .offre-carte { background: none; border: 0; }
.carte-bande .offre-carte:hover { background: none; }
/* Les sélecteurs sont montés d'un cran : sans le « p. », la règle générique
   .carte-bande .offre p (0-2-1) écrasait le surtitre et le type (0-2-0), et
   toute la hiérarchie retombait dans le même gris. */
.carte-bande .offre-texte p { color: #463650; }
.carte-bande .offre-texte p.offre-quand { color: #7a5f33; font-weight: 500; }
.carte-bande .offre-texte p.offre-type { color: var(--pourpre); }
.carte-bande .offre-texte h3 { color: #241631; }
.carte-bande .offre-texte strong { color: #c01257; }
.carte-bande .offre-texte em { color: var(--pourpre); }
.carte-bande .offre-texte .copy { color: #7a5f33; }

.carte-bande .cadran-bloc {
  margin: 30px 0; border-radius: 22px;
  background: radial-gradient(120% 104% at 50% 0%, var(--violet) 0%, var(--nuit) 48%, var(--abysse) 100%);
  box-shadow: 0 34px 74px -30px rgba(42,28,64,.65), inset 0 0 0 1px rgba(230,27,109,.16);
}

.offre-carte .offre-texte { order: 1; }
.offre-carte .cadran-bloc { order: 2; }
.cadran-bloc { padding: 44px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.cadran { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; }
.cadran-lumieres { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.cadran-anneau { position: absolute; inset: 19%; border: 1px solid rgba(195,160,111,.4); border-radius: 50%; pointer-events: none; }
.cadran-anneau.fin { inset: 6%; border-color: rgba(195,160,111,.09); }

/* Un point d'or à chaque axe, posé sur l'anneau : c'est lui qui marque la
   position, l'étiquette se lit en dehors. Il s'allume au point haut. */
.axe-point {
  --p: 0;
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fff 0%, var(--or-clair) 46%, var(--or) 100%);
  box-shadow: 0 0 calc(4px + 16px * var(--p)) rgba(233,213,177, calc(.28 + .52 * var(--p)));
  opacity: calc(.52 + .48 * var(--p));
  pointer-events: none; z-index: 2;
}

/* La boule à facettes, au centre du cadran. C'est une vidéo : le canvas ne
   dessine plus que les éclats projetés autour d'elle. Le fond noir du fichier
   est découpé par un masque elliptique à bord adouci — mix-blend-mode ne
   convenait pas, il ne se compose pas au-dessus d'un canvas. */
/* Le battement porte sur l'enveloppant, jamais sur la vidéo : un transform
   appliqué à un média force Safari à le rastériser en basse définition.
   C'est aussi lui qui porte le masque qui dissout les bords du cadre. */
.cadran-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 56%; aspect-ratio: 1; display: block; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cadranbat 3.8s cubic-bezier(.37,0,.63,1) infinite;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 88%, rgba(0,0,0,.45) 95%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 88%, rgba(0,0,0,.45) 95%, transparent 100%);
}
@keyframes cadranbat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) }
  50%      { transform: translate(-50%, -50%) scale(1.052) }
}
.cadran-boule { width: 100%; height: 100%; display: block; object-fit: contain; }


.axe {
  --p: 0;
  position: absolute; left: 0; top: 0; width: clamp(86px, 27%, 146px);
  padding: 6px 4px; text-align: center; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); color: rgba(251,246,242,.72);
  opacity: calc(.44 + .56 * var(--p));
  will-change: transform; transition: color .45s var(--ease);
}
.axe b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(.86rem, 2.1vw, 1.04rem); line-height: 1.14; color: var(--nacre);
  transition: font-size .5s var(--ease), letter-spacing .5s var(--ease);
  text-shadow: 0 0 calc(6px + 26px * var(--p)) rgba(233,148,167, calc(.14 + .58 * var(--p)));
}
.axe span {
  display: block; margin-top: 3px;
  font-size: clamp(.6rem, 1.5vw, .69rem); line-height: 1.26; letter-spacing: .04em;
  text-shadow: 0 0 calc(4px + 16px * var(--p)) rgba(233,148,167, calc(.1 + .4 * var(--p)));
}

/* Un seul axe parle à la fois : celui qui passe au point haut. Sans cela les
   sept sous-titres se chevauchent — ils font en moyenne 39 caractères. */
.axe span { overflow: hidden; max-height: 0; margin-top: 0; opacity: 0;
  transition: max-height .4s var(--ease), opacity .4s var(--ease),
              margin-top .4s var(--ease), font-size .5s var(--ease); }

.axe.est-haut span { max-height: 4.4em; margin-top: 3px; opacity: 1; }
.axe:hover { color: var(--nacre); }
.axe.est-haut, .axe.est-haut b { color: var(--or-clair); }

/* L'axe qui atteint le point haut se donne à lire : il grandit et déplie son
   sous-titre. Agrandir la police plutôt que scale() — la position circulaire
   est déjà portée par transform, et le texte reste net. */
.axe.est-haut b { font-size: clamp(1.04rem, 2.7vw, 1.32rem); letter-spacing: .006em; }
.axe.est-haut span { font-size: clamp(.66rem, 1.7vw, .78rem); }

.cadran-detail {
  width: 100%; max-width: 440px; min-height: 250px; margin-top: 8px;
  padding-top: 26px; border-top: 1px solid var(--or-trait);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.cadran-detail.bascule { opacity: 0; transform: translateY(9px); }
.cadran-detail .num { margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(233,213,177,.82); }
.cadran-detail h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; margin: 9px 0 5px; color: var(--nacre); }
.cadran-detail .sous { font-family: var(--serif); font-style: italic; color: var(--rose-poudre); font-size: 1.04rem; }
.cadran-detail p { margin: 0; }
.cadran-detail .quoi { margin-top: 16px; color: rgba(251,246,242,.76); font-size: 1.01rem; }

/* ═══ VII. CAROLINE & BENOÎT ════════════════════════════════════════ */
.cadran-detail { text-align: left; }


.offre-quand { margin: 0 0 18px; font-size: .68rem; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; color: var(--or); font-variant-numeric: tabular-nums; }
.offre-lien a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rose-poudre); border-bottom: 1px solid rgba(233,148,167,.3); padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.offre-lien a:hover { color: #fff; border-bottom-color: var(--rose); }
.offre-lien svg { width: 13px; height: 13px; }

/* ═══ IV. CLITORACLE ════════════════════════════════════════════════ */
.oracle { padding: 78px 0 82px; background: linear-gradient(180deg, var(--ivoire) 0%, var(--nacre) 100%); color: var(--encre); }
.oracle .kicker { color: var(--pourpre); }
.oracle .kicker::before { background: rgba(150,84,126,.4); }
/* Même gabarit que le podcast, en miroir : là-bas la pochette est à
   gauche et le texte à droite, ici le texte est à gauche et la carte à
   droite. Les deux sections s’alternent en descendant la page. */
.oracle-inner { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 66px; align-items: center; }
.oracle-texte h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 20px; }
.oracle-texte h2 em { color: var(--rose); }
.oracle-texte .lede { margin: 0 0 20px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: #35233d; }
.oracle-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
/* « Commander le coffret » n'a de sens qu'une fois la carte découverte.
   La classe est-tiree est posée dès le début du battage — c'est bat qui
   tombe à la fin —, d'où le :not(.bat) : le bouton attend le dernier temps. */
.oracle-cta .btn-encre { display: none; }
.carte.est-tiree:not(.bat) ~ .oracle-cta .btn-encre { display: inline-flex; }
.oracle-visuel { text-align: center; }

.carte { max-width: 270px; margin-inline: auto; }

/* La carte : le dos reste visible tant que rien n'est tiré, puis l'image
   prend toute la place. Pendant le battage, un léger flou de mouvement
   et un basculement — assez pour que l'œil sente la vitesse. */
/* Au repos, on ne doit voir que le boîtier détouré posé sur le fond de
   section : ni cadre ni ombre. Les deux reviennent dès qu'une vraie carte
   occupe le cadre — pendant le battage, puis une fois le tirage fait. La
   bordure reste là, transparente, pour qu'aucun pixel ne bouge au moment
   où elle se colore. */
.carte {
  position: relative; width: 100%; aspect-ratio: 1039 / 1500;
  cursor: pointer; border-radius: 8px; overflow: hidden;
  border: 1px solid transparent;
  transition: transform .5s var(--ease-s), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.carte:hover { transform: translateY(-4px); }
.carte.bat, .carte.est-tiree {
  border-color: var(--or-trait);
  box-shadow: 0 22px 60px rgba(72,50,98,.26);
}
.carte.est-tiree:hover { box-shadow: 0 30px 74px rgba(72,50,98,.34); }
.carte-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le coffret est détouré : son pourtour est transparent, et c'est le fond
   de section qui passe derrière. Pas de couleur à recopier, donc pas de
   risque d'écart si le dégradé de la section bouge un jour. */
.carte-dos {
  position: absolute; inset: 0;
  background: transparent url("assets/clitoracle-dos.webp?v=3") center / 88% auto no-repeat;
  transition: opacity .5s var(--ease);
}
.carte.est-tiree .carte-dos { opacity: 0; }
.carte.bat { box-shadow: 0 18px 46px rgba(72,50,98,.34); }

.carte-nom { display: block; font-family: var(--serif); font-style: italic; font-size: 1.44rem; line-height: 1.2; color: var(--pourpre); }
.carte-famille { display: block; margin-top: 7px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(34,22,43,.5); }
[data-tirer]:disabled { opacity: .55; cursor: default; transform: none; }

.oracle-texte p:not(.lede):not(.kicker) { font-size: 1rem; line-height: 1.7; color: #4d3c4e; }
.oracle-texte em { font-style: normal; color: var(--pourpre); }
.oracle-note { margin: 24px 0 0 !important; font-family: var(--serif); font-style: italic; font-size: 1.04rem; color: var(--rose); }

/* ═══ IV bis. LE PODCAST ════════════════════════════════════════════
   Une seule idée par section : la pochette d'un côté, le propos de
   l'autre. Fond de nuit, pour trancher avec l'oracle qui est clair. */
.pod { position: relative; overflow: hidden; padding: 132px 0 138px; background: linear-gradient(172deg, var(--nuit-deep) 0%, var(--violet) 52%, var(--nuit) 100%); }
.pod::after {
  content: ""; position: absolute; inset: auto -10% -30% auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(230,27,109,.16), transparent 70%);
  pointer-events: none;
}
.pod-inner { position: relative; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 66px; align-items: center; }
.pod-pochette { margin: 0; }
.pod-pochette img {
  width: 100%; max-width: 360px; border-radius: 18px;
  box-shadow: 0 30px 70px rgba(14,9,25,.62), 0 0 0 1px var(--or-trait);
}
.pod-texte h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 20px; }
.pod-texte h2 em { color: var(--rose-poudre); }
.pod-texte .lede { font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--nacre); }
.pod-texte p { color: rgba(251,246,242,.74); font-size: 1rem; }
.pod-chiffres { margin-top: 22px; font-size: .88rem; letter-spacing: .04em; color: rgba(251,246,242,.58); }
.pod-chiffres b { font-weight: 400; color: var(--or); }
.pod-cta { margin: 30px 0 0; }

/* ═══ IV ter. MÉDITATIONS & INSPIRATIONS ════════════════════════════ */
.ressources { padding: 132px 0 138px; background: linear-gradient(180deg, var(--nacre) 0%, var(--ivoire) 100%); color: var(--encre); }
.ressources .kicker { color: var(--pourpre); }
.ressources .kicker::before { background: rgba(150,84,126,.4); }
.ressources-head { max-width: 680px; margin-bottom: 60px; }
.ressources-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.ressources-head h2 em { color: var(--rose); }
/* ── Le carnet ─────────────────────────────────────────────────────
   Un index de blog : des billets en grille, filtrables par nature.
   La vignette est un aplat tant qu'il n'y a pas d'image — mieux vaut
   un bloc de couleur assumé qu'une photo de banque d'images. */
.billets-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.filtre {
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(150,84,126,.26); background: rgba(255,255,255,.6);
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #4d3c4e; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filtre:hover { border-color: rgba(230,27,109,.45); color: var(--pourpre); }
.filtre.est-actif { background: var(--rose); border-color: var(--rose); color: #fff; }

.billets-note { margin: 0 0 34px; font-size: .84rem; font-style: italic; color: rgba(34,22,43,.5); }

.billets { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
.billet {
  display: grid; grid-template-columns: 148px minmax(0,1fr); align-items: stretch;
  background: rgba(255,255,255,.72); border: 1px solid rgba(150,84,126,.16);
  overflow: hidden; cursor: pointer;
  transition: background .45s var(--ease), transform .55s var(--ease-s), border-color .45s var(--ease);
}
.billet:hover { background: #fff; transform: translateY(-4px); border-color: rgba(230,27,109,.3); }
.billet[hidden] { display: none; }
.billet-vignette {
  display: block; align-self: stretch;
  background: linear-gradient(150deg, var(--rose-poudre) 0%, var(--mauve) 52%, var(--violet-vif) 100%);
}
.billet:nth-child(2n) .billet-vignette { background: linear-gradient(150deg, var(--or-clair) 0%, var(--rose-poudre) 58%, var(--pourpre) 100%); }
.billet-corps { padding: 24px 26px 22px; display: flex; flex-direction: column; }
.billet-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.billet-cat { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.billet-date { font-size: .74rem; font-style: italic; color: rgba(34,22,43,.44); }
.billet h3 { font-size: 1.3rem; line-height: 1.2; color: #2f1f38; margin-bottom: 9px; }
.billet-chapo { margin: 0 0 16px; font-size: .92rem; line-height: 1.55; color: #4d3c4e; }
.billet-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; }
.billet-duree { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(34,22,43,.42); }
.billet-lire { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pourpre); }
.billet-lire svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.billet:hover .billet-lire { color: var(--rose); }
.billet:hover .billet-lire svg { transform: translateX(4px); }

/* ═══ V. ÉDUCATION INTIME & SOCIÉTÉ ═════════════════════════════════ */
.societe { position: relative; overflow: hidden; padding: 140px 0 146px; background: linear-gradient(168deg, var(--nuit) 0%, var(--pourpre) 54%, var(--nuit-deep) 100%); }
/* Le marbré affleure derrière la section, dissous en haut et en bas : une
   matière, pas une image. Il passe sous le contenu, qui remonte d'un cran. */
.societe::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/marbre-rose.jpg") center / cover no-repeat;
  opacity: .24;
  /* Le marbre ne monte pas jusqu'au titre : ses veines dorées sont presque
     blanches, et le contraste du texte y tombait à 3,1 — sous le seuil de
     4,5. Le bloc de titre court jusqu'à 42 % de la hauteur et les volets
     commencent à 51 % : le fondu entre dans cet intervalle, et les volets
     ont de toute façon leur propre fond sombre. */
  -webkit-mask-image: linear-gradient(176deg, transparent 0%, transparent 44%, #000 58%, #000 86%, transparent 100%);
          mask-image: linear-gradient(176deg, transparent 0%, transparent 44%, #000 58%, #000 86%, transparent 100%);
}
.societe > .shell { position: relative; z-index: 1; }
.societe-head { max-width: 760px; margin-bottom: 70px; }
.societe-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 20px; }
.societe-head h2 em { color: var(--rose-poudre); }
.societe-head .lede { margin: 0; font-size: 1.05rem; color: rgba(251,246,242,.8); }

.societe-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.volet { padding: 34px 30px 32px; background: rgba(23,16,42,.42); border: 1px solid var(--trait); transition: background .5s var(--ease), transform .6s var(--ease-s); }
.volet:hover { background: rgba(23,16,42,.62); transform: translateY(-4px); }

.volet h3 { font-size: 1.38rem; line-height: 1.2; margin-bottom: 12px; }
.volet p { margin: 0; font-size: .93rem; color: rgba(251,246,242,.72); }

.societe-mot { margin: 74px auto 0; padding-top: 44px; max-width: 860px; border-top: 1px solid var(--trait); }
.societe-mot p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.34rem; line-height: 1.5; color: var(--or-clair); }

/* ═══ VI. PRENDRE RENDEZ-VOUS ═══════════════════════════════════════ */
.rdv { position: relative; overflow: hidden; text-align: left; padding: 134px 0 140px; background: radial-gradient(120% 92% at 50% 106%, var(--violet-vif) 0%, var(--violet) 32%, var(--abysse) 82%); }
/* La photo du cabinet, en fondu derrière les tarifs. Elle est déjà désaturée
   et assombrie dans le fichier : pas de filtre à calculer au défilement. */
.rdv-photo {
  position: absolute; inset: 0; pointer-events: none;
  /* calée à gauche : le tableau touche le bord gauche de la photo, un cadrage
     centré lui coupait 92 px. Le rognage passe entièrement à droite, sous le
     voile, où il ne se voit pas. */
  background: url("assets/cabinet.jpg") left 44% / cover no-repeat;
  opacity: .29;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.60) 7%, #000 18%, #000 70%, rgba(0,0,0,.38) 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.60) 7%, #000 18%, #000 70%, rgba(0,0,0,.38) 89%, transparent 100%);
}
/* Le voile passe par-dessus la photo : il garde les tarifs lisibles. */
.rdv-champ {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 36% at 78% 18%, rgba(230,27,109,.16), transparent 70%),
    linear-gradient(90deg, transparent 0%, transparent 25%, rgba(23,10,30,.26) 50%, rgba(23,10,30,.50) 78%, rgba(23,10,30,.62) 100%),
    linear-gradient(180deg, rgba(23,10,30,.26) 0%, rgba(23,10,30,.30) 40%, rgba(23,10,30,.30) 72%, rgba(23,10,30,.20) 100%);
}
/* Le bloc glisse à droite pour dégager le tableau, en haut à gauche de la
   photo. margin-left:auto absorbe l'espace libre : jamais de débordement. */
.rdv-inner { position: relative; max-width: 960px; margin-inline: auto; }
.rdv .kicker { justify-content: flex-start; }
.rdv h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); margin-bottom: 16px; }
.rdv h2 em { color: var(--rose-poudre); }
/* La citation tient lieu de titre de section : même corps qu'un h2, mais
   en italique et sans guillemets dessinés par le navigateur — ceux du
   français sont déjà dans le texte. La signature suit sur la même ligne,
   plus petite, comme à la main. */
.rdv-citation { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.22; margin-bottom: 26px; max-width: 760px; }
.rdv-citation q { font-style: italic; quotes: none; color: var(--nacre); }
.rdv-citation cite {
  display: inline-block; margin-left: 6px; font-style: normal;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--or-clair); vertical-align: middle;
}

/* La grille des tarifs : trois colonnes alignées au chiffre près. Les
   largeurs de la durée et du prix sont fixes — sans quoi les colonnes
   danseraient d’une ligne à l’autre — et les chiffres sont en chasse
   fixe pour que les euros s’empilent droit. */
.tarifs {
  list-style: none; margin: 0; padding: 0;
  max-width: 660px; text-align: left; border-top: 1px solid var(--trait);
}
.tarif {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 2px; border-bottom: 1px solid var(--trait);
}
.t-nom { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.16rem; color: var(--nacre); }
/* La précision reste lisible sans concurrencer le nom de la séance. */
.t-precision { font-size: .84rem; color: rgba(251,246,242,.66); white-space: nowrap; }
.t-duree {
  flex: none; width: 104px; text-align: right;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(251,246,242,.48); font-variant-numeric: tabular-nums;
}
.t-prix {
  flex: none; width: 104px; text-align: right;
  font-family: var(--serif); font-size: 1.16rem; color: var(--or-clair);
  font-variant-numeric: tabular-nums;
}
/* Le couple a deux durées : les deux lignes ne sont pas séparées d’un trait. */
.t-avant-suite { border-bottom: none; padding-bottom: 3px; }
.t-suite { padding-top: 3px; }
/* Stage et atelier ne se paient pas à la séance : on les détache. */
.t-premier-groupe { margin-top: 30px; border-top: 1px solid var(--trait); }
.t-groupe .t-prix { font-family: var(--sans); }
.t-prix a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose-poudre); border-bottom: 1px solid rgba(233,148,167,.34);
  padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.t-prix a svg { width: 13px; height: 13px; }
.t-prix a:hover { color: #fff; border-bottom-color: var(--rose); }

/* Le bouton se centre sous la colonne des tarifs, pas sous le bloc entier :
   sinon il part à droite de la liste et se détache d'elle. */
.rdv-actions { display: flex; justify-content: center; max-width: 660px; }
/* ═══ Pied de page ══════════════════════════════════════════════════ */
.foot { padding: 74px 0 40px; background: var(--abysse); border-top: 1px solid var(--trait); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 42px; }
.foot-ident .brand { margin-bottom: 18px; }
.foot-ident p { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; color: rgba(251,246,242,.6); }
.foot-reseaux { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.foot-reseaux a { text-decoration: none; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-poudre); }
.foot-reseaux a:hover { color: #fff; }
.foot-reseaux span { color: rgba(251,246,242,.3); }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-titre { margin: 0 0 6px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or); }
.foot-col a { text-decoration: none; font-size: .92rem; color: rgba(251,246,242,.66); transition: color .3s var(--ease); }
.foot-col a:hover { color: var(--rose-poudre); }
.foot-contact { margin: 0; }
.foot-col .btn { margin-top: 8px; align-self: flex-start; }
.foot-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--trait); }
.foot-bas p { margin: 0; font-size: .8rem; color: rgba(251,246,242,.42); }
.foot-bas a { color: rgba(251,246,242,.55); text-decoration: none; }
.foot-bas a:hover { color: var(--rose-poudre); }
.foot-bas span { margin: 0 10px; color: rgba(251,246,242,.25); }

/* ═══ Fenêtre de rendez-vous ════════════════════════════════════════ */
.dlg { width: min(560px, calc(100vw - 32px)); padding: 46px 44px 40px; border: 1px solid var(--or-trait); background: linear-gradient(162deg, var(--violet) 0%, var(--abysse) 100%); color: var(--nacre); box-shadow: 0 50px 130px rgba(0,0,0,.6); }
.dlg::backdrop { background: rgba(14,9,25,.84); backdrop-filter: blur(8px); }
.dlg-x { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; color: rgba(251,246,242,.55); transition: color .3s var(--ease); }
.dlg-x:hover { color: var(--rose-poudre); }
.dlg-head { margin-bottom: 28px; }
.dlg-head h2 { font-size: 2rem; margin-bottom: 14px; }
.dlg-head h2 em { color: var(--rose-poudre); }
.dlg-mention { margin: 0; font-family: var(--serif); font-style: italic; font-size: .93rem; color: var(--or-clair); }
.dlg .row { margin-bottom: 16px; }
.dlg label { display: block; margin-bottom: 7px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,246,242,.6); }
.dlg input, .dlg select, .dlg textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--trait); border-radius: 2px;
  background: rgba(255,255,255,.06); color: var(--nacre);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.dlg textarea { resize: vertical; }
.dlg input:focus, .dlg select:focus, .dlg textarea:focus { outline: none; border-color: var(--rose); background: rgba(255,255,255,.1); }
.dlg [aria-invalid="true"] { border-color: var(--rose); }
.dlg .btn { width: 100%; justify-content: center; margin-top: 8px; }
.status { margin: 14px 0 0; font-size: .88rem; color: var(--or-clair); min-height: 1.2em; }
.status.is-error { color: var(--rose-poudre); }

/* ═══ Tablette ══════════════════════════════════════════════════════ */
/* Sur grand écran, le bloc glisse à droite et laisse voir le tableau, en haut
   à gauche de la photo. Le dégagement vaut 220 px au minimum ; margin-left:auto
   absorbe le reste, donc aucun débordement possible. */
@media (min-width: 1021px) {
  .rdv-inner {
    max-width: min(960px, calc(var(--shell) - 220px));
    /* la marge droite reprend exactement la gouttière du site : le bloc glisse
       vers la droite sans jamais venir coller au bord de la fenêtre */
    margin-left: auto; margin-right: calc((100% - var(--shell)) / 2);
  }
}

@media (max-width: 1020px) {
  /* La constellation se replie : le foyer en tête, les six dimensions
     enfilées sur un fil vertical où un courant descend. */
  .constel { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 24px; }
  .constel-svg { display: none; }
  /* Deux animations de cadences différentes ne tiennent pas sur un même
     élément : une seule règle pilote tout le background-position. Le fil
     et sa lueur vivent donc dans ::before, la goutte dans ::after. Leurs
     courses sont données en pourcentage : elles épousent la longueur du
     trait sans qu’on ait à la connaître, et la goutte entre par le haut
     et sort par le bas, ce qui évite le saut au bouclage. */
  .constel::before,
  .fil-goutte {
    position: absolute; left: 50%; top: 166px; bottom: 62px;
    transform: translateX(-50%); z-index: 0; pointer-events: none;
    background-repeat: no-repeat;
  }
  .constel::before {
    content: ""; width: 2px;
    background-image: linear-gradient(180deg,
      rgba(230,27,109,.15) 0%, rgba(230,27,109,.15) 40%,
      var(--rose) 50%,
      rgba(230,27,109,.15) 60%, rgba(230,27,109,.15) 100%);
    background-size: 100% 300%;
    animation: filcourant 5s linear infinite;
  }
  /* La goutte est un calque de la hauteur du fil, dont seul le haut est
     peint. On le fait descendre en translateY(100 %) — cent pour cent de sa
     propre hauteur, donc exactement la longueur du fil, sans avoir à la
     connaître. Et surtout : un transform est composé par le GPU, là où un
     background-position redessine toute la colonne à chaque image. C’était
     ça, les à-coups. Le halo est peint dans le dégradé plutôt qu’en
     drop-shadow, pour ne pas refaire un flou à chaque fois. */
  .fil-goutte {
    display: block; width: 26px; overflow: visible;
    background-image: radial-gradient(circle,
      #fff 0%, #fff 13%,
      var(--rose) 26%,
      rgba(230,27,109,.55) 38%,
      rgba(230,27,109,.28) 52%,
      rgba(230,27,109,.1) 66%,
      rgba(230,27,109,0) 78%);
    background-size: 26px 26px;
    background-position: 50% 0;
    will-change: transform;
    animation: filgoutte 7.5s infinite;
  }
  .foyer { position: relative; top: auto; left: auto; transform: none; }
  .dim {
    position: relative; top: auto; left: auto; transform: none;
    width: 100%; max-width: 360px; z-index: 2; animation: none;
  }
  .dim-sceau { animation: sceaubat 3.2s var(--ease) infinite; }
  .dim:nth-of-type(2) .dim-sceau { animation-delay: .5s; }
  .dim:nth-of-type(3) .dim-sceau { animation-delay: 1s; }
  .dim:nth-of-type(4) .dim-sceau { animation-delay: 1.5s; }
  .dim:nth-of-type(5) .dim-sceau { animation-delay: 2s; }
  .dim:nth-of-type(6) .dim-sceau { animation-delay: 2.5s; }
  .dim:nth-of-type(7) .dim-sceau { animation-delay: 3s; }
  .pourquoi-head h2 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); }
  /* En colonne, l'image passe en tête : la ligne ne peut plus flotter
     par-dessus, elle reprend sa place dans le flux, avant tout le reste. */
  .seuil { grid-template-columns: 1fr; min-height: auto; padding-top: calc(var(--head-h) + 40px); }
  .seuil-image { width: 100%; margin-left: 0; max-height: 52svh; order: -1; }
  .sexo-haut { grid-template-columns: 1fr; gap: 44px; }
  .sexo-portrait { max-width: 420px; }
  .societe-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .oracle-inner { grid-template-columns: 1fr; gap: 40px; }
  .pod-inner { grid-template-columns: 1fr; gap: 40px; }
  .billets { grid-template-columns: 1fr; }
  .oracle-visuel { width: 100%; max-width: 330px; margin-inline: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .coeur { grid-template-columns: 1fr; min-height: auto; }
  .coeur-image { width: 100%; max-height: 40svh; order: -1; }
  .coeur-texte { padding: 56px 36px 64px; }
  .eros-recit { column-count: 1; }
}

/* ═══ Téléphone ═════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 22px; padding: 30px 28px 38px; background: rgba(23,16,42,.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--trait);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .4s var(--ease), opacity .4s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { font-size: .92rem; }
  .burger { display: block; }
}
@media (max-width: 620px) {
  /* Sur téléphone la photo est très recadrée : on la remonte un peu et on
     retire le dégradé latéral, qui n'a plus de colonne de prix à protéger. */
  .rdv-photo { opacity: .33; background-position: left 46%; }
  .rdv-champ {
    background:
      radial-gradient(40% 36% at 78% 18%, rgba(230,27,109,.16), transparent 70%),
      linear-gradient(180deg, rgba(23,10,30,.30) 0%, rgba(23,10,30,.34) 45%, rgba(23,10,30,.22) 100%);
  }
  body { font-size: 16px; }
  :root { --shell: calc(100vw - 32px); }
  .seuil { padding: calc(var(--head-h) + 34px) 0 62px; gap: 30px; }
  .seuil-lead { font-size: 1.08rem; }
  .seuil-metier { font-size: .72rem; letter-spacing: .1em; }
  .seuil-actions .btn { width: 100%; justify-content: center; }
  .sexo { padding-top: 92px; }
  .sexo-quoi { margin-top: 62px; padding-top: 38px; }
  .sexo-quoi-grid { grid-template-columns: 1fr; gap: 20px; max-width: none; }
  /* Sans colonne de droite à tenir, la boule peut reprendre de l’ampleur. */
  .sexo-quoi-boule { width: min(82%, 330px); top: -10%; right: -10%; }
  .motifs { margin-top: 0; padding: 24px 0 26px; }
  .motifs-ruban span { font-size: .98rem; padding: 12px 20px; }
  .eros, .oracle, .societe { padding: 92px 0 96px; }
  .rdv { padding: 88px 0 92px; }
  .societe-grid { grid-template-columns: 1fr; }
  /* Sur un écran étroit, le nom prend sa ligne ; durée et prix se
     partagent la suivante, l’un à gauche, l’autre à droite. */
  .tarif { flex-wrap: wrap; gap: 3px 14px; padding: 14px 2px; }
  .t-nom { flex: 1 0 100%; font-size: 1.08rem; }
  .t-duree { flex: 1; width: auto; text-align: left; }
  .t-prix { flex: none; width: auto; font-size: 1.08rem; }
  .rdv-citation { font-size: clamp(1.5rem, 6vw, 2rem); }
  .offre, .offre-carte { grid-template-columns: 1fr; }
  .offre-inverse .offre-visuel { order: 0; }
  .offre-visuel img { min-height: 220px; }
  .offre-texte { padding: 30px 22px 28px; }
  .cadran-bloc { padding: 26px 18px 34px; gap: 20px; }
  .societe-grid { gap: 16px; }
  .ressources-grid { grid-template-columns: 1fr; gap: 16px; }
  .pod, .ressources { padding: 92px 0 96px; }
  .pod-inner { grid-template-columns: 1fr; gap: 36px; }
  .pod-pochette img { max-width: 260px; margin-inline: auto; }
  .pod-cta .btn { width: 100%; justify-content: center; }
  .champs-grid { grid-template-columns: 1fr; gap: 18px; }
  .champ { padding: 30px 24px 28px; }
  .pourquoi { padding-bottom: 92px; }
  .motifs { padding: 20px 0 22px; margin-bottom: 0; }
  .motifs-ruban span { font-size: .98rem; padding: 12px 20px; }
  .onde { padding: 74px 0; }
  .coeur-texte { padding: 46px 22px 54px; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .dlg { padding: 38px 20px 30px; }
  .rdv-contact-liens { flex-direction: column; align-items: center; }
}

/* ═══ Mouvement réduit ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .offre-duo .duo-b { animation: none; }
  .motifs-ruban { animation: none; }
  .onde-video { display: none; }

  .seuil-boule { animation: none; }
  .dim, .dim-sceau, .dim-sceau::before, .foyer-disque, .foyer::after { animation: none; }
  .foyer-onde { display: none; }
  .constel-fils path { stroke-dashoffset: 0; transition: none; }
  .constel-flux path { display: none; }
  .dim-in { opacity: 1; transform: none; transition: none; }
  .constel::before { animation: none; }
  .fil-goutte { display: none; }
  html { scroll-behavior: auto; }
}

/* La fenêtre du podcast : une liste de plateformes, rien d'autre. */
.podcast-pochette { margin: 0 0 30px; }
.podcast-pochette img {
  width: 100%; max-width: 236px; margin-inline: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(14,9,25,.6), 0 0 0 1px var(--or-trait);
}
.podcast-ou {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 6px; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--or);
}
.podcast-ou::before { content: ""; width: 34px; height: 1px; background: var(--or-trait); }

/* Ni cadre ni damier : les plateformes se suivent, séparées par un filet
   d'or. Chaque marque est une petite sphère — le motif du site — plutôt
   qu'une tuile d'application. */
.podcast-liste { list-style: none; margin: 0; padding: 0; }
.podcast-liste li + li { border-top: 1px solid rgba(195,160,111,.16); }
.podcast-liste a {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 16px;
  padding: 15px 4px; text-decoration: none;
  font-family: var(--serif); font-size: 1.14rem; color: rgba(251,246,242,.86);
  transition: color .35s var(--ease), padding-left .4s var(--ease-s);
}
.podcast-liste a::after {
  content: "↗"; font-family: var(--sans); font-size: .8rem;
  color: var(--rose-poudre); opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .35s var(--ease), transform .4s var(--ease-s);
}
.podcast-liste a:hover { color: #fff; padding-left: 10px; }
.podcast-liste a:hover::after { opacity: 1; transform: none; }

.pf-tuile {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 58% at 32% 26%, rgba(255,255,255,.42), transparent 62%),
    var(--marque);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--marque) 38%, transparent);
  transition: transform .5s var(--ease-s), box-shadow .5s var(--ease);
}
.pf-tuile svg { width: 21px; height: 21px; display: block; }
.podcast-liste a:hover .pf-tuile {
  transform: scale(1.09);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--marque) 62%, transparent);
}
.pf-nom { letter-spacing: .005em; }
.podcast-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(195,160,111,.16); font-family: var(--serif); font-style: italic; font-size: .82rem; color: rgba(251,246,242,.45); }