/* ═══════════════════════════════════════════════════════════════════════
   KESKONBOUFFE — système de design
   Repris au pixel près des carrousels Instagram (série « 1600 kcal »).

   Les quatre signes de la marque, dans l'ordre d'importance :
     1. le violet et le crème grainés, matière de papier
     2. les rubans crème qui épousent chaque ligne de texte
     3. les pastilles violettes à bords ronds pour les titres
     4. les grandes cartes crème posées sur le violet

   Tout part des variables ci-dessous. Ne jamais écrire une couleur en dur
   dans une page : ajouter une variable ici si besoin.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs relevées sur les visuels ─────────────────────────────── */
  --creme:          #F5EDE0;  /* la surface dominante */
  --creme-clair:    #FFFDF5;  /* sections claires */
  --creme-ligne:    #E4D8C6;
  --blanc:          #FFFFFF;

  --violet:         #B175B5;  /* le violet de marque : pastilles, aplats */
  --violet-texture: #AE72B3;  /* fond grainé — la couleur des carrousels */
  --violet-graine:  #96629F;  /* base des fonds grainés : le grain l'éclaircit
                                 d'environ 16 %, ce qui la ramène sur #AE72B3 */
  --violet-fonce:   #8E52A0;  /* aplats NON grainés portant du texte courant */
  --violet-profond: #834894;  /* base grainée portant du texte courant : rendue
                                 vers #9955A7, soit 4,95:1 avec du blanc */
  --violet-encre:   #6B3A7A;  /* texte violet sur crème, pied de page */
  --violet-survol:  #7C4490;
  --lavande:        #C9A6EA;
  --lavande-encre:  #3F2350;
  --violet-pale:    #E6D6F2;

  /* Couleur secondaire de la marque. Elle ne porte JAMAIS de texte blanc
     (1,61:1) : sur abricot, on écrit toujours en encre (9,14:1). */
  --abricot:        #FCC08F;
  --abricot-survol: #F8AE70;

  --peche:          #FBD9C9;  /* le même registre, en plus dilué */
  --peche-encre:    #8A3A1C;
  --corail:         #E5654D;  /* décor, illustrations */
  --corail-fonce:   #C9452C;  /* dès qu'il y a du texte blanc dessus */
  --corail-survol:  #B23B24;
  --soleil:         #F7B22D;
  --bleu:           #3D6C9D;
  --erreur:         #A32E1A;

  --encre:          #2E2723;  /* le noir chaud des visuels, jamais #000 */
  --encre-douce:    #6F625A;

  /* ── Typographie ───────────────────────────────────────────────────── */
  --display: "Baloo 2", "Fredoka", system-ui, cursive;
  --titre:   "Fredoka", "Baloo 2", system-ui, sans-serif;
  --corps:   "Quicksand", system-ui, -apple-system, sans-serif;

  /* ── Rythme ────────────────────────────────────────────────────────── */
  --rayon-carte:  28px;
  --rayon-grand:  36px;
  --largeur:      1120px;
  --largeur-texte: 62ch;

  --ombre-carte:  0 18px 44px rgba(46, 39, 35, .13);
  --ombre-ruban:  0 4px 14px rgba(46, 39, 35, .10);
}

/* ── Le grain ────────────────────────────────────────────────────────────
   Une nappe de bruit fractal SVG, rendue OPAQUE par la matrice de couleur
   puis étirée en contraste par le transfert linéaire (slope 3). Sans ces
   deux étapes, feTurbulence produit un bruit sur le canal alpha, presque
   invisible une fois composité : mesuré, on passe d'un écart-type de 2,3
   à 11,7 sur 255. C'est ce qui donne la matière « papier » de la marque. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ═══ Structure ═════════════════════════════════════════════════════════ */

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section { padding-block: clamp(56px, 9vw, 112px); }
/* Modificateurs de rythme : sans eux, toutes les sections font la même
   hauteur et la page se lit comme un métronome. */
.section--serree { padding-block: clamp(32px, 5vw, 56px); }
.section--ample  { padding-block: clamp(88px, 13vw, 168px); }

.section--creme  { background: var(--creme); }
.section--clair  { background: var(--creme-clair); }

/* Section violette texturée : le fond de marque. */
.section--violet {
  position: relative;
  isolation: isolate;
  background-color: var(--violet-graine);
  color: #fff;
}
.section--violet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .45;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* LA RÈGLE DU VIOLET, à ne pas contourner.
   Le violet de la marque rendu à l'écran donne 3,6:1 avec du blanc. C'est
   conforme pour du GRAND texte (titres ≥ 24 px, ou ≥ 19 px en gras), et
   insuffisant pour du texte courant.
   Ce n'est pas une contrainte subie : les carrousels font déjà exactement ça,
   le texte courant y est presque toujours posé dans un ruban crème. Donc,
   sur un fond violet :
     — les titres et les accroches : en blanc, directement dessus ;
     — tout le reste : dans un .ruban crème ou dans un .cadre.
   .section--violet-profond n'existe que pour les rares blocs où du texte
   courant blanc doit vraiment tenir sur le violet. */
.section--violet-profond { background-color: var(--violet-profond); }

/* Le crème aussi porte le grain : c'est la surface dominante de la charte,
   un aplat lisse la trahit autant qu'un violet lisse. */
.section--creme, .section--clair, .cadre { position: relative; isolation: isolate; }
.section--creme::before, .section--clair::before, .cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.cadre::before { border-radius: var(--rayon-grand); }

/* ═══ Typographie ═══════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1.2em; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

a { color: var(--violet-encre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.section--violet a, .section--violet-profond a { color: #fff; }
/* …sauf à l'intérieur d'une carte crème posée sur le violet : là, le fond
   redevient clair et le blanc deviendrait illisible (1,16:1 mesuré). */
.cadre a:not(.bouton), .carte a:not(.bouton) { color: var(--violet-encre); }

/* Le très gros chiffre / mot d'accroche, comme la couverture des carrousels. */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 15vw, 9rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
}

.display--capitales {
  text-transform: uppercase;
  font-size: clamp(2.2rem, 7.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: .01em;
}

/* Le prix, sur la page de vente : il doit écraser tout le reste. */
.prix {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  line-height: 1;
  color: var(--encre);
  margin: .1em 0 .3em;
  display: block;
}

.chapo {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  max-width: 56ch;
}

/* Titre de rang secondaire, pour les pages qui enchaînent les clauses.
   La pastille est LE marqueur de titre fort de la marque : posée vingt fois
   de suite sur « 1. Vendeur », elle devient une puce de liste et ne signifie
   plus rien. Ici, un titre nu, violet encre, calé sur le corps de texte. */
.titre-clause {
  font-size: 1.35rem;
  color: var(--violet-encre);
  margin-bottom: .45em;
}
.section--violet .titre-clause,
.section--violet-profond .titre-clause { color: #fff; }
.cadre .titre-clause, .carte .titre-clause { color: var(--violet-encre); }

/* ═══ Le ruban ══════════════════════════════════════════════════════════
   LA signature de la marque : un fond qui épouse chaque ligne de texte et
   se recoupe en boîtes arrondies. `box-decoration-break: clone` fait tout
   le travail. Les mesures : Baloo 2 peint 1,59 em de haut, Quicksand 1,25 —
   d'où un interlignage de 2 et un padding vertical serré, sans quoi les
   fragments se chevauchent de 7 px. Le rayon est en em, sinon un gros ruban
   devient un rectangle. */

.ruban {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .16em .55em;
  border-radius: .30em;
  background: var(--creme);
  color: var(--encre);
  box-shadow: var(--ombre-ruban);
}
.porte-ruban { line-height: 2; }
.porte-ruban.display, .porte-ruban .display { line-height: 1.9; }
.ruban.display { padding-block: .06em; border-radius: .22em; }

.ruban--violet  { background: var(--violet-fonce); color: #fff; box-shadow: none; }
.ruban--blanc   { background: var(--blanc); color: var(--violet-encre); }
.ruban--abricot { background: var(--abricot); color: var(--encre); box-shadow: none; }
.ruban--peche   { background: var(--peche); color: var(--peche-encre); box-shadow: none; }

/* ═══ La pastille ═══════════════════════════════════════════════════════
   Le bandeau de titre à bouts ronds. Il porte le violet de marque : les
   pastilles sont toujours des titres, donc du grand texte, où 3,45:1 suffit. */

.pastille {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--titre);
  font-weight: 600;
  background: var(--violet);
  color: #fff;
  padding: .26em .8em;
  border-radius: 999px;
}
h1.porte-pastille, h2.porte-pastille, h3.porte-pastille { line-height: 2.05; }

/* ═══ Cartes ════════════════════════════════════════════════════════════ */

.carte {
  background: var(--blanc);
  /* Sans cette couleur, une carte posée dans une section violette hérite du
     blanc et donne du blanc sur blanc. Or « les cartes crème sur le violet »
     sont un des quatre signes de la marque : le cas se présentera. */
  color: var(--encre);
  border: 1.5px solid var(--creme-ligne);
  border-radius: var(--rayon-carte);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--ombre-carte);
}
.carte--creme { background: var(--creme); }
.carte--plate { box-shadow: none; }

/* La grande carte crème posée sur le violet, avec sa marge violette visible
   tout autour — la mise en page des slides 2 et 5. */
.cadre {
  background: var(--creme);
  border-radius: var(--rayon-grand);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--ombre-carte);
  color: var(--encre);
}

.grille { display: grid; gap: clamp(18px, 2.5vw, 28px); }
/* Sans ça, une cellule qui contient un objet large (le tableau de la page
   confidentialité) se cale sur la largeur mini de cet objet : c'est alors la
   page entière qui déborde, au lieu du seul conteneur à défilement. */
.grille > * { min-width: 0; }
@media (min-width: 700px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

/* ═══ Le schéma en cascade ══════════════════════════════════════════════ */

.flux { display: grid; gap: 0; margin: 32px 0; max-width: 760px; list-style: none; padding: 0; }
.flux__etape {
  font-family: var(--titre);
  font-weight: 600;
  text-align: center;
  padding: 16px 24px;
  border-radius: 999px;
}
.flux__etape--1 { background: var(--violet-fonce); color: #fff; }
.flux__etape--2 { background: var(--lavande);      color: var(--lavande-encre); }
.flux__etape--3 { background: var(--abricot);      color: var(--encre); }
.flux__fleche {
  text-align: center;
  color: var(--violet-encre);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  padding: 8px 0;
}
.section--violet .flux__fleche { color: #fff; }
.cadre .flux__fleche { color: var(--violet-encre); }

/* ═══ Liste à émojis ════════════════════════════════════════════════════
   En bloc avec puce absolue, PAS en grille : une grille casse tout <li>
   contenant une balise inline (le texte après un <strong> repart dans la
   colonne de l'émoji, large de 2 em). Mesuré : des <li> de 700 px de haut. */

.liste-emoji { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 18px; }
.liste-emoji li {
  display: block;
  position: relative;
  padding-left: 2.7em;
  max-width: var(--largeur-texte);
}
.liste-emoji li::before {
  /* le « / "" » empêche les lecteurs d'écran d'énoncer « plant seedling » */
  content: attr(data-emoji) / "";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.35em;
  line-height: 1.25;
}

/* ═══ Boutons ═══════════════════════════════════════════════════════════ */

.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  padding: 17px 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.bouton:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(46, 39, 35, .20); }
.bouton:active { transform: translateY(0); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .85; cursor: wait; transform: none; }

.bouton--principal  { background: var(--corail-fonce); color: #fff; }
.bouton--principal:hover { background: var(--corail-survol); }
.bouton--violet     { background: var(--violet-fonce); color: #fff; }
.bouton--violet:hover { background: var(--violet-survol); }
.bouton--abricot    { background: var(--abricot); color: var(--encre); }
.bouton--abricot:hover { background: var(--abricot-survol); }
.bouton--creme      { background: var(--creme); color: var(--violet-encre); }
.bouton--fantome    { background: transparent; color: var(--violet-encre);
                      box-shadow: inset 0 0 0 2.5px var(--violet-fonce); }
.section--violet .bouton--fantome,
.section--violet-profond .bouton--fantome { color: #fff; box-shadow: inset 0 0 0 2.5px #fff; }

/* Le corail et le violet ont presque la même luminance (1,13:1 de surface) :
   sur fond violet, le bouton principal a besoin d'un liseré pour exister. */
.section--violet   > .contenu .bouton--principal,
.section--violet-profond > .contenu .bouton--principal { box-shadow: 0 0 0 3px var(--creme); }

/* Un lien-bouton dans une carte claire garde sa couleur de bouton.
   Sans ces deux règles, `.section--violet a { color: #fff }` (0-1-1) l'emporte
   sur `.bouton--creme` / `.bouton--abricot` (0-1-0) : mesuré, du blanc sur
   abricot donne 1,61:1. Sur abricot, on écrit toujours en encre. */
.section--violet a.bouton--creme,
.section--violet-profond a.bouton--creme { color: var(--violet-encre); }
.section--violet a.bouton--abricot,
.section--violet-profond a.bouton--abricot { color: var(--encre); }

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

/* Prise de focus visible sur les deux fonds, y compris dans une carte
   crème posée sur le violet (là, un anneau blanc donnerait 1,16:1). */
:focus-visible {
  outline: 3px solid var(--violet-encre);
  outline-offset: 3px;
  border-radius: 8px;
}
/* .pied est violet sans être .section--violet : sans lui, l'anneau de focus y
   est violet encre sur violet, soit 1,25:1 — invisible au clavier. */
.section--violet :focus-visible,
.section--violet-profond :focus-visible,
.pied :focus-visible { outline-color: #fff; }
.section--violet .cadre :focus-visible,
.section--violet-profond .cadre :focus-visible,
.section--violet .carte :focus-visible,
.section--violet-profond .carte :focus-visible { outline-color: var(--violet-encre); }

/* ═══ Formulaire de capture ═════════════════════════════════════════════ */

.capture { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.capture input[type="email"],
.capture input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--corps);
  font-weight: 500;
  font-size: 1rem;
  padding: 16px 22px;
  /* la bordure crème d'origine donnait 1,41:1 : on ne voyait pas le champ */
  border: 2px solid var(--encre-douce);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
}
.capture input::placeholder { color: var(--encre-douce); opacity: 1; }
.capture input:focus { border-color: var(--violet-encre); }
.capture input[aria-invalid="true"] { border-color: var(--erreur); }

.capture__note { font-size: .9rem; color: var(--encre-douce); margin-top: 14px; }
.section--violet > .contenu > .capture__note,
.section--violet-profond > .contenu > .capture__note { color: #fff; }
.cadre .capture__note, .carte .capture__note { color: var(--encre-douce); }

.capture__message { margin-top: 14px; font-weight: 700; min-height: 1.7em; }
.capture__message[data-etat="ok"]     { color: var(--violet-encre); }
.capture__message[data-etat="erreur"] { color: var(--erreur); }

/* Pot de miel anti-robots : invisible, jamais rempli par un humain. */
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* Étiquette lue par les lecteurs d'écran, invisible à l'œil. Un placeholder
   n'est pas une étiquette : il disparaît dès qu'on tape. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lien d'évitement, visible seulement au clavier. */
.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--creme); color: var(--violet-encre);
  padding: 12px 22px; border-radius: 999px; font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.lien-evitement:focus { top: 12px; }

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

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  flex-wrap: wrap;
}
.entete__logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: .01em;
  text-decoration: none;
  color: inherit;
}
.entete__nav { display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; }
/* 19,2 px en gras : au-dessus du seuil « grand texte » de 18,66 px, donc les
   liens blancs tiennent sur le violet de marque (3,6:1 ≥ 3). C'est ce qui
   permet à l'en-tête d'être du MÊME violet que le héros, au lieu d'une bande
   plus sombre qui faisait une marche visible en haut de chaque page. */
.entete__nav a {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.entete__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ═══ Pied de page ══════════════════════════════════════════════════════
   Volontairement plus sombre que les sections violettes : sinon il se colle
   au bloc précédent et on ne voit plus où la page se termine. */

.pied {
  position: relative;
  isolation: isolate;
  background-color: var(--violet-encre);
  color: #fff;
  padding-block: 56px 40px;
}
.pied::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .45; mix-blend-mode: overlay; pointer-events: none;
}
.pied a { color: #fff; }
.pied__legal { font-size: .92rem; margin-top: 26px; }

/* ═══ Décor ═════════════════════════════════════════════════════════════
   Les gribouillis des visuels : soleil, avion en papier. Purement
   décoratifs, toujours posés en aria-hidden. */

.porte-decor { position: relative; }
.decor { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.decor--soleil { color: var(--soleil); }
.decor--avion  { color: var(--creme); }
@media (max-width: 820px) { .decor { display: none; } }

.bloc-image {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}
.bloc-image img { display: block; width: 100%; height: auto; }

.filet-pointille { border: 0; border-top: 3px dashed var(--creme-ligne); margin: 40px 0; }

/* ═══ Tableau ═══════════════════════════════════════════════════════════
   Le seul tableau du site (page confidentialité). Sans ce composant, il est
   le seul objet à angles droits de toute la marque. */

.tableau-cadre { overflow-x: auto; border-radius: var(--rayon-carte); }
.tableau {
  width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0;
  background: var(--blanc); border-radius: var(--rayon-carte); overflow: hidden;
}
.tableau th, .tableau td { text-align: left; padding: 14px 18px; vertical-align: top; }
.tableau thead th { background: var(--violet-pale); color: var(--violet-encre); font-family: var(--titre); }
.tableau tbody tr + tr td { border-top: 1px solid var(--creme-ligne); }

/* ═══ Réglages fins ═════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .entete { padding-block: 16px; }
  .bouton { display: block; width: 100%; }
  .groupe-boutons { display: grid; gap: 12px; }
}

.ruban, .pastille { overflow-wrap: break-word; }

/* ═══════════════════════════════════════════════════════════════════════
   TUNNEL DE VENTE — page /ebook
   Construit sans compte à rebours, sans ancrage de prix barré, sans
   témoignage et sans « plus que X places ». Trois de ces quatre leviers
   sont juridiquement risqués pour un professionnel de santé, et le
   quatrième est exactement ce dont ce public se méfie. On convertit
   autrement : par la preuve (des pages réelles du livre) et par la
   franchise (dire aussi à qui ce n'est pas destiné).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barre d'achat collante, mobile d'abord ─────────────────────────── */
.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--creme);
  border-top: 2px solid var(--creme-ligne);
  padding: 10px clamp(14px, 4vw, 24px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transform: translateY(110%);
  transition: transform .25s ease;
  box-shadow: 0 -8px 24px rgba(46, 39, 35, .12);
}
.barre-achat[data-visible="true"] { transform: translateY(0); }
.barre-achat__texte { font-family: var(--titre); font-weight: 600; line-height: 1.25; }
.barre-achat__texte small { display: block; font-family: var(--corps); font-size: .82rem; color: var(--encre-douce); font-weight: 500; }
.barre-achat .bouton { padding: 13px 26px; white-space: nowrap; }
@media (max-width: 640px) {
  .barre-achat { padding: 9px 14px; }
  .barre-achat .bouton { display: inline-block; width: auto; padding: 12px 20px; font-size: .95rem; }
  .barre-achat__texte { font-size: .95rem; }
  .barre-achat__texte small { display: none; }
}
body:has(.barre-achat) { padding-bottom: 0; }

/* ── Marqueurs de crédibilité sous le héros ───────────────────────────
   En pastilles crème, et non en blanc sur le violet : le descriptif est du
   texte courant à 14,7 px, or le violet de marque RENDU (grain compris,
   #A974B1) ne donne que 3,6:1 avec du blanc. Sur crème, on est à 12:1 —
   et c'est la solution que les carrousels emploient déjà. */
.preuves { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.preuves div {
  flex: 1 1 200px; max-width: 27ch;
  background: var(--creme); color: var(--encre);
  border-radius: 18px; padding: 14px 18px;
  box-shadow: var(--ombre-ruban);
}
.preuves strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.3rem; line-height: 1.15; color: var(--violet-encre);
}
.preuves span { font-size: .92rem; line-height: 1.45; display: block; margin-top: 2px; }

/* ── Le miroir : les situations où la lectrice se reconnaît ─────────── */
.miroir { display: grid; gap: 14px; margin: 28px 0; }
@media (min-width: 760px) { .miroir { grid-template-columns: 1fr 1fr; } }
.miroir li {
  list-style: none;
  background: var(--blanc);
  border: 1.5px solid var(--creme-ligne);
  border-left: 5px solid var(--abricot);
  border-radius: 16px;
  padding: 16px 20px;
}

/* ── Aperçu du livre : de vraies pages, pas des mockups ─────────────── */
.apercu { display: grid; gap: clamp(16px, 3vw, 26px); margin: 30px 0; }
@media (min-width: 700px)  { .apercu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .apercu { grid-template-columns: repeat(3, 1fr); } }
.apercu figure { margin: 0; }
.apercu img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  border: 1.5px solid var(--creme-ligne);
  box-shadow: 0 14px 34px rgba(46, 39, 35, .16);
}
.apercu figcaption {
  margin-top: 10px; font-size: .93rem; color: var(--encre-douce);
  font-family: var(--titre); font-weight: 500;
}
.section--violet .apercu figcaption,
.section--violet-profond .apercu figcaption { color: rgba(255,255,255,.94); }

/* ── Ce que tu reçois : les livrables, comptés ──────────────────────── */
.livrables { display: grid; gap: 14px; margin: 26px 0; }
@media (min-width: 760px) { .livrables { grid-template-columns: 1fr 1fr; } }
.livrable {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--blanc);
  border: 1.5px solid var(--creme-ligne);
  border-radius: 16px; padding: 18px 20px;
}
.livrable__nombre {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem;
  color: var(--violet); line-height: 1; min-width: 2.2ch;
}
.livrable h3 { font-size: 1.05rem; margin: 0 0 4px; }
.livrable p { font-size: .95rem; margin: 0; color: var(--encre-douce); }

/* ── Pour qui / pas pour qui ────────────────────────────────────────── */
.pourqui { display: grid; gap: 18px; margin: 26px 0; }
@media (min-width: 800px) { .pourqui { grid-template-columns: 1fr 1fr; } }
.pourqui > div { border-radius: 20px; padding: 24px 26px; }
.pourqui__oui { background: var(--creme); border-top: 6px solid var(--violet); }
.pourqui__non { background: var(--creme); border-top: 6px solid var(--abricot); }
.pourqui h3 { margin-top: 0; }
.pourqui ul { margin: 0; padding-left: 1.15em; }
.pourqui li { margin-bottom: 8px; }

/* ── Le bloc prix ───────────────────────────────────────────────────── */
.prix-bloc { text-align: center; }
.prix-bloc__montant {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 5.6rem); line-height: 1;
  color: var(--encre); margin: .12em 0 .1em; display: block;
}
.prix-bloc__mention { font-size: .95rem; color: var(--encre-douce); }
.prix-bloc__rassurance {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 18px 0 22px; font-size: .95rem; font-family: var(--titre); font-weight: 500;
}
.prix-bloc__rassurance span { display: inline-flex; align-items: center; gap: 7px; }

/* ── FAQ dépliable ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; margin: 26px 0; }
.faq details {
  background: var(--blanc);
  border: 1.5px solid var(--creme-ligne);
  border-radius: 16px;
  padding: 4px 22px;
}
.faq summary {
  font-family: var(--titre); font-weight: 600; font-size: 1.08rem;
  padding: 16px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; color: var(--violet); line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { padding-bottom: 8px; }
.faq p:last-child { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   ESPACE D'ADMINISTRATION — /admin
   Sobre : ce n'est pas une vitrine, c'est un outil qu'on ouvre entre deux
   consultations, souvent sur un téléphone. On garde la charte pour ne pas
   dépayser, mais on privilégie la densité à la respiration.
   ═══════════════════════════════════════════════════════════════════════ */

.admin { background: var(--creme-clair); min-height: 100vh; }

.admin__barre {
  position: sticky; top: 0; z-index: 20;
  background: var(--violet-encre); color: #fff;
  padding: 12px clamp(14px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.admin__titre { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.admin__barre a, .admin__barre button {
  font-family: var(--titre); font-weight: 600; font-size: .92rem;
  color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.45);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; text-decoration: none;
}
.admin__barre button:hover, .admin__barre a:hover { background: rgba(255,255,255,.14); }

.admin__corps { padding: clamp(18px, 4vw, 34px); max-width: 1280px; margin-inline: auto; }

/* Les chiffres qui comptent, en haut */
.chiffres { display: grid; gap: 12px; margin-bottom: 26px;
            grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.chiffre {
  background: var(--blanc); border: 1.5px solid var(--creme-ligne);
  border-radius: 16px; padding: 14px 18px;
}
.chiffre strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; line-height: 1.05; color: var(--violet-encre);
}
.chiffre span { font-size: .86rem; color: var(--encre-douce); }
.chiffre--alerte { border-color: var(--corail-fonce); }
.chiffre--alerte strong { color: var(--corail-fonce); }

/* Onglets */
.onglets { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.onglets button {
  font-family: var(--titre); font-weight: 600; font-size: .95rem;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--creme-ligne); background: var(--blanc); color: var(--encre);
}
.onglets button[aria-selected="true"] {
  background: var(--violet-encre); color: #fff; border-color: var(--violet-encre);
}

.admin__outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.admin__outils input[type="search"] {
  flex: 1 1 220px; min-width: 0; font-family: var(--corps); font-size: .98rem;
  padding: 10px 18px; border: 2px solid var(--encre-douce);
  border-radius: 999px; background: var(--blanc); color: var(--encre);
}
.admin__outils a.bouton, .admin__outils button.bouton { padding: 10px 20px; font-size: .92rem; }

/* Le tableau, qui devient des cartes sur téléphone */
.tableau-admin { width: 100%; border-collapse: collapse; background: var(--blanc);
                 border-radius: 16px; overflow: hidden; font-size: .95rem; }
.tableau-admin th {
  text-align: left; font-family: var(--titre); font-weight: 600; font-size: .86rem;
  background: var(--violet-pale); color: var(--violet-encre); padding: 11px 14px;
  white-space: nowrap;
}
.tableau-admin td { padding: 11px 14px; border-top: 1px solid var(--creme-ligne); vertical-align: top; }
.tableau-admin tr:hover td { background: var(--creme); }
.tableau-admin .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.etiq { display: inline-block; font-size: .78rem; font-family: var(--titre); font-weight: 600;
        padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.etiq--client   { background: var(--violet-pale); color: var(--violet-encre); }
.etiq--actif    { background: #E4F0E4; color: #2F6B3A; }
.etiq--parti    { background: #ECE7E0; color: #6B625C; }
.etiq--attente  { background: var(--peche); color: var(--peche-encre); }

.admin__vide { padding: 40px 20px; text-align: center; color: var(--encre-douce); }

@media (max-width: 720px) {
  .tableau-admin thead { display: none; }
  .tableau-admin, .tableau-admin tbody, .tableau-admin tr, .tableau-admin td { display: block; width: 100%; }
  .tableau-admin tr { border-bottom: 2px solid var(--creme-ligne); padding: 6px 0; }
  .tableau-admin td { border: 0; padding: 5px 14px; }
  .tableau-admin td::before {
    content: attr(data-col); display: block;
    font-family: var(--titre); font-size: .74rem; font-weight: 600;
    color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em;
  }
  .tableau-admin .num { text-align: left; }
}

/* Page de connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.connexion form { width: 100%; max-width: 380px; }
.connexion input[type="password"] {
  width: 100%; font-family: var(--corps); font-size: 1rem; padding: 15px 20px;
  border: 2px solid var(--encre-douce); border-radius: 999px;
  background: var(--blanc); color: var(--encre); margin-bottom: 12px;
}
.connexion .bouton { width: 100%; }
.connexion__erreur { color: var(--erreur); font-weight: 700; margin-top: 12px; min-height: 1.6em; }