/* Maman Maintenant : feuille de style commune (thème clair uniquement) */
:root {
  color-scheme: light;
  --creme: #FBF8EF;
  --papier: #FFFFFF;
  --encre: #38342F;
  --encre-douce: #6B6259;
  --canard: #1F6E7A;
  --canard-fonce: #175560;
  --turquoise: #249FB2;
  --ciel: #DAEEF1;
  --rose: #F8556D;
  --rose-pale: #FBE6E6;
  --ligne: #E8E0D3;
  --voyelle: #E3000F;
  --consonne: #0070C0;
  --digramme: #109B03;
  --titre: "Fredoka", "Asap", Arial, sans-serif;
  --texte: "Asap", Arial, Helvetica, sans-serif;
  --largeur: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6; font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--canard); text-underline-offset: 3px; }
a:hover { color: var(--canard-fonce); }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.45rem; line-height: 1.15; }
p { margin: 0 0 1em; }
.contenu { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.etroit { max-width: 46rem; }
.intro { font-size: 1.2rem; color: var(--encre-douce); max-width: 40rem; }
.centre { text-align: center; margin-inline: auto; }

/* Lettres de la méthode */
.v { color: var(--voyelle); }
.c { color: var(--consonne); }
.d { color: var(--digramme); }
.lettres { font-family: var(--titre); font-weight: 800; letter-spacing: .02em; }

/* En tête */
.entete { position: sticky; top: 0; z-index: 20; background: var(--canard); box-shadow: 0 2px 12px rgba(23,85,96,.25); }
.entete .contenu { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav .btn { background: #fff; border-color: #fff; color: var(--canard); }
.nav .btn:hover { background: var(--ciel); border-color: var(--ciel); color: var(--canard-fonce); }
.menu { display: none; margin-left: auto; background: none; border: 2px solid #fff; border-radius: 10px; padding: .4rem .7rem; font: 600 1rem var(--texte); color: #fff; cursor: pointer; }
:focus-visible { outline-color: var(--ciel); }
.annonce { display: block; background: var(--rose); color: #fff; text-align: center; padding: .55rem 1rem; font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.35; }
.annonce:hover { color: #fff; background: #E8445E; }
.annonce s { opacity: .85; }
.barre { color: var(--encre-douce); font-size: .7em; font-weight: 700; margin-right: .3rem; text-decoration-thickness: 2px; }
.bientot { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; align-items: center; max-width: 820px; }
.bientot img { width: 120px; border-radius: 50%; filter: grayscale(.15); }
.bientot h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.bientot p:last-child { margin: 0; }
.pastille { display: inline-block; background: var(--canard); color: #fff; font-weight: 700; font-size: .85rem; padding: .25rem .75rem; border-radius: 999px; margin-bottom: .7rem; }
.faq .emoji { margin-right: .6rem; }
.cadre { background: #fff; border-radius: 6px; padding: .6rem; box-shadow: 0 2px 0 #ddd3c2, 0 24px 48px -18px rgba(56,52,47,.45); }
.cadre img { width: 100%; max-height: 330px; object-fit: contain; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--canard); color: #fff; border: 2px solid var(--canard);
  padding: .8rem 1.4rem; border-radius: 999px; font: 700 1.05rem var(--texte);
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
}
.btn:hover { background: var(--canard-fonce); border-color: var(--canard-fonce); color: #fff; }
.btn.clair { background: var(--papier); color: var(--canard); }
.btn.clair:hover { background: var(--ciel); color: var(--canard-fonce); }
.btn.petit { padding: .5rem 1rem; font-size: .95rem; }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.prix { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; color: var(--encre); }
.prix small { font-family: var(--texte); font-weight: 500; font-size: .95rem; color: var(--encre-douce); }

/* Sections */
section { padding: 5rem 0; }
.bande { background: var(--papier); border-block: 1px solid var(--ligne); }
.bande-ciel { background: var(--ciel); }
.motif { background: var(--creme) url("img/fond.jpg") repeat; background-size: 520px; }

/* Héros */
.heros { padding: 3.5rem 0 4.5rem; position: relative; overflow: hidden; }
.heros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,248,239,.55), rgba(251,248,239,.92)); }
.heros .contenu { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.heros h1 { margin-bottom: .35em; }
.heros .intro { font-size: 1.25rem; }
.preuve { margin-top: 1.4rem; font-size: .98rem; color: var(--encre-douce); }
.preuve strong { color: var(--encre); }
.scene { position: relative; padding-bottom: 2rem; }
.mascotte-coin { position: absolute; width: 24%; left: -5%; bottom: -1.6rem; filter: drop-shadow(0 10px 18px rgba(56,52,47,.18)); }

/* Livre ouvert */
.livre-ouvert { position: relative; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 0 #ddd3c2, 0 6px 0 -1px #efe7da, 0 24px 48px -18px rgba(56,52,47,.45); }
.livre-ouvert::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(56,52,47,.10) 42%, rgba(56,52,47,.22) 50%, rgba(56,52,47,.10) 58%, rgba(0,0,0,0) 100%); pointer-events: none; }
.legende { font-size: .95rem; color: var(--encre-douce); margin-top: .8rem; }

/* Couvertures */
.couverture { border-radius: 3px 6px 6px 3px; position: relative; display: block;
  box-shadow: inset 4px 0 0 rgba(0,0,0,.08), 0 18px 30px -16px rgba(56,52,47,.55), 0 2px 4px rgba(56,52,47,.15); }
a.lien-couverture { display: block; transition: transform .2s ease; }
a.lien-couverture:hover { transform: translateY(-4px) rotate(-1deg); }

/* Les 4 étapes */
.etapes { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: etape; }
.etapes li { position: relative; }
.etapes .num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--turquoise); color: #fff;
  font: 600 1.25rem var(--titre); margin: 1.2rem 0 .5rem; }
.etapes h3 { margin-bottom: .3em; }
.etapes p { font-size: .98rem; color: var(--encre-douce); margin: 0; }

/* Vidéo */
.video-bloc { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 3.5rem; align-items: center; }
.video-cadre { border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 24px 50px -22px rgba(56,52,47,.55); aspect-ratio: 9 / 16; }
.video-cadre video { width: 100%; height: 100%; object-fit: cover; }
.liste-etapes { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.liste-etapes li { display: flex; gap: .9rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--ligne); }
.liste-etapes li:last-child { border-bottom: 0; }
.liste-etapes b { font-family: var(--titre); color: var(--turquoise); font-size: 1.3rem; min-width: 1.2rem; }

/* Bandeau test */
.bandeau-test { display: grid; grid-template-columns: 180px 1fr auto; gap: 2.5rem; align-items: center; background: var(--papier);
  border: 2px solid var(--ciel); border-radius: 28px; padding: 2rem 2.5rem; }
.bandeau-test img { width: 150px; }
.bandeau-test h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bandeau-test p { margin: 0; color: var(--encre-douce); }

/* Deux colonnes génériques */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.duo.inverse > :first-child { order: 2; }
.liste-coches { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.liste-coches li { padding-left: 2rem; position: relative; margin-bottom: .7rem; }
.liste-coches li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ciel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%231F6E7A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

/* Pack */
.pack { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.eventail { position: relative; height: 340px; }
.eventail img { position: absolute; width: 40%; top: 20px; }
.eventail img:nth-child(1) { left: 2%; transform: rotate(-9deg); }
.eventail img:nth-child(2) { left: 20%; transform: rotate(-3deg); top: 6px; }
.eventail img:nth-child(3) { left: 38%; transform: rotate(3deg); top: 6px; }
.eventail img:nth-child(4) { left: 56%; transform: rotate(9deg); }

/* FAQ */
.faq details { background: var(--papier); border: 1px solid var(--ligne); border-radius: 14px; margin-bottom: .8rem; }
.faq summary { cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.3rem; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); font: 600 1.5rem var(--titre); color: var(--canard); }
.faq details[open] summary::after { content: "×"; }
.faq details > div { padding: 0 1.3rem 1.1rem; color: var(--encre-douce); }
.faq details > div p:last-child { margin: 0; }

/* Page livres */
.tome { padding: 4.5rem 0; border-bottom: 1px solid var(--ligne); scroll-margin-top: 80px; }
.tome:nth-of-type(even) { background: var(--papier); }
.tome-tete { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; align-items: start; }
.etiquette { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--canard); margin-bottom: .6rem; }
.etiquette .num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--turquoise); color: #fff; font: 600 1.05rem var(--titre); }
.achat { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.achat > div { background: var(--creme); border: 1px solid var(--ligne); border-radius: 18px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.tome:nth-of-type(odd) .achat > div { background: var(--papier); }
.achat h4 { margin: 0; font: 700 1rem var(--texte); color: var(--encre-douce); }
.achat .btn { margin-top: auto; }
.feuilleter { margin-top: 3rem; }
.feuilleter h3 { font-size: 1.2rem; }
.galerie { display: grid; align-items: start; grid-auto-flow: column; grid-auto-columns: minmax(280px, 40%); gap: 1.5rem; overflow-x: auto; padding: .5rem .2rem 1.5rem; scroll-snap-type: x mandatory; }
.galerie figure { margin: 0; scroll-snap-align: start; }
.galerie figcaption { font-size: .95rem; color: var(--encre-douce); margin-top: .7rem; }
.sommaire-tomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; }
.sommaire-tomes a { display: flex; gap: .8rem; align-items: center; background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: .7rem; text-decoration: none; color: var(--encre); font-weight: 700; line-height: 1.25; }
.sommaire-tomes img { width: 54px; border-radius: 2px; box-shadow: 0 4px 10px -4px rgba(56,52,47,.4); }
.sommaire-tomes a:hover { border-color: var(--turquoise); }

/* Page méthode */
.principe { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5rem; align-items: center; padding: 3.5rem 0; border-bottom: 1px solid var(--ligne); }
.principe:last-child { border-bottom: 0; }
.principe.inverse > :first-child { order: 2; }
.demo-couleurs { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; font-family: var(--titre); font-weight: 800; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; }
.demo-couleurs span small { display: block; font: 600 .95rem var(--texte); color: var(--encre-douce); margin-top: .5rem; letter-spacing: 0; }
.escalier { display: flex; align-items: flex-end; gap: .6rem; font-family: var(--titre); font-weight: 800; color: var(--voyelle); line-height: .8; }
.escalier span:nth-child(1) { font-size: 2.6rem; }
.escalier span:nth-child(2) { font-size: 4.6rem; }
.escalier span:nth-child(3) { font-size: 7.2rem; }
.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.comparaison div { background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 1rem 1.2rem; }
.comparaison b { display: block; font-family: var(--titre); font-size: 2rem; }
.comparaison .non { color: var(--encre-douce); }

/* Test de niveau */
.test { scroll-margin-top: 96px; max-width: 760px; margin-inline: auto; background: var(--papier); border: 1px solid var(--ligne); border-radius: 28px; padding: 2.5rem; box-shadow: 0 24px 50px -30px rgba(56,52,47,.4); }
.test-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.progression { display: flex; gap: .5rem; }
.progression span { width: 2.2rem; height: .5rem; border-radius: 999px; background: var(--ligne); }
.progression span.fait { background: var(--turquoise); }
.planche { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; padding: 2rem 1rem; margin: 1.2rem 0 1.6rem; background: var(--creme); border-radius: 20px;
  font-family: var(--titre); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.1; }
.planche.mots { font-size: clamp(2rem, 6vw, 3.2rem); }
.planche .bloc { white-space: nowrap; }
.reponses { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.reponses button { font: 700 1.02rem var(--texte); padding: 1rem .8rem; border-radius: 16px; border: 2px solid var(--ligne); background: var(--papier); color: var(--encre); cursor: pointer; }
.reponses button:hover { border-color: var(--turquoise); background: var(--ciel); }
.question { font-weight: 700; font-size: 1.15rem; margin-bottom: .8rem; }
.consigne { color: var(--encre-douce); }
.resultat { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
.lien-discret { background: none; border: 0; color: var(--canard); font: 600 .98rem var(--texte); text-decoration: underline; cursor: pointer; padding: 0; }
.test-depart { text-align: center; }
.test-depart img { width: 170px; margin: 0 auto 1rem; }

/* Pied de page */
.pied { background: var(--ciel); color: var(--encre); padding: 3.5rem 0 2.5rem; margin-top: 0; }
.pied a { color: var(--canard-fonce); }
.pied .contenu { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.pied h4 { font: 600 1.15rem var(--titre); margin: 0 0 .8rem; color: var(--encre); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .45rem; }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid rgba(31,110,122,.2); padding-top: 1.3rem; font-size: .9rem; color: var(--encre-douce); }
.pied .avatar { width: 64px; border-radius: 50%; margin-bottom: 1rem; }

/* Mobile */
@media (max-width: 960px) {
  .heros .contenu, .duo, .pack, .principe, .video-bloc { grid-template-columns: 1fr; gap: 2.2rem; }
  .duo.inverse > :first-child, .principe.inverse > :first-child { order: 0; }
  .etapes, .sommaire-tomes { grid-template-columns: repeat(2, 1fr); }
  .bandeau-test { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.2rem; }
  .tome-tete { grid-template-columns: 1fr; gap: 2rem; }
  .tome-tete .couverture { width: min(260px, 70%); }
  .mascotte-coin { left: -.5rem; width: 26%; }
  .video-cadre { max-width: 340px; margin-inline: auto; width: 100%; }
  .pied .contenu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .menu { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--canard); padding: .5rem 1.25rem 1.2rem; }
  .nav.ouvert { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .nav .btn { margin-top: .8rem; border-bottom: 0; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  section { padding: 3.5rem 0; }
  .logo img { height: 36px; }
  .entete .contenu { min-height: 62px; }
  .bientot { grid-template-columns: 80px 1fr; gap: 1.2rem; }
  .bientot img { width: 80px; }
  .etapes { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .achat, .reponses, .comparaison { grid-template-columns: 1fr; }
  .sommaire-tomes { grid-template-columns: 1fr; }
  .test { padding: 1.5rem; border-radius: 20px; }
  .resultat { grid-template-columns: 1fr; }
  .resultat .couverture { width: 160px; }
  .eventail { height: 240px; }
  .pied .contenu { grid-template-columns: 1fr; }
  .galerie { grid-auto-columns: 86%; }
}

/* Pages cadeau (QR codes) */
.page-cadeau .entete .contenu { justify-content: center; }
.cadeau-fond { min-height: calc(100vh - 72px); padding: 2rem 1rem 3rem; }
.carte-cadeau { max-width: 520px; margin: 0 auto; background: var(--papier); border-radius: 24px; padding: 1.8rem; box-shadow: 0 24px 50px -30px rgba(56,52,47,.45); }
.cadeau-tete { display: grid; grid-template-columns: 84px 1fr; gap: 1.1rem; align-items: center; margin-bottom: 1.3rem; }
.cadeau-tete h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); margin: 0; }
.cadeau-tete .pastille { margin-bottom: .4rem; }
.carte-cadeau .cadre { margin-bottom: 1.3rem; box-shadow: none; border: 1px solid var(--ligne); }
.carte-cadeau form { display: grid; gap: .6rem; margin: 1rem 0; }
.sib-form-message-panel { display: none; }
#success-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#error-message { color: #B3261E; background: #FDECEC; border-radius: 12px; padding: .8rem 1rem; font-weight: 600; margin: .8rem 0 0; }
.carte-cadeau .entry__label { display: block; margin-bottom: .5rem; }
.carte-cadeau .entry__error { display: block; color: #B3261E; font-weight: 600; font-size: .95rem; margin-top: .4rem; }
.carte-cadeau .entry__error:empty { display: none; }
.input--hidden { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.carte-cadeau .btn svg { width: 1.1em; height: 1.1em; fill: currentColor; animation: tourne 1s linear infinite; }
.carte-cadeau .btn svg.sib-hide-loader-icon { display: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.carte-cadeau label { font-weight: 700; }
.carte-cadeau input { font: 500 1.1rem var(--texte); padding: .9rem 1rem; border: 2px solid var(--ligne); border-radius: 14px; background: var(--creme); color: var(--encre); width: 100%; }
.carte-cadeau input:focus { outline: none; border-color: var(--turquoise); background: #fff; }
.carte-cadeau .btn { width: 100%; font-size: 1.1rem; padding: 1rem; }
.carte-cadeau .btn:disabled { opacity: .7; cursor: wait; }
.erreur { color: #B3261E; font-weight: 600; margin: 0; }
.note { font-size: .9rem; color: var(--encre-douce); margin: .6rem 0 0; }
.carte-cadeau .contact { border-top: 1px solid var(--ligne); padding-top: 1rem; margin-top: 1.4rem; }
#etat-ok h2 { color: var(--canard); }
.carte-cadeau .btn.valide, .carte-cadeau .btn.valide:disabled { background: var(--digramme); border-color: var(--digramme); opacity: 1; }


/* =========================================================
   ACCUEIL ANIMÉ
   Sans JavaScript tout est visible, le livre est ouvert.
   accueil.js place les éléments au départ puis les anime au défilement.
   ========================================================= */
.centre-flex { justify-content: center; }
.etoiles { color: #F2B43C; letter-spacing: .1em; }

/* Livre (commun aux scènes 1 et 3) */
.livre3d {
  --pw: min(42vw, 330px, calc((100svh - var(--h-entete, 64px) - 210px) * 0.68));
  position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) / 0.68);
  perspective: 2400px; transform-style: preserve-3d;
}
.livre3d .page { position: absolute; top: 0; width: var(--pw); height: 100%; background: #fff; overflow: hidden; }
.livre3d .page > img:first-child, .livre3d .face > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-droite, .page-d { left: var(--pw); border-radius: 0 6px 6px 0; box-shadow: 0 30px 60px -28px rgba(56,52,47,.55); }
.page-g { left: 0; border-radius: 6px 0 0 6px; box-shadow: 0 30px 60px -28px rgba(56,52,47,.55); }
.page-droite::after, .page-d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56,52,47,.18), rgba(56,52,47,0) 12%); pointer-events: none; }
.page-g::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(56,52,47,.16), rgba(56,52,47,0) 12%); pointer-events: none; }
.feuille { position: absolute; top: 0; left: var(--pw); width: var(--pw); height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.recto { border-radius: 0 6px 6px 0; box-shadow: 0 30px 60px -24px rgba(56,52,47,.55); }
.verso { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: #fff; }
.verso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(56,52,47,.16), rgba(56,52,47,0) 14%); pointer-events: none; }
/* les trois A détachés de l'image, pour pouvoir sauter */
.sprite { position: absolute; height: auto; }
.sprite.s1 { left: 73.46%; top: 16.41%; width: 19.90%; }
.sprite.s2 { left: 66.47%; top: 30.93%; width: 17.37%; }
.sprite.s3 { left: 61.64%; top: 42.41%; width: 14.48%; }
/* loupe sur la phrase (page de gauche) */
.loupe { position: absolute; left: 22%; top: 31.5%; width: 56%; height: 14%; overflow: hidden; border-radius: 12px; background: #fff; opacity: 0; z-index: 2; }
.loupe img { position: absolute; width: 178.6%; height: auto; left: -39.3%; top: -225%; max-width: none; }
.doigt { position: absolute; left: 0; top: 0; font-size: calc(var(--pw) * .2); line-height: 1; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); z-index: 6; pointer-events: none; }
.cache { position: absolute; inset: 0; background: var(--ciel); display: grid; place-items: center; border-radius: 0 6px 6px 0; z-index: 3;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 14px, transparent 14px 28px); }
.cache span { font-family: var(--titre); font-weight: 700; font-size: calc(var(--pw) * .45); color: #fff; text-shadow: 0 6px 20px rgba(31,110,122,.35); }
.tob-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#glisse { opacity: 0; }

.badge-etape { display: inline-flex; align-items: center; gap: .55rem; background: var(--canard); color: #fff; font-weight: 700; padding: .45rem 1.1rem .45rem .5rem; border-radius: 999px; margin: 0 0 1rem; font-size: clamp(.95rem, 1.8vw, 1.1rem); box-shadow: 0 10px 24px -12px rgba(31,110,122,.6); }
.badge-etape .num { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.9rem; padding: 0 .45rem; border-radius: 999px; font-size: .9em; background: #fff; color: var(--canard); font-family: var(--titre); }
.scene-livre { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin: 2.5rem auto 0; }
.legendes { position: relative; min-height: 3.4rem; width: min(92vw, 680px); margin-top: 1.2rem; text-align: center; }
.legendes .lg { position: absolute; inset: 0; margin: 0; font-size: clamp(1.05rem, 2.3vw, 1.35rem); font-weight: 600; opacity: 0; }
.legendes .lg:last-child { opacity: 1; position: relative; }

/* 0. Ouverture */
.s-ouverture { position: relative; overflow: hidden; min-height: calc(100svh - var(--h-entete, 64px) - 34px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 0 6rem; background: var(--creme) url("img/fond.jpg") repeat; background-size: 520px; }
.s-ouverture::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(251,248,239,.55), rgba(251,248,239,.92) 70%); }
.intro-titre { position: relative; z-index: 3; }
.titre-anime { font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: 1.04; margin-bottom: .35em; }
.titre-anime .mot { display: inline-block; }
.titre-anime .c { color: var(--consonne); }
.titre-anime .v { color: var(--voyelle); }
.intro-titre .intro { margin: 0 auto; font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.intro-titre .boutons { margin-top: 1.3rem; }
.intro-titre .preuve { margin-top: 1rem; }
.indice-scroll { position: absolute; z-index: 3; left: 50%; bottom: .8rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--canard); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.mascotte-intro { position: absolute; z-index: 3; width: 26%; left: -6%; bottom: -4%; filter: drop-shadow(0 12px 20px rgba(56,52,47,.2)); }
.lettres-flottantes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lettres-flottantes span { position: absolute; font-family: var(--titre); font-weight: 700; opacity: .3; font-size: clamp(2rem, 5vw, 4rem); animation: flotte 7s ease-in-out infinite; }
.f1 { left: 47%; top: 4%; } .f2 { left: 84%; top: 12%; animation-delay: -1s !important; } .f3 { left: 88%; top: 58%; animation-delay: -2s !important; }
.f4 { left: 2%; top: 88%; animation-delay: -3s !important; } .f5 { left: 74%; top: 82%; animation-delay: -4s !important; } .f6 { left: 46%; top: 90%; animation-delay: -5s !important; }
.f7 { left: 92%; top: 34%; animation-delay: -2.5s !important; } .f8 { left: 1%; top: 3%; animation-delay: -6s !important; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(6deg); } }

/* 2 et 3. Livres ouverts */
.s-livre1 { position: relative; background: var(--creme) url("img/fond.jpg") repeat; background-size: 520px; overflow: hidden; padding: 4rem 0; display: flex; align-items: center; justify-content: center; }
.s-livre1::before { content: ""; position: absolute; inset: 0; background: rgba(251,248,239,.82); }
.s-livre1 .scene-livre { margin: 0 auto; }
.badge-etape .num { min-width: 0 !important; padding: 0 .7rem !important; }

/* 2. Couleurs */
.s-couleurs { position: relative; background: var(--papier); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 3svh, 2.2rem); overflow: hidden; text-align: center; padding: 4rem 1rem; }
.titre-scene { font-size: clamp(1.7rem, 4vw, 2.8rem); margin: 0; }
.couleurs-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 4rem); }
.mot-geant { display: flex; justify-content: center; align-items: flex-start; gap: .08em; font-family: var(--titre); font-weight: 700; font-size: min(14vw, 17svh, 9rem); line-height: 1; }
.seg { display: inline-flex; flex-direction: column; align-items: center; }
.seg b { font-weight: 700; }
.seg small { font-family: var(--texte); font-size: clamp(.7rem, 1.3vw, .95rem); font-weight: 700; margin-top: .5rem; max-width: 8em; line-height: 1.2; }
.legende-couleurs { font-weight: 600; color: var(--encre-douce); margin: 1.2rem auto 0; max-width: 30rem; }
.pt { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .45rem; vertical-align: -.05rem; }
.pt.v { background: var(--voyelle); } .pt.c { background: var(--consonne); } .pt.d { background: var(--digramme); }

/* 3. Toboggan */
.s-toboggan { position: relative; background: var(--ciel); overflow: hidden; padding: 4rem 0; display: flex; align-items: center; justify-content: center; }
.scene-tob { margin: 0 auto; }

/* 4. Défilement horizontal */

/* Mode animé (ajouté par accueil.js) */
.js-epingle .s-livre1, .js-epingle .s-couleurs, .js-epingle .s-toboggan { height: calc(100svh - var(--h-entete, 64px)); min-height: 0; padding-top: 0; padding-bottom: 0; }

.s-video { padding: 5rem 0; }
.mascotte-saut { transform-origin: 50% 100%; }

@media (min-width: 821px) {
  .entete .contenu { min-height: 60px; }
  .logo img { height: 40px; }
}
@media (max-width: 760px) {
  .livre3d { --pw: min(45vw, 300px, calc((100svh - var(--h-entete, 64px) - 230px) * 0.68)); }
  .indice-scroll { font-size: .9rem; }
  .mascotte-intro { width: 20vw; left: 2%; bottom: 2%; }
  .mascotte-intro { width: 22vw; }
}
@media (prefers-reduced-motion: reduce) {  }
.cache { display: none; } .js-anime .cache { display: grid; }
@media (max-width: 760px) { .seg small { display: none; } .mot-geant { gap: 0; } }

.s-couleurs .badge-etape { font-size: clamp(1.05rem, 2.4vw, 1.4rem); }
html.js-anime { scroll-behavior: auto; }

@media (max-width: 760px) { .lettres-flottantes span { opacity: .3; } }

/* Toboggan : les vraies lettres passent au-dessus du tracé */
.sprite.tob-l { left: 27.5%; top: 31.09%; width: 13.63%; z-index: 3; }
.sprite.tob-a { left: 62.12%; top: 65.3%; width: 17.49%; z-index: 3; }
.tob-svg { z-index: 2; }
.doigt-tob { z-index: 5; }
/* Maquette du livre sous le mot CHATON */
.maquette-mot { width: min(560px, 86vw, 62svh); }
.s-couleurs { gap: clamp(.8rem, 2.4svh, 1.8rem); }
.mot-geant { font-size: min(13vw, 13svh, 8rem); }

/* ===== Accueil v3 : convaincre vite ===== */
.ouverture-grille { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; }
.ouverture-grille .titre-anime { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.ouverture-grille .intro { margin: 0; }
.puces { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.puces li { background: var(--papier); border: 1px solid var(--ligne); border-radius: 999px; padding: .35rem .8rem; font-weight: 600; font-size: .95rem; }
.ouverture-visuel { position: relative; }
.eventail-heros { height: clamp(260px, 34vw, 420px); }
.eventail-heros img { width: 46%; }
.s-chapitre { padding: 4.5rem 0 2rem; text-align: center; background: var(--creme); }
.s-chapitre h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .2em; }
.s-chapitre .intro { margin: 0 auto; }

@media (max-width: 960px) {
  .ouverture-grille { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .ouverture-grille .intro { margin: 0 auto; }
  .puces, .ouverture-grille .boutons { justify-content: center; }
  .eventail-heros { height: 54vw; max-height: 340px; width: min(100%, 520px); margin: 0 auto; }
}
@media (max-width: 600px) {
  .puces li { font-size: .82rem; }
  .mascotte-intro { width: 24%; left: 0; }
}
/* Écrans à encoche */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
.entete { top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canard); }

/* ===== Accueil v4 ===== */
/* Toboggan : la bulle de son glisse */
.tob-svg { pointer-events: none; }

/* Mots : tome 3 puis tome 4 */
.s-mots { display: block; }
.phase { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 2svh, 1.4rem); text-align: center; padding: 1rem 0 2rem; }
.js-anime .s-mots { position: relative; }
.mot-geant.mot3 { gap: .14em; }

/* Les 4 principes */
.s-pourquoi { padding: 5rem 0; background: var(--papier); }
.s-pourquoi h2 { text-align: center; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.2rem; max-width: 900px; margin-inline: auto; }
.tuile { border-radius: 26px; padding: 1.1rem 1.1rem 1.4rem; text-align: center; }
.t-son { background: #E8F4FB; } .t-couleurs { background: #FDEDEF; } .t-images { background: #EEF7E9; } .t-ordre { background: #FFF5DD; }
.tuile h3 { font-size: 1.25rem; margin: 1rem 0 .3rem; }
.tuile > p { margin: 0; color: var(--encre-douce); font-weight: 600; }
.tuile-visuel { height: 200px; display: flex; align-items: center; justify-content: center; gap: .8rem; background: #fff; border-radius: 18px; padding: .6rem; font-family: var(--titre); font-weight: 700; }
.v-son .lettre-m { font-size: 6rem; line-height: 1; }
.v-son p { margin: .2rem 0; font-size: 1.7rem; text-align: left; }
.v-son .non { color: var(--encre-douce); text-decoration: line-through; text-decoration-thickness: 2px; }
.v-couleurs { gap: .9rem; }
.morceau { display: flex; flex-direction: column; align-items: center; }
.morceau b { font-size: 3.4rem; line-height: 1; }
.morceau small { font-family: var(--texte); font-size: .8rem; font-weight: 700; margin-top: .5rem; position: relative; padding-top: .7rem; }
.morceau small::before { content: "↑"; position: absolute; top: -.35rem; left: 50%; transform: translateX(-50%); font-size: 1rem; }
.v-images { gap: .45rem; }
.v-images figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.v-images img { height: calc(100% - 1.6rem); width: auto; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(56,52,47,.6); }
.v-images figcaption { font-size: 1.1rem; line-height: 1.4; }

/* Les 4 livres en liste */
.s-livres { padding: 5rem 0 3rem; background: var(--creme); }
.s-livres h2, .s-livres > .contenu > .intro { text-align: center; margin-inline: auto; }
.s-livres h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .2em; }
.liste-livres { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.2rem; }
.ligne-livre { display: grid; grid-template-columns: 110px minmax(0, 340px) 1fr; gap: 1.6rem; align-items: center; background: var(--papier); border: 1px solid var(--ligne); border-radius: 22px; padding: 1rem 1.4rem 1rem 1rem; text-decoration: none; color: var(--encre); transition: transform .2s ease, box-shadow .2s ease; }
.ligne-livre:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(56,52,47,.5); color: var(--encre); }
.ligne-livre.premier { border: 3px solid var(--turquoise); grid-template-columns: 140px minmax(0, 420px) 1fr; padding: 1.3rem 1.6rem 1.3rem 1.3rem; }
.ll-couv { border-radius: 3px 6px 6px 3px; box-shadow: 0 10px 20px -8px rgba(56,52,47,.55); }
.ll-interieur { border-radius: 8px; box-shadow: 0 10px 24px -14px rgba(56,52,47,.5); }
.ll-tag { display: inline-block; background: var(--turquoise); color: #fff; border-radius: 999px; padding: .15rem .7rem; font-weight: 700; font-size: .85rem; margin-bottom: .4rem; }
.ll-num { margin: 0; color: var(--canard); font-weight: 700; }
.ligne-livre h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: .1rem 0 .3rem; }
.ll-texte > p { margin: 0 0 .5rem; color: var(--encre-douce); font-weight: 600; }
.cl-bonus { display: inline-block; background: var(--rose-pale); color: #B4233B !important; border-radius: 999px; padding: .2rem .75rem; font-size: .9rem; }
.cl-lien { display: block; margin-top: .4rem; color: var(--canard); font-weight: 700; font-size: .95rem; }

/* Offre */
.s-offre { padding: 1rem 0 4rem; background: var(--creme); }
.offre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; background: var(--rose); color: #fff; border-radius: 26px; padding: 1.4rem 2rem; }
.offre-couv { display: flex; }
.offre-couv img { width: 54px; border-radius: 2px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); }
.offre-couv img + img { margin-left: -18px; }
.offre-titre { margin: 0; font-weight: 700; font-size: 1.2rem; }
.prix-offre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.prix-offre s { opacity: .8; font-size: .6em; margin-right: .3rem; }
.offre .btn { background: #fff; color: var(--rose); border-color: #fff; }
.offre .btn:hover { background: var(--rose-pale); color: #B4233B; }

@media (max-width: 960px) {
  .ligne-livre, .ligne-livre.premier { grid-template-columns: 80px 1fr; }
  .ll-interieur { grid-column: 2; grid-row: 1; }
  .ll-texte { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tuiles { grid-template-columns: 1fr; gap: .8rem; }
  .tuile-visuel { height: 160px; }
  .ligne-livre, .ligne-livre.premier { grid-template-columns: 64px 1fr; gap: .8rem; padding: .8rem; }
  .indice-scroll { font-size: .95rem; }
  .offre { padding: 1.2rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .indice-scroll { animation: none; } }

/* ===== Accueil v5 ===== */
.mots-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 3rem); width: min(100%, 1100px); align-items: start; }
.mots-duo .mot-geant { font-size: min(6.4vw, 10svh, 5.2rem); }
.mots-duo .maquette-mot { width: 100%; max-width: 480px; }
.s-mots { display: flex; align-items: center; justify-content: center; }
.v-frise { padding: .8rem .6rem; }
.frise { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.frise::before { content: ""; position: absolute; left: 6%; right: 2%; top: 2.9rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #F8C35C, #E2A422); }
.frise::after { content: ""; position: absolute; right: -2px; top: calc(2.9rem - 6px); border-left: 13px solid #E2A422; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.frise li { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.frise b { font-size: clamp(.85rem, 1.5vw, 1.12rem); line-height: 1; height: 2.2rem; display: flex; align-items: flex-end; white-space: nowrap; }
.frise li::after { content: ""; order: 2; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid #E2A422; margin: .35rem 0; position: relative; z-index: 1; }
.frise small { order: 3; font-family: var(--texte); font-size: .72rem; font-weight: 700; color: var(--encre-douce); text-align: center; line-height: 1.15; }
.s-livres .offre { margin-top: 1.8rem; }
@media (max-width: 760px) {
  .mots-duo { gap: .6rem; }
  .mots-duo .badge-etape { font-size: .78rem; padding: .3rem .6rem .3rem .3rem; }
  .mots-duo .mot-geant { font-size: 9vw; }
  .mots-duo .seg small { display: none; }
  .frise b { font-size: .95rem; }
  .frise small { font-size: .62rem; }
}
@media (max-width: 600px) {
  .s-ouverture { padding-top: 1.2rem; padding-bottom: 5.2rem; }
  .ouverture-grille { gap: .8rem; }
  .ouverture-grille .titre-anime { font-size: 2.15rem; }
  .eventail-heros { height: 42vw; }
  .puces { margin-top: .7rem; gap: .35rem; }
  .ouverture-grille .boutons { margin-top: .9rem; }
}
@media (max-width: 600px) {
  .ouverture-grille .boutons { flex-wrap: nowrap; gap: .5rem; }
  .ouverture-grille .boutons .btn { padding: .7rem .9rem; font-size: .95rem; }
  .eventail-heros { margin-bottom: 2.4rem; }
  .puces li { padding: .3rem .65rem; }
}

/* Tome 1 au-dessus, puis 2, 3, 4 en dessous */
.eventail img:nth-child(1) { z-index: 4; } .eventail img:nth-child(2) { z-index: 3; } .eventail img:nth-child(3) { z-index: 2; } .eventail img:nth-child(4) { z-index: 1; }
.offre-couv img { position: relative; }
.offre-couv img:nth-child(1) { z-index: 4; } .offre-couv img:nth-child(2) { z-index: 3; } .offre-couv img:nth-child(3) { z-index: 2; } .offre-couv img:nth-child(4) { z-index: 1; }
/* Images réalistes centrées et un peu plus grandes */
.v-images { align-items: center; padding: .5rem; }
.v-images figure { height: auto; justify-content: center; }
.v-images img { height: 172px; max-height: 100%; }
@media (max-width: 600px) { .v-images img { height: 140px; } }
/* Tome 1 sans cadre mis en avant */
.ligne-livre.premier { border: 1px solid var(--ligne); grid-template-columns: 110px minmax(0, 340px) 1fr; padding: 1rem 1.4rem 1rem 1rem; }
@media (max-width: 960px) { .ligne-livre.premier { grid-template-columns: 80px 1fr; } }
@media (max-width: 600px) { .ligne-livre.premier { grid-template-columns: 64px 1fr; padding: .8rem; } }

/* ===== Ouverture v7 ===== */
.preuves { list-style: none; margin: 1.8rem 0 0; padding: .4rem; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.85); border: 1px solid var(--ligne); border-radius: 22px; box-shadow: 0 16px 34px -24px rgba(56,52,47,.45); max-width: 560px; }
.preuves li { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; }
.preuves li + li { border-left: 1px solid var(--ligne); }
.pv-ico { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; }
.pv1 .pv-ico { background: #FFF2CC; } .pv2 .pv-ico { background: #E1F1F4; } .pv3 .pv-ico { background: #FBE3E6; }
.preuves b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.08rem; line-height: 1.15; color: var(--encre); }
.pv-txt > span { display: block; font-family: var(--titre); font-weight: 500; font-size: .86rem; line-height: 1.2; color: #4E4741; }
/* Indicateur de défilement : libellé + rond qui respire avec une flèche qui descend */
.indice-wrap { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: 2.2rem; }
.indice-scroll { position: static; transform: none; display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--canard); font-family: var(--titre); font-weight: 600; font-size: 1.15rem; text-decoration: none; background: none; border: 0; box-shadow: none; padding: 0; }
.indice-scroll:hover { color: var(--canard-fonce); background: none; }
.rond { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--canard); box-shadow: 0 12px 26px -10px rgba(31,110,122,.7); }
.rond::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(36,159,178,.5); animation: respire 2s ease-out infinite; }
@keyframes respire { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.chevrons { display: flex; flex-direction: column; align-items: center; height: 30px; justify-content: center; }
.chevrons i { display: block; width: 13px; height: 13px; border-right: 3.5px solid #fff; border-bottom: 3.5px solid #fff; transform: rotate(45deg); margin-top: -3px; opacity: .3; animation: chevron 1.4s infinite; }
.chevrons i:nth-child(2) { animation-delay: .2s; }
@keyframes chevron { 0% { opacity: .25; transform: translateY(-4px) rotate(45deg); } 50% { opacity: 1; } 100% { opacity: .25; transform: translateY(4px) rotate(45deg); } }
.indice-scroll:hover .rond { background: var(--canard-fonce); }
@media (max-width: 960px) { .preuves { margin-inline: auto; } }
@media (max-width: 600px) {
  .s-ouverture { justify-content: flex-start; padding-top: 1rem; padding-bottom: 1.6rem; min-height: 0; }
  .preuves { margin-top: 1rem; padding: .2rem; border-radius: 18px; }
  .preuves li { flex-direction: column; text-align: center; gap: .3rem; padding: .55rem .3rem; }
  .pv-ico { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
  .preuves b { font-size: .92rem; }
  .pv-txt > span { font-size: .72rem; }
  .indice-scroll { font-size: 1rem; }
  .indice-wrap { margin-top: 1.4rem; }
  .rond { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .chevrons i, .rond::before { animation: none; opacity: 1; } }
/* Téléphone : les scènes jouent toutes seules, sans épinglage */
.js-anime:not(.js-epingle) .s-livre1, .js-anime:not(.js-epingle) .s-toboggan, .js-anime:not(.js-epingle) .s-couleurs { padding: 3.5rem 0; }
.badge-etape .num { white-space: nowrap; }
/* Rien ne doit dépasser sur le côté (les éléments qui arrivent en glissant restent hors champ) */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* La mascotte passe devant les livres */
.ouverture-visuel .mascotte-intro { z-index: 6; }

@media (max-width: 600px) { .eventail-heros { margin-bottom: 3.6rem; } }

/* Curseur tactile sous les scènes (compact) */
.curseur { position: relative; display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: .5rem; width: min(80vw, 360px); margin: .9rem auto 0; padding: .3rem .4rem; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(36,159,178,.25); border-radius: 999px; }
.curseur button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: var(--canard); color: #fff; font: 700 1.2rem/1 var(--titre); cursor: pointer; padding-bottom: .1rem; }
.curseur button:disabled { background: var(--ligne); }
.c-piste { position: relative; height: 2rem; }
.c-piste input { position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; z-index: 2; touch-action: none; }
.c-piste input::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--ciel); }
.c-piste input::-moz-range-track { height: 4px; border-radius: 999px; background: var(--ciel); }
.c-piste input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--turquoise); box-shadow: 0 2px 6px rgba(31,110,122,.35); }
.c-piste input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--turquoise); }
.c-points { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; z-index: 1; }
.c-points span { position: absolute; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--ciel); }
.c-points span.fait { border-color: var(--turquoise); background: var(--turquoise); }
.c-main { position: absolute; left: 0; top: .7rem; font-size: 1.1rem; pointer-events: none; z-index: 3; animation: glisseMain 2.2s ease-in-out infinite; }
@keyframes glisseMain { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(110px); opacity: 1; } 100% { transform: translateX(125px); opacity: 0; } }
.curseur.utilise .c-main { display: none; }
.c-aide { display: none; }
@media (prefers-reduced-motion: reduce) { .c-main { animation: none; } }
.js-anime:not(.js-epingle) .s-mots { flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .c-main { animation: none; } }
@media (max-width: 600px) { .eventail-heros { height: 72vw; margin-bottom: 0; } .indice-wrap { margin-top: 1rem; } }

/* Tome 2 : la couverture s'ouvre sur le toboggan */
.feuille-tob { display: none; } .js-anime .feuille-tob { display: block; z-index: 6; }
/* Tomes 3 et 4 : petits livres qui s'ouvrent */
.mini-livre { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1100 / 808; perspective: 1800px; transform-style: preserve-3d; margin: 0 auto; }
.mini-int { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 16px 34px -18px rgba(56,52,47,.55); display: block; }
.mini-feuille { left: 50%; width: 50%; top: 0; height: 100%; }
.mini-feuille .recto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-feuille .verso { background-size: 200% 100%; background-position: left center; }

/* ===== v12 ===== */
/* Lettres flottantes : jamais derrière le titre */
.f1 { left: 94%; top: 6%; } .f2 { left: 56%; top: 90%; } .f3 { left: 95%; top: 62%; } .f4 { left: 3%; top: 90%; }
.f5 { left: 74%; top: 93%; } .f6 { left: 38%; top: 93%; } .f7 { left: 97%; top: 36%; } .f8 { left: 20%; top: 95%; }
@media (max-width: 960px) { .f1, .f7, .f8, .f6 { display: none; } .f2 { left: 2%; top: 74%; } .f3 { left: 93%; top: 70%; } .f4 { left: 3%; top: 95%; } .f5 { left: 90%; top: 95%; } }
/* Comment ça marche */
.fleche-bas { display: inline-block; animation: descend 1.3s ease-in-out infinite; }
@keyframes descend { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(6px); } }
/* Page cachée du tome 2 : bleu foncé */
.cache { background: var(--canard); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px); }
.cache span { color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.25); }
/* Démarcation des fonds */
.s-chapitre { background: var(--papier); }
.s-couleurs.s-mots { background: var(--creme); }
.s-pourquoi { background: var(--papier); }
.s-livres { background: var(--creme); }
.ligne-livre { background: var(--papier); }
/* Lignes des livres (article) */
.ll-lien-couv { display: block; }
.ligne-livre h3 a { color: var(--encre); text-decoration: none; }
.ligne-livre h3 a:hover { color: var(--canard); }
.ligne-livre:hover { transform: none; }
/* Feuilletage */
.flipbook { position: relative; aspect-ratio: 1000 / 735; perspective: 1600px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: 8px; box-shadow: 0 12px 26px -14px rgba(56,52,47,.55); background: #fff; }
.flipbook:active { cursor: grabbing; }
.fb-page { position: absolute; top: 0; bottom: 0; width: 50%; background-image: var(--fb); background-size: 200% 100%; background-repeat: no-repeat; }
.fb-g { left: 0; background-position: left center; border-radius: 8px 0 0 8px; }
.fb-d { left: 50%; background-position: right center; border-radius: 0 8px 8px 0; }
.fb-g::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(56,52,47,.14), rgba(56,52,47,0) 16%); }
.fb-d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56,52,47,.16), rgba(56,52,47,0) 14%); }
.fb-feuille { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; display: none; z-index: 3; }
.fb-face { position: absolute; inset: 0; background-size: 200% 100%; background-repeat: no-repeat; box-shadow: 0 0 18px rgba(56,52,47,.25); }
.fb-recto { background-position: right center; border-radius: 0 8px 8px 0; }
.fb-verso { background-position: left center; transform: rotateY(180deg); border-radius: 8px 0 0 8px; opacity: 0; }
.fb-coin { position: absolute; top: 0; right: 0; width: 34px; height: 34px; z-index: 4; pointer-events: none; border-radius: 0 8px 0 0;
  background: linear-gradient(225deg, var(--papier) 0 48%, rgba(56,52,47,.25) 50%, #f4efe7 52%, #fff 100%); box-shadow: -3px 3px 6px rgba(56,52,47,.2); animation: corne 2.2s ease-in-out infinite; transform-origin: 100% 0; }
@keyframes corne { 0%, 100% { transform: scale(.55); } 50% { transform: scale(1.25); } }
.flipbook.touche .fb-coin { animation: none; transform: scale(.55); opacity: .7; }
.fb-num { position: absolute; bottom: 6px; right: 8px; z-index: 4; font-size: .72rem; font-weight: 700; color: var(--encre-douce); background: rgba(255,255,255,.85); border-radius: 999px; padding: .05rem .45rem; }
@media (max-width: 960px) { .fb-bloc { grid-column: 2; grid-row: 1; } }
/* Les 4 principes : petites animations */
.v-son .lettre-m { animation: souffle 1.8s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes souffle { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.v-son .oui { animation: parleOui 1.8s ease-in-out infinite; transform-origin: left center; }
@keyframes parleOui { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } }
.v-son .non { animation: nonNon 3.6s ease-in-out infinite; }
@keyframes nonNon { 0%, 70%, 100% { transform: translateX(0); } 74% { transform: translateX(-5px); } 78% { transform: translateX(5px); } 82% { transform: translateX(-4px); } 86% { transform: translateX(3px); } }
.v-couleurs .morceau { animation: vague 2.4s ease-in-out infinite; }
.v-couleurs .morceau:nth-child(2) { animation-delay: .2s; } .v-couleurs .morceau:nth-child(3) { animation-delay: .4s; } .v-couleurs .morceau:nth-child(4) { animation-delay: .6s; }
@keyframes vague { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } }
.v-images figure { animation: avant 4.5s ease-in-out infinite; }
.v-images figure:nth-child(2) { animation-delay: 1.5s; } .v-images figure:nth-child(3) { animation-delay: 3s; }
@keyframes avant { 0%, 34%, 100% { transform: scale(1) rotate(0); z-index: 0; } 10%, 24% { transform: scale(1.14) rotate(-2deg); z-index: 2; } }
.frise li::after { animation: allume 5s infinite; }
.frise li:nth-child(1)::after { animation-delay: 0s; } .frise li:nth-child(2)::after { animation-delay: .8s; } .frise li:nth-child(3)::after { animation-delay: 1.6s; }
.frise li:nth-child(4)::after { animation-delay: 2.4s; } .frise li:nth-child(5)::after { animation-delay: 3.2s; }
@keyframes allume { 0%, 20%, 100% { background: #fff; transform: scale(1); } 6%, 14% { background: #E2A422; transform: scale(1.5); } }
.frise b { transition: transform .3s; }
@media (prefers-reduced-motion: reduce) { .fleche-bas, .fb-coin, .v-son .lettre-m, .v-son .oui, .v-son .non, .v-couleurs .morceau, .v-images figure, .frise li::after { animation: none; } }
/* Mini livres : la page de droite est visible dès le début */
.feuille .face.verso { }

.fb-note { margin: .45rem 0 0; font-size: .75rem; color: var(--encre-douce); text-align: center; font-style: italic; }
.preuves .pv2 .pv-txt > span { line-height: 1.25; }
/* Lettres qui flottent autour du titre, sans passer derrière le texte */
.lettres-titre { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lettres-titre span { position: absolute; font-family: var(--titre); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); opacity: .35; line-height: 1; animation: flotte 7s ease-in-out infinite; }
.intro-titre > *:not(.lettres-titre) { position: relative; z-index: 1; }
.t1 { left: -.4rem; top: -3.4rem; }
.t2 { left: 52%; top: -3.6rem; animation-delay: -2s !important; }
.t3 { right: -4rem; top: 18%; animation-delay: -3.5s !important; }
.t4 { left: 6%; bottom: -3.8rem; animation-delay: -1s !important; }
.t5 { left: 62%; bottom: -3.9rem; animation-delay: -4.5s !important; }
.f3 { left: 95%; top: 64%; } .f5 { left: 82%; top: 92%; } .f7 { left: 97%; top: 30%; }
@media (max-width: 960px) {
  .t1, .t2, .t3 { display: none; }
  .t4 { left: 2%; bottom: -2.6rem; } .t5 { left: auto; right: 2%; bottom: -2.8rem; }
  .f7 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lettres-titre span { animation: none; } }

/* ===== Page Les livres ===== */
.btn-amazon { background: #FFD814; border-color: #FCD200; color: #0F1111; }
.btn-amazon:hover { background: #F7CA00; border-color: #F2C200; color: #0F1111; }
.ll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .5rem; }
.ll-actions .cl-lien { margin: 0; }
.lv-hero { padding: 3.5rem 0 3rem; }
.lv-hero h1 { margin-bottom: .2em; }
.lv-hero .intro { margin-bottom: 1.8rem; }
.lv-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.lv-carte { display: flex; align-items: center; gap: .8rem; background: var(--papier); border: 1px solid var(--ligne); border-radius: 18px; padding: .7rem; text-decoration: none; color: var(--encre); transition: transform .2s ease, box-shadow .2s ease; }
.lv-carte:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(56,52,47,.5); color: var(--encre); }
.lv-carte img { width: 54px; border-radius: 3px; box-shadow: 0 6px 12px -6px rgba(56,52,47,.5); }
.lv-carte span { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.lv-carte b { display: block; font-family: var(--titre); color: var(--canard); }
.lv-tome { padding: 4.5rem 0 3.5rem; scroll-margin-top: 70px; }
.lv-tome:nth-of-type(odd) { background: var(--papier); }
.lv-tome:nth-of-type(even) { background: var(--creme); }
.lv-grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.lv-tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--canard); color: #fff; font-weight: 700; border-radius: 999px; padding: .3rem .9rem .3rem .35rem; font-size: .92rem; margin: 0 0 .8rem; }
.lv-tag .num { background: #fff; color: var(--canard); border-radius: 999px; padding: .1rem .6rem; font-family: var(--titre); }
.lv-infos h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .25em; }
.lv-note { margin: 0 0 .8rem; display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.lv-note span:last-child { color: var(--encre-douce); font-weight: 500; }
.etoiles-note { --remplir: var(--note); font-size: 1.2rem; letter-spacing: .08em; background: linear-gradient(90deg, #F2B43C var(--remplir), #E3DACB var(--remplir)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@property --remplir { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.lv-nouveau { background: #FFF2CC; color: #8A5A00 !important; border-radius: 999px; padding: .15rem .7rem; font-weight: 700 !important; }
.lv-desc { font-size: 1.12rem; font-weight: 600; margin-bottom: .4rem; }
.lv-achat { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.4rem; }
.lv-option, .lv-pack-carte { display: flex; flex-direction: column; gap: .35rem; background: var(--creme); border: 1px solid var(--ligne); border-radius: 20px; padding: 1.1rem 1.1rem 1.2rem; }
.lv-tome:nth-of-type(even) .lv-option { background: var(--papier); }
.lv-option-titre { margin: 0; font-weight: 700; color: var(--encre-douce); }
.lv-prix { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.lv-prix small { font-family: var(--texte); font-size: .85rem; font-weight: 600; color: var(--encre-douce); }
.lv-detail { margin: 0 0 .5rem; font-size: .9rem; color: var(--encre-douce); }
.lv-option .btn, .lv-pack-carte .btn { margin-top: auto; width: 100%; }
.lv-format { font-size: .88rem; font-weight: 700; text-align: center; margin-top: .3rem; }
/* Feuilletage version pro */
.fb-pro { position: sticky; top: 90px; }
.fb-scene { position: relative; display: flex; align-items: center; gap: .6rem; }
.fb-scene .flipbook { flex: 1 1 auto; }
.fb-fleche { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--papier); color: var(--canard); font: 700 1.6rem/1 var(--titre); box-shadow: 0 8px 18px -10px rgba(56,52,47,.6); cursor: pointer; padding-bottom: .15rem; }
.fb-fleche:hover { background: var(--canard); color: #fff; }
.fb-fleche:disabled { opacity: .3; cursor: default; background: var(--papier); color: var(--canard); }
.fb-vignettes { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.fb-vignettes button { width: 76px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, transform .2s, border-color .2s; }
.fb-vignettes button img { border-radius: 6px; display: block; }
.fb-vignettes button:hover { opacity: 1; transform: translateY(-2px); }
.fb-vignettes button.actif { opacity: 1; border-color: var(--turquoise); }
.fb-pro .fb-note { font-style: normal; font-size: .82rem; margin-top: .7rem; }
.flipbook:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 4px; }
/* Bonus du tome */
.lv-bonus { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.5rem; }
.lv-bonus figure { margin: 0; background: var(--creme); border: 1px solid var(--ligne); border-radius: 20px; padding: 1rem; }
.lv-tome:nth-of-type(even) .lv-bonus figure { background: var(--papier); }
.lv-bonus-img { height: 180px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; }
.lv-bonus-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .35s ease; }
.lv-bonus figure:hover .lv-bonus-img img { transform: scale(1.06); }
.lv-bonus figcaption { margin-top: .7rem; font-weight: 700; font-size: .95rem; }
/* Pack */
.lv-pack { padding: 4.5rem 0; background: var(--creme); text-align: center; }
.lv-pack-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 760px; margin: 2rem auto 0; text-align: left; }
.lv-pack-carte { background: var(--papier); }
.lv-mention { margin-top: 1.2rem; font-size: .82rem; color: var(--encre-douce); }
@media (max-width: 960px) {
  .lv-nav { grid-template-columns: 1fr 1fr; }
  .lv-grille { grid-template-columns: 1fr; }
  .fb-pro { position: static; }
}
@media (max-width: 600px) {
  .lv-carte span { font-size: .82rem; }
  .lv-carte img { width: 42px; }
  .lv-achat, .lv-bonus, .lv-pack-cartes { grid-template-columns: 1fr; }
  .fb-fleche { width: 2.1rem; height: 2.1rem; font-size: 1.3rem; }
  .fb-scene { gap: .3rem; }
  .fb-vignettes button { width: 60px; }
  .lv-bonus-img { height: 150px; }
}
/* Bonus intégrés au bloc du livre */
.fb-pro { position: static; }
.lv-inclus { margin-top: 1.6rem; background: var(--rose-pale); border-radius: 22px; padding: 1rem 1rem 1.1rem; }
.lv-tome:nth-of-type(odd) .lv-inclus { background: #FDF0F1; }
.lv-inclus-titre { margin: 0 0 .8rem; font-family: var(--titre); font-weight: 600; font-size: 1.15rem; color: #B4233B; }
.lv-inclus-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.lv-zoom { display: flex; flex-direction: column; gap: .6rem; padding: .6rem; border: 0; border-radius: 16px; background: #fff; cursor: zoom-in; text-align: left; font: inherit; color: var(--encre); box-shadow: 0 8px 20px -14px rgba(56,52,47,.45); transition: transform .2s ease, box-shadow .2s ease; }
.lv-zoom:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(56,52,47,.5); }
.lv-zoom-img { height: 150px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: #fff; }
.lv-zoom-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lv-zoom-txt { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.lv-zoom-txt small { display: block; font-weight: 600; font-size: .78rem; color: var(--encre-douce); margin-top: .15rem; }
/* Agrandissement d'une image */
.zoom-fond { position: fixed; inset: 0; z-index: 100; background: rgba(36,33,30,.78); display: grid; place-items: center; padding: 1.2rem; cursor: zoom-out; opacity: 0; transition: opacity .2s ease; }
.zoom-fond.ouvert { opacity: 1; }
.zoom-fond img { max-width: min(96vw, 1100px); max-height: 88vh; width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.zoom-fermer { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: #fff; color: var(--encre); font: 700 1.5rem/1 var(--titre); cursor: pointer; }
@media (max-width: 600px) { .lv-inclus-grille { gap: .5rem; } .lv-zoom-img { height: 110px; } .lv-zoom-txt { font-size: .8rem; } }
@media (max-width: 960px) {
  .lv-visuel { display: contents; }
  .lv-grille .fb-pro { order: 1; } .lv-grille .lv-infos { order: 2; } .lv-grille .lv-inclus { order: 3; margin-top: 0; }
}
/* Qui fait quoi sur chaque double page */
.lv-roles { background: var(--ciel); border-radius: 18px; padding: .8rem 1rem .9rem; margin: .9rem 0 1rem; }
.lv-roles-titre { margin: 0 0 .5rem; font-family: var(--titre); font-weight: 600; color: var(--canard); }
.lv-role { display: flex; gap: .6rem; align-items: flex-start; margin: .35rem 0 0; line-height: 1.35; }
.lv-role-ico { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.05rem; }
.lv-role b { color: var(--encre); }
/* Choix capitales / minuscules */
.lv-variantes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: .3rem; margin-bottom: .6rem; }
.lv-variantes button { display: flex; flex-direction: column; align-items: center; gap: .05rem; border: 0; border-radius: 10px; background: none; padding: .4rem .3rem; font: 600 .82rem var(--texte); color: var(--encre-douce); cursor: pointer; }
.lv-variantes button span { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; line-height: 1.1; color: var(--encre); }
.lv-variantes button[aria-checked="true"] { background: var(--canard); color: #fff; }
.lv-variantes button[aria-checked="true"] span { color: #fff; }
.lv-var-btn[hidden] { display: none; }
/* Écriture : capitales ou script */
.lv-variantes button span { font-family: var(--texte); font-weight: 700; letter-spacing: .02em; }
.btn-ecriture b { font-family: var(--texte); font-weight: 700; margin-right: .3rem; }
.choix-num { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.choix-num-titre { font-weight: 700; font-size: .92rem; color: var(--encre); margin-right: .2rem; }
.choix-num .btn-ecriture:nth-of-type(2) { background: var(--papier); color: var(--canard); }
.choix-num .btn-ecriture:nth-of-type(2):hover { background: var(--ciel); }
.offre-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.offre-choix > span { font-weight: 700; font-size: .95rem; }
.offre .offre-choix .btn { background: #fff; color: var(--rose); border-color: #fff; padding: .6rem 1rem; }
.offre .offre-choix .btn:hover { background: var(--rose-pale); color: #B4233B; }
.ll-actions { align-items: center; }
/* ===== Panier ===== */
.entete .logo { order: 1; } .nav { order: 2; } .panier-btn { order: 3; } .menu { order: 4; }
.panier-btn { position: relative; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; }
.panier-btn:hover { background: rgba(255,255,255,.25); }
.panier-nb { position: absolute; top: -6px; right: -6px; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--rose); color: #fff; font: 700 .75rem/1.25rem var(--texte); }
.panier-tiroir { position: fixed; inset: 0; z-index: 90; }
.panier-voile { position: absolute; inset: 0; background: rgba(36,33,30,.45); opacity: 0; transition: opacity .25s; }
.panier-boite { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--creme); box-shadow: -20px 0 40px rgba(0,0,0,.2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; padding-top: env(safe-area-inset-top, 0px); }
.panier-tiroir.ouvert .panier-voile { opacity: 1; } .panier-tiroir.ouvert .panier-boite { transform: none; }
.panier-tete { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; background: var(--canard); color: #fff; }
.panier-tete h2 { margin: 0; font-size: 1.3rem; color: #fff; }
.panier-fermer { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; background: #fff; color: var(--encre); font: 700 1.4rem/1 var(--titre); cursor: pointer; }
.panier-liste { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.panier-ligne { display: grid; grid-template-columns: 46px 1fr auto auto; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: .55rem .6rem; }
.panier-ligne img { width: 46px; border-radius: 3px; box-shadow: 0 4px 10px -5px rgba(56,52,47,.5); }
.panier-ligne b { display: block; font-size: .92rem; line-height: 1.2; }
.panier-ligne span { font-size: .8rem; color: var(--encre-douce); }
.panier-prix { font-family: var(--titre); font-weight: 700; color: var(--encre) !important; font-size: .95rem !important; }
.panier-retirer { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--ligne); background: #fff; cursor: pointer; font-size: 1rem; color: var(--encre-douce); }
.panier-vide { text-align: center; color: var(--encre-douce); margin-top: 2rem; }
.panier-combo { padding: 0 1.2rem; }
.panier-astuce { background: var(--rose-pale); border-radius: 14px; padding: .8rem 1rem; font-size: .9rem; }
.panier-combo-lien { display: block; margin-top: .4rem; font-weight: 700; color: #B4233B; }
.panier-pied { padding: 1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ligne); background: #fff; }
.panier-total { display: flex; justify-content: space-between; margin: 0 0 .7rem; font-size: 1.1rem; }
.panier-total b { font-family: var(--titre); }
.panier-payer { width: 100%; }
.panier-note { margin: .6rem 0 0; font-size: .78rem; color: var(--encre-douce); text-align: center; }
.panier-ajout.ajoute { background: var(--digramme) !important; border-color: var(--digramme) !important; color: #fff !important; }
.lv-direct { display: block; text-align: center; font-size: .88rem; font-weight: 700; margin-top: .4rem; }
.lv-direct[hidden], .panier-ajout[hidden] { display: none; }
.lv-option .panier-ajout { width: 100%; margin-top: auto; }
@media (max-width: 820px) { .panier-btn { margin-left: auto; } .menu { margin-left: .5rem; } }
/* Bouton panier : sac en trait fin, sobre */
.panier-btn { width: auto; height: 2.4rem; border-radius: 999px; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .7rem; font: 700 1rem var(--texte); }
.panier-btn:hover { background: rgba(255,255,255,.14); }
.panier-ico { width: 1.45rem; height: 1.45rem; }
.panier-nb { position: static; min-width: 1.35rem; height: 1.35rem; line-height: 1.35rem; background: #fff; color: var(--canard); font-size: .78rem; text-align: center; }
@media (max-width: 820px) { .panier-txt { display: none; } .panier-btn { padding: 0 .5rem; } }
@media (max-width: 820px) { .panier-ico { width: 1.6rem; height: 1.6rem; } }
/* Croix de fermeture : icône centrée */
.panier-fermer, .zoom-fermer, .panier-retirer { display: grid; place-items: center; padding: 0; line-height: 0; }
.panier-fermer svg, .zoom-fermer svg { width: 1.15rem; height: 1.15rem; }
.panier-retirer svg { width: .8rem; height: .8rem; }
.panier-fermer { width: 2.3rem; height: 2.3rem; background: rgba(255,255,255,.16); color: #fff; border: 0; transition: background .2s; }
.panier-fermer:hover { background: rgba(255,255,255,.3); }
.zoom-fermer { color: var(--encre); }
.panier-retirer:hover { color: var(--voyelle); border-color: var(--voyelle); }
.ico-sac { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .35rem; }
/* Achat compact dans la liste des livres (accueil) */
.mini-achat { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .8rem 0 .7rem; max-width: 520px; }
.mini-opt { display: flex; flex-direction: column; gap: .45rem; background: var(--creme); border: 1px solid var(--ligne); border-radius: 16px; padding: .75rem; }
.mini-titre { margin: 0; font-weight: 700; color: var(--encre-douce); font-size: .92rem; display: flex; justify-content: space-between; gap: .4rem; }
.mini-titre b { font-family: var(--titre); color: var(--encre); font-size: 1.15rem; line-height: 1; }
.mini-detail { margin: 0; font-size: .8rem; color: var(--encre-douce); }
.lv-variantes.mini { margin: 0; padding: .2rem; border-radius: 11px; gap: .25rem; }
.lv-variantes.mini button { flex-direction: row; justify-content: center; gap: .3rem; padding: .3rem .2rem; font-size: .76rem; border-radius: 8px; }
.lv-variantes.mini button span { font-size: .85rem; }
.mini-opt .btn { width: 100%; margin-top: auto; }
.mini-opt [hidden] { display: none; }
.ligne-livre .cl-lien { display: inline-block; margin-top: .1rem; }
@media (max-width: 600px) { .mini-achat { grid-template-columns: 1fr; } }
.lv-script[hidden], .lv-note-script[hidden] { display: none; }
.lv-option .lv-script { width: 100%; margin-top: auto; }
.lv-note-script { margin: .35rem 0 0; font-size: .78rem; color: var(--encre-douce); text-align: center; }
/* Boutons d'achat sur une seule ligne */
.panier-ajout, .lv-script, .btn-amazon { white-space: nowrap; }
.lv-option .panier-ajout, .lv-option .lv-script, .lv-option .btn-amazon { padding-left: .7rem; padding-right: .7rem; font-size: clamp(.86rem, 1.05vw, 1rem); }
.mini-opt .panier-ajout, .mini-opt .lv-script, .mini-opt .btn-amazon { padding-left: .6rem; padding-right: .6rem; }
/* ===== Ouverture v8 ===== */
/* Titre toujours sur deux lignes */
.titre-anime .ligne-titre { display: block; white-space: nowrap; }
.ouverture-grille .titre-anime { font-size: min(3.3vw, 3.6rem); }
@media (max-width: 960px) { .ouverture-grille .titre-anime { font-size: min(6.6vw, 3.4rem); } }
/* Couvertures : elles ressortent au survol et mènent à leur fiche */
.eventail-heros .ev-lien { position: absolute; width: 46%; top: 20px; display: block; border-radius: 4px; transition: transform .28s cubic-bezier(.2,.9,.3,1.3), box-shadow .28s ease; }
.eventail-heros .ev-lien img { width: 100%; position: static; transform: none; display: block; border-radius: 4px; }
.eventail-heros .ev-lien:nth-child(1) { left: 2%; transform: rotate(-9deg); z-index: 4; }
.eventail-heros .ev-lien:nth-child(2) { left: 20%; top: 6px; transform: rotate(-3deg); z-index: 3; }
.eventail-heros .ev-lien:nth-child(3) { left: 38%; top: 6px; transform: rotate(3deg); z-index: 2; }
.eventail-heros .ev-lien:nth-child(4) { left: 56%; transform: rotate(9deg); z-index: 1; }
.eventail-heros .ev-lien:hover, .eventail-heros .ev-lien:focus-visible, .eventail-heros .ev-lien.actif { transform: translateY(-22px) scale(1.07) rotate(0deg); z-index: 10; box-shadow: 0 30px 50px -20px rgba(56,52,47,.55); }
/* Pastille « Faites défiler » avec la mascotte */
.indice-wrap { margin-top: 2.2rem; }
.indice-scroll { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: .7rem; padding: .6rem 1.2rem .6rem 4.4rem; border-radius: 999px; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(36,159,178,.35); box-shadow: 0 14px 30px -18px rgba(31,110,122,.6); color: var(--canard); font-family: var(--titre); font-weight: 600; font-size: 1.08rem; text-decoration: none; white-space: nowrap; }
.indice-scroll:hover { background: rgba(255,255,255,.92); color: var(--canard-fonce); }
.cue-mascotte { position: absolute; left: .5rem; bottom: .05rem; width: 3.3rem; height: auto; filter: drop-shadow(0 6px 8px rgba(56,52,47,.22)); animation: coucou 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes coucou { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(0); } }
.indice-scroll .chevrons { height: 26px; }
.indice-scroll .chevrons i { width: 11px; height: 11px; border-right: 3px solid var(--canard); border-bottom: 3px solid var(--canard); }
.txt-court { display: none; }
@media (max-width: 600px) { .indice-scroll .txt { display: none; } .txt-court { display: inline; } .indice-scroll { font-size: 1rem; padding-left: 3.9rem; } .cue-mascotte { width: 2.9rem; } }
@media (prefers-reduced-motion: reduce) { .cue-mascotte { animation: none; } }
/* Petite fenêtre d'offre (bas de l'écran) */
.fomo { position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: .8rem; max-width: min(360px, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--ligne); border-radius: 18px; padding: .7rem .9rem .7rem .7rem; box-shadow: 0 18px 40px -18px rgba(56,52,47,.55); transform: translateY(140%); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .3s; text-decoration: none; color: var(--encre); }
.fomo.visible { transform: none; opacity: 1; }
.fomo img { width: 46px; border-radius: 3px; box-shadow: 0 6px 12px -6px rgba(56,52,47,.5); flex: 0 0 auto; }
.fomo p { margin: 0; font-size: .88rem; line-height: 1.3; }
.fomo b { color: var(--encre); }
.fomo .fomo-cta { display: block; margin-top: .2rem; color: var(--canard); font-weight: 700; font-size: .82rem; }
.fomo-fermer { position: absolute; top: -9px; right: -9px; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--ligne); background: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--encre-douce); }
.fomo-fermer svg { width: .7rem; height: .7rem; }
@media (max-width: 600px) { .fomo { left: .6rem; right: .6rem; max-width: none; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); } }
.ouverture-grille .titre-anime { font-size: min(3.8vw, 4rem); }
@media (max-width: 960px) { .ouverture-grille .titre-anime { font-size: min(7.6vw, 3.6rem); } }
.indice-scroll { left: auto; bottom: auto; transform: none; }
/* Couvertures : elles se soulèvent sans passer devant les autres */
.eventail-heros .ev-lien:nth-child(1) { --rot: -9deg; } .eventail-heros .ev-lien:nth-child(2) { --rot: -3deg; }
.eventail-heros .ev-lien:nth-child(3) { --rot: 3deg; } .eventail-heros .ev-lien:nth-child(4) { --rot: 9deg; }
.eventail-heros .ev-lien:hover, .eventail-heros .ev-lien:focus-visible, .eventail-heros .ev-lien.actif { transform: translateY(-16px) rotate(var(--rot)); box-shadow: 0 24px 36px -20px rgba(56,52,47,.5); }
.eventail-heros .ev-lien:nth-child(1):hover, .eventail-heros .ev-lien:nth-child(1).actif { z-index: 4; }
.eventail-heros .ev-lien:nth-child(2):hover, .eventail-heros .ev-lien:nth-child(2).actif { z-index: 3; }
.eventail-heros .ev-lien:nth-child(3):hover, .eventail-heros .ev-lien:nth-child(3).actif { z-index: 2; }
.eventail-heros .ev-lien:nth-child(4):hover, .eventail-heros .ev-lien:nth-child(4).actif { z-index: 1; }
/* Titre centré sur téléphone et tablette */
@media (max-width: 960px) { .ouverture-grille .titre-anime { text-align: center; } .titre-anime .ligne-titre { margin-inline: auto; } }
/* Bandeau des preuves plus fin */
.preuves { padding: .25rem; }
.preuves li { padding: .45rem .7rem; gap: .55rem; }
.pv-ico { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
.preuves b { font-size: 1rem; }
.pv-txt > span, .preuves .pv2 .pv-txt > span { font-size: .76rem; line-height: 1.2; }
@media (max-width: 600px) {
  .preuves { padding: .15rem; border-radius: 16px; }
  .preuves li { padding: .35rem .25rem; gap: .15rem; }
  .pv-ico { width: 1.6rem; height: 1.6rem; font-size: .85rem; }
  .preuves b { font-size: .84rem; }
  .pv-txt > span, .preuves .pv2 .pv-txt > span { font-size: .64rem; line-height: 1.15; }
}
.preuves { grid-template-columns: 1fr 1.4fr 1fr; }
@media (max-width: 600px) {
  .preuves .pv-ico { display: none; }
  .pv1 b::before { content: "⭐ "; } .pv2 b::before { content: "👩‍🏫 "; } .pv3 b::before { content: "🧒 "; }
  .preuves b::before { font-size: .8em; }
  .preuves li { padding: .45rem .25rem; }
}
@media (max-width: 600px) { .preuves { grid-template-columns: 1fr 1.25fr 1fr; } .preuves b { white-space: nowrap; font-size: .8rem; } }
/* Notification de vente : discrète */
.fomo { padding: .55rem .9rem .55rem .55rem; gap: .65rem; max-width: min(320px, calc(100vw - 2rem)); border-radius: 16px; }
.fomo-img { flex: 0 0 auto; width: 38px; display: grid; place-items: center; font-size: 1.4rem; }
.fomo-img img { width: 38px; border-radius: 3px; box-shadow: 0 4px 10px -5px rgba(56,52,47,.5); }
.fomo p { font-size: .82rem; line-height: 1.25; }
.fomo-tete { display: block; font-size: .7rem; font-weight: 700; color: var(--digramme); text-transform: uppercase; letter-spacing: .04em; }
.fomo-tete::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--digramme); margin-right: .35rem; vertical-align: .08em; }
.fomo b { display: block; font-size: .86rem; }
.fomo-quand { display: block; color: var(--encre-douce); font-size: .74rem; }
@media (max-width: 600px) { .fomo { right: auto; max-width: calc(100vw - 1.2rem); } }
/* Pack dans la notification : couvertures en éventail */
.fomo-pile { position: relative; width: 62px; height: 52px; }
.fomo-pile img { position: absolute; top: 4px; width: 30px; left: calc(var(--i) * 32px / var(--n)); transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 8deg)); transform-origin: 50% 100%; border-radius: 2px; box-shadow: 0 3px 7px -3px rgba(56,52,47,.6); z-index: calc(10 - var(--i)); }
.fomo-nb { position: absolute; right: -4px; bottom: -2px; z-index: 20; background: var(--rose); color: #fff; font: 700 .68rem/1 var(--texte); padding: .2rem .3rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* ===== Inclus avec le livre : cartes + livre ===== */
.lv-inclus { background: var(--rose-pale); padding: 1rem 1rem 1.2rem; }
.inclus-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .6rem; }
.inclus-item { display: flex; flex-direction: column; align-items: center; gap: .7rem; background: none; border: 0; padding: 0; font: inherit; color: var(--encre); cursor: zoom-in; text-align: center; }
.inclus-visuel { height: 150px; width: 100%; display: grid; place-items: center; }
.inclus-cartes { max-height: 140px; max-width: 100%; width: auto; filter: drop-shadow(0 10px 12px rgba(56,52,47,.28)); transform: rotate(-3deg); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); }
.inclus-item:hover .inclus-cartes { transform: rotate(0) scale(1.05); }
/* Livre ouvert : couverture rigide, tranche, ombre de la reliure */
.mock-livre { display: block; width: min(100%, 230px); background: var(--canard); padding: 4px 4px 7px; border-radius: 6px; box-shadow: 0 18px 26px -14px rgba(31,40,45,.6); transform: perspective(800px) rotateX(12deg); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); }
.inclus-item:hover .mock-livre { transform: perspective(800px) rotateX(4deg) scale(1.04); }
.mock-pages { position: relative; display: block; background: #fff; border-radius: 2px; box-shadow: 0 3px 0 #EDE6DA, 0 5px 0 #E2D9CB; }
.mock-pages img { display: block; width: 100%; height: auto; border-radius: 2px; }
.mock-pages::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 18%; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.12) 40%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0)); pointer-events: none; }
.inclus-plus { align-self: center; margin-top: -2.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font: 700 1.5rem/1 var(--titre); box-shadow: 0 6px 12px -6px rgba(248,85,109,.8); }
.inclus-txt b { display: block; font-size: .92rem; line-height: 1.25; }
.inclus-txt small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.3; color: var(--encre-douce); font-weight: 600; }
@media (max-width: 600px) {
  .inclus-duo { gap: .35rem; }
  .inclus-visuel { height: 110px; }
  .inclus-cartes { max-height: 104px; }
  .inclus-plus { width: 1.8rem; height: 1.8rem; font-size: 1.2rem; margin-top: -3rem; }
  .inclus-txt b { font-size: .8rem; } .inclus-txt small { font-size: .68rem; }
}
.inclus-visuel { height: 172px; }
.mock-livre { width: min(100%, 205px); }
@media (max-width: 600px) { .inclus-visuel { height: 112px; } .mock-livre { width: min(100%, 140px); } }
/* Bonus v2 : cartes sur fond blanc, livre au même style que le feuilletage, signe + centré */
.inclus-carte-fond { display: grid; place-items: center; height: 100%; max-width: 100%; background: #fff; border-radius: 10px; padding: .5rem; box-shadow: 0 12px 26px -14px rgba(56,52,47,.55); transform: rotate(-2deg); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); box-sizing: border-box; }
.inclus-item:hover .inclus-carte-fond { transform: rotate(0) scale(1.04); }
.inclus-cartes, .inclus-item:hover .inclus-cartes { filter: none; transform: none; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.mock-livre, .inclus-item:hover .mock-livre { background: none; padding: 0; border-radius: 8px; transform: none; box-shadow: 0 12px 26px -14px rgba(56,52,47,.55); }
.inclus-item:hover .mock-livre { transform: scale(1.04); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); }
.mock-pages { border-radius: 8px; box-shadow: none; overflow: hidden; }
.mock-pages img { border-radius: 8px; }
.mock-pages::after { width: 30%; background: linear-gradient(90deg, rgba(56,52,47,0), rgba(56,52,47,.14) 49.5%, rgba(56,52,47,.16) 50.5%, rgba(56,52,47,0)); }
.inclus-plus { align-self: start; margin-top: calc(172px / 2 - 1.1rem); padding: 0; line-height: 0; font-size: 0; }
.inclus-plus svg { width: 1.1rem; height: 1.1rem; display: block; }
@media (max-width: 600px) {
  .inclus-plus { margin-top: calc(112px / 2 - .9rem); }
  .inclus-plus svg { width: .9rem; height: .9rem; }
  .inclus-carte-fond { padding: .3rem; border-radius: 8px; }
}
.inclus-carte-fond { height: auto; }
.inclus-cartes, .inclus-item:hover .inclus-cartes { max-height: 150px; }
@media (max-width: 600px) { .inclus-cartes, .inclus-item:hover .inclus-cartes { max-height: 98px; } }
/* Le + se place exactement entre les deux images (calculé en JS) */
.inclus-duo { position: relative; grid-template-columns: 1fr 1fr; column-gap: 2.8rem; }
.inclus-plus { position: absolute; left: 50%; top: calc(172px / 2); margin: 0; transform: translate(-50%, -50%); }
@media (max-width: 600px) { .inclus-duo { column-gap: 2.2rem; } .inclus-plus { top: calc(112px / 2); } }
.inclus-duo { column-gap: 3.4rem; }
@media (max-width: 600px) { .inclus-duo { column-gap: 2.6rem; } }
/* Bonus v3 : vraies cartes étalées (ombres incluses dans l'image), sans cadre */
.inclus-carte-fond, .inclus-item:hover .inclus-carte-fond { background: none; padding: 0; box-shadow: none; border-radius: 0; transform: none; }
.inclus-item:hover .inclus-carte-fond { transform: scale(1.04); }
.inclus-cartes, .inclus-item:hover .inclus-cartes { max-height: 160px; }
@media (max-width: 600px) { .inclus-cartes, .inclus-item:hover .inclus-cartes { max-height: 104px; } }
.inclus-carte-fond { max-width: 90%; }
.mock-livre { max-width: 90%; }
/* Flèches du feuilletage : icônes centrées */
.fb-fleche { display: grid; place-items: center; padding: 0; line-height: 0; font-size: 0; }
.fb-fleche svg { width: 1.25rem; height: 1.25rem; display: block; }
@media (max-width: 600px) { .fb-fleche svg { width: 1rem; height: 1rem; } }
/* Mini-livres des tomes 3 et 4 : ombre de reliure qui reste une fois le livre ouvert */
.mini-livre::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 9%; transform: translateX(-50%); z-index: 3; pointer-events: none; opacity: var(--pli, 0);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(56,52,47,.10) 42%, rgba(56,52,47,.22) 50%, rgba(56,52,47,.10) 58%, rgba(0,0,0,0) 100%); }
.lv-prix-amz { font-size: 1.35rem; color: var(--encre-douce); }
/* Carte « Papier » : la couverture du livre remplit la carte au lieu d'un grand vide */
.lv-papier-couv { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; padding: .4rem 0 .9rem; }
.lv-papier-couv img { height: 100%; max-height: 165px; width: auto; border-radius: 3px; transform: rotate(-4deg); box-shadow: 6px 14px 22px -10px rgba(56,52,47,.55), inset 0 0 0 1px rgba(0,0,0,.04); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); }
.lv-papier-couv:hover img { transform: rotate(0) translateY(-4px) scale(1.04); }
.lv-option .lv-detail { margin-bottom: .2rem; }
@media (max-width: 600px) {
  .lv-papier-couv { padding: .3rem 0 .7rem; }
  .lv-papier-couv img { max-height: 130px; }
}
/* La couverture prend la place restante, sans rendre la carte plus haute que la carte Numérique */
.lv-papier-couv { position: relative; flex: 1 1 0; min-height: 110px; padding: 0; margin: .3rem 0 .9rem; }
.lv-papier-couv img { position: absolute; left: 50%; top: 50%; height: 100%; max-height: 170px; width: auto; transform: translate(-50%, -50%) rotate(-4deg); }
.lv-papier-couv:hover img { transform: translate(-50%, -52%) rotate(0) scale(1.04); }
@media (max-width: 600px) { .lv-papier-couv { flex: 0 0 auto; height: 130px; } }