/* Mon cahier récré : l'identité vient du logo (aquarelle, lettres rondes, loutre) et des visuels du cahier de Noël.
   Fond neige, encre bleu nuit pour la lisibilité, touches de couleurs aquarelle du logo, jamais criardes.
   Mobile d'abord : les règles de base visent le téléphone, les écrans larges sont ajoutés en bas. */

:root {
  --encre: #1f3566; --texte: #34405f; --gris: #69738e; --ligne: #e2e8f1;
  --papier: #fffefb; --neige: #f3f7fc; --creme: #fbf4e6;
  --bleu: #4f8fc0; --jaune: #e9b146; --corail: #e5736d; --corail-fonce: #c25550; --vert: #66a88b; --lilas: #9d89cf; --ciel: #a9c9ec;
  --surligne: rgba(242, 201, 95, .55);
  --rayon: 22px; --ombre: 0 2px 4px rgba(31, 53, 102, .06), 0 14px 34px -14px rgba(31, 53, 102, .22);
  --ombre-page: 0 1px 2px rgba(31, 53, 102, .1), 0 20px 40px -16px rgba(31, 53, 102, .35);
  --gouttiere: 16px; --manuscrit: 'Caveat', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 16.5px; line-height: 1.6; color: var(--texte); background: var(--papier); overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--encre); line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 6.4vw, 60px); }
h2 { font-size: clamp(28px, 4.6vw, 44px); }
h3 { font-size: 20px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.etape h1:focus { outline: none; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centre { text-align: center; }
.intro { font-size: 18px; color: var(--gris); max-width: 38em; margin-top: 14px; }
.centre .intro, .intro.centre { margin-left: auto; margin-right: auto; }
.perso { font-weight: 800; color: var(--encre); background: linear-gradient(transparent 58%, var(--surligne) 58%); padding: 0 .08em; border-radius: 2px; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 28px; border: 0; border-radius: 999px;
  background: var(--corail); color: #fff; text-decoration: none; font-family: 'Fredoka'; font-weight: 600; font-size: 18px; box-shadow: 0 4px 0 var(--corail-fonce);
  transition: transform .12s, box-shadow .12s; }
.bouton:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--corail-fonce); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bouton-petit { min-height: 42px; padding: 8px 18px; font-size: 16px; }
.bouton-clair { background: #fff; color: var(--encre); box-shadow: 0 4px 0 var(--ligne); border: 2px solid var(--ligne); }
.bouton-clair:hover { box-shadow: 0 2px 0 var(--ligne); }
.lien { font-weight: 800; color: var(--encre); text-decoration: underline; text-decoration-color: var(--ciel); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.lien:hover { text-decoration-color: var(--corail); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 6px var(--gouttiere); background: rgba(255, 254, 251, .96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.logo img { height: 64px; width: auto; }
.menu { display: none; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.entete-actions .bouton { display: none; }
.panier-lien { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--encre); }
.icone-panier, .icone-panier svg { display: block; width: 26px; height: 26px; }
.pastille-nb { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; border-radius: 10px; background: var(--corail); color: #fff; font-size: 11.5px; font-weight: 800;
  display: grid; place-items: center; padding: 0 4px; }
.burger { width: 44px; height: 44px; border: 0; background: none; display: grid; place-content: center; gap: 5px; }
.burger i { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--encre); transition: transform .2s, opacity .2s; }
.menu-ouvert .burger i:nth-of-type(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-ouvert .burger i:nth-of-type(2) { opacity: 0; }
.menu-ouvert .burger i:nth-of-type(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu-ouvert .menu { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--ligne); padding: 8px var(--gouttiere) 18px; }
.menu a { text-decoration: none; font-weight: 800; color: var(--encre); padding: 12px 0; border-bottom: 1px dashed var(--ligne); }
.menu a[aria-current="page"] { color: var(--corail); }

/* ---------- Sections ---------- */
.section { padding: 64px var(--gouttiere); }
.section > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.fond-neige { background: var(--neige); }
.fond-creme { background: var(--creme); }

/* ---------- Haut de page ---------- */
.hero { position: relative; overflow: hidden; padding: 28px var(--gouttiere) 56px; background: linear-gradient(180deg, #e8f1fb 0%, #f6f9fd 55%, var(--papier) 100%); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, #fff 1.5px, transparent 2px), radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 46px 46px, 27px 27px; background-position: 0 0, 13px 19px; }
.hero-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1160px; margin: 0 auto; }
.saison { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #d9e6f4; border-radius: 999px; padding: 4px 14px 4px 6px;
  font-size: 14.5px; font-weight: 800; color: var(--encre); }
.saison img { width: 30px; height: 30px; object-fit: contain; }
.hero h1 { margin-top: 16px; max-width: 12em; }
.hero .chapo { font-size: 18px; margin-top: 16px; max-width: 32em; }
.essai { margin-top: 24px; background: #fff; border-radius: 20px; padding: 14px; box-shadow: var(--ombre); max-width: 460px; }
.essai label { display: block; font-size: 14px; font-weight: 800; color: var(--encre); margin-bottom: 8px; }
.essai-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.essai-ligne .bouton { flex: 1 1 auto; }
.essai input { flex: 1 1 180px; min-width: 0; height: 52px; border: 2px solid var(--ligne); border-radius: 999px; padding: 0 18px; font-weight: 800; font-size: 18px; background: var(--neige); }
.essai input:focus { outline: none; border-color: var(--bleu); background: #fff; }
.essai .bouton { padding: 12px 20px; }
.essai small { display: block; margin-top: 8px; color: var(--gris); font-size: 13.5px; }
.hero-visuel { position: relative; max-width: 520px; width: 100%; margin: 0 auto; aspect-ratio: 1 / 1.02; }
.hero-visuel .couv { position: absolute; width: 62%; }
.hero-visuel .couv:nth-child(1) { left: 0; top: 5%; transform: rotate(-6deg); }
.hero-visuel .couv:nth-child(2) { right: 0; top: 0; transform: rotate(5deg); z-index: 2; }
.hero-loutre { position: absolute; z-index: 3; width: 34%; left: -2%; bottom: -4%; filter: drop-shadow(0 10px 12px rgba(31, 53, 102, .2)); }
.garanties { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; color: var(--gris); list-style: none; }
.garanties li { display: flex; align-items: center; gap: 6px; }
.garanties li::before { content: ''; width: 18px; height: 18px; flex: none; background: url('../img/deco/etoile.png') center / contain no-repeat; }

/* ---------- Couverture du cahier, remplie en direct ---------- */
.couv { position: relative; aspect-ratio: 1055 / 1491; container-type: inline-size; border-radius: 6px; overflow: hidden; box-shadow: var(--ombre-page); background: #fff; }
.couv > img { width: 100%; height: 100%; object-fit: cover; }
.couv-nom { position: absolute; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka'; font-weight: 600; color: var(--encre);
  font-size: 6.4cqw; line-height: 1; white-space: nowrap; overflow: hidden; }
.couv-nom span { max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
.couv-niveau { position: absolute; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka'; font-weight: 600; color: var(--encre); font-size: 3.8cqw; }
.couv-tete { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: rgba(255, 255, 255, .78); border: .6cqw dashed var(--bleu); color: var(--bleu); font-size: 2.2cqw; font-weight: 800; text-align: center; line-height: 1.1; }
.couv-tete.avec-photo { border: .8cqw solid #fff; background: #fff; box-shadow: 0 .6cqw 1.4cqw rgba(31, 53, 102, .25); }
.couv-tete img { width: 100%; height: 100%; object-fit: cover; }
.couv-bientot { display: grid; place-content: center; text-align: center; background: linear-gradient(160deg, #f6efe2, #e8eef2); }
.couv-bientot .couv-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.couv-bandeau { position: relative; display: grid; gap: 3cqw; margin: 0 8cqw; padding: 5cqw 4cqw; border-radius: 5cqw; background: rgba(255, 255, 255, .88); box-shadow: 0 1cqw 3cqw rgba(31, 53, 102, .15); }
.couv-bientot p { font-size: 5cqw; color: var(--encre); font-weight: 800; line-height: 1.2; }
.nuancier { display: flex; justify-content: center; gap: 2.4cqw; }
.nuancier span { width: 13cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .7); }

/* ---------- Pages d'exemple (fond aquarelle + texte placé dans les cadres) ---------- */
.page-ex { position: relative; aspect-ratio: 1055 / 1491; container-type: inline-size; border-radius: 6px; overflow: hidden; box-shadow: var(--ombre-page); background: #fff; color: var(--encre); }
.page-ex > img { width: 100%; height: 100%; object-fit: cover; }
.page-ex > div, .page-ex > span { position: absolute; }
.pe-titre { left: 13%; top: 2.1%; width: 80%; height: 6.6%; display: flex; align-items: center; font-family: 'Fredoka'; font-weight: 600; font-size: 4.6cqw; white-space: nowrap; overflow: hidden; }
.page-ex p, .page-ex li { font-size: 3cqw; line-height: 1.35; font-weight: 700; }
.page-ex .perso { background: linear-gradient(transparent 60%, rgba(255, 255, 255, .85) 60%); }
.pe-b { left: 6.5%; width: 87%; padding: 3.2cqw 4cqw 3cqw 11cqw; }
.pe-b i { position: absolute; left: 3cqw; top: 3cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal;
  font-family: 'Fredoka'; font-size: 3.4cqw; color: var(--encre); box-shadow: 0 .3cqw .8cqw rgba(31, 53, 102, .15); }
.pe-b1 { top: 11.2%; height: 23%; }
.pe-b2 { top: 36.6%; height: 22.5%; }
.pe-b3 { top: 61%; height: 21%; }
.pe-calcul { margin-top: 2.6cqw; font-family: 'Fredoka'; font-size: 4.2cqw !important; }
.pe-case { display: inline-block; width: 11cqw; height: 6.4cqw; vertical-align: middle; background: #fff; border: .45cqw dashed var(--jaune); border-radius: 1.4cqw; }
.pe-choix { margin-top: 2.4cqw; }
.pe-choix span { display: inline-block; margin: 0 .8cqw; padding: .3cqw 2cqw; border-radius: 3cqw; background: #fff; border: .35cqw solid var(--ciel); }
.pe-seyes { display: block; margin-top: 2.4cqw; height: 8cqw; border-radius: 1cqw; background-color: rgba(255, 255, 255, .85);
  background-image: repeating-linear-gradient(to bottom, transparent 0 1.9cqw, #b8c6e6 1.9cqw 2.05cqw), linear-gradient(to right, transparent 5cqw, #f0a3b1 5cqw 5.25cqw, transparent 5.25cqw); }
.pe-ingr { left: 11.4%; top: 11%; width: 19.6%; height: 35%; padding: 2.6cqw 2cqw; }
.pe-etapes { left: 36%; top: 11%; width: 51%; height: 35%; padding: 2.6cqw 3cqw; }
.pe-dessin { left: 11%; top: 50%; width: 79%; height: 21%; padding: 2.6cqw 3.4cqw; }
.pe-recette strong { display: block; font-family: 'Fredoka'; font-weight: 600; font-size: 3.4cqw; margin-bottom: 1.6cqw; }
.pe-recette ul, .pe-recette ol { padding-left: 3.6cqw; display: grid; gap: 1.6cqw; }
.pe-photo { left: 39%; top: 6.9%; width: 22%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fffaf0; }
.pe-photo img { width: 100%; height: 100%; object-fit: cover; }
.pe-photo img[src*="loutre"] { width: 82%; height: 82%; object-fit: contain; }
.pe-dip { left: 12.5%; top: 31.3%; width: 75.5%; height: 13.4%; display: grid; place-content: center; text-align: center; }
.pe-dip small { font-size: 2.8cqw; font-weight: 700; color: var(--gris); }
.pe-dip small:first-child { font-family: 'Fredoka'; font-size: 3.6cqw; color: var(--encre); }
.pe-dip strong { font-family: 'Fredoka'; font-weight: 600; font-size: 8cqw; line-height: 1.05; color: var(--encre); }
.pe-sign { top: 51.8%; width: 31%; height: 9%; display: grid; place-items: center; font-size: 2.8cqw; font-weight: 700; text-align: center; padding: 0 2cqw; }
.pe-sign.g { left: 14.9%; }
.pe-sign.d { left: 54%; }

/* ---------- Bien plus qu'un prénom ---------- */
.exemples { display: grid; gap: 18px; margin-top: 36px; }
.exemple { position: relative; border-radius: var(--rayon); padding: 24px 22px 24px; background-size: cover; background-position: center; box-shadow: var(--ombre); overflow: hidden; min-height: 210px; }
.exemple.t-bleu { background-image: url('../img/textures/bleu.jpg'); }
.exemple.t-jaune { background-image: url('../img/textures/jaune.jpg'); }
.exemple.t-rose { background-image: url('../img/textures/rose.jpg'); }
.exemple .qui { display: inline-block; font-size: 13.5px; font-weight: 800; color: var(--encre); background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 3px 12px; }
.exemple blockquote { margin-top: 14px; font-size: 18px; font-weight: 700; color: var(--encre); line-height: 1.45; padding-right: 74px; }
.exemple img { position: absolute; right: 8px; bottom: 6px; width: 92px; }

/* ---------- Comment ça marche ---------- */
.etapes { list-style: none; display: grid; gap: 14px; margin-top: 36px; counter-reset: e; }
.etapes li { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: var(--rayon); padding: 12px 18px 12px 10px; box-shadow: var(--ombre); }
.etapes img { width: 84px; height: 84px; object-fit: contain; }
.etapes h3 { font-size: 19px; }
.etapes h3::before { counter-increment: e; content: counter(e) '. '; color: var(--corail); }
.etapes p { font-size: 15px; color: var(--gris); }

/* ---------- Produit de saison ---------- */
.saison-grille { display: grid; gap: 34px; align-items: center; }
.galerie { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 24px; margin: 0 calc(-1 * var(--gouttiere)); padding-left: var(--gouttiere);
  padding-right: var(--gouttiere); scroll-padding-inline: var(--gouttiere); scrollbar-width: thin; }
.galerie > * { flex: none; width: 70%; max-width: 300px; scroll-snap-align: start; }
.palettes-mini { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 26px; }
.palettes-mini span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--ligne); border-radius: 999px; padding: 5px 14px 5px 6px; font-weight: 800; font-size: 14.5px; }
.palettes-mini i { display: flex; }
.palettes-mini i b { width: 16px; height: 16px; border-radius: 50%; margin-right: -4px; border: 2px solid #fff; }
.liste-coche { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.liste-coche li { padding-left: 30px; position: relative; }
.liste-coche li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: url('../img/deco/flocon.png') center / contain no-repeat; }

/* ---------- Pourquoi les enfants vont aimer ---------- */
.raisons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.raison { background: #fff; border-radius: var(--rayon); padding: 18px 14px; text-align: center; box-shadow: var(--ombre); }
.raison img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 8px; }
.raison h3 { font-size: 17px; }
.raison p { font-size: 14px; color: var(--gris); margin-top: 4px; }

/* ---------- Confiance ---------- */
.confiance { display: grid; gap: 26px; align-items: center; background: #fff; border-radius: 28px; padding: 28px 22px; box-shadow: var(--ombre); }
.confiance > img { width: 150px; margin: 0 auto; }
.confiance ul { list-style: none; display: grid; gap: 14px; margin-top: 16px; }
.confiance li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.confiance li > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--neige); font-size: 18px; }
.confiance b { display: block; color: var(--encre); }
.confiance li p { font-size: 15px; color: var(--gris); }

/* ---------- Collections à venir ---------- */
.collections { display: grid; gap: 14px; margin-top: 30px; }
.collection { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; background: #fff; border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); }
.collection p { grid-column: 1 / -1; font-size: 15px; color: var(--gris); }
.etiquette { display: inline-block; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 3px 11px; background: var(--neige); color: var(--gris); white-space: nowrap; }
.etiquette.dispo { background: #e3f3ea; color: #2f7254; }
.collection.actuelle { border: 2px solid var(--vert); }

/* ---------- Questions ---------- */
.faq { max-width: 780px; margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--ligne); padding: 16px 0; }
.faq summary { font-family: 'Fredoka'; font-weight: 600; font-size: 18px; color: var(--encre); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--corail); font-size: 24px; line-height: 1; transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--gris); }

/* ---------- Bandeau d'appel ---------- */
.appel { text-align: center; }
.appel img { width: 140px; margin: 0 auto 8px; }
.appel .bouton { margin-top: 22px; }

/* ---------- Pages simples (FAQ, à propos, légal) ---------- */
.page-tete { padding: 44px var(--gouttiere) 10px; background: linear-gradient(180deg, #e8f1fb, var(--papier)); }
.page-tete > * { max-width: 780px; margin: 0 auto; }
.texte { max-width: 780px; margin: 0 auto; }
.texte h2 { font-size: 26px; margin: 34px 0 10px; }
.texte p, .texte li { margin-top: 10px; }
.texte ul { padding-left: 20px; }
.a-venir { background: var(--creme); border-radius: 14px; padding: 12px 16px; font-size: 15px; margin-top: 16px; }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; gap: 30px; }
.fiche-galerie .principale { max-width: 420px; margin: 0 auto; }
.miniatures { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.miniatures button { width: 62px; aspect-ratio: 1055 / 1491; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; background: #fff; box-shadow: 0 2px 6px rgba(31, 53, 102, .15); }
.miniatures button[aria-pressed="true"] { border-color: var(--corail); }
.miniatures img { width: 100%; height: 100%; object-fit: cover; }
.fiche-info h1 { font-size: clamp(32px, 5vw, 46px); }
.niveaux-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.niveaux-pastilles span { background: #fff; border: 1.5px solid var(--ligne); border-radius: 12px; padding: 5px 12px; font-weight: 800; font-size: 14.5px; color: var(--encre); }
.infos-achat { display: grid; gap: 8px; margin-top: 22px; background: var(--neige); border-radius: 18px; padding: 16px 18px; font-size: 15px; }
.infos-achat b { color: var(--encre); }
.barre-achat { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gouttiere);
  background: rgba(255, 254, 251, .97); border-top: 1px solid var(--ligne); }
.barre-achat span { font-size: 14px; font-weight: 800; color: var(--encre); line-height: 1.2; }

/* ---------- Configurateur ---------- */
.config { max-width: 1160px; margin: 0 auto; padding: 18px var(--gouttiere) 120px; display: grid; gap: 22px; }
.progression { display: grid; gap: 8px; }
.progression-texte { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--gris); }
.progression-barre { height: 10px; border-radius: 10px; background: var(--neige); overflow: hidden; }
.progression-barre span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--bleu), var(--vert), var(--jaune), var(--corail), var(--lilas)); transition: width .35s; }
.bulle { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: end; }
.bulle img { width: 76px; height: 76px; object-fit: contain; }
.bulle p { position: relative; background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; box-shadow: var(--ombre); font-family: var(--manuscrit); font-size: 23px; line-height: 1.15; color: var(--encre); }
.etape h1 { font-size: clamp(28px, 6vw, 40px); margin-top: 18px; }
.etape .aide { color: var(--gris); margin-top: 6px; font-size: 15.5px; }
.attention { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: var(--corail-fonce); font-weight: 700; font-size: 14.5px; }
.champ { display: grid; gap: 6px; margin-top: 18px; }
.champ > span, .champ > legend { font-weight: 800; color: var(--encre); font-size: 15px; }
.champ input[type="text"], .champ select { height: 54px; border: 2px solid var(--ligne); border-radius: 14px; padding: 0 14px; font-weight: 700; font-size: 17px; background: #fff; width: 100%; }
.champ input:focus, .champ select:focus { outline: none; border-color: var(--bleu); }
fieldset.champ { border: 0; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tuile { min-height: 64px; border: 2px solid var(--ligne); border-radius: 16px; background: #fff; padding: 8px; display: grid; place-content: center; text-align: center; }
.tuile b { font-family: 'Fredoka'; font-weight: 600; font-size: 20px; color: var(--encre); }
.tuile small { font-size: 12.5px; color: var(--gris); }
.tuile[aria-pressed="true"], .tuile[aria-checked="true"] { border-color: var(--bleu); background: #eef5fc; box-shadow: 0 0 0 2px var(--bleu); }
.deux { grid-template-columns: 1fr 1fr; }
.palettes { display: grid; gap: 14px; margin-top: 18px; }
.carte-palette { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-align: left; border: 2px solid var(--ligne); border-radius: 20px; background: #fff; padding: 10px; }
.carte-palette .couv { box-shadow: 0 4px 10px rgba(31, 53, 102, .18); }
.carte-palette b { font-family: 'Fredoka'; font-weight: 600; font-size: 21px; color: var(--encre); display: block; }
.carte-palette small { display: block; color: var(--gris); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.carte-palette .nuancier { justify-content: flex-start; gap: 4px; margin-top: 8px; }
.carte-palette .nuancier span { width: 18px; }
.carte-palette[aria-checked="true"] { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); background: #f6faff; }
.depot { display: grid; place-items: center; gap: 10px; text-align: center; margin-top: 18px; border: 2.5px dashed var(--ciel); border-radius: 24px; padding: 22px 16px; background: var(--neige); }
.depot-rond { width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: var(--ombre); }
.depot-rond img { width: 100%; height: 100%; object-fit: cover; }
.depot-rond img.vide { width: 80%; height: 80%; object-fit: contain; }
.conseils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.conseils div { background: #fff; border-radius: 14px; padding: 10px 6px; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--encre); box-shadow: var(--ombre); }
.conseils span { display: block; font-size: 22px; }
.rassure { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--gris); background: #f1f8f4; border-radius: 14px; padding: 12px 14px; }
.rassure::before { content: '🔒'; }
.groupe-gouts { margin-top: 22px; }
.groupe-gouts h2 { font-size: 18px; margin-bottom: 10px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-height: 44px; border: 2px solid var(--ligne); border-radius: 999px; background: #fff; padding: 6px 16px; font-weight: 800; font-size: 15px; color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.puce[aria-pressed="true"]::before { content: '✓ '; }
.ajout-libre { display: flex; gap: 8px; margin-top: 10px; }
.ajout-libre input { flex: 1; min-width: 0; height: 44px; border: 2px dashed var(--ligne); border-radius: 999px; padding: 0 16px; font-weight: 700; background: #fff; }
.ajout-libre button { height: 44px; border-radius: 999px; border: 2px solid var(--encre); background: #fff; font-weight: 800; padding: 0 16px; color: var(--encre); }
.lignes { display: grid; gap: 12px; margin-top: 18px; }
.ligne { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: end; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--ombre); }
.ligne .champ { margin-top: 0; }
.ligne .champ > span { font-size: 13px; }
.ligne input[type="text"], .ligne select { height: 48px; font-size: 16px; }
.retirer { width: 44px; height: 48px; border: 0; border-radius: 12px; background: var(--neige); color: var(--gris); font-size: 20px; }
.ligne-autre { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ligne-autre .tuiles.deux .tuile { min-height: 48px; padding: 8px; }
.ajouter { width: 100%; min-height: 54px; margin-top: 12px; border: 2.5px dashed var(--ciel); border-radius: 18px; background: #f6faff; font-weight: 800; color: var(--encre); font-size: 16px; }
.passer { display: block; margin: 18px auto 0; border: 0; background: none; color: var(--gris); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; padding: 8px; }
.nav-etapes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 10px; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 254, 251, .97); border-top: 1px solid var(--ligne); }
.nav-etapes .bouton { flex: 1; }
.nav-etapes .bouton-clair { flex: 0 0 auto; padding: 12px 18px; }
.apercu-config { display: grid; gap: 12px; justify-items: center; }
.apercu-config > p { font-size: 13.5px; font-weight: 800; color: var(--gris); }
.apercu-config .couv { width: 210px; }
.recap { display: grid; gap: 12px; margin-top: 20px; }
.recap-bloc { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--ombre); }
.recap-bloc h2 { font-size: 15px; color: var(--gris); font-family: 'Nunito'; font-weight: 800; }
.recap-bloc p { grid-column: 1; font-weight: 800; color: var(--encre); font-size: 16.5px; }
.recap-bloc button { grid-row: 1 / span 2; grid-column: 2; align-self: center; border: 0; background: var(--neige); border-radius: 999px; padding: 8px 14px; font-weight: 800; color: var(--encre); font-size: 14px; }
.recap-pages { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-top: 18px; }
.recap-pages > * { flex: none; width: 66%; max-width: 260px; scroll-snap-align: start; }
.recap-titre { font-size: clamp(28px, 6vw, 40px); margin-top: 18px; }
.erreur { color: var(--corail-fonce); font-weight: 800; font-size: 14.5px; margin-top: 8px; }

/* ---------- Panier ---------- */
.panier-ligne { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--ombre); margin-top: 14px; }
.panier-ligne .couv { width: 90px; }

/* ---------- Pied de page ---------- */
.page-config .pied { display: none; }
.pied { --h-paysage: clamp(140px, 23vw, 320px); margin-top: 0; background: linear-gradient(transparent calc(var(--h-paysage) * .6), #fff calc(var(--h-paysage) * .6)); }
/* Le paysage se fond dans la page au lieu d'être coupé net en haut */
.pied-paysage { height: var(--h-paysage); background: url('../img/textures/paysage-pied.jpg') center 70% / cover no-repeat; -webkit-mask-image: linear-gradient(transparent, #000 42%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 42%, #000 82%, transparent); }
.pied-contenu { display: grid; gap: 22px; max-width: 1160px; margin: 0 auto; padding: 22px var(--gouttiere) 10px; }
.pied-logo { width: 150px; }
.pied p { font-size: 14.5px; color: var(--gris); }
.pied nav { display: grid; gap: 6px; font-size: 15px; }
.pied nav strong { font-family: 'Fredoka'; font-weight: 600; color: var(--encre); }
.pied nav a { text-decoration: none; color: var(--gris); }
.pied nav a:hover { color: var(--corail); }
.pied-bas { text-align: center; padding: 14px var(--gouttiere) 22px; font-size: 13px !important; }

/* ================= Écrans plus larges ================= */
@media (min-width: 700px) {
  :root { --gouttiere: 32px; }
  .section { padding: 84px var(--gouttiere); }
  .exemples { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .raisons { grid-template-columns: repeat(3, 1fr); }
  .collections { grid-template-columns: repeat(2, 1fr); }
  .tuiles { grid-template-columns: repeat(6, 1fr); }
  .tuiles.deux { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
  .palettes { grid-template-columns: repeat(3, 1fr); }
  .carte-palette { grid-template-columns: 1fr; text-align: center; padding: 14px; }
  .carte-palette .couv { width: 70%; margin: 0 auto 6px; }
  .carte-palette .nuancier { justify-content: center; }
  .pied-contenu { grid-template-columns: 1.4fr 1fr 1fr; }
  .confiance { grid-template-columns: 200px 1fr; padding: 36px 40px; }
  .confiance > img { width: 190px; }
  .galerie > * { width: 40%; }
}

@media (min-width: 1000px) {
  .logo img { height: 84px; }
  .menu { display: flex; gap: 24px; margin-left: 28px; }
  .menu a { padding: 0; border: 0; font-size: 15px; }
  .menu a:hover { color: var(--corail); }
  .burger { display: none; }
  .entete-actions .bouton { display: inline-flex; }
  .hero { padding: 56px var(--gouttiere) 88px; }
  .hero-grille { grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
  .etapes { grid-template-columns: repeat(4, 1fr); }
  .etapes li { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; }
  .etapes img { width: 110px; height: 110px; margin: 0 auto; }
  .saison-grille { grid-template-columns: 1fr 1fr; gap: 56px; }
  .galerie { margin: 0; padding-left: 2px; padding-right: 2px; }
  .galerie > * { width: 46%; }
  .raisons { grid-template-columns: repeat(6, 1fr); }
  .fiche { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .fiche-galerie { position: sticky; top: 100px; }
  .barre-achat { display: none; }
  .config { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding-bottom: 60px; }
  .config > .progression { grid-column: 1 / -1; }
  .config.config-fin { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
  .config-fin .recap { grid-template-columns: 1fr 1fr; }
  .apercu-config { position: sticky; top: 100px; grid-row: span 2; }
  .apercu-config .couv { width: 280px; }
  .nav-etapes { position: static; padding: 0; margin-top: 28px; background: none; border: 0; }
  .nav-etapes .bouton { flex: 0 0 auto; }
  .recap-pages > * { width: 30%; }
}

/* Flocons : décor seul, ne capte aucun clic, ne bouge que par transform (pas de recalcul de page) */
.neige { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.flocon { position: absolute; top: -12px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px rgba(79, 143, 192, .55); opacity: var(--o); will-change: transform;
  animation: tombe var(--d) linear var(--r) infinite; }
@keyframes tombe { to { transform: translate3d(var(--g), 105vh, 0); } }
@media (prefers-reduced-motion: reduce) { .neige { display: none; } }
@media (min-width: 700px) { .ligne-autre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

/* Panier : la photo est demandée ici avant de valider */
.panier-photo { display: grid; gap: 8px; justify-items: start; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--neige); font-size: 14.5px; }
.panier-photo.a-faire { background: #fff4e8; border: 1.5px dashed var(--jaune); }
.panier-photo .case { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
.panier-photo .case input { width: 18px; height: 18px; accent-color: var(--corail); }
.panier-fin { display: grid; gap: 10px; justify-items: start; margin-top: 22px; }

/* ---------- Le cahier de Manon (accueil) ---------- */
.manon-grille { display: grid; gap: 22px; margin-top: 36px; }
.manon-visionneuse { display: grid; gap: 18px; background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; }
.manon-scene { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.manon-page { width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 6px; box-shadow: var(--ombre-page); background: var(--neige); }
.manon-fleche { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: #fff; color: var(--encre); font-size: 26px; line-height: 1; cursor: pointer; }
.manon-fleche:hover { border-color: var(--corail); color: var(--corail-fonce); }
.manon-compteur { font-size: 14px; color: var(--gris); font-weight: 700; }
.manon-explication h3 { font-size: 24px; margin: 4px 0 8px; }
.manon-explication p { margin: 0 0 14px; }
.manon-explication small, .manon-groupe small { display: block; font-size: 13px; font-weight: 800; color: var(--gris); margin-bottom: 6px; }
.manon-fiche { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; align-self: start; }
.manon-fiche h3 { font-size: 22px; margin: 0; }
.manon-aide { font-size: 14px; color: var(--gris); margin: 4px 0 14px; }
.manon-groupe + .manon-groupe { margin-top: 14px; }
.manon-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.manon-etiquette { font: inherit; font-size: 14px; font-weight: 700; color: var(--encre); background: var(--neige); border: 1px solid var(--ligne); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background .2s, border-color .2s; }
.manon-etiquette i { font-style: normal; font-weight: 600; color: var(--gris); margin-left: 5px; font-size: 12px; }
.manon-etiquette.allumee { background: var(--surligne); border-color: var(--jaune); }
.manon-etiquettes.petites .manon-etiquette { cursor: default; font-size: 13px; padding: 3px 10px; }
.manon-vignettes { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 18px 4px 10px; margin-top: 8px; scrollbar-width: thin; }
.manon-vignette { flex: none; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; opacity: .75; }
.manon-vignette img { display: block; width: 75px; height: auto; border-radius: 4px; }
.manon-vignette[aria-current="true"] { border-color: var(--corail); opacity: 1; }
.manon-vignette:hover { opacity: 1; }
@media (min-width: 1100px) { .manon-grille { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (min-width: 700px) {
  .manon-visionneuse { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: center; padding: 26px; gap: 28px; }
  .manon-scene { grid-template-columns: minmax(0, 1fr); position: relative; }
  .manon-scene .manon-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
  .manon-scene .manon-fleche:first-child { left: -14px; }
  .manon-scene .manon-fleche:last-child { right: -14px; }
}

/* La loutre est vivante : elle respire, penche la tête, sautille. Seulement des déplacements de l'image (transform),
   que le navigateur anime sans recalculer la page : aucun effet sur le défilement ni sur le chargement.
   Pivot aux pieds, durées et décalages différents pour que les loutres ne bougent pas toutes ensemble. */
img[src*="img/loutre/"] { --loutre: loutre-respire; --duree: 6.4s; --decalage: 0s; transform-origin: 50% 92%;
  animation: var(--loutre) var(--duree) ease-in-out var(--decalage) infinite; }
img[src*="loutre-coeur"] { --duree: 7.2s; --decalage: -2s; }
img[src*="loutre-photo"] { --duree: 5.8s; --decalage: -4s; }
img[src*="loutre-cadeau"] { --duree: 6.9s; --decalage: -1s; }
img[src*="loutre-chien"] { --duree: 7.6s; --decalage: -3s; }
img[src*="loutre-reflechit"] { --loutre: loutre-pense; --duree: 7s; }
img[src*="loutre-bravo"] { --loutre: loutre-joie; --duree: 5s; }
img[src*="loutre-coucou"] { --loutre: loutre-coucou; --duree: 5.5s; }
/* Pas sur les couvertures ni sur les petites icônes */
.couv img, .pe-photo img, .saison img { animation: none; }

/* Au repos : elle inspire, se redresse d'un coup, curieuse, puis se tasse */
@keyframes loutre-respire {
  0%, 100% { transform: none; }
  28% { transform: rotate(-1.6deg) scale(.99, 1.025); }
  52% { transform: none; }
  60% { transform: translateY(-4%) rotate(1.4deg); }
  67% { transform: scale(1.025, .975); }
  75% { transform: none; }
}
/* Elle réfléchit : la tête penche d'un côté, attend, puis de l'autre */
@keyframes loutre-pense {
  0%, 100% { transform: none; }
  18%, 40% { transform: rotate(-4deg); }
  52%, 74% { transform: rotate(3deg) scale(.99, 1.02); }
  86% { transform: none; }
}
/* Elle est contente : deux petits bonds, puis elle souffle */
@keyframes loutre-joie {
  0%, 46%, 100% { transform: none; }
  8% { transform: translateY(-9%) rotate(-3deg); }
  15% { transform: scale(1.04, .96); }
  23% { transform: translateY(-6%) rotate(3deg); }
  30% { transform: scale(1.03, .97); }
  37% { transform: none; }
  70% { transform: scale(.99, 1.02); }
}
/* Elle dit bonjour : elle se dandine */
@keyframes loutre-coucou {
  0%, 40%, 100% { transform: none; }
  8% { transform: rotate(-4deg); }
  16% { transform: rotate(3.5deg); }
  24% { transform: rotate(-3deg); }
  32% { transform: rotate(2deg); }
  70% { transform: scale(.99, 1.02); }
}
/* Arrivée : elle surgit en bas de l'image d'accueil, une seule fois, puis vit sa vie */
img.hero-loutre { animation: loutre-arrive .9s cubic-bezier(.34, 1.56, .64, 1) .35s both, var(--loutre) var(--duree) ease-in-out 1.6s infinite; }
@keyframes loutre-arrive { from { opacity: 0; transform: translateY(40%) scale(.7) rotate(-8deg); } }
/* Configurateur : à chaque étape, elle accueille d'un petit bond */
.bulle img { animation: loutre-bond .6s cubic-bezier(.34, 1.56, .64, 1), var(--loutre) var(--duree) ease-in-out .8s infinite; }
@keyframes loutre-bond { from { transform: translateY(18%) scale(.85); } }

/* Panier vide : la loutre se demande où sont passés les cahiers */
.panier-vide { position: relative; width: 140px; }
.panier-vide img { width: 140px; }
.pensee { position: absolute; top: -6px; right: -30px; display: flex; align-items: flex-start; gap: 4px; }
.pensee i:nth-child(1) { margin-top: 22px; }
.pensee i:nth-child(2) { margin-top: 11px; }
.pensee i { width: 9px; height: 9px; border-radius: 50%; background: var(--ciel); opacity: 0; animation: pensee 3.5s ease-in-out infinite; }
.pensee i:nth-child(2) { width: 11px; height: 11px; animation-delay: .35s; }
.pensee i:nth-child(3) { width: 14px; height: 14px; animation-delay: .7s; }
@keyframes pensee { 0%, 100% { opacity: 0; transform: translateY(4px); } 20%, 65% { opacity: 1; transform: none; } 80% { opacity: 0; transform: translateY(-3px); } }

/* Fin de l'accueil : la loutre marche jusqu'au bouton puis le montre (js/loutre-marche.js).
   Sa place est réservée à gauche du bouton : rien ne bouge autour quand elle arrive.
   La marche, ce sont 4 dessins superposés qui s'allument tour à tour, pendant que l'ensemble glisse. */
.loutre-scene { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 10px; }
.appel .loutre-scene .bouton { margin: 0 0 50px; }
.loutre-place { position: relative; flex: none; width: 96px; height: 110px; }
.loutre-scene img { animation: none; }
.appel .loutre-scene img { margin: 0; }
.loutre-marche { position: absolute; right: 0; bottom: 0; width: 112px; height: 70px; opacity: 0; }
.appel .loutre-marche img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.appel img.loutre-montre { position: absolute; left: 0; bottom: 0; width: auto; height: 110px; opacity: 0; transform-origin: 35% 100%; }
.en-route .loutre-marche { opacity: 1; animation: loutre-avance var(--duree-marche, 3s) linear both; }
.appel .en-route .loutre-marche img { animation: loutre-pas .64s steps(1) infinite; }
.appel .en-route .loutre-marche img:nth-child(2) { animation-delay: .16s; }
.appel .en-route .loutre-marche img:nth-child(3) { animation-delay: .32s; }
.appel .en-route .loutre-marche img:nth-child(4) { animation-delay: .48s; }
@keyframes loutre-avance { from { transform: translateX(var(--depart, -100vw)); } }
@keyframes loutre-pas { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
/* Arrivée : la loutre à quatre pattes s'efface, la loutre debout se dresse et insiste deux fois vers le bouton */
.arrivee .loutre-marche { opacity: 0; animation: none; transition: opacity .15s; }
.appel .arrivee img.loutre-montre { opacity: 1; animation: loutre-dresse .5s cubic-bezier(.34, 1.56, .64, 1), loutre-insiste 3s ease-in-out .7s infinite; }
@keyframes loutre-dresse { from { opacity: 0; transform: translateY(10%) scale(.85, .6); } }
@keyframes loutre-insiste { 0%, 36%, 100% { transform: none; } 9%, 27% { transform: rotate(5deg) translateX(4%); } 18% { transform: rotate(1deg); } }
.arrivee .bouton { animation: bouton-appel .5s ease-out .35s; }
@keyframes bouton-appel { 50% { transform: scale(1.06); } }

/* ---------- Programme par niveau (fiche du cahier de Noël) ---------- */
.contenu-niveau { max-width: 760px; }
.contenu-niveau .puces { justify-content: center; margin-top: 26px; }
.contenu-cadre { margin-top: 22px; background: #fff; border: 1.5px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px 20px; }
.contenu-cadre h3 { font-size: 22px; }
.contenu-commun-titre { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--ligne); font-family: 'Fredoka'; font-weight: 600; font-size: 17px; color: var(--encre); }
.contenu-commun-titre + .liste-coche { margin-top: 10px; color: var(--gris); }
@media (min-width: 700px) { .contenu-cadre { padding: 30px 34px; } }