/* ==========================================================================
   Les jeux enfants — style plat et doux : pas de contour, de grands arrondis,
   des ombres légères, les couleurs du site en version pastel.
   ========================================================================== */
body.jeux{background:#fffaf0}
.jeux{--doux:0 10px 28px rgba(21,32,46,.08);--doux-fort:0 16px 36px rgba(21,32,46,.13);--rayon:26px}

/* ------------------------------------------------------------- en-tête */
.jx-hero{padding:8px 0 10px}
.jx-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,4vw,48px);align-items:center}
.jx-hero-texte{display:flex;flex-direction:column;gap:16px}
.jx-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;text-wrap:balance}
.jx-hero h1 em{font-style:normal;color:var(--bleu,#0f5fd0)}
.jx-hero .lead{font-family:var(--round);font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:44ch}
.jx-compteur{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#fff;border-radius:999px;padding:10px 20px 10px 12px;box-shadow:var(--doux);font-family:var(--round);font-size:18px}
.jx-compteur strong{font-size:24px}
.jx-scene svg{display:block;width:100%;height:auto}

/* --------------------------------------------------------------- étoiles */
.jx-etoile,.jx-etoile-mini{display:inline-block;width:22px;height:22px;background:#e6e1d3;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.jx-etoile.pleine,.jx-etoile-mini{background:var(--yellow)}
.jx-etoile-mini{width:30px;height:30px}
.jx-etoiles{display:inline-flex;gap:3px}

/* ---------------------------------------------------------------- titres */
.jx-titre{font-size:clamp(26px,3vw,36px);margin:34px 0 18px;text-wrap:balance}
.jx-titre-monde{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;color:var(--teinte)}
.jx-titre-monde small{font-size:.55em;color:var(--muted);font-weight:600}
.jx-aide{font-family:var(--round);color:var(--muted);margin:-8px 0 18px;max-width:60ch}

/* ------------------------------------------------------------ les mondes */
.jx-mondes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.jx-monde{display:flex;flex-direction:column;gap:6px;text-align:start;padding:22px;border:0;border-radius:var(--rayon);cursor:pointer;
  background:#fff;box-shadow:var(--doux);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.jx-monde::before{content:"";position:absolute;inset:0 0 auto 0;height:118px;background:var(--teinte);opacity:.14}
.jx-monde:hover{transform:translateY(-4px);box-shadow:var(--doux-fort)}
.jx-monde:focus-visible,.jx-jeu:focus-visible,.jx-carte:focus-visible,.jx-memo:focus-visible,.jx-article:focus-visible,.jx-retour:focus-visible,.jx-ecouter:focus-visible{outline:4px solid var(--teinte,#0f5fd0);outline-offset:3px}
.jx-monde-images{position:relative;display:flex;gap:10px;margin-bottom:12px}
.jx-monde-nom{position:relative;font-family:var(--round);font-size:26px;font-weight:700;color:var(--ink)}
.jx-monde-trad{font-family:var(--round);font-size:17px;color:var(--muted)}
.jx-monde-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-family:var(--round);font-size:14px;color:var(--muted-2)}
.jx-monde-bas .jx-etoile{width:16px;height:16px}

/* --------------------------------------------------------------- images */
.jx-image{display:grid;place-items:center;width:112px;height:112px;border-radius:22px;background:#fff}
.jx-image svg{width:78%;height:78%}
.jx-image.mini{width:70px;height:70px;border-radius:18px;box-shadow:0 4px 12px rgba(21,32,46,.07)}
.jx-image.grande{width:170px;height:170px;border-radius:30px}

/* ---------------------------------------------------------------- album */
.jx-album-bloc{margin-top:18px}
.jx-album{display:flex;flex-wrap:wrap;gap:22px}
.jx-autocollant{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--round);color:var(--muted-2)}
.jx-autocollant-rond{display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:#fff;border:4px dashed #e0d9c6}
.jx-autocollant-rond .jx-image{width:86px;height:86px;background:none;filter:grayscale(1);opacity:.3}
.jx-autocollant.gagne{color:var(--ink)}
.jx-autocollant.gagne .jx-autocollant-rond{border:6px solid #fff;background:var(--teinte);box-shadow:var(--doux-fort);transform:rotate(-6deg)}
.jx-autocollant.gagne .jx-image{filter:none;opacity:1}

/* ------------------------------------------------------ les jeux du monde */
.jx-barre{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.jx-retour{display:inline-flex;align-items:center;gap:10px;border:0;background:#fff;border-radius:999px;padding:10px 20px;box-shadow:var(--doux);font-family:var(--round);font-size:16px;font-weight:600;cursor:pointer}
.jx-fleche{width:10px;height:10px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
[dir="rtl"] .jx-fleche{transform:rotate(-135deg)}
.jx-prog{font-family:var(--round);font-size:16px;color:var(--muted)}

.jx-jeux{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.jx-jeu{display:flex;flex-direction:column;gap:8px;text-align:start;padding:22px;min-height:190px;border:0;border-radius:var(--rayon);cursor:pointer;background:#fff;box-shadow:var(--doux);transition:transform .18s ease}
.jx-jeu:hover{transform:translateY(-4px)}
.jx-jeu-num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-family:var(--round);font-size:22px;font-weight:700;color:#fff}
.jx-jeu-decouvre .jx-jeu-num{background:var(--yellow);color:var(--ink)}
.jx-jeu-ecoute .jx-jeu-num{background:#0f5fd0}
.jx-jeu-memory .jx-jeu-num{background:#ff7a59}
.jx-jeu-article .jx-jeu-num{background:var(--green)}
.jx-jeu-titre{font-family:var(--round);font-size:22px;font-weight:700;color:var(--ink)}
.jx-jeu-desc{font-family:var(--round);font-size:16px;color:var(--muted)}
.jx-jeu-bas{margin-top:auto;font-family:var(--round);font-weight:600;color:#0f5fd0}

/* -------------------------------------------------------------- plateau */
.jx-plateau{position:relative;margin-top:18px;padding:clamp(20px,3.4vw,40px);border-radius:32px;background:#fff;box-shadow:var(--doux);overflow:hidden}
.jx-plateau::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--teinte)}
.jx-plateau-titre{font-size:clamp(26px,3vw,38px)}
.jx-consigne{font-family:var(--round);font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin:6px 0 24px}
.jx-astuce{font-family:var(--round);font-size:15px;color:var(--muted-2);margin-top:20px}

.jx-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.jx-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:560px;margin:0 auto}
.jx-carte{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border:0;border-radius:24px;background:#fbf6ea;cursor:pointer;transition:transform .15s ease,background .15s ease}
.jx-carte:hover{background:#f6eedb}
.jx-choix .jx-carte .jx-image{width:100%;height:auto;aspect-ratio:1;max-width:180px;background:none}
.jx-carte.juste{background:#d9f5ea}
.jx-carte.faux{background:#ffe0da;animation:secoue .45s}
.jx-mot{font-family:var(--round);font-size:22px;font-weight:700;color:var(--ink)}
.jx-trad{font-family:var(--round);font-size:15px;color:var(--muted)}
.jx-hautparleur{display:inline-block;width:22px;height:22px;background:#0f5fd0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat}

/* couleurs des articles : der bleu, die rouge, das vert */
/* couleurs fixes : l'espace enfants redéfinit --blue en vert */
.art-bleu{color:#0f5fd0} .art-rouge{color:#e0331f} .art-vert{color:#0a8f6b}
.art-fond-bleu{background:#0f5fd0} .art-fond-rouge{background:#e0331f} .art-fond-vert{background:#0a8f6b}

.jx-ecouter{display:flex;align-items:center;gap:12px;margin:0 auto 22px;border:0;border-radius:999px;padding:14px 28px;background:#0f5fd0;color:#fff;font-family:var(--round);font-size:19px;font-weight:600;cursor:pointer}
.jx-ecouter .jx-hautparleur{background:#fff}

/* Memory */
.jx-memory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:680px;margin:0 auto}
.jx-memo{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:800px}
.jx-memo-dos,.jx-memo-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:20px;backface-visibility:hidden;transition:transform .4s ease}
.jx-memo-dos{background:var(--teinte);box-shadow:var(--doux)}
.jx-memo-dos::after{content:"?";font-family:var(--round);font-size:clamp(28px,5vw,44px);font-weight:700;color:#fff;opacity:.9}
.jx-memo-face{background:#fbf6ea;transform:rotateY(180deg);padding:8px}
.jx-memo-face .jx-image{width:88%;height:88%;background:none}
.jx-memo.ouverte .jx-memo-dos{transform:rotateY(180deg)}
.jx-memo.ouverte .jx-memo-face{transform:rotateY(0)}
.jx-memo.paire .jx-memo-face{background:#d9f5ea}
.jx-memory-mot .jx-mot{font-size:clamp(14px,2.2vw,20px);text-align:center;line-height:1.15}

/* Der, die, das */
.jx-question-article{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.jx-question-article .jx-image{background:#fbf6ea}
.jx-phrase{font-family:var(--round);font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--ink)}
.jx-trou{color:#c9c2ae;letter-spacing:.05em}
.jx-trou.rempli{letter-spacing:0}
.jx-articles{display:flex;justify-content:center;gap:clamp(10px,2vw,20px);margin-top:22px;flex-wrap:wrap}
.jx-article{min-width:120px;padding:18px 26px;border:0;border-radius:22px;color:#fff;font-family:var(--round);font-size:28px;font-weight:700;cursor:pointer;box-shadow:0 6px 0 rgba(21,32,46,.18);transition:transform .12s ease}
.jx-article:active{transform:translateY(3px)}
.jx-article.juste{outline:5px solid var(--yellow)}
.jx-article.faux{animation:secoue .45s;opacity:.55}

/* Fin de partie */
.jx-fin{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:18px 0}
.jx-fin .jx-etoile{width:56px;height:56px}
.jx-fin .jx-fin-titre{font-family:var(--round);font-size:clamp(34px,4.4vw,52px);font-weight:700;color:var(--ink)}
.jx-fin p{font-family:var(--round);font-size:19px;color:var(--muted)}
.jx-fin-boutons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* ------------------------------------------------------------ petits effets */
@keyframes secoue{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes rebond{40%{transform:scale(1.07)}70%{transform:scale(.97)}}
.rebond{animation:rebond .4s ease}
.jx-eclat{position:absolute;left:50%;top:50%;width:14px;height:14px;background:var(--yellow);pointer-events:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:eclat .8s ease-out forwards}
@keyframes eclat{from{transform:translate(-50%,-50%) rotate(var(--a)) translateY(0);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-70px);opacity:0}}
.jx-confettis{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.jx-confettis span{position:absolute;top:-12px;width:10px;height:14px;border-radius:3px;animation:tombe 2.2s ease-in forwards}
@keyframes tombe{to{transform:translateY(420px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.jx-memo-dos,.jx-memo-face{transition:none}}

/* ------------------------------------------------------------- téléphone */
@media (max-width:760px){
  .jx-hero-in{grid-template-columns:1fr}
  .jx-scene{order:-1;max-width:460px;margin:0 auto}
  .jx-memory{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jx-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jx-image{width:92px;height:92px}
  .jx-image.grande{width:140px;height:140px}
  .jx-article{min-width:90px;font-size:24px;padding:14px 18px}
}

/* Toujours de l'air entre le dernier bloc et le pied de page, et le pied de page en bas de l'écran */
body.jeux{min-height:100vh;display:flex;flex-direction:column}
body.jeux main{flex:1 0 auto;padding-bottom:clamp(56px,7vw,100px)}
/* Le corps en colonne rétrécit les blocs centrés : on leur rend toute la largeur. */
body.jeux>.wrap,body.jeux>main,body.jeux>footer{width:100%}

/* ==========================================================================
   Leçons : lettres, nombres, calcul, vrai ou faux, son
   ========================================================================== */
.jx-hero-outils{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.jx-son{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 20px;background:#fff;box-shadow:var(--doux);font-family:var(--round);font-size:16px;font-weight:600;cursor:pointer}
.jx-son.coupe .jx-hautparleur{background:#b9bfc9}
.jx-son.coupe{color:var(--muted-2)}

/* numéros des jeux, dans l'ordre */
.jx-jeu-0 .jx-jeu-num{background:var(--yellow);color:var(--ink)}
.jx-jeu-1 .jx-jeu-num{background:#0f5fd0}
.jx-jeu-2 .jx-jeu-num{background:#ff7a59}
.jx-jeu-3 .jx-jeu-num{background:#0a8f6b}
.jx-jeu-4 .jx-jeu-num{background:#8b6cf0}

.jx-lettre,.jx-nombre{display:grid;place-items:center;min-width:1.2em;font-family:var(--round);font-weight:700;line-height:1;color:var(--teinte,#15202e);font-size:56px}
.jx-lettre.mini,.jx-nombre.mini{width:70px;height:70px;border-radius:18px;background:#fff;box-shadow:0 4px 12px rgba(21,32,46,.07);font-size:34px}
.jx-lettre.grande,.jx-nombre.grande{font-size:clamp(56px,8vw,84px)}
.jx-lettre.vignette,.jx-nombre.vignette{font-size:30px;color:#fff}
.jx-autocollant:not(.gagne) .jx-lettre.vignette,.jx-autocollant:not(.gagne) .jx-nombre.vignette{color:#d8d1bd}
.jx-monde .jx-lettre.mini,.jx-monde .jx-nombre.mini{color:var(--teinte)}

.jx-cartes-lettres{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.jx-cartes-nombres{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.jx-cartes-nombres .jx-mot{font-size:18px}
.jx-cartes-ops{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.jx-sous-titre{font-family:var(--round);font-size:24px;margin:30px 0 14px}
.jx-choix-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:720px}
.jx-choix-4 .jx-carte{padding:22px 10px}

.jx-exemple{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px;padding:18px 24px;border:0;border-radius:22px;background:#eaf2fd;cursor:pointer;text-align:start}
.jx-exemple-calcul{font-family:var(--round);font-size:28px;font-weight:700;color:#0f5fd0}

.jx-suite{display:flex;justify-content:center;align-items:center;gap:20px;margin:0 0 20px}
.jx-suite .jx-lettre{width:120px;height:120px;border-radius:26px;background:#fbf6ea}
.jx-suite-fleche{width:34px;height:34px;border-top:6px solid #c9c2ae;border-right:6px solid #c9c2ae;transform:rotate(45deg)}
[dir="rtl"] .jx-suite-fleche{transform:rotate(-135deg)}
.jx-mystere{color:#c9c2ae}
.jx-trouve{color:#0a8f6b}

.jx-calcul{text-align:center;font-family:var(--round);font-size:clamp(48px,8vw,80px);font-weight:700;color:var(--ink);line-height:1.1}
.jx-calcul-mots{text-align:center;font-family:var(--round);font-size:clamp(20px,2.4vw,26px);color:#0f5fd0;margin:6px 0 18px}

.jx-vraifaux{display:flex;justify-content:center;gap:clamp(12px,3vw,26px);margin-top:18px;flex-wrap:wrap}
.jx-vf{display:inline-flex;align-items:center;gap:12px;min-width:160px;justify-content:center;padding:18px 28px;border:0;border-radius:22px;color:#fff;font-family:var(--round);font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 6px 0 rgba(21,32,46,.18)}
.jx-vf-oui{background:#0a8f6b}
.jx-vf-non{background:#e0331f}
.jx-vf-signe{font-size:30px;line-height:1}
.jx-vf.juste{outline:5px solid var(--yellow)}
.jx-vf.faux{animation:secoue .45s;opacity:.55}
.jx-btn-suivant{background:#0f5fd0;color:#fff}

@media (max-width:760px){
  .jx-choix-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jx-cartes-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jx-suite .jx-lettre{width:92px;height:92px}
  .jx-vf{min-width:130px;font-size:20px}
}
/* De l'air au-dessus de l'en-tête (il n'y a pas de bande d'arrivée sur ces pages) */
body.jeux .k-nav{padding-top:clamp(26px,3.2vw,44px);padding-bottom:clamp(20px,2.4vw,32px)}