/* Pauline Gil · one page consentement
   Palette choisie par Pauline : turquoise #17d3b4, bleu #21a2f2, galet #f4e2e2
   Polices choisies par Pauline : Marcellus (titres), Alegreya (corps) */

:root {
  --turquoise: #17d3b4;
  --bleu: #21a2f2;
  --galet: #f4e2e2;
  --creme: #fdfaf6;
  --encre: #1c3038;
  --encre-doux: #3e5a64;
  --turquoise-fonce: #0e8a76;
  /* Pendant du turquoise foncé pour le bleu : même teinte, assez sombre pour
     porter du texte sur le galet (contraste ≈ 4,5). Dérivé du bleu, pour qu'il
     suive si Pauline change la teinte depuis l'admin. */
  --bleu-fonce: color-mix(in srgb, var(--bleu) 55%, #05304d);
  /* Le sombre de la charte quand il sert de FOND (bande, pied, boutons pleins,
     section réels) : il reste stable même si la couleur des titres change dans
     le panneau Couleurs de l'admin, sinon ces aplats suivraient le texte. */
  --encre-fond: #1c3038;

  /* ── Couleurs de TEXTE réglables depuis l'admin (panneau « Couleurs ») ──
     Chacune porte une famille de texte et part de sa teinte historique : sans
     réglage, le site est exactement celui d'avant. Valeurs littérales et non
     `var(--encre)` : chaque réglage doit faire ce qu'il annonce, sans en
     entraîner un autre.
     Sur les sections foncées, deux réglages : --texte-titre-clair porte les
     titres et les slogans (ce qui hérite de la couleur de la section),
     --texte-clair porte les paragraphes, dont les nuances plus discrètes sont
     dérivées : régler la couleur claire les emmène toutes ensemble.
     --creme reste la couleur des FONDS clairs et des libellés de boutons, hors
     du panneau : ce sont des objets, pas du texte de lecture. */
  --texte-titre-grand: #1c3038;
  --texte-citation: #1c3038;
  --texte-note: #3e5a64;
  --texte-titre-clair: #fdfaf6;
  /* L'accroche des « réels » est posée en galet, une nuance plus rosée que les
     autres titres clairs. Le mélange ci-dessous retombe exactement sur le galet
     d'origine (244, 226, 226) tant que --texte-titre-clair vaut son défaut, et
     garde ce décalage de teinte si Pauline choisit une autre couleur. */
  --texte-intro-clair: color-mix(in srgb, var(--texte-titre-clair) 70%, #dfaab4);
  --texte-clair: #d9e4e2;
  --texte-clair-doux: color-mix(in srgb, var(--texte-clair) 90%, var(--encre-fond));
  --texte-clair-discret: color-mix(in srgb, var(--texte-clair) 72%, var(--encre-fond));
  --texte-clair-tres-discret: color-mix(in srgb, var(--texte-clair) 60%, var(--encre-fond));

  /* Teintes du bouton « A » de la barre de mise en forme (mots mis en couleur).
     Le turquoise est la teinte par défaut, portée par un <mark> nu. */
  --mark-prune: #6b3f6e;
  --mark-terre: #a2452e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* clip : les éléments en attente d'animation (translatés hors écran)
   ne créent plus de défilement horizontal sur mobile */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Alegreya', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3 { font-family: 'Marcellus', 'Alegreya', serif; font-weight: 400; }

/* Accent de couleur, posé depuis l'admin (bouton « A » de la barre de mise en
   forme). <mark> plutôt qu'une classe : l'éditeur n'a le droit de produire que
   des balises nues. Le surlignage jaune du navigateur laisse place à la teinte
   de la charte. */
mark {
  background: none;
  color: var(--turquoise-fonce);
}
/* Teinte choisie dans le menu du bouton « A ». Un attribut data plutôt qu'une
   classe : la sanitisation n'autorise ni `class` ni `style`, et une valeur
   inconnue retombe simplement sur le turquoise ci-dessus. */
mark[data-c="bleu"] { color: var(--bleu-fonce); }
mark[data-c="prune"] { color: var(--mark-prune); }
mark[data-c="terre"] { color: var(--mark-terre); }
mark[data-c="encre"] { color: var(--encre); }

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.titre-section {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 1.2em;
  position: relative;
  display: inline-block;
}
.titre-section::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.18em;
  width: 100%; height: 0.32em;
  background: var(--turquoise);
  opacity: 0.35;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.titre-section.est-visible::after { transform: scaleX(1); }
.titre-clair { color: var(--texte-titre-clair); }

/* ── Boutons ── */
.btn {
  display: inline-block;
  font-family: 'Marcellus', serif;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-plein {
  background: var(--encre-fond);
  color: var(--creme);
  box-shadow: 0 6px 24px rgba(28, 48, 56, 0.25);
}
.btn-plein:hover { background: var(--turquoise-fonce); box-shadow: 0 10px 30px rgba(14, 138, 118, 0.35); }
.btn-ligne {
  color: var(--encre);
  border: 1.5px solid var(--encre-fond);
}
.btn-ligne:hover { background: var(--encre-fond); color: var(--creme); }
/* Rempli turquoise (demande de Pauline). Le texte reste encre : sur ce fond
   clair, c'est le seul contraste confortable. Au survol, la teinte foncée prend
   le relais et le texte passe en crème. */
.btn-turquoise {
  background: var(--turquoise);
  color: var(--encre);
  box-shadow: 0 8px 26px rgba(23, 211, 180, 0.38);
}
.btn-turquoise:hover { background: var(--turquoise-fonce); color: var(--creme); }
/* Bouton étincelant (demande de Pauline : « comme sur insta »). Trois couches,
   toutes décoratives : un anneau dégradé qui tourne autour du bouton comme le
   cercle d'une story, de petites étoiles qui scintillent, et un reflet qui
   traverse le bouton. La palette reste celle du site. */
@property --etincelle-tour {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn-halo {
  position: relative;
  /* inline-flex : sinon l'espace de ligne de base sous le lien decale l'anneau. */
  display: inline-flex;
  border-radius: 999px;
  isolation: isolate;
  transition: transform 0.25s ease;
}
/* Au survol, c'est l'ensemble bouton + anneau + etoiles qui se souleve. */
.btn-halo:hover { transform: translateY(-3px); }
.btn-halo:hover .btn-etincelle, .btn-halo .btn-etincelle:hover { transform: none; }
/* L'anneau : dégradé conique en rotation, découpé en couronne par un masque. */
.btn-halo::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  /* Toutes les teintes restent lisibles sur le fond galet de la section :
     le rose de la charte s'y effacerait. */
  background: conic-gradient(from var(--etincelle-tour),
    var(--turquoise), var(--bleu), var(--turquoise-fonce), var(--bleu), var(--turquoise));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: etincelle-rotation 7s linear infinite;
  pointer-events: none;
}
@keyframes etincelle-rotation { to { --etincelle-tour: 360deg; } }

/* Les étoiles : quatre branches, elles apparaissent en décalé autour du bouton. */
.btn-etoiles { position: absolute; inset: 0; pointer-events: none; }
.btn-etoiles svg {
  position: absolute;
  fill: var(--turquoise);
  opacity: 0;
  animation: etincelle-scintille 3.4s ease-in-out infinite;
}
.btn-etoiles svg:nth-child(1) { width: 22px; height: 22px; top: -15px; right: 9%; animation-delay: 0s; }
.btn-etoiles svg:nth-child(2) { width: 16px; height: 16px; bottom: -12px; left: 13%; fill: var(--bleu); animation-delay: 1.1s; }
.btn-etoiles svg:nth-child(3) { width: 13px; height: 13px; top: 2%; left: -14px; animation-delay: 2.2s; }
@keyframes etincelle-scintille {
  0%, 68% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  78% { opacity: 0.95; transform: scale(1) rotate(35deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(70deg); }
}

/* Le bouton lui-même : sa bordure s'efface au profit de l'anneau, et un reflet
   le traverse toutes les sept secondes. */
.btn-etincelle { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; }
.btn-etincelle::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(23, 211, 180, 0.62), transparent);
  transform: skewX(-18deg);
  animation: etincelle-passage 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes etincelle-passage {
  0%, 60% { left: -60%; opacity: 0; }
  64% { opacity: 1; }
  90%, 100% { left: 120%; opacity: 0; }
}
/* Bouton rempli : l'anneau prend du champ pour rester lisible contre le
   remplissage, et le reflet passe en clair (un reflet turquoise sur du
   turquoise ne se verrait pas). */
.btn-halo:has(.btn-turquoise)::before { inset: -6px; }
.btn-turquoise.btn-etincelle::after {
  background: linear-gradient(100deg, transparent, rgba(253, 250, 246, 0.72), transparent);
}
.btn-grand { font-size: clamp(1.05rem, 2.6vw, 1.5rem); padding: 1em 1.6em; }

/* ════════ HERO ════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(165deg, var(--creme) 0%, var(--galet) 100%);
  overflow: hidden;
  padding: 64px 0 96px;
}

.hero-blobs { position: absolute; inset: 0; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.blob-1 { width: 46vw; height: 46vw; background: var(--turquoise); top: -18vw; right: -12vw; opacity: 0.28; }
.blob-2 { width: 34vw; height: 34vw; background: var(--bleu); bottom: -14vw; left: -10vw; opacity: 0.2; }
.blob-3 { width: 22vw; height: 22vw; background: #ffffff; top: 30%; left: 38%; opacity: 0.6; }
.blob-4 { width: 40vw; height: 40vw; background: var(--turquoise); top: -16vw; left: -14vw; opacity: 0.25; }
.blob-5 { width: 30vw; height: 30vw; background: var(--bleu); bottom: -12vw; right: -8vw; opacity: 0.2; }

.hero-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero-overline {
  font-family: 'Marcellus', serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--turquoise-fonce);
  margin-bottom: 1.4em;
}

.titre-bloc {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  margin-bottom: 0.45em;
  position: relative;
}
.hero-title {
  font-size: 1em;
  line-height: 1.06;
  margin: 0;
  color: var(--texte-titre-grand);
}
.hero-line { display: block; }
.word-consent { color: var(--turquoise-fonce); white-space: nowrap; }

/* Rendu Pretext du titre : lignes posées en absolu sur la géométrie mesurée.
   Le h1 réel reste dans le DOM (SEO, lecteurs d'écran), masqué visuellement. */
.titre-stage {
  display: none;
  position: relative;
  font-family: 'Marcellus', serif;
  font-size: 1em;
  line-height: 1.06;
  color: var(--texte-titre-grand);
}
.titre-bloc.pt-active .titre-stage { display: block; }
.titre-bloc.pt-active .hero-title {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.pt-row { position: absolute; left: 0; white-space: pre; }
.pt-row span { display: inline-block; will-change: transform; }
.pt-lettre-consent { color: var(--turquoise-fonce); }
/* hover actif seulement après l'animation d'entrée (classe posée par GSAP),
   pour que la transition CSS et les écritures GSAP se croisent jamais */
.pt-hover-pret .pt-lettre-consent {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pt-hover-pret .pt-row-consent:hover .pt-lettre-consent { transform: translateY(-6px); }
.pt-hover-pret .pt-row-consent:hover .pt-lettre-consent:nth-child(2n) { transform: translateY(5px); }
.pt-hover-pret .pt-row-consent:hover .pt-lettre-consent:nth-child(3n) { transform: translateY(-9px) rotate(4deg); }

.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--encre-doux);
  max-width: 34em;
  margin-bottom: 1.8em;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-photo { position: relative; justify-self: center; }
.hero-photo img {
  width: min(38vw, 380px);
  height: auto;
  display: block;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 24px 60px rgba(28, 48, 56, 0.25);
}
/* Format d'affichage choisi dans l'admin (data-format sur la figure). Sans
   attribut, la photo garde ses proportions d'origine : c'est le rendu d'avant
   ce réglage. L'arche reste la signature du hero tant que l'image est haute ;
   couchée, elle deviendrait un ovale écrasé, donc les formats larges prennent
   un arrondi plus sage. */
.hero-photo[data-format] img { object-fit: cover; }
.hero-photo[data-format="portrait"] img { aspect-ratio: 3 / 4; }
.hero-photo[data-format="carre"] img { aspect-ratio: 1; }
.hero-photo[data-format="paysage"] img { aspect-ratio: 4 / 3; border-radius: 190px 190px 24px 24px; }
.hero-photo[data-format="pano"] img { aspect-ratio: 16 / 9; border-radius: 28px; }

/* Forme de la photo (data-forme, second réglage de l'admin). Sans attribut,
   c'est l'arche d'origine. Ces règles viennent après celles des proportions :
   le rond, qui est carré par définition, impose son aspect-ratio.
   Les quatre derniers cadres sont ceux de la page /projets, à l'identique. */
.hero-photo[data-forme] img { object-fit: cover; }
.hero-photo[data-forme="droit"] img { border-radius: 0; }
.hero-photo[data-forme="arrondi"] img { border-radius: 14px; }
.hero-photo[data-forme="rond"] img { border-radius: 50%; aspect-ratio: 1; }
.hero-photo[data-forme="ovale"] img { border-radius: 50%; }
.hero-photo[data-forme="polaroid"] {
  background: #fff;
  padding: 12px 12px 16px;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(28, 48, 56, 0.2);
}
.hero-photo[data-forme="lisere"] {
  background: var(--creme);
  padding: 8px;
  border: 1px solid rgba(28, 48, 56, 0.25);
}
/* Cadres portés par la figure : l'ombre et l'arrondi passent du côté du cadre,
   sinon la photo garderait sa propre ombre à l'intérieur. */
.hero-photo[data-forme="polaroid"] img,
.hero-photo[data-forme="lisere"] img { border-radius: 0; box-shadow: none; }
.hero-photo[data-forme="polaroid"] figcaption { margin-top: 10px; }
.hero-photo figcaption {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--texte-note);
  text-align: center;
  margin-top: 0.9em;
}

.hero-scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 46px;
  border: 2px solid var(--encre-fond);
  border-radius: 999px;
  display: flex; justify-content: center;
}
.hero-scroll-dot {
  width: 6px; height: 6px;
  background: var(--turquoise-fonce);
  border-radius: 50%;
  margin-top: 8px;
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(18px); opacity: 0.2; }
}

/* ════════ MANIFESTE ════════ */
.manifeste {
  padding: clamp(60px, 9vh, 100px) 24px clamp(40px, 5.5vh, 66px);
  background: var(--creme);
  display: flex;
  justify-content: center;
}
/* Deux sections cremes qui se suivent : la seconde reprend juste apres, la
   citation garde son air sans creuser un trou. La regle s'annule d'elle-meme
   si l'ordre des sections change. */
.manifeste + .seances { padding-top: clamp(36px, 5vh, 62px); }
/* La citation est portee par un cartouche galet : elle se detache du fond
   creme et ne se confond plus avec la section suivante. */
.manifeste-quote {
  position: relative;
  color: var(--texte-citation);
  max-width: 24em;
  font-size: clamp(1.55rem, 4vw, 2.7rem);
  font-family: 'Alegreya', serif;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  padding: clamp(46px, 6vw, 68px) clamp(28px, 5vw, 64px) clamp(46px, 5.4vw, 64px);
  border-radius: 40px;
  /* Le petit filet turquoise du pied est peint par le fond : les deux
     pseudo-elements portent les guillemets, ouvrant et fermant. */
  background:
    linear-gradient(rgba(23, 211, 180, 0.4), rgba(23, 211, 180, 0.4)) no-repeat
      center bottom clamp(20px, 2.6vw, 30px) / 62px 5px,
    rgba(244, 226, 226, 0.6);
  box-shadow: 0 18px 50px rgba(28, 48, 56, 0.08);
}
/* Guillemets, decoratifs : ouvrant en haut a gauche, fermant en bas a droite. */
.manifeste-quote::before,
.manifeste-quote::after {
  position: absolute;
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--turquoise);
  opacity: 0.5;
  pointer-events: none;
}
.manifeste-quote::before {
  content: '\00AB';
  top: clamp(16px, 2.4vw, 30px);
  left: clamp(16px, 3vw, 40px);
}
.manifeste-quote::after {
  content: '\00BB';
  bottom: clamp(16px, 2.4vw, 30px);
  right: clamp(16px, 3vw, 40px);
}
.manifeste-quote .mot { opacity: 0.12; display: inline-block; }

/* ════════ BANDE DÉFILANTE ════════ */
.bande {
  overflow: hidden;
  background: var(--encre-fond);
  padding: 18px 0;
}
.bande-piste {
  display: flex;
  gap: 1.4em;
  white-space: nowrap;
  width: max-content;
  font-family: 'Marcellus', serif;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--galet);
}
.bande-piste i { color: var(--turquoise); font-style: normal; }

/* ════════ POUR TOI ════════ */
.pourtoi { padding: clamp(80px, 12vh, 130px) 0; background: var(--galet); }
.pourtoi-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.carte-voix {
  background: var(--creme);
  border-radius: 20px;
  padding: 32px 28px;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--encre-doux);
  box-shadow: 0 10px 30px rgba(28, 48, 56, 0.08);
  position: relative;
}
.carte-voix::before {
  content: '“';
  position: absolute;
  top: -18px; left: 20px;
  font-family: 'Marcellus', serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--turquoise);
}
.carte-voix:nth-child(2)::before { color: var(--bleu); }

.pourtoi-apres h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 0.9em;
}
.liste-changements { list-style: none; display: grid; gap: 14px; max-width: 42em; }
.liste-changements li {
  padding-left: 36px;
  position: relative;
}
.liste-changements li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--turquoise);
}
.liste-changements li:nth-child(2)::before { background: var(--bleu); }
.liste-changements li:nth-child(3)::before { background: var(--encre-fond); }
.liste-changements strong { font-family: 'Marcellus', serif; font-weight: 400; }

/* ════════ RÉELS ════════ */
.reels {
  background: radial-gradient(120% 120% at 80% 0%, #24454f 0%, var(--encre-fond) 60%);
  color: var(--texte-titre-clair);
  padding: clamp(90px, 13vh, 150px) 0;
}
.reels-intro { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: 2.2em; color: var(--texte-intro-clair); }
.reels-intro strong { color: var(--turquoise); letter-spacing: 0.12em; }

.reels-liste { list-style: none; display: grid; gap: clamp(20px, 4vh, 36px); max-width: 720px; }
.reels-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: center;
}
.reels-lettre {
  font-family: 'Marcellus', serif;
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  line-height: 1;
  color: var(--turquoise);
  text-align: center;
}
.reels-item:nth-child(2n) .reels-lettre { color: var(--bleu); }
.reels-def h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.2em; }
.reels-def p { color: var(--texte-clair-doux); }

.reels-chute {
  margin-top: 2em;
  font-family: 'Marcellus', serif;
  font-size: clamp(2rem, 5.6vw, 3.6rem);
}
.reels-chute em {
  font-style: normal;
  color: var(--turquoise);
  border-bottom: 4px solid var(--turquoise);
}
.reels-credit { margin-top: 2.4em; font-size: 0.85rem; color: var(--texte-clair-tres-discret); font-style: italic; }

/* ════════ SÉANCES ════════ */
.seances { padding: clamp(90px, 13vh, 150px) 0; background: var(--creme); }
.seances-intro { max-width: 40em; color: var(--encre-doux); margin-bottom: 3em; font-size: 1.15rem; }

.parcours { list-style: none; display: grid; gap: 36px; margin-bottom: 56px; }
.etape {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items: start;
  padding: 32px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(28, 48, 56, 0.07);
}
.etape-num {
  font-family: 'Marcellus', serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--turquoise);
  opacity: 0.85;
}
.etape:nth-child(2) .etape-num { color: var(--bleu); }
.etape:nth-child(3) .etape-num { color: var(--turquoise-fonce); }
.etape-corps h3 { font-size: 1.45rem; margin-bottom: 0.4em; }
.etape-corps p { color: var(--encre-doux); }

.parcours-suite { max-width: 40em; color: var(--texte-note); margin-bottom: 3.4em; font-style: italic; }

.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 2.6em; }
.tarif {
  border: 1.5px solid rgba(28, 48, 56, 0.16);
  border-radius: 24px;
  padding: 34px 28px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  background: var(--creme);
}
.tarif:hover {
  transform: translateY(-6px);
  border-color: var(--turquoise);
  box-shadow: 0 16px 40px rgba(23, 211, 180, 0.18);
}
/* Hierarchie demandee par Pauline (post-it du 09/07) : le nom de la formule
   passe devant, le prix devient une pastille discrete sous le titre. */
.tarif h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; margin-bottom: 0.45em; }
.tarif-prix {
  font-family: 'Marcellus', serif;
  font-size: 1.1rem;
  color: var(--turquoise-fonce);
  line-height: 1.1;
  display: inline-block;
  padding: 0.3em 1em;
  border-radius: 999px;
  background: rgba(23, 211, 180, 0.14);
  letter-spacing: 0.03em;
}
.tarif-roue .tarif-prix { color: var(--bleu); background: rgba(33, 162, 242, 0.13); }
.tarif-detail { color: var(--encre-doux); font-size: 0.98rem; margin-top: 0.8em; }
.tarif-prix--mot { font-size: 1.05rem; }

/* Photo d'ambiance en tete de carte : elle vient jusqu'aux bords, l'arrondi
   suit celui de la carte. Une carte sans photo garde exactement son rendu. */
.tarif--photo { overflow: hidden; }
.tarif-photo { margin: -34px -28px 22px; }
.tarif-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Les photos sont des portraits : on cadre le haut, la ou sont les personnes. */
  object-position: center 22%;
}

/* Tarifs en deux temps : base (solo, duo) puis suite (sur-mesure, roue). Chaque
   groupe est une grille de deux cartes, centree et limitee en largeur. */
.tarifs--duo { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; }
.tarifs-suite-intro { max-width: 38em; margin: 0 auto 2.4em; color: var(--texte-note); font-style: italic; text-align: center; }

.seances-note { color: var(--texte-note); font-style: italic; max-width: 38em; }

/* Bareme de prix : replie derriere un bouton sous la note, deplie en trois
   cartes numerotees (meme grammaire que le parcours des seances). */
.bareme { margin-top: 1.8em; }
.bareme > summary.bareme-resume { cursor: pointer; list-style: none; display: block; }
.bareme > summary.bareme-resume::-webkit-details-marker { display: none; }
.bareme-resume-pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Marcellus', serif;
  font-size: 1.02rem;
  font-style: normal;
  color: var(--turquoise-fonce);
  padding: 0.62em 1.4em;
  border-radius: 999px;
  border: 1.5px solid rgba(23, 211, 180, 0.55);
  background: rgba(23, 211, 180, 0.1);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.bareme-resume:hover .bareme-resume-pastille,
.bareme-resume:focus-visible .bareme-resume-pastille {
  background: rgba(23, 211, 180, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(23, 211, 180, 0.22);
}
.bareme-resume-mot::after { content: 'voir le barème'; }
.bareme[open] .bareme-resume-mot::after { content: 'réduire'; }
.bareme-chevron { width: 18px; height: 18px; transition: transform 0.3s ease; }
.bareme[open] .bareme-chevron { transform: rotate(180deg); }

.bareme-corps { margin-top: 2.2em; }
.bareme[open] .bareme-corps { animation: bareme-apparition 0.45s ease both; }
@keyframes bareme-apparition {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.bareme-intro { color: var(--encre-doux); margin-bottom: 1.8em; font-style: normal; }
.bareme-intro p { margin-bottom: 0.7em; max-width: 42em; }
.bareme-intro p:last-child { margin-bottom: 0; }
.bareme-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bareme-carte {
  background: var(--creme);
  border: 1.5px solid rgba(28, 48, 56, 0.14);
  border-radius: 24px;
  padding: 28px 26px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bareme-carte:hover {
  transform: translateY(-4px);
  border-color: var(--turquoise);
  box-shadow: 0 14px 34px rgba(23, 211, 180, 0.16);
}
.bareme-num {
  display: block;
  font-family: 'Marcellus', serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--turquoise);
  margin-bottom: 0.35em;
  font-style: normal;
}
.bareme-carte:nth-child(2) .bareme-num { color: var(--bleu); }
.bareme-carte:nth-child(3) .bareme-num { color: var(--turquoise-fonce); }
.bareme-tete {
  font-family: 'Marcellus', serif;
  font-size: 1.22rem;
  color: var(--encre);
  font-style: normal;
  margin-bottom: 0.6em;
}
.bareme-detail { color: var(--encre-doux); font-size: 0.95rem; line-height: 1.55; font-style: normal; }
.bareme-detail p { margin-bottom: 0.5em; }
.bareme-detail p:last-child { margin-bottom: 0; }

/* ════════ ENGAGEMENT ════════ */
.engagement {
  position: relative;
  padding: clamp(100px, 16vh, 180px) 0;
  overflow: hidden;
  color: var(--texte-titre-clair);
}
.engagement-photo {
  position: absolute;
  inset: -12% 0;
}
.engagement-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.engagement-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 38, 46, 0.92) 30%, rgba(20, 38, 46, 0.55) 100%);
}
.engagement-contenu { position: relative; }
.engagement-slogan {
  font-family: 'Marcellus', serif;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem);
  line-height: 1.2;
  margin-bottom: 0.8em;
}
.engagement-slogan span { color: var(--turquoise); }
.engagement-texte, .engagement-fresque { max-width: 36em; color: var(--texte-clair); margin-bottom: 1.4em; }
.engagement-fresque a { color: var(--turquoise); }

.postit {
  display: block;
  margin-top: 2.4em;
  background: #fff8e1;
  border: none;
  padding: 14px 14px 10px;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: min(240px, 60vw);
}
.postit:hover { transform: rotate(1deg) scale(1.05); }
.postit::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 90px; height: 26px;
  background: rgba(23, 211, 180, 0.45);
  border-radius: 2px;
}
.postit { position: relative; }
.postit img { width: 100%; height: auto; display: block; border-radius: 2px; }
.postit-legende {
  display: block;
  font-family: 'Alegreya', serif;
  font-style: italic;
  color: #5d4a1f;
  padding-top: 8px;
  font-size: 0.95rem;
}

/* ════════ QUI JE SUIS ════════ */
.quisuisje { padding: clamp(90px, 13vh, 150px) 0; background: var(--galet); }
.quisuisje-grille {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}
/* Sans vignette de fresque, la bio occupe toute la largeur du conteneur. */
.quisuisje-grille.est-simple { grid-template-columns: 1fr; }
.quisuisje-texte p { margin-bottom: 1.2em; color: var(--encre-doux); max-width: 34em; }
.quisuisje-texte a:not(.btn) { color: var(--turquoise-fonce); }
.quisuisje-joie {
  font-family: 'Marcellus', serif;
  font-size: 1.25rem;
  color: var(--encre) !important;
}
/* Bandeau des valeurs : une photo a gauche, les valeurs a droite. Sans photo
   dans le modele (.est-seul), les valeurs prennent toute la largeur. */
.quisuisje-valeurs-bloc {
  margin-top: clamp(46px, 6vh, 76px);
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}
.quisuisje-valeurs-bloc.est-seul { grid-template-columns: 1fr; }
.valeurs-photo {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(28, 48, 56, 0.16);
}
.valeurs-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.quisuisje-valeurs {
  list-style: none;
  display: grid;
  gap: clamp(20px, 3.4vh, 34px);
}
/* Chaque valeur porte son ton : la teinte vive habille le symbole, sa version
   foncee porte le mot (lisible sur le galet). Les tons alternent entre les deux
   couleurs de la charte, donc le nombre de valeurs peut changer sans reglage. */
.quisuisje-valeurs .valeur {
  --ton: var(--turquoise);
  --ton-lisible: var(--turquoise-fonce);
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: 'symbole mot' 'symbole texte';
  align-items: start;
  column-gap: 1em;
  row-gap: 0.15em;
}
.quisuisje-valeurs .valeur:nth-child(2n) {
  --ton: var(--bleu);
  --ton-lisible: var(--bleu-fonce);
}
.valeur-symbole {
  grid-area: symbole;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--creme);
  color: var(--ton);
  border: 1.5px solid color-mix(in srgb, var(--ton) 45%, transparent);
  box-shadow: 0 6px 16px rgba(28, 48, 56, 0.09);
}
.valeur-symbole svg { width: 23px; height: 23px; }
.valeur-mot {
  grid-area: mot;
  font-family: 'Marcellus', serif;
  font-size: 1.18rem;
  color: var(--ton-lisible);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.valeur-texte {
  grid-area: texte;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--encre-doux);
  margin-top: 0.15em;
}

/* Pied de section : le bouton, centre sous les valeurs. */
.quisuisje-pied { margin-top: clamp(34px, 4.6vh, 56px); text-align: center; }

/* Colonne de droite de la bio : vignette cliquable vers la fresque. */
.quisuisje-cote { display: grid; gap: 30px; align-content: center; }
.quisuisje-fresque {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(28, 48, 56, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.quisuisje-fresque img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quisuisje-fresque:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23, 211, 180, 0.3); }

/* ════════ CONTACT ════════ */
.contact {
  position: relative;
  padding: clamp(110px, 18vh, 200px) 0;
  background: linear-gradient(15deg, var(--creme) 0%, var(--galet) 100%);
  overflow: hidden;
  text-align: center;
}
.contact-contenu { position: relative; }
.contact-titre { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 0.5em; }
.contact-texte { max-width: 32em; margin: 0 auto 2em; color: var(--encre-doux); }
.contact-tel { margin-top: 1.6em; color: var(--encre-doux); }
.contact-tel a { color: var(--turquoise-fonce); }

/* ════════ PIED ════════ */
.pied {
  background: var(--encre-fond);
  color: var(--texte-clair-discret);
  text-align: center;
  padding: 40px 24px;
  font-size: 0.9rem;
  display: grid;
  gap: 6px;
}
.pied a { color: var(--turquoise); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* ════════ LIGHTBOX ════════ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 31, 0.92);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 14px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(92vw, 640px);
  max-height: 82vh;
  width: auto; height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-credit { color: var(--texte-clair-doux); font-size: 0.9rem; }
.lightbox-credit a { color: var(--turquoise); }
.lightbox-fermer {
  position: absolute;
  top: 18px; right: 24px;
  background: none;
  border: none;
  color: var(--creme);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
}

/* ════════ RÉVÉLATIONS (état initial géré en JS) ════════ */

/* ════════ RESPONSIVE ════════ */
@media (max-width: 900px) {
  .pourtoi-grille, .tarifs { grid-template-columns: 1fr; }
  .quisuisje-grille { grid-template-columns: 1fr; gap: 36px; }
  /* La photo des valeurs passe au-dessus de la liste, sans manger l'écran. */
  .quisuisje-valeurs-bloc { grid-template-columns: 1fr; }
  .valeurs-photo { max-width: 420px; margin: 0 auto; }
  .bareme-liste { grid-template-columns: 1fr; gap: 18px; }
  .bareme-carte { padding: 24px 22px 22px; }
}

@media (max-width: 760px) {
  .hero { padding: 36px 0 110px; }
  .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  /* photo d'abord, compacte, sans légende */
  .hero-photo { order: -1; }
  .hero-photo img { width: min(52vw, 220px); }
  .hero-photo figcaption { display: none; }
  /* « Le consentement, » tient sur une ligne (fallback h1 aligné sur Pretext) */
  .hero-line:nth-child(1), .hero-line:nth-child(2) { display: inline; }
  /* boutons côte à côte */
  .hero-cta { gap: 10px; }
  .hero-cta .btn { font-size: 0.92rem; padding: 0.75em 1.15em; }
  .titre-bloc { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }
  .etape { grid-template-columns: 1fr; gap: 10px; padding: 26px 22px; }
  .etape-num { font-size: 2.4rem; }
  .reels-item { grid-template-columns: 64px 1fr; gap: 18px; }
  /* « Un OUI réel, c'est quoi ? » tient sur une seule ligne */
  .reels .titre-section { font-size: clamp(1.5rem, 6.2vw, 2rem); white-space: nowrap; }
  .manifeste-quote { font-size: clamp(1.5rem, 7vw, 2rem); border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-dot { animation: none; }
  .btn, .tarif, .postit, .pt-row span { transition: none; }
  /* Motion réduite : l'anneau reste, immobile, les scintillements s'arrêtent. */
  .btn-etincelle::after { animation: none; opacity: 0; }
  .btn-halo::before { animation: none; }
  .btn-halo { transition: none; }
  .btn-etoiles svg { animation: none; opacity: 0.55; transform: none; }
  .quisuisje-fresque, .bareme-carte, .bareme-resume-pastille, .bareme-chevron { transition: none; }
  .bareme[open] .bareme-corps { animation: none; }
}

/* Robustesse edition (25/06/2026, revu) : textes longs toujours sur plusieurs
   lignes, aucun debordement horizontal (mobile inclus).
   overflow-wrap: anywhere (et pas break-word) reduit AUSSI la largeur intrinseque,
   ce qui empeche une colonne de grille de gonfler au-dela de l'ecran et d'entrainer
   la photo. min-width: 0 sur les enfants de grille/flex est le complement classique. */
h1, h2, h3, h4, p, li, blockquote, summary, figcaption, span, a, strong, em, .titre-section {
  overflow-wrap: anywhere;
  word-break: normal;
}
.titre-section { max-width: 100%; }
.reels .titre-section { white-space: normal; }
/* Empeche les pistes de grille (hero, qui-suis-je, tarifs, etapes, reels) de
   deborder quand un mot tres long apparait. */
.hero-inner > *, .hero-text, .quisuisje-grille > *, .quisuisje-valeurs-bloc > *,
.pourtoi-grille > *, .tarifs > *, .reels-item > *, .etape > *, .conteneur { min-width: 0; }
/* Aucune image ne depasse jamais son conteneur. */
img { max-width: 100%; height: auto; }
.engagement-photo img { height: 100%; }