/* Mise en page : le site se feuillette comme un imagier OKYEL. Chaque section est une page : un panneau
   couleur du décor en haut pour l'image, le texte posé sur le papier crème en dessous. */
:root{
  --papier:#FAF5EC; --papier2:#F3ECDE; --encre:#2E2A26; --encre-douce:#6B6157; --trait:#E6DBC9;
  --terracotta:#B8603D; --sauge:#A3B899; --sauge-fonce:#5F7A4F; --sauge-fond:#E4EADD; --petale:#FFFDF8;
  --maison:#E9D9C3; --ferme:#DDE4CF; --mare:#CBDCE2; --foret:#EDD6C4; --potager:#EFE8C2;
  --encre-fixe:#2E2A26; --ombre:0 1px 0 rgba(46,42,38,.06), 0 8px 24px -12px rgba(46,42,38,.18);
  --f-titre:"Poppins", ui-rounded, "Avenir Next", system-ui, sans-serif;
  --f-texte:"Poppins", ui-rounded, "Avenir Next", system-ui, sans-serif;
  --r:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --papier:#1E1C19; --papier2:#28251F; --encre:#F2EBDF; --encre-douce:#B9AE9E; --trait:#3A352D;
  --terracotta:#E08B65; --sauge-fonce:#AFC59F; --sauge-fond:#2C3328; --petale:#FFFDF8;
  --ombre:0 1px 0 rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6); color-scheme:dark }}
:root[data-theme="dark"]{
  --papier:#1E1C19; --papier2:#28251F; --encre:#F2EBDF; --encre-douce:#B9AE9E; --trait:#3A352D;
  --terracotta:#E08B65; --sauge-fonce:#AFC59F; --sauge-fond:#2C3328; --petale:#FFFDF8;
  --ombre:0 1px 0 rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{background:var(--papier); color:var(--encre); font-family:var(--f-texte); font-weight:300; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--papier)}
.large{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.cadre{max-width:1120px; margin:0 auto}
h1,h2,h3{font-family:var(--f-titre); font-weight:600; text-wrap:balance; letter-spacing:-.015em; margin:0}
h2{font-size:clamp(1.9rem, 4.2vw, 2.9rem); line-height:1.08}
h3{font-size:1.15rem; line-height:1.3; font-weight:500}
p{margin:0}
.chapeau{font-size:1.08rem; color:var(--encre-douce); max-width:60ch}
.etiquette{font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta)}
a{color:inherit}
:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px; border-radius:6px}
svg.sujet, svg.perso{display:block; width:100%; height:auto}

/* en-tête */
.entete{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--trait)}
.entete .cadre{display:flex; align-items:center; gap:24px; padding-block:14px}
.logo{height:28px; width:auto; flex:none}
.nav{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-left:auto; min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap; text-decoration:none; font-size:.9rem; font-weight:400; padding:6px 12px; border-radius:999px; color:var(--encre-douce)}
.nav a:hover{background:var(--papier2); color:var(--encre)}
.nav a.ecouter{background:var(--sauge-fonce); color:var(--papier)}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:10px; font:500 .98rem/1 var(--f-texte); padding:14px 22px; border-radius:999px; border:0; cursor:pointer; text-decoration:none}
.btn-plein{background:var(--encre); color:var(--papier)}
.btn-plein:hover{background:var(--terracotta)}
.btn-ligne{background:transparent; color:var(--encre); box-shadow:inset 0 0 0 1.5px var(--encre)}
.btn-ligne:hover{background:var(--papier2)}
.btn[aria-disabled="true"]{opacity:.62; cursor:default}

/* héros */
.heros{padding-block:56px 40px}
.heros .cadre{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center}
.heros h1{font-size:clamp(2.6rem, 6.4vw, 4.9rem); line-height:.98; letter-spacing:-.03em}
.heros h1 em{font-style:normal; color:var(--terracotta)}
.baseline{font-weight:300; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--sauge-fonce); margin-top:14px}
.heros .chapeau{margin-top:22px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.bande{display:flex; width:180px; height:8px; border-radius:4px; overflow:hidden; margin-top:34px}
.bande span{flex:1}
.scene{position:relative; aspect-ratio:1/1; max-width:100%; background:var(--sauge-fond); border-radius:32px; overflow:hidden}
.scene .leo{position:absolute; width:52%; left:12%; bottom:7%}
.scene .poussin{position:absolute; width:30%; right:9%; bottom:6%}
.scene .fleur{position:absolute; width:5%; left:66%; bottom:12%}
.sol{position:absolute; inset:auto 0 0 0; height:16%; background:color-mix(in srgb, var(--sauge) 30%, transparent)}

/* sections */
section{padding-block:72px}
.tete{display:grid; gap:14px; margin-bottom:36px}
.papier2{background:var(--papier2)}

/* le livre */
.livre{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:start}
.couverture{background:var(--maison); border-radius:6px 14px 14px 6px; aspect-ratio:1/1; max-width:100%; padding:9% 9% 7%; display:grid; grid-template-rows:auto auto 1fr auto; box-shadow:var(--ombre), inset 6px 0 0 var(--sauge); color:var(--encre-fixe)}
.couverture .titre{font-weight:600; font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1; text-align:center}
.couverture .langues{text-align:center; color:#5F7A4F; font-size:clamp(.9rem,1.8vw,1.15rem); margin-top:6px}
.couverture .bande{margin:10px auto 0; width:42%; height:5px}
.couverture .illus{display:flex; align-items:flex-end; justify-content:center; gap:4%; min-height:0}
.couverture .illus .leo{width:48%}
.couverture .illus .sujet{width:28%; margin-bottom:-2%}
.couverture .logo{--encre:#2E2A26; height:22px; justify-self:center; margin-top:8px}
.fiche{display:grid; gap:22px}
.faits{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--trait); border-radius:14px; overflow:hidden}
.faits div{background:var(--papier); padding:14px 16px}
.faits b{display:block; font-weight:600; font-size:1.35rem; font-variant-numeric:tabular-nums}
.faits span{font-size:.8rem; color:var(--encre-douce)}
.apercu{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.page-apercu{margin:0; background:#FAF5EC; border-radius:8px; overflow:hidden; box-shadow:var(--ombre); color:var(--encre-fixe)}
.page-haut{position:relative; background:var(--decor); aspect-ratio:1/.72; display:grid; place-items:center}
.page-haut .sujet{width:72%}
.fleur-cachee{position:absolute; width:7%; right:10%; top:14%}
.page-apercu figcaption{display:grid; text-align:center; padding:10px 6px 14px; line-height:1.2}
.page-apercu .fr{font-weight:600; font-size:clamp(.85rem,1.6vw,1.05rem)}
.page-apercu .en{color:#5F7A4F; font-size:clamp(.75rem,1.3vw,.9rem)}
.astuce{display:flex; gap:14px; align-items:center; background:var(--sauge-fond); padding:14px 18px; border-radius:14px}
.astuce .fleur{width:22px; flex:none}

/* écouter */
.ecoute{background:var(--sauge-fond)}
.paires{display:flex; flex-wrap:wrap; gap:8px}
.paire{font:400 .88rem/1 var(--f-texte); padding:9px 14px; border-radius:999px; border:1.5px solid var(--sauge-fonce); background:transparent; color:var(--encre)}
.paire[aria-pressed="true"]{background:var(--sauge-fonce); color:var(--papier)}
.paire:disabled{opacity:.5; border-style:dashed}
.grille{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px}
.tuile{background:var(--papier); border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre)}
.tuile-image{display:block; width:100%; background:var(--decor); border:0; padding:10% 14% 4%; cursor:pointer}
.tuile-image:hover .sujet{transform:translateY(-3px) rotate(-2deg)}
.tuile .sujet{transition:transform .25s}
.tuile-mots{display:grid; padding:8px 8px 10px}
.mot{display:flex; align-items:center; justify-content:space-between; gap:6px; background:transparent; border:0; border-radius:10px; padding:6px 8px; cursor:pointer; color:var(--encre); text-align:left; font-family:var(--f-texte)}
.mot:hover{background:var(--papier2)}
.mot .fr{font-weight:600; font-size:.98rem}
.mot .en{font-weight:300; color:var(--sauge-fonce); font-size:.95rem}
.haut{font-size:.62rem; font-weight:500; letter-spacing:.1em; color:var(--encre-douce); border:1px solid var(--trait); border-radius:5px; padding:2px 5px}
.tuile.joue{outline:3px solid var(--terracotta)}
.mode-emploi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px}
.mode-emploi p{background:var(--papier); padding:16px 18px; border-radius:14px; font-size:.95rem}
.mode-emploi b{display:block; font-weight:500; margin-bottom:2px}
.avis{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--encre); color:var(--papier); padding:12px 18px; border-radius:999px; font-size:.92rem; z-index:30; max-width:calc(100% - 32px); text-align:center}

/* collections */
.niveaux{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.niveau{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:20px; align-items:center; padding:18px 20px; border-radius:16px; background:var(--papier2)}
.niveau.actif{background:var(--papier); box-shadow:inset 0 0 0 2px var(--sauge-fonce)}
.niveau-code{font-weight:600; font-size:1.3rem; color:var(--terracotta); font-variant-numeric:tabular-nums}
.niveau-nom{font-weight:500; font-size:1.08rem}
.niveau-age{font-size:.86rem; color:var(--sauge-fonce); font-weight:500}
.statut{font-size:.78rem; font-weight:500; padding:5px 11px; border-radius:999px; background:var(--papier); color:var(--encre-douce); white-space:nowrap}
.niveau.actif .statut{background:var(--sauge-fonce); color:var(--papier)}
.langues-liste{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.langues-liste span{font-size:.9rem; padding:7px 13px; border-radius:999px; border:1px solid var(--trait)}
.langues-liste span.oui{border-color:var(--sauge-fonce); color:var(--sauge-fonce); font-weight:500}

/* univers */
.amis{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.ami{background:var(--papier); border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre)}
.ami-dessin{background:color-mix(in srgb, var(--signature) 26%, #FAF5EC); aspect-ratio:1/1; display:grid; place-items:center; padding:12%}
.ami-dessin .perso{max-height:100%; width:auto; max-width:100%}
.ami-texte{padding:14px 16px 18px; display:grid; gap:4px; font-size:.92rem}
.ami-nom{font-weight:600; font-size:1.2rem; display:flex; align-items:center; gap:8px}
.ami-nom::after{content:""; width:12px; height:12px; border-radius:50%; background:var(--signature); box-shadow:0 0 0 1px var(--trait)}
.ami-role{font-size:.8rem; color:var(--encre-douce); font-weight:500}

/* parents */
.trois{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.carte{background:var(--papier); padding:24px; border-radius:var(--r); display:grid; gap:10px; align-content:start}
.papier2 .carte{background:var(--papier)}
.carte .num{font-weight:600; color:var(--terracotta); font-size:.9rem}
.carte p{font-size:.96rem; color:var(--encre-douce)}
.signature-auteur{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; margin-top:40px; padding:24px; border-radius:var(--r); background:var(--sauge-fond)}
.signature-auteur .rond{width:72px; height:72px; border-radius:50%; background:var(--sauge); display:grid; place-items:center; font-weight:600; font-size:1.5rem; color:var(--encre-fixe)}

/* ressources et lettre */
.ressources{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:stretch}
.lettre{min-width:0; background:var(--encre); color:var(--papier); border-radius:24px; padding:32px; display:grid; gap:16px; align-content:start}
.lettre > *{min-width:0; overflow-wrap:anywhere}
.lettre .chapeau{color:color-mix(in srgb, var(--papier) 80%, transparent)}
.lettre form{display:flex; flex-wrap:wrap; gap:10px}
.lettre input{flex:1 1 220px; min-width:0; font:400 1rem var(--f-texte); padding:13px 16px; border-radius:999px; border:0; background:var(--papier); color:var(--encre)}
.lettre .btn{background:var(--terracotta); color:#FFF8F0}
.lettre .retour{font-size:.9rem; color:var(--sauge)}
.liste-res{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.liste-res li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 18px; border-radius:14px; background:var(--papier)}
.liste-res b{font-weight:500}

/* blog */
.articles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.article{display:grid; grid-template-rows:auto 1fr; border-radius:var(--r); overflow:hidden; background:var(--papier); box-shadow:var(--ombre)}
.article .visuel{aspect-ratio:16/9; background:var(--decor); display:grid; place-items:center}
.article .visuel .sujet{width:40%}
.article .corps{padding:18px 20px 22px; display:grid; gap:8px; align-content:start}
.article .meta{font-size:.78rem; color:var(--encre-douce); font-weight:500}
.article p{font-size:.94rem; color:var(--encre-douce)}

/* pros, faq */
.pros{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; align-items:center}
.contact{font-weight:500; font-size:1.15rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.contact code{font-family:var(--f-texte); background:var(--papier); padding:8px 14px; border-radius:10px; user-select:all}
.copier{font:500 .85rem var(--f-texte); border:1.5px solid var(--encre); background:transparent; color:var(--encre); border-radius:999px; padding:7px 14px; cursor:pointer}
details{border-top:1px solid var(--trait); padding-block:18px}
details:last-child{border-bottom:1px solid var(--trait)}
summary{cursor:pointer; font-weight:500; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--terracotta); font-weight:600}
details[open] summary::after{content:"−"}
details p{margin-top:10px; color:var(--encre-douce); max-width:68ch}

/* pied */
.pied{background:var(--papier2); padding-block:44px; font-size:.9rem; color:var(--encre-douce)}
.pied .cadre{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end}
.pied .logo{height:32px}
.pied nav{display:flex; flex-wrap:wrap; gap:6px 18px}

@media (max-width: 860px){
  .heros .cadre, .livre, .ressources, .pros{grid-template-columns:minmax(0,1fr)}
  .scene{max-width:440px; width:100%}
  .amis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trois, .articles, .mode-emploi{grid-template-columns:minmax(0,1fr)}
  .faits{grid-template-columns:repeat(2,minmax(0,1fr))}
  section{padding-block:56px}
  .pied .cadre{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 480px){
  .nav a:not(.ecouter){display:none}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .niveau{grid-template-columns:44px minmax(0,1fr)}
  .niveau .statut{grid-column:2; justify-self:start}
  .apercu{gap:8px}
  .lettre{padding:24px}
  .lettre .btn{width:100%; justify-content:center}
}

/* portes d'entrée vers l'écoute et les chansons */
.portes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.porte{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); background:var(--papier); border-radius:24px; overflow:hidden; text-decoration:none; box-shadow:var(--ombre); transition:transform .2s}
.porte:hover{transform:translateY(-3px)}
.porte-dessin{background:var(--decor); display:grid; place-items:center; padding:12%}
.porte-texte{padding:24px; display:grid; gap:8px; align-content:center}
.porte-texte p:not(.etiquette){color:var(--encre-douce); font-size:.95rem}
.fleche{font-weight:500; color:var(--sauge-fonce); margin-top:6px}
.fleche::after{content:" →"}
a.ami{display:block; text-decoration:none}
a.ami:hover .ami-dessin .perso{transform:translateY(-4px) rotate(-2deg)}
.ami-dessin .perso{transition:transform .25s}

/* pages intérieures */
.fil{font-size:.88rem; color:var(--encre-douce); display:flex; flex-wrap:wrap; gap:6px}
.fil a{color:var(--encre-douce)}
.page-tete{padding-block:44px 28px}
.page-tete h1{font-size:clamp(2.2rem,5.4vw,3.6rem); line-height:1.02; letter-spacing:-.025em; margin-top:10px}
.lecteur{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center; background:var(--papier); border-radius:24px; padding:20px; box-shadow:var(--ombre)}
.lecteur .vignette{width:96px; aspect-ratio:1/1; border-radius:18px; background:var(--decor); display:grid; place-items:center; padding:10px}
.lecteur .vignette svg{max-height:100%; width:auto; max-width:100%}
.jouer{display:inline-flex; align-items:center; gap:10px; font:500 .95rem/1 var(--f-texte); padding:12px 18px; border-radius:999px; border:0; background:var(--encre); color:var(--papier); cursor:pointer}
.jouer::before{content:""; width:0; height:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.jouer.en-cours::before{width:10px; height:12px; border:0; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box}
.barre{height:4px; border-radius:2px; background:var(--trait); overflow:hidden; margin-top:12px}
.barre span{display:block; height:100%; width:0; background:var(--terracotta); transition:width .2s linear}
.paroles{white-space:pre-line; font-size:1rem; line-height:1.75; color:var(--encre)}
.paroles .refrain{font-weight:500; color:var(--sauge-fonce)}
.chansons{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.chanson{background:var(--papier); border-radius:24px; overflow:hidden; box-shadow:var(--ombre); display:grid; grid-template-rows:auto 1fr}
.chanson-haut{display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; align-items:center; padding:18px; background:color-mix(in srgb, var(--signature) 22%, var(--papier))}
.chanson-haut .vignette{width:120px; aspect-ratio:1/1; display:grid; place-items:center}
.chanson-haut .vignette svg{max-height:100%; width:auto; max-width:100%}
.chanson-corps{padding:18px 20px 22px; display:grid; gap:12px; align-content:start}
.geste{font-size:.92rem; color:var(--encre-douce)}
.geste b{font-weight:500; color:var(--encre)}
.chanson details{border:0; padding:0}
.chanson summary{font-size:.92rem; color:var(--sauge-fonce)}
.recompense{margin-top:40px; display:grid; gap:16px}
.recompense h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.aussi{display:flex; flex-wrap:wrap; gap:10px}
.aussi a{display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:8px 16px 8px 8px; border-radius:999px; background:var(--papier); box-shadow:var(--ombre); font-weight:500}
.aussi a span.pastille{width:36px; height:36px; border-radius:50%; background:var(--signature); display:grid; place-items:center; overflow:hidden; padding:4px}
.aussi a span.pastille svg{max-height:100%; width:auto}
.ami-page{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:center}
.ami-grand{background:color-mix(in srgb, var(--signature) 26%, #FAF5EC); border-radius:32px; aspect-ratio:1/1; display:grid; place-items:center; padding:14%; max-width:100%}
.ami-grand svg{max-height:100%; width:auto; max-width:100%}
.traits{display:flex; flex-wrap:wrap; gap:8px}
.traits span{font-size:.85rem; padding:6px 12px; border-radius:999px; border:1px solid var(--trait)}
.dans-livres{display:grid; gap:10px}
.dans-livres a, .dans-livres p.vide{padding:14px 18px; border-radius:14px; background:var(--papier2); text-decoration:none}
.navamis{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
@media (max-width: 860px){
  .portes, .chansons, .ami-page{grid-template-columns:minmax(0,1fr)}
  .ami-grand{max-width:360px}
}
@media (max-width: 480px){
  .porte{grid-template-columns:minmax(0,1fr)}
  .porte-dessin{aspect-ratio:16/9; padding:6% 30%}
  .chanson-haut{grid-template-columns:84px minmax(0,1fr)}
  .chanson-haut .vignette{width:84px}
  .lecteur{grid-template-columns:minmax(0,1fr)}
}