/* =========================================================
   Le QG des Super-Héros — styles et animations
   ========================================================= */
:root {
  --fond: #EAF4FF;
  --fond2: #FFF6E5;
  --encre: #1F2A44;
  --doux: #5B6680;
  --carte: #FFFFFF;
  --bleu: #2E6FD8;
  --rouge: #E63946;
  --jaune: #FCBF49;
  --or: #F2B705;
  --vert: #22A06B;
  --violet: #7B2CBF;
  --rose: #FF6FB5;
  --ligne: #D8E3F3;
  --ombre: 0 6px 0 rgba(31, 42, 68, .12), 0 10px 24px rgba(31, 42, 68, .10);
  --rayon: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html {
  min-height: 100%;
  background: radial-gradient(circle at 10% 0%, #FFFFFF 0, transparent 40%),
              radial-gradient(circle at 90% 10%, #FFE9F3 0, transparent 35%),
              linear-gradient(180deg, var(--fond) 0%, var(--fond2) 100%);
  background-color: var(--fond2);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  color: var(--encre);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
img { max-width: 100%; }
:focus-visible { outline: 4px solid var(--bleu); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
small { font-weight: 400; color: var(--doux); }

.ecran { max-width: 1120px; margin: 0 auto; padding: 12px 16px 48px; animation: entree .35s ease-out; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Barre du haut ---------- */
.barre { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.barre h1 { flex: 1; text-align: center; font-size: clamp(20px, 3.6vw, 34px); font-weight: 700; color: var(--bleu); text-shadow: 0 3px 0 #fff; }
.btn-rond { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 0; background: var(--carte); box-shadow: var(--ombre); font-size: 26px; display: grid; place-items: center; transition: transform .12s; }
.btn-rond:active { transform: translateY(3px) scale(.96); }
.btn-parents { position: relative; font-size: 22px; opacity: .8; }
.btn-parents.maintien::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 5px solid var(--vert); clip-path: inset(0 0 0 0); animation: remplir 1.5s linear forwards; }
@keyframes remplir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.compteur { flex: none; background: linear-gradient(180deg, #FFE27A, var(--jaune)); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 22px; box-shadow: var(--ombre); white-space: nowrap; }
.compteur.boum { animation: boum .5s; }
@keyframes boum { 40% { transform: scale(1.3) rotate(-6deg); } }

/* ---------- Boutons ---------- */
.btn { border: 0; border-radius: 999px; padding: 12px 20px; background: var(--carte); box-shadow: 0 4px 0 rgba(31, 42, 68, .15); font-weight: 600; font-size: 18px; transition: transform .1s, box-shadow .1s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(31, 42, 68, .15); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn.vert { background: var(--vert); color: #fff; box-shadow: 0 5px 0 #157A50; }
.btn.rouge { background: var(--rouge); color: #fff; box-shadow: 0 5px 0 #A61E2A; }
.btn.gros { font-size: 22px; padding: 14px 28px; }
.btn.choisi { background: var(--bleu); color: #fff; box-shadow: 0 4px 0 #1B4C9E; }
.centre { text-align: center; }
.astuce { text-align: center; color: var(--doux); font-size: 15px; margin: 10px 0 0; }
.note { color: var(--doux); font-size: 15px; margin: 8px 0; }
.vide { text-align: center; color: var(--doux); font-size: 18px; padding: 30px; }

/* ---------- Accueil ---------- */
.affiche { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--ombre); margin-bottom: 18px; line-height: 0; display: flex; justify-content: center; background: #F2A65A; }
.affiche::before { content: ''; position: absolute; inset: -30px; background: url('../images/famille.webp') center / cover; filter: blur(22px) saturate(1.2); opacity: .85; }
.affiche img { position: relative; width: auto; max-width: 100%; max-height: 46vh; object-fit: contain; }
.bloc { background: rgba(255, 255, 255, .7); border-radius: 26px; padding: 14px; margin-bottom: 18px; }
.titre-bloc { font-size: 22px; margin: 6px 4px 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.titre-bloc small { font-size: 15px; }
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.carte-heros { position: relative; }
.carte-heros-zone, .carte-ajout { width: 100%; height: 100%; min-height: 250px; border-radius: var(--rayon); border: 4px solid transparent; background: var(--carte); box-shadow: var(--ombre); padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; position: relative; transition: transform .15s, border-color .15s; }
.carte-heros-zone:active { transform: scale(.97); }
.carte-heros.joue .carte-heros-zone { border-color: var(--or); box-shadow: 0 0 0 4px #FFF2C2, var(--ombre); }
.carte-portrait { position: absolute; top: 8px; left: 8px; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); object-fit: cover; z-index: 2; background: #FFF3C4; overflow: hidden; }
.portrait svg { width: 100%; height: 100%; }
.carte-avatar { height: 165px; display: flex; align-items: flex-end; }
.carte-avatar svg { height: 165px; width: auto; }
.carte-avatar.petit svg, .apercu-avatar.petit svg { transform: scale(.86); transform-origin: bottom center; }
.carte-compagnon { position: absolute; right: 8px; top: 120px; }
.carte-compagnon .animal-img { width: 58px; height: 58px; object-fit: contain; }
.carte-compagnon .animal-emoji { font-size: 40px; }
.carte-nom { font-weight: 700; font-size: 18px; text-align: center; margin-top: 4px; }
.carte-role { color: var(--doux); font-size: 15px; }
.ruban { position: absolute; top: -12px; right: -6px; background: var(--or); color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 14px; transform: rotate(6deg) scale(0); transition: transform .2s; box-shadow: 0 3px 0 #B88A00; }
.carte-heros.joue .ruban { transform: rotate(6deg) scale(1); }
.carte-modifier { position: absolute; top: 20px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F1F5FF; font-size: 18px; box-shadow: 0 2px 0 rgba(0, 0, 0, .1); z-index: 3; }
.carte-ajout { justify-content: center; border: 4px dashed var(--ligne); background: rgba(255, 255, 255, .6); box-shadow: none; color: var(--doux); gap: 6px; }
.carte-ajout span:first-child { font-size: 54px; line-height: 1; }
.prochain { display: flex; align-items: center; gap: 14px; }
.prochain-visuel { font-size: 46px; width: 64px; text-align: center; animation: flotte 3s ease-in-out infinite; }
.prochain-visuel img { width: 60px; }
.prochain-texte { flex: 1; }
.jauge { height: 16px; background: #E6ECF7; border-radius: 999px; overflow: hidden; margin: 6px 0 2px; }
.jauge div { height: 100%; background: linear-gradient(90deg, var(--jaune), var(--or)); border-radius: 999px; transition: width .6s; }
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.mission { border: 0; border-radius: var(--rayon); background: var(--c); color: #fff; padding: 18px 10px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 7px 0 rgba(0, 0, 0, .22), 0 12px 20px rgba(0, 0, 0, .12); transition: transform .12s, box-shadow .12s; position: relative; overflow: hidden; }
.mission::before { content: ''; position: absolute; inset: 0 0 55% 0; background: rgba(255, 255, 255, .14); border-radius: 0 0 50% 50%; }
.mission:hover .mission-emoji { animation: sautille .5s; }
.mission:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.mission-emoji { font-size: 50px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.mission-titre { font-weight: 700; font-size: 18px; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }

/* ---------- Atelier / choix du héros ---------- */
.atelier { display: grid; grid-template-columns: minmax(260px, 1fr) 1.5fr; gap: 16px; align-items: start; }
.apercu { position: sticky; top: 10px; background: var(--carte); border-radius: 26px; box-shadow: var(--ombre); padding: 12px; text-align: center; background-image: radial-gradient(circle at 50% 60%, #FFF7D6 0, #fff 65%); }
.apercu.pop { animation: pop .35s; }
.apercu-scene { position: relative; height: 310px; display: flex; justify-content: center; align-items: flex-end; }
.apercu-avatar svg { height: 290px; width: auto; }
.apercu-portrait { position: absolute; top: 0; left: 0; width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); object-fit: cover; z-index: 2; overflow: hidden; background: #FFF3C4; }
.apercu-compagnon { position: absolute; right: 2%; bottom: 0; }
.apercu-compagnon .animal-img { width: 96px; height: 96px; object-fit: contain; }
.apercu-compagnon .animal-emoji { font-size: 64px; }
.apercu-vehicule { position: absolute; left: 0; bottom: 4px; font-size: 64px; animation: roule 4s ease-in-out infinite; }
.apercu-nom { font-size: 26px; font-weight: 700; color: var(--bleu); margin-top: 6px; }
.apercu-pouvoir { color: var(--doux); font-size: 17px; }
.panneau { background: var(--carte); border-radius: 26px; box-shadow: var(--ombre); padding: 16px; min-width: 0; }
.question { font-size: clamp(20px, 3vw, 28px); margin: 4px 0 12px; }
.etapes { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.etapes span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F9; font-size: 22px; filter: grayscale(1); opacity: .6; }
.etapes .faite { filter: none; opacity: 1; background: #DDF5E8; }
.etapes .actuelle { filter: none; opacity: 1; background: #FFF2C2; transform: scale(1.15); box-shadow: 0 0 0 3px var(--or); }
.choix { gap: 12px; padding: 6px 4px 10px; }
body.mode-clic .choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 58vh; overflow-y: auto; }
body.mode-tactile .choix { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 14px; }
body.mode-tactile .choix::-webkit-scrollbar { display: none; }
body.mode-tactile .choix .carte-choix { flex: 0 0 auto; width: 165px; scroll-snap-align: center; }
.carte-choix { border: 4px solid #EEF2F9; background: #fff; border-radius: 20px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; transition: transform .15s, border-color .15s; min-height: 150px; justify-content: space-between; }
.carte-choix:hover { border-color: #C9D8F0; }
.carte-choix.choisi { border-color: var(--bleu); background: #F0F6FF; transform: scale(1.04); box-shadow: 0 6px 14px rgba(46, 111, 216, .25); }
.carte-choix.choisi::after { content: '✓'; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; font-weight: 700; }
.carte-label { font-weight: 600; font-size: 16px; text-align: center; }
.mini-avatar svg { height: 130px; width: auto; display: block; }
.grand-emoji { font-size: 60px; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; }
.grand-emoji .animal-img { width: 80px; height: 80px; object-fit: contain; }
.verrou { opacity: .6; }
.verrou .mini-avatar, .verrou .grand-emoji { filter: grayscale(.9); }
.cadenas { position: absolute; top: 6px; left: 6px; background: #1F2A44; color: #fff; font-size: 13px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.onglet { border: 0; background: #F1F5FF; border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.onglet span { font-size: 26px; }
.onglet small { font-size: 13px; color: inherit; }
.onglet.actif { background: var(--bleu); color: #fff; box-shadow: 0 4px 0 #1B4C9E; }
.options-zone { max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.bloc-option { margin-bottom: 16px; }
.bloc-option h3 { font-size: 19px; margin-bottom: 8px; }
.bloc-option.centre { padding: 20px 0; }
.rangee { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.pastille { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: var(--p); box-shadow: 0 0 0 2px var(--ligne); transition: transform .12s; }
.pastille.choisi { box-shadow: 0 0 0 4px var(--bleu); transform: scale(1.12); }
.carte-option { border: 3px solid #EEF2F9; background: #fff; border-radius: 16px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; min-width: 84px; position: relative; }
.carte-option.choisi { border-color: var(--bleu); background: #F0F6FF; }
.carte-option .grand-emoji { font-size: 44px; }
.carte-option .grand-emoji .animal-img { width: 56px; height: 56px; }
.mini-tete svg { width: 64px; height: 72px; display: block; }
.mini-corps svg { height: 96px; width: auto; display: block; }
.champ { width: 100%; max-width: 360px; padding: 12px 16px; border-radius: 14px; border: 3px solid var(--ligne); font-size: 20px; background: #fff; }
.champ:focus { border-color: var(--bleu); outline: none; }

/* ---------- Écrans de choix (mots) ---------- */
.grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 10px; }
.carte-mot { border: 0; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .12s; }
.carte-mot:active { transform: scale(.96); }
.carte-mot-visuel { height: 86px; display: grid; place-items: center; }
.mini-portrait { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); overflow: hidden; display: inline-block; background: #FFF3C4; }
img.mini-portrait.animal-img { object-fit: contain; background: #F3EEFF; }
.carte-mot-texte { font-weight: 700; font-size: 20px; letter-spacing: 1px; }

/* ---------- Jeux ---------- */
.jeu { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: relative; }
.progression { display: flex; justify-content: center; gap: 6px; font-size: 26px; }
.progression span { filter: grayscale(1); opacity: .3; transition: all .3s; }
.progression .faite { filter: none; opacity: 1; }
.progression .actuelle { filter: none; opacity: .7; animation: pulse 1.2s infinite; }
.puce-joueur { align-self: center; display: inline-flex; align-items: center; gap: 10px; background: var(--carte); border-radius: 999px; padding: 4px 18px 4px 4px; box-shadow: var(--ombre); font-weight: 700; font-size: 19px; animation: pop .4s; }
.puce-tete { width: 50px; height: 50px; border-radius: 50%; background: #FFF3C4; overflow: hidden; display: grid; place-items: center; }
.puce-tete svg { width: 50px; height: 56px; margin-top: 6px; }
.consigne { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; flex-wrap: wrap; text-align: center; }
.consigne-icone { font-size: 44px; animation: sautille 1.5s infinite; }
.consigne-lettre { display: inline-grid; place-items: center; min-width: 90px; height: 90px; padding: 0 12px; border-radius: 22px; background: #fff; box-shadow: var(--ombre); font-size: 66px; color: var(--bleu); }
.consigne-lettre.cache { visibility: hidden; width: 0; min-width: 0; padding: 0; }
.bulles { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 4vw, 44px); flex-wrap: wrap; min-height: 230px; padding: 10px 0; }
.bulle { border: 0; width: clamp(110px, 22vw, 160px); height: clamp(110px, 22vw, 160px); border-radius: 50%; font-size: clamp(60px, 10vw, 92px); font-weight: 700; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .2); box-shadow: inset -10px -14px 0 rgba(0, 0, 0, .12), inset 10px 10px 0 rgba(255, 255, 255, .25), 0 10px 20px rgba(0, 0, 0, .15); animation: flotte 3s ease-in-out infinite; position: relative; }
.bulle::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 2px; height: 26px; background: rgba(31, 42, 68, .3); }
.bulle.b0 { background: var(--rouge); }
.bulle.b1 { background: var(--bleu); animation-delay: -1s; }
.bulle.b2 { background: var(--vert); animation-delay: -2s; }
.bulles.mot .bulle { border-radius: 26px; width: clamp(130px, 25vw, 190px); height: auto; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; color: var(--encre); text-shadow: none; box-shadow: var(--ombre); }
.bulles.mot .bulle::after { display: none; }
.choix-emoji { font-size: clamp(56px, 9vw, 80px); line-height: 1.1; }
.choix-mot { font-size: 22px; font-weight: 600; }
.choix-mot b { color: var(--rouge); font-size: 28px; }
.bulle.rate { opacity: .4; }
.bulle.eclate { animation: eclate .45s forwards; }
@keyframes eclate { 50% { transform: scale(1.3); } 100% { transform: scale(1.6); opacity: 0; } }
.heros-jeu { position: absolute; right: 0; bottom: -20px; width: 120px; pointer-events: none; }
.heros-jeu svg { width: 100%; height: auto; }

.jeu-epeler { align-items: center; }
.mot-visuel { min-height: 120px; display: grid; place-items: center; }
.mot-visuel .grand-emoji { font-size: 96px; }
.mot-visuel .mini-portrait { width: 110px; height: 110px; }
.mot-avatar svg { height: 170px; width: auto; }
.cases { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.case { width: clamp(52px, 10vw, 74px); height: clamp(64px, 12vw, 88px); border-radius: 16px; border: 4px dashed #B8C6DD; display: grid; place-items: center; font-size: clamp(38px, 7vw, 56px); font-weight: 700; background: rgba(255, 255, 255, .7); transition: all .2s; }
.case .fantome-lettre { color: #C9D3E3; }
.case.prochaine { border-color: var(--or); border-style: solid; background: #FFF8DC; animation: pulse 1.2s infinite; }
.case.prochaine .fantome-lettre { color: #E6C463; }
.case.survol { transform: scale(1.12); background: #DDF5E8; border-color: var(--vert); }
.case.remplie { border: 4px solid var(--vert); background: #fff; color: var(--vert); animation: pop .3s; }
.cases.gagne .case { animation: sautille .6s; }
.cases.gagne .case:nth-child(2n) { animation-delay: .1s; }
.tuiles { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.tuile { width: clamp(62px, 12vw, 84px); height: clamp(62px, 12vw, 84px); border: 0; border-radius: 18px; font-size: clamp(38px, 7vw, 52px); font-weight: 700; color: #fff; background: var(--violet); box-shadow: 0 6px 0 #541C85; }
.tuile:nth-child(3n+1) { background: var(--bleu); box-shadow: 0 6px 0 #1B4C9E; }
.tuile:nth-child(3n+2) { background: var(--rose); box-shadow: 0 6px 0 #C2447F; }
.tuile.utilise { visibility: hidden; }
.tuile.en-glisse { opacity: .3; }
.fantome { position: fixed !important; z-index: 1000; pointer-events: none; margin: 0 !important; transition: none !important; animation: none !important; }

/* ---------- Scènes illustrées ---------- */
.scene { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 48vh; border-radius: 26px; background-size: cover; background-position: center; box-shadow: var(--ombre); overflow: hidden; background-color: #CDE8FF; }
.scene-animal { position: absolute; left: 20%; bottom: 8%; width: 26%; max-width: 230px; display: grid; place-items: center; }
.scene-animal img { width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
.emoji-scene, .scene-animal .animal-emoji { font-size: clamp(64px, 13vw, 150px); line-height: 1; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
.scene-animal .effet { position: absolute; top: -6%; right: -4%; font-size: clamp(28px, 5vw, 52px); }
.scene-heros { position: absolute; right: 5%; bottom: 3%; height: 80%; display: flex; align-items: flex-end; gap: 0; }
.scene-heros.cache { visibility: hidden; }
.scene-heros.arrive { animation: arrive 1.1s cubic-bezier(.2, .9, .3, 1.15) both; }
.scene-avatar { height: 100%; }
.scene-avatar svg { height: 100%; width: auto; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.scene-vehicule { font-size: clamp(50px, 10vw, 110px); line-height: 1; margin-right: -20px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.scene-pouvoir { position: absolute; top: 0; left: -10%; font-size: clamp(30px, 6vw, 60px); animation: scintille 1s ease-in-out infinite; }
.scene-probleme { position: absolute; top: 8%; left: 6%; font-size: clamp(40px, 8vw, 80px); animation: flotte 2.5s ease-in-out infinite; }
.bulle-bd { position: absolute; top: 8%; left: 34%; background: #fff; border-radius: 22px; padding: 10px 18px; font-weight: 700; font-size: clamp(18px, 3vw, 28px); box-shadow: var(--ombre); animation: pop .4s, sautille 1s .4s infinite; }
.bulle-bd::after { content: ''; position: absolute; left: 16px; bottom: -14px; border: 10px solid transparent; border-top-color: #fff; }
.cible-depot::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; border: 5px dashed #fff; animation: tourne 6s linear infinite, pulse 1.2s infinite; }
.cible-depot.survol::before { border-color: var(--vert); border-style: solid; }
.coeurs { position: absolute; inset: 0; pointer-events: none; }
.coeurs span { position: absolute; bottom: 30%; left: 50%; font-size: 30px; animation: monte 2.2s ease-out infinite; opacity: 0; }
.coeurs span:nth-child(2) { left: 20%; animation-delay: .3s; }
.coeurs span:nth-child(3) { left: 75%; animation-delay: .6s; }
.coeurs span:nth-child(4) { left: 35%; animation-delay: .9s; }
.coeurs span:nth-child(5) { left: 62%; animation-delay: 1.2s; }

.recit, .texte-histoire { background: var(--carte); border-radius: 20px; padding: 14px 18px; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.4; margin: 0; box-shadow: var(--ombre); text-align: center; }
.reponses { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.choix-emotions, .meteo-choix { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-emotion { border: 4px solid transparent; background: var(--carte); border-radius: 20px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--ombre); min-width: 104px; transition: transform .12s; }
.btn-emotion span { font-size: 54px; line-height: 1.1; }
.btn-emotion small { color: var(--encre); font-weight: 600; font-size: 16px; }
.btn-emotion.petit { min-width: 72px; padding: 4px 8px; }
.btn-emotion.petit span { font-size: 38px; }
.btn-emotion.petit small { font-size: 13px; }
.btn-emotion.bonne, .btn-aide.bonne { border-color: var(--vert); background: #E7F8EF; animation: pop .35s; }
.btn-emotion.rate, .btn-aide.rate { opacity: .45; }
.choix-aides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; max-width: 760px; }
.btn-aide { border: 4px solid transparent; background: var(--carte); border-radius: 22px; padding: 14px; display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; text-align: left; box-shadow: var(--ombre); }
.aide-emoji { font-size: 52px; flex: none; }
.zone-depart { display: flex; justify-content: center; padding: 6px; }
.jeton-vehicule { border: 0; background: linear-gradient(180deg, #FFE27A, var(--jaune)); border-radius: 999px; padding: 10px 22px 10px 10px; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 0 #C99720, 0 10px 20px rgba(0, 0, 0, .15); animation: pulse 1.2s infinite; font-weight: 700; font-size: 20px; }
.jeton-tete { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #fff; }
.jeton-tete svg { width: 64px; height: 72px; margin-top: 4px; }
.jeton-veh { font-size: 60px; line-height: 1; }
.parler { background: #FFF6D6; border: 3px solid #FFE08A; border-radius: 22px; padding: 14px 18px; max-width: 760px; width: 100%; font-size: 20px; }
.parler-titre { font-weight: 700; font-size: 22px; color: #9A6B00; }
.parler p { margin: 6px 0 0; line-height: 1.4; }
.nouvel-ami { color: var(--vert); font-weight: 600; }

/* ---------- Météo du cœur ---------- */
.meteo-liste { display: flex; flex-direction: column; gap: 12px; }
.meteo-ligne { display: grid; grid-template-columns: 120px 1fr 70px; align-items: center; gap: 10px; background: var(--carte); border-radius: 22px; padding: 10px; box-shadow: var(--ombre); }
.meteo-ligne.faite { background: #F4FBF7; }
.meteo-qui { display: flex; flex-direction: column; align-items: center; font-weight: 700; gap: 2px; }
.meteo-qui .mini-portrait { width: 64px; height: 64px; }
.meteo-ciel { font-size: 50px; text-align: center; animation: flotte 3s ease-in-out infinite; }
.semaine { display: grid; grid-template-columns: 54px repeat(var(--n), 1fr); gap: 6px; background: var(--carte); border-radius: 20px; padding: 10px; box-shadow: var(--ombre); align-items: center; }
.semaine-jour { text-align: center; font-weight: 600; color: var(--doux); text-transform: capitalize; font-size: 15px; }
.semaine-qui svg { width: 44px; height: 50px; }
.semaine-case { text-align: center; font-size: 28px; min-height: 36px; background: #F5F8FD; border-radius: 10px; }

/* ---------- Histoires ---------- */
.creer-histoire { align-self: center; margin: 6px 0 4px; }
.bibliotheque { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.livre { border: 0; border-radius: 20px; aspect-ratio: 4 / 3; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: var(--ombre); padding: 0; transition: transform .12s; }
.livre:active { transform: scale(.97); }
.livre-persos { position: absolute; inset: 10px 10px 50px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.livre-avatar svg { width: 70px; height: 80px; }
.livre-animal { width: 64px; height: 64px; object-fit: contain; }
.livre-persos .animal-emoji { font-size: 50px; }
.livre-titre { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .92); padding: 8px; font-weight: 700; font-size: 16px; }
.choix-histoire .carte-choix { min-height: 160px; }
.vignette { width: 130px; height: 86px; border-radius: 14px; background-size: cover; background-position: center; display: grid; place-items: center; font-size: 40px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); }
.vignette span { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.lecteur .scene { max-height: 52vh; }
.histoire-animal { width: 100%; }
.pagination { display: flex; gap: 6px; color: #C9D3E3; font-size: 20px; }
.pagination .actuelle { color: var(--bleu); }

/* ---------- Alphabet ---------- */
.consigne-douce { color: var(--doux); font-size: 18px; margin: 0; }
.alphabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.lettre-alpha { border: 0; aspect-ratio: 1; border-radius: 18px; background: var(--carte); box-shadow: 0 5px 0 rgba(31, 42, 68, .14); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: transform .12s; }
.lettre-alpha span { font-size: 42px; font-weight: 700; color: var(--bleu); line-height: 1; }
.lettre-alpha small { font-size: 13px; color: var(--or); letter-spacing: 1px; }
.lettre-alpha.n1 { background: #FFFBEA; }
.lettre-alpha.n2 { background: #FFF2C2; }
.lettre-alpha.n3 { background: linear-gradient(160deg, #FFE27A, var(--or)); }
.lettre-alpha.n3 span { color: #fff; text-shadow: 0 2px 0 #B88A00; }
.lettre-alpha.n3 small { color: #fff; }
.lettre-alpha.du-prenom::after, .du-prenom-ex::after { content: ''; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rouge); }
.du-prenom-ex { position: relative; display: inline-block; padding: 2px 20px 2px 8px; background: #fff; border-radius: 8px; font-weight: 700; color: var(--bleu); }
.legende { color: var(--doux); }
.lettre-zoom { text-align: center; }
.lettre-geante { font-size: clamp(110px, 24vw, 180px); font-weight: 700; color: var(--bleu); line-height: 1; animation: pop .4s; }
.minuscule { font-size: .4em; color: var(--doux); margin-left: 10px; }
.lettre-mot { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 32px; font-weight: 600; margin-top: 8px; animation: pop .4s; }
.lettre-mot b { color: var(--rouge); font-size: 1.25em; }

/* ---------- Trésors ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stats div { background: var(--carte); border-radius: 20px; padding: 14px; text-align: center; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.stats b { font-size: 26px; }
.tresors { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tresor { border: 0; background: var(--carte); border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 4px 0 rgba(31, 42, 68, .1); position: relative; }
.tresor-visuel { font-size: 48px; line-height: 1.1; height: 62px; display: grid; place-items: center; }
.tresor-visuel img { width: 62px; height: 62px; object-fit: contain; }
.tresor-nom { font-size: 14px; font-weight: 600; text-align: center; }
.tresor.ferme .tresor-visuel { filter: grayscale(1); opacity: .45; }
.tresor.mystere .tresor-visuel { filter: brightness(0); opacity: .25; }

/* ---------- Parents ---------- */
.parents .bloc-option { background: var(--carte); border-radius: 20px; padding: 14px 16px; box-shadow: var(--ombre); }
.conseils ul { margin: 6px 0; padding-left: 22px; line-height: 1.5; font-size: 17px; }
.conseils li { margin-bottom: 6px; }
label.btn { cursor: pointer; }

/* ---------- Fenêtres ---------- */
.modale-fond { position: fixed; inset: 0; background: rgba(20, 30, 60, .55); display: grid; place-items: center; z-index: 500; padding: 16px; animation: fondu .2s; }
.modale { background: var(--carte); border-radius: 30px; padding: 22px; max-width: 560px; width: 100%; max-height: 92vh; overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); animation: pop .35s; }
.modale h2 { font-size: clamp(24px, 4vw, 32px); color: var(--bleu); margin: 6px 0; }
.modale p { font-size: 19px; line-height: 1.4; }
.modale-boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.fete-heros svg { height: 210px; width: auto; animation: victoire 1s ease-in-out infinite; }
.fete-etoiles { font-size: 30px; letter-spacing: 2px; animation: pop .5s .2s both; }
.cadeau-titre { font-size: 26px; font-weight: 700; color: var(--violet); }
.cadeau-visuel { font-size: 110px; line-height: 1.2; animation: victoire 1s ease-in-out infinite; }
.cadeau-visuel img { width: 150px; }
.cadeau-nom { font-size: 30px; font-weight: 700; }
.cadeau-type { color: var(--doux); }
.bienvenue img { border-radius: 20px; width: 100%; }

/* ---------- Effets ---------- */
.confetti { position: fixed; top: -16px; width: 11px; height: 15px; border-radius: 3px; z-index: 900; pointer-events: none; animation: tombe 2s linear forwards; }
@keyframes tombe { to { transform: translateY(110vh) rotate(var(--tourne)); } }
.etoile-volante { position: fixed; z-index: 950; font-size: 36px; pointer-events: none; margin: -18px 0 0 -18px; transition: transform 1s cubic-bezier(.5, -0.3, .7, 1), opacity 1s; }

/* Avatars animés */
.avatar .cape { transform-box: fill-box; transform-origin: 50% 0; animation: cape 2.6s ease-in-out infinite; }
.avatar .lueur { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.avatar.pose-victoire .bras { animation: none; }
.flotte { animation: flotte 3.2s ease-in-out infinite; }
@keyframes cape { 0%, 100% { transform: skewX(-3deg) scaleX(1); } 50% { transform: skewX(4deg) scaleX(1.05); } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sautille { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
@keyframes pop { 0% { transform: scale(.7); opacity: .3; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes victoire { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes roule { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px) rotate(-3deg); } }
@keyframes arrive { from { transform: translateX(140%) translateY(-20%); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@keyframes monte { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-160px) scale(1.2); opacity: 0; } }
@keyframes scintille { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(15deg); opacity: .7; } }
@keyframes tourne { to { rotate: 360deg; } }
@keyframes fondu { from { opacity: 0; } }
.secoue { animation: secoue .45s; }
@keyframes secoue { 20%, 60% { transform: translateX(-10px) rotate(-3deg); } 40%, 80% { transform: translateX(10px) rotate(3deg); } }

/* Émotions des animaux */
.anim-peur > :first-child { animation: tremble .18s linear infinite; }
@keyframes tremble { 25% { transform: translateX(-3px) rotate(-1deg); } 75% { transform: translateX(3px) rotate(1deg); } }
.anim-tristesse > :first-child { animation: triste 3s ease-in-out infinite; filter: saturate(.7) drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
@keyframes triste { 50% { transform: translateY(6px) scaleY(.96); } }
.anim-tristesse .effet { animation: larme 1.6s ease-in infinite; top: 30%; right: 20%; }
@keyframes larme { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.anim-colere > :first-child { animation: colere 1s ease-in-out infinite; }
@keyframes colere { 50% { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(230, 57, 70, .9)); } }
.anim-colere .effet { animation: pulse .6s infinite; }
.anim-joie > :first-child { animation: joie .8s ease-in-out infinite; }
@keyframes joie { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-24px) rotate(-4deg); } }
.anim-joie .effet { animation: scintille 1s infinite; }
.anim-surprise > :first-child { animation: surprise 1.4s ease-in-out infinite; }
@keyframes surprise { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12) translateY(-10px); } }
.anim-surprise .effet { animation: sautille .7s infinite; }

/* ---------- Petits écrans ---------- */
@media (max-width: 820px) {
  .atelier { grid-template-columns: 1fr; }
  .apercu { position: relative; top: 0; }
  .apercu-scene { height: 220px; }
  .apercu-avatar svg { height: 210px; }
  .apercu-vehicule { font-size: 48px; }
  .apercu-compagnon .animal-img { width: 70px; height: 70px; }
  .options-zone, body.mode-clic .choix { max-height: none; }
  .meteo-ligne { grid-template-columns: 1fr 60px; }
  .meteo-qui { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .meteo-choix { grid-column: 1 / -1; grid-row: 2; }
  .heros-jeu { display: none; }
}
@media (max-width: 480px) {
  .ecran { padding: 8px 12px 40px; }
  .btn-rond { width: 46px; height: 46px; font-size: 22px; }
  .compteur { font-size: 18px; padding: 6px 12px; }
  .equipe { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carte-avatar svg { height: 140px; }
  .carte-avatar { height: 140px; }
  .carte-heros-zone, .carte-ajout { min-height: 220px; }
  .carte-compagnon { top: 100px; }
  .missions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mission { min-height: 118px; }
  .mission-emoji { font-size: 40px; }
  .mission-titre { font-size: 16px; }
  .btn-emotion { min-width: 88px; }
  .scene { max-height: none; }
  .scene-heros { height: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   V2 — Moteur d'univers, aventure, jeux d'action, histoires
   ========================================================= */
:root {
  --verre: rgba(255, 255, 255, .72);
  --verre-bord: rgba(255, 255, 255, .85);
  --magique: linear-gradient(135deg, #7B2CBF 0%, #C026D3 50%, #F472B6 100%);
  --ciel: linear-gradient(180deg, #8EC5FF 0%, #CFE8FF 100%);
  --ombre-douce: 0 2px 6px rgba(31, 42, 68, .06), 0 12px 32px rgba(31, 42, 68, .10);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
}
.ecran { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(48px, env(safe-area-inset-bottom)); }
textarea.champ { resize: vertical; max-width: 100%; font-size: 18px; line-height: 1.4; }
.centre-actions { justify-content: center; }
.centre-col { align-items: center; text-align: center; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease-out; }
::view-transition-old(root) { animation-name: vt-sortie; }
::view-transition-new(root) { animation-name: vt-entree; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(12px) scale(1.01); } }
@media (hover: hover) {
  .mission:hover, .carte-mot:hover, .livre:hover, .creation-carte:hover:not(:disabled), .emplacement-zone:hover, .aventure-vedette:hover { transform: translateY(-3px); }
  .btn:hover { filter: brightness(1.04); }
}

/* ---------- Toasts ---------- */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 960;
  background: rgba(31, 42, 68, .92); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 17px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: toast-entree .4s var(--ressort); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast + .toast { bottom: max(80px, calc(env(safe-area-inset-bottom) + 56px)); }
.toast.part { opacity: 0; transform: translateX(-50%) translateY(16px); transition: all .4s; }
@keyframes toast-entree { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.9); } }

/* ---------- Écran titre ---------- */
.ecran-plein { max-width: none; padding: 0; min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; }
.titre-fond { position: fixed; inset: -40px; background-size: cover; background-position: center 30%; filter: blur(6px) saturate(1.15); transform: scale(1.05); animation: respire 18s ease-in-out infinite alternate; }
.titre-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 60, .15) 0%, rgba(20, 24, 60, .55) 100%); }
@keyframes respire { to { transform: scale(1.12) translateY(-10px); } }
.titre-contenu { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.logo { text-align: center; color: #fff; }
.logo h1 { font-size: clamp(42px, 8vw, 84px); line-height: .95; font-weight: 700; letter-spacing: -.5px; text-shadow: 0 4px 0 #1E3A8A, 0 8px 24px rgba(0, 0, 0, .35); animation: pop .6s var(--ressort); }
.logo-petit { display: inline-block; font-size: clamp(14px, 2vw, 18px); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; background: rgba(255, 255, 255, .2); padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.emplacements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 980px; }
.emplacement { position: relative; background: var(--verre); border: 2px solid var(--verre-bord); border-radius: 26px; box-shadow: var(--ombre-douce); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: entree .5s both; }
.emplacement:nth-child(2) { animation-delay: .08s; } .emplacement:nth-child(3) { animation-delay: .16s; }
.emplacement.actif { border-color: #FFE27A; box-shadow: 0 0 0 4px rgba(252, 191, 73, .5), var(--ombre-douce); }
.emplacement-zone, .emplacement.vide { width: 100%; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 16px; text-align: center; transition: transform .15s; border-radius: 26px; }
.emplacement.vide { color: #fff; background: rgba(255, 255, 255, .16); border: 2px dashed rgba(255, 255, 255, .6); min-height: 220px; justify-content: center; font-weight: 600; font-size: 18px; }
.emplacement-plus { font-size: 48px; line-height: 1; }
.emplacement-num { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--doux); }
.emplacement.vide .emplacement-num { color: rgba(255, 255, 255, .85); }
.emplacement-nom { font-size: 21px; font-weight: 700; color: var(--bleu); }
.emplacement-heros { display: flex; justify-content: center; }
.emplacement-heros span { width: 54px; height: 54px; border-radius: 50%; background: #FFF3C4; border: 3px solid #fff; overflow: hidden; margin-left: -10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.emplacement-heros span:first-child { margin-left: 0; }
.emplacement-heros svg { width: 54px; height: 60px; margin-top: 4px; }
.emplacement-infos { font-size: 14px; color: var(--doux); }
.emplacement-date { font-size: 13px; color: var(--doux); }
.emplacement-jouer { margin-top: 6px; background: var(--vert); color: #fff; font-weight: 700; padding: 10px 22px; border-radius: 999px; box-shadow: 0 4px 0 #157A50; font-size: 18px; }
.emplacement-outils { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.emplacement-outils button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .8); font-size: 15px; }
.titre-pied { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); margin: 0; }

/* ---------- Accueil v2 ---------- */
.affiche { position: relative; }
.grade-badge { position: absolute; left: 12px; bottom: 12px; line-height: 1; background: var(--verre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 16px; box-shadow: var(--ombre-douce); }
.aventure-vedette { position: relative; width: 100%; border: 0; padding: 0; border-radius: 26px; overflow: hidden; height: clamp(140px, 22vw, 200px); margin-bottom: 18px; box-shadow: 0 8px 0 rgba(30, 58, 138, .35), var(--ombre-douce); transition: transform .15s; display: block; }
.aventure-vedette > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(1.1); }
.aventure-vedette::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 58, 138, .85) 0%, rgba(30, 58, 138, .35) 55%, transparent 100%); }
.vedette-pagaille { position: absolute; right: 2%; bottom: -6%; height: 105%; z-index: 1; animation: flotte 3s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.vedette-texte { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.vedette-texte b { font-size: clamp(24px, 4vw, 36px); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.vedette-texte small { color: #DBEAFE; font-size: 16px; font-weight: 500; }
.toctoc { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; background: linear-gradient(135deg, #FFF6D6, #FFE8A3); border-radius: 22px; padding: 12px 18px; margin-bottom: 18px; box-shadow: 0 6px 0 #E5B53A, var(--ombre-douce); animation: pop .5s var(--ressort), toctoc 1.6s 0.5s ease-in-out infinite; }
.toctoc b { display: block; font-size: 22px; } .toctoc small { color: #7A5A00; font-size: 15px; }
.toctoc-porte { font-size: 44px; animation: sautille 1s infinite; }
@keyframes toctoc { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-1.5deg); } 20% { transform: rotate(1.5deg); } 30% { transform: rotate(0); } }

/* ---------- Carte de l'aventure ---------- */
.saison { align-self: center; background: var(--magique); color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 999px; box-shadow: var(--ombre-douce); }
.rappel { align-self: center; }
.carte { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--ombre); line-height: 0; }
.carte img { width: 100%; }
.etape-carte { position: absolute; transform: translate(-50%, -50%); width: clamp(42px, 6vw, 62px); height: clamp(42px, 6vw, 62px); border-radius: 50%; border: 4px solid #fff; background: var(--bleu); color: #fff; font-weight: 700; font-size: clamp(18px, 2.6vw, 26px); display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); line-height: 1; padding: 0; }
.etape-carte.finie { background: linear-gradient(160deg, #FFE27A, var(--or)); }
.etape-carte.fermee { background: #94A3B8; filter: grayscale(.4); }
.etape-carte.prochaine { animation: pulse 1.2s infinite; box-shadow: 0 0 0 6px rgba(252, 191, 73, .7), 0 5px 0 rgba(0, 0, 0, .25); }
.carte-marqueur { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: clamp(46px, 6vw, 64px); height: clamp(46px, 6vw, 64px); border-radius: 50%; background: #fff; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); animation: sautille 1.4s infinite; margin-bottom: 6px; }
.carte-marqueur svg { width: 100%; height: 115%; }
.carte-pagaille { position: absolute; left: 90%; top: -40%; width: clamp(54px, 8vw, 90px) !important; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); animation: flotte 2.4s ease-in-out infinite; }
.btn.magique { background: var(--magique); color: #fff; box-shadow: 0 5px 0 #6B21A8; }
.medailles { display: flex; flex-wrap: wrap; gap: 10px; }
.medaille { display: flex; flex-direction: column; align-items: center; font-size: 40px; background: var(--carte); border-radius: 18px; padding: 8px 10px; min-width: 96px; box-shadow: var(--ombre-douce); }
.medaille small { font-size: 12px; text-align: center; color: var(--encre); font-weight: 600; max-width: 100px; }
.attente { align-items: center; padding: 40px 0; }
.attente-pagaille { width: min(260px, 60vw); animation: flotte 2s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .2)); }
.points { display: flex; gap: 10px; justify-content: center; }
.points span { width: 16px; height: 16px; border-radius: 50%; background: var(--violet); animation: sautille 1s infinite; }
.points span:nth-child(2) { animation-delay: .15s; background: var(--rose); } .points span:nth-child(3) { animation-delay: .3s; background: var(--bleu); }
.scene-pagaille { position: absolute; left: 6%; bottom: 4%; height: 78%; animation: flotte 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.scene-equipe { position: absolute; right: 4%; bottom: 3%; height: 74%; display: flex; align-items: flex-end; }
.scene-equipe .scene-avatar { height: 100%; margin-left: -4%; }
.scene-equipe .scene-avatar:nth-child(2) { animation-delay: -1s; } .scene-equipe .scene-avatar:nth-child(3) { animation-delay: -2s; }
.medaille-geante { position: absolute; left: 12%; top: 50%; transform: translateY(-50%); font-size: clamp(80px, 16vw, 170px); animation: victoire 1.2s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .3)); }
.rappel-texte { text-align: center; color: var(--doux); font-style: italic; font-size: 18px; margin: 0; }

/* ---------- Jeux d'action ---------- */
.jeu-action { align-items: center; }
.mot-cible { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.case-vol { width: clamp(46px, 8vw, 64px); height: clamp(52px, 9vw, 72px); border-radius: 14px; display: grid; place-items: center; font-size: clamp(30px, 5vw, 44px); font-weight: 700; background: rgba(255, 255, 255, .8); color: #C9D3E3; border: 3px dashed #B8C6DD; transition: all .25s var(--ressort); }
.case-vol.prochaine { color: var(--bleu); border: 3px solid var(--or); background: #FFF8DC; transform: scale(1.12); animation: pulse 1.2s infinite; }
.case-vol.trouvee { color: #fff; background: var(--vert); border: 3px solid var(--vert); }
.mot-cible.gagne .case-vol { animation: sautille .6s; }
.arene { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 58vh; border-radius: 26px; overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--ombre); --u: 8px; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.arene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(142, 197, 255, .25), transparent 60%); pointer-events: none; }
.vol-heros { position: absolute; left: 17%; top: 50%; width: calc(var(--u) * 14); transform: translate(-50%, -50%); z-index: 3; pointer-events: none; will-change: transform, top; }
.vol-avatar svg { width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25)); }
.vol-compagnon { position: absolute; left: -45%; bottom: 10%; width: 55%; animation: flotte 1.6s ease-in-out infinite; }
.vol-compagnon .animal-img { width: 100%; height: auto; }
.vol-compagnon .animal-emoji { font-size: calc(var(--u) * 5); }
.vol-heros.vertige { animation: none; }
.vol-heros.vol-final { transition: left 1.6s ease-in, top 1.6s ease-in; left: 115% !important; top: 20% !important; }
.vol-bulle { position: absolute; width: calc(var(--u) * 9); height: calc(var(--u) * 9); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 5.4); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); box-shadow: inset calc(var(--u) * -.8) calc(var(--u) * -1) 0 rgba(0, 0, 0, .12), inset calc(var(--u) * .8) calc(var(--u) * .8) 0 rgba(255, 255, 255, .3), 0 8px 16px rgba(0, 0, 0, .18); z-index: 2; pointer-events: none; }
.vol-bulle::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--u) * 3); background: rgba(31, 42, 68, .35); }
.vol-bulle.c0 { background: var(--rouge); } .vol-bulle.c1 { background: var(--bleu); } .vol-bulle.c2 { background: var(--violet); } .vol-bulle.c3 { background: #F97316; }
.vol-bulle.etoile, .vol-bulle.orage { background: rgba(255, 255, 255, .85); font-size: calc(var(--u) * 5.5); text-shadow: none; }
.vol-bulle.etoile::after, .vol-bulle.orage::after { display: none; }
.vol-bulle.orage { background: rgba(71, 85, 105, .75); }
.vol-bulle.attrape { animation: eclate .4s forwards; }
.vol-bulle.attrape.rate { animation: rebond .4s forwards; }
@keyframes rebond { to { transform: translate(40%, -140%) rotate(40deg); opacity: 0; } }
.arene-bonus { position: absolute; top: 10px; right: 12px; background: var(--verre); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 18px; z-index: 4; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.commandes { display: flex; gap: 16px; justify-content: center; }
.btn-fleche { width: 76px; height: 64px; border: 0; border-radius: 20px; background: var(--carte); font-size: 34px; box-shadow: 0 5px 0 rgba(31, 42, 68, .15); touch-action: manipulation; }
.btn-fleche:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(31, 42, 68, .15); }
body.mode-tactile .commandes { order: 0; }
.fin-action { min-height: 10px; display: flex; justify-content: center; }
/* Course */
.trajet { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 700px; }
.trajet-route { flex: 1; height: 14px; background: #E2E8F0; border-radius: 999px; position: relative; }
.trajet-veh { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); font-size: 32px; transition: right .2s linear; }
.trajet-cible { width: 46px; height: 46px; display: grid; place-items: center; }
.trajet-cible .animal-img { width: 46px; height: 46px; object-fit: contain; } .trajet-cible .animal-emoji { font-size: 34px; }
.trajet-depart { font-size: 28px; }
.route { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; background: linear-gradient(180deg, #6B7280, #4B5563); border-top: 6px solid #D1D5DB; }
.route-lignes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 255, 255, .85) 40px 80px) 0 37% / 100% 4px no-repeat, repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 255, 255, .85) 40px 80px) 0 70% / 100% 4px no-repeat; animation: route .6s linear infinite; }
.arene.lent .route-lignes { animation-duration: 1.8s; }
.arene.arrivee .route-lignes { animation: none; }
@keyframes route { to { background-position: 80px 37%, 80px 70%; } }
.course-veh { position: absolute; left: 80%; top: 67%; transform: translate(-50%, -60%); font-size: calc(var(--u) * 10); line-height: 1; z-index: 3; transition: top .18s var(--ressort); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }
.course-tete { position: absolute; right: -18%; top: -40%; width: 46%; height: 46%; border-radius: 50%; background: #fff; overflow: hidden; border: 2px solid #fff; }
.course-tete svg { width: 100%; height: 115%; }
.course-objet { position: absolute; transform: translate(-50%, -55%); font-size: calc(var(--u) * 7); z-index: 2; pointer-events: none; }
.course-objet.attrape { animation: eclate .4s forwards; }
.course-ami { position: absolute; left: 58%; top: 67%; transform: translate(-50%, -60%); width: calc(var(--u) * 14); animation: arrive-gauche .9s var(--ressort) both, joie .8s .9s ease-in-out infinite; z-index: 2; }
.course-ami .animal-img { width: 100%; } .course-ami .animal-emoji { font-size: calc(var(--u) * 10); }
@keyframes arrive-gauche { from { left: -10%; } }

/* ---------- Grand Livre ---------- */
.livre-entete { background: linear-gradient(135deg, #FFF7E6, #FDE7C4); border: 3px solid #F5D49A; border-radius: 24px; padding: 16px 20px; }
.livre-entete h2 { color: #92400E; font-size: clamp(22px, 3vw, 30px); }
.livre-entete p { margin: 6px 0 0; font-size: 17px; line-height: 1.45; color: #6B4423; }
.onglets-livre { justify-content: center; }
.livre-page { display: flex; flex-direction: column; gap: 14px; }
.fiche { display: grid; grid-template-columns: 200px 1fr; gap: 16px; background: var(--carte); border-radius: 24px; padding: 16px; box-shadow: var(--ombre-douce); }
.fiche-visuel { position: relative; display: flex; justify-content: center; align-items: flex-end; background: radial-gradient(circle at 50% 70%, #FFF3C4, #fff 70%); border-radius: 18px; min-height: 220px; }
.fiche-portrait { position: absolute; top: 6px; left: 6px; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); object-fit: cover; overflow: hidden; }
.fiche-avatar svg { height: 210px; width: auto; }
.fiche-avatar.petit svg { transform: scale(.88); transform-origin: bottom center; }
.fiche-texte h3 { font-size: 24px; color: var(--bleu); } .fiche-texte h3 small { font-size: 16px; }
.fiche-texte p { font-size: 17px; line-height: 1.45; margin: 8px 0; }
.fiche-niveau { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .fiche-niveau .jauge { flex: 1; margin: 0; }
.fiche-tags { display: flex; flex-wrap: wrap; gap: 8px; } .fiche-tags span { background: #F1F5FF; border-radius: 999px; padding: 4px 12px; font-size: 15px; font-weight: 600; }
.fiche-devise { font-style: italic; color: var(--violet); font-weight: 600; font-size: 19px !important; }
.amis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ami { display: flex; gap: 12px; background: var(--carte); border-radius: 20px; padding: 12px; box-shadow: var(--ombre-douce); align-items: flex-start; }
.ami-visuel { width: 84px; height: 84px; flex: none; display: grid; place-items: center; background: #F5F3FF; border-radius: 18px; }
.ami-img { width: 76px; height: 76px; object-fit: contain; } .ami-visuel .perso-emoji, .ami-visuel .animal-emoji { font-size: 52px; }
.ami h3 { font-size: 19px; } .ami p { margin: 4px 0; font-size: 15px; line-height: 1.35; }
.ami-coeurs { font-size: 13px; letter-spacing: 1px; }
.perso-emoji { font-size: 60px; line-height: 1; }
.lieux, .sac { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lieu, .objet { background: var(--carte); border-radius: 20px; padding: 10px; box-shadow: var(--ombre-douce); }
.lieu-image { height: 120px; border-radius: 14px; background-size: cover; background-position: center; display: grid; place-items: center; font-size: 46px; margin-bottom: 8px; }
.lieu.inconnu .lieu-image { filter: grayscale(1) blur(2px) brightness(.8); }
.lieu h3, .objet h3 { font-size: 18px; } .lieu p, .objet p { font-size: 15px; margin: 4px 0; line-height: 1.35; }
.objet { text-align: center; } .objet-emoji { font-size: 54px; display: block; } .objet-emoji.grand { font-size: 70px; }
.chronique { list-style: none; padding: 0; margin: 0; position: relative; }
.chronique::before { content: ''; position: absolute; left: 25px; top: 0; bottom: 0; width: 4px; background: #E2E8F0; border-radius: 2px; }
.chronique li { display: flex; gap: 14px; margin-bottom: 12px; position: relative; }
.chronique-icone { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--carte); display: grid; place-items: center; font-size: 26px; box-shadow: var(--ombre-douce); z-index: 1; }
.chronique li > div { background: var(--carte); border-radius: 18px; padding: 10px 14px; box-shadow: var(--ombre-douce); flex: 1; }
.chronique p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
/* Rencontres */
.rencontre-perso { left: 22%; }
.rencontre-img { width: 100%; height: auto; }
.rencontre-perso .perso-emoji { font-size: clamp(70px, 14vw, 160px); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .25)); }
.etiquette-perso { position: absolute; left: 4%; top: 6%; background: var(--verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: clamp(16px, 2.4vw, 22px); box-shadow: var(--ombre-douce); }
.etiquette-perso span { font-size: .75em; color: var(--violet); }
.cadeau-objet { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #F5F3FF, #FCE7F3); border: 3px solid #E9D5FF; border-radius: 22px; padding: 12px 18px; max-width: 640px; animation: pop .5s var(--ressort); }
.cadeau-objet p { margin: 4px 0 0; }

/* ---------- Histoires magiques ---------- */
.creer-histoires { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.creation-carte { border: 0; border-radius: 26px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--carte); box-shadow: var(--ombre); transition: transform .15s; }
.creation-carte b { font-size: 24px; } .creation-carte small { font-size: 16px; color: var(--doux); }
.creation-carte.magique { background: var(--magique); color: #fff; box-shadow: 0 7px 0 #6B21A8, var(--ombre-douce); }
.creation-carte.magique small { color: #FCE7F3; }
.creation-carte:disabled { opacity: .55; filter: grayscale(.4); }
.creation-emoji { font-size: 46px; line-height: 1; }
.livre-ruban { position: absolute; top: 10px; left: 10px; background: var(--magique); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.livre.en-cours { box-shadow: 0 0 0 4px rgba(192, 38, 211, .35), var(--ombre); }
.livre-titre small { display: block; font-weight: 500; color: var(--doux); font-size: 13px; }
.carte-label small { display: block; font-weight: 400; font-size: 13px; color: var(--doux); }
.scene-magique .page-persos { position: absolute; left: 0; right: 0; bottom: 3%; height: 78%; display: flex; justify-content: center; align-items: flex-end; gap: 2%; }
.page-heros { height: 100%; animation: flotte 3.4s ease-in-out infinite; } .page-heros svg { height: 100%; width: auto; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.page-heros:nth-child(2) { animation-delay: -1.2s; } .page-heros:nth-child(3) { animation-delay: -2.2s; }
.page-animal { height: 52%; display: flex; align-items: flex-end; } .page-animal > * { max-height: 100%; }
.page-animal img { height: 100%; width: auto; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.page-animal .animal-emoji, .page-animal .perso-emoji { font-size: clamp(56px, 11vw, 120px); line-height: 1; }
.scene-objet { position: absolute; top: 8%; right: 7%; font-size: clamp(40px, 8vw, 84px); animation: scintille 2s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.lecteur-soir .scene { filter: saturate(.75) brightness(.85); }
.lecteur-soir .texte-histoire { background: #1E2A4A; color: #F1F5FF; }
.zone-choix:empty { display: none; }
.zone-choix { display: flex; flex-direction: column; gap: 10px; align-items: center; animation: entree .4s; }
.choix-histoire-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; max-width: 860px; }
.choix-ia { border-color: #E9D5FF; } .choix-ia:hover { border-color: #C084FC; }
.pagination-texte { color: var(--doux); font-weight: 600; }
.livre-magique-anim { font-size: 84px; animation: victoire 1.4s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(123, 44, 191, .35)); }
.parents-detail { width: 100%; max-width: 640px; text-align: left; background: var(--carte); border-radius: 20px; padding: 14px; box-shadow: var(--ombre-douce); }
.parents-detail h3 { font-size: 16px; color: var(--doux); }

@media (max-width: 820px) {
  .emplacements { grid-template-columns: 1fr; max-width: 460px; }
  .emplacement-zone { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "heros num" "heros nom" "heros infos" "jouer jouer"; text-align: left; column-gap: 12px; row-gap: 2px; }
  .emplacement-num { grid-area: num; } .emplacement-nom { grid-area: nom; } .emplacement-heros { grid-area: heros; align-self: center; }
  .emplacement-infos { grid-area: infos; } .emplacement-date { display: none; } .emplacement-jouer { grid-area: jouer; justify-self: stretch; text-align: center; }
  .emplacement.vide { min-height: 90px; flex-direction: row; }
  .fiche { grid-template-columns: 1fr; }
  .vedette-pagaille { height: 85%; }
}
@media (max-width: 480px) {
  .logo h1 { font-size: 40px; }
  .aventure-vedette { height: 130px; }
  .vedette-texte b { font-size: 22px; } .vedette-texte small { font-size: 13px; }
  .btn-fleche { width: 64px; height: 56px; }
}
.voix-actuelle { background: #F1F5FF; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }

/* ---------- Météo du cœur v2 ---------- */
.moments { display: flex; justify-content: center; gap: 8px; background: var(--carte); border-radius: 999px; padding: 6px; align-self: center; box-shadow: var(--ombre-douce); }
.moment { border: 0; background: none; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 17px; }
.moment.actif { background: var(--bleu); color: #fff; box-shadow: 0 3px 0 #1B4C9E; }
.ciel-famille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ciel-carte { --c: #CBD5E1; position: relative; border: 0; border-radius: 26px; padding: 14px 10px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff) 0%, #fff 70%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent), var(--ombre-douce); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; }
.ciel-carte:active { transform: scale(.97); }
.ciel-carte:not(.faite) { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 3px #E2E8F0 inset, var(--ombre-douce); }
.ciel-meteo { position: absolute; top: 8px; right: 10px; font-size: 38px; animation: flotte 3s ease-in-out infinite; }
.ciel-avatar svg { height: 150px; width: auto; }
.ciel-nom { font-weight: 700; font-size: 19px; }
.ciel-emotion { font-size: 15px; font-weight: 600; color: var(--doux); }
.ciel-emotion i { font-style: normal; color: var(--c); letter-spacing: 1px; margin-left: 4px; }
.ciel-carte:not(.faite) .ciel-emotion { background: var(--vert); color: #fff; padding: 6px 12px; border-radius: 999px; }
.decouvrir { align-self: center; }
.calendrier { display: grid; grid-template-columns: 50px repeat(var(--n), minmax(24px, 1fr)); gap: 4px; background: var(--carte); border-radius: 20px; padding: 10px; box-shadow: var(--ombre-douce); align-items: center; overflow-x: auto; }
.cal-jour { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--doux); text-transform: uppercase; }
.cal-jour b { font-size: 14px; color: var(--encre); }
.cal-jour.auj b { background: var(--bleu); color: #fff; border-radius: 999px; padding: 0 6px; }
.cal-qui svg { width: 42px; height: 48px; }
.cal-case { min-height: 40px; background: #F5F8FD; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0; }
.cal-case i { font-style: normal; font-size: 13px; width: 22px; height: 18px; border-radius: 6px; display: grid; place-items: center; line-height: 1; }
.tendances { display: flex; flex-direction: column; gap: 10px; background: var(--carte); border-radius: 20px; padding: 14px; box-shadow: var(--ombre-douce); }
.tendance { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; }
.tendance-qui { font-weight: 700; }
.tendance-barre { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: #EEF2F9; }
.tendance-barre span { display: grid; place-items: center; font-size: 15px; min-width: 6px; }
.tendance-texte { font-size: 14px; color: var(--doux); white-space: nowrap; }
.meteo-rituel { align-items: center; }
.roue-zone { width: min(420px, 88vw); }
.roue { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(31, 42, 68, .18)); }
.roue .segment { cursor: pointer; transition: transform .35s var(--ressort); }
.roue .segment path { stroke: #fff; stroke-width: 3; transition: filter .2s; }
.roue .segment:hover path { filter: brightness(1.08); }
.roue .segment.actif path { stroke-width: 5; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.roue .segment text { pointer-events: none; }
.roue .aiguille { transform-origin: 160px 160px; transition: transform .7s var(--ressort); }
.roue .aiguille.cache { opacity: 0; }
.roue-centre { width: 100px; height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.roue-centre svg { width: 96px; height: 106px; }
.roue-etiquette { font-size: 22px; font-weight: 600; text-align: center; min-height: 30px; }
.nuances { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; animation: entree .3s; }
.nuances > span { color: var(--doux); font-weight: 600; }
.puce { border: 2px solid #E2E8F0; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 16px; }
.puce.choisi { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.thermo-zone { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 48px); flex-wrap: wrap; padding-left: clamp(40px, 10vw, 90px); }
.thermo-visage { width: 180px; transform: scale(var(--echelle, 1)); transition: transform .35s var(--ressort); }
.thermo-visage svg { width: 100%; height: auto; }
.thermo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 46px; background: #fff; border-radius: 40px; box-shadow: var(--ombre-douce); }
.thermo-niveau { --c: #FCBF49; border: 0; width: 230px; height: 46px; border-radius: 16px; background: #EEF2F9; font-weight: 700; font-size: 16px; color: var(--doux); text-align: left; padding: 0 16px; transition: background .25s, color .25s; }
.thermo-niveau.plein { background: var(--c); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.thermo-bulle { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; }
.corps-zone { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.corps-avatar { position: relative; width: min(280px, 70vw); }
.corps-avatar > svg.avatar { width: 100%; height: auto; opacity: .92; }
.corps-cibles { position: absolute; inset: 0; width: 100%; height: 100%; }
.cible { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; cursor: pointer; transition: all .2s; }
.cible:hover { fill: rgba(255, 255, 255, .5); }
.cible.active { fill: var(--c); fill-opacity: .55; stroke: var(--c); stroke-dasharray: none; stroke-width: 3; animation: pulse 1.2s infinite; transform-box: fill-box; transform-origin: center; }
.corps-liste { display: flex; flex-direction: column; gap: 8px; }
.causes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; width: 100%; max-width: 820px; }
.cause { border: 3px solid transparent; background: var(--carte); border-radius: 20px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--ombre-douce); }
.cause span { font-size: 38px; } .cause small { font-weight: 600; color: var(--encre); font-size: 14px; text-align: center; }
.cause.choisi { border-color: var(--bleu); background: #F0F6FF; }
.note-parent { width: 100%; max-width: 820px; }
.explication-emotion { --c: #FCBF49; background: color-mix(in srgb, var(--c) 18%, #fff); border-left: 6px solid var(--c); border-radius: 16px; padding: 12px 16px; font-size: 19px; line-height: 1.4; max-width: 760px; margin: 0; }
.outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; max-width: 820px; }
.outil { border: 0; background: var(--carte); border-radius: 22px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--ombre); transition: transform .15s; }
.outil span { font-size: 46px; } .outil small { font-weight: 700; color: var(--encre); font-size: 15px; text-align: center; }
.outil:active { transform: scale(.96); }
.respiration { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ballon-respi { --c: #60A5FA; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--c); display: grid; place-items: center; font-size: 50px; transition: transform 4.2s ease-in-out; box-shadow: 0 16px 30px rgba(0, 0, 0, .15); }
.ballon-respi.gonfle { transform: scale(2); transition-duration: 4.2s; }
.ballon-respi.degonfle { transform: scale(1); transition-duration: 4.6s; }
.respi-texte { font-size: 26px; font-weight: 700; margin: 60px 0 0; text-align: center; }
.respi-tours { font-size: 22px; color: var(--bleu); letter-spacing: 4px; }
.bougies { display: flex; gap: clamp(10px, 3vw, 26px); justify-content: center; align-items: flex-end; padding: 30px 0 10px; }
.bougie { border: 0; background: none; display: flex; flex-direction: column; align-items: center; padding: 0; }
.flamme { font-size: 40px; animation: flamme .5s ease-in-out infinite alternate; transform-origin: bottom center; transition: opacity .3s, transform .3s; }
@keyframes flamme { to { transform: scale(1.1, .92) rotate(3deg); } }
.cire { width: 30px; height: 90px; border-radius: 8px; background: repeating-linear-gradient(135deg, #F9A8D4 0 10px, #FBCFE8 10px 20px); box-shadow: inset -4px 0 0 rgba(0, 0, 0, .08); }
.bougie.eteinte .flamme { opacity: 0; transform: translateY(-20px) scale(.4); }
.bougie.eteinte .cire::before { content: '💨'; display: block; text-align: center; margin-top: -34px; font-size: 26px; }
.compteur-saut { display: flex; align-items: center; gap: 30px; }
.compteur-saut .nombre { font-size: clamp(90px, 18vw, 160px); font-weight: 700; color: var(--bleu); min-width: 1.2em; text-align: center; }
.saut-avatar svg { height: 220px; width: auto; }
.boing { animation: boing .5s var(--ressort); }
@keyframes boing { 40% { transform: translateY(-40px) scale(1.08); } }
.outil-carte { background: var(--carte); border-radius: 26px; padding: 24px; max-width: 560px; text-align: center; box-shadow: var(--ombre); }
.outil-emoji { font-size: 90px; display: block; animation: victoire 1.4s ease-in-out infinite; }
.outil-carte p { font-size: 21px; line-height: 1.45; }
.resume-meteo { --c: #FCBF49; display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff), #fff 70%); border-radius: 28px; padding: 18px; box-shadow: var(--ombre); max-width: 860px; width: 100%; }
.resume-avatar svg { width: 100%; height: auto; animation: flotte 3s ease-in-out infinite; }
.resume-phrase { font-size: 21px; line-height: 1.45; font-weight: 600; margin: 0 0 12px; }
.mot-qg { background: #fff; border-radius: 20px; padding: 12px 16px; border: 3px solid color-mix(in srgb, var(--c) 45%, #fff); }
.mot-qg-titre { font-weight: 700; color: var(--violet); margin-bottom: 4px; }
.mot-qg-texte p { margin: 6px 0; font-size: 18px; line-height: 1.4; }
.mot-question { color: #9A6B00; font-weight: 600; }
.mot-astuce { color: var(--vert); font-weight: 600; }
.decouverte { --c: #FCBF49; background: color-mix(in srgb, var(--c) 18%, #fff); border-radius: 24px; padding: 14px 18px; max-width: 700px; box-shadow: var(--ombre-douce); animation: entree .3s; }
.decouverte-titre { font-size: 26px; font-weight: 700; } .decouverte-titre span { font-size: 17px; color: var(--doux); }
.decouverte p { font-size: 19px; line-height: 1.45; }
@media (max-width: 700px) {
  .resume-meteo { grid-template-columns: 1fr; text-align: center; }
  .resume-avatar { width: 170px; margin: 0 auto; }
  .tendance { grid-template-columns: 70px 1fr; } .tendance-texte { grid-column: 1 / -1; }
  .thermo-niveau { width: 200px; }
}

/* ---------- La bande des émotions ---------- */
.perso-emo { display: inline-flex; align-items: flex-end; justify-content: center; width: 96px; height: 96px; }
.perso-emo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.perso-emo.mini { width: 40px; height: 40px; vertical-align: middle; }
.perso-emo.grand { width: min(300px, 62vw); height: min(300px, 62vw); }
.anim-perso-saute img { animation: joie .9s ease-in-out infinite; }
.anim-perso-flotte img { animation: flotte 3s ease-in-out infinite; }
.anim-perso-pop img { animation: surprise 1.6s ease-in-out infinite; }
.anim-perso-triste img { animation: triste 3s ease-in-out infinite; transform-origin: bottom center; }
.anim-perso-tape img { animation: tape-pied .7s ease-in-out infinite; transform-origin: bottom center; }
.anim-perso-tremble img { animation: tremble .2s linear infinite; }
.anim-perso-secoue img { animation: beurk 1.4s ease-in-out infinite; transform-origin: bottom center; }
.anim-perso-dodo img { animation: dodo 3.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes tape-pied { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-4deg) translateY(-6px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(4deg) translateY(-6px); } }
@keyframes beurk { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg) scale(.96); } 60% { transform: rotate(6deg); } }
@keyframes dodo { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(4px); } }
.mission-emoji img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.bande { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.bande-carte { --c: #FCBF49; border: 0; border-radius: 26px; padding: 14px 8px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 32%, #fff), #fff 75%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 50%, transparent), var(--ombre-douce); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s var(--ressort); }
.bande-carte .perso-emo { width: 110px; height: 110px; }
.bande-carte b { font-size: 20px; } .bande-carte small { color: var(--doux); font-weight: 600; font-size: 15px; }
.bande-carte:active { transform: scale(.95); }
@media (hover: hover) { .bande-carte:hover { transform: translateY(-4px) rotate(-1deg); } }
.bande-livre .perso-emo { width: 80px; height: 80px; }
.grondin-btn { align-self: center; background: linear-gradient(135deg, #EF4444, #B91C1C); color: #fff; box-shadow: 0 6px 0 #7F1D1D; }
.fiche-emo { --c: #FCBF49; display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 25%, #fff), #fff 70%); border-radius: 30px; padding: 20px; box-shadow: var(--ombre); max-width: 960px; text-align: left; }
.fiche-emo-perso { position: relative; border: 0; background: none; padding: 0; }
.fiche-emo-perso.reagit .perso-emo img { animation: boing .5s var(--ressort); }
.fiche-emo-texte h2 { font-size: 34px; color: var(--encre); } .fiche-emo-texte h2 small { font-size: 17px; color: var(--doux); display: block; margin-top: 2px; }
.fiche-emo-texte p { font-size: 19px; line-height: 1.45; }
.bulle-cri { position: absolute; top: 2%; right: -4%; background: #fff; border-radius: 18px; padding: 6px 14px; font-weight: 700; font-size: 20px; box-shadow: var(--ombre-douce); animation: pop .5s var(--ressort), sautille 1.4s .5s infinite; white-space: nowrap; }
.miroir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--carte); border-radius: 22px; padding: 10px 16px; box-shadow: var(--ombre-douce); }
.miroir-titre { font-weight: 700; color: var(--doux); }
.miroir-avatar svg { width: 80px; height: 90px; }
.roue-etiquette { display: flex; align-items: center; justify-content: center; gap: 10px; }
.roue-perso .perso-emo { width: 76px; height: 76px; }
.thermo-visage { position: relative; }
.thermo-perso { position: absolute; left: -48%; bottom: -10%; }
.thermo-perso .perso-emo { width: 110px; height: 110px; }
.respi-duo { display: flex; align-items: center; gap: 70px; }
.respi-perso .perso-emo { width: 150px; height: 150px; }
.resume-avatar { position: relative; }
.resume-perso { position: absolute; right: -14%; bottom: -6%; } .resume-perso .perso-emo { width: 100px; height: 100px; }
.visite-emotion { position: absolute; left: 50%; top: 6%; width: 22%; animation: arrive-haut .7s var(--ressort) both; z-index: 3; }
.visite-emotion .perso-emo { width: 100%; height: auto; aspect-ratio: 1; }
.visite-emotion .bulle-cri { right: -30%; font-size: clamp(14px, 2vw, 20px); }
@keyframes arrive-haut { from { transform: translateY(-140%) scale(.6); opacity: 0; } }
/* Mini-jeu : calmer Grondin */
.consigne-grondin { font-size: clamp(20px, 3vw, 28px); font-weight: 700; text-align: center; margin: 0; }
.grondin-scene { display: flex; align-items: center; justify-content: center; gap: 30px; }
.thermo-colere { position: relative; width: 34px; height: 240px; background: #fff; border-radius: 999px; box-shadow: var(--ombre-douce); overflow: hidden; display: flex; align-items: flex-end; }
.thermo-colere-niveau { width: 100%; background: linear-gradient(0deg, #F87171, #DC2626); border-radius: 999px; transition: height .5s var(--ressort); }
.thermo-colere span { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 26px; }
.grondin { position: relative; border: 0; background: none; padding: 0; width: min(320px, 64vw); aspect-ratio: 1; cursor: pointer; }
.grondin img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .2)); animation: tape-pied .7s ease-in-out infinite; transform-origin: bottom center; transition: filter .3s; }
.grondin.tres-fache img { animation: tremble .15s linear infinite; filter: drop-shadow(0 0 22px rgba(239, 68, 68, .8)); }
.grondin.calme img { animation: flotte 3s ease-in-out infinite; }
.grondin.boing img { animation: boing .45s var(--ressort); }
.vapeur { position: absolute; top: 14%; font-size: 40px; opacity: 0; pointer-events: none; }
.vapeur.v1 { left: -4%; } .vapeur.v2 { right: -4%; transform: scaleX(-1); }
.grondin.tres-fache .vapeur { animation: vapeur 1s ease-out infinite; }
.grondin.tres-fache .vapeur.v2 { animation-delay: .5s; }
@keyframes vapeur { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.3); } }
.zone-souffle { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: entree .4s; }
.zone-souffle.cache { display: none; }
.ballon-souffle { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), #F87171; display: grid; place-items: center; font-size: 34px; transition: transform 4.5s ease-out; }
.ballon-souffle.gonfle { transform: scale(2.2); }
.ballon-souffle.degonfle { transform: scale(1); transition-duration: 1.6s; }
.btn-souffle { border: 0; border-radius: 999px; padding: 18px 28px; font-size: 20px; font-weight: 700; background: linear-gradient(135deg, #60A5FA, #2563EB); color: #fff; box-shadow: 0 6px 0 #1E3A8A; margin-top: 50px; touch-action: none; user-select: none; -webkit-user-select: none; }
.btn-souffle.appuye { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 #1E3A8A; background: linear-gradient(135deg, #93C5FD, #3B82F6); }
.souffles { font-size: 30px; letter-spacing: 4px; min-height: 36px; }
@media (max-width: 700px) {
  .fiche-emo { grid-template-columns: 1fr; text-align: center; }
  .respi-duo { flex-direction: column; gap: 40px; }
  .thermo-perso { left: -30%; }
}

/* =========================================================
   V3 — Immersion : ciel vivant, QG illustré, karaoké, récompenses, puzzles
   ========================================================= */
/* ---------- Ciel vivant ---------- */
html { background: #CFE8FF; }
#ciel { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: background 2s; background: linear-gradient(180deg, #8EC5FF 0%, #CFE8FF 55%, #FFF6E5 100%); }
body[data-moment="matin"] #ciel { background: linear-gradient(180deg, #A5D8FF 0%, #FFE4C7 60%, #FFF1E0 100%); }
body[data-moment="soir"] #ciel { background: linear-gradient(180deg, #5B5BD6 0%, #F49AC1 45%, #FFC38A 80%, #FFE3C2 100%); }
body[data-moment="nuit"] #ciel { background: linear-gradient(180deg, #0B1240 0%, #1E2A6E 50%, #3B3F8F 100%); }
#ciel .astre { position: absolute; top: 6vh; right: 8vw; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #FFF7C2 0%, #FFD45C 60%, rgba(255, 212, 92, 0) 72%); box-shadow: 0 0 80px 30px rgba(255, 220, 120, .45); transition: all 2s; }
body[data-moment="matin"] #ciel .astre { top: 18vh; right: 78vw; }
body[data-moment="soir"] #ciel .astre { top: 40vh; background: radial-gradient(circle, #FFE8C2 0%, #FF9E5C 62%, rgba(255, 158, 92, 0) 72%); box-shadow: 0 0 90px 40px rgba(255, 140, 90, .4); }
body[data-moment="nuit"] #ciel .astre { width: 70px; height: 70px; background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #E8ECFF 55%, rgba(232, 236, 255, 0) 70%); box-shadow: 0 0 60px 18px rgba(200, 210, 255, .35); }
#ciel .nuage { position: absolute; width: 220px; opacity: .85; animation: derive linear infinite; filter: drop-shadow(0 6px 10px rgba(80, 110, 160, .15)); }
#ciel .n1 { top: 8%; animation-duration: 95s; } #ciel .n2 { top: 22%; width: 160px; animation-duration: 120s; animation-delay: -40s; opacity: .7; }
#ciel .n3 { top: 40%; width: 260px; animation-duration: 150s; animation-delay: -90s; opacity: .55; } #ciel .n4 { top: 62%; width: 180px; animation-duration: 110s; animation-delay: -20s; opacity: .45; }
#ciel .n5 { top: 78%; width: 300px; animation-duration: 170s; animation-delay: -130s; opacity: .4; }
@keyframes derive { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 320px)); } }
body[data-moment="nuit"] #ciel .nuage { opacity: .12; }
body[data-moment="soir"] #ciel .nuage path { fill: #FFE1EC; }
#ciel .etoiles { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
body[data-moment="nuit"] #ciel .etoiles { opacity: 1; } body[data-moment="soir"] #ciel .etoiles { opacity: .3; }
#ciel .etoiles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: scintillement 3s ease-in-out infinite; }
@keyframes scintillement { 50% { opacity: .2; } }
body[data-moment="nuit"] .barre h1 { color: #FFE27A; text-shadow: 0 3px 0 #1E1B4B, 0 6px 16px rgba(0, 0, 0, .35); }
body[data-moment="soir"] .barre h1 { color: #fff; text-shadow: 0 3px 0 #4338CA, 0 6px 16px rgba(67, 56, 202, .35); }
body[data-moment="soir"] .titre-bloc { color: #1E1B4B; }
body[data-moment="nuit"] .titre-bloc, body[data-moment="nuit"] .consigne-douce, body[data-moment="nuit"] .question:not(.modale .question) { color: #F1F5FF; }
body[data-moment="nuit"] .bloc { background: rgba(255, 255, 255, .85); }
body[data-moment="nuit"] .bloc .titre-bloc { color: var(--encre); }
#poussiere { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1200; }

/* Cartes en 3D */
.incline { transition: transform .08s linear !important; position: relative; }
.incline::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--brillance-x) var(--brillance-y), rgba(255, 255, 255, .35), transparent 55%); }

/* ---------- Sous-titres + karaoké ---------- */
#sous-titres { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 1100; display: flex; align-items: center; gap: 12px; max-width: min(860px, 94vw); padding: 10px 18px 10px 10px; border-radius: 26px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 14px 40px rgba(31, 42, 68, .22), inset 0 0 0 2px rgba(255, 255, 255, .9); transition: transform .35s var(--ressort), opacity .3s; opacity: 0; cursor: pointer; }
#sous-titres.visible { transform: translate(-50%, 0); opacity: 1; }
.st-perso { width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.st-perso img { width: 54px; height: 54px; object-fit: contain; } .st-perso .animal-emoji { font-size: 40px; }
#sous-titres.parle .st-perso { animation: parle .35s ease-in-out infinite alternate; }
@keyframes parle { to { transform: translateY(-3px) scale(1.06, .96); } }
.st-texte { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.35; font-weight: 600; color: var(--doux); }
.mot { transition: color .12s, background .12s; border-radius: 6px; padding: 0 1px; }
.mot.lu { color: var(--encre); }
.mot.actif { color: #fff; background: var(--violet); box-shadow: 0 2px 0 #541C85; }
.karaoke .mot { color: inherit; }
.karaoke .mot.lu { color: var(--encre); }
.karaoke .mot.actif { color: #fff; background: var(--violet); }
.lecteur-soir .karaoke .mot.lu { color: #fff; }

/* ---------- Le QG illustré ---------- */
.qg-scene { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(31, 42, 68, .25), 0 0 0 4px rgba(255, 255, 255, .7); margin-bottom: 18px; aspect-ratio: 3 / 2; max-height: 72vh; margin-inline: auto; }
.qg-fond { width: 100%; height: 100%; object-fit: cover; display: block; }
.qg-lumiere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, rgba(255, 240, 200, .25), transparent 60%); animation: respire 8s ease-in-out infinite alternate; mix-blend-mode: screen; }
body[data-moment="nuit"] .qg-lumiere { background: linear-gradient(180deg, rgba(20, 30, 90, .35), rgba(20, 30, 90, .15)), radial-gradient(ellipse at 50% 60%, rgba(255, 200, 120, .25), transparent 60%); mix-blend-mode: normal; }
body[data-moment="soir"] .qg-lumiere { background: linear-gradient(180deg, rgba(255, 140, 120, .18), transparent 70%); }
.qg-heros { position: absolute; left: 38%; bottom: 3%; height: 34%; display: flex; align-items: flex-end; pointer-events: none; z-index: 2; }
.qg-heros-un { height: 100%; margin-left: -2%; animation: flotte 3.4s ease-in-out infinite; } .qg-heros-un:nth-child(2) { animation-delay: -1.1s; } .qg-heros-un:nth-child(3) { animation-delay: -2.2s; }
.qg-heros-un.petit { height: 86%; }
.qg-heros-un svg { height: 100%; width: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.qg-chat { position: absolute; z-index: 3; cursor: pointer; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .25)); transition: transform .2s; }
.qg-chat.qg-animal-0 { left: 46.5%; top: 57%; width: 9.5%; animation: dodo 4s ease-in-out infinite; transform-origin: bottom center; }
.qg-chat.qg-animal-1 { left: 77%; top: 5%; width: 7%; animation: flotte 3s ease-in-out infinite; }
.qg-chat.qg-animal-2 { left: 14%; top: 13%; width: 6.5%; animation: flotte 3.6s ease-in-out infinite .4s; }
.qg-animal-emoji { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; font: inherit; color: #fff; }
.qg-animal-emoji span { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; }
.qg-animal-emoji small { font-weight: 800; font-size: clamp(.65rem, 1.1vw, .9rem); background: rgba(15, 23, 42, .55); padding: .1em .6em; border-radius: 99px; backdrop-filter: blur(6px); }
.hero-logo .logo-ligne { display: inline-flex; align-items: center; justify-content: center; gap: .15em; }
.hero-logo .logo-mascotte { height: 1.3em; width: auto; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.qg-chat.miaou { animation: boing .5s var(--ressort); }
.qg-zone { position: absolute; border: 0; background: transparent; border-radius: 22px; padding: 0; z-index: 1; cursor: pointer; transition: background .2s, box-shadow .2s; }
.qg-zone:hover, .qg-zone:focus-visible { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), 0 0 30px rgba(255, 230, 150, .6); }
.qg-zone.touchee { background: rgba(255, 255, 255, .35); }
.qg-zone-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(34px, 5vw, 54px); height: clamp(34px, 5vw, 54px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(18px, 2.8vw, 28px); background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 0 4px rgba(255, 255, 255, .45); animation: badge-qg 2.4s ease-in-out infinite; }
.qg-zone:nth-of-type(2n) .qg-zone-badge { animation-delay: -1.2s; }
@keyframes badge-qg { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -62%) scale(1.08); } }
.qg-zone-titre { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) translateY(6px); background: rgba(31, 42, 68, .85); color: #fff; font-weight: 700; font-size: clamp(11px, 1.4vw, 15px); padding: 4px 10px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: all .2s; pointer-events: none; }
.qg-zone:hover .qg-zone-titre, .qg-zone:focus-visible .qg-zone-titre { opacity: 1; transform: translateX(-50%) translateY(0); }
body.mode-tactile .qg-zone.touchee .qg-zone-titre { opacity: .95; transform: translateX(-50%); }
.qg-scene .grade-badge { z-index: 4; }
.serie-badge { position: absolute; right: 12px; bottom: 12px; z-index: 4; background: linear-gradient(135deg, #FFB347, #FF5E62); color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: var(--ombre-douce); line-height: 1; }
.titre-activites { margin-top: 10px; }
.coffre-carte { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; border-radius: 22px; padding: 12px 18px; margin-bottom: 18px; background: linear-gradient(135deg, #FDE68A, #F59E0B); box-shadow: 0 6px 0 #B45309, var(--ombre-douce); animation: pop .5s var(--ressort), toctoc 2s 1s ease-in-out infinite; color: #4A2B00; }
.coffre-carte b { display: block; font-size: 21px; } .coffre-carte small { font-size: 15px; color: #6B3E00; }
.coffre-carte-emoji { font-size: 44px; animation: sautille 1.2s infinite; }
.coffre-modale { background: radial-gradient(circle at 50% 30%, #FFF7D6, #fff 70%); }
.coffre { font-size: 120px; cursor: pointer; display: inline-block; animation: tremble .25s linear infinite; filter: drop-shadow(0 12px 14px rgba(180, 120, 0, .35)); }
.coffre.ouvert { animation: victoire 1s ease-in-out infinite; }
.coffre.ouvert .coffre-couvercle { display: inline-block; transform: rotate(-12deg) scale(1.1); }
.coffre-texte { font-size: 22px; }
.btn-plein { background: rgba(255, 255, 255, .85); }

/* ---------- Cérémonies ---------- */
.ceremonie { position: relative; overflow: hidden; padding: 10px 0; }
.ceremonie-rayons { position: absolute; left: 50%; top: 32%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--palier) 45%, transparent) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: tourne 12s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); }
.coupe { position: relative; width: 180px; height: 180px; margin: 0 auto; animation: coupe-arrive .9s var(--ressort) both, victoire 1.6s 1s ease-in-out infinite; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .25)); }
.coupe-svg { width: 100%; height: 100%; }
.coupe-emoji { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); font-size: 46px; z-index: 1; }
@keyframes coupe-arrive { from { transform: translateY(80px) scale(.3) rotate(-20deg); opacity: 0; } }
.ceremonie-palier { position: relative; display: inline-block; background: var(--palier); color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); margin-top: 6px; }
.ceremonie h2, .ceremonie p { position: relative; }
.autocollant-pop .autocollant-carte { display: inline-block; animation: decolle .8s var(--ressort) both; }
@keyframes decolle { from { transform: rotateY(90deg) scale(.4); } to { transform: rotateY(0) scale(1); } }
.autocollant-titre { font-size: 24px; font-weight: 700; color: var(--rose); }
.rarete { color: var(--doux); font-weight: 600; }

/* ---------- Autocollants ---------- */
.autocollant-visuel { width: 88px; height: 88px; border-radius: 22px; display: grid; place-items: center; background: #fff; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); overflow: hidden; position: relative; }
.autocollant-visuel.grand { width: 190px; height: 190px; border-radius: 40px; border-width: 6px; }
.autocollant-visuel img { width: 92%; height: 92%; object-fit: contain; }
.autocollant-visuel.fond { background-size: cover; background-position: center; }
.autocollant-visuel.fond span { font-size: 34px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.autocollant-visuel.grand .autocollant-emoji, .autocollant-visuel.grand.fond span { font-size: 100px; }
.autocollant-emoji { font-size: 50px; }
.autocollant-visuel.silhouette { filter: brightness(0) opacity(.12); }
.rarete-rare .autocollant-visuel, .autocollant-pop.rarete-rare .autocollant-visuel { box-shadow: 0 0 0 4px #60A5FA, 0 6px 16px rgba(96, 165, 250, .45); }
.rarete-legendaire .autocollant-visuel, .autocollant-pop.rarete-legendaire .autocollant-visuel { box-shadow: 0 0 0 4px #F5C518, 0 0 24px rgba(245, 197, 24, .7); }
.rarete-legendaire .autocollant-visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%); animation: reflet 2.4s ease-in-out infinite; }
@keyframes reflet { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.album-bilan { text-align: center; font-size: 18px; }
.album-bilan span { margin-left: 10px; font-weight: 600; }
.album-bilan .rarete-commun { color: #94A3B8; } .album-bilan .rarete-rare { color: #3B82F6; } .album-bilan .rarete-legendaire { color: #D4A106; }
.album-page { background: linear-gradient(180deg, #FFFDF5, #FFF7E0); border-radius: 26px; padding: 14px 16px 18px; box-shadow: var(--ombre-douce), inset 0 0 0 3px #F5E6B8; }
.album-page h2 { font-size: 22px; color: #92400E; margin-bottom: 10px; }
.album-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.autocollant { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
.autocollant small { font-size: 13px; font-weight: 600; text-align: center; }
.autocollant .double { position: absolute; top: -6px; right: 4px; background: var(--rose); color: #fff; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 7px; }
.autocollant:nth-child(3n) .autocollant-visuel { transform: rotate(-3deg); } .autocollant:nth-child(3n+1) .autocollant-visuel { transform: rotate(2deg); }

/* ---------- Salle des trophées ---------- */
.trophees-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: center; }
.trophees-bilan > div { background: var(--carte); border-radius: 20px; padding: 12px; text-align: center; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; }
.trophees-bilan b { font-size: 26px; }
.etagere { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 14px; border-radius: 24px; background: linear-gradient(180deg, #7C4A21 0%, #5E3618 100%); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .2), var(--ombre-douce); }
.trophee { --palier: #CBD5E1; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .95); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: transform .15s; }
.trophee b { font-size: 15px; line-height: 1.2; }
.trophee small { font-size: 12px; color: var(--doux); }
.trophee-socle { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, var(--palier) 70%); box-shadow: 0 6px 0 color-mix(in srgb, var(--palier) 70%, #000), 0 10px 18px rgba(0, 0, 0, .2); }
.trophee-emoji { font-size: 38px; }
.trophee.verrouille .trophee-socle { filter: grayscale(1); opacity: .55; }
.trophee.obtenu .trophee-socle { animation: brille 3s ease-in-out infinite; }
@keyframes brille { 50% { box-shadow: 0 6px 0 color-mix(in srgb, var(--palier) 70%, #000), 0 0 26px var(--palier); } }
.trophee-paliers { display: flex; gap: 5px; } .trophee-paliers i { width: 14px; height: 14px; border-radius: 50%; background: #E2E8F0; } .trophee-paliers i.ok { background: var(--c); box-shadow: 0 0 6px var(--c); }
.trophee .jauge { width: 100%; height: 8px; margin: 0; } .trophee .jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--jaune), var(--or)); border-radius: 999px; }

/* ---------- Diplôme ---------- */
.diplome { width: min(820px, 100%); background: #FFFDF5; padding: 18px; border-radius: 10px; box-shadow: var(--ombre); }
.diplome-cadre { border: 6px double #C9A227; border-radius: 8px; padding: 26px 22px; text-align: center; position: relative; background: radial-gradient(circle at 50% 30%, #FFF8E1, #FFFDF5 70%); }
.diplome-sceau { position: absolute; top: 16px; right: 18px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #FDE68A, #D4A106); display: grid; place-items: center; font-size: 40px; box-shadow: 0 0 0 6px #FEF3C7; }
.diplome-sur { font-size: 18px; color: #92400E; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.diplome-heros svg { height: 170px; width: auto; }
.diplome h1 { font-size: clamp(32px, 6vw, 52px); color: var(--bleu); margin: 4px 0; }
.diplome-titre { font-size: 22px; } .diplome-titre b { color: #B45309; }
.diplome-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; font-weight: 600; margin: 12px 0; }
.diplome-signatures { display: flex; justify-content: space-around; margin-top: 30px; }
.diplome-signatures span { border-top: 2px solid #C9A227; padding-top: 6px; min-width: 160px; font-weight: 600; color: #92400E; }
.diplome-date { color: var(--doux); }
@media print {
  body > *:not(#app), #app .barre, #app .actions, #ciel, #poussiere, #sous-titres, .toast { display: none !important; }
  body, html { background: #fff !important; }
  .ecran { padding: 0 !important; animation: none !important; }
  .diplome { box-shadow: none; width: 100%; }
}

/* ---------- Puzzles ---------- */
.puzzle-banniere { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #22D3EE, #0891B2); color: #fff; border-radius: 26px; padding: 16px 20px; box-shadow: 0 8px 0 #0E7490, var(--ombre-douce); }
.puzzle-banniere b { display: block; font-size: 26px; } .puzzle-banniere small { color: #E0F7FF; font-size: 16px; }
.puzzle-banniere-emoji { font-size: 60px; animation: victoire 2s ease-in-out infinite; }
.themes-puzzle { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.theme-puzzle { border: 4px solid transparent; background: var(--carte); border-radius: 22px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--ombre-douce); transition: transform .15s var(--ressort); }
.theme-puzzle span { font-size: 44px; } .theme-puzzle small { font-weight: 700; color: var(--encre); font-size: 14px; text-align: center; }
.theme-puzzle.choisi { border-color: #0891B2; background: #ECFEFF; transform: scale(1.05); }
.idee-puzzle { background: var(--carte); border-radius: 20px; padding: 12px 16px; box-shadow: var(--ombre-douce); }
.idee-puzzle .champ { max-width: 100%; }
.niveaux-puzzle { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.niveau-puzzle { border: 4px solid transparent; background: var(--carte); border-radius: 20px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--ombre-douce); }
.niveau-puzzle b { font-size: 22px; } .niveau-puzzle small { color: var(--doux); font-weight: 600; }
.niveau-puzzle.choisi { border-color: #0891B2; background: #ECFEFF; }
.mini-grille { display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); gap: 2px; width: 60px; height: 40px; }
.mini-grille i { background: linear-gradient(135deg, #67E8F9, #0891B2); border-radius: 2px; }
.options-puzzle { justify-content: center; }
.peintre { font-size: 90px; animation: peindre 1.2s ease-in-out infinite; }
@keyframes peindre { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg) translateY(-10px); } }
.jeu-puzzle { align-items: center; }
.barre-puzzle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.compte-puzzle { background: var(--carte); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 18px; box-shadow: var(--ombre-douce); }
.table-puzzle { width: 100%; position: relative; overflow: visible; }
.table { position: absolute; left: 50%; top: 0; transform-origin: top left; margin-left: 0; }
.table-puzzle { display: flex; justify-content: center; }
.table-puzzle .table { position: relative; left: auto; flex: none; transform-origin: top center; }
.plateau { position: absolute; border-radius: 10px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 30px rgba(31, 42, 68, .18); overflow: hidden; }
.puzzle-fantome { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s; filter: grayscale(.3); }
.puzzle-fantome.visible { opacity: .28; }
.grille-aide { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); }
.grille-aide i { border: 2px dashed rgba(31, 42, 68, .18); }
.piece { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); transition: transform .18s ease-out, filter .2s; will-change: transform; animation: piece-arrive .5s var(--ressort) both; }
@keyframes piece-arrive { from { opacity: 0; } }
.piece.saisie { cursor: grabbing; transition: none; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .35)); }
.piece.placee { cursor: default; filter: none; pointer-events: none; animation: place .35s var(--ressort); }
@keyframes place { 50% { filter: brightness(1.25) drop-shadow(0 0 12px #fff); } }
.piece.indice { animation: indice 1.6s ease-in-out; }
@keyframes indice { 0%, 100% { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); } 25%, 75% { filter: drop-shadow(0 0 18px #FDE047) brightness(1.2); } }
.cible-indice { position: absolute; border-radius: 8px; box-shadow: 0 0 0 4px #FDE047, 0 0 30px #FDE047; background: rgba(253, 224, 71, .25); animation: pulse .6s ease-in-out 3; pointer-events: none; z-index: 500; }
.piece.fondue { opacity: 0; transition: opacity .8s .3s; }
.puzzle-complet { position: absolute; inset: 0; background-size: cover; background-position: center; animation: revele 1s ease-out both; }
.puzzle-complet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); animation: reflet 1.4s .6s ease-in-out 2; }
@keyframes revele { from { opacity: 0; filter: brightness(1.6); } }
.fin-puzzle { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pret { font-size: 14px; }
.galerie-puzzles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tableau { border: 0; background: #fff; border-radius: 10px; padding: 10px 10px 8px; box-shadow: 0 0 0 6px #A16207, 0 0 0 9px #FDE68A, var(--ombre); display: flex; flex-direction: column; gap: 6px; transition: transform .15s; }
.tableau:nth-child(2n) { transform: rotate(1deg); } .tableau:nth-child(3n) { transform: rotate(-1.2deg); }
.tableau-image { aspect-ratio: 3 / 2; background-size: cover; background-position: center; border-radius: 4px; }
.tableau small { font-weight: 600; color: var(--doux); }
.tableau-grand { width: 100%; border-radius: 16px; }
@media (max-width: 700px) {
  .qg-scene { border-radius: 20px; }
  .qg-zone-titre { display: none; }
}
.avatar { overflow: visible; }

/* =========================================================
   V4 — Accueil plein écran « Hero », lisibilité, finitions
   ========================================================= */
.ecran-accueil { max-width: none; padding: 0; }
.hero-qg { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #2B1A0E; isolation: isolate; }
.hero-scroller { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hero-scroller::-webkit-scrollbar { display: none; }
.hero-stage { position: relative; flex: none; width: max(100vw, 150dvh); height: max(100dvh, 66.667vw); aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; box-shadow: none; transition: transform .25s ease-out; animation: entree-hero 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.hero-qg:not(.panorama) .hero-stage { margin: 0 auto; }
@keyframes entree-hero { from { transform: scale(1.12); filter: blur(6px) brightness(.7); } }
.hero-stage .qg-fond { width: 100%; height: 100%; object-fit: cover; }
.couche-perso { position: absolute; inset: 0; pointer-events: none; transition: transform .25s ease-out; }
.couche-perso .qg-chat { pointer-events: auto; }
.hero-stage .qg-zone { animation: zone-arrive .6s calc(.6s + var(--i) * .07s) var(--ressort) both; }
@keyframes zone-arrive { from { opacity: 0; transform: scale(.6); } }
.hero-stage .qg-zone-badge { width: clamp(42px, 4.6vw, 64px); height: clamp(42px, 4.6vw, 64px); font-size: clamp(22px, 2.6vw, 32px); }
/* Voile en haut et en bas pour la lisibilité des barres */
.hero-qg::before, .hero-qg::after { content: ''; position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; }
.hero-qg::before { top: 0; height: 140px; background: linear-gradient(180deg, rgba(15, 20, 45, .55), transparent); }
.hero-qg::after { bottom: 0; height: 180px; background: linear-gradient(0deg, rgba(15, 20, 45, .6), transparent); }
.hero-barre { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.hero-outils, .hero-statut { display: flex; gap: 8px; align-items: center; flex: 1; }
.hero-statut { justify-content: flex-end; }
.btn-verre { width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); color: #fff; font-size: 22px; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: transform .15s, background .2s; position: relative; }
.btn-verre:hover { background: rgba(255, 255, 255, .3); } .btn-verre:active { transform: scale(.94); }
.btn-verre.maintien::after { content: ''; position: absolute; inset: -4px; border-radius: 19px; border: 4px solid #4ADE80; animation: remplir 1.5s linear forwards; }
.pastille-verre { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.hero-barre .compteur { height: 44px; display: inline-flex; align-items: center; }
.hero-logo { flex: 2; text-align: center; color: #fff; font-size: clamp(22px, 3.4vw, 40px); line-height: 1; text-shadow: 0 3px 0 #1E3A8A, 0 8px 24px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 4px; }
.hero-logo small { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .85); font-weight: 600; text-shadow: none; }
.hero-notifs { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 64px); right: max(16px, env(safe-area-inset-right)); z-index: 10; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; max-width: min(360px, 80vw); }
.hero-notifs .coffre-carte, .hero-notifs .toctoc { margin: 0; width: auto; padding: 10px 16px; }
.hero-notifs .coffre-carte b, .hero-notifs .toctoc b { font-size: 18px; }
.hero-indice { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); transform: translateX(-50%); z-index: 10; margin: 0; color: #fff; font-weight: 600; font-size: 15px; background: rgba(15, 20, 45, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 999px; white-space: nowrap; animation: indice-hero 6s 1.5s both; pointer-events: none; }
@keyframes indice-hero { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.si-panorama { display: none; } .panorama .si-panorama { display: inline; }
.hero-dock { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); animation: dock-arrive .7s 1s var(--ressort) both; }
@keyframes dock-arrive { from { transform: translate(-50%, 140%); } }
.dock-btn { border: 0; border-radius: 20px; background: rgba(255, 255, 255, .92); min-width: 78px; padding: 8px 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); transition: transform .15s var(--ressort); }
.dock-btn span { font-size: 28px; line-height: 1; } .dock-btn b { font-size: 13px; color: var(--encre); }
.dock-btn:hover { transform: translateY(-4px) scale(1.04); } .dock-btn:active { transform: scale(.94); }
.dock-plus { background: rgba(255, 255, 255, .55); } .dock-plus span { animation: sautille 1.4s infinite; }
.accueil-suite { max-width: 1120px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (max-width: 700px) {
  .cache-mobile { display: none; }
  .hero-logo { font-size: 20px; } .hero-logo small { display: none; }
  .btn-verre { width: 42px; height: 42px; font-size: 19px; border-radius: 14px; }
  .pastille-verre, .hero-barre .compteur { height: 40px; padding: 0 10px; font-size: 15px; }
  .hero-outils [data-a="plein"] { display: none; }
  .dock-btn { min-width: 58px; padding: 6px 8px 4px; } .dock-btn span { font-size: 24px; } .dock-btn b { font-size: 11px; }
  .hero-stage .qg-zone-badge { width: 52px; height: 52px; font-size: 28px; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .hero-stage .qg-zone-titre { display: block; opacity: .95; transform: translateX(-50%); font-size: 12px; }
}

/* ---------- Lisibilité : les textes posés sur le ciel reçoivent une plaque de verre ---------- */
.jeu > .question, .jeu > .consigne-douce, .jeu > .consigne-grondin, .jeu > .astuce, .jeu > .rappel-texte, .jeu > .consigne,
.jeu > .titre-bloc, .accueil-suite > .titre-bloc, .jeu > .saison + .question, .jeu-action > .astuce, .centre-col > .question {
  align-self: center; width: fit-content; max-width: 100%; margin-inline: auto;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; padding: 8px 18px; box-shadow: 0 6px 20px rgba(31, 42, 68, .1);
  color: var(--encre) !important;
}
.jeu > .titre-bloc, .accueil-suite > .titre-bloc { align-self: flex-start; margin-inline: 0; }
.jeu > .astuce, .jeu-action > .astuce { font-size: 15px; padding: 6px 14px; }
.consigne-grondin { font-size: clamp(20px, 3vw, 26px); }

/* ---------- Finitions « waouh » sobres ---------- */
.barre h1 { letter-spacing: -.3px; }
.btn, .btn-rond, .mission, .carte-choix, .btn-aide, .btn-emotion, .outil, .cause, .theme-puzzle, .niveau-puzzle, .bande-carte, .dock-btn { -webkit-tap-highlight-color: transparent; }
.btn:focus-visible, .mission:focus-visible, .qg-zone:focus-visible, .dock-btn:focus-visible { outline: 4px solid #FDE047; outline-offset: 3px; }
.mission { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000) 100%); }
.mission::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
.mission:hover::after { transform: translateX(120%); }
.modale { border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 80px rgba(15, 20, 45, .35), inset 0 1px 0 #fff; }
.modale-fond { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Missions du jour */
.missions-carte { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 20px; padding: 10px 16px; text-align: left; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); animation: pop .5s .8s var(--ressort) both; }
.missions-carte b { display: block; font-size: 17px; } .missions-carte small { font-size: 15px; letter-spacing: 1px; }
.missions-carte.finies { background: linear-gradient(135deg, #DCFCE7, #BBF7D0); }
.mc-emoji { font-size: 34px; }
.missions-jour { text-align: left; } .missions-jour h2 { text-align: center; }
.mission-jour { width: 100%; display: flex; align-items: center; gap: 12px; border: 3px solid #EEF2F9; background: #fff; border-radius: 18px; padding: 10px 14px; margin: 8px 0; text-align: left; }
.mission-jour.faite { border-color: #86EFAC; background: #F0FDF4; }
.mj-emoji { font-size: 34px; } .mj-texte { flex: 1; display: flex; flex-direction: column; gap: 6px; } .mj-texte b { font-size: 17px; }
.mj-texte .jauge { margin: 0; height: 10px; } .mj-texte .jauge span { display: block; height: 100%; background: linear-gradient(90deg, #4ADE80, #16A34A); border-radius: 999px; }
.mj-etoiles { font-weight: 700; color: #B45309; white-space: nowrap; }
/* Météo : carte avec choix rapide */
.ciel-carte { cursor: default; padding: 0 0 10px; }
.ciel-rituel { border: 0; background: none; width: 100%; padding: 14px 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; border-radius: 26px 26px 0 0; }
.ciel-matin { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 3px 8px; font-size: 14px; box-shadow: var(--ombre-douce); }
.choix-rapide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 8px 0; width: 100%; }
.rapide { --c: #FCBF49; border: 2px solid transparent; background: color-mix(in srgb, var(--c) 18%, #fff); border-radius: 12px; padding: 2px; aspect-ratio: 1; display: grid; place-items: center; transition: transform .12s var(--ressort); }
.rapide img { width: 100%; height: 100%; object-fit: contain; }
.rapide:hover { transform: scale(1.12); } .rapide.choisi { border-color: var(--c); background: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 0 0 2px #fff, 0 0 10px var(--c); }
.ciel-carte:not(.faite) .ciel-emotion { background: var(--vert); color: #fff; padding: 6px 12px; border-radius: 999px; }
body.plein-ecran .btn-plein-ecran { opacity: .7; }
@media (max-width: 480px) { .barre .btn-plein-ecran { display: none; } }
/* Roue des émotions : noms lisibles sur chaque part */
.roue .roue-nom { font: 700 13px Fredoka, 'Arial Rounded MT Bold', Arial, sans-serif; fill: #fff; stroke: rgba(15, 23, 42, .55); stroke-width: 3px; paint-order: stroke; pointer-events: none; letter-spacing: .2px; }
.roue-etiquette, .nuances { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; padding: 8px 16px; box-shadow: 0 6px 20px rgba(31, 42, 68, .12); color: var(--encre); width: fit-content; max-width: 100%; margin-inline: auto; }
.rapide { aspect-ratio: auto; padding: 3px 2px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rapide img { width: 100%; height: auto; aspect-ratio: 1; }
.rapide small { font-size: 9.5px; font-weight: 700; color: var(--encre); line-height: 1.05; text-align: center; }
/* Étapes de la météo : icônes lisibles sur fond sombre */
.etapes span { background: rgba(255, 255, 255, .75); opacity: .85; }

/* ---------- Mini-jeux : aider la bande des émotions ---------- */
.aider-bande { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.aider-btn { --c: #FCBF49; border: 0; border-radius: 22px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), #fff 80%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent), var(--ombre-douce); transition: transform .15s var(--ressort); }
.aider-btn .perso-emo.mini { width: 70px; height: 70px; } .aider-btn b { font-size: 15px; }
.aider-btn:hover { transform: translateY(-3px); }
.aider-scene { --c: #60A5FA; position: relative; width: min(760px, 100%); aspect-ratio: 16 / 10; border-radius: 30px; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 10%, #fff) 70%); box-shadow: var(--ombre), inset 0 0 0 4px rgba(255, 255, 255, .8); transition: background 1.2s, filter 1.2s; }
.aider-perso { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 42%; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; z-index: 2; }
.aider-perso img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .2)); }
.aider-perso.boing img { animation: boing .45s var(--ressort); }
.aider-perso.apaise img { animation: victoire 1.4s ease-in-out infinite; }
.aider-elements { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.aider-elements > * { pointer-events: auto; }
.aider-voile { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s; background: radial-gradient(circle at 50% 55%, rgba(120, 110, 160, .55), rgba(60, 55, 90, .95)); }
.aider-mesure { display: flex; align-items: center; gap: 12px; width: min(520px, 100%); background: rgba(255, 255, 255, .88); border-radius: 999px; padding: 8px 16px; box-shadow: var(--ombre-douce); font-weight: 700; }
.aider-mesure .jauge { flex: 1; margin: 0; height: 14px; } .aider-mesure .jauge div { background: linear-gradient(90deg, #A78BFA, #6366F1); transition: width .5s var(--ressort); }
.aider-objets { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.larme-deco { position: absolute; top: 30%; font-size: 30px; animation: larme 1.8s ease-in infinite; }
.coeur-calin { position: absolute; font-size: 40px; transform: translate(-50%, -50%); animation: monte 1.2s ease-out forwards; pointer-events: none; z-index: 4; }
.lanterne { position: absolute; transform: translate(-50%, 0); border: 0; background: rgba(255, 255, 255, .25); border-radius: 50%; width: clamp(56px, 9vw, 80px); height: clamp(56px, 9vw, 80px); font-size: clamp(30px, 5vw, 44px); filter: grayscale(1) brightness(.7); transition: all .4s; z-index: 4; animation: flotte 3s ease-in-out infinite; }
.lanterne.allumee { filter: none; background: rgba(255, 220, 120, .45); box-shadow: 0 0 40px 18px rgba(255, 200, 80, .55); }
.poubelle { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font-size: clamp(48px, 8vw, 72px); z-index: 4; background: rgba(255, 255, 255, .6); border-radius: 24px; padding: 4px 14px; }
.poubelle.survol { transform: translateX(-50%) scale(1.15); background: #DCFCE7; }
.aider-degout .aider-perso { top: 42%; width: 34%; }
.puanteur { position: absolute; border: 0; background: rgba(255, 255, 255, .6); border-radius: 50%; width: clamp(56px, 9vw, 76px); height: clamp(56px, 9vw, 76px); font-size: clamp(30px, 5vw, 42px); cursor: grab; animation: beurk 1.6s ease-in-out infinite; z-index: 4; }
.puanteur.utilise { visibility: hidden; }
.fleur { position: absolute; bottom: 8%; font-size: clamp(34px, 6vw, 52px); animation: pop .6s var(--ressort) both, flotte 3s 1s ease-in-out infinite; }
.objet-dodo { border: 0; background: var(--carte); border-radius: 22px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--ombre); min-width: 96px; }
.objet-dodo span { font-size: 42px; } .objet-dodo small { font-weight: 700; font-size: 13px; }
.objet-dodo.utilise { opacity: .35; transform: scale(.9); }
.objet-volant { position: fixed; z-index: 1300; font-size: 44px; pointer-events: none; margin: -22px 0 0 -22px; transition: transform .7s cubic-bezier(.4, -0.3, .6, 1), opacity .7s; }
.aider-scene.nuit-dodo { background: radial-gradient(circle at 50% 30%, #3B3F8F, #0B1240 75%); }
.aider-scene.nuit-dodo .aider-perso img { filter: brightness(.75) drop-shadow(0 0 20px rgba(160, 170, 255, .5)); animation: dodo 3s ease-in-out infinite; }
.aider-scene.nuit-dodo::after { content: '✨ 🌙 ✨'; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); font-size: 30px; letter-spacing: 12px; animation: scintillement 2s infinite; }
.aider-scene.matin-dodo { background: radial-gradient(circle at 50% 20%, #FFF3C4, #FFE0A3 40%, #BAE6FD 100%); }
.arc-en-ciel { position: absolute; left: 50%; top: 4%; width: 60%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 100%, transparent 44%, #A78BFA 44% 50%, #60A5FA 50% 56%, #4ADE80 56% 62%, #FDE047 62% 68%, #FB923C 68% 74%, #F87171 74% 80%, transparent 80%); animation: pop .8s var(--ressort) both; z-index: 1; opacity: .9; }

/* ================================================================
   CAPOUF : marque, écran titre, partage, barre de défilement
   ================================================================ */
.logo .logo-mascotte { display: block; width: clamp(84px, 13vw, 140px); height: auto; margin: 0 auto -6px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); animation: flotte 3.4s ease-in-out infinite; }
.logo h1 { margin-bottom: 8px; }
.logo .logo-petit { margin: 0; }
.demenagement { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 760px; padding: 14px 18px; border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 36px rgba(15, 23, 42, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: pop .5s var(--ressort); }
.demenagement > span { font-size: 34px; }
.demenagement b { display: block; font-size: 18px; color: var(--encre); }
.demenagement small { color: #475569; font-size: 14px; }
.titre-pied { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.titre-nuage { padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.emplacement-vide-heros { font-size: 15px; font-weight: 700; color: #475569; padding: 8px 0; }
.code-partage { font: 800 clamp(30px, 7vw, 46px)/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 4px; text-align: center; padding: 16px 10px; margin: 8px 0 12px; border-radius: 18px; background: linear-gradient(135deg, #FFF1D6, #FFE3EC); color: #9D174D; user-select: all; }
.code-partage span { opacity: .35; margin: 0 4px; }
.champ-code { text-transform: uppercase; letter-spacing: 4px; font-weight: 800; text-align: center; font-size: 26px; }
.modale.partage .champ { font-size: 14px; }
.modale .petit { font-size: 13px; color: #64748B; margin: 6px 0 0; }

/* Barre de défilement aux couleurs du jeu (fine, arrondie, dégradé de cape) */
html { scrollbar-color: var(--scroll-pouce, #E85D75) var(--scroll-rail, rgba(255, 255, 255, .25)); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .18); border-radius: 99px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FF6B6B, #E63946 55%, #B5179E); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FF8787, #F25260 55%, #C9259F); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.modale ::-webkit-scrollbar-track, .bloc ::-webkit-scrollbar-track { background: rgba(15, 23, 42, .06); }
body[data-moment="nuit"] { --scroll-rail: rgba(255, 255, 255, .12); }

/* ---------- Composer sa famille ---------- */
.famille-page { width: min(1100px, 100%); margin: 0 auto; padding: 8px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.fam-intro { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 241, 214, .95)); box-shadow: 0 14px 40px rgba(15, 23, 42, .18); }
.fam-intro img { width: 96px; height: auto; flex: none; animation: flotte 3.2s ease-in-out infinite; }
.fam-intro h2 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 30px); color: var(--encre); }
.fam-intro p { margin: 0; color: #475569; font-size: 17px; }
.fam-bloc { padding: 16px 18px; }
.fam-nom { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--encre); }
.fam-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.fam-carte, .fam-ajout { border-radius: 22px; min-height: 172px; }
.fam-carte-zone { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 10px 8px 12px; border: 0; border-radius: 22px; background: linear-gradient(180deg, #F0F7FF, #fff); box-shadow: 0 6px 18px rgba(15, 23, 42, .1), inset 0 0 0 2px rgba(46, 111, 216, .12); font: inherit; color: var(--encre); cursor: pointer; transition: transform .18s var(--ressort), box-shadow .18s; }
.fam-carte-zone:hover, .fam-carte-zone:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 28px rgba(15, 23, 42, .16), inset 0 0 0 3px rgba(46, 111, 216, .35); outline: none; }
.fam-carte-zone b { font-size: 17px; }
.fam-carte-zone small { font-size: 13px; color: #64748B; font-weight: 600; }
.fam-avatar { display: block; width: 92px; height: 112px; }
.fam-avatar.petit { width: 78px; height: 96px; }
.fam-avatar .avatar, .fam-apercu-avatar .avatar { width: 100%; height: 100%; }
.fam-animal { font-size: 64px; line-height: 1; display: grid; place-items: center; height: 110px; }
.fam-animal .animal-img { width: 100px; height: 100px; object-fit: contain; }
.fam-ajout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 3px dashed rgba(46, 111, 216, .35); background: rgba(255, 255, 255, .55); font: 700 15px/1.2 inherit; font-family: inherit; color: #2E6FD8; cursor: pointer; transition: background .2s, transform .18s var(--ressort); }
.fam-ajout span { font-size: 38px; line-height: 1; }
.fam-ajout:hover, .fam-ajout:focus-visible { background: #fff; transform: scale(1.03); outline: none; }
.fam-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; }
.fam-actions .btn[disabled] { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.fam-aide { margin: 4px 0 0; font-size: 14px; color: #64748B; text-align: center; }
.fam-actions .fam-aide { background: rgba(255, 255, 255, .85); padding: 4px 12px; border-radius: 99px; }

.fam-fiche-fond { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: apparait .2s ease-out; }
.fam-fiche { width: min(920px, 100%); max-height: min(92vh, 92dvh); display: grid; grid-template-columns: 260px 1fr; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(15, 23, 42, .4); animation: pop .35s var(--ressort); }
.fam-fiche-apercu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; background: radial-gradient(circle at 50% 35%, #FFF7E6, #FFE0B8 70%); color: var(--encre); font-size: 22px; }
.fam-apercu-avatar { display: block; width: 190px; height: 230px; animation: flotte 3s ease-in-out infinite; }
.fam-apercu-avatar.petit { width: 160px; height: 196px; }
.fam-apercu-animal { font-size: 120px; line-height: 1; animation: flotte 3s ease-in-out infinite; }
.fam-apercu-animal .animal-img { width: 180px; height: 180px; object-fit: contain; }
.fam-fiche-corps { padding: 18px 22px 0; overflow-y: auto; }
.fam-fiche-corps h3 { margin: 14px 0 8px; font-size: 16px; color: #334155; }
.fam-fiche-corps h3:first-child { margin-top: 4px; }
.fam-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.fam-puce { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 99px; border: 2px solid #E2E8F0; background: #F8FAFC; font: 600 15px/1.1 inherit; font-family: inherit; color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .15s var(--ressort), border-color .15s, background .15s; }
.fam-puce:hover { transform: translateY(-2px); border-color: #93C5FD; }
.fam-puce.choisi { border-color: #2E6FD8; background: #EFF6FF; box-shadow: 0 0 0 3px rgba(46, 111, 216, .2); }
.fam-puce[style*="--c"] { width: 44px; padding: 0; justify-content: center; background: var(--c); border-color: rgba(15, 23, 42, .12); }
.fam-puce[style*="--c"].choisi { border-color: #fff; box-shadow: 0 0 0 3px #2E6FD8; transform: scale(1.1); }
.puce-emoji { font-size: 20px; }
.fam-fiche-boutons { position: sticky; bottom: 0; display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 0 18px; margin-top: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 30%); }
@media (max-width: 720px) {
  .fam-fiche { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fam-fiche-apercu { flex-direction: row; padding: 10px; font-size: 18px; }
  .fam-apercu-avatar { width: 92px; height: 112px; }
  .fam-apercu-avatar.petit { width: 80px; height: 98px; }
  .fam-apercu-animal { font-size: 70px; }
  .fam-apercu-animal .animal-img { width: 90px; height: 90px; }
  .fam-intro { flex-direction: column; text-align: center; }
  .fam-grille { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* ---------- « Je prends, je pose » (sans garder le bouton appuyé) ---------- */
.piece:focus-visible { outline: 4px solid #2E6FD8; outline-offset: 4px; border-radius: 6px; }
.piece.tenue { cursor: grabbing; transition: transform .07s linear; z-index: 9999 !important; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .38)) drop-shadow(0 0 10px rgba(253, 224, 71, .9)); animation: tenue-respire 1.2s ease-in-out infinite; }
@keyframes tenue-respire { 50% { filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .32)) drop-shadow(0 0 18px rgba(253, 224, 71, 1)); } }
.table.main-pleine, .table.main-pleine .plateau { cursor: grabbing; }
.cible-piece { position: absolute; border-radius: 10px; pointer-events: none; z-index: 10000; opacity: 0; transform: scale(.92); transition: opacity .15s, transform .2s var(--ressort); box-shadow: 0 0 0 4px #4ADE80, 0 0 28px rgba(74, 222, 128, .9), inset 0 0 18px rgba(74, 222, 128, .6); }
.cible-piece.visible { opacity: 1; transform: scale(1); }
.mode-glisser-aide { font-size: 14px; color: #475569; }

/* Outil commun « glisser » : objet tenu après un simple clic */
.fantome.tenu-clic { transition: transform .06s linear; filter: drop-shadow(0 0 14px rgba(253, 224, 71, .95)); }
.en-main { outline: 4px dashed #FDE047; outline-offset: 4px; }
.btn-souffle .souffle-aide { display: block; font-size: .72em; font-weight: 600; opacity: .8; margin-top: 4px; }

/* Lisibilité de l'écran des parties : boutons du bas en texte foncé sur verre clair, emplacements vides sur verre sombre */
.titre-pied .btn { color: var(--encre); text-shadow: none; background: rgba(255, 255, 255, .94); border: 0; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); font-weight: 700; }
.titre-pied .btn:hover, .titre-pied .btn:focus-visible { background: #fff; transform: translateY(-2px); }
.emplacement.vide { background: rgba(15, 23, 42, .42); border-color: rgba(255, 255, 255, .75); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.emplacement.vide:hover, .emplacement.vide:focus-visible { background: rgba(15, 23, 42, .55); }
.emplacement.vide .emplacement-num { color: #fff; }
.titre-nuage { color: #fff; text-shadow: none; background: rgba(15, 23, 42, .6); }
.insecable { white-space: nowrap; }
@media (max-width: 480px) { .logo .logo-petit { letter-spacing: 1px; font-size: 13px; padding: 6px 12px; } }

/* QG : toute l'équipe tient dans la scène (centrée, plus petite quand on est nombreux) */
.qg-heros { left: 50%; transform: translateX(-50%); max-width: 64%; justify-content: center; }
.qg-heros.nombreux { height: 29%; }
.qg-heros.foule { height: 24%; }
.qg-heros.foule .qg-heros-un { margin-left: -3.5%; }
.qg-heros-un:first-child { margin-left: 0; }
.qg-heros-un:nth-child(4) { animation-delay: -.6s; } .qg-heros-un:nth-child(5) { animation-delay: -1.7s; } .qg-heros-un:nth-child(6) { animation-delay: -2.8s; }
.qg-heros-un:nth-child(n+7) { animation-delay: -1.4s; }
.qg-heros { bottom: 11.5%; }
.qg-heros.nombreux { height: 27%; }
.qg-heros.foule { height: 23%; }
.qg-chat.qg-animal-0 { left: 45%; top: 46%; width: 8.5%; }

/* Fiche « membre de la famille » : la colonne de droite défile (et le bouton Ajouter reste visible en bas) */
.fam-fiche { grid-template-rows: minmax(0, 1fr); }
.fam-fiche-corps { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
@media (max-width: 720px) { .fam-fiche { grid-template-rows: auto minmax(0, 1fr); } }

/* ---------- Choisir son QG ---------- */
.modale.choix-qg { width: min(980px, 96vw); }
.qg-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.qg-carte { position: relative; display: flex; flex-direction: column; padding: 0; border: 3px solid transparent; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .15); cursor: pointer; font: inherit; color: var(--encre); transition: transform .18s var(--ressort), box-shadow .18s, border-color .18s; }
.qg-carte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.qg-carte-nom { padding: 8px 10px; font-weight: 700; font-size: 15px; text-align: left; }
.qg-carte:hover, .qg-carte:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, .22); outline: none; }
.qg-carte.choisi { border-color: #2E6FD8; box-shadow: 0 0 0 4px rgba(46, 111, 216, .25), 0 12px 26px rgba(15, 23, 42, .2); }
.qg-carte.choisi::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #2E6FD8; color: #fff; display: grid; place-items: center; font-weight: 800; }
.qg-carte.ferme img { filter: grayscale(.85) blur(1.5px) brightness(.9); }
.qg-carte-cadenas { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 99px; background: rgba(15, 23, 42, .75); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; }

/* ---------- La famille en direct ---------- */
.direct { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 900; font-family: inherit; }
.direct[hidden] { display: none; }
.direct-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--encre); font: 700 14px/1 inherit; font-family: inherit; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .18s var(--ressort); position: relative; }
.direct-pastille:hover, .direct-pastille:focus-visible { transform: translateY(-2px) scale(1.03); outline: none; }
.direct-point { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; flex: none; }
.direct-point.vert { background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: direct-pouls 2s infinite; }
@keyframes direct-pouls { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.direct-tete { width: 30px; height: 30px; border-radius: 50%; background: #FFF7E6; border: 2px solid #fff; display: inline-grid; place-items: center; overflow: hidden; flex: none; font-size: 16px; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
.direct-pastille .direct-tete + .direct-tete { margin-left: -12px; }
.direct-tete .avatar { width: 100%; height: 100%; }
.direct-icone { font-size: 18px; }
.direct-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #E63946; color: #fff; font-size: 12px; display: grid; place-items: center; animation: pop .4s var(--ressort); }
.direct-panneau { width: min(360px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: rgba(255, 255, 255, .97); border-radius: 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); overflow: hidden; animation: pop .3s var(--ressort); color: var(--encre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.direct-tete-panneau { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; background: linear-gradient(135deg, #FFF1D6, #FFE3EC); }
.direct-tete-panneau b { flex: 1; font-size: 15px; }
.direct-compte { font-size: 12px; font-weight: 700; color: #15803D; background: #DCFCE7; padding: 3px 8px; border-radius: 99px; }
.direct-reduire { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .8); font-weight: 800; cursor: pointer; }
.direct-presents { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; border-bottom: 1px solid #F1F5F9; }
.direct-presents li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.direct-presents li > span:nth-child(2) { flex: 1; min-width: 0; }
.direct-presents small { color: #64748B; font-weight: 600; }
.direct-seul { color: #64748B; font-size: 13px !important; }
.direct-lien { border: 0; background: #EFF6FF; color: #1D4ED8; font: 700 12px/1 inherit; font-family: inherit; padding: 6px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.direct-reactions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; justify-content: center; border-bottom: 1px solid #F1F5F9; }
.direct-reactions button { width: 38px; height: 38px; border: 0; border-radius: 12px; background: #F8FAFC; font-size: 20px; cursor: pointer; transition: transform .15s var(--ressort); }
.direct-reactions button:hover, .direct-reactions button:focus-visible { transform: scale(1.25); background: #FFF7E6; outline: none; }
.direct-journal { flex: 1; min-height: 80px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.direct-msg { display: flex; align-items: flex-end; gap: 6px; }
.direct-msg.de-moi { flex-direction: row-reverse; }
.direct-bulle { max-width: 72%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #F1F5F9; font-size: 14px; line-height: 1.35; word-wrap: break-word; }
.direct-msg.de-moi .direct-bulle { background: #2E6FD8; color: #fff; border-radius: 16px 16px 4px 16px; }
.direct-bulle small { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.direct-lire { border: 0; background: none; font-size: 16px; cursor: pointer; opacity: .6; padding: 4px; }
.direct-lire:hover { opacity: 1; }
.direct-vide { margin: auto; color: #94A3B8; font-size: 14px; text-align: center; }
.direct-rapides { display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px; scrollbar-width: none; }
.direct-rapides::-webkit-scrollbar { display: none; }
.direct-rapides button { flex: none; border: 1px solid #E2E8F0; background: #fff; border-radius: 99px; padding: 6px 10px; font: 600 13px/1 inherit; font-family: inherit; color: var(--encre); cursor: pointer; }
.direct-saisie { display: flex; gap: 6px; padding: 8px 10px 10px; }
.direct-champ { flex: 1; min-width: 0; border: 2px solid #E2E8F0; border-radius: 99px; padding: 10px 14px; font: 500 15px/1.2 inherit; font-family: inherit; outline: none; }
.direct-champ:focus { border-color: #2E6FD8; }
.direct-envoyer { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #2E6FD8; color: #fff; font-size: 18px; cursor: pointer; }
.pluie-emoji { position: fixed; bottom: -60px; z-index: 2000; pointer-events: none; animation: pluie-monte 2.8s ease-out forwards; }
@keyframes pluie-monte { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--derive), -105vh) scale(1.2) rotate(20deg); opacity: 0; } }
.ecran-accueil ~ .direct, body:has(.hero-dock) .direct { bottom: max(14px, env(safe-area-inset-bottom)); }
@media (max-width: 640px) { body:has(.hero-dock) .direct { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 92px); } }
.direct-msg.de-moi .direct-bulle small { color: rgba(255, 255, 255, .85); opacity: 1; }

/* Repasse : lisibilité et petits défauts */
.mini-portrait.animal-emoji { display: inline-grid; place-items: center; font-size: 46px; line-height: 1; }
.mot-visuel .mini-portrait.animal-emoji { font-size: 64px; }
body[data-moment] .panneau .question, body[data-moment] .bloc .question, body[data-moment] .bloc-option .question { color: var(--encre); text-shadow: none; }
.album-bilan { align-self: center; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--encre); box-shadow: 0 6px 18px rgba(15, 23, 42, .18); font-weight: 600; }
/* Clavier : un contour bien visible sur tout ce qui se touche */
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #2E6FD8; outline-offset: 3px; }
.panneau .question, .bloc .question, .bloc-option .question { color: var(--encre) !important; text-shadow: none !important; }