.ape-jeu{
  --paper:var(--wp--preset--color--paper,#FBF7F2); --surface:var(--wp--preset--color--surface,#FFFDF8); --ink:var(--wp--preset--color--ink,#2C2A35); --muted:var(--wp--preset--color--muted,#6B6878); --line:var(--wp--preset--color--line,#E7DFD4);
  --rose:var(--wp--preset--color--rose,#D24078); --rose-ink:var(--wp--preset--color--rose-ink,#C22A64); --rose-soft:var(--wp--preset--color--rose-soft,#F7E2E7);
  --bleu:var(--wp--preset--color--bleu,#56B8D8); --bleu-ink:var(--wp--preset--color--bleu-ink,#2C7B95); --bleu-soft:var(--wp--preset--color--bleu-soft,#E2EFF4);
  --vert:var(--wp--preset--color--vert,#589D41); --vert-ink:var(--wp--preset--color--vert-ink,#3E8028); --vert-soft:var(--wp--preset--color--vert-soft,#E6EEDC);
  --teal:var(--wp--preset--color--teal,#198D88); --teal-ink:var(--wp--preset--color--teal-ink,#097D78); --teal-soft:var(--wp--preset--color--teal-soft,#DEEAE6);
  --orange:var(--wp--preset--color--orange,#D86127); --orange-ink:var(--wp--preset--color--orange-ink,#C34A0F); --orange-soft:var(--wp--preset--color--orange-soft,#F8E4D6);
  --indigo:var(--wp--preset--color--indigo,#2A6191); --indigo-ink:var(--wp--preset--color--indigo-ink,#1B5A91); --indigo-soft:var(--wp--preset--color--indigo-soft,#DFE5EC);
  --or:#E2A62B; --or-ink:#9A6B05;
  --ombre:6px 6px 0 rgba(44,42,53,.10);
}
.ape-jeu *{box-sizing:border-box}
.ape-jeu{background:var(--paper); color:var(--ink); font-family:var(--wp--preset--font-family--texte,Figtree,sans-serif); font-size:16px; line-height:1.55}
.ape-jeu .ape-jeu-wrap-inutile{max-width:1240px; margin:0 auto; padding-block:24px 44px; padding-left:16px; padding-right:16px}

.ape-jeu .eyebrow{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vert-ink); margin:0 0 6px}
.ape-jeu h1{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:800; line-height:1.02; font-size:clamp(2.1rem,6.5vw,3.4rem); margin:0 0 10px; text-wrap:balance}
.ape-jeu h1 .feutre{background:linear-gradient(transparent 58%, var(--vert-soft) 58%); padding:0 .08em}
.ape-jeu .chapo{max-width:64ch; margin:0; color:var(--muted); font-size:1.05rem}

/* ---------- le mot secret ---------- */
.ape-jeu .mot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
  margin-top:20px; padding:14px 18px; background:var(--surface);
  border:2.5px solid var(--ink); border-radius:22px; box-shadow:var(--ombre);
}
.ape-jeu .mot-titre{font:700 .74rem/1.3 var(--wp--preset--font-family--texte,Figtree,sans-serif); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.ape-jeu .cases{display:flex; gap:6px; flex-wrap:wrap}
.ape-jeu .case{
  width:36px; height:44px; border:2.5px solid var(--line); border-radius:10px; background:var(--paper);
  font:800 1.3rem/40px var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); text-align:center; color:#D7CFC2;
}
.ape-jeu .case.pleine{border-color:var(--vert); background:var(--vert-soft); color:var(--vert-ink); animation:pose .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pose{from{transform:translateY(-14px) rotate(-8deg); opacity:0} to{transform:none; opacity:1}}
.ape-jeu .compteur{font:700 .9rem/1.3 var(--wp--preset--font-family--texte,Figtree,sans-serif); color:var(--muted); text-align:right}
.ape-jeu .compteur b{display:block; font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-size:1.5rem; color:var(--ink)}

/* ---------- carte ---------- */
.ape-jeu .carte-boite{background:var(--surface); border:2.5px solid var(--ink); border-radius:26px; padding:10px; box-shadow:var(--ombre); margin-top:18px}
.ape-jeu .carte-scroll{overflow-x:auto; border-radius:18px; -webkit-overflow-scrolling:touch}
.ape-jeu #carte{display:block; width:100%; height:auto; border-radius:18px}
@media (max-width:820px){ .ape-jeu #carte{width:900px; max-width:none} }
.ape-jeu .aide-carte{margin:8px 4px 0; font-size:.84rem; color:var(--muted)}

/* ---------- les deux cartes du bas ---------- */
.ape-jeu .jeu{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; margin-top:18px}
@media (max-width:900px){ .ape-jeu .jeu{grid-template-columns:1fr} }

.ape-jeu .enigme{background:var(--surface); border:3px solid var(--ink); border-radius:26px; overflow:hidden; box-shadow:var(--ombre)}
.ape-jeu .enigme-tete{display:flex; gap:12px; align-items:center; padding:14px 18px; background:var(--vert-soft); border-bottom:3px solid var(--ink)}
.ape-jeu .enigme-tete .dragon{flex:0 0 auto}
.ape-jeu .enigme-tete p{margin:0; font:700 .74rem/1.3 var(--wp--preset--font-family--texte,Figtree,sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--vert-ink)}
.ape-jeu .enigme-tete h2{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:800; font-size:1.2rem; line-height:1.15; margin:2px 0 0}
.ape-jeu .enigme-corps{padding:16px 18px 18px}
.ape-jeu .question{margin:0 0 14px; font-size:1.06rem; font-weight:500}
.ape-jeu .reponses{display:flex; flex-direction:column; gap:9px}
.ape-jeu .reponse{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  font:600 1rem/1.3 var(--wp--preset--font-family--texte,Figtree,sans-serif); color:var(--ink); background:var(--paper);
  border:2.5px solid var(--line); border-radius:16px; padding:12px 14px; transition:transform .12s, border-color .15s, background .15s;
}
.ape-jeu .reponse:hover:not(:disabled){transform:translateY(-2px); border-color:var(--vert)}
.ape-jeu .reponse:focus-visible{outline:3px solid var(--indigo-ink); outline-offset:2px}
.ape-jeu .reponse .lettre{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--surface); border:2.5px solid var(--ink); font:800 .85rem/23px var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); text-align:center}
.ape-jeu .reponse.juste{background:var(--vert-soft); border-color:var(--vert)}
.ape-jeu .reponse.fausse{background:var(--rose-soft); border-color:var(--rose); opacity:.75}
.ape-jeu .reponse:disabled{cursor:default}

.ape-jeu .chiffre{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ape-jeu .chiffre input{
  width:110px; font:800 1.5rem/1 var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); text-align:center; color:var(--ink);
  background:var(--paper); border:2.5px solid var(--line); border-radius:16px; padding:12px 10px;
}
.ape-jeu .chiffre input:focus{outline:none; border-color:var(--vert)}

.ape-jeu .bouton{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:700 1rem/1 var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); color:#FFFDF8; background:var(--vert);
  border:2.5px solid var(--ink); border-radius:999px; padding:13px 22px; box-shadow:0 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
}
.ape-jeu .bouton:hover{transform:translateY(-2px); box-shadow:0 5px 0 var(--ink)}
.ape-jeu .bouton:active{transform:translateY(2px); box-shadow:0 1px 0 var(--ink)}
.ape-jeu .bouton:focus-visible{outline:3px solid var(--indigo-ink); outline-offset:3px}
.ape-jeu .bouton.mineur{background:var(--surface); color:var(--ink); box-shadow:0 3px 0 var(--line); font-size:.9rem; padding:10px 16px}
.ape-jeu .bouton.mineur:hover{box-shadow:0 5px 0 var(--line)}
.ape-jeu .rangee{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center}

.ape-jeu .retour{margin-top:14px; padding:13px 15px; border-radius:16px; font-size:.95rem; border:2.5px dashed var(--line)}
.ape-jeu .retour[data-etat="juste"]{border-style:solid; border-color:var(--vert); background:var(--vert-soft)}
.ape-jeu .retour[data-etat="faux"]{border-style:solid; border-color:var(--orange); background:var(--orange-soft)}
.ape-jeu .retour[data-etat="indice"]{border-color:var(--indigo); background:var(--indigo-soft)}
.ape-jeu .retour b{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif)}

.ape-jeu .etoiles{display:inline-flex; gap:3px; vertical-align:-2px}

/* ---------- la fiche ---------- */
.ape-jeu .fiche{background:var(--surface); border:2.5px solid var(--c,var(--ink)); border-radius:24px; overflow:hidden; box-shadow:var(--ombre)}
.ape-jeu .fiche-tete{background:var(--cs,var(--bleu-soft)); padding:13px 17px 11px; border-bottom:2.5px solid var(--c,var(--ink))}
.ape-jeu .fiche-cat{margin:0 0 3px; font:700 .72rem/1.3 var(--wp--preset--font-family--texte,Figtree,sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--ci,var(--ink))}
.ape-jeu .fiche h2{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:800; font-size:1.2rem; line-height:1.15; margin:0}
.ape-jeu .fiche-corps{padding:14px 17px 17px; font-size:.95rem}
.ape-jeu .fiche-corps p{margin:0 0 10px}
.ape-jeu .fiche-corps p:last-child{margin:0}
.ape-jeu .fiche-ou{color:var(--muted); font-weight:600; font-size:.83rem}
.ape-jeu .savais{margin-top:12px; padding:11px 13px; background:var(--paper); border:2px dashed var(--c,var(--ink)); border-radius:15px; font-size:.88rem}
.ape-jeu .savais b{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); color:var(--ci,var(--ink)); display:block; margin-bottom:2px}

/* ---------- la fin ---------- */
.ape-jeu .fin{margin-top:18px}
.ape-jeu .diplome{
  background:var(--surface); border:4px double var(--or-ink); border-radius:24px;
  padding:26px 24px; text-align:center; box-shadow:var(--ombre);
}
.ape-jeu .diplome .sceau{margin:0 auto 10px}
.ape-jeu .diplome h2{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:800; font-size:clamp(1.5rem,4.5vw,2.1rem); margin:0 0 4px}
.ape-jeu .diplome .mot-final{font-family:var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); font-weight:800; font-size:clamp(1.6rem,5vw,2.4rem); color:var(--vert-ink); letter-spacing:.14em; margin:10px 0}
.ape-jeu .diplome p{margin:0 auto 10px; max-width:52ch}
.ape-jeu .diplome input{
  font:700 1.1rem/1 var(--wp--preset--font-family--titres,"Baloo 2",sans-serif); text-align:center; color:var(--ink);
  background:var(--paper); border:2.5px solid var(--line); border-radius:14px; padding:11px 14px; max-width:100%;
}
.ape-jeu .diplome input:focus{outline:none; border-color:var(--or)}
.ape-jeu .petit{font-size:.84rem; color:var(--muted)}

/* ---------- carte : interactions ---------- */
.ape-jeu .anim,.ape-jeu .coque,.ape-jeu .cerfvolant,.ape-jeu .dragon-corps{transform-box:fill-box; transform-origin:center}
.ape-jeu .cerfvolant{transform-origin:center top}
.ape-jeu .pin{cursor:pointer}
.ape-jeu .pin .anim{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.ape-jeu .pin:hover .anim{transform:translateY(-5px)}
.ape-jeu .pin.choisi .anim{transform:translateY(-4px) scale(1.06)}
.ape-jeu .pin .halo{opacity:0; transition:opacity .15s}
.ape-jeu .pin.choisi .halo,.ape-jeu .pin:focus-visible .halo{opacity:1}
.ape-jeu .pin:focus{outline:none}
.ape-jeu .pin .etiquette{opacity:0; transition:opacity .15s; pointer-events:none}
.ape-jeu .pin:hover .etiquette,.ape-jeu .pin:focus-visible .etiquette,.ape-jeu .pin.choisi .etiquette{opacity:1}
.ape-jeu .pin .etoile{opacity:0; transition:opacity .2s}
.ape-jeu .pin.gagnee .etoile{opacity:1}
.ape-jeu .pin.vise .anim{animation:sursaut 1.6s ease-in-out infinite}
@keyframes sursaut{0%,100%{transform:none}50%{transform:translateY(-7px)}}

@keyframes houle{from{transform:translateX(-6px)} to{transform:translateX(6px)}}
@keyframes vogue{from{transform:translateX(-140px)} to{transform:translateX(1380px)}}
@keyframes tangue{from{transform:rotate(-4deg)} to{transform:rotate(4deg)}}
@keyframes survol{from{transform:translate(-180px,8px)} to{transform:translate(1420px,-12px)}}
@keyframes vole{0%{transform:translate(0,0)}50%{transform:translate(20px,-8px)}100%{transform:translate(0,0)}}
@keyframes cerf{from{transform:rotate(-8deg)} to{transform:rotate(8deg)}}
@keyframes saute{0%,100%{transform:none}30%{transform:translateY(-9px) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}
.ape-jeu .vague{animation:houle 5s ease-in-out infinite alternate}
.ape-jeu .bateau{animation:vogue 62s linear infinite}
.ape-jeu .coque{animation:tangue 3.4s ease-in-out infinite alternate}
.ape-jeu .avion{animation:survol 50s linear infinite}
.ape-jeu .mouette{animation:vole 7s ease-in-out infinite}
.ape-jeu .cerfvolant{animation:cerf 4.6s ease-in-out infinite alternate}
.ape-jeu .dragon-corps.content{animation:saute .7s ease-in-out}

.ape-jeu .confetti{position:relative}
.ape-jeu .confetti i{
  position:absolute; width:9px; height:12px; border-radius:2px; top:0; opacity:0;
  animation:tombe 1.1s ease-in forwards;
}
@keyframes tombe{0%{opacity:1; transform:translateY(-10px) rotate(0)} 100%{opacity:0; transform:translateY(120px) rotate(320deg)}}

@media (prefers-reduced-motion:reduce){
  .ape-jeu .vague,.ape-jeu .bateau,.ape-jeu .coque,.ape-jeu .avion,.ape-jeu .mouette,.ape-jeu .cerfvolant,.ape-jeu .pin.vise .anim,.ape-jeu .dragon-corps.content{animation:none}
  .ape-jeu .pin .anim,.ape-jeu .coquillage .anim,.ape-jeu .case.pleine{transition:none; animation:none}
  .ape-jeu .confetti i{display:none}
}

.ape-jeu footer,.ape-jeu .mention{margin-top:26px; padding-top:16px; border-top:2px dashed var(--line); font-size:.83rem; color:var(--muted); max-width:78ch}
.ape-jeu footer a,.ape-jeu .mention a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--rose); text-decoration-thickness:2px; text-underline-offset:4px}
.ape-jeu footer p,.ape-jeu .mention p{margin:0 0 8px}



@media print{
  body.ape-jeu-impression *{visibility:hidden !important}
  body.ape-jeu-impression .ape-jeu__diplome,
  body.ape-jeu-impression .ape-jeu__diplome *{visibility:visible !important}
  body.ape-jeu-impression .ape-jeu__diplome{position:absolute;left:0;top:0;width:100%;border-width:3px;box-shadow:none}
  body.ape-jeu-impression .ape-jeu .sansimpression{display:none !important}
}