/* /ce1-homonymes — le nid des homonymes (thème vallée des dinos de /ce1).
   Palette du brief CE1 : vert jungle #2B8A3E, vert clair #D3F9D8, sable #FFF3D6,
   orange volcan #E8590C (décor ; texte #C2410C), lagon #1C7ED6, encre #1F2D24.
   Gros boutons (enfants de 7 ans), pas de menu en cascade,
   Andika pour les phrases (police de lecture). Tout est préfixé « hm- ». */
@font-face{font-family:Quicksand;src:url("/lecture/polices/quicksand-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Quicksand;src:url("/lecture/polices/quicksand-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Andika;src:url("/lecture/polices/andika-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("/ce1-fr/polices/baloo-2-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

html,body{margin:0;background:#FFF3D6}
body{min-height:100vh;font-family:Quicksand,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;color:#1F2D24;-webkit-tap-highlight-color:transparent}
.hm{--marine:#1F2D24;--doux:#5C5440;--vert:#2B8A3E;--rouge:#C92A2A;--c:#1C7ED6;min-height:100vh;display:flex;flex-direction:column}
.hm *{box-sizing:border-box}
.hm a{color:inherit}
button{font:inherit}

/* ---------- bandeau ---------- */
.hm-barre{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:linear-gradient(180deg,#B2F2BB,#D3F9D8);box-shadow:0 2px 0 rgba(31,45,36,.14)}
.hm-retour{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--marine);
  font-size:24px;font-weight:700;text-decoration:none;box-shadow:0 3px 0 rgba(31,45,36,.2)}
.hm-barre-t{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--marine)}
.hm-barre-t b{font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(20px,4.5vw,26px);line-height:1.1}
.hm-barre-t span{font-size:13px;color:#1B5E29;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-or{flex:none;padding:10px 14px;border-radius:999px;background:#FFF3C4;border:2px solid #E3A008;color:#7A4E00;font-weight:700;font-size:18px;text-decoration:none;box-shadow:0 3px 0 #E3A008}

.hm-corps{width:100%;max-width:860px;margin:0 auto;padding:18px 16px 28px;flex:1;position:relative}

/* ---------- Plumo ---------- */
.hm-plumo{display:inline-block;flex:none;line-height:0}
.hm-plumo svg{display:block;width:100%;height:auto}
.hm-bulle-plumo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hm-bulle-plumo p{position:relative;margin:0;padding:14px 16px;background:#fff;border-radius:18px;box-shadow:0 3px 0 rgba(42,36,22,.12);font-size:17px;line-height:1.45}
.hm-bulle-plumo p::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:#fff}

/* ---------- la vallée (décor de l'accueil) ---------- */
.hm-vallee{position:relative;height:92px;margin:-4px 0 14px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#E7F5FF 0%,#FFF3D6 58%,#8CE99A 58%,#51CF66 100%)}
.hm-vallee span{position:absolute;line-height:1}
.hm-v-volcan{right:8%;bottom:6px;font-size:58px}
.hm-v-fumee{right:calc(8% + 22px);bottom:58px;width:16px;height:16px;border-radius:50%;background:rgba(120,120,120,.35);animation:hm-fumee 3.5s ease-out infinite}
@keyframes hm-fumee{0%{transform:translateY(0) scale(.6);opacity:.8}100%{transform:translateY(-34px) scale(1.8);opacity:0}}
.hm-v-fougere{left:4%;bottom:2px;font-size:40px}
.hm-v-dino{left:22%;bottom:6px;font-size:46px}
.hm-v-nid{left:42%;bottom:8px;font-size:26px;padding:2px 6px 0;border-radius:0 0 40px 40px;border-bottom:7px solid #A9743A}
.hm-v-arbre{right:24%;bottom:4px;font-size:44px}

/* ---------- les nids ---------- */
.hm-revisions{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:16px;border-radius:20px;text-decoration:none;
  background:#FFF3C4;border:3px solid #E3A008;box-shadow:0 4px 0 #E3A008;animation:hm-pulse 2.4s ease-in-out infinite}
.hm-revisions b{display:block;font-size:20px;color:#7A4E00}
.hm-revisions span span{font-size:15px;color:#7A4E00}
.hm-rev-ic{font-size:34px}
@keyframes hm-pulse{50%{transform:scale(1.02)}}
.hm-iles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.hm-ile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border-radius:24px;text-decoration:none;
  background:#fff;border:3px solid var(--c);box-shadow:0 5px 0 var(--c);min-height:150px;justify-content:center;transition:transform .1s}
.hm-ile:hover{transform:translateY(-2px)}
.hm-ile:active{transform:translateY(3px);box-shadow:0 2px 0 var(--c)}
.hm-ile-ic{font-size:40px;line-height:1}
.hm-ile-nom{font-family:Andika,Quicksand,sans-serif;font-size:26px;color:var(--c);filter:brightness(.8)}
.hm-ile-et{font-size:22px;color:#E3A008;letter-spacing:2px}
.hm-ile-pal{font-size:13px;color:var(--doux);text-align:center}
.hm-ile-due{position:absolute;top:-10px;right:-6px;padding:4px 9px;border-radius:999px;background:#E8590C;color:#fff;font-size:14px;font-weight:700}
.hm-melange .hm-ile-nom{line-height:1.15;text-align:center;font-family:"Baloo 2",Quicksand,sans-serif;font-size:22px;color:var(--marine);filter:none}
.hm-ile.brume{opacity:.55;border-style:dashed;box-shadow:none}
.hm-bas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.hm-tuile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:20px;text-decoration:none;background:#1F2D24;color:#fff !important;box-shadow:0 5px 0 #0E1712;text-align:center}
.hm-tuile span{font-size:32px}
.hm-tuile b{font-size:18px}
.hm-tuile small{font-size:13px;opacity:.85}
.hm-total{text-align:center;color:var(--doux);margin:16px 0 0}

/* ---------- pied ---------- */
.hm-pied{padding:16px;text-align:center;color:var(--doux);font-size:14px}
.hm-pied-l{margin:8px 0}
.hm-pied p{margin:6px 0 0;font-size:12px}
.hm-lien{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;padding:6px}
.hm-compte{max-width:700px;margin:0 auto}

/* ---------- la leçon ---------- */
.hm-regles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hm-regle{background:#fff;border-radius:22px;padding:16px;border-top:8px solid var(--c);box-shadow:0 4px 0 rgba(42,36,22,.1);display:flex;flex-direction:column;gap:8px}
.hm-regle-mot{font-family:Andika,sans-serif;font-size:54px;line-height:1;color:var(--c);filter:brightness(.8);text-align:center}
.hm-regle-quoi{margin:0;font-size:18px;font-weight:700}
.hm-regle-test{margin:0;font-size:16px;color:var(--doux)}
.hm-exemple{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:14px;background:#F6F1E4;font-family:Andika,sans-serif;font-size:19px;text-align:center}
.hm-ex-fl{color:var(--doux)}
.hm-ex-b.ok{color:var(--vert)}
.hm-ex-b.ko{color:var(--rouge)}
.hm-memo{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:18px 0 0;padding:14px 18px;border-radius:18px;background:#D3F9D8;border:2px dashed #2B8A3E;font-size:19px;color:var(--marine)}

/* ---------- boutons ---------- */
.hm-suite{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.hm-go{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 26px;border:0;border-radius:999px;cursor:pointer;
  background:#2B8A3E;color:#fff !important;font-size:20px;font-weight:700;text-decoration:none;box-shadow:0 5px 0 #1B5E29}
.hm-go:active{transform:translateY(3px);box-shadow:0 2px 0 #1B5E29}
.hm-go:disabled{opacity:.45;cursor:default}
.hm-go.clair{background:#fff;color:var(--marine) !important;box-shadow:0 5px 0 rgba(31,45,36,.25)}
.hm-ecoute{align-self:center;border:0;border-radius:999px;padding:10px 16px;background:#D3F9D8;color:var(--marine);font-weight:700;cursor:pointer;font-size:16px;box-shadow:0 3px 0 rgba(43,138,62,.35)}
.hm-ecoute.rond{flex:none;width:56px;height:56px;padding:0;font-size:26px}
.hm-ecoute.mini{flex:none;width:44px;height:44px;padding:0;font-size:20px;line-height:44px;text-align:center}
.hm-bulle-plumo p .hm-ecoute.dans{float:right;margin:0 0 4px 8px}

/* ---------- une question ---------- */
.hm-prog{display:flex;gap:6px;margin-bottom:14px}
.hm-prog span{flex:1;height:12px;border-radius:6px;background:#E9E1CC}
.hm-prog span.ok{background:#40C057}
.hm-prog span.ko{background:#FA8C5A}
.hm-prog span.ici{background:var(--c)}
.hm-carte-q{background:#fff;border-radius:26px;padding:20px 18px;box-shadow:0 5px 0 rgba(42,36,22,.1);border-top:8px solid var(--c)}
.hm-consigne{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.hm-consigne p{margin:0;font-size:18px;color:var(--doux)}
.hm-question{margin:16px 0 10px;font-size:20px;font-weight:700;text-align:center}
.hm-ligne{display:flex;align-items:center;gap:12px}
.hm-phrase{flex:1;margin:0;font-family:Andika,Quicksand,sans-serif;font-size:clamp(24px,5.4vw,34px);line-height:1.6}
.hm-case{display:inline-block;min-width:2.6em;padding:0 .25em;margin:0 .12em;border-bottom:4px solid var(--c);border-radius:8px 8px 0 0;background:#F1F3F5;text-align:center;color:#868E96}
.hm-case.test{background:#FFF3BF;color:#7A4E00;border-color:#E3A008}
.hm-case.relu{background:#F3F0FF;color:#2A2416;border-color:#7048E8}
.hm-case.ok{background:#D3F9D8;color:var(--vert);border-color:var(--vert)}
.hm-champ{font:inherit;font-family:Andika,Quicksand,sans-serif;width:4.2em;padding:0 .2em;margin:0 .12em;border:0;border-bottom:4px solid var(--c);border-radius:8px 8px 0 0;background:#FFF9DB;text-align:center;color:#2A2416;outline:none}
.hm-champ:focus{background:#FFF3BF;box-shadow:0 0 0 3px rgba(28,126,214,.35)}
.hm-champ.ok{background:#D3F9D8;color:var(--vert);border-color:var(--vert)}
.hm-champ.ko{background:#D3F9D8;color:var(--vert);border-color:var(--vert)}
.hm-choix{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:16px}
.hm-mot{min-width:140px;min-height:76px;padding:12px 24px;border:3px solid var(--c);border-radius:22px;background:#fff;cursor:pointer;
  font-family:Andika,Quicksand,sans-serif;font-size:34px;color:#2A2416;box-shadow:0 5px 0 var(--c);transition:transform .08s}
.hm-mot.petit{font-family:Quicksand,sans-serif;font-size:20px;font-weight:700;min-height:64px}
.hm-mot:active{transform:translateY(3px);box-shadow:0 2px 0 var(--c)}
.hm-mot:disabled{cursor:default}
.hm-mot.juste{background:#D3F9D8;border-color:var(--vert);box-shadow:0 5px 0 var(--vert)}
.hm-mot.eteint{opacity:.35;box-shadow:none}
.hm-mot.secoue{animation:hm-secoue .35s}
.hm-mot.faux{background:#FFE3E3;border-color:#FA5252;box-shadow:0 5px 0 #FA5252;animation:hm-secoue .35s}
@keyframes hm-secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hm-indice{margin:14px 0 0;padding:10px 14px;border-radius:14px;font-size:18px;text-align:center}
.hm-indice.ok{background:#EBFBEE;color:var(--vert)}
.hm-indice.ko{background:#FFF4E6;color:#A34A00}
.hm-accents{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.hm-accent{width:60px;height:60px;border:3px solid #ADB5BD;border-radius:16px;background:#fff;font-family:Andika,sans-serif;font-size:30px;cursor:pointer;box-shadow:0 4px 0 #ADB5BD}

/* ---------- la correction ---------- */
.hm-fb{position:relative;margin-top:16px}
.hm-fb-boite{border-radius:22px;padding:16px 18px;animation:hm-monte .25s ease-out}
.hm-fb-boite.ok{background:#EBFBEE;border:3px solid #40C057}
.hm-fb-boite.ko{background:#FFF4E6;border:3px solid #FD7E14}
@keyframes hm-monte{from{opacity:0;transform:translateY(10px)}}
.hm-fb-t{font-family:"Baloo 2",Quicksand,sans-serif;font-size:26px;color:var(--marine)}
.hm-fb-bon{margin:8px 0 0;font-family:Andika,sans-serif;font-size:22px}
.hm-fb-bon b{color:var(--vert);font-size:26px}
.hm-fb-truc{margin:10px 0 0;font-size:18px;color:#40362A}
.hm-fb-truc b{font-family:Andika,sans-serif;font-size:22px;color:var(--vert)}
.hm-fb .hm-suite{margin-top:12px}
.hm-piece-vol{position:absolute;top:0;font-size:30px;pointer-events:none;animation:hm-vole 1.1s ease-out forwards}
@keyframes hm-vole{to{transform:translateY(-140px) scale(.6);opacity:0}}

/* ---------- fin de séance ---------- */
.hm-fin{display:flex;flex-direction:column;align-items:center;text-align:center}
.hm-fin-t{font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(28px,6vw,38px);color:var(--marine);margin:8px 0 4px}
.hm-fin-score{font-size:22px;margin:0}
.hm-fin-et{font-size:44px;color:#E3A008;letter-spacing:4px;margin:6px 0}
.hm-coffre{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px 0;padding:14px 26px;border-radius:22px;background:#FFF3C4;border:3px solid #E3A008;color:#7A4E00}
.hm-coffre b{font-size:24px}
.hm-coffre-ic{font-size:40px}
.hm-monte{margin:12px 0;padding:14px 18px;border-radius:18px;background:#F3F0FF;border:3px solid #7048E8;color:#3B1F9E;font-size:18px;max-width:560px}
.hm-astuce{color:var(--doux);font-size:16px;max-width:600px;margin:12px auto}

/* ---------- récompenses ---------- */
.hm-vitrine{display:flex;align-items:center;gap:16px;background:#fff;border-radius:24px;padding:12px 18px;box-shadow:0 4px 0 rgba(42,36,22,.1)}
.hm-vitrine p{font-size:18px;margin:0}
.hm-onglets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.hm-onglet{border:2px solid #CED4DA;border-radius:999px;padding:10px 16px;background:#fff;cursor:pointer;font-weight:700;font-size:16px;min-height:48px}
.hm-onglet.on{background:#2B8A3E;border-color:#2B8A3E;color:#fff}
.hm-objets{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.hm-objet{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:3px solid #E9E1CC;border-radius:20px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #E9E1CC}
.hm-objet b{font-size:15px}
.hm-objet.porte{border-color:#2B8A3E;box-shadow:0 4px 0 #2B8A3E;background:#EBFBEE}
.hm-objet.cher{opacity:.55}
.hm-objet-img{line-height:0;width:72px}
.hm-objet-img svg{width:100%;height:auto}
.hm-objet-prix{font-weight:700;color:#7A4E00}

/* ---------- le volcan des œufs ---------- */
.hm-jeu-affiche{text-align:center;background:#fff;border-radius:24px;padding:18px;box-shadow:0 4px 0 rgba(42,36,22,.1)}
.hm-jeu-affiche h1{font-family:"Baloo 2",Quicksand,sans-serif;color:var(--marine);margin:6px 0}
.hm-jeu-affiche p{font-size:17px;line-height:1.5}
.hm-jeu-gros{font-size:56px}
.hm-record{font-weight:700;color:#7A4E00}
.hm-reviser{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;padding:16px;border-radius:20px;background:#FFF3C4;border:3px solid #E3A008;color:#7A4E00;text-align:center}
.hm-reviser b{font-size:20px}
.hm-jeu{position:relative;flex:1;display:flex;flex-direction:column;max-width:900px;width:100%;margin:0 auto;padding:12px 12px 20px}
.hm-retour.flottant{position:absolute;top:12px;left:12px;z-index:3}
.hm-hud{display:flex;justify-content:center;gap:22px;font-size:22px;font-weight:700;color:var(--marine);padding:10px 0 10px 56px}
.hm-scene-jeu{position:relative;height:270px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#E7F5FF 0%,#FFF3D6 62%)}
.hm-sol{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#8CE99A,#40C057)}
.hm-lave{position:absolute;left:-30px;bottom:-14px;width:120px;height:62px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#FFD43B 0 18%,#FD7E14 45%,#E8590C 70%,#C2410C 100%);
  box-shadow:0 0 18px 6px rgba(232,89,12,.45);animation:hm-bouillonne 1.6s ease-in-out infinite alternate}
@keyframes hm-bouillonne{to{transform:scale(1.06)}}
.hm-volcan-jeu{position:absolute;right:8px;bottom:16px;font-size:74px;line-height:1}
.hm-fougere-jeu{position:absolute;left:40%;bottom:4px;font-size:34px;line-height:1;opacity:.9}
.hm-roule{position:absolute;left:100%;top:10px;bottom:20px;width:min(78%,520px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;transition:opacity .4s}
.hm-panneau{width:100%;padding:12px 14px;border-radius:14px;background:#FFFDF5;border:3px solid #8A5A2B;font-family:Andika,Quicksand,sans-serif;font-size:clamp(20px,4.4vw,28px);text-align:center;line-height:1.3;color:#1F2D24;box-shadow:0 4px 0 rgba(138,90,43,.35)}
.hm-oeuf{position:relative;flex:none;width:64px;height:80px;border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,#FFFFFF 0 12%,transparent 13%),radial-gradient(circle at 65% 55%,#B2F2BB 0 9%,transparent 10%),radial-gradient(circle at 35% 70%,#B2F2BB 0 7%,transparent 8%),linear-gradient(160deg,#FFF9DB,#F4E3B0);
  border:3px solid #C9A86A}
.hm-oeuf-in{font-size:46px;line-height:1}
.hm-roule.eclot .hm-oeuf{background:transparent;border-color:transparent;animation:hm-eclot .6s ease-out}
.hm-roule.eclot .hm-panneau,.hm-roule.rate .hm-panneau,.hm-roule.passe .hm-panneau{background:#EBFBEE;border-color:#2B8A3E}
@keyframes hm-eclot{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.hm-roule.passe .hm-oeuf,.hm-roule.rate .hm-oeuf{animation:hm-tombe .9s ease-in forwards}
@keyframes hm-tombe{to{transform:translateY(150px) rotate(-60deg);opacity:0}}
.hm-jeu-btns .hm-mot{min-width:160px;min-height:88px;font-size:38px}

/* ---------- parents ---------- */
.hm-parents h2{font-family:"Baloo 2",Quicksand,sans-serif;color:var(--marine);margin:24px 0 8px}
.hm-parents p{line-height:1.5}
.hm-chapeau{font-size:16px;line-height:1.5;background:#D3F9D8;padding:12px 16px;border-radius:16px}
.hm-porte{max-width:360px;margin:30px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;padding:20px;border-radius:22px}
.hm-porte .hm-champ{width:120px;font-size:30px}
.hm-tab-zone{overflow-x:auto}
.hm-tab{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:15px}
.hm-tab th,.hm-tab td{padding:9px 10px;text-align:left;border-bottom:1px solid #EEE6D2;vertical-align:top}
.hm-tab th{background:#FFF3D6;font-size:13px;color:var(--doux)}
.hm-tab.petit{font-size:14px}
.hm-liste{line-height:1.6;padding-left:20px}
.hm-liste small{color:var(--doux)}
.hm-qui{text-align:center}

/* ---------- téléphone ---------- */
@media (max-width:560px){
  .hm-regles{grid-template-columns:1fr}
  .hm-iles{grid-template-columns:1fr 1fr;gap:10px}
  .hm-ile{min-height:132px}
  .hm-ligne{flex-direction:column;align-items:stretch}
  .hm-mot{min-width:120px;font-size:30px}
  .hm-bulle-plumo{align-items:flex-start}
  .hm-hud{font-size:18px;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .hm-revisions,.hm-lave,.hm-v-fumee{animation:none}
}

/* ---------- la pièce d'or dessinée (l'emoji 🪙 est argenté sur Apple) ----------
   /commun/piece-or.js remplace tout « 🪙 » affiché par <span class="piece-or">. */
.piece-or{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.14em;margin:0 .04em;flex:none;position:relative;
  background:radial-gradient(circle at 32% 28%,#FFFBD1 0 10%,#FFE066 24%,#FFC400 52%,#E09E00 78%,#B57A00 100%);
  box-shadow:inset 0 0 0 .07em #A86F00,inset 0 0 0 .15em #FFD84A,0 .05em .1em rgba(120,80,0,.35)}
.piece-or::after{content:"";position:absolute;inset:.27em;border-radius:50%;border:.06em solid rgba(150,95,0,.55)}