/* =========================================================================
   L'Hôtel des Monstres — feuille de style
   Style « livre illustré » : traits d'encre indigo, aplats doux, formes rondes.
   ========================================================================= */

/* ---------- Polices locales (licence OFL, aucun CDN) ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

/* ---------- Couleurs et mesures ---------- */
:root {
  --encre: #2B2A4A;
  --encre-douce: #4E4D72;
  --fond: #F3F8EE;
  --papier: #FFFFFF;
  --soleil: #F6C445;
  --soleil-clair: #FFE7A3;
  --menthe: #D6F0C8;
  --ciel: #CDEBF5;
  --rose: #F9D3DF;
  --lavande: #E3DCF7;
  --peche: #FBDCC4;
  --corail: #E8735A;
  --vert: #3F8E55;
  --ombre-bouton: 0 5px 0 var(--encre);
  --rayon: 22px;
  --titre: 'Fredoka', 'Nunito', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --texte: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--fond); color: var(--encre);
  font-family: var(--texte); font-size: 17px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.1; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 4px solid #5A8BD6; outline-offset: 3px; border-radius: 12px; }

/* ---------- Le monde ---------- */
#monde {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  display: block; touch-action: none; background: #A8D88A;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 22px; border-radius: 18px;
  border: 3px solid var(--encre); background: var(--papier); color: var(--encre);
  font-family: var(--titre); font-weight: 600; font-size: 19px;
  box-shadow: var(--ombre-bouton); cursor: pointer; user-select: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.bouton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--encre); }
.bouton.principal { background: var(--soleil); }
.bouton.grand { font-size: 24px; min-height: 64px; padding: 14px 32px; border-radius: 22px; }
.bouton.petit { min-height: 44px; font-size: 16px; padding: 6px 14px; border-radius: 14px; }
.bouton.discret { box-shadow: none; border-width: 2px; }
.bouton.danger { background: var(--rose); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton-icone {
  width: 52px; height: 52px; border-radius: 18px; border: 3px solid var(--encre);
  background: var(--papier); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 0 rgba(43, 42, 74, .3); padding: 0;
}
.bouton-icone svg { width: 26px; height: 26px; }

/* ---------- Interface par-dessus le monde (HUD) ---------- */
.hud { position: fixed; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.panneau {
  background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon);
  box-shadow: 0 5px 0 rgba(43, 42, 74, .22);
}
#hud-position { top: 12px; left: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; max-width: 60vw; }
#hud-biome { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-weight: 600; font-size: 19px; line-height: 1.15; }
.pastille { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--encre); flex: none; }
#hud-coord { font-weight: 800; font-size: 15px; }
#hud-zone { font-weight: 700; font-size: 13px; color: var(--encre-douce); }
#hud-etoiles { top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px 12px; border-radius: 999px; }
#hud-etoiles svg { width: 24px; height: 24px; }
#hud-droite { top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#minicarte { width: 150px; height: 150px; border-radius: 24px; display: block; cursor: pointer; overflow: hidden; }
#hud-equipe { left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; }
.case-equipe {
  width: 64px; height: 74px; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-weight: 800; font-size: 12px; background: var(--menthe); border: 0; cursor: pointer; padding: 2px;
}
.case-equipe svg { width: 46px; height: 46px; }
.case-equipe.vide { background: transparent; border: 2px dashed #8E8AA8; color: var(--encre-douce); cursor: default; }
#hud-actions { right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
#joystick {
  position: fixed; z-index: 9; width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .5); border: 3px solid var(--encre); pointer-events: none;
  transform: translate(-50%, -50%); display: none;
}
#joystick .bouton-joy {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: var(--papier); border: 3px solid var(--encre); box-shadow: 0 4px 0 rgba(43, 42, 74, .3);
}

/* Petit écran : on resserre. */
@media (max-width: 640px), (max-height: 520px) {
  #minicarte { width: 108px; height: 108px; border-radius: 18px; }
  .case-equipe { width: 50px; height: 60px; font-size: 11px; }
  .case-equipe svg { width: 36px; height: 36px; }
  #hud-biome { font-size: 16px; }
  #hud-actions .bouton { min-height: 46px; font-size: 16px; padding: 6px 12px; }
  #hud-actions .bouton span { display: none; }
  #hud-equipe { bottom: 8px; gap: 5px; padding: 5px; }
}
@media (max-width: 420px) {
  #hud-equipe { left: 8px; transform: none; }
  #hud-etoiles { top: auto; bottom: 86px; left: 8px; transform: none; }
}

/* ---------- Bulles d'information ---------- */
#toasts { position: fixed; z-index: 60; top: 80px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast {
  background: var(--papier); border: 3px solid var(--encre); border-radius: 18px; padding: 10px 16px;
  font-weight: 800; text-align: center; box-shadow: 0 5px 0 rgba(43, 42, 74, .22);
  animation: toast-entree .3s ease-out, toast-sortie .4s ease-in 2.8s forwards;
}
.toast.dore { background: var(--soleil-clair); }
@keyframes toast-entree { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
@keyframes toast-sortie { to { transform: translateY(-10px); opacity: 0; } }

/* ---------- Écrans plein cadre et fenêtres ---------- */
.voile {
  position: fixed; inset: 0; z-index: 40; background: rgba(43, 42, 74, .45);
  display: flex; align-items: center; justify-content: center; padding: 14px;
  animation: apparition .2s ease-out;
}
.voile.plein { background: var(--fond); padding: 0; align-items: stretch; }
@keyframes apparition { from { opacity: 0; } }
.fenetre {
  position: relative; background: var(--fond); border: 3px solid var(--encre); border-radius: 28px;
  width: min(100%, 760px); max-height: 100%; overflow: auto; padding: 22px;
  box-shadow: 0 8px 0 rgba(43, 42, 74, .3); animation: monter .25s ease-out;
}
.fenetre.large { width: min(100%, 1080px); }
.voile.plein .fenetre { border: 0; border-radius: 0; width: 100%; box-shadow: none; padding: 20px max(16px, calc((100% - 1000px) / 2)); }
@keyframes monter { from { transform: translateY(24px) scale(.97); opacity: 0; } }
.fenetre-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fenetre-entete h2 { font-size: 30px; }
.sous-titre { color: var(--encre-douce); font-weight: 600; }
.grille-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pile { display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.carte {
  background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 16px;
}
.note { background: var(--soleil-clair); border-radius: 18px; padding: 12px 14px; font-weight: 700; }

/* ---------- Écran de départ ---------- */
.depart { min-height: 100%; display: flex; flex-direction: column; gap: 22px; align-items: center; justify-content: center; text-align: center; padding: 24px 16px 40px; }
.depart h1 { font-size: clamp(34px, 6vw, 60px); }
.depart .sous-titre { font-size: 19px; max-width: 560px; }
.cartes-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; width: min(100%, 980px); }
.carte-classe {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px;
  border-radius: 26px; border: 3px solid var(--encre); cursor: pointer; box-shadow: var(--ombre-bouton);
  transition: transform .1s;
}
.carte-classe:hover { transform: translateY(-3px); }
.carte-classe:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.carte-classe svg { width: 70px; height: 70px; }
.carte-classe .nom-classe { font-family: var(--titre); font-weight: 700; font-size: 34px; }
.carte-classe .detail { font-weight: 700; font-size: 14px; }
.choix-surnoms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; }
.puce {
  padding: 10px 16px; border-radius: 999px; border: 3px solid var(--encre); background: var(--papier);
  font-weight: 800; cursor: pointer; min-height: 48px;
}
.puce[aria-pressed="true"] { background: var(--soleil); }
.avatar-apercu { width: 150px; height: 150px; }
.reglages-avatar { display: grid; gap: 12px; }
.nuancier { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nuance { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--encre); cursor: pointer; }
.nuance[aria-pressed="true"] { outline: 4px solid var(--encre); outline-offset: 3px; }
.oeufs { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.oeuf { background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 30px; }
.oeuf svg { width: 150px; height: 180px; animation: oeuf-bouge 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.oeuf:nth-child(2) svg { animation-delay: .4s; }
.oeuf:nth-child(3) svg { animation-delay: .8s; }
.oeuf:hover svg, .oeuf:focus-visible svg { animation-duration: .6s; }
@keyframes oeuf-bouge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.eclosion svg { width: 220px; height: 220px; }

/* ---------- Rencontre et question ---------- */
.rencontre { width: min(100%, 560px); padding: 18px; background: var(--fond); }
.rencontre-haut { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; background: var(--papier); border: 2px solid var(--encre); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.etiquette.rare { background: var(--ciel); }
.etiquette.legendaire { background: var(--soleil); }
.etiquette.peu_commun { background: var(--lavande); }
.scene-monstre { display: flex; flex-direction: column; align-items: center; position: relative; }
.scene-monstre .bulle {
  align-self: flex-start; background: var(--papier); border: 2px solid var(--encre); border-radius: 18px;
  padding: 8px 12px; font-weight: 700; font-size: 15px; max-width: 80%; margin-top: 8px; position: relative;
}
.porte-monstre { width: 190px; height: 190px; animation: arrivee .6s cubic-bezier(.3, 1.6, .5, 1); }
.porte-monstre svg { width: 100%; height: 100%; overflow: visible; }
@keyframes arrivee { from { transform: scale(.2) translateY(40px); opacity: 0; } }
.porte-monstre.joie { animation: joie .5s ease-in-out 3; }
@keyframes joie { 50% { transform: translateY(-30px) rotate(-6deg); } }
.porte-monstre.fuite { animation: fuite 1.2s ease-in forwards; }
@keyframes fuite { 20% { transform: translateX(-10px); } 100% { transform: translateX(120vw) rotate(25deg); opacity: 0; } }
.nom-monstre { font-size: 30px; }
.carte-question {
  background: var(--papier); border: 3px solid var(--encre); border-radius: 26px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px; margin-top: 12px; box-shadow: 0 6px 0 rgba(43, 42, 74, .18);
}
.question-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.consigne { font-family: var(--titre); font-weight: 600; font-size: 24px; line-height: 1.25; }
.consigne .trou { display: inline-block; min-width: 70px; border-bottom: 4px dotted var(--encre); }
.illustration { display: flex; justify-content: center; }
.illustration svg { max-width: 100%; height: auto; max-height: 220px; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choix.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix.long { grid-template-columns: 1fr; }
.choix .bouton { min-height: 66px; font-size: 24px; padding: 8px; word-break: break-word; }
.choix.long .bouton { font-size: 20px; justify-content: flex-start; text-align: left; padding: 10px 16px; }
.choix .bouton:nth-child(4n+1) { background: var(--soleil-clair); }
.choix .bouton:nth-child(4n+2) { background: var(--menthe); }
.choix .bouton:nth-child(4n+3) { background: var(--ciel); }
.choix .bouton:nth-child(4n+4) { background: var(--rose); }
.choix .bouton.juste { background: #9FDB9A !important; }
.choix .bouton.attendu { outline: 4px solid var(--vert); outline-offset: 2px; }
.pave-affichage {
  font-family: var(--titre); font-size: 34px; font-weight: 700; text-align: center; min-height: 58px;
  border: 3px solid var(--encre); border-radius: 18px; background: var(--fond); padding: 4px 10px; letter-spacing: 2px;
}
.pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pave .bouton { min-height: 58px; font-size: 26px; padding: 4px; }
.glisser-zone { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 64px; }
.emplacement {
  min-width: 74px; min-height: 58px; border: 3px dashed #8E8AA8; border-radius: 16px; display: flex;
  align-items: center; justify-content: center; padding: 4px; background: var(--fond);
}
.emplacement.survol { background: var(--soleil-clair); border-color: var(--encre); }
.tuile-glisser {
  min-width: 70px; min-height: 52px; border: 3px solid var(--encre); border-radius: 14px; background: var(--papier);
  font-family: var(--titre); font-weight: 600; font-size: 22px; padding: 6px 12px; cursor: grab; touch-action: none;
  box-shadow: 0 4px 0 var(--encre); user-select: none;
}
.tuile-glisser.en-main { position: fixed; z-index: 100; pointer-events: none; transform: scale(1.08) rotate(-3deg); }
.explication { background: var(--soleil-clair); border-radius: 18px; padding: 12px 14px; font-weight: 700; font-size: 17px; }
.explication.bravo { background: var(--menthe); }
.serie { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-weight: 800; font-size: 14px; }
.serie svg { width: 22px; height: 22px; }

/* ---------- Animations des monstres (SVG intégré à la page) ---------- */
.m-corps { transform-box: fill-box; transform-origin: 50% 100%; animation: respire 2.6s ease-in-out infinite; }
.m-corps.m-flotte { animation-name: flotte; }
.m-yeux { transform-box: fill-box; transform-origin: 50% 50%; animation: cligne 4s infinite; }
.m-ailes { animation: battre .8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes respire { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes battre { 50% { transform: scaleY(.88); } }
.saute { animation: saut .55s ease-out; }
@keyframes saut { 40% { transform: translateY(-22px); } }

/* ---------- Confettis (bonne réponse) ---------- */
.confetti { position: fixed; z-index: 70; width: 12px; height: 12px; border-radius: 3px; pointer-events: none; animation: confetti 1.4s ease-in forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }

/* ---------- Hôtel ---------- */
.hotel-scene { display: flex; flex-direction: column; gap: 16px; }
.equipe-hotel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px; border-radius: 22px; background: var(--menthe); border: 3px solid var(--encre); }
.facade { background: #F7E3C4; border: 4px solid var(--encre); border-radius: 18px; padding: 14px; position: relative; }
.toit { height: 70px; margin: 0 -26px -4px; position: relative; }
.toit svg { width: 100%; height: 100%; display: block; }
.enseigne { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); background: var(--encre); color: var(--soleil-clair); font-family: var(--titre); font-weight: 700; letter-spacing: 3px; padding: 4px 18px; border-radius: 10px; white-space: nowrap; }
.etage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 10px 0; border-bottom: 4px solid rgba(43, 42, 74, .15); }
.etage-nom { grid-column: 1 / -1; font-weight: 800; font-size: 13px; color: var(--encre-douce); }
@media (max-width: 640px) { .etage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chambre {
  aspect-ratio: 1 / 1.05; border: 3px solid var(--encre); border-radius: 16px; background: #FFD978; display: flex;
  flex-direction: column; align-items: center; justify-content: center; padding: 4px; font-size: 12px; font-weight: 800;
  cursor: pointer; position: relative; overflow: hidden; touch-action: none;
}
.chambre svg { width: 78%; height: auto; pointer-events: none; }
.chambre .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; pointer-events: none; }
.chambre.vide { background: rgba(255, 217, 120, .35); border-style: dashed; cursor: default; }
.chambre.selection { outline: 4px solid var(--corail); outline-offset: 2px; }
.chambre.survol { background: var(--soleil); }
.hall { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; padding: 14px; background: #EAD3AF; border-radius: 14px; }
.hall .visiteur { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 13px; text-align: center; }
.hall .visiteur svg { width: 110px; height: 110px; }

/* ---------- Livre des Monstres ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtres select { min-height: 46px; border-radius: 14px; border: 3px solid var(--encre); padding: 4px 10px; font: inherit; font-weight: 700; background: var(--papier); }
.vignette { background: var(--papier); border: 3px solid var(--encre); border-radius: 20px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.vignette svg { width: 100%; max-width: 120px; height: auto; }
.vignette .nom { font-family: var(--titre); font-weight: 600; font-size: 18px; }
.vignette .info { font-size: 13px; font-weight: 700; color: var(--encre-douce); }
.fiche { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 560px) { .fiche { grid-template-columns: 1fr; justify-items: center; } }
.fiche svg { width: 100%; height: auto; }
.barre-xp { height: 16px; border-radius: 999px; border: 2px solid var(--encre); background: var(--papier); overflow: hidden; }
.barre-xp > span { display: block; height: 100%; background: var(--soleil); }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td { text-align: left; padding: 8px; border-bottom: 2px solid rgba(43, 42, 74, .12); vertical-align: top; }
.tableau th { font-family: var(--titre); font-weight: 600; }
.defile { overflow-x: auto; }
.code-souvenir { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; background: var(--papier); border: 2px solid var(--encre); border-radius: 14px; padding: 10px; max-height: 140px; overflow: auto; user-select: all; }
textarea, input[type=text] { width: 100%; font: inherit; border: 3px solid var(--encre); border-radius: 14px; padding: 10px; background: var(--papier); }
.carte-grande { position: fixed; inset: 0; z-index: 45; background: rgba(43, 42, 74, .5); display: flex; align-items: center; justify-content: center; }
.carte-grande canvas { width: min(92vw, 92vh); height: min(92vw, 92vh); border-radius: 26px; border: 4px solid var(--encre); background: #C9C6DA; }

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

/* ---------- Fractions écrites joliment ---------- */
.frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: .9em; vertical-align: middle; }
.frac > span:first-child { border-bottom: 3px solid currentColor; padding: 0 6px 2px; }
.frac > span:last-child { padding: 2px 6px 0; }
.choix .bouton:disabled { opacity: 1; cursor: default; }
.choix .bouton.choisi { opacity: .55; }
.choix .bouton:disabled:not(.attendu):not(.choisi) { opacity: .55; }
.choix .bouton.attendu { background: #9FDB9A !important; outline: 4px solid var(--vert); outline-offset: 2px; }