/* Le jardin des histoires — une interface douce, lisible et tactile. */
:root{--nuit:#f4f2ea;--nuit-douce:#fffdf8;--nuit-trait:#dcded0;--nuit-texte:#304b40;--nuit-doux:#637467;--papier:#fffdf8;--papier-ombre:#eeeade;--encre:#293e36;--encre-doux:#5f7064;--trait:#dce1d5;--lampe:#b07c29;--vert:#42765a;--bleu:#286da0;--rouge:#b6443d;--r-feuille:28px;--r-doux:20px;--carte:#fffdf8}
body{background:#f4f2ea;background-image:radial-gradient(ellipse at 10% 5%,#e3ebdc 0,transparent 45%),radial-gradient(ellipse at 100% 80%,#f4e7d5 0,transparent 50%);color:var(--encre)}
body::before{display:none}
.enveloppe{max-width:1160px;padding:28px 36px 24px;gap:24px}
header{align-items:center;padding-bottom:20px;border-bottom:1px solid #d9dfd1}
.titre{font-size:25px;letter-spacing:-.04em}
.sous{font-size:13px;margin-top:6px}
.marque{display:flex;align-items:center;gap:12px}
.marque-icone{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#e0e9d8;color:#456547;font-size:26px}
.tirelire{background:#fffdf8;border:1px solid #dedfd1;box-shadow:none;padding:9px 20px}
.tirelire::before{letter-spacing:.06em;font-size:10px}
.centre{gap:24px}
#ecran-accueil{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr);align-content:center;gap:24px;padding:22px 0}
#ecran-accueil .carte{grid-column:1;grid-row:1;max-width:none;padding:38px 40px;overflow:hidden;min-height:460px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
#ecran-accueil .carte::before{content:"";width:100%;height:185px;background:url('/static/jardin.svg') center 55% / contain no-repeat;display:block;margin:0 0 22px}
#ecran-accueil .fleur-hero{grid-column:2;grid-row:1;align-self:stretch;justify-content:center;padding:34px 20px;background:#e5ebdc;border:1px solid #d7e0cd;border-radius:28px;margin:0;position:relative;gap:16px}
#ecran-accueil .fleur-hero::before{content:"Mon jardin de la semaine";font-family:'Fraunces',Georgia,serif;font-size:25px;text-align:center;color:#385540;max-width:200px;line-height:1.2;margin-bottom:15px}
#ecran-accueil .fleur-hero::after{content:"Une lecture, un pétale qui pousse.";font-size:13px;color:#566d55;text-align:center;max-width:210px}
.carte,.feuille-lecture{box-shadow:0 8px 30px -18px #64795a40;border:1px solid #dfe3d8}
.carte::after{display:none}
.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:#537058}
h2.grand{font-size:clamp(28px,3.5vw,40px);line-height:1.18;letter-spacing:-.025em}
p.intro{font-size:16px;line-height:1.65}
.bouton{border-radius:16px;font-size:17px;padding:15px 24px;min-height:52px;background:#354f40;box-shadow:0 3px 0 #233e3020}
.bouton.vert{background:#42765a;box-shadow:0 4px 0 #2d563f}
.bouton.clair{background:#f6f6ef;color:#4a6051;border:1px solid #d8dfd0;box-shadow:none}
.bouton:hover{transform:translateY(-2px);box-shadow:0 5px 12px #30483018}
.bouton:disabled{opacity:.55;cursor:wait;transform:none}
.bouton:focus-visible,a:focus-visible{outline:3px solid #286da0;outline-offset:4px}
#btn-commencer{font-size:19px;padding:17px 29px}
#btn-commencer::after{content:" →";margin-left:12px}
.jours{color:#64745e}.jours span.actif{color:#754f13}
.legende-fleur{color:#526d51;line-height:1.6;max-width:245px}
.parcours{display:flex;justify-content:center;gap:28px;font-size:13px;color:#6b7867;padding:5px 0 12px}
.parcours span{display:flex;align-items:center;gap:8px}
.parcours b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e3e9da;color:#4e6650;font-size:11px}
body:has(#ecran-lecture:not(.cache)) .parcours,body:has(#ecran-exercices:not(.cache)) .parcours{display:none}
#ecran-lecture{justify-content:flex-start;padding-top:12px}
.feuille-lecture{padding:35px 42px 38px 55px;border-radius:24px}
.feuille-lecture::after{left:33px;background:#d8aaa04d}
.feuille-lecture #texte::before{opacity:.3}
.feuille-lecture #texte{max-width:26em;font-size:clamp(26px,3vw,34px);line-height:2.05em}
.feuille-lecture #texte .m.ok,.feuille-lecture #texte .m.corrige{color:#49674b}
.feuille-lecture #texte .m.saute{color:#687365}
.feuille-lecture #texte .m.courant{box-shadow:0 3px 0 #164567;background:#286da0}
.feuille-lecture #texte .m.erreur{box-shadow:0 3px 0 #81332e;background:#b6443d}
.progression{font-size:12px;letter-spacing:.025em;text-transform:none;font-weight:700;color:#526850;gap:18px}
.progression .rail{height:9px;background:#e0e5d8}.progression .fait{background:#789d67}
#ecran-exercices{max-width:860px;width:100%;align-self:center}
#ecran-exercices .carte{padding:38px;min-height:280px;display:flex;flex-direction:column;justify-content:center}
#exo-titre::before{content:"✦";margin-right:10px;color:#a77832}
#exo-question{font-family:'Andika',sans-serif;font-size:clamp(24px,3vw,32px);line-height:1.5;letter-spacing:0}
#bloc-voix{position:sticky;bottom:12px;z-index:10;margin:0 auto;max-width:760px;width:100%;border-radius:20px;background:#fffdf8ed;border:1px solid #d8e0d2;padding:12px 20px;box-shadow:0 10px 35px #40513215;backdrop-filter:blur(8px)}
.etat{margin:0;color:#4f6654;font-size:14px}.point{background:#42765a}.point.parle{background:#b07c29}
.bulle{background:transparent;color:#304b40;border:none;padding:10px 0 0;margin-top:0;font-size:18px;line-height:1.6}
#ecran-fin{padding:10px 0}.bandeau{font-size:26px;padding:23px}.stats{gap:12px}.stats>div{flex:1;background:#f0f3e9;border-radius:15px;padding:15px;min-width:110px}.stats b{font-size:27px;margin-bottom:4px}
.cadeaux{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.cadeau-carte{border-radius:20px;padding:18px;gap:12px}.cadeau-carte img{height:150px}.cadeau-carte .nom{font-size:15px}.cadeau-carte.verrouille{opacity:.75}.cadeau-carte .manque{color:#835a21}
.voile{background:#253f36a6;backdrop-filter:blur(5px)}.confirme{border-radius:28px}.confirme .rangee{margin-top:20px}
.enveloppe>p:last-of-type{margin-top:12px!important}.lien{padding:8px;display:inline-block}
body.parent .enveloppe{max-width:1200px;gap:0}body.parent .onglets{gap:8px;border:0;background:#e8ecdf;border-radius:18px;padding:6px;margin:24px 0}body.parent .onglet{border:0;border-radius:12px;min-height:46px;flex:1;color:#52684f}body.parent .onglet.actif{background:#fffdf8;color:#304b40;box-shadow:0 2px 8px #3048300c}body.parent .carte{padding:28px;border-radius:24px}body.parent h2.grand{font-size:24px}body.parent th{font-weight:700}body.parent input,body.parent select,body.parent textarea{background:#fff!important;min-height:44px}body.parent td{padding:14px 10px}body.parent .enr audio{min-width:180px}
@media(min-width:900px){#fleur-entete{display:none}}
@media(max-width:760px){.enveloppe{padding:20px 18px;gap:18px}.titre{font-size:21px}.marque-icone{width:40px;height:40px;font-size:23px}.marque{gap:8px}header{padding-bottom:16px}#fleur-entete{display:none}#ecran-accueil{grid-template-columns:1fr;padding:5px 0;gap:18px}#ecran-accueil .carte{grid-column:1;grid-row:1;min-height:auto;padding:25px}#ecran-accueil .carte::before{height:145px;margin-bottom:18px}#ecran-accueil .fleur-hero{grid-column:1;grid-row:2;padding:20px;gap:10px}#ecran-accueil .fleur-hero::before{max-width:none;font-size:22px;margin:0}.fleur-hero .fleur svg{height:135px;width:auto}.parcours{gap:13px;font-size:11px;padding:0}.parcours span{gap:5px}.parcours b{width:22px;height:22px}.feuille-lecture{padding:25px 16px 28px 28px}.feuille-lecture::after{left:15px}#ecran-exercices .carte{padding:26px}.rangee{gap:10px}.bouton{font-size:16px;padding:13px 18px}.tirelire{padding:8px 12px;font-size:15px}.progression{gap:12px}body.parent .onglet{flex:1 1 40%;padding:10px}body.parent .carte{padding:20px}body.parent section{overflow-x:auto}#bloc-voix{bottom:8px;padding:12px}#ecran-fin .carte{padding:23px}.stats{gap:8px}}
@media(max-width:380px){.titre{font-size:18px}.marque-icone{display:none}.parcours{gap:8px}.parcours b{display:none}#ecran-accueil .carte{padding:20px}.rangee .bouton{width:100%}}