/* ============================================================================
   DANS LA TÊTE DE MON ENFANT — Système de design v4
   ----------------------------------------------------------------------------
   Direction artistique reprise de l'identité réelle du guide (couvertures,
   pages intérieures, photographies) : papier crème chaud, encre bleu pétrole,
   accent terracotta, respiration sauge. Mobile-first.

   Sommaire
   01. Jetons (couleurs, typo, espacement, rayons, ombres, durées)
   02. Base & typographie
   03. Mise en page (container, sections, grilles)
   04. Boutons & liens
   05. En-tête, navigation, bandeau
   06. Signature « Le double regard »
   07. Produit (pile de livrets, aperçus)
   08. Modules, âges, bonus
   09. Offre, prix, garantie
   10. Avis, FAQ, CTA final, pied de page
   11. Pages secondaires (module, pack, extrait)
   12. Chrome flottant (barre d'achat, retour haut, progression)
   13. Mouvement & accessibilité
   ========================================================================== */

/* ── 01. JETONS ─────────────────────────────────────────────────────────── */
:root{
  /* Papier & encre */
  --paper:#FDF7F2;
  --paper-alt:#F7EBE2;
  --paper-deep:#F1E2D6;
  --surface:#FFFFFF;
  --ink:#22414F;
  /* Ces deux teintes sont calées pour rester ≥ 4,5:1 sur le papier ET sur le
     papier alternatif, y compris en petit corps (12,5 px). */
  --ink-soft:#46606E;
  --ink-faint:#536C7A;
  --line:#EADCD0;
  --line-strong:#DCC8B8;

  /* Marque */
  --brand:#234454;
  --brand-deep:#16303C;
  --terra:#B5563A;
  --terra-deep:#93412A;
  --terra-tint:#FAE3D8;
  --sage:#6E8C77;
  --sage-ink:#4A6952;
  --sage-tint:#E6EDE6;
  --sky:#CBDCE6;

  /* Couleurs de module */
  --m1:#B5563A;
  --m2:#4A6952;
  --m3:#2F5D77;
  --m4:#9A6B2F;

  /* Alias hérités : les pages non refondues continuent de fonctionner */
  --coral:var(--terra);
  --coral-dark:var(--terra-deep);
  --coral-tint:var(--terra-tint);
  --plum:var(--brand);
  --plum-light:var(--m3);
  --mint:var(--sage-ink);
  --mint-tint:var(--sage-tint);
  --indigo:var(--m3);
  --gold:#C08A2E;

  /* Typographie */
  --serif:'Fraunces','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Aucun texte ne descend sous 13 px : c'est le plancher de lisibilité
     retenu pour la lecture au téléphone, à bout de bras, le soir. */
  --fs-xs:.8125rem;
  --fs-sm:.9rem;
  --fs-base:1rem;
  --fs-md:1.06rem;
  --fs-lg:clamp(1.06rem,1rem + .35vw,1.28rem);
  --fs-h3:clamp(1.14rem,1.04rem + .45vw,1.32rem);
  --fs-h2:clamp(1.54rem,1.3rem + 1.25vw,2.32rem);
  /* Le H1 mobile est volontairement retenu : un titre qui remplit l'écran
     repousse le produit et le bouton sous la ligne de flottaison. */
  --fs-h1:clamp(1.82rem,1.48rem + 1.9vw,3.15rem);
  --fs-display:clamp(2.1rem,1.6rem + 2.6vw,3.9rem);

  /* Espacement — une seule échelle, partout */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --section-y:clamp(52px,6.4vw,104px);
  --gutter:20px;
  --header-h:60px;
  --maxw:1160px;
  --maxw-text:64ch;

  /* Formes & profondeur */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(34,65,79,.05), 0 2px 8px -4px rgba(34,65,79,.10);
  --sh-2:0 2px 4px rgba(34,65,79,.04), 0 12px 26px -16px rgba(34,65,79,.22);
  --sh-3:0 4px 8px rgba(34,65,79,.05), 0 28px 52px -28px rgba(34,65,79,.34);

  /* Mouvement */
  --ease:cubic-bezier(.22,.9,.28,1);
  --t-fast:.16s;
  --t-med:.28s;
  --t-slow:.6s;
}

/* ── 02. BASE & TYPOGRAPHIE ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(181,86,58,.12);
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block;}
img{height:auto;}
/* <picture> sert le WebP avec repli JPEG : il ne doit rien changer au flux. */
picture{display:block;}
.mod-card .cover picture{height:100%;}
a{color:inherit;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer;}
p{margin:0; text-wrap:pretty;}
/* Une adresse e-mail ou une URL longue ne doit jamais élargir la page :
   sur un écran de 320 px, elle se coupe plutôt que de déborder. */
a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere;}
strong,b{font-weight:700;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1); line-height:1.08;}
h2{font-size:var(--fs-h2); line-height:1.12;}
h3{font-size:var(--fs-h3); line-height:1.22; letter-spacing:-.012em;}
h4{font-size:var(--fs-base); line-height:1.3;}

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terra-deep);
}
.eyebrow--quiet{color:var(--ink-faint);}
.lede{
  font-size:var(--fs-lg);
  color:var(--ink-soft);
  line-height:1.6;
  max-width:52ch;
  text-wrap:pretty;
}
.muted{color:var(--ink-soft);}
.fine{font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.5;}
.fine a{display:inline-block; padding-block:12px;}
.prose{max-width:var(--maxw-text); color:var(--ink-soft);}
.prose p + p{margin-top:var(--sp-4);}
.nowrap{white-space:nowrap;}

/* Le trait tracé à la main sous le mot-clé du titre : signature typographique */
.mark{position:relative; display:inline-block; color:var(--terra-deep);}
.mark::after{
  content:''; position:absolute; left:-.06em; right:-.06em; bottom:.04em; height:.30em;
  background:linear-gradient(100deg,rgba(181,86,58,.22),rgba(192,138,46,.26));
  border-radius:.4em .8em .5em .6em; z-index:-1;
  transform:scaleX(0); transform-origin:left center;
  animation:markIn .9s .3s var(--ease) forwards;
}
@keyframes markIn{to{transform:scaleX(1);}}

/* ── 03. MISE EN PAGE ───────────────────────────────────────────────────── */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.container--narrow{max-width:820px;}
@media (min-width:640px){ :root{--gutter:28px;} }
@media (min-width:1080px){ :root{--gutter:32px;} }
/* Les blocs qui doivent filer d'un bord à l'autre du téléphone (carrousels)
   annulent la gouttière puis la restituent en padding interne. */
.bleed{margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);}
@media (min-width:720px){ .bleed{margin-inline:0; padding-inline:0;} }

.section{padding-block:var(--section-y);}
.section--tight{padding-block:calc(var(--section-y) * .62);}
.section--alt{background:var(--paper-alt);}
.section--brand{background:var(--brand); color:#fff;}
.section--brand h2,.section--brand h3{color:#fff;}

.sec-head{max-width:44ch; margin-bottom:var(--sp-6);}
.sec-head--center{margin-inline:auto; text-align:center;}
.sec-head h2{margin-top:var(--sp-3);}
.sec-head p{margin-top:var(--sp-3); color:var(--ink-soft);}
.section--brand .sec-head p{color:#CBD9E0;}
.section--brand .eyebrow{color:#E8B79F;}

.grid{display:grid; gap:var(--sp-5);}

/* Le hero a son propre gabarit : sur téléphone, la pile suit l'ordre de
   lecture (accroche, promesse, produit, action, gages) ; sur grand écran,
   texte et action reviennent à gauche, le produit occupe la colonne droite. */
.hero{display:grid; gap:var(--sp-5);}
.hero-visual{margin-block:calc(var(--sp-2) * -1);}
@media (min-width:860px){
  .hero{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"copy visual" "actions visual";
    align-content:center; align-items:center;
    column-gap:var(--sp-7); row-gap:var(--sp-5);
  }
  .hero-copy{grid-area:copy; align-self:end;}
  .hero-actions{grid-area:actions; align-self:start;}
  .hero-visual{grid-area:visual; margin-block:0;}
}
/* Les gages du hero : une colonne lisible au téléphone, une ligne dès qu'il
   y a la place. Ils suivent le bouton, comme le demande la hiérarchie
   problème → promesse → action → preuve. */
.hero-proof{display:flex; flex-direction:column; gap:9px; margin-top:var(--sp-4);}
.hero-proof li{display:flex; gap:9px; align-items:center;}
.hero-proof svg{flex:none;}
@media (min-width:560px){
  .hero-proof{flex-direction:row; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-5);}
}
@media (min-width:860px){
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--split{grid-template-columns:1.05fr .95fr; align-items:center; gap:var(--sp-7);}
}
@media (min-width:760px){ .grid--4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .grid--4{grid-template-columns:repeat(4,1fr);} }

/* ── 04. BOUTONS ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  border:1.5px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:var(--fs-base); line-height:1.2;
  text-decoration:none; text-align:center;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
             box-shadow var(--t-med) var(--ease);
}
.btn svg{flex:none;}
.btn-primary{background:var(--terra); color:#fff; box-shadow:var(--sh-2);}
.btn-primary:hover{background:var(--terra-deep); box-shadow:var(--sh-3); transform:translateY(-1px);}
.btn-primary:active{transform:translateY(1px); box-shadow:var(--sh-1);}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--surface);}
.btn-ghost:hover{border-color:var(--ink); background:var(--ink); color:var(--paper);}
.btn-quiet{color:var(--ink-soft); padding-inline:8px; min-height:44px; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; text-decoration-color:var(--line-strong);}
.btn-quiet:hover{color:var(--terra-deep); text-decoration-color:currentColor;}
.btn-onbrand{background:#fff; color:var(--terra-deep);}
.btn-onbrand:hover{background:var(--terra-tint); color:var(--terra-deep); transform:translateY(-1px);}
.btn-lg{min-height:58px; padding:17px 30px; font-size:var(--fs-md);}
/* Sur mobile, le doigt ne survole pas : l'état actif est le seul retour. */
.btn:active{transform:translateY(1px);}
.btn-ghost:active,.btn-onbrand:active{filter:brightness(.97);}
.btn-block{display:flex; width:100%;}
@media (max-width:560px){ .btn{width:100%;} .btn--auto,.btn-quiet{width:auto;} }

.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;}
@media (max-width:520px){ .btn-row{flex-direction:column; align-items:stretch;} }

/* ── 05. EN-TÊTE ────────────────────────────────────────────────────────── */
.announce{
  display:block; background:var(--brand); color:#fff; text-align:center; text-decoration:none;
  padding:10px var(--sp-4); font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:40px;
}
@media (max-width:359px){ .announce .announce-long{display:none;} }
.announce b{color:#F0C08F;}
.announce:hover{background:var(--brand-deep);}

header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(253,247,242,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
/* Une fois la page entamée, l'en-tête se resserre et se détache du papier :
   il reste présent sans manger l'écran du téléphone. */
header.site.is-stuck{box-shadow:0 4px 18px -12px rgba(34,65,79,.45); background:rgba(253,247,242,.97);}
.nav-row{
  display:flex; align-items:center; gap:10px;
  max-width:var(--maxw); margin-inline:auto;
  padding:9px var(--gutter);
  transition:padding var(--t-med) var(--ease);
}
header.site.is-stuck .nav-row{padding-block:6px;}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; min-width:0; min-height:44px; padding-right:4px;}
.brand img{height:36px; width:36px; border-radius:50%; flex:none; transition:height var(--t-med) var(--ease), width var(--t-med) var(--ease);}
header.site.is-stuck .brand img{height:32px; width:32px;}
.brand span{font-family:var(--serif); font-weight:700; font-size:.98rem; line-height:1.15; letter-spacing:-.01em;}
@media (max-width:400px){ .brand span{font-size:.86rem;} .brand{gap:7px;} }

nav.links{display:none; gap:var(--sp-5); align-items:center;}
nav.links a{text-decoration:none; font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); padding:6px 0;}
nav.links a:hover{color:var(--terra-deep);}
.nav-cta{display:none;}
@media (min-width:940px){
  nav.links{display:flex;}
  .nav-cta{display:inline-flex; min-height:44px; padding:11px 22px; font-size:var(--fs-sm);}
  .burger{display:none !important;}
}

/* Bouton menu — 44px de zone tactile minimum */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  background:none; border:1.5px solid var(--line-strong); border-radius:12px; color:var(--ink);
}
.burger:hover{border-color:var(--ink);}
.burger .bx{display:block;}
.burger[aria-expanded="true"] .bx-open{display:none;}
.burger .bx-close{display:none;}
.burger[aria-expanded="true"] .bx-close{display:block;}

/* Prix toujours visible dans l'en-tête mobile : le visiteur sait ce que ça coûte */
.nav-price{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:44px; padding:8px 15px;
  background:var(--terra); color:#fff; border-radius:var(--r-pill);
  font-weight:700; font-size:var(--fs-sm); text-decoration:none;
  box-shadow:var(--sh-1);
}
.nav-price:hover{background:var(--terra-deep);}
@media (min-width:940px){ .nav-price{display:none;} }

.mobile-panel{
  display:none; flex-direction:column;
  padding:var(--sp-3) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line); background:var(--paper);
  max-height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:contain;
}
.mobile-panel.open{display:flex; animation:sheetIn .22s var(--ease) both;}
@keyframes sheetIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.mobile-panel a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:52px; padding:13px 2px; text-decoration:none; color:var(--ink);
  font-weight:600; border-bottom:1px solid var(--line);
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel a::after{content:'\203A'; color:var(--ink-faint); font-size:1.25rem; line-height:1;}
.mobile-panel .btn{margin-top:var(--sp-4); border-bottom:none; min-height:56px;}
.mobile-panel .btn::after{content:none;}
.mobile-panel .np-card::after{content:none;}
/* Le voile évite qu'un appui à côté du menu déclenche un lien de la page. */
.nav-scrim{
  position:fixed; inset:0; z-index:50; background:rgba(22,48,60,.38);
  opacity:0; visibility:hidden; transition:opacity var(--t-med) var(--ease), visibility var(--t-med);
}
body.menu-open .nav-scrim{opacity:1; visibility:visible;}
body.menu-open{overflow:hidden;}
@media (min-width:940px){ .mobile-panel{display:none !important;} .nav-scrim{display:none;} }

.mobile-preview-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); padding:var(--sp-2) 0 var(--sp-3);}
.mobile-preview-grid a{border-bottom:none; padding:0; min-height:0; display:block;}

/* Mega-menu d'aperçu (desktop uniquement) */
.nav-preview{position:relative; display:none;}
@media (min-width:940px){ .nav-preview{display:block;} }
.nav-preview > button{
  background:none; border:0; color:var(--ink-soft); font-weight:600; font-size:var(--fs-sm);
  display:flex; align-items:center; gap:6px; padding:6px 0;
}
.nav-preview > button:hover,.nav-preview.open > button{color:var(--terra-deep);}
.nav-preview > button svg{transition:transform var(--t-fast) var(--ease);}
.nav-preview.open > button svg{transform:rotate(180deg);}
.nav-preview-panel{
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:var(--sp-4);
  display:grid; grid-template-columns:repeat(5,136px); gap:var(--sp-2);
  opacity:0; visibility:hidden; z-index:200;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-preview:hover .nav-preview-panel,.nav-preview.open .nav-preview-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.np-card{
  display:block; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.np-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-strong);}
.np-card img{width:100%; height:72px; object-fit:cover;}
.np-card .lbl{display:block; padding:8px 10px 10px;}
.np-card .lbl b{display:block; font-size:var(--fs-xs); font-weight:700; line-height:1.25;}
.np-card .lbl small{display:block; font-weight:700; color:var(--terra-deep); margin-top:3px; font-size:var(--fs-xs);}
.np-card.np-pack{border-color:var(--brand);}
.np-card.np-pack .icon-wrap{background:var(--brand); height:72px; display:flex; align-items:center; justify-content:center; color:#fff;}
.mobile-preview-grid .np-card img,.mobile-preview-grid .np-card .icon-wrap{height:64px;}
/* Dans le menu du téléphone, ces libellés sont de vrais liens de navigation :
   ils reprennent la taille de texte minimale du site. */
.mobile-preview-grid .np-card .lbl{padding:9px 11px 11px;}
.mobile-preview-grid .np-card .lbl b{font-size:var(--fs-xs);}
.mobile-preview-grid .np-card .lbl small{font-size:var(--fs-xs);}

/* ── BANDEAU DE CONFIANCE ───────────────────────────────────────────────── */
.trust-strip{background:var(--brand); color:#fff; padding:var(--sp-5) 0;}
/* Sur téléphone, les quatre gages passent en grille 2×2 : tout est lu d'un
   coup d'œil, plutôt que de disparaître dans un défilement latéral muet. */
.trust-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-3) var(--sp-4); align-items:start;
}
.trust-row .t{display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-xs); font-weight:600; line-height:1.35;}
.trust-row svg{color:#F0C08F; flex:none; margin-top:1px;}
@media (min-width:560px){ .trust-row .t{font-size:var(--fs-sm);} }
@media (min-width:860px){
  .trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-5) var(--sp-6);}
  .trust-row .t{align-items:center; white-space:nowrap;}
  .trust-row svg{margin-top:0;}
}
@media (min-width:1080px){ .trust-row{gap:var(--sp-7);} }

/* ── 06. SIGNATURE : LE DOUBLE REGARD ───────────────────────────────────── */
/* Chaque carte tient les deux niveaux de lecture du guide : la scène telle
   qu'on la vit, puis ce qui se joue derrière. Une seule interaction, volontaire. */
.lens-grid{display:grid; gap:var(--sp-4);}
@media (min-width:820px){ .lens-grid{grid-template-columns:1fr 1fr; gap:var(--sp-5);} }

.lens{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.lens:hover{border-color:var(--line-strong); box-shadow:var(--sh-2);}
.lens.open{border-color:var(--terra); box-shadow:var(--sh-2);}
.lens-seen{padding:var(--sp-5) var(--sp-5) var(--sp-4);}
.lens-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.lens-tag::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--line-strong);}
.lens-quote{
  font-family:var(--serif); font-size:var(--fs-lg); font-style:italic; font-weight:500;
  line-height:1.4; color:var(--ink); margin-top:var(--sp-3);
}
.lens-btn{
  width:100%; min-height:52px; padding:14px var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--paper-alt); border:0; border-top:1px solid var(--line);
  font-weight:700; font-size:var(--fs-sm); color:var(--terra-deep); text-align:left;
  transition:background var(--t-fast) var(--ease);
}
.lens-btn:hover{background:var(--terra-tint);}
.lens-btn .chev{transition:transform var(--t-med) var(--ease); flex:none;}
.lens.open .lens-btn .chev{transform:rotate(90deg);}
.lens-real{max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--ease); background:var(--paper-alt);}
.lens-real-inner{position:relative; padding:var(--sp-2) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 14px);}
.lens-real-inner::before{
  content:''; position:absolute; left:var(--sp-5); top:var(--sp-3); bottom:var(--sp-5);
  width:2px; border-radius:2px; background:var(--terra);
  transform:scaleY(0); transform-origin:top; transition:transform .42s .06s var(--ease);
}
.lens.open .lens-real-inner::before{transform:scaleY(1);}
.lens-real p{color:var(--ink-soft); font-size:var(--fs-base);}
.lens-src{display:inline-block; margin-top:var(--sp-3); font-size:var(--fs-xs); font-weight:700; color:var(--ink-faint); letter-spacing:.04em;}

/* ── 07. PRODUIT ────────────────────────────────────────────────────────── */
/* Pile de livrets : les vraies couvertures, mises en scène en CSS. */
.book-stage{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  padding:var(--sp-5) 0 var(--sp-6);
}
@media (min-width:640px){ .book-stage{padding:var(--sp-6) 0 var(--sp-7);} }
.book-stage::after{
  content:''; position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:min(88%,420px); height:46px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(34,65,79,.20),transparent 70%);
  filter:blur(2px); z-index:0;
}
/* La rotation des couvertures élargit leur boîte englobante d'une trentaine de
   pixels de chaque côté : l'éventail ne prend que 86% de la colonne pour que
   les cartes inclinées ne débordent jamais, à aucune largeur. */
.book-fan{position:relative; z-index:1; width:min(86%,400px); aspect-ratio:1.42;}
.book-fan img{
  position:absolute; bottom:0; width:42%; border-radius:3px 8px 8px 3px;
  border:1px solid rgba(34,65,79,.10);
  box-shadow:0 18px 34px -20px rgba(34,65,79,.5), 0 2px 6px rgba(34,65,79,.10);
  transition:transform .5s var(--ease);
  background:var(--surface);
  transform-origin:bottom center;
}
.book-fan img:nth-child(1){left:1%;  transform:rotate(-10deg) translateY(4px); z-index:1;}
.book-fan img:nth-child(2){left:20%; transform:rotate(-3.5deg); z-index:2;}
.book-fan img:nth-child(3){left:39%; transform:rotate(3.5deg); z-index:3;}
.book-fan img:nth-child(4){left:57%; transform:rotate(10deg) translateY(4px); z-index:4;}
@media (max-width:639px){
  .book-fan{width:90%;}
  .book-fan img{width:48%;}
  .book-fan img:nth-child(1){left:0;    transform:rotate(-5deg) translateY(3px);}
  .book-fan img:nth-child(2){left:17.5%; transform:rotate(-1.8deg);}
  .book-fan img:nth-child(3){left:35%;  transform:rotate(1.8deg);}
  .book-fan img:nth-child(4){left:52%;  transform:rotate(5deg) translateY(3px);}
}
@media (hover:hover){
  .book-fan:hover img:nth-child(1){transform:rotate(-13deg) translateY(-2px);}
  .book-fan:hover img:nth-child(2){transform:rotate(-4.5deg) translateY(-7px);}
  .book-fan:hover img:nth-child(3){transform:rotate(4.5deg) translateY(-7px);}
  .book-fan:hover img:nth-child(4){transform:rotate(13deg) translateY(-2px);}
}
.book-caption{text-align:center; font-size:var(--fs-xs); color:var(--ink-faint); margin-top:calc(var(--sp-5) * -1);}

/* Aperçu de vraies pages intérieures */
.spread{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-2);
}
.spread img{width:100%;}
/* Une page A4 réduite à 390 px n'est plus lisible : sur téléphone on en
   montre le haut en grand, et l'appui ouvre la page entière. */
.spread--zoom{position:relative; display:block; width:100%; padding:0; border:0; background:var(--surface); text-align:left; cursor:zoom-in;}
@media (max-width:719px){
  .spread--zoom img{aspect-ratio:3/4; object-fit:cover; object-position:top center;}
}
.zoom-hint{
  position:absolute; right:var(--sp-3); top:var(--sp-3);
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(22,48,60,.78); color:#fff; backdrop-filter:blur(4px);
  font-size:var(--fs-xs); font-weight:700; padding:8px 13px; border-radius:var(--r-pill);
}
.spread--zoom:active .zoom-hint{background:var(--terra);}

/* Visionneuse plein écran : une seule image, un bouton de fermeture. */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(22,48,60,.94); padding:calc(var(--sp-6) + env(safe-area-inset-top,0px)) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  overflow:auto; overscroll-behavior:contain;
}
.lightbox.open{display:block; animation:fadeIn .18s var(--ease) both;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.lightbox img{width:100%; max-width:760px; margin-inline:auto; border-radius:var(--r-sm); background:#fff;}
.lightbox .lb-close{
  position:fixed; top:calc(var(--sp-3) + env(safe-area-inset-top,0px)); right:var(--sp-4);
  width:46px; height:46px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-close:hover{background:rgba(255,255,255,.26);}
.lightbox .lb-note{display:block; max-width:760px; margin:var(--sp-4) auto 0; color:#CBD9E0; font-size:var(--fs-xs); text-align:center;}
.spread-note{padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); color:var(--ink-faint); border-top:1px solid var(--line); background:var(--paper);}

.preview-strip{display:grid; grid-template-columns:1fr; gap:var(--sp-4);}
@media (min-width:640px){ .preview-strip{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .preview-strip{grid-template-columns:repeat(4,1fr);} }
.preview-item{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface);
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.preview-item:hover{transform:translateY(-4px); box-shadow:var(--sh-2);}
.preview-item img{width:100%;}
/* Une page A4 entière à la largeur d'un téléphone ne se lit plus : on en
   montre le haut, à une taille où les titres restent déchiffrables. */
@media (max-width:639px){
  .preview-item img{aspect-ratio:4/5; object-fit:cover; object-position:top center;}
}
.preview-item .lbl{padding:12px 14px; font-size:var(--fs-sm); font-weight:700;}

/* ── 08. MODULES, ÂGES, BONUS ───────────────────────────────────────────── */
/* Le fil des âges : le repère de lecture du guide, 0 → 6 ans. */
.age-rail{
  position:relative; display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-6); padding-bottom:var(--sp-4);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.age-rail::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--m1),var(--m2) 46%,var(--m3) 74%,var(--m4));
  opacity:.55;
}
.age-rail span{background:var(--paper); padding-right:var(--sp-3);}
.age-rail span + span{margin-left:auto; padding-right:0; padding-left:var(--sp-3);}
.section--alt .age-rail span{background:var(--paper-alt);}

.mod-grid{display:grid; gap:var(--sp-4);}
@media (max-width:719px){
  .mod-grid{
    display:flex; gap:var(--sp-3);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-block:4px var(--sp-2);
    scroll-padding-inline:var(--gutter);
  }
  .mod-grid::-webkit-scrollbar{display:none;}
  .mod-grid > .mod-card{flex:0 0 min(86%,330px); scroll-snap-align:center;}
  /* Une amorce de la carte suivante : le geste de glisser devient évident. */
  .mod-grid::after{content:''; flex:0 0 1px;}
}
@media (min-width:720px){ .mod-grid{grid-template-columns:1fr 1fr; gap:var(--sp-5);} }

/* Repères du rail : points de position + invite au geste, mobile seulement. */
.rail-hint{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin-top:var(--sp-3);
}
.rail-dots{display:flex; gap:2px;}
.rail-dots i{
  display:block; width:8px; height:8px; border-radius:50%; background:var(--line-strong);
  box-sizing:content-box; padding:10px 8px; background-clip:content-box;
  transition:background var(--t-med) var(--ease);
}
.rail-dots i.on{background-color:var(--terra);}
.rail-hint span{font-size:var(--fs-xs); color:var(--ink-faint); font-weight:600;}
@media (min-width:720px){ .rail-hint{display:none;} }

.mod-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.mod-card:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-strong);}
.mod-card .cover{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-alt);}
.mod-card .cover img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.mod-card:hover .cover img{transform:scale(1.04);}
.mod-card .num{
  position:absolute; top:var(--sp-3); left:var(--sp-3); z-index:2;
  min-width:38px; height:38px; padding:0 10px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent,var(--m1)); color:#fff;
  font-family:var(--serif); font-weight:700; font-size:.95rem;
  box-shadow:0 4px 12px -4px rgba(34,65,79,.5);
}
.mod-card .body{display:flex; flex-direction:column; flex:1; padding:var(--sp-4);}
@media (min-width:560px){ .mod-card .body{padding:var(--sp-5);} }
.mod-card:active{transform:translateY(1px);}
.mod-card .ages{font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent,var(--m1));}
.mod-card h3{margin:var(--sp-2) 0 var(--sp-3);}
.mod-card .desc{color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;}
.mod-card .gain{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}
.mod-card .gain svg{color:var(--sage-ink); flex:none; margin-top:3px;}
.mod-card .chapters{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-4);
}
.mod-card .chapters li{
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px;
}
.mod-card .more{
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-sm); font-weight:700; color:var(--accent,var(--m1));
}
.mod-card .more .arrow{transition:transform var(--t-fast) var(--ease);}
.mod-card:hover .more .arrow{transform:translateX(4px);}

/* Bonus : deux ressources qui s'ajoutent, pas deux lignes de plus */
.bonus-grid{display:grid; gap:var(--sp-4);}
@media (min-width:760px){ .bonus-grid{grid-template-columns:1fr 1fr; gap:var(--sp-5);} }
.bonus{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5);
}
.bonus .ic{
  width:52px; height:52px; flex:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-tint); color:var(--sage-ink);
}
.bonus .tag{font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-ink);}
.bonus h3{margin:var(--sp-1) 0 var(--sp-2); font-size:var(--fs-base);}
.bonus p{font-size:var(--fs-sm); color:var(--ink-soft);}

/* Piliers de la méthode */
.pillars{display:grid; gap:var(--sp-4);}
@media (min-width:760px){ .pillars{grid-template-columns:repeat(3,1fr); gap:var(--sp-5);} }
.pillar{border-top:2px solid rgba(255,255,255,.22); padding-top:var(--sp-4);}
.pillar h3{font-size:var(--fs-base); margin-bottom:var(--sp-2);}
.pillar p{font-size:var(--fs-sm); color:#CBD9E0;}
.pillar .no{font-family:var(--serif); font-size:var(--fs-sm); color:#E8B79F; font-weight:700; letter-spacing:.1em;}

/* ── 09. OFFRE, PRIX, GARANTIE ──────────────────────────────────────────── */
.value-wrap{display:grid; gap:var(--sp-6);}
@media (min-width:940px){ .value-wrap{grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:start;} }

.value-list{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-5);}
.value-item,.value-row{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:13px var(--sp-4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
}
.value-item .ic,.value-row .ic{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-weight:700; font-size:.9rem;
}
.value-item b,.value-row b{display:block; font-size:var(--fs-sm); line-height:1.3;}
.value-item span,.value-row span{font-size:var(--fs-xs); color:var(--ink-soft);}
.value-item .pr,.value-row .pr{margin-left:auto; font-family:var(--serif); font-weight:700; color:var(--ink); white-space:nowrap; font-size:var(--fs-sm);}
.value-item .pr.free,.value-row .pr.free{color:var(--sage-ink);}

.value-stack{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-2); margin-top:var(--sp-4);}
.value-stack .value-row{border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;}
.value-stack .value-row:last-of-type{border-bottom:0;}
.value-total{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); background:var(--paper-alt);
  border-radius:0 0 var(--r-md) var(--r-md); margin:var(--sp-2) calc(var(--sp-2) * -1) calc(var(--sp-2) * -1);
  font-size:var(--fs-sm);
}
.value-total b{font-family:var(--serif); font-size:var(--fs-md);}

/* La carte de prix : le point de bascule de la page */
.price-card{
  position:relative; overflow:hidden;
  background:var(--brand); color:#fff;
  border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-5);
}
@media (min-width:640px){ .price-card{padding:var(--sp-7) var(--sp-6);} }
.price-card::before{
  content:''; position:absolute; top:-90px; right:-70px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(181,86,58,.42),transparent 70%);
}
.price-card > *{position:relative;}
.price-card .badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--terra); color:#fff; font-weight:700; font-size:var(--fs-xs);
  padding:7px 15px; border-radius:var(--r-pill); margin-bottom:var(--sp-4);
}
.price-card .old{display:block; color:#A9BEC8; text-decoration:line-through; font-size:var(--fs-base);}
.price-card .new{
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  font-family:var(--serif); font-size:clamp(2.9rem,2.2rem + 3vw,4rem); font-weight:700;
  color:#fff; margin:var(--sp-1) 0 var(--sp-5); line-height:1;
}
.price-card .new .save{
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:800; letter-spacing:.04em;
  background:rgba(255,255,255,.14); color:#F5D9C6; padding:6px 12px; border-radius:var(--r-pill);
}
.price-includes{display:flex; flex-direction:column; gap:11px; margin:0 0 var(--sp-5);}
.price-includes li{display:flex; align-items:flex-start; gap:11px; font-size:var(--fs-sm); color:#E4EDF1;}
.price-includes svg{color:#8FC0A9; flex:none; margin-top:4px;}
.price-card .btn-primary{background:var(--terra); box-shadow:0 10px 26px -10px rgba(0,0,0,.55);}
.price-card .btn-primary:hover{background:#C4603F;}
.price-card .fine{text-align:center; margin-top:var(--sp-3); color:#A9BEC8;}
.price-card .fine a{color:#D9E4E9;}

.guarantee{
  display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap;
  background:var(--sage-tint); border:1px solid #CFDDD1; border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.guarantee .ic{
  width:52px; height:52px; flex:none; border-radius:50%;
  background:var(--sage-ink); color:#fff; display:flex; align-items:center; justify-content:center;
}
.guarantee b{display:block; font-family:var(--serif); font-size:var(--fs-md); margin-bottom:var(--sp-1);}
.guarantee span{display:block; color:var(--ink-soft); font-size:var(--fs-sm); max-width:60ch;}
.guarantee > div:last-child{flex:1 1 260px;}

/* ── 10. AVIS, FAQ, CTA, PIED DE PAGE ───────────────────────────────────── */
.avis-head{text-align:center; max-width:56ch; margin:0 auto var(--sp-6);}
.avis-viewport{position:relative; max-width:1000px; margin-inline:auto; overflow:hidden;}
.avis-track{display:flex; gap:var(--sp-5); transition:transform var(--t-slow) var(--ease);}
.avis-card{
  position:relative; overflow:hidden;
  flex:0 0 100%;
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5);
}
@media (min-width:821px){ .avis-card{flex:0 0 calc(50% - 12px); padding:var(--sp-6);} }
.avis-card::before{content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(180deg,var(--terra),var(--m4));}
.avis-card .quote-mark{font-family:var(--serif); font-size:3rem; line-height:.55; color:var(--terra-tint);}
.avis-card p{font-size:var(--fs-sm); line-height:1.7; color:var(--ink);}
.avis-stars{display:flex; gap:3px; color:var(--m4);}
.avis-who{display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-2);}
.avis-who .ava{
  width:42px; height:42px; flex:none; border-radius:50%;
  background:var(--paper-alt); color:var(--ink); font-family:var(--serif); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.avis-who b{display:block; font-size:var(--fs-sm);}
.avis-who span{font-size:var(--fs-xs); color:var(--ink-soft);}
.avis-nav{display:flex; justify-content:center; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5);}
.avis-nav button{
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.avis-nav button:hover:not(:disabled){border-color:var(--terra); color:var(--terra-deep);}
.avis-nav button:disabled{opacity:.35; cursor:default;}
.avis-dots{display:flex; gap:1px;}
/* La pastille reste fine, mais sa zone d'appui fait bien 44 px de haut :
   le padding est transparent, seul le contenu est peint. */
.avis-dots i{
  display:block; width:8px; height:8px; border-radius:50%;
  background:var(--line-strong); cursor:pointer;
  box-sizing:content-box; padding:18px 8px; background-clip:content-box;
  transition:background var(--t-med) var(--ease), width var(--t-med) var(--ease);
}
.avis-dots i.on{background-color:var(--terra); width:24px; border-radius:4px;}
.avis-empty{
  max-width:56ch; margin-inline:auto; text-align:center;
  border:1.5px dashed var(--line-strong); border-radius:var(--r-xl);
  padding:var(--sp-7) var(--sp-5); background:var(--paper-alt);
}
.avis-empty .ic{
  width:58px; height:58px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4); color:var(--terra);
}
.avis-empty h3{margin-bottom:var(--sp-2);}
.avis-empty p{color:var(--ink-soft); font-size:var(--fs-sm); max-width:46ch; margin-inline:auto;}

.faq-list{max-width:760px; margin-inline:auto;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; min-height:60px; padding:18px 2px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:none; border:0; text-align:left;
  font-family:var(--serif); font-size:var(--fs-h3); font-weight:600; color:var(--ink);
  text-wrap:balance;
}
.faq-q:hover{color:var(--terra-deep);}
.faq-q svg{flex:none; color:var(--terra); transition:transform var(--t-med) var(--ease);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--ease);}
.faq-a p{padding:0 2px 20px; color:var(--ink-soft); max-width:62ch; font-size:var(--fs-sm);}

.cta-final{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(155deg,var(--brand),var(--brand-deep));
  color:#fff; border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-5);
}
@media (min-width:760px){ .cta-final{padding:var(--sp-9) var(--sp-7);} }
.cta-final::before{
  content:''; position:absolute; bottom:-120px; left:50%; transform:translateX(-50%);
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(181,86,58,.34),transparent 70%);
}
.cta-final > *{position:relative;}
.cta-final h2{color:#fff; max-width:20ch; margin-inline:auto;}
.cta-final p{color:#CBD9E0; max-width:46ch; margin:var(--sp-4) auto var(--sp-6);}
.cta-final .price-line{
  display:inline-flex; align-items:baseline; gap:10px; margin-bottom:var(--sp-5);
  font-family:var(--serif); font-size:2rem; font-weight:700; color:#fff;
}
.cta-final .price-line s{font-size:1.05rem; color:#A9BEC8; font-weight:500;}

footer.site{padding:var(--sp-7) 0 var(--sp-6); text-align:center; color:var(--ink-faint); font-size:var(--fs-sm); border-top:1px solid var(--line); margin-top:var(--sp-6);}
footer.site .flinks{display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; margin-bottom:var(--sp-4);}
footer.site a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--ink-soft); padding:6px 4px;}
footer.site a:hover{color:var(--terra-deep); text-decoration:underline; text-underline-offset:3px;}
footer.site .legal{max-width:62ch; margin:var(--sp-4) auto 0; font-size:var(--fs-xs); line-height:1.6;}

/* ── 11. PAGES SECONDAIRES ──────────────────────────────────────────────── */
.crumb{font-size:var(--fs-xs); color:var(--ink-faint); margin-bottom:var(--sp-3);}
.crumb a{display:inline-flex; align-items:center; min-height:40px; color:var(--ink-soft); text-decoration:none;}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px;}

/* Fiche module */
.mod-hero{padding-top:var(--sp-6);}
.mod-hero h1{margin:var(--sp-3) 0 var(--sp-4);}
.icon-badge{
  width:52px; height:52px; border-radius:15px; margin-bottom:var(--sp-4);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent,var(--m1)); color:#fff;
}
.price-box{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:var(--sp-4) 0 var(--sp-2);}
.price-box .p{font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--accent,var(--terra-deep)); line-height:1;}
.price-box .u{font-size:var(--fs-sm); color:var(--ink-soft);}
.mod-frame{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3);}
.cover-strip{display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line);}
.cover-strip img{width:46px; height:63px; object-fit:cover; border-radius:5px; border:1px solid var(--line); flex:none;}
.cover-strip span{font-size:var(--fs-xs); color:var(--ink-soft);}
.chapters-list{display:grid; grid-template-columns:1fr; gap:0;}
@media (min-width:640px){ .chapters-list{grid-template-columns:1fr 1fr; column-gap:var(--sp-6);} }
.chapters-list li{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink);}
.chapters-list li b{font-family:var(--serif); font-weight:700; min-width:24px; color:var(--accent,var(--m1));}
.module-nav{display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center;}
.module-nav a{
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  padding:10px 18px; min-height:44px; display:inline-flex; align-items:center;
  font-size:var(--fs-sm); font-weight:700; text-decoration:none; color:var(--ink-soft);
}
.module-nav a:hover{border-color:var(--terra); color:var(--terra-deep);}
.module-nav a.current{background:var(--brand); color:#fff; border-color:var(--brand);}
.preview-frame{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-2); max-width:660px; margin-inline:auto;}
.preview-frame .spread--zoom{border-radius:0;}
@media (max-width:719px){
  .preview-frame .spread--zoom img{aspect-ratio:3/4; object-fit:cover; object-position:top center;}
}
.cross-sell{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:var(--brand); color:#fff; border-radius:var(--r-lg); padding:var(--sp-5);
}
.cross-sell .txt{flex:1 1 260px;}
.cross-sell .txt b{display:block; font-family:var(--serif); font-size:var(--fs-md); margin-bottom:var(--sp-1); color:#fff;}
.cross-sell .txt span{font-size:var(--fs-sm); color:#CBD9E0;}
.cross-sell .save{color:#F0C08F; font-weight:800;}

/* Page pack */
.pack-hero{padding-top:var(--sp-6);}
.compare-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg);}
.compare-table{width:100%; min-width:460px; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;}
.compare-table th,.compare-table td{padding:15px var(--sp-4); text-align:center; border-bottom:1px solid var(--line); font-size:var(--fs-sm);}
.compare-table th{background:var(--paper-alt); font-family:var(--serif); font-weight:700;}
.compare-table td:first-child,.compare-table th:first-child{text-align:left; font-weight:600;}
.compare-table tr:last-child td{border-bottom:0;}
.compare-table tr.win td{background:var(--terra-tint);}
.compare-table .big{font-family:var(--serif); font-weight:800; font-size:1.25rem; color:var(--terra-deep);}
.compare-table svg.yes{color:var(--sage-ink);}
.compare-table svg.no{color:var(--ink-faint);}
.steps-row{display:grid; grid-template-columns:1fr; gap:var(--sp-5);}
@media (min-width:760px){ .steps-row{grid-template-columns:repeat(3,1fr);} }
.step{text-align:center;}
.step .n{
  width:50px; height:50px; border-radius:50%; margin:0 auto var(--sp-4);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-family:var(--serif); font-weight:700; font-size:1.2rem;
}
.step h3{margin-bottom:var(--sp-2);}
.step p{color:var(--ink-soft); font-size:var(--fs-sm);}
.down-sell{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4);
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-5); background:var(--paper-alt);
}
.down-sell .txt{flex:1 1 240px;}
.down-sell .txt b{display:block; font-family:var(--serif); font-size:var(--fs-md); margin-bottom:var(--sp-1);}
.down-sell .txt span{font-size:var(--fs-sm); color:var(--ink-soft);}
.sticky-buy{position:static;}
@media (min-width:940px){ .sticky-buy{position:sticky; top:88px;} }

/* Page extrait gratuit */
.optin{display:grid; gap:var(--sp-6); padding-block:var(--sp-6) var(--sp-5);}
@media (min-width:940px){ .optin{grid-template-columns:1.05fr .95fr; gap:var(--sp-7); align-items:center;} }
.optin-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-5); box-shadow:var(--sh-3);}
@media (min-width:640px){ .optin-card{padding:var(--sp-6);} }
.field{margin-bottom:var(--sp-4);}
.field label{display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:7px;}
.field input{
  width:100%; min-height:52px; padding:14px 16px;
  border:1.5px solid var(--line-strong); border-radius:12px;
  font-family:var(--sans); font-size:16px; background:var(--paper); color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--terra); background:var(--surface); box-shadow:0 0 0 3px var(--terra-tint);}
.consent{display:flex; gap:11px; align-items:flex-start; margin:var(--sp-4) 0;}
.consent input{margin-top:2px; width:26px; height:26px; flex:none; accent-color:var(--terra);}
.consent label{font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.6;}
.consent a{display:inline-block; padding-block:10px; color:var(--terra-deep);}
.mini-note{font-size:var(--fs-xs); color:var(--ink-faint); text-align:center; margin-top:var(--sp-3);}
.inside-list li{display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm);}
.inside-list li:last-child{border-bottom:none;}
.inside-list svg{color:var(--sage-ink); flex:none; margin-top:4px;}

/* ── 12. CHROME FLOTTANT ────────────────────────────────────────────────── */
.read-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--terra),var(--m4));
  z-index:999; transition:width .1s linear;
}
.to-top{
  /* Sur téléphone, la barre d'achat tient déjà le bas de l'écran : un second
     bouton flottant recouvrait les actions des cartes. Il reste au desktop. */
  display:none;
  position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom,0px));
  width:46px; height:46px; border-radius:50%; border:0;
  background:var(--brand); color:#fff;
  align-items:center; justify-content:center;
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med);
  z-index:120;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.to-top:hover{background:var(--terra);}
@media (min-width:940px){ .to-top{display:flex; right:24px; bottom:24px; width:50px; height:50px;} }

/* Barre d'achat mobile : le prix et l'action, jamais plus */
.buy-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:none; align-items:center; gap:var(--sp-3);
  padding:10px var(--sp-4) max(10px,env(safe-area-inset-bottom,0px));
  background:rgba(253,247,242,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(34,65,79,.10);
  transform:translateY(110%); transition:transform var(--t-med) var(--ease);
}
.buy-bar.show{transform:translateY(0);}
.buy-bar .bb-price{display:flex; flex-direction:column; line-height:1.15; flex:none;}
.buy-bar .bb-price b{font-family:var(--serif); font-weight:700; font-size:1.15rem;}
.buy-bar .bb-price s{font-size:var(--fs-xs); color:var(--ink-faint);}
.buy-bar .btn{flex:1; min-height:50px; padding:13px 16px; font-size:var(--fs-sm); width:auto;}
.buy-bar .bb-close{
  width:44px; height:44px; flex:none; border-radius:50%; border:0;
  background:transparent; color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
}
.buy-bar .bb-close:hover{background:var(--paper-alt); color:var(--ink);}
@media (max-width:939px){
  .buy-bar{display:flex;}
  body.has-buybar{padding-bottom:var(--buybar-h,calc(72px + env(safe-area-inset-bottom,0px)));}
}

/* ── 13. MOUVEMENT & ACCESSIBILITÉ ──────────────────────────────────────── */
.skip-link{position:absolute; left:-9999px; top:0; z-index:999; background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;}
.skip-link:focus{left:0;}
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--terra); outline-offset:3px; border-radius:6px;
}
section[id],div[id],main[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
@media (min-width:940px){ :root{--header-h:72px;} }

/* Les apparitions ne sont armées que si le script a démarré (classe « js » posée
   par un script en ligne). Sans JavaScript, ou si site.js ne se charge pas, le
   contenu reste simplement visible : une page de vente ne peut pas dépendre
   d'un observateur pour être lisible. */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);}
.js .reveal.is-visible{opacity:1; transform:none;}
.js .stagger > *{opacity:0;}
.js .stagger.is-visible > *{animation:riseIn .55s var(--ease) both;}
.js .stagger.is-visible > *:nth-child(1){animation-delay:.02s}
.js .stagger.is-visible > *:nth-child(2){animation-delay:.08s}
.js .stagger.is-visible > *:nth-child(3){animation-delay:.14s}
.js .stagger.is-visible > *:nth-child(4){animation-delay:.20s}
.js .stagger.is-visible > *:nth-child(5){animation-delay:.26s}
.js .stagger.is-visible > *:nth-child(6){animation-delay:.32s}
@keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .reveal{opacity:1; transform:none;}
  .js .stagger > *{opacity:1;}
  .mark::after{transform:scaleX(1);}
  .lens-real-inner::before{transform:scaleY(1);}
  .mod-grid{scroll-behavior:auto;}
  .mobile-panel.open{animation:none;}
}