/* Micatan — Bibles des petits.
   Univers lumineux, doux et coloré (police Fredoka). La barre du lanceur reste sombre ; tout ce qui est dans <main> est clair.
   Deux familles de jetons :
     --p-*  : couleurs de la page (fond, texte, accent, cartes) ;
     --i-*  : couleurs de l'illustration, utilisées par le SVG via les classes c-<jeton> (remplissage) et s-<jeton> (trait).
   Changer data-theme sur un conteneur recolore à la fois la page et l'illustration. */

/* ---------- thèmes (générés : 6 thèmes doux + Contraste noir / blanc / rouge) ---------- */
.petits,[data-theme]{--i-peau1:#fbdcc4;--i-peau2:#eab58f;--i-peau3:#bb7c52;--i-peau4:#7d4b2e;--i-cheveux1:#3b2416;--i-cheveux2:#74431f;--i-cheveux3:#e3a83f;--i-cheveux4:#22192b;--i-cheveux5:#eeeae2;--i-encre:#2d2440;--i-blanc:#ffffff;--i-joue:#ff8fa3;--i-rose:#ffb7c5;--i-vache:#ffffff;--i-tache:#4d3b3b;--i-laine:#fffaf2;--i-museau:#f6dcc6;--i-lion:#f5b552;--i-criniere:#cf7633;--i-gris:#aab6ca;--i-or:#f6b93b;--i-etoile:#ffd45a;--i-soleil:#ffc93c;--i-rayon:#ffe08a;--i-lune:#fff1b8;--i-nuage:#ffffff;--i-arc1:#ff7a7a;--i-arc2:#ffaa5a;--i-arc3:#ffd95a;--i-arc4:#7fd17a;--i-arc5:#6ab8f0;--i-arc6:#a98af0}
[data-theme="aurore"]{--i-ciel:#ffe2d4;--i-ciel2:#fff3ea;--i-nuit:#5d4b8c;--i-colline:#f5ab8f;--i-colline2:#fad0bc;--i-sol:#f4bd91;--i-sol2:#f9dcba;--i-eau:#7cc3e8;--i-eau2:#b6e0f3;--i-arbre:#6ac08b;--i-arbre2:#9fdaa9;--i-tronc:#b5774b;--i-fleur:#ff7f9e;--i-fleur2:#ffd35c;--i-coeur:#ff6f91;--i-habit1:#ff8a66;--i-habit2:#7d9dff;--i-habit3:#ffc94e;--i-habit4:#b88df0;--i-bois:#cc8854;--i-bois2:#a66a3e;--i-toit:#e8634f;--i-pierre:#dcc6b4;--i-oiseau:#6ec3f0;--i-oiseau2:#3e9cd7;--i-poisson:#8f80f0;--i-poisson2:#c4baff;--p-fond:#fff4ed;--p-fond2:#ffe3d5;--p-texte:#3e2a40;--p-doux:#7b5c6f;--p-carte:#ffffff;--p-accent:#e8517a;--p-sur:#ffffff;--p-ligne:#f3cbbb}
[data-theme="ocean"]{--i-ciel:#d3f0fb;--i-ciel2:#ecfaff;--i-nuit:#24486f;--i-colline:#80d3c4;--i-colline2:#b3e6dd;--i-sol:#f5dca9;--i-sol2:#fbe9c6;--i-eau:#3ea6dc;--i-eau2:#8fd3f2;--i-arbre:#4cbf8c;--i-arbre2:#8bd9b1;--i-tronc:#b07a50;--i-fleur:#ff8a7b;--i-fleur2:#ffd45a;--i-coeur:#ff6b82;--i-habit1:#ff8a66;--i-habit2:#2f8fd8;--i-habit3:#ffc94e;--i-habit4:#4fc3b1;--i-bois:#cc8854;--i-bois2:#9b6037;--i-toit:#ef6b5a;--i-pierre:#bccbd6;--i-oiseau:#ffb649;--i-oiseau2:#f08a2c;--i-poisson:#4e8fe0;--i-poisson2:#9dc7f6;--p-fond:#eefaff;--p-fond2:#d2effa;--p-texte:#15344e;--p-doux:#456a83;--p-carte:#ffffff;--p-accent:#1a7fc0;--p-sur:#ffffff;--p-ligne:#bde2f2}
[data-theme="prairie"]{--i-ciel:#ddf4ff;--i-ciel2:#f2fbff;--i-nuit:#3a4d79;--i-colline:#8fd170;--i-colline2:#c1e8a0;--i-sol:#a0dc7d;--i-sol2:#f0e1a8;--i-eau:#5cb8e6;--i-eau2:#a5daf3;--i-arbre:#4fae5c;--i-arbre2:#80cc6b;--i-tronc:#a87140;--i-fleur:#ff7ba3;--i-fleur2:#ffd340;--i-coeur:#ff6f91;--i-habit1:#ff9a53;--i-habit2:#5aa0e8;--i-habit3:#f2c84c;--i-habit4:#c187e6;--i-bois:#c28b53;--i-bois2:#9a6739;--i-toit:#e86b53;--i-pierre:#d2c9b8;--i-oiseau:#ff9a53;--i-oiseau2:#e5702b;--i-poisson:#6ec2a9;--i-poisson2:#b5e6d5;--p-fond:#f3fbe9;--p-fond2:#ddf2c6;--p-texte:#23401f;--p-doux:#53704e;--p-carte:#ffffff;--p-accent:#2f8a3f;--p-sur:#ffffff;--p-ligne:#cce7b2}
[data-theme="lavande"]{--i-ciel:#ebe2ff;--i-ciel2:#f8f3ff;--i-nuit:#4b3b7f;--i-colline:#baa4ef;--i-colline2:#d9ccf8;--i-sol:#cab9f2;--i-sol2:#f1e5ff;--i-eau:#7f9df0;--i-eau2:#b9c9fa;--i-arbre:#7bc6a7;--i-arbre2:#aadfc5;--i-tronc:#a07b8f;--i-fleur:#f58bc5;--i-fleur2:#ffd76b;--i-coeur:#f070a9;--i-habit1:#f58bc5;--i-habit2:#7f8df0;--i-habit3:#ffcf71;--i-habit4:#9d7df0;--i-bois:#c79b7b;--i-bois2:#9b705b;--i-toit:#e071a1;--i-pierre:#d0c5e1;--i-oiseau:#f7a7d0;--i-oiseau2:#e06ba6;--i-poisson:#9f80f0;--i-poisson2:#d1c1ff;--p-fond:#f7f2ff;--p-fond2:#e8ddff;--p-texte:#352a56;--p-doux:#665a88;--p-carte:#ffffff;--p-accent:#7a52d8;--p-sur:#ffffff;--p-ligne:#dccffa}
[data-theme="soleil"]{--i-ciel:#fff1c0;--i-ciel2:#fffae2;--i-nuit:#5b4b7b;--i-colline:#ffc967;--i-colline2:#ffe09b;--i-sol:#ffd07b;--i-sol2:#fff0c5;--i-eau:#56b8e0;--i-eau2:#a7dcf0;--i-arbre:#74c06b;--i-arbre2:#a9dc8b;--i-tronc:#b07541;--i-fleur:#ff7070;--i-fleur2:#ff9f41;--i-coeur:#ff607b;--i-habit1:#ff7b5a;--i-habit2:#4f9de8;--i-habit3:#ffb52f;--i-habit4:#49c2a1;--i-bois:#d08b49;--i-bois2:#a86930;--i-toit:#ef604b;--i-pierre:#e1cca5;--i-oiseau:#4fb3e8;--i-oiseau2:#2a8fcf;--i-poisson:#ff9a41;--i-poisson2:#ffd08b;--i-soleil:#ffb703;--p-fond:#fffbea;--p-fond2:#ffefbf;--p-texte:#4a3012;--p-doux:#7a5f3e;--p-carte:#ffffff;--p-accent:#ffb52f;--p-sur:#3d2600;--p-ligne:#f7df9c}
[data-theme="nuit"]{--i-ciel:#2f3a6c;--i-ciel2:#404d86;--i-nuit:#1c2349;--i-colline:#3e5b8b;--i-colline2:#4e6ba1;--i-sol:#4b6b7b;--i-sol2:#6b80a1;--i-eau:#3e75b9;--i-eau2:#6093d0;--i-arbre:#40907e;--i-arbre2:#5aab94;--i-tronc:#8b6b5b;--i-fleur:#f08bb5;--i-fleur2:#ffd76b;--i-coeur:#f07ba1;--i-habit1:#e88b7b;--i-habit2:#8aa4f2;--i-habit3:#e8c46b;--i-habit4:#a98be8;--i-bois:#a77b5b;--i-bois2:#805b45;--i-toit:#c86b7b;--i-pierre:#8b91b1;--i-oiseau:#8bb5f0;--i-oiseau2:#5b8bd8;--i-poisson:#6b80e0;--i-poisson2:#9babf0;--i-soleil:#ffd27b;--i-rayon:#ffe3a0;--i-nuage:#c9d1f2;--i-gris:#9aa6c4;--p-fond:#1f2651;--p-fond2:#2b3467;--p-texte:#f3efff;--p-doux:#c4c1e9;--p-carte:#2c3670;--p-accent:#ffd27b;--p-sur:#2a1f00;--p-ligne:#46528f}
[data-theme="contraste"]{--i-ciel:#ffffff;--i-ciel2:#ffffff;--i-nuit:#000000;--i-colline:#000000;--i-colline2:#ffffff;--i-sol:#000000;--i-sol2:#ffffff;--i-eau:#000000;--i-eau2:#ffffff;--i-arbre:#000000;--i-arbre2:#e10600;--i-tronc:#e10600;--i-fleur:#e10600;--i-fleur2:#ffffff;--i-coeur:#e10600;--i-habit1:#e10600;--i-habit2:#000000;--i-habit3:#ffffff;--i-habit4:#e10600;--i-bois:#000000;--i-bois2:#e10600;--i-toit:#e10600;--i-pierre:#ffffff;--i-oiseau:#e10600;--i-oiseau2:#000000;--i-poisson:#e10600;--i-poisson2:#ffffff;--i-soleil:#e10600;--i-rayon:#000000;--i-lune:#ffffff;--i-etoile:#ffffff;--i-nuage:#ffffff;--i-or:#e10600;--i-gris:#ffffff;--i-lion:#ffffff;--i-criniere:#000000;--i-vache:#ffffff;--i-tache:#000000;--i-laine:#ffffff;--i-museau:#ffffff;--i-rose:#e10600;--i-joue:#e10600;--i-encre:#000000;--i-blanc:#ffffff;--i-peau1:#ffffff;--i-peau2:#ffffff;--i-peau3:#ffffff;--i-peau4:#ffffff;--i-cheveux1:#000000;--i-cheveux2:#000000;--i-cheveux3:#000000;--i-cheveux4:#000000;--i-cheveux5:#ffffff;--i-arc1:#e10600;--i-arc2:#000000;--i-arc3:#e10600;--i-arc4:#000000;--i-arc5:#e10600;--i-arc6:#000000;--p-fond:#ffffff;--p-fond2:#ffffff;--p-texte:#000000;--p-doux:#222222;--p-carte:#ffffff;--p-accent:#e10600;--p-sur:#ffffff;--p-ligne:#000000}

/* ---------- jetons → classes SVG ---------- */
.c-arbre{fill:var(--i-arbre)}.c-arbre2{fill:var(--i-arbre2)}.c-blanc{fill:var(--i-blanc)}.c-bois{fill:var(--i-bois)}.c-bois2{fill:var(--i-bois2)}.c-cheveux1{fill:var(--i-cheveux1)}.c-cheveux2{fill:var(--i-cheveux2)}.c-cheveux3{fill:var(--i-cheveux3)}.c-cheveux4{fill:var(--i-cheveux4)}.c-cheveux5{fill:var(--i-cheveux5)}.c-ciel{fill:var(--i-ciel)}.c-ciel2{fill:var(--i-ciel2)}.c-coeur{fill:var(--i-coeur)}.c-colline{fill:var(--i-colline)}.c-colline2{fill:var(--i-colline2)}.c-criniere{fill:var(--i-criniere)}.c-eau{fill:var(--i-eau)}.c-eau2{fill:var(--i-eau2)}.c-encre{fill:var(--i-encre)}.c-etoile{fill:var(--i-etoile)}.c-fleur{fill:var(--i-fleur)}.c-fleur2{fill:var(--i-fleur2)}.c-gris{fill:var(--i-gris)}.c-habit1{fill:var(--i-habit1)}.c-habit2{fill:var(--i-habit2)}.c-habit3{fill:var(--i-habit3)}.c-habit4{fill:var(--i-habit4)}.c-joue{fill:var(--i-joue)}.c-laine{fill:var(--i-laine)}.c-lion{fill:var(--i-lion)}.c-lune{fill:var(--i-lune)}.c-museau{fill:var(--i-museau)}.c-nuage{fill:var(--i-nuage)}.c-nuit{fill:var(--i-nuit)}.c-oiseau{fill:var(--i-oiseau)}.c-oiseau2{fill:var(--i-oiseau2)}.c-or{fill:var(--i-or)}.c-peau1{fill:var(--i-peau1)}.c-peau2{fill:var(--i-peau2)}.c-peau3{fill:var(--i-peau3)}.c-peau4{fill:var(--i-peau4)}.c-pierre{fill:var(--i-pierre)}.c-poisson{fill:var(--i-poisson)}.c-poisson2{fill:var(--i-poisson2)}.c-rayon{fill:var(--i-rayon)}.c-rose{fill:var(--i-rose)}.c-sol{fill:var(--i-sol)}.c-sol2{fill:var(--i-sol2)}.c-soleil{fill:var(--i-soleil)}.c-tache{fill:var(--i-tache)}.c-toit{fill:var(--i-toit)}.c-tronc{fill:var(--i-tronc)}.c-vache{fill:var(--i-vache)}
.s-arbre{stroke:var(--i-arbre)}.s-blanc{stroke:var(--i-blanc)}.s-bois2{stroke:var(--i-bois2)}.s-cheveux1{stroke:var(--i-cheveux1)}.s-cheveux2{stroke:var(--i-cheveux2)}.s-cheveux3{stroke:var(--i-cheveux3)}.s-cheveux4{stroke:var(--i-cheveux4)}.s-cheveux5{stroke:var(--i-cheveux5)}.s-encre{stroke:var(--i-encre)}.s-etoile{stroke:var(--i-etoile)}.s-gris{stroke:var(--i-gris)}.s-habit1{stroke:var(--i-habit1)}.s-habit2{stroke:var(--i-habit2)}.s-habit3{stroke:var(--i-habit3)}.s-habit4{stroke:var(--i-habit4)}.s-lion{stroke:var(--i-lion)}.s-or{stroke:var(--i-or)}.s-peau1{stroke:var(--i-peau1)}.s-peau2{stroke:var(--i-peau2)}.s-peau3{stroke:var(--i-peau3)}.s-peau4{stroke:var(--i-peau4)}.s-rayon{stroke:var(--i-rayon)}.s-toit{stroke:var(--i-toit)}.s-tronc{stroke:var(--i-tronc)}
.s-arc1{stroke:var(--i-arc1)}.s-arc2{stroke:var(--i-arc2)}.s-arc3{stroke:var(--i-arc3)}.s-arc4{stroke:var(--i-arc4)}.s-arc5{stroke:var(--i-arc5)}.s-arc6{stroke:var(--i-arc6)}
.hit{fill:#000;fill-opacity:0}
.k{stroke:none}
/* Contraste : contours noirs épais, comme les livres pour nouveau-nés. */
[data-theme="contraste"] .k{stroke:#000;stroke-width:6;stroke-linejoin:round}
[data-theme="contraste"] .c-joue{opacity:1}

/* ---------- univers : fond clair dans main ---------- */
main.petits{background:var(--p-fond);color:var(--p-texte);font-family:var(--f-enfant);color-scheme:light;min-height:70vh;
  background-image:radial-gradient(900px 420px at 85% -5%, var(--p-fond2), transparent 70%),radial-gradient(700px 380px at -5% 30%, var(--p-fond2), transparent 70%)}
main.petits :focus-visible{outline:4px solid var(--p-accent);outline-offset:3px}
.p-sec{padding-block:44px}
.p-h1{font-family:var(--f-enfant);font-weight:700;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:-.01em}
.p-h2{font-family:var(--f-enfant);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.1}
.p-h3{font-family:var(--f-enfant);font-weight:600;font-size:1.25rem}
.p-lead{font-size:1.18rem;color:var(--p-doux);max-width:52ch;margin-top:14px;line-height:1.5}
.p-ref{font-family:var(--f-enfant);font-weight:500;font-size:.92rem;color:var(--p-doux)}
.p-note{font-size:.9rem;color:var(--p-doux)}
.p-bouton{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 26px;border:0;border-radius:999px;font-family:var(--f-enfant);font-weight:600;font-size:1.12rem;
  background:var(--p-accent);color:var(--p-sur);box-shadow:0 6px 0 rgba(0,0,0,.16);transition:transform .15s,box-shadow .15s}
.p-bouton:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.16)}
.p-bouton.doux{background:var(--p-carte);color:var(--p-texte);box-shadow:0 0 0 2px var(--p-ligne),0 6px 0 var(--p-ligne)}
.p-bouton svg{width:26px;height:26px;flex-shrink:0}

/* ---------- héros ---------- */
.p-heros{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding-top:36px}
.p-heros-illu{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(80,40,60,.45)}
.p-heros-illu svg{width:100%;height:100%;display:block}
.p-heros .p-rangee{margin-top:26px}
.p-rangee{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:820px){.p-heros{grid-template-columns:1fr}.p-heros-illu{order:-1;border-radius:28px}}

/* ---------- mise en avant (profil actif) ---------- */
.p-pourtoi{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--p-carte);border-radius:36px;padding:22px;box-shadow:0 0 0 3px var(--p-ligne)}
.p-pourtoi .p-couv{width:clamp(130px,22vw,210px)}
.p-pourtoi-liste{display:grid;gap:18px}
@media (max-width:560px){.p-pourtoi{grid-template-columns:1fr;text-align:center}.p-pourtoi .p-couv{margin:0 auto}.p-pourtoi .p-rangee{justify-content:center}}

/* ---------- filtre par âge ---------- */
.p-filtres{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.p-filtre{min-height:52px;padding:10px 20px;border-radius:999px;border:0;background:var(--p-carte);color:var(--p-texte);font-family:var(--f-enfant);font-weight:600;font-size:1.02rem;box-shadow:0 0 0 2px var(--p-ligne)}
.p-filtre[aria-pressed="true"]{background:var(--p-texte);color:var(--p-fond);box-shadow:none}

/* ---------- étagère ---------- */
.p-etagere{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:48px 30px;margin-top:22px;list-style:none;padding:0}
.p-livre{position:relative;display:grid;gap:12px;align-content:start}
.p-ouvrir{position:relative;z-index:1;display:block;width:100%;border:0;padding:0;background:none;text-align:left;border-radius:10px 22px 22px 10px}
/* planche de bois sous chaque livre : les planches voisines se rejoignent en une étagère continue */
.p-ouvrir::after{content:"";position:absolute;left:-18px;right:-18px;bottom:-16px;height:18px;border-radius:6px;background:linear-gradient(#e2ae74,#b97c45);box-shadow:0 12px 18px -8px rgba(90,50,20,.45);z-index:-1}
.p-ouvrir .p-couv{z-index:1}
.p-etagere-sec{overflow-x:clip}
.p-couv{position:relative;aspect-ratio:3/4;border-radius:10px 22px 22px 10px;overflow:hidden;box-shadow:inset 10px 0 0 rgba(0,0,0,.12),inset 13px 0 0 rgba(255,255,255,.25),0 14px 22px -10px rgba(40,20,30,.45);transition:transform .25s}
.p-couv svg{position:absolute;inset:0;width:100%;height:100%}
.p-couv-titre{position:absolute;left:12px;right:10px;bottom:10px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.9);color:#2d2440;font-weight:600;font-size:1.02rem;line-height:1.15}
[data-theme="nuit"] .p-couv-titre{background:rgba(28,35,73,.88);color:#f3efff}
[data-theme="contraste"] .p-couv-titre{background:#fff;color:#000;box-shadow:0 0 0 3px #000}
.p-ouvrir:hover .p-couv{transform:translateY(-6px) rotate(-1deg)}
.p-badge{position:absolute;top:10px;left:16px;z-index:2;padding:5px 12px;border-radius:999px;background:var(--i-or,#f6b93b);color:#3d2600;font-weight:600;font-size:.85rem;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.p-info{position:relative;z-index:1;padding-top:22px;display:grid;gap:6px}
.p-info h3{font-family:var(--f-enfant);font-weight:600;font-size:1.15rem}
.p-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--p-doux)}
.p-puce{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--p-fond2);color:var(--p-texte);font-weight:500;font-size:.85rem}
.p-jauge{height:12px;border-radius:999px;background:var(--p-fond2);overflow:hidden;box-shadow:inset 0 0 0 2px var(--p-ligne)}
.p-jauge>i{display:block;height:100%;border-radius:inherit;background:var(--p-accent);transition:width .6s}
@media (max-width:520px){.p-etagere{grid-template-columns:1fr 1fr;gap:44px 24px}.p-couv-titre{font-size:.88rem;left:8px;right:6px;bottom:8px;padding:6px 9px}.p-ouvrir::after{left:-14px;right:-14px}}
.p-vide{padding:30px;border-radius:24px;background:var(--p-carte);text-align:center;color:var(--p-doux)}

/* ---------- panneau parents ---------- */
.p-parents{background:var(--p-carte);border-radius:36px;padding:28px;box-shadow:0 0 0 3px var(--p-ligne)}
.p-parents-tete{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:end;margin-bottom:20px}
.p-profils{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.p-profil{border-radius:26px;padding:18px;background:var(--p-fond);display:grid;gap:14px}
.p-profil-tete{display:flex;gap:12px;align-items:center}
.p-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#2d2440;flex-shrink:0}
.p-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.p-chiffres b{display:block;font-size:1.7rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.p-chiffres span{font-size:.8rem;color:var(--p-doux);line-height:1.2;display:block}
.p-semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:86px}
.p-jour{display:grid;grid-template-rows:1fr auto;gap:4px;height:100%;text-align:center;font-size:.72rem;color:var(--p-doux)}
.p-jour i{align-self:end;display:block;border-radius:8px 8px 3px 3px;background:var(--p-accent);min-height:4px}
.p-jour.vide i{background:var(--p-ligne)}
.p-confiance{display:flex;gap:12px;align-items:center;margin-top:20px;padding:14px 18px;border-radius:20px;background:var(--p-fond2);font-size:.95rem}
.p-confiance svg{width:30px;height:30px;flex-shrink:0}

/* =================================================== liseuse =================================================== */
body.p-lit{overflow:hidden}
.p-liseuse{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--p-fond);color:var(--p-texte);font-family:var(--f-enfant);color-scheme:light;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));transition:background .5s}
.p-liseuse :focus-visible{outline:4px solid var(--p-accent);outline-offset:3px}
.p-l-haut{display:flex;align-items:center;gap:10px;min-height:64px}
.p-l-titre{flex:1;min-width:0;font-weight:600;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-rond{width:60px;height:60px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--p-carte);color:var(--p-texte);box-shadow:0 0 0 2px var(--p-ligne),0 5px 0 var(--p-ligne);flex-shrink:0;font-family:var(--f-enfant);font-weight:700;font-size:1rem}
.p-rond:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--p-ligne),0 2px 0 var(--p-ligne)}
.p-rond svg{width:30px;height:30px}
.p-rond[aria-pressed="true"]{background:var(--p-accent);color:var(--p-sur)}
.p-palette-btn{background:conic-gradient(#ff7a7a 0 60deg,#ffd95a 0 120deg,#7fd17a 0 180deg,#6ab8f0 0 240deg,#a98af0 0 300deg,#ff8fc5 0);box-shadow:0 0 0 4px var(--p-carte),0 0 0 6px var(--p-ligne),0 6px 0 var(--p-ligne)}
.p-palette-btn svg{background:var(--p-carte);border-radius:50%;padding:5px;width:36px;height:36px}

.p-l-milieu{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:0}
.p-scene-zone{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;height:100%;min-height:0;align-content:center;justify-items:center}
.p-scene{position:relative;width:min(100%,calc((100dvh - 330px) * 4 / 3));aspect-ratio:4/3;border-radius:36px;overflow:hidden;box-shadow:0 20px 50px -24px rgba(40,20,40,.5);touch-action:pan-y;user-select:none;-webkit-user-select:none;align-self:end}
[data-theme="contraste"] .p-scene{box-shadow:0 0 0 6px #000}
.p-scene .illu{position:absolute;inset:0;width:100%;height:100%;display:block}
.p-texte{max-width:34ch;text-align:center;font-size:clamp(1.35rem,3.2vw,2.05rem);font-weight:500;line-height:1.3;min-height:2.6em;text-wrap:balance}
[data-theme="contraste"] .p-texte{font-weight:600}
.p-fleche{width:84px;height:84px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--p-accent);color:var(--p-sur);box-shadow:0 7px 0 rgba(0,0,0,.18)}
.p-fleche svg{width:42px;height:42px}
.p-fleche:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.p-fleche:disabled{opacity:.28;cursor:default}
.p-l-bas{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.p-points{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.p-point{width:16px;height:16px;border-radius:50%;background:var(--p-ligne);transition:transform .25s,background .25s}
.p-point.lu{background:var(--p-doux)}
.p-point.ici{background:var(--p-accent);transform:scale(1.45)}
.p-fleches-mobile{display:none}

/* question à choix */
.p-quiz{display:grid;gap:10px;justify-items:center;text-align:center}
.p-quiz p{font-weight:600;font-size:1.2rem}
.p-choix{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.p-choix button{min-height:60px;min-width:120px;padding:10px 22px;border-radius:22px;border:0;background:var(--p-carte);color:var(--p-texte);font-family:var(--f-enfant);font-weight:600;font-size:1.15rem;box-shadow:0 0 0 3px var(--p-ligne),0 6px 0 var(--p-ligne)}
.p-choix button.bon{background:#5fcf86;color:#0d3a1d;box-shadow:0 0 0 3px #3aa564,0 6px 0 #3aa564}
.p-choix button.essai{opacity:.5}
.p-retour{min-height:1.4em;font-weight:600}

/* palette */
.p-palette{position:absolute;top:78px;right:12px;z-index:5;width:min(440px,calc(100vw - 24px));background:var(--p-carte);color:var(--p-texte);border-radius:30px;padding:18px;box-shadow:0 0 0 3px var(--p-ligne),0 30px 60px -20px rgba(0,0,0,.4)}
.p-palette h2{font-family:var(--f-enfant);font-weight:600;font-size:1.2rem;margin-bottom:12px}
.p-pastilles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.p-pastille{display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:22px;border:0;background:transparent;color:var(--p-texte);font-family:var(--f-enfant);font-weight:600;font-size:.98rem}
.p-pastille i{display:block;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--i-soleil) 0 22%,transparent 23%),linear-gradient(var(--i-ciel) 0 55%,var(--i-colline) 55% 100%);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.p-pastille i[data-theme="contraste"]{background:radial-gradient(circle at 50% 38%,#e10600 0 22%,transparent 23%),repeating-linear-gradient(90deg,#000 0 12px,#fff 12px 24px);box-shadow:0 0 0 3px #000}
.p-pastille[aria-pressed="true"]{background:var(--p-fond2)}
.p-pastille[aria-pressed="true"] i{box-shadow:0 0 0 4px var(--p-carte),0 0 0 8px var(--p-accent)}
.p-pastille small{font-weight:500;font-size:.75rem;color:var(--p-doux);line-height:1.2;text-align:center}

/* célébration */
.p-fete{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:color-mix(in srgb,var(--p-fond) 88%,transparent);overflow:hidden}
.p-fete-in{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;text-align:center;padding:20px}
.p-fete-etoile{width:min(260px,52vw);height:auto;animation:p-grande .9s cubic-bezier(.3,1.6,.5,1) both}
.p-fete h2{font-family:var(--f-enfant);font-weight:700;font-size:clamp(3rem,10vw,5.5rem);line-height:1}
.p-fete p{font-size:1.25rem;color:var(--p-doux)}
.p-confetti{position:absolute;top:-30px;width:14px;height:20px;border-radius:5px;animation:p-tombe var(--t,3s) cubic-bezier(.3,.4,.6,1) var(--r,0s) forwards;z-index:1}
@keyframes p-grande{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes p-tombe{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,0px),110vh) rotate(var(--rot,360deg))}}

/* bulle et étincelles */
.p-bulle{position:absolute;z-index:4;transform:translate(-50%,-100%);padding:10px 18px;border-radius:24px;background:#fff;color:#2d2440;font-weight:700;font-size:clamp(1.1rem,3vw,1.6rem);white-space:nowrap;max-width:90%;box-shadow:0 8px 20px -6px rgba(0,0,0,.3);pointer-events:none;animation:p-bulle 2.2s ease both}
.p-bulle.long{white-space:normal;width:max-content;max-width:min(80%,360px);text-align:center;font-size:clamp(1rem,2.4vw,1.3rem)}
.p-bulle::after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
[data-theme="contraste"] .p-bulle{box-shadow:0 0 0 4px #000;color:#000}
@keyframes p-bulle{0%{opacity:0;transform:translate(-50%,-80%) scale(.6)}12%{opacity:1;transform:translate(-50%,-100%) scale(1.06)}20%{transform:translate(-50%,-100%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-112%)}}
.p-eclat{position:absolute;z-index:3;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;animation:p-eclat .9s ease-out forwards}
.p-eclat svg{width:100%;height:100%}
@keyframes p-eclat{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(160deg);opacity:0}}
.p-trouve{position:absolute;top:14px;left:14px;z-index:4;padding:8px 16px;border-radius:999px;background:var(--i-or);color:#3d2600;font-weight:700;font-size:1.1rem}

/* ---------- animations de l'illustration (douces, en boucle) ---------- */
.illu .tt{cursor:pointer;outline:none}
.illu .tt:focus-visible{filter:drop-shadow(0 0 4px var(--p-accent)) drop-shadow(0 0 8px var(--p-accent))}
.illu .tourne,.illu .flotte,.illu .scintille,.illu .berce,.illu .roule,.illu .bat,.illu .respire,.illu .plane,.illu .nage,.illu .gonfle-lent,.illu .tt,.illu .cc-couvre,.illu .cc-cachee{transform-box:fill-box;transform-origin:center}
.illu .tourne{animation:p-tourne 40s linear infinite}
.illu .flotte{animation:p-flotte 7s ease-in-out infinite}
.illu .scintille{animation:p-scintille 3s ease-in-out infinite}
.illu .vague{animation:p-vague 6s linear infinite}
.illu .vague2{animation:p-vague 9s linear infinite reverse}
.illu .berce{animation:p-berce 5s ease-in-out infinite;transform-origin:50% 90%}
.illu .roule{animation:p-roule 2.6s ease-in-out infinite;transform-origin:50% 90%}
.illu .bat{animation:p-bat 2.4s ease-in-out infinite}
.illu .respire{animation:p-bat 4s ease-in-out infinite}
.illu .plane{animation:p-flotte 4s ease-in-out infinite}
.illu .nage{animation:p-nage 3s ease-in-out infinite}
.illu .tombe{animation:p-pluie 1.6s linear infinite}
.illu .gonfle-lent{animation:p-bat 3s ease-in-out infinite}
.illu .d1{animation-delay:-.4s}.illu .d2{animation-delay:-1.1s}.illu .d3{animation-delay:-1.9s}.illu .d4{animation-delay:-2.6s}.illu .d5{animation-delay:-3.3s}.illu .d6{animation-delay:-4.1s}
@keyframes p-tourne{to{transform:rotate(360deg)}}
@keyframes p-flotte{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-8px)}}
@keyframes p-scintille{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
@keyframes p-vague{to{transform:translateX(-100px)}}
@keyframes p-berce{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes p-roule{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-8px)}}
@keyframes p-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes p-nage{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes p-pluie{0%{transform:translateY(-40px);opacity:0}20%{opacity:1}100%{transform:translateY(160px);opacity:0}}

/* réponses au toucher (classes posées par petits.js sur .tt) */
.illu .tt.a-bondir{animation:p-bondir .7s cubic-bezier(.3,1.5,.5,1)}
.illu .tt.a-tourner{animation:p-tourner .9s ease-in-out}
.illu .tt.a-gonfle{animation:p-gonfle .7s cubic-bezier(.3,1.6,.5,1)}
.illu .tt.a-cligne .c-encre{animation:p-cligne .5s ease 2;transform-box:fill-box;transform-origin:center}
@keyframes p-bondir{0%,100%{transform:translateY(0)}35%{transform:translateY(-34px) scale(1.04,.96)}60%{transform:translateY(0) scale(1.06,.94)}80%{transform:translateY(-8px)}}
@keyframes p-tourner{0%{transform:rotate(0)}50%{transform:rotate(14deg) scale(1.06)}100%{transform:rotate(0)}}
@keyframes p-gonfle{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}70%{transform:scale(.97)}}
@keyframes p-cligne{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}

/* cache-cache : la couverture s'écarte, ou l'animal sort de sa cachette */
.illu .cc-couvre,.illu .cc-cachee{transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.illu .tt.revele .cc-droite{transform:translateX(260px) rotate(6deg)}
.illu .tt.revele .cc-gauche{transform:translateX(-260px) rotate(-6deg)}
.illu .tt.revele .cc-bas{transform:translateY(300px)}
.illu .tt.revele .cc-haut{transform:translateY(-300px)}
.illu .cc-sort-haut{transform:translateY(70px)}
.illu .cc-sort-gauche{transform:translateX(60px)}
.illu .cc-sort-droite{transform:translateX(-50px)}
.illu .tt.revele .cc-sort-haut{transform:translateY(-70px)}
.illu .tt.revele .cc-sort-gauche{transform:translateX(-230px)}
.illu .tt.revele .cc-sort-droite{transform:translateX(220px)}
.illu .tt:not(.revele) .cc-couvre{animation:p-invite 2.8s ease-in-out infinite}
@keyframes p-invite{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-2deg)}92%{transform:rotate(2deg)}}

/* transition de page */
.p-scene .illu.entre-d{animation:p-entre-d .45s ease both}
.p-scene .illu.entre-g{animation:p-entre-g .45s ease both}
@keyframes p-entre-d{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes p-entre-g{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .p-l-milieu{grid-template-columns:1fr}
  .p-l-milieu>.p-fleche{display:none}
  /* flèches et « Écouter » sur une seule rangée pour laisser la place à l'illustration */
  .p-l-bas .p-rangee{display:none}
  .p-fleches-mobile{display:flex;gap:14px;justify-content:center;align-items:center;width:100%}
  .p-fleches-mobile .p-fleche{width:72px;height:72px}
  .p-fleches-mobile .p-bouton{min-height:64px;padding:10px 20px}
  .p-scene-zone{gap:10px}
  /* scène carrée : l'illustration est recadrée sur son centre (x 100 → 700) */
  .p-scene{aspect-ratio:1/1;width:min(100%,calc(100dvh - 380px));border-radius:28px;min-width:200px}
  .p-liseuse.avec-quiz .p-scene{width:min(100%,calc(100dvh - 470px));min-width:170px}
  .p-rond{width:54px;height:54px}
  .p-l-haut{min-height:58px}
  .p-l-titre{font-size:.98rem}
  .p-texte{font-size:1.22rem;min-height:0}
  .p-quiz p{font-size:1.05rem}
  .p-choix button{min-height:52px;min-width:96px;padding:8px 16px;font-size:1.05rem}
  .p-quiz{gap:6px}
  .p-points{gap:8px}
  .p-point{width:12px;height:12px}
}
@media (max-height:560px) and (min-width:701px){.p-scene{width:min(100%,calc((100dvh - 230px) * 4 / 3))}.p-texte{font-size:1.25rem;min-height:0}}

@media (prefers-reduced-motion:reduce){
  .illu .tt.revele .cc-couvre,.illu .tt.revele .cc-cachee{transition:none}
  .p-confetti,.p-eclat{display:none}
}