/* ===============================================================
   Daïna Rossignol · Body • Mind • Self
   Direction éditoriale : pleine page, typographie dominante,
   asymétrie, matière. Aucune grille de cartes.
   Couleurs sondées au pixel sur la plaquette cliente.
   =============================================================== */

:root {
  --abricot:    #DB9371;
  --terracotta: #C4613B;
  --terracotta-fonce: #A94E2C;
  --camel:      #945A42;
  --chocolat:   #43220F;
  --ivoire:     #F7F2ED;
  --ivoire-pale:#FCFAF7;
  --blanc:      #FFFFFF;
  --taupe:      #AC9587;

  --fond:       var(--ivoire);
  --texte:      #4A3A32;
  --texte-doux: #8B7969;
  --titre-c:    var(--chocolat);
  --trait:      rgba(67, 34, 15, .14);
  --trait-fin:  rgba(67, 34, 15, .08);

  /* Fraunces porte les grands titres : beaucoup plus de caractère que Lora,
     qui reste sur les citations et le texte courant serif. */
  --display: "Fraunces", "Lora", "Iowan Old Style", Georgia, serif;
  --titre: "Lora", "Iowan Old Style", Georgia, serif;
  --corps: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1560px;
  --souffle: clamp(6rem, 13vw, 13rem);

  --lent: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(15px, .55vw + 13px, 17px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Un débordement purement décoratif ne doit jamais créer de barre horizontale. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, svg, video { display: block; max-width: 100%; }
/* Le build enveloppe les images dans <picture> pour servir le WebP.
   Sans ceci, <picture> s'intercale comme parent et casse tout positionnement
   absolu ou tout sélecteur d'enfant direct. */
picture { display: contents; }
figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  color: var(--titre-c);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* Grain : donne une matière imprimée, empêche les aplats de paraître plats */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   Fondations éditoriales
   --------------------------------------------------------------- */

.cadre { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--marge); }

/* Étiquette en petites capitales espacées, avec son numéro de section */
.etiquette {
  font-family: var(--corps);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--camel);
  display: flex; align-items: center; gap: 1.1rem;
  margin: 0 0 clamp(1.8rem, 3.5vw, 3rem);
}
.etiquette::before {
  content: attr(data-num);
  font-family: var(--titre); font-size: .95rem;
  letter-spacing: .04em; color: var(--terracotta);
}
.etiquette::after { content: ""; flex: 1; height: 1px; background: var(--trait); max-width: 90px; }
.etiquette--centre { justify-content: center; }
.etiquette--centre::after { display: none; }
.etiquette--clair { color: rgba(255,255,255,.62); }
.etiquette--clair::before { color: var(--abricot); }
.etiquette--clair::after { background: rgba(255,255,255,.22); }

/* L'échelle typographique porte le luxe, pas les composants */
.geant { font-size: clamp(3.1rem, 8.2vw, 7.2rem); }
.grand { font-size: clamp(2.4rem, 6.4vw, 5.6rem); }
.moyen { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.italique { font-style: italic; }
.sur-terracotta { color: var(--terracotta); }

.chapo { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.62; max-width: 44ch; }
.legende { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--texte-doux); font-weight: 700; }

/* Lien souligné qui se dessine, plutôt qu'une profusion de boutons */
.lien {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--corps); font-weight: 700;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--chocolat); text-decoration: none;
  padding-bottom: .55rem; position: relative;
}
.lien::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .3; }
.lien::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: currentColor; transition: width .5s var(--lent); }
.lien:hover::after { width: 100%; }
.lien .fleche { transition: transform .45s var(--lent); }
.lien:hover .fleche { transform: translateX(7px); }
.lien--clair { color: #fff; }

/* Un seul vrai bouton, réservé à l'action principale */
.bouton {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--corps); font-weight: 700;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--terracotta); color: #fff;
  padding: 1.15rem 2.1rem; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background .4s var(--lent), transform .4s var(--lent);
}
.bouton:hover { background: var(--terracotta-fonce); transform: translateY(-2px); }
.bouton .fleche { transition: transform .45s var(--lent); }
.bouton:hover .fleche { transform: translateX(6px); }
.bouton--vide { background: transparent; color: var(--chocolat); box-shadow: inset 0 0 0 1px var(--trait); }
.bouton--vide:hover { background: var(--chocolat); color: #fff; }
.bouton--blanc { background: #fff; color: var(--chocolat); }
.bouton--blanc:hover { background: var(--ivoire); }

/* ---------------------------------------------------------------
   Animations : tout part d'un masque, rien n'apparaît brutalement
   --------------------------------------------------------------- */

.masque { overflow: hidden; display: block; }
.masque > * {
  display: block;
  transform: translateY(115%);
  transition: transform 1.15s var(--lent);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.vu .masque > *, .masque.vu > * { transform: translateY(0); }

[data-monte] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .95s var(--lent), transform .95s var(--lent);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.vu[data-monte], .vu [data-monte] { opacity: 1; transform: none; }

/* Voile qui se retire de l'image, de bas en haut */
[data-voile] { position: relative; overflow: hidden; }
[data-voile] img { transform: scale(1.14); transition: transform 1.6s var(--lent); }
.vu[data-voile] img, .vu [data-voile] img { transform: scale(1); }
[data-voile]::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--fond); transform-origin: bottom;
  transition: transform 1.25s var(--lent);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.vu[data-voile]::after, .vu [data-voile]::after { transform: scaleY(0); }

.js .a-reveler { visibility: hidden; }
.js .a-reveler.vu { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .masque > *, [data-monte], [data-voile] img, [data-voile]::after,
  .ruban__piste, .hero__defile i::after {
    transition: none !important; animation: none !important;
    transform: none !important; opacity: 1 !important;
  }
  [data-voile]::after { display: none; }
  .js .a-reveler { visibility: visible; }
}

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

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .5s var(--lent), box-shadow .5s var(--lent), transform .5s var(--lent);
}
.entete__in { display: flex; align-items: center; gap: 2rem; padding-block: clamp(1rem, 2vw, 1.6rem); }
.entete.est-pose {
  background: rgba(247,242,237,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--trait-fin);
}
.entete.est-cachee { transform: translateY(-101%); }

.logo { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.logo__mono { font-family: var(--titre); font-size: 1.6rem; line-height: 1; color: var(--chocolat); letter-spacing: -.08em; }
.logo__nom { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--chocolat); line-height: 1.4; }
.logo__nom small { display: block; font-size: .58rem; letter-spacing: .3em; color: var(--texte-doux); font-weight: 400; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav a {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texte); text-decoration: none; position: relative; padding-block: .4rem;
}
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--terracotta); transition: width .45s var(--lent); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--terracotta); }
.nav .bouton { padding: .8rem 1.5rem; font-size: .66rem; }
.nav .bouton::after { display: none; }

.burger {
  display: none; margin-left: auto; place-items: center;
  width: 46px; height: 46px; border: 0; background: transparent;
  color: var(--chocolat); cursor: pointer; padding: 0;
}
.burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .45s var(--lent), opacity .3s; }
.burger span + span { margin-top: 6px; }
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.saut { position: absolute; left: -9999px; z-index: 100; background: var(--chocolat); color: #fff; padding: .9rem 1.3rem; }
.saut:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding-top: clamp(5.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem); width: 100%;
}
.hero__titre { margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem); }
.hero__titre .ligne { display: block; }
.hero__titre .ligne--2 { padding-left: clamp(1.5rem, 7vw, 6.5rem); }
.hero__titre .ligne--3 { padding-left: clamp(3rem, 14vw, 13rem); }
.hero__titre em { font-style: italic; color: var(--terracotta); }
.hero__accroche { font-size: .74rem; letter-spacing: .34em; text-transform: uppercase; color: var(--camel); font-weight: 700; margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: clamp(1.5rem, 2.8vw, 2.2rem); }

/* L'image déborde à droite : c'est ce qui casse le format « page centrée » */
.hero__media { position: relative; margin-right: calc(var(--marge) * -1); }
.hero__cadre { display: block; }
.hero__media img { width: 100%; height: clamp(420px, 78vh, 780px); object-fit: cover; object-position: 50% 46%; }
.hero__note {
  position: absolute; left: clamp(1rem, 2vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 3;
  background: var(--ivoire-pale); padding: 1.3rem 1.6rem; max-width: 246px;
  font-family: var(--titre); font-style: italic; font-size: 1.02rem; line-height: 1.45;
  color: var(--chocolat); border-left: 2px solid var(--terracotta);
}
.hero__defile {
  position: absolute; left: var(--marge); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex; align-items: center; gap: .8rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--texte-doux); font-weight: 700;
}
.hero__defile i { display: block; width: 1px; height: 42px; background: var(--trait); position: relative; overflow: hidden; }
.hero__defile i::after { content: ""; position: absolute; inset: 0; background: var(--terracotta); animation: filer 2.6s var(--lent) infinite; }
@keyframes filer {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------------------------------------------------------------
   Bandeau défilant
   --------------------------------------------------------------- */

.ruban { border-block: 1px solid var(--trait-fin); padding-block: clamp(1rem, 1.8vw, 1.5rem); overflow: hidden; background: var(--ivoire-pale); }
.ruban__piste { display: flex; width: max-content; animation: defiler 42s linear infinite; }
.ruban__piste > span {
  font-family: var(--titre); font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--camel); white-space: nowrap; padding-inline: 1.6rem;
  display: flex; align-items: center; gap: 3.2rem;
}
.ruban__piste > span::after { content: "✦"; font-size: .7em; color: var(--abricot); }
@keyframes defiler { to { transform: translateX(-50%); } }
.ruban:hover .ruban__piste { animation-play-state: paused; }

/* ---------------------------------------------------------------
   Manifeste
   --------------------------------------------------------------- */

.manifeste { padding-block: var(--souffle); }
.manifeste__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.manifeste__image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.manifeste__image figcaption { margin-top: 1rem; }
.manifeste__texte h2 { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.manifeste__texte .chapo { max-width: 52ch; color: var(--texte-doux); }

/* ---------------------------------------------------------------
   Séquence des trois univers : le texte reste, les images défilent
   --------------------------------------------------------------- */

.sequence { background: var(--blanc); border-block: 1px solid var(--trait-fin); }
.sequence__in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.sequence__fixe { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; padding-block: 8rem; }
.sequence__pile { position: relative; }
.univ {
  position: absolute; inset-inline: 0; top: 0;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .8s var(--lent), transform .8s var(--lent);
}
.univ.est-actif { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.univ__num { font-family: var(--titre); font-size: clamp(3.5rem, 7vw, 6rem); color: var(--abricot); line-height: .8; display: block; margin-bottom: 1rem; opacity: .5; }
.univ h3 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); margin-bottom: 1.4rem; }
.univ p { max-width: 38ch; color: var(--texte-doux); }
.univ__mots { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--trait-fin); }
.univ__mots span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--camel); font-weight: 700; }

.sequence__vue { min-height: 100svh; display: grid; align-content: center; padding-block: clamp(3rem, 8vh, 6rem); }
.sequence__vue img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.sequence__vue figcaption { margin-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------------------------------------------------------------
   Séance signature : la seule rupture sombre du site
   --------------------------------------------------------------- */

.signature { background: var(--chocolat); color: rgba(255,255,255,.74); padding-block: var(--souffle); overflow: hidden; }
.signature h2 { color: #fff; }
.signature__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.signature__tete p { color: rgba(255,255,255,.7); max-width: 46ch; }

.temps { display: grid; grid-template-columns: repeat(4, 1fr); }
.temps__bloc { padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 2vw, 2rem) 0 0; border-top: 1px solid rgba(255,255,255,.18); position: relative; }
/* La ligne de progression se dessine à l'arrivée du bloc */
.temps__bloc::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--abricot);
  transition: width 1.1s var(--lent);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.vu .temps__bloc::before { width: 100%; }
.temps__min { font-family: var(--titre); font-size: clamp(2.6rem, 5vw, 4.2rem); color: #fff; line-height: .9; display: block; }
.temps__min small { font-size: .3em; letter-spacing: .12em; color: var(--abricot); margin-left: .4rem; }
.temps__bloc h3 { color: var(--abricot); font-family: var(--corps); font-weight: 700; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; margin: 1.1rem 0 .7rem; }
.temps__bloc p { font-size: .93rem; color: rgba(255,255,255,.66); }

.signature__pied { margin-top: clamp(3rem, 6vw, 5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
.signature__pied p { margin: 0; color: rgba(255,255,255,.62); font-size: .95rem; max-width: 52ch; }

/* ---------------------------------------------------------------
   Bibliothèque : index éditorial, l'aperçu suit le curseur
   --------------------------------------------------------------- */

.biblio { padding-block: var(--souffle); }
.biblio__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.biblio__tete p { color: var(--texte-doux); max-width: 46ch; }

.index { border-top: 1px solid var(--trait); }
.index__ligne {
  border-bottom: 1px solid var(--trait-fin);
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 10.5rem 5.5rem 10rem;
  align-items: center; gap: 1.5rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.2rem);
  transition: padding-left .5s var(--lent);
  position: relative; isolation: isolate;
}
.index__ligne::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ivoire-pale); opacity: 0; transition: opacity .5s var(--lent);
}
@media (hover: hover) {
  .index__ligne:hover { padding-left: 1.4rem; }
  .index__ligne:hover::before { opacity: 1; }
}
.index__num { font-family: var(--titre); color: var(--abricot); font-size: 1rem; }
.index__titre { font-family: var(--titre); font-size: clamp(1.3rem, 2.3vw, 2rem); color: var(--chocolat); line-height: 1.15; }
.index__univers { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--terracotta); }
.index__duree { font-size: .84rem; color: var(--texte-doux); letter-spacing: .06em; }
.index__acces { display: flex; align-items: center; gap: .55rem; justify-content: flex-end; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.index__acces svg { width: 14px; height: 14px; flex: none; }
.index__acces--libre { color: #5F7F60; }
.index__acces--membre { color: var(--taupe); }

/* Aperçu flottant : au survol, à la souris uniquement */
.apercu {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: 280px; aspect-ratio: 4/3;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .45s var(--lent), transform .45s var(--lent);
  overflow: hidden;
}
.apercu.est-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.apercu img { width: 100%; height: 100%; object-fit: cover; }
.apercu__mention {
  position: absolute; inset: auto 0 0 0;
  background: rgba(67,34,15,.72); color: #fff;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; text-align: center; padding: .55rem;
}
@media (hover: none), (max-width: 900px) { .apercu { display: none; } }

.biblio__note { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.biblio__note p { margin: 0; color: var(--texte-doux); font-size: .95rem; max-width: 50ch; }

/* ---------------------------------------------------------------
   Les deux offres, en pleine image et asymétriques
   --------------------------------------------------------------- */

.offres { padding-block: var(--souffle); background: var(--blanc); border-block: 1px solid var(--trait-fin); }
.offres__tete { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 900px; }
.offres__grille { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: start; }
.offre {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(430px, 62vh, 620px);
  padding: clamp(1.8rem, 3vw, 3rem);
  color: #fff; text-decoration: none;
}
.offre--seconde { margin-top: clamp(2rem, 6vw, 5.5rem); min-height: clamp(390px, 55vh, 560px); }
.offre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.5s var(--lent); }
.offre:hover img { transform: scale(1.045); }
.offre::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(40,18,6,.96) 0%, rgba(40,18,6,.86) 42%, rgba(40,18,6,.46) 74%, rgba(40,18,6,.18) 100%);
}
.offre > * { position: relative; z-index: 2; }
.offre h3 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: .5rem; }
.offre__sous { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 700; margin-bottom: 1.2rem; }
.offre p { color: rgba(255,255,255,.9); max-width: 38ch; font-size: .97rem; text-shadow: 0 1px 12px rgba(45,21,8,.5); }
.offre h3, .offre .offre__prix { text-shadow: 0 2px 18px rgba(45,21,8,.45); }
.offre__prix { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 1.4rem; font-family: var(--titre); color: #fff; }
.offre__prix b { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 400; line-height: 1; }
.offre__prix span { font-family: var(--corps); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.offre__an { font-size: .82rem; color: var(--abricot); letter-spacing: .04em; }

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

.portrait { padding-block: var(--souffle); overflow: hidden; }
.portrait__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: center; }
.portrait__photo { position: relative; margin-left: calc(var(--marge) * -1); }
.portrait__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.portrait__citation { font-family: var(--titre); font-style: italic; font-size: clamp(1.45rem, 2.6vw, 2.25rem); line-height: 1.35; color: var(--chocolat); margin-bottom: 1.8rem; }
.portrait__texte p { color: var(--texte-doux); max-width: 48ch; }
.portrait__signe { margin-top: 2rem; font-family: var(--titre); font-style: italic; font-size: 1.25rem; color: var(--camel); }

/* ---------------------------------------------------------------
   Appel final et bande image
   --------------------------------------------------------------- */

.final { padding-block: var(--souffle); text-align: center; }
.final h2 { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.final p { color: var(--texte-doux); max-width: 46ch; margin-inline: auto; margin-bottom: 2.4rem; }

.bande { height: clamp(220px, 34vh, 380px); overflow: hidden; }
.bande img { width: 100%; height: 100%; object-fit: cover; }

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

.pied { background: var(--chocolat); color: rgba(255,255,255,.68); padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.pied a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .35s; }
.pied a:hover { color: var(--abricot); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pied h4 { font-family: var(--corps); font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 1.3rem; }
.pied ul { display: grid; gap: .75rem; }
.pied__accroche { font-family: var(--titre); font-style: italic; font-size: 1.35rem; color: #fff; max-width: 22ch; line-height: 1.4; }
/* Le nom en très grand : la dernière chose qu'on voit */
.pied__nom {
  font-family: var(--titre); color: rgba(255,255,255,.1);
  font-size: clamp(3rem, 13.5vw, 13rem); line-height: .8;
  letter-spacing: -.03em; white-space: nowrap;
  padding-bottom: .1em; margin: 0; user-select: none;
}
.pied__bas { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: rgba(255,255,255,.5); }
.pied__bas p { margin: 0; }

/* ---------------------------------------------------------------
   Adaptations
   --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .index__ligne { grid-template-columns: 2.5rem minmax(0, 1fr) 8rem 9rem; }
  .index__duree { display: none; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0; z-index: 55; margin: 0;
    flex-direction: column; justify-content: center; align-items: stretch; gap: 0;
    background: var(--ivoire); padding: 6rem var(--marge) 3rem;
    transform: translateY(-100%);
    transition: transform .7s var(--lent), visibility .7s;
    /* `visibility` est indispensable : quand l'en-tête se masque au défilement,
       son transform devient le bloc conteneur de ce panneau en position fixed.
       Le translate ne le sort alors plus de l'écran et son bouton réapparaît
       par-dessus le contenu. */
    visibility: hidden;
  }
  body.menu-ouvert .nav { transform: none; visibility: visible; }
  body.menu-ouvert { overflow: hidden; }
  .nav a {
    font-size: 1.6rem; font-family: var(--titre); font-weight: 400;
    letter-spacing: 0; text-transform: none;
    padding-block: 1rem; border-bottom: 1px solid var(--trait-fin);
  }
  .nav a::after { display: none; }
  .nav .bouton { margin-top: 2rem; justify-content: center; font-size: .72rem; }
  .burger { display: grid; z-index: 61; }

  .hero { min-height: auto; padding-top: 7rem; }
  .hero__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__media { margin-inline: calc(var(--marge) * -1); }
  .hero__media img { height: clamp(380px, 62vh, 560px); }
  .hero__note { left: var(--marge); right: var(--marge); max-width: none; bottom: 1.2rem; }
  .hero__defile { display: none; }
  .hero__titre .ligne--2 { padding-left: 1.2rem; }
  .hero__titre .ligne--3 { padding-left: 2.4rem; }

  .manifeste__in, .biblio__tete, .signature__tete, .offres__grille, .portrait__in { grid-template-columns: 1fr; }
  .manifeste__image { order: 2; }

  .sequence__in { grid-template-columns: 1fr; gap: 0; }
  .sequence__fixe { position: static; height: auto; padding-block: 0 2.5rem; }
  .univ { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  .univ + .univ { display: none; }
  .sequence__vue { min-height: auto; padding-block: 1.5rem; }
  .sequence__vue + .sequence__vue { padding-top: 3rem; }

  .temps { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

  .index__ligne { grid-template-columns: 2rem minmax(0, 1fr); gap: .3rem 1rem; }
  .index__univers, .index__acces { grid-column: 2; }
  .index__acces { justify-content: flex-start; }

  .offre--seconde { margin-top: 0; }
  .portrait__photo { margin-inline: calc(var(--marge) * -1); }
  .pied__grille { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .temps { grid-template-columns: 1fr; }
  .offre { min-height: 400px; }
}

/* ---------------------------------------------------------------
   Détail des offres : deux colonnes de listes, filets seulement
   --------------------------------------------------------------- */

.detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--trait);
}
.detail__titre {
  font-family: var(--corps); font-weight: 700;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--camel); margin-bottom: 1.6rem;
}
.pointe { display: grid; gap: .1rem; }
.pointe li {
  padding: .9rem 0 .9rem 2.1rem;
  border-bottom: 1px solid var(--trait-fin);
  position: relative; font-size: .98rem;
}
.pointe li::before {
  content: ""; position: absolute; left: 0; top: 1.45rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--abricot);
}
.pointe--fort li::before { background: var(--terracotta); }

.tarifs__mot {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 58ch; text-align: center;
  color: var(--texte-doux); font-size: .96rem;
}

@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Index simple (sans aperçu) et paroles
   --------------------------------------------------------------- */

.index--simple .index__ligne { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr); }
.index__desc { color: var(--texte-doux); font-size: .97rem; }

.paroles { padding-block: var(--souffle) 0; }
.paroles__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); }
.parole { margin: 0; padding-top: 1.8rem; border-top: 1px solid var(--trait); }
.parole p {
  font-family: var(--titre); font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55; color: var(--texte); margin-bottom: 1.4rem;
}
.parole p:not(.etoiles)::before { content: "“"; color: var(--abricot); font-size: 2.4em; line-height: 0; vertical-align: -.32em; margin-right: .12em; }
.parole cite {
  font-style: normal; font-family: var(--corps); font-weight: 700;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--camel);
}

/* Chronologie compacte */
.chrono { margin-top: 2rem; border-top: 1px solid var(--trait-fin); }
.chrono__ligne {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.2rem;
  padding: .95rem 0; border-bottom: 1px solid var(--trait-fin);
}
.chrono__ligne span { font-size: .74rem; letter-spacing: .12em; font-weight: 700; color: var(--terracotta); padding-top: .2rem; }
.chrono__ligne b { font-weight: 400; font-family: var(--titre); color: var(--chocolat); font-size: 1.02rem; }

@media (max-width: 900px) {
  .index--simple .index__ligne { grid-template-columns: 2rem minmax(0, 1fr); }
  .index__desc { grid-column: 2; }
  .paroles__grille { grid-template-columns: 1fr; }
  .chrono__ligne { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------------------------------------------------------------
   Récit (À propos) : une colonne de lecture, pas une grille
   --------------------------------------------------------------- */

.recit { padding-block: var(--souffle); }
.recit__in { max-width: 720px; margin-inline: auto; }
.recit__in p { font-size: 1.06rem; color: var(--texte); }
.recit__in .recit__accroche {
  font-family: var(--titre); font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.4; color: var(--chocolat); margin-bottom: 2rem;
}
.recit__in .recit__bascule {
  font-family: var(--titre); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--chocolat); margin: 2.6rem 0;
}
.recit__in .recit__chute {
  font-family: var(--titre); font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--chocolat);
  padding-top: 2rem; margin-top: 2.6rem; border-top: 1px solid var(--trait);
}

.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin: 2.6rem 0 3rem; }
.trois > div { border-top: 1px solid var(--trait); padding-top: 1.1rem; }
.trois b {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: 1.35rem; color: var(--terracotta); margin-bottom: .4rem;
}
.trois span { font-size: .93rem; color: var(--texte-doux); }

.parcours-page { padding-block: var(--souffle); }
.parcours-page .index__num { line-height: 1.25; }

/* ---------------------------------------------------------------
   Formulaire
   --------------------------------------------------------------- */

.hero--court { min-height: 0; padding-bottom: clamp(2rem, 5vh, 4rem); }
.hero--court .hero__media img { height: clamp(340px, 52vh, 520px); }

.formulaire { padding-block: 0 var(--souffle); }
.formulaire__in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--trait);
}
.champ { display: grid; gap: .55rem; margin-bottom: 1.5rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.champ label {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--camel);
}
.champ label i { font-style: normal; letter-spacing: .1em; color: var(--texte-doux); font-weight: 400; }
.champ input, .champ textarea, .champ select {
  font-family: var(--corps); font-size: 1rem; color: var(--texte);
  background: transparent; border: 0; border-bottom: 1px solid var(--trait);
  border-radius: 0; padding: .85rem 0; width: 100%;
  transition: border-color .4s var(--lent);
}
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--camel) 50%), linear-gradient(135deg, var(--camel) 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 6px 6px; background-repeat: no-repeat; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-bottom-color: var(--terracotta); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-doux); opacity: .75; }
.mention { font-size: .84rem; color: var(--texte-doux); margin-top: 1.4rem; }

.coord ul { display: grid; gap: 1.9rem; }
.coord li { display: grid; gap: .45rem; }
.coord li p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.coord__grand {
  font-family: var(--titre); font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--chocolat); text-decoration: none;
  border-bottom: 1px solid transparent; justify-self: start;
  transition: border-color .4s var(--lent), color .4s var(--lent);
}
.coord__grand:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

@media (max-width: 900px) {
  .trois { grid-template-columns: 1fr; gap: 1.2rem; }
  .formulaire__in, .champ-duo { grid-template-columns: 1fr; }
  .champ-duo { gap: 0; }
}

/* Pages courtes centrées (merci, 404, espace membre) */
.final--seul { min-height: 72svh; display: grid; align-content: center; padding-block: clamp(8rem, 16vh, 12rem) var(--souffle); }
.final--seul .hero__actions { justify-content: center; }
.mentions__h2 { font-size: 1.45rem; margin-top: 2.8rem; margin-bottom: .8rem; }

/* ===============================================================
   Passe « intensité » : aplats pleins, preuves chiffrées,
   cadres de couleur, badges inclinés.
   Le site reste clair, la couleur arrive par blocs francs.
   =============================================================== */

/* ---------- Cadre de couleur autour d'une image ---------- */
/* Un filet épais décalé : la photo n'est plus posée, elle est encadrée. */
.encadre { position: relative; }
.encadre { --decalage: clamp(.9rem, 1.6vw, 1.6rem); }
.encadre::before {
  content: ""; position: absolute; z-index: 0;
  inset: var(--decalage) calc(var(--decalage) * -1) calc(var(--decalage) * -1) var(--decalage);
  border: 2px solid var(--terracotta);
  pointer-events: none;
}
/* Quand l'image saigne déjà jusqu'au bord droit, le cadre part vers la gauche. */
.encadre--gauche::before {
  inset: var(--decalage) var(--decalage) calc(var(--decalage) * -1) calc(var(--decalage) * -1);
}
.encadre--abricot::before { border-color: var(--abricot); }
.encadre > * { position: relative; z-index: 1; }

/* ---------- Badge incliné ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--terracotta); color: #fff;
  font-family: var(--corps); font-weight: 700;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .6rem 1.1rem;
  transform: rotate(-3.5deg);
  box-shadow: 0 10px 24px -14px rgba(67,34,15,.6);
}
.badge--pose {
  position: absolute; z-index: 4;
  top: clamp(-.9rem, -1.2vw, -.6rem); left: clamp(-.9rem, -1.4vw, -.6rem);
}
.badge--droite { left: auto; right: clamp(-.9rem, -1.4vw, -.6rem); transform: rotate(3.5deg); }
.badge--chocolat { background: var(--chocolat); }

/* ---------- Preuves chiffrées, en aplat plein ---------- */
.preuves { background: var(--terracotta); color: #fff; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.preuves__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.preuve { border-top: 2px solid rgba(255,255,255,.34); padding-top: 1.4rem; }
.preuve b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: .92; color: #fff;
  letter-spacing: -.03em;
}
.preuve b small { font-size: .42em; font-weight: 400; margin-left: .18em; letter-spacing: .02em; }
/* Chevron sur le libellé SEUL : « .preuve span » attrapait aussi le
   <span data-compte> logé dans le <b>, et le chiffre s'affichait en
   petites capitales de légende au lieu du grand chiffre. */
.preuve > span {
  display: block; margin-top: .7rem;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.82);
}

/* ---------- Paroles sur fond abricot, en pilier ---------- */
.paroles--plein { background: var(--abricot); padding-block: var(--souffle); position: relative; }
.paroles--plein .etiquette { color: rgba(67,34,15,.62); }
.paroles--plein .etiquette::before { color: var(--chocolat); }
.paroles--plein .etiquette::after { background: rgba(67,34,15,.28); }
.paroles--plein .parole {
  background: var(--ivoire-pale); border-top: 0;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  box-shadow: 0 22px 44px -34px rgba(67,34,15,.65);
}
.paroles--plein .parole p { color: var(--texte); }
.paroles__tete { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: end; margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.paroles__tete h2 { color: var(--chocolat); }
.etoiles { color: var(--terracotta); letter-spacing: .22em; font-size: .9rem; margin-bottom: .9rem; }

/* ---------- Appel final en aplat ---------- */
.final--plein { background: var(--terracotta); }
.final--plein h2 { color: #fff; }
.final--plein .etiquette { color: rgba(255,255,255,.62); }
.final--plein .etiquette::before { color: #fff; }
.final--plein .etiquette::after { background: rgba(255,255,255,.24); }
.final--plein p { color: rgba(255,255,255,.86); }
.final--plein .bouton { background: #fff; color: var(--terracotta); }
.final--plein .bouton:hover { background: var(--ivoire); }
.final--plein .sur-terracotta { color: #F7D9C6; }

/* Titre bicolore : une moitié encre, l'autre terracotta */
.bicolore em { font-style: normal; color: var(--terracotta); }
.final--plein .bicolore em { color: var(--abricot); }

@media (max-width: 900px) {
  .preuves__grille { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
  .paroles__tete { grid-template-columns: 1fr; }
  .encadre::before { inset: .7rem -.7rem -.7rem .7rem; }
}
@media (max-width: 520px) {
  .preuves__grille { grid-template-columns: 1fr; }
}

/* ===============================================================
   Conversion : le trafic arrive d'une VSL, majoritairement mobile.
   L'offre et l'action doivent être atteignables sans effort.
   =============================================================== */

/* ---------- Ancre de prix sous le CTA principal ---------- */
.ancre-prix {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  margin-top: 1.2rem;
  font-size: .92rem; color: var(--texte-doux);
}
.ancre-prix b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--chocolat); }
.ancre-prix i { font-style: normal; color: var(--trait); }

/* ---------- Rassurances en ligne ---------- */
.rassurances {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--trait-fin);
}
.rassurances li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--texte-doux);
}
.rassurances svg { width: 15px; height: 15px; color: var(--terracotta); flex: none; }
.rassurances--clair li { color: rgba(255,255,255,.82); }
.rassurances--clair svg { color: #fff; }
.rassurances--clair { border-top-color: rgba(255,255,255,.24); }

/* ---------- Barre d'action collante, mobile ---------- */
/* Sur un parcours issu d'une VSL, l'action doit rester à portée de pouce. */
.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 1.4rem);
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(67,34,15,.97);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform .5s var(--lent);
}
.barre-achat.est-visible { transform: none; }
.barre-achat__prix { display: grid; line-height: 1.25; }
.barre-achat__prix b { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.barre-achat__prix span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.barre-achat .bouton { margin-left: auto; padding: .9rem 1.4rem; font-size: .68rem; white-space: nowrap; }

@media (max-width: 900px) {
  .barre-achat { display: flex; }
  /* de quoi ne pas masquer la fin de page sous la barre */
  body { padding-bottom: 5rem; }
}

/* ---------- Objections ---------- */
.objections { padding-block: var(--souffle); background: var(--ivoire-pale); }
.objections__in { max-width: 820px; margin-inline: auto; }
.question { border-bottom: 1px solid var(--trait-fin); }
.question:first-of-type { border-top: 1px solid var(--trait); }
.question summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1.2rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem) 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.08rem, 1.9vw, 1.4rem); color: var(--chocolat);
  transition: color .35s;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--terracotta); }
.question summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 13px; height: 13px;
  border-right: 1.5px solid var(--terracotta);
  border-bottom: 1.5px solid var(--terracotta);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .4s var(--lent);
}
.question[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.question__corps { padding-bottom: 1.6rem; color: var(--texte-doux); max-width: 62ch; }
.question__corps p:last-child { margin-bottom: 0; }

/* ---------- Offre mise en avant ---------- */
.offre__ruban {
  position: absolute; top: clamp(.9rem, 1.8vw, 1.4rem); right: clamp(.9rem, 1.8vw, 1.4rem); z-index: 3;
  background: #fff; color: var(--terracotta);
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .9rem;
}
.offre .bouton { margin-top: 1.6rem; align-self: flex-start; }

@media (max-width: 900px) {
  /* Hero resserré : le CTA et le prix doivent tenir dans le premier écran */
  .hero { padding-top: 5.5rem; padding-bottom: 2.5rem; }
  .hero__in { gap: 1.8rem; }
  .hero .geant { font-size: clamp(2.9rem, 15vw, 4rem); }
  .hero__accroche { margin-bottom: 1.1rem; letter-spacing: .24em; }
  .hero .chapo { font-size: 1rem; }
  .hero__actions { margin-top: 1.5rem; gap: 1rem; }
  .hero__actions .bouton { width: 100%; justify-content: center; }
  .hero__media img { height: clamp(300px, 48vh, 420px); }

  /* Rythme vertical resserré : moins de défilement avant l'offre */
  :root { --souffle: clamp(3.5rem, 11vw, 6rem); }
}

/* Portables à écran court (1280×720 et compagnie) : on abaisse le titre pour que
   l'action principale reste dans le premier écran, ce qui prime sur la démesure. */
@media (min-width: 901px) and (max-height: 780px) {
  .hero { padding-top: 4.8rem; padding-bottom: 2rem; }
  .hero .geant { font-size: clamp(2.8rem, 6.2vw, 5.4rem); }
  .hero .chapo { font-size: 1rem; }
  .hero__media img { height: min(72vh, 560px); }
}

/* ---------- Corrections mobile relevées en capture réelle ---------- */
@media (max-width: 900px) {
  /* Le badge du hero sortait de l'écran à gauche, l'image saignant des deux bords */
  .badge--pose { left: var(--marge); top: .8rem; }
  .badge--droite { left: auto; right: var(--marge); }

  /* Le voile mangeait entièrement la photo sur une carte courte :
     on rallonge la carte et on démarre le dégradé plus bas. */
  .offre { min-height: 30rem; }
  .offre::after {
    background: linear-gradient(to top, rgba(40,18,6,.96) 0%, rgba(40,18,6,.88) 30%, rgba(40,18,6,.5) 58%, rgba(40,18,6,.08) 100%);
  }

  /* Le ruban chevauchait le sur-titre : on le remet dans le flux */
  .offre__ruban { position: static; align-self: flex-start; margin-bottom: 1rem; }
}

/* ===============================================================
   Bibliothèque publique : le catalogue se consulte avant l'achat.
   Deux séances ouvertes, le reste sous cadenas.
   =============================================================== */

.catalogue { padding-block: var(--souffle); }

/* ---------- Filtres ---------- */
.filtres { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.filtres__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.filtres__titre {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--texte-doux); width: 5.5rem; flex: none;
}
.puce-filtre {
  font-family: var(--corps); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--camel); background: transparent;
  border: 1px solid var(--trait); border-radius: 999px;
  padding: .55rem 1.05rem; cursor: pointer;
  transition: background .3s var(--lent), color .3s var(--lent), border-color .3s var(--lent);
}
.puce-filtre:hover { border-color: var(--abricot); color: var(--terracotta); }
.puce-filtre.est-actif { background: var(--chocolat); border-color: var(--chocolat); color: #fff; }
.filtres__compte {
  font-size: .8rem; color: var(--texte-doux); letter-spacing: .06em;
  margin: 0 0 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--trait-fin);
}

/* ---------- Grille des séances ---------- */
.grille-seances {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.carte-seance { display: flex; }
.carte-seance[hidden] { display: none; }
.carte-seance__bouton {
  display: flex; flex-direction: column; width: 100%;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.carte-seance__visuel {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 880 / 560; margin-bottom: 1rem;
}
.carte-seance__visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--lent);
}
.carte-seance__bouton:hover .carte-seance__visuel img { transform: scale(1.05); }
.carte-seance__jouer {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff;
}
.carte-seance__jouer svg { width: 26px; height: 26px; }
.carte-seance__jouer::before {
  content: ""; position: absolute;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(67,34,15,.42);
  border: 1.5px solid rgba(255,255,255,.72);
  backdrop-filter: blur(3px);
  transition: transform .5s var(--lent), background .4s;
}
.carte-seance__jouer svg { position: relative; z-index: 1; }
.carte-seance__bouton:hover .carte-seance__jouer::before { transform: scale(1.1); background: rgba(196,97,59,.82); }

.carte-seance__meta {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.carte-seance__univers { color: var(--terracotta); }
.carte-seance__duree { color: var(--texte-doux); letter-spacing: .1em; }
.carte-seance__duree::before { content: "· "; }
.carte-seance__titre {
  font-family: var(--display); font-size: 1.24rem; line-height: 1.2;
  color: var(--chocolat); margin-bottom: .9rem;
}
.carte-seance__bas {
  margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--trait-fin);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.carte-seance__format { font-size: .74rem; color: var(--texte-doux); }
.seance__etat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.seance__etat svg { width: 13px; height: 13px; }
.seance__etat--libre { color: #5F7F60; }
.seance__etat--membre { color: var(--taupe); }

.grille-seances__vide { margin-top: 3rem; text-align: center; color: var(--texte-doux); }
.grille-seances__vide .lien { border: 0; background: none; cursor: pointer; margin-left: .5rem; }

/* ---------- Lecteur / mur d'accès ---------- */
.lecteur {
  border: 0; padding: 0; background: transparent;
  width: min(100% - 2rem, 940px); max-width: none;
  max-height: 92vh; overflow: visible;
}
.lecteur::backdrop { background: rgba(30,14,5,.78); backdrop-filter: blur(6px); }
.lecteur__fermer {
  position: absolute; top: -3rem; right: 0;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.32); border-radius: 50%;
  color: #fff; cursor: pointer; transition: background .3s;
}
.lecteur__fermer:hover { background: rgba(255,255,255,.16); }
.lecteur__fermer svg { width: 17px; height: 17px; }
.lecteur__corps { background: var(--ivoire); }
.lecteur video { width: 100%; display: block; background: #000; aspect-ratio: 16/9; }
.lecteur__legende { padding: 1.4rem clamp(1.2rem, 3vw, 2rem); display: grid; gap: .4rem; }
.lecteur__legende h3 { font-size: 1.45rem; }
.lecteur__legende p { margin: 0; font-size: .86rem; color: var(--texte-doux); letter-spacing: .04em; }

/* Mur d'accès : la même carte, mais fermée */
.mur { position: relative; }
.mur__fond { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.mur__fond img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px) saturate(.85); transform: scale(1.1); }
.mur__fond::after { content: ""; position: absolute; inset: 0; background: rgba(40,18,6,.62); }
.mur__contenu {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding: clamp(1.4rem, 4vw, 2.5rem); color: #fff;
}
.mur__cadenas {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.2rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34);
}
.mur__cadenas svg { width: 22px; height: 22px; }
.mur__contenu h3 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .5rem; }
.mur__contenu p { color: rgba(255,255,255,.82); max-width: 40ch; font-size: .95rem; margin-bottom: 1.4rem; }
.mur__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: center; }
.mur__prix { padding: 1.2rem clamp(1.2rem, 3vw, 2rem); background: var(--ivoire); display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; }
.mur__prix b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--chocolat); }
.mur__prix span { font-size: .86rem; color: var(--texte-doux); }

@media (max-width: 640px) {
  .filtres__titre { width: 100%; }
  .lecteur__fermer { top: -2.8rem; }
}

/* ---------------------------------------------------------------
   Aperçu de l'espace membre : une maquette d'écran, pas une capture
   --------------------------------------------------------------- */

.apercu-appli { position: relative; margin-top: 1rem; }
.apercu-appli__mention {
  display: inline-block; margin: 0 0 .9rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: var(--camel); padding: .45rem .9rem;
}
.appli {
  background: var(--blanc);
  border: 1px solid var(--trait);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem);
  box-shadow: 0 34px 60px -46px rgba(67,34,15,.6);
}
.appli__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--trait-fin);
}
.appli__bonjour { font-family: var(--display); font-size: 1.35rem; color: var(--chocolat); }
.appli__serie {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracotta); background: rgba(196,97,59,.1); padding: .4rem .8rem;
}
.appli__reco {
  background: var(--ivoire); padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: grid; gap: .6rem; justify-items: start;
}
.appli__besoins { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
.appli__besoin {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--camel); border: 1px solid var(--trait); border-radius: 999px; padding: .4rem .8rem;
}
.appli__besoin.est-actif { background: var(--chocolat); border-color: var(--chocolat); color: #fff; }
.appli__reco h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.appli__meta { font-size: .8rem; color: var(--texte-doux); margin: 0 0 .6rem; letter-spacing: .04em; }
.appli__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.appli__bloc { border-top: 2px solid var(--abricot); padding-top: .9rem; display: grid; gap: .3rem; }
.appli__chiffre { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--chocolat); line-height: 1; }

@media (max-width: 640px) { .appli__grille { grid-template-columns: 1fr; gap: .8rem; } }

/* Lien de compte dans l'en-tête, discret à côté du bouton de conversion */
.lien-compte {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux); text-decoration: none; white-space: nowrap;
  transition: color .3s;
}
.lien-compte:hover { color: var(--terracotta); }
@media (max-width: 900px) {
  .nav .lien-compte { text-align: center; padding-block: 1.2rem 0; border: 0; font-size: .74rem; }
}

/* ---------------------------------------------------------------
   Les cinq intentions de la séance signature (plaquette cliente)
   --------------------------------------------------------------- */
.intentions {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.intention { text-align: center; display: grid; gap: .3rem; justify-items: center; }
.intention svg { width: 30px; height: 30px; color: var(--abricot); margin-bottom: .5rem; }
.intention b {
  font-family: var(--corps); font-weight: 700;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.intention span { font-size: .82rem; color: rgba(255,255,255,.6); }
/* Variante sur fond clair */
.intentions--clair { border-top-color: var(--trait); }
.intentions--clair .intention svg { color: var(--terracotta); }
.intentions--clair .intention b { color: var(--chocolat); }
.intentions--clair .intention span { color: var(--texte-doux); }

@media (max-width: 760px) {
  .intentions { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
}
@media (max-width: 420px) { .intentions { grid-template-columns: 1fr; } }

/* Compétences du coaching : liste à filets, deux colonnes */
.competences { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); margin-top: 2rem; }
.competences li {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 0; border-bottom: 1px solid var(--trait-fin);
  font-size: 1rem;
}
.competences svg { width: 17px; height: 17px; color: var(--terracotta); flex: none; margin-top: 5px; }
@media (max-width: 760px) { .competences { grid-template-columns: 1fr; } }

/* ===============================================================
   Page privée (/private/) : même direction artistique, registre
   plus retenu. Ni navigation, ni prix, ni appel à l'abonnement.
   =============================================================== */

.prive .entete--prive {
  position: relative;               /* pas de barre qui suit : on ne relance pas le lecteur */
  background: transparent;
  box-shadow: none;
}
.prive .entete--prive .logo { cursor: default; }
.prive .logo__nom small { letter-spacing: .32em; }

/* Le hero respire davantage : sur ce registre, le vide vaut de l'argument */
.hero--prive { padding-top: clamp(2.5rem, 5vh, 4rem); }
.hero--prive .chapo { max-width: 46ch; }

/* Les références remplacent les chiffres de vente : pas de « 29 € » ici */
.prive .preuve b { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.02em; }

/* Rassurances : ici ce sont des garanties, pas des arguments produit */
.hero--prive .rassurances { gap: .8rem 2rem; }
.hero--prive .rassurances li { font-size: .84rem; }
.hero--prive .rassurances svg { width: 17px; height: 17px; }

.pied--prive .pied__grille--prive { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .pied--prive .pied__grille--prive { grid-template-columns: 1fr; }
}

/* La barre d'achat mobile n'a rien à faire sur cette page */
.prive .barre-achat { display: none !important; }
.prive body { padding-bottom: 0; }

/* Sélecteur de langue de la page privée : deux drapeaux dessinés en SVG.
   Pas d'emoji drapeau : Windows ne les rend pas et affiche « FR » / « GB ». */
.langues { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.langues a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: var(--texte-doux); text-decoration: none;
  border: 1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
}
.langues svg { width: 19px; height: 13.5px; display: block; border-radius: 2px; flex: none; }
.langues a:hover { color: var(--chocolat); border-color: var(--trait); }
.langues a[aria-current] { color: var(--chocolat); background: rgba(196,97,59,.09); border-color: var(--trait); }
.langues a:not([aria-current]) svg { opacity: .45; }
.langues a:hover svg { opacity: 1; }

/* ===============================================================
   PASSE « ARRIVÉE » — le moment d'entrée et la qualité du mouvement.
   Tout est neutralisé sous prefers-reduced-motion et sans JavaScript.
   =============================================================== */

/* ---------- Le rideau d'ouverture ---------- */
/* Il ne masque jamais le contenu durablement : le JS le retire au pire
   au bout de 3 s, et il n'existe pas du tout si le JS ne tourne pas. */
.rideau {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ivoire);
  display: grid; place-items: center;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
.rideau__marque { display: grid; justify-items: center; gap: 1.1rem; }
.rideau__mono {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1;
  color: var(--chocolat); letter-spacing: -.06em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--lent), transform .9s var(--lent);
}
.rideau__filet {
  width: 0; height: 1px; background: var(--terracotta);
  transition: width .9s cubic-bezier(.22, 1, .36, 1) .25s;
}
.rideau__nom {
  font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 700;
  opacity: 0; transition: opacity .8s var(--lent) .35s;
}
.est-ouvert .rideau__mono { opacity: 1; transform: none; }
.est-ouvert .rideau__filet { width: clamp(90px, 14vw, 150px); }
.est-ouvert .rideau__nom { opacity: 1; }
.est-leve.rideau { transform: translateY(-101%); }

/* Pendant le rideau, la page ne défile pas */
html.rideau-actif, html.rideau-actif body { overflow: hidden; }

/* ---------- Profondeur au défilement du hero ---------- */
/* L'image recule et le texte dérive : on quitte le premier écran par un
   mouvement, pas par une coupure. */
.hero__cadre img { will-change: transform; }


/* ---------------------------------------------------------------
   Bibliotheque : apercu, avancement, fin de seance
   --------------------------------------------------------------- */

/* La video d'apercu se pose PAR-DESSUS la photo, qui reste en place.
   Si le fichier ne charge pas, on ne perd rien : la photo est dessous. */
.carte-seance__apercu {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
  opacity: 0; transition: opacity .45s var(--lent);
}
.carte-seance__apercu.est-vu { opacity: 1; }

/* Trait d'avancement des seances deja commencees. */
.carte-seance__progres {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  z-index: 3; background: rgba(67, 34, 15, .28);
}
.carte-seance__progres > i {
  display: block; height: 100%; background: var(--terracotta);
  transition: width .5s var(--lent);
}

/* Bandeau de reprise, discret, au-dessus de la legende. */
.lecteur__reprise {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin: .9rem 0 0; font-size: .8rem; color: var(--taupe);
}
.lecteur__reprise button {
  font: inherit; color: var(--terracotta); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: .25em;
}

/* Fin de seance : ecran de fin POSE SUR la video, comme dans un vrai
   lecteur. Ajoute a la suite, le bloc tombait sous le pli de la fenetre
   et arrivait coupe. En surimpression, il est toujours a l'ecran. */
[data-corps] { position: relative; }
.lecteur__suite {
  position: absolute; inset: 0; z-index: 5;
  display: grid; align-content: center; justify-items: start;
  padding: clamp(1.4rem, 4vw, 3rem); overflow: auto;
  background: var(--chocolat); color: var(--ivoire);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--lent), transform .6s var(--lent);
}
.lecteur__suite.est-vu { opacity: 1; transform: none; }
.lecteur__suite h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 .5rem;
  /* Couleur imposee : la regle globale des titres les met en chocolat,
     ce qui rendait ce titre invisible sur l'aplat chocolat. */
  color: var(--ivoire); max-width: 20ch;
}
.lecteur__suite p { color: rgba(247, 242, 237, .74); font-size: .92rem; }
.lecteur__suite .etiquette { color: var(--abricot); }
.lecteur__suite-actions {
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.lecteur__suite .lien { color: rgba(247, 242, 237, .8); }

@media (prefers-reduced-motion: reduce) {
  .carte-seance__apercu { display: none; }
  .lecteur__suite { opacity: 1; transform: none; transition: none; }
}

/* ---------- Retours du formulaire ---------- */
.champ__erreur {
  margin: .5rem 0 0; font-size: .78rem; color: #A8341B;
  display: flex; align-items: center; gap: .45rem;
}
.champ__erreur::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.champ.est-invalide input,
.champ.est-invalide select,
.champ.est-invalide textarea { border-bottom-color: #A8341B; }

.bouton.est-en-cours { pointer-events: none; opacity: .72; }
.bouton.est-en-cours .fleche { animation: bouton-attend 1.1s linear infinite; }
@keyframes bouton-attend {
  0%   { transform: translateX(0);    opacity: 1; }
  55%  { transform: translateX(10px); opacity: 0; }
  56%  { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bouton.est-en-cours .fleche { animation: none; } }

/* ---------------------------------------------------------------
   Confort d'usage : ancres, clavier, cibles tactiles
   --------------------------------------------------------------- */

/* Les ancres (#offres) atterrissaient SOUS l'en-tete fixe : le titre de la
   section visee etait masque par le bandeau. On reserve sa hauteur. */
html { scroll-padding-top: clamp(5rem, 8vw, 7rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Anneau de focus visible, sur TOUT ce qui se pilote au clavier. Les champs
   avaient outline:none sans remplacement : on ne savait plus ou on etait. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline-offset: 4px;
}
/* Sur les aplats fonces, l'anneau terracotta se perd : il passe en clair. */
.preuves :focus-visible, .signature :focus-visible, .final--plein :focus-visible,
.offre:focus-visible, .lecteur :focus-visible { outline-color: var(--ivoire); }

/* Cibles tactiles : rien de cliquable sous 44 px de haut sur telephone. */
@media (max-width: 900px) {
  .nav a, .puce, .lien, .pied a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------
   Transitions entre les pages
   Amelioration progressive pure : les navigateurs qui ne connaissent pas
   l'API naviguent normalement, sans rien perdre. Rien n'est masque, rien
   n'attend un script : c'est le navigateur qui orchestre.
   --------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: page-sort .34s cubic-bezier(.55, 0, 1, .45) both;
}
::view-transition-new(root) {
  animation: page-entre .46s cubic-bezier(0, .55, .45, 1) both;
}
@keyframes page-sort  { to   { opacity: 0; transform: translateY(-14px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(22px); } }

/* L'en-tete et le monogramme ne rejouent pas : ils restent en place d'une
   page a l'autre, ce qui donne la sensation d'une application. */
.entete { view-transition-name: entete; }
.logo__mono { view-transition-name: monogramme; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Voile d'attente, pose avant la premiere peinture ----------
   Sur une connexion reelle, motion.js arrive apres le premier rendu : on
   voyait la page brute une demi-seconde AVANT que le rideau ne la couvre.
   Ce voile est donc arme par un script en <head>, dans la meme teinte que
   le rideau, qui prend le relais sans transition visible.

   Trappe de secours : une animation le retire toute seule au bout de cinq
   secondes. Si motion.js ne chargeait jamais, la page reste consultable. */
html.rideau-attendu::after {
  content: ""; position: fixed; inset: 0; z-index: 199;
  background: #F7F2ED; pointer-events: none;
  animation: rideau-secours 0s linear 5s forwards;
}
@keyframes rideau-secours { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.rideau-attendu::after { display: none; } }

/* ---------- Fil d'avancement de lecture ----------
   Deux pixels de terracotta tout en haut, qui se remplissent au fil de la
   page. Purement decoratif : il n'existe que si le JS le cree. */
.progres {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 95; pointer-events: none; background: rgba(67, 34, 15, .07);
}
.progres > i {
  display: block; height: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--abricot), var(--terracotta));
}
@media (prefers-reduced-motion: reduce) { .progres { display: none; } }

/* ---------- Les aplats de couleur arrivent en rideau ----------
   Le voile est un pseudo-élément POSÉ SUR la bande, jamais un découpage
   de la bande elle-même.

   Pourquoi : découper la section à zéro hauteur (clip-path) la rendait
   invisible pour l'observateur d'entrée dans le champ, qui ne lui donnait
   donc jamais la classe .vu, qui seule levait le découpage. La section
   restait masquée pour toujours. Ici la géométrie de la section n'est
   jamais touchée : l'observateur la voit normalement.

   Trois sécurités : le voile n'existe que si le JS tourne (.js), il ne
   capte pas les clics, et le script lève tout au bout de six secondes. */
.js .a-reveler.preuves,
.js .a-reveler.signature,
.js .a-reveler.paroles--plein,
.js .a-reveler.final--plein { position: relative; }

.js .a-reveler.preuves::after,
.js .a-reveler.signature::after,
.js .a-reveler.paroles--plein::after,
.js .a-reveler.final--plein::after {
  content: '';
  position: absolute;
  inset: -1px 0;
  z-index: 20;
  background: var(--ivoire);
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1);
}
.js .a-reveler.vu.preuves::after,
.js .a-reveler.vu.signature::after,
.js .a-reveler.vu.paroles--plein::after,
.js .a-reveler.vu.final--plein::after { transform: scaleY(0); }

/* ---------- Révélation mot à mot ---------- */
.mot {
  display: inline-block;
  opacity: 0; transform: translateY(.5em);
  transition: opacity .7s var(--lent), transform .8s var(--lent);
  transition-delay: calc(var(--m, 0) * 45ms);
}
.vu .mot { opacity: 1; transform: none; }

/* ---------- Boutons magnétiques ---------- */
.bouton { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rideau { display: none !important; }
  html.rideau-actif, html.rideau-actif body { overflow: auto; }
  .preuves, .signature, .paroles--plein, .final--plein { clip-path: none !important; transition: none !important; }
  .mot { opacity: 1 !important; transform: none !important; transition: none !important; }
}