/* /ce2-homonymes — l'archipel des homonymes (thème île au trésor de /ce2).
   Gros boutons (les CE2 visent mal à la souris), 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:#FFF8EA}
body{min-height:100vh;font-family:Quicksand,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;color:#2A2416;-webkit-tap-highlight-color:transparent}
.hm{--marine:#0B3954;--doux:#6B5E45;--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,#7FD6F5,#BDEEFF);box-shadow:0 2px 0 rgba(11,57,84,.12)}
.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(11,57,84,.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:#14506F;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 carte des îles ---------- */
.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{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:#0B3954;color:#fff !important;box-shadow:0 5px 0 #062337;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{margin:18px 0 0;padding:14px 18px;border-radius:18px;background:#E7F5FF;border:2px dashed #1C7ED6;font-size:18px;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(11,57,84,.25)}
.hm-ecoute{align-self:center;border:0;border-radius:999px;padding:10px 16px;background:#E7F5FF;color:var(--marine);font-weight:700;cursor:pointer;font-size:16px}
.hm-ecoute.rond{flex:none;width:56px;height:56px;padding:0;font-size:26px;box-shadow:0 3px 0 rgba(11,57,84,.2)}

/* ---------- 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{margin:0 0 14px;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:var(--marine);border-color:var(--marine);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 canon ---------- */
.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-mer-jeu{position:relative;height:250px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#BDEEFF 0%,#BDEEFF 45%,#2BA8D8 45%,#1479B0 100%)}
.hm-vagues{position:absolute;left:-40px;right:-40px;top:calc(45% - 14px);height:16px;background:radial-gradient(circle at 20px 16px,#2BA8D8 14px,transparent 15px) 0 0/40px 16px repeat-x;animation:hm-vague 6s linear infinite}
@keyframes hm-vague{to{transform:translateX(40px)}}
.hm-bateau{position:absolute;left:100%;top:12%;width:min(78%,520px);display:flex;flex-direction:column;align-items:center;transition:opacity .4s}
.hm-voile{width:100%;padding:12px 14px;border-radius:14px 14px 4px 4px;background:#FFFDF5;border:3px solid #5E3512;font-family:Andika,Quicksand,sans-serif;font-size:clamp(18px,4vw,26px);text-align:center;line-height:1.3;color:#2A2416}
.hm-coque{width:80%;height:46px;margin-top:4px;border-radius:0 0 50% 50%;background:#8A5A2B;border:3px solid #5E3512;display:grid;place-items:center;font-size:24px}
.hm-bateau.coule{animation:hm-coule .6s ease-in forwards}
@keyframes hm-coule{to{transform:translateY(160px) rotate(18deg);opacity:0}}
.hm-bateau.rate .hm-voile,.hm-bateau.passe .hm-voile{background:#EBFBEE;border-color:#2B8A3E}
.hm-canon{position:absolute;left:10px;bottom:10px;font-size:46px}
.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-chapeau{font-size:16px;line-height:1.5;background:#E7F5FF;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:#F6F1E4;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-vagues{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)}