/* Le Monde de Ploumi — style « bonbon » d'après l'illustration de Tom :
   ciel bleu vif, gros nuages blancs, panneaux-pilules colorés bordés de blanc, lettres bulles multicolores,
   îles d'herbe, étoiles jaunes. Un seul univers clair assumé : toutes les couleurs sont posées explicitement. */
:root {
  --ciel-haut: #4eb0f0;
  --ciel: #8fd0f7;
  --ciel-bas: #e3f4fe;
  --nuage: #ffffff;
  --nuage-ombre: #cfe3f5;
  --encre: #243466;
  --encre-douce: #50629a;
  --herbe: #6fd145; --herbe-fonce: #43a92c;
  --terre: #c98a52; --terre-fonce: #9a6134;
  --or: #ffd23a;
  /* couleurs des panneaux (comme sur l'île) */
  --bleu: #3a86f2; --bleu-f: #2462c8;
  --vert: #5cc93a; --vert-f: #3a9a22;
  --rose: #ff4fa3; --rose-f: #d62c80;
  --orange: #ffad1f; --orange-f: #e07f00;
  --violet: #9b63f0; --violet-f: #7440cc;
  --rouge: #ff5a4f;
  --f-titre: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-texte: "Andika", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  --gloss: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 50%);
  /* contour foncé des lettres blanches : lisible sur toutes les couleurs vives */
  --contour: 0 2px 0 var(--pt), 0 -1.5px 0 var(--pt), 1.5px 0 0 var(--pt), -1.5px 0 0 var(--pt), 1.5px 1.5px 0 var(--pt), -1.5px 1.5px 0 var(--pt), 1.5px -1.5px 0 var(--pt), -1.5px -1.5px 0 var(--pt), 0 3px 2px rgba(0,0,0,.2);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: linear-gradient(180deg, #bfe6fd, var(--ciel-bas) 25%, #d6effd 70%, #c4e7fc);
  color: var(--encre); font-family: var(--f-texte); font-size: 18px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.05; text-wrap: balance; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--or); outline-offset: 3px; border-radius: 16px; }
img { max-width: 100%; }

/* ---------- Lettres bulles multicolores, contour blanc (comme le titre de l'île) ---------- */
.arc { font-family: var(--f-titre); font-weight: 800; letter-spacing: .01em; }
.arc .mot-arc { white-space: nowrap; }
.arc span span {
  display: inline-block;
  text-shadow: 0 3px 0 #fff, 0 -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 9px 12px rgba(36,52,102,.28);
}
.arc span span:nth-child(odd) { rotate: -2deg; } .arc span span:nth-child(3n) { rotate: 2deg; translate: 0 -2px; }

/* ---------- Panneau-pilule (les étiquettes de l'île) ---------- */
.panneau {
  --pc: var(--bleu); --pb: var(--bleu-f); --pt: #1d4fa8;
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  padding: .32em 1.05em .32em .38em; border-radius: 999px;
  background: var(--gloss), var(--pc); color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 5px 0 var(--pb), 0 12px 20px -8px rgba(36,52,102,.45);
  font-family: var(--f-titre); font-weight: 800; letter-spacing: .02em;
  text-shadow: var(--contour);
}
.panneau .pico { display: grid; place-items: center; flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; background: #fff; font-size: .95em; text-shadow: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.panneau.pointe::after { content: ""; position: absolute; left: 50%; bottom: -13px; translate: -50% 0; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.panneau.rose { --pc: var(--rose); --pb: var(--rose-f); --pt: #b3246b; }
.panneau.vert { --pc: var(--vert); --pb: var(--vert-f); --pt: #2b7a17; }
.panneau.peche { --pc: var(--orange); --pb: var(--orange-f); --pt: #9a4f00; }
.panneau.lilas { --pc: var(--violet); --pb: var(--violet-f); --pt: #5c2fb0; }

/* ---------- « Ruban » = petite pilule blanche sous les cartes ---------- */
.ruban {
  position: relative; display: inline-block; padding: .25em 1em .3em; border-radius: 999px; z-index: 1;
  background: #fff; color: var(--encre); font-family: var(--f-titre); font-weight: 700; line-height: 1.15;
  box-shadow: 0 4px 0 var(--nuage-ombre), 0 10px 16px -10px rgba(36,52,102,.4);
}

/* ---------- Boutons bonbons ---------- */
.bouton {
  --pc: var(--orange); --pb: var(--orange-f); --pt: #9a4f00;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 60px; padding: 0 1.3em; border-radius: 999px; border: 4px solid #fff;
  background: var(--gloss), var(--pc); color: #fff; text-decoration: none;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; text-shadow: var(--contour);
  box-shadow: 0 5px 0 var(--pb), 0 12px 20px -8px rgba(36,52,102,.45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bouton:hover { transform: translateY(-2px) scale(1.03); }
.bouton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pb); }
.bouton.rose { --pc: var(--rose); --pb: var(--rose-f); --pt: #b3246b; }
.bouton.bleu { --pc: var(--bleu); --pb: var(--bleu-f); --pt: #1d4fa8; }
.bouton.vert { --pc: var(--vert); --pb: var(--vert-f); --pt: #2b7a17; }
.bouton.lilas { --pc: var(--violet); --pb: var(--violet-f); --pt: #5c2fb0; }
.bouton.blanc { --pc: #fff; --pb: var(--nuage-ombre); color: var(--encre); text-shadow: none; border-color: var(--nuage-ombre); }
/* bouton rond (fermer / retour) */
.rond {
  width: 62px; height: 62px; padding: 0; border-radius: 50%; flex: none; font-size: 1.6rem; font-weight: 800;
  border: 4px solid #fff; color: #fff; background: var(--gloss), var(--rose);
  box-shadow: 0 5px 0 var(--rose-f), 0 12px 20px -8px rgba(36,52,102,.45); --pt: #b3246b; text-shadow: var(--contour);
}
.rond.retour { --pt: #1d4fa8; background: var(--gloss), var(--bleu); box-shadow: 0 5px 0 var(--bleu-f), 0 12px 20px -8px rgba(36,52,102,.45); }
.rond:active { transform: translateY(4px); }

/* ---------- Étoiles & nuages décoratifs ---------- */
.paillette { position: absolute; pointer-events: none; color: var(--or); font-size: var(--s, 22px); line-height: 1;
  text-shadow: 0 2px 0 #e7a800, 0 0 12px rgba(255, 220, 90, .8); animation: scintille 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes scintille { 0%, 100% { opacity: .55; scale: .8; rotate: -10deg; } 50% { opacity: 1; scale: 1.15; rotate: 10deg; } }
.nuages {
  position: relative; height: 120px; pointer-events: none;
  background:
    radial-gradient(80px 60px at 5% 100%, #fff 97%, transparent 100%),
    radial-gradient(120px 90px at 19% 100%, #fff 97%, transparent 100%),
    radial-gradient(90px 70px at 34% 100%, #fff 97%, transparent 100%),
    radial-gradient(140px 100px at 51% 100%, #fff 97%, transparent 100%),
    radial-gradient(95px 72px at 67% 100%, #fff 97%, transparent 100%),
    radial-gradient(130px 92px at 83% 100%, #fff 97%, transparent 100%),
    radial-gradient(85px 64px at 98% 100%, #fff 97%, transparent 100%);
  filter: drop-shadow(0 -8px 10px rgba(80, 150, 220, .22));
}

/* ---------- Feuilles plein écran ---------- */
.feuille {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(1100px 280px at 50% 106%, #fff 45%, transparent 72%), linear-gradient(180deg, var(--ciel-haut), var(--ciel) 38%, var(--ciel-bas));
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 56px);
  animation: monte .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes monte { from { transform: translateY(40px) scale(.96); opacity: 0; } }
.feuille-tete {
  position: sticky; top: calc(-14px - env(safe-area-inset-top, 0px)); z-index: 3;
  display: flex; align-items: center; gap: 14px;
  margin: -14px -16px 20px; padding: 22px max(16px, calc((100% - 1120px) / 2 + 16px)) 16px;
  background: linear-gradient(180deg, var(--ciel-haut) 80%, rgba(78,176,240,0));
}
.feuille-tete .panneau { font-size: clamp(1.2rem, 4.4vw, 2rem); min-width: 0; }
.feuille-tete .panneau h2 { font: inherit; overflow-wrap: anywhere; }
.feuille-tete .espace { flex: 1; }
.feuille-corps { max-width: 1120px; margin: 0 auto; }

/* ---------- Relief 3D au survol ---------- */
.carte, .tuile, .theme { --rx: 0deg; --ry: 0deg; transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s ease; }

/* ---------- Cartes de comptines : cadre blanc arrondi + pilule ---------- */
.grille { display: grid; gap: 34px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); padding-bottom: 10px; }
.carte { display: flex; flex-direction: column; align-items: center; border: 0; padding: 0; background: none; text-align: center; }
.cadre {
  position: relative; display: block; width: 100%; padding: 8px; border-radius: 30px; background: #fff;
  box-shadow: 0 6px 0 var(--nuage-ombre), 0 18px 26px -14px rgba(36,52,102,.5);
}
.cadre img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 22px; }
.carte .ruban { margin-top: -16px; font-size: 1.12rem; max-width: 88%; }
.carte:nth-child(4n+1) .cadre { box-shadow: 0 6px 0 var(--rose), 0 18px 26px -14px rgba(36,52,102,.5); }
.carte:nth-child(4n+2) .cadre { box-shadow: 0 6px 0 var(--bleu), 0 18px 26px -14px rgba(36,52,102,.5); }
.carte:nth-child(4n+3) .cadre { box-shadow: 0 6px 0 var(--vert), 0 18px 26px -14px rgba(36,52,102,.5); }
.carte:nth-child(4n+4) .cadre { box-shadow: 0 6px 0 var(--orange), 0 18px 26px -14px rgba(36,52,102,.5); }
.carte:hover .cadre img { filter: brightness(1.06) saturate(1.1); }
.carte:hover { --rx: 0deg; }

.onglets { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.onglet { border: 0; padding: 0; background: none; font-size: 1.1rem; }
.onglet .panneau { transition: transform .15s, filter .15s, opacity .15s; }
.onglet[aria-pressed="true"] .panneau { transform: translateY(-4px) scale(1.07); }
.onglet[aria-pressed="false"] .panneau { opacity: .72; }

/* ---------- Lecteur de comptine ---------- */
.lecteur { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .lecteur { grid-template-columns: minmax(0, 1fr); } }
.lecteur .cadre { padding: 10px; box-shadow: 0 7px 0 var(--rose), 0 18px 26px -14px rgba(36,52,102,.5); }
.ecran { position: relative; aspect-ratio: 16/9; max-width: 100%; border-radius: 22px; overflow: hidden; background: #1d2146; }
.ecran img, .ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ecran .jouer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 110px; height: 110px; border-radius: 50%; border: 6px solid #fff; color: #fff; font-size: 2.6rem;
  background: var(--gloss), var(--rose); display: grid; place-items: center;
  box-shadow: 0 7px 0 var(--rose-f), 0 0 0 12px rgba(255,255,255,.35); animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.09); } }
.paroles {
  position: relative; padding: 30px 26px 26px; max-height: 72vh; overflow-y: auto; border-radius: 30px; background: #fff;
  box-shadow: 0 6px 0 var(--nuage-ombre), 0 18px 26px -14px rgba(36,52,102,.45);
  background-image: linear-gradient(90deg, var(--rouge), var(--orange), var(--or), var(--vert), var(--bleu), var(--violet)); background-size: 100% 10px; background-repeat: no-repeat; background-color: #fff;
}
.paroles h3 { font-size: 1.8rem; margin-bottom: 14px; text-align: center; }
.bloc { margin: 0 0 16px; }
.bloc small { display: inline-block; font-family: var(--f-titre); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bleu); margin-bottom: 2px; }
.bloc p { margin: 0; font-size: 1.22rem; line-height: 1.6; }
.bloc.refrain { background: #fff5c9; border-radius: 20px; padding: 10px 16px; margin-inline: -14px; }
.bloc.refrain small { color: #8a4a00; }
.note { color: var(--encre-douce); font-size: .95rem; }
.titre-section { font-size: 2rem; margin: 44px 0 20px; }

/* ---------- Tuiles (jeux) : petites îles d'herbe ---------- */
.tuiles { display: grid; gap: 34px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 250px)); justify-content: center; }
.tuile {
  position: relative; border: 0; padding: 26px 16px 44px; min-height: 250px; border-radius: 40px 40px 50% 50% / 40px 40px 90px 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; text-align: center; color: var(--encre);
  background: radial-gradient(120% 70% at 50% 0, rgba(255,255,255,.95), rgba(255,255,255,0) 70%), var(--fond, #dff1fe);
  box-shadow: inset 0 -22px 0 -4px var(--herbe), inset 0 -30px 0 -4px var(--herbe-fonce), 0 10px 0 var(--terre), 0 16px 0 var(--terre-fonce), 0 28px 30px -14px rgba(36,52,102,.45);
}
.tuile .gros { font-size: 4.5rem; line-height: 1; filter: drop-shadow(0 10px 6px rgba(36,52,102,.2)); animation: flotte 3s ease-in-out infinite; }
.tuile:nth-child(2) .gros { animation-delay: -1s; } .tuile:nth-child(3) .gros { animation-delay: -2s; }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(-5deg); } }
.tuile .panneau { font-size: 1.12rem; }
.tuile small { font-size: .95rem; color: var(--encre-douce); margin-bottom: 12px; }
.tuile.papier { background: none; box-shadow: none; padding: 16px 6px 4px; min-height: 0; border-radius: 0; justify-content: flex-start; }
.tuile.papier svg { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; background: #fff; padding: 10px; border-radius: 24px; rotate: var(--rot, -2deg); box-shadow: 0 6px 0 var(--nuage-ombre), 0 18px 22px -12px rgba(36,52,102,.45); }
.tuile.papier::before { content: "★"; position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 1; font-size: 2.3rem; color: var(--or); text-shadow: 0 3px 0 #e7a800; }

/* ---------- Jeux ---------- */
.jeu { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.consigne {
  display: inline-flex; align-items: center; gap: 12px; padding: .3em 1.2em .3em .45em; border-radius: 999px;
  background: #fff; box-shadow: 0 5px 0 var(--nuage-ombre), 0 12px 22px -10px rgba(36,52,102,.4);
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.15rem, 4vw, 1.6rem);
}
.score { font-family: var(--f-titre); font-size: 1.8rem; letter-spacing: .1em; min-height: 2rem; color: var(--or); text-shadow: 0 3px 0 #e7a800; }
.memo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(100%, 580px); }
.memo button {
  aspect-ratio: 1; border-radius: 26px; font-size: clamp(2rem, 9vw, 3.4rem); position: relative; border: 5px solid #fff;
  background: var(--gloss), var(--c-dos, var(--bleu)); box-shadow: 0 6px 0 var(--bleu-f); transition: transform .35s ease, background .3s ease;
}
.memo button:nth-child(3n+1) { --c-dos: var(--rose); } .memo button:nth-child(3n+2) { --c-dos: var(--vert); }
.memo button::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .75em; text-shadow: 0 3px 0 rgba(0,0,0,.15); transition: opacity .2s; }
.memo button span { opacity: 0; transition: opacity .2s; }
.memo button.vu { background: #fff; transform: rotateY(180deg); }
.memo button.vu span { opacity: 1; display: inline-block; transform: rotateY(180deg); }
.memo button.vu::after, .memo button.ok::after { opacity: 0; }
.memo button.ok { background: #e4f9d9; border-color: var(--vert); transform: rotateY(180deg) scale(.94); box-shadow: 0 0 0 5px var(--or); }
.aquarium {
  position: relative; width: min(100%, 740px); height: min(62vh, 520px); border-radius: 36px; overflow: hidden; touch-action: manipulation;
  background: radial-gradient(420px 140px at 50% 112%, #fff 45%, transparent 72%), linear-gradient(var(--ciel-haut), var(--ciel-bas));
  border: 6px solid #fff; box-shadow: 0 7px 0 var(--bleu), 0 20px 30px -14px rgba(36,52,102,.5);
}
.bulle {
  position: absolute; width: var(--t, 96px); height: var(--t, 96px); border-radius: 50%; border: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 12%, transparent 13%), radial-gradient(circle, transparent 58%, rgba(255,255,255,.4) 72%), var(--c);
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.12), 0 6px 12px rgba(36,52,102,.2);
}
.bulle.eclate { animation: eclate .35s ease-out forwards; }
@keyframes eclate { to { scale: 1.6; opacity: 0; } }
.bulle.non { animation: tremble .4s; }
@keyframes tremble { 25% { margin-left: -10px; } 75% { margin-left: 10px; } }
.pastille { width: 46px; height: 46px; border-radius: 50%; background: var(--c); box-shadow: inset -5px -6px 0 rgba(0,0,0,.14), 0 0 0 4px #fff, 0 0 0 6px var(--nuage-ombre); flex: none; }
.ciel-etoiles {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, 640px); min-height: 210px; padding: 24px; border-radius: 36px;
  background: radial-gradient(circle at 86% 18%, #fff7c2 0 18px, transparent 20px), linear-gradient(#2c3f8f, #5a4fbf);
  border: 6px solid #fff; box-shadow: 0 7px 0 var(--violet), 0 20px 30px -14px rgba(36,52,102,.5);
}
.etoile { width: 84px; height: 84px; border: 0; background: none; font-size: 64px; line-height: 1; padding: 0; color: var(--or); text-shadow: 0 0 18px rgba(255, 210, 60, .8); animation: apparait .4s cubic-bezier(.2,.9,.3,1.4) backwards; }
.etoile.comptee { transform: scale(1.18) rotate(12deg); color: #fff3b0; }
@keyframes apparait { from { transform: scale(0) rotate(-90deg); } }
.chiffres { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.chiffres button { width: 96px; height: 96px; font-size: 3rem; padding: 0; }

/* ---------- Coloriage ---------- */
.atelier { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
@media (max-width: 760px) { .atelier { grid-template-columns: minmax(0, 1fr); } }
.dessin { background: #fff; border-radius: 34px; padding: 16px; box-shadow: 0 7px 0 var(--vert), 0 18px 26px -14px rgba(36,52,102,.5); }
.dessin svg { display: block; width: 100%; height: auto; max-height: 68vh; touch-action: manipulation; }
.dessin .z { cursor: pointer; transition: fill .15s; }
.palette-bois { display: grid; gap: 16px; justify-items: center; padding: 22px 18px; border-radius: 36px; background: #fff; box-shadow: 0 7px 0 var(--orange), 0 18px 26px -14px rgba(36,52,102,.45); }
.palette { display: grid; grid-template-columns: repeat(3, 60px); gap: 12px; justify-content: center; }
@media (max-width: 760px) { .palette { grid-template-columns: repeat(6, 44px); gap: 10px; } .palette .pot { width: 44px; height: 44px; } }
.pot { width: 60px; height: 60px; padding: 0; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 40%), var(--c); box-shadow: 0 0 0 2px var(--nuage-ombre), 0 4px 0 rgba(36,52,102,.2); }
.pot[aria-pressed="true"] { transform: scale(1.2); box-shadow: 0 0 0 4px var(--or), 0 4px 0 rgba(36,52,102,.2); }

/* ---------- Porte parentale ---------- */
.porte { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(36, 52, 102, .5); }
.porte-boite { width: min(100%, 440px); padding: 28px 22px; text-align: center; display: grid; gap: 14px; border-radius: 36px; background: #fff; box-shadow: 0 8px 0 var(--violet), 0 24px 40px rgba(0,0,0,.3); }
.porte-boite h3 { font-size: 1.9rem; }
.porte-boite .chiffres button { width: 82px; height: 82px; font-size: 2.2rem; }

/* ---------- Bravo ---------- */
.bravo { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: grid; place-items: center; }
.bravo b { font-family: var(--f-titre); font-weight: 800; font-size: clamp(3.4rem, 15vw, 8rem); color: var(--or); text-shadow: 0 5px 0 #fff, 0 -4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff, 0 14px 30px rgba(0,0,0,.25); animation: boing .9s cubic-bezier(.2,.9,.3,1.5); }
@keyframes boing { from { transform: scale(0) rotate(-20deg); } }
.confetti { position: fixed; top: -20px; width: 18px; height: 18px; z-index: 94; pointer-events: none; animation: tombe 1.8s ease-in forwards; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Pour les parents ---------- */
.parents { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 30px; align-items: center; max-width: 920px; }
.parents-ploumi { width: 100%; max-width: 220px; justify-self: center; filter: drop-shadow(0 18px 14px rgba(36,52,102,.3)); animation: flotte 3.4s ease-in-out infinite; }
.parents p { margin: 0; }
@media (max-width: 640px) { .parents { grid-template-columns: minmax(0, 1fr); } .parents-ploumi { max-width: 160px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.chiffres .bouton { color: #fff; border-color: #fff; }
.chiffres .bouton:nth-child(3n+1) { --pc: var(--rose); --pb: var(--rose-f); --pt: #b3246b; }
.chiffres .bouton:nth-child(3n+2) { --pc: var(--bleu); --pb: var(--bleu-f); --pt: #1d4fa8; }
.chiffres .bouton:nth-child(3n+3) { --pc: var(--vert); --pb: var(--vert-f); --pt: #2b7a17; }

/* ---------- Comptines pas encore en ligne ---------- */
.bientot {
  position: absolute; top: 2px; right: -6px; z-index: 2; rotate: 8deg;
  padding: .2em .9em; border-radius: 999px; border: 3px solid #fff;
  background: var(--gloss), var(--or); color: var(--encre); font-style: normal;
  font-family: var(--f-titre); font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 0 #e0a800, 0 8px 14px -6px rgba(36,52,102,.4);
  animation: hop-badge 2.4s ease-in-out infinite;
}
@keyframes hop-badge { 50% { translate: 0 -4px; } }
.carte:has(.bientot) .cadre img { filter: saturate(.8) brightness(1.03); }
.ecran-bientot {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center;
  background: rgba(255,255,255,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ecran-bientot b {
  padding: .1em .9em; border-radius: 999px; border: 5px solid #fff; background: var(--gloss), var(--or); color: var(--encre);
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.8rem, 6vw, 3rem); rotate: -4deg; box-shadow: 0 6px 0 #e0a800;
}
.ecran-bientot span { max-width: 32ch; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.25rem); color: var(--encre); }

/* =========================================================
   Tableau de récompenses (espace parents)
   ========================================================= */
.pas {
  --pc: #fff; display: inline-block; width: 38px; height: 38px; padding: 0; border-radius: 50%; vertical-align: middle;
  border: 3px dashed #c3d3e6; background: #fff; cursor: pointer; transition: transform .15s cubic-bezier(.2,.9,.3,1.5);
}
.pas[data-v="v"], .pas[data-v="o"], .pas[data-v="r"] {
  border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7) 0 16%, transparent 18%), var(--pc);
  box-shadow: 0 3px 0 rgba(36,52,102,.18), inset 0 -4px 0 rgba(0,0,0,.12);
}
.pas[data-v="v"] { --pc: #4cc43a; } .pas[data-v="o"] { --pc: #ffa726; } .pas[data-v="r"] { --pc: #f04848; }
button.pas:hover { transform: scale(1.12); }
button.pas:active { transform: scale(.9); }
.pas.gros { width: 46px; height: 46px; }
.pas.gros[data-v=""] { border-color: #f1c93b; }
.pas.gros.force::after { content: "✋"; position: relative; top: -14px; left: 16px; font-size: .8rem; }
.pas.mini { width: 20px; height: 20px; border-width: 2px; cursor: default; }
.rec { display: grid; gap: 20px; }
.rec-enfants { display: flex; flex-wrap: wrap; gap: 12px; }
.rec-haut { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.rec-titre { display: grid; gap: 8px; min-width: 0; }
.rec-titre h3 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.rec-semaine { display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-size: 1.1rem; }
.rec-semaine .rond { width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rec-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-family: var(--f-titre); font-weight: 700; }
.rec-legende span { display: inline-flex; align-items: center; gap: 8px; }
.rec-legende .pas { width: 26px; height: 26px; cursor: default; }
.rec-corps { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
@media (max-width: 980px) { .rec-corps { grid-template-columns: minmax(0, 1fr); } }
.rec-table-boite { overflow-x: auto; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 var(--bleu), 0 18px 26px -14px rgba(36,52,102,.45); }
.rec-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.rec-table th, .rec-table td { padding: 8px 4px; text-align: center; border-bottom: 2px solid #eef3f9; }
.rec-table thead th { background: var(--bleu-f); color: #fff; font-family: var(--f-titre); font-weight: 800; font-size: 1.1rem; padding: 10px 4px; }
.rec-table thead th small { display: block; font-size: .78rem; color: #fff; font-weight: 700; }
.rec-table thead th.we { background: #a85400; }
.rec-table thead th.auj { background: #b3246b; }
.rec-table thead th:first-child { border-top-left-radius: 28px; }
.rec-table thead th:last-child { border-top-right-radius: 28px; }
.rec-table td.auj { background: #fff0f7; }
.rec-col-regle { position: sticky; left: 0; z-index: 1; text-align: left !important; padding-left: 16px !important; min-width: 190px; max-width: 260px;
  background: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 1rem; line-height: 1.2; }
thead .rec-col-regle { background: #1d4fa8 !important; }
.rec-table tbody tr:nth-child(even) td, .rec-table tbody tr:nth-child(even) .rec-col-regle { background: #f4f9ff; }
.rec-emoji { margin-right: 8px; font-size: 1.2em; }
.rec-tiret { color: #b8c4d4; font-weight: 800; }
.rec-bilan td, .rec-bilan .rec-col-regle { background: #fff6cf !important; border-bottom: 0; }
.rec-bilan .rec-col-regle { color: #9a6b00; }
.rec-carte { position: relative; display: grid; gap: 14px; padding: 22px 20px 20px; border-radius: 30px; background: #fff; text-align: center;
  box-shadow: 0 6px 0 var(--orange), 0 18px 26px -14px rgba(36,52,102,.45); }
.rec-carte.gagne { box-shadow: 0 6px 0 var(--vert), 0 0 0 6px var(--or), 0 18px 26px -14px rgba(36,52,102,.45); }
.rec-carte.perdu { box-shadow: 0 6px 0 var(--rouge), 0 18px 26px -14px rgba(36,52,102,.45); }
.rec-ploumi { width: 110px; justify-self: center; margin-top: -60px; filter: drop-shadow(0 10px 8px rgba(36,52,102,.25)); animation: flotte 3.2s ease-in-out infinite; }
.rec-carte.gagne .rec-ploumi { animation: saut .7s ease-in-out infinite; }
@keyframes saut { 50% { transform: translateY(-14px) rotate(4deg); } }
.rec-carte.perdu .rec-ploumi { filter: grayscale(.3) drop-shadow(0 10px 8px rgba(36,52,102,.25)); }
.rec { padding-top: 10px; }
.rec-bulle { font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; line-height: 1.25; background: #eef7ff; border-radius: 20px; padding: 12px 14px; }
.rec-carte.gagne .rec-bulle { background: #e6f9dd; color: #2a7a1a; }
.rec-carte.perdu .rec-bulle { background: #ffe9e9; color: #b52b2b; }
.rec-carte.attention .rec-bulle { background: #fff1dc; color: #a45d00; }
.rec-cadeau { display: grid; gap: 2px; }
.rec-cadeau small { font-family: var(--f-titre); font-weight: 700; color: var(--encre-douce); }
.rec-cadeau b { font-family: var(--f-titre); font-size: 1.3rem; color: var(--rose); }
.rec-jauge span, .rec-limite span { font-family: var(--f-titre); font-weight: 700; font-size: .95rem; }
.rec-etoiles { display: flex; justify-content: center; gap: 4px; font-size: 2rem; }
.rec-etoiles i { font-style: normal; color: #dde6f0; }
.rec-etoiles i.plein { color: var(--or); text-shadow: 0 2px 0 #e0a800; animation: apparait .4s cubic-bezier(.2,.9,.3,1.5); }
.rec-limite { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-limite div { display: flex; gap: 4px; }
.rec-regle { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.rec-aide { margin: 0; }
.rec-bas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rec-confirme { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--f-titre); font-weight: 700; }
.rec-confirme[hidden], .rec-confirme-enfant[hidden] { display: none; }

/* réglages */
.rec-reg { display: grid; gap: 22px; max-width: 860px; }
.rec-bloc { display: grid; gap: 14px; padding: 22px; border-radius: 30px; background: #fff; box-shadow: 0 6px 0 var(--nuage-ombre), 0 18px 26px -14px rgba(36,52,102,.35); }
.rec-bloc h3 { font-size: 1.5rem; }
.rec-champ { display: grid; gap: 6px; font-family: var(--f-titre); font-weight: 700; }
.rec-champ input, .rec-item input[type="text"], .rec-txt, .rec-emoji-champ {
  font: inherit; font-family: var(--f-texte); font-size: 1.05rem; padding: 10px 14px; border-radius: 16px; border: 3px solid #dbe6f3; background: #f8fbff; color: var(--encre); min-width: 0;
}
.rec-champ input:focus, .rec-txt:focus, .rec-emoji-champ:focus { outline: none; border-color: var(--bleu); background: #fff; }
.rec-liste { display: grid; gap: 10px; }
.rec-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.rec-emoji-champ { text-align: center; padding: 8px 4px; font-size: 1.3rem; }
.rec-ecole { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.rec-ecole input { width: 20px; height: 20px; accent-color: var(--bleu); }
.rec-outils { display: flex; gap: 6px; }
.rond.petit { width: 38px; height: 38px; font-size: 1rem; border-width: 3px; }
@media (max-width: 640px) { .rec-item { grid-template-columns: 50px minmax(0, 1fr); } .rec-ecole, .rec-outils { grid-column: 2; } }
.rec-idees { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-idee { border: 2px dashed #bcd0e6; background: #f4f9ff; border-radius: 999px; padding: 6px 14px; font-family: var(--f-titre); font-weight: 700; font-size: .95rem; }
.rec-idee:hover { border-style: solid; border-color: var(--bleu); }
.rec-pas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 2px dashed #e6eef7; }
.rec-pas span { display: grid; font-family: var(--f-titre); }
.rec-pas small { font-family: var(--f-texte); color: var(--encre-douce); font-size: .9rem; }
.rec-stepper { display: flex; align-items: center; gap: 10px; }
.rec-stepper .rond { width: 46px; height: 46px; font-size: 1.5rem; }
.rec-stepper output { min-width: 64px; text-align: center; font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; }
.rec-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* impression A4 paysage */
#rec-impression { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body > *:not(#rec-impression) { display: none !important; }
  body { background: #fff !important; }
  #rec-impression { display: block; font-family: var(--f-texte); color: #243466; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #rec-impression .ri-tete { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 8px; }
  #rec-impression h1 { font-family: var(--f-titre); font-size: 28pt; color: #3a86f2; margin: 0; }
  #rec-impression p { margin: 2px 0; font-size: 11pt; }
  #rec-impression .ri-leg { display: flex; align-items: center; gap: 8px; font-weight: 700; }
  #rec-impression .ri-leg .pas { width: 14px; height: 14px; }
  #rec-impression img { height: 30mm; }
  #rec-impression table { width: 100%; border-collapse: collapse; }
  #rec-impression th, #rec-impression td { border: 1.5px solid #dbe6f3; padding: 6px 4px; text-align: center; font-size: 12pt; }
  #rec-impression thead th { background: #3a86f2; color: #fff; font-family: var(--f-titre); font-size: 13pt; }
  #rec-impression thead th.we { background: #ffad1f; }
  #rec-impression tbody th { text-align: left; font-family: var(--f-titre); font-weight: 700; width: 34%; }
  #rec-impression .pas { width: 26px; height: 26px; border-width: 2px; box-shadow: none; }
  #rec-impression .pas.gros { width: 30px; height: 30px; }
  #rec-impression .ri-bilan th, #rec-impression .ri-bilan td { background: #fff6cf; }
  #rec-impression .ri-rec { margin-top: 8px; padding: 8px 12px; border: 2.5px solid #ffad1f; border-radius: 12px; display: grid; gap: 2px; font-size: 12pt; }
  #rec-impression .ri-rec b { font-family: var(--f-titre); font-size: 14pt; color: #e07f00; }
}

@media (max-width: 640px) {
  .rec-col-regle { min-width: 140px; max-width: 170px; font-size: .88rem; padding-left: 10px !important; }
  .rec-emoji { margin-right: 4px; }
  .rec-table { min-width: 520px; }
  .pas { width: 32px; height: 32px; } .pas.gros { width: 38px; height: 38px; }
  .rec-table thead th { font-size: .95rem; }
}


/* pavé de la porte parentale */
.porte-question { margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: 1.3rem; }
.porte-question b { font-size: 1.6rem; color: var(--bleu-f); }
.porte-saisie { display: block; min-height: 64px; line-height: 56px; border-radius: 20px; border: 4px solid #dbe6f3; background: #f8fbff;
  font-family: var(--f-titre); font-weight: 800; font-size: 2.2rem; letter-spacing: .1em; }
.porte-saisie.faux { animation: tremble .4s; border-color: var(--rouge); }
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pave .bouton { min-height: 60px; padding: 0; font-size: 1.6rem; }

/* pages légales */
.texte-legal { max-height: none; max-width: 72ch; display: grid; gap: 10px; }
.texte-legal h3 { font-size: 1.3rem; margin: 8px 0 0; text-align: left; }
.texte-legal p { margin: 0; line-height: 1.6; }

/* ---------- icônes 3D ---------- */
.ico { display: inline-block; width: 1.6em; height: 1.6em; object-fit: contain; vertical-align: middle; flex: none; filter: drop-shadow(0 2px 2px rgba(36,52,102,.18)); }
.ico.petite { width: 1.35em; height: 1.35em; margin: -4px 6px -2px 0; }
.ico.ligne { width: 1.5em; height: 1.5em; margin: -4px 4px 0 0; }
.ico.moyenne { width: 64px; height: 64px; justify-self: center; }
.panneau .pico { overflow: visible; }
.panneau .pico .ico { width: 118%; height: 118%; max-width: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.bouton .ico { width: 1.7em; height: 1.7em; margin: -6px 0; }
/* sur un bouton de la même couleur, l'icône est posée dans une pastille blanche */
.bouton .ico-rond { display: inline-grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.bouton .ico-rond .ico { width: 125%; height: 125%; max-width: none; margin: 0; }
.tuile .gros .ico { width: 110px; height: 110px; }
.ecran .jouer .ico { width: 78%; height: 78%; filter: none; }
.ecran .jouer { background: none; border: 0; box-shadow: none; width: 130px; height: 130px; }
.consigne .ico { width: 2em; height: 2em; }
.paroles h3 .ico { width: 1.4em; height: 1.4em; margin-top: -6px; }
.rond .ico { width: 70%; height: 70%; }

/* soutien à la chaîne (tableau de récompenses) */
.rec-soutien { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 30px;
  background: linear-gradient(135deg, #fff, #ffeef6); box-shadow: 0 6px 0 var(--rose), 0 18px 26px -14px rgba(36,52,102,.45); }
.rec-soutien .soutien-ico { width: 72px; height: 72px; }
.rec-soutien b { font-family: var(--f-titre); font-size: 1.25rem; color: #b3246b; }
.rec-soutien p { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; max-width: 62ch; }
@media (max-width: 760px) { .rec-soutien { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }