/* Garantit que hidden écrase toujours display:flex/grid des classes */
[hidden] { display: none !important; }

:root {
  --fond: linear-gradient(145deg, #e8f4ff 0%, #fff5e6 45%, #ffe8f0 100%);
  --carte: #ffffff;
  --primaire: #6c5ce7;
  --primaire-fonce: #5344c7;
  --accent: #00cec9;
  --soleil: #fdcb6e;
  --rose: #fd79a8;
  --succes: #00b894;
  --erreur: #e17055;
  --texte: #2d3436;
  --ombre: rgba(45, 52, 54, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: clamp(15px, 2.8vw, 20px);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  color: var(--texte);
  background: var(--fond);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  min-height: 100dvh;
  position: relative;
}

.top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  background: white;
  border-radius: 1.2rem;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 4px 18px var(--ombre);
}

.header-droite {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mascotte {
  line-height: 0;
  flex-shrink: 0;
  animation: flotte 2.5s ease-in-out infinite;
}
.genre-mascotte {
  animation: flotte 2.5s ease-in-out infinite;
}

@keyframes flotte {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-6px) rotate(5deg);
  }
}

.titre-bloc {
  flex: 1;
}

h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primaire);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sous-titre {
  margin: 0.1rem 0 0;
  font-size: 0.73rem;
  opacity: 0.75;
  line-height: 1.3;
}

.score-global {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: #fff9e6;
  border: 2px solid #fdcb6e;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
}

.score-icone {
  font-size: 1.1rem;
}

.streak-header {
  background: linear-gradient(135deg, #ff7675, #d63031);
  color: white;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-weight: 800;
  font-size: 0.85rem;
  min-width: 2rem;
  text-align: center;
  transition: transform 0.2s;
}
.streak-header:empty { display: none; }

.ecran {
  display: none;
}

.ecran.actif {
  display: block;
  position: relative;
  animation: entree 0.35s ease-out;
}

@keyframes entree {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Onboarding classe ─────────────────────────────────────────────────── */
.classe-conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
}

.classe-titre {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  color: var(--texte);
}

.classe-mascotte { width: 80px; height: 80px; }

.classe-btns {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.classe-btns-5 .btn-classe {
  max-width: 90px;
  min-width: 64px;
}

.btn-classe {
  flex: 1;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 0.5rem;
  border: none;
  border-radius: 1.2rem;
  background: white;
  box-shadow: 0 4px 16px var(--ombre);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-classe:hover, .btn-classe:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--ombre);
  outline: none;
}

.btn-classe:active { transform: scale(0.97); }
.btn-classe.selectionne {
  box-shadow: 0 0 0 3px var(--primaire), 0 4px 16px var(--ombre);
  transform: translateY(-2px);
}
.classe-emoji { font-size: 2rem; }
.classe-nom { font-size: 1.2rem; font-weight: 800; color: var(--texte); }
.classe-desc { font-size: 0.75rem; color: #888; }

/* ── Sélecteur de difficulté (onboarding) ──────────────────────────────── */
.diff-choix {
  text-align: center;
  animation: entree 0.25s ease-out;
}

.diff-titre {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--texte);
}

.diff-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.btn-diff {
  flex: 1;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.4rem;
  border: none;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 3px 12px var(--ombre);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-diff:hover, .btn-diff:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px var(--ombre);
  outline: none;
}

.btn-diff:active { transform: scale(0.97); }
.diff-emoji { font-size: 1.6rem; }
.diff-nom { font-size: 0.8rem; font-weight: 700; color: var(--texte); }

/* ── Classe info bar (menu) ────────────────────────────────────────────── */
.classe-info-barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: white;
  border-radius: 999px;
  box-shadow: 0 2px 8px var(--ombre);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

#classe-info-label::after {
  content: " · ";
  color: #ccc;
}

.btn-changer-classe {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

/* ── Diff badge (in-game) ──────────────────────────────────────────────── */
.diff-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: white;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--ombre);
  z-index: 1;
}

.diff-pulse { animation: diffPulse 0.6s ease forwards; }

@keyframes diffPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); background: var(--primaire); color: white; }
  100% { transform: scale(1); }
}

.accueil {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #888;
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}

.grille-jeux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.carte-jeu {
  border: none;
  border-radius: 1.2rem;
  padding: 1.1rem 0.7rem 0.9rem;
  background: var(--carte);
  box-shadow: 0 4px 16px var(--ombre);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  overflow: hidden;
  min-height: 5.5rem;
}

.carte-jeu::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 1.2rem 1.2rem 0 0;
}

.carte-jeu:active {
  transform: scale(0.96);
}

.carte-jeu:hover,
.carte-jeu:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(108, 92, 231, 0.18);
  outline: none;
}

/* ── Couleurs par catégorie ── */
.carte-jeu[data-cat="maths"]::before   { background: #6c5ce7; }
.carte-jeu[data-cat="formes"]::before  { background: #00b894; }
.carte-jeu[data-cat="temps"]::before   { background: #0984e3; }
.carte-jeu[data-cat="argent"]::before  { background: #f9ca24; }
.carte-jeu[data-cat="avance"]::before  { background: #e17055; }
.carte-jeu[data-cat="langage"]::before { background: #e84393; }

.carte-jeu[data-cat="maths"]   { background: #f9f7ff; }
.carte-jeu[data-cat="formes"]  { background: #f2fdf8; }
.carte-jeu[data-cat="temps"]   { background: #f0f8ff; }
.carte-jeu[data-cat="argent"]  { background: #fffef0; }
.carte-jeu[data-cat="avance"]  { background: #fff5f2; }
.carte-jeu[data-cat="langage"] { background: #fff0f9; }

.emoji-jeu {
  font-size: 2.4rem;
  line-height: 1;
}

.nom-jeu {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--texte);
  line-height: 1.25;
}

.desc-jeu {
  font-size: 0.68rem;
  opacity: 0.65;
  line-height: 1.25;
}

.grille-section {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #b2b2c2;
  margin: 0.6rem 0 0.1rem;
  padding: 0 0.1rem;
}
.grille-section:first-child { margin-top: 0; }

.btn-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 2.5px solid var(--primaire);
  background: white;
  color: var(--primaire);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 8px var(--ombre);
  transition: background 0.14s, color 0.14s;
}

.btn-retour:hover,
.btn-retour:focus-visible {
  background: var(--primaire);
  color: white;
  outline: none;
}
.btn-retour:active { transform: scale(0.97); }

.jeu-niveau {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primaire-fonce);
  opacity: 0.9;
  margin: 0 0 0.35rem;
}

.jeu-titre {
  text-align: center;
  font-size: 1.15rem;
  margin: 0 0 1rem;
  color: var(--primaire-fonce);
}

.zone-question {
  background: var(--carte);
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 24px var(--ombre);
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
}

.zone-question .ligne-emojis {
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  letter-spacing: 0.15em;
  line-height: 1.6;
  word-break: break-all;
}

.zone-question .ligne-emojis.petit {
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  letter-spacing: 0.08em;
}

.zone-question .equation {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primaire);
  margin-top: 0.5rem;
}

.zone-question .suite {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.zone-choix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.btn-choix {
  border: none;
  border-radius: 1rem;
  padding: 1rem;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #f0f0ff 100%);
  color: var(--primaire);
  box-shadow: 0 4px 0 var(--primaire-fonce), 0 8px 20px var(--ombre);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-choix:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--primaire-fonce), 0 4px 12px var(--ombre);
}

.btn-choix:disabled {
  cursor: default;
  opacity: 0.85;
}

.btn-choix.bonne {
  background: linear-gradient(180deg, #d4fc79 0%, var(--succes) 100%);
  color: #fff;
  box-shadow: 0 4px 0 #006b57, 0 8px 20px rgba(0, 184, 148, 0.35);
}

.btn-choix.mauvaise {
  background: linear-gradient(180deg, #fab1a0 0%, var(--erreur) 100%);
  color: #fff;
  box-shadow: 0 4px 0 #b3391b, 0 8px 20px rgba(225, 112, 85, 0.35);
}

.feedback {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 2rem;
  margin: 0.5rem 0;
  border-radius: 0.6rem;
  padding: 0.2rem 0.5rem;
  transition: color 0.2s;
}

.feedback.ok {
  color: var(--succes);
}

.feedback.non {
  color: var(--erreur);
}

.btn-suivant {
  display: block;
  margin: 1rem auto 0;
  padding: 0.85rem 2.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primaire), #a29bfe);
  color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  letter-spacing: 0.02em;
}
.btn-suivant:hover, .btn-suivant:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.5);
  outline: none;
}
.btn-suivant:active { transform: scale(0.97); }

.confetti {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 100;
}

.confetti span {
  position: absolute;
  top: -10%;
  animation: tomber 2.2s ease-out forwards;
  font-size: 1.25rem;
}

@keyframes tomber {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.6;
  }
}

@media (min-width: 480px) {
  .grille-jeux {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Responsive : petits écrans (< 360px) ─────────────────────────────── */
@media (max-width: 360px) {
  .classe-btns { gap: 0.5rem; }
  .btn-classe { max-width: 90px; padding: 0.75rem 0.3rem; }
  .classe-emoji { font-size: 1.6rem; }
  .classe-nom { font-size: 1rem; }
  .diff-btns { gap: 0.4rem; }
  .btn-diff { padding: 0.65rem 0.3rem; max-width: 80px; }
  .genre-btns { gap: 1rem; }
  .btn-genre { min-width: 6.5rem; padding: 0.75rem 1rem; }
  html { font-size: 14px; }
}

/* ── Responsive : grands écrans (> 600px) ─────────────────────────────── */
@media (min-width: 600px) {
  .app { padding: 1.5rem 2rem 3rem; }
  .btn-classe { max-width: 140px; }
  .genre-emoji { font-size: 4rem; }
}

/* ── Écran sélection du genre ────────────────────────────────────────────── */

#ecran-genre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

#ecran-genre.actif {
  display: flex;
}

.genre-conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 1rem;
}

.genre-mascotte {
  line-height: 0;
  max-height: 80px;
  overflow: hidden;
}

.genre-titre {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0;
  text-align: center;
}

.genre-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texte);
  margin-top: 0.2rem;
}

.nommage-conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  padding: 1rem;
}
.nommage-fox {
  line-height: 0;
  animation: flotte 2.5s ease-in-out infinite;
}
.nommage-titre {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primaire);
  margin: 0;
  line-height: 1.35;
}
.nommage-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.input-nom {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border: 3px solid var(--primaire);
  border-radius: 16px;
  padding: 0.55rem 1rem;
  width: 200px;
  color: var(--primaire);
  outline: none;
  font-family: inherit;
  background: white;
}
.input-nom:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.btn-nommage {
  background: var(--primaire);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s;
}
.btn-nommage:active { transform: scale(0.96); }
.nommage-hint {
  font-size: 0.8rem;
  color: #aaa;
  margin: 0;
}
.sous-titre-retour {
  transition: opacity 0.5s;
}

.genre-btns {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.btn-genre {
  border: none;
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--carte);
  box-shadow: 0 6px 20px var(--ombre);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 8rem;
  font-family: inherit;
}

.btn-genre:hover,
.btn-genre:focus-visible {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 36px rgba(108, 92, 231, 0.22);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.btn-genre:active {
  transform: scale(0.96);
}

.genre-emoji {
  font-size: clamp(2.8rem, 11vw, 3.8rem);
  line-height: 1;
  display: block;
  animation: flotte 3s ease-in-out infinite;
}

#btn-fille .genre-emoji  { animation-delay: 0s; }
#btn-garcon .genre-emoji { animation-delay: 0.4s; }

@keyframes genre-entree {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#btn-fille  { animation: genre-entree 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#btn-garcon { animation: genre-entree 0.4s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.maison-reglages {
  margin-top: 0.75rem;
  text-align: center;
}

.btn-changer-genre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--ombre);
  background: white;
  color: var(--texte);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.75;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn-changer-genre:hover,
.btn-changer-genre:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
  border-color: var(--primaire);
}

/* ── Boutons visuels generiques ─────────────────────────────────────────── */

.btn-forme {
  padding: 0.35rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-visuel2 {
  padding: 0.75rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Pair / Impair ──────────────────────────────────────────────────────── */

.pair-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.pair-nombre {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--primaire);
  line-height: 1;
}

/* ── Dizaines & Unités ──────────────────────────────────────────────────── */

.diz-question {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  max-width: 100%;
}

/* ── Formes ─────────────────────────────────────────────────────────────── */

.forme-question {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: apparition-horloge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Moitié ─────────────────────────────────────────────────────────────── */

.moitie-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.moitie-row {
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.moitie-cache {
  opacity: 0.5;
}

.moitie-sep {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--primaire);
  opacity: 0.6;
}

/* ── Multiplication ─────────────────────────────────────────────────────── */

.mult-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.mult-groupe {
  background: #f0eeff;
  border: 2px solid #c4b5f9;
  border-radius: 0.75rem;
  padding: 0.35rem 0.5rem;
  font-size: clamp(1rem, 4vw, 1.4rem);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.mult-grille-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.mult-dots {
  background: #f0eeff;
  border: 2px solid #c4b5f9;
  border-radius: 0.6rem;
  padding: 4px;
}

/* ── Division ────────────────────────────────────────────────────────────── */

.div-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.div-total {
  font-size: clamp(0.9rem, 3.5vw, 1.2rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.div-arrow {
  font-size: 1.2rem;
  color: var(--primaire);
  opacity: 0.7;
}

.div-groupes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.div-groupe {
  min-width: 2.5rem;
  min-height: 2.5rem;
  background: #f0eeff;
  border: 2px dashed #c4b5f9;
  border-radius: 0.75rem;
  padding: 0.3rem 0.5rem;
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}

/* ── Fractions ───────────────────────────────────────────────────────────── */

.fraction-question {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: apparition-horloge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Monnaie ─────────────────────────────────────────────────────────────── */

.monnaie-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
}

.monnaie-ligne strong {
  color: var(--primaire);
}

.monnaie-interro {
  font-size: 2rem;
}

/* ── Symétrie ────────────────────────────────────────────────────────────── */

.symetrie-question {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: apparition-horloge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Jeu : L'heure ──────────────────────────────────────────────────────── */

.grande-horloge {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: apparition-horloge 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes apparition-horloge {
  0% {
    transform: scale(0.65) rotate(-10deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.06) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.btn-aide-heure {
  margin-top: 0.6rem;
  background: none;
  border: 2px dashed var(--primaire);
  color: var(--primaire);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.btn-aide-heure:hover { opacity: 1; }

.aide-heure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}
.aide-heure-titre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primaire);
  margin: 0;
}
.aide-heure-legende {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  background: #f3f0ff;
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
.aide-legende-item {
  font-size: 0.88rem;
  font-weight: 600;
}
.aide-legende-item.heures { color: #5344c7; }
.aide-legende-item.minutes { color: #008b88; }
.aide-heure-exemples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  width: 100%;
}
.aide-ex {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fafafa;
  border-radius: 10px;
  padding: 0.3rem 0.1rem 0.4rem;
}
.aide-ex .grande-horloge { animation: none; }
.aide-ex-label {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.aide-ex-sub {
  margin: 0;
  font-size: 0.68rem;
  color: #666;
  line-height: 1.3;
}
.btn-retour-aide {
  background: var(--primaire);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.25rem;
}

.btn-horloge {
  padding: 0.45rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes horloge-bonne {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-9deg) scale(1.07);
  }
  75% {
    transform: rotate(9deg) scale(1.07);
  }
}

.btn-horloge.bonne {
  animation: horloge-bonne 0.45s ease-in-out;
}

/* ── Durées ──────────────────────────────────────────────────────────────── */

.duree-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* ── Problème du jour ────────────────────────────────────────────────────── */

.probleme-question {
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: center;
}

/* ── Masse ───────────────────────────────────────────────────────────────── */

.masse-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.masse-objets {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  justify-content: center;
  margin: 0.35rem 0;
}

.masse-objet {
  text-align: center;
  font-size: clamp(2rem, 10vw, 3rem);
  line-height: 1.3;
}

.masse-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primaire);
  display: block;
}

.masse-vs {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.55;
}

/* ── Périmètre ───────────────────────────────────────────────────────────── */

.perimetre-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* ── Angles ──────────────────────────────────────────────────────────────── */

.angle-question {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: apparition-horloge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Réaction renard en jeu ──────────────────────────────────── */
.renard-reaction {
  position: fixed;
  bottom: 80px;
  right: -120px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  pointer-events: none;
  transition: right 0s;
}
.renard-reaction.visible {
  animation: renard-slide-in 1.8s ease forwards;
}
.renard-reaction.encourage {
  animation: renard-encourage 2s ease forwards;
}
@keyframes renard-slide-in {
  0%   { right: -120px; transform: translateY(0); }
  20%  { right: 12px;   transform: translateY(0); }
  35%  { right: 12px;   transform: translateY(-18px); }
  50%  { right: 12px;   transform: translateY(0); }
  65%  { right: 12px;   transform: translateY(-10px); }
  80%  { right: 12px;   transform: translateY(0); }
  100% { right: -120px; transform: translateY(0); }
}
@keyframes renard-encourage {
  0%   { right: -120px; transform: rotate(0deg); }
  20%  { right: 12px;   transform: rotate(0deg); }
  40%  { right: 12px;   transform: rotate(-12deg); }
  60%  { right: 12px;   transform: rotate(8deg); }
  80%  { right: 12px;   transform: rotate(0deg); }
  100% { right: -120px; transform: rotate(0deg); }
}
.renard-bulle {
  background: white;
  border: 2px solid var(--primaire);
  border-radius: 14px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primaire);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ── Jauges ──────────────────────────────────────────────────── */
.maison-jauges {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.jauge-ligne {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 0.5rem;
}
.jauge-label {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.jauge-barre-fond {
  background: #eee;
  border-radius: 10px;
  height: 12px;
  overflow: hidden;
}
.jauge-barre-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
}
.jauge-faim    { background: linear-gradient(90deg, #fdcb6e, #e17055); }
.jauge-bonheur { background: linear-gradient(90deg, #fd79a8, #e84393); }
.jauge-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  text-align: right;
}
.maison-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-action-renard {
  background: white;
  border: 2.5px solid var(--primaire);
  color: var(--primaire);
  border-radius: 16px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.btn-action-renard:hover:not(:disabled) {
  background: var(--primaire);
  color: white;
}
.btn-action-renard:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Bannière Ma Maison (haut du menu) ──────────────────────── */
.maison-banner {
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(135deg, #5f50e0 0%, #9b8ff8 60%, #c084fc 100%);
  border: none;
  border-radius: 1.4rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  gap: 0.75rem;
  box-shadow: 0 5px 0 #3d2fc0, 0 8px 24px rgba(108,92,231,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
  text-align: left;
}
.maison-banner:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #3d2fc0, 0 4px 12px rgba(108,92,231,0.25);
}
.maison-banner-fox {
  line-height: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
.maison-banner-infos {
  flex: 1;
  min-width: 0;
}
.maison-banner-nom {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maison-banner-sub {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.78);
  margin-top: 0.1rem;
}
.maison-banner-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  flex-shrink: 0;
}
.maison-banner-stars {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fdcb6e;
  letter-spacing: 0.02em;
}
.maison-banner-fleche {
  font-size: 1.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  margin-top: -0.1rem;
}

/* ── Écran Ma Maison ─────────────────────────────────────────── */
.maison-titre {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0 0 0.75rem;
}

.maison-conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0 0 1.5rem;
}
.maison-renard {
  line-height: 0;
  animation: renard-respire 3s ease-in-out infinite;
}
@keyframes renard-respire {
  0%, 100% { transform: scaleY(1);   }
  50%       { transform: scaleY(1.03); }
}
.maison-infos {
  text-align: center;
}
.maison-nom {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0 0 0.15rem;
}
.maison-stade {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.15rem;
}
.maison-jours {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
}
.maison-etoiles {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff9e6;
  border: 2px solid #fdcb6e;
  border-radius: 20px;
  padding: 0.4rem 1.1rem;
}
.maison-etoiles-icone { font-size: 1.4rem; }
.maison-etoiles-total {
  font-size: 1.6rem;
  font-weight: 800;
  color: #e17055;
}
.maison-progression {
  width: 100%;
  max-width: 280px;
}
.maison-prog-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  margin: 0 0 0.35rem;
  text-align: center;
}
.maison-barre-fond {
  background: #eee;
  border-radius: 10px;
  height: 12px;
  overflow: hidden;
}
.maison-barre-remplie {
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7, #fd79a8);
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Évolution renard ─────────────────────────────────────────── */
.evolution-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.evolution-carte {
  background: white;
  border-radius: 24px;
  padding: 2rem 1.5rem;
  text-align: center;
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  animation: evolutionZoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes evolutionZoom {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}
.evolution-renard {
  line-height: 0;
  animation: flotte 2.5s ease-in-out infinite;
}
.evolution-titre {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0;
}
.evolution-nom-stade {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}
.evolution-msg {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
}
.btn-evolution-fermer {
  background: var(--primaire);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.65rem 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 0.3rem;
}

/* ── Dressing ── */
.btn-dressing {
  display: block;
  margin: 0.8rem auto 0;
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.6rem 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 10px rgba(108, 92, 231, 0.35);
}
.dressing-titre {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0.5rem 0 0.2rem;
}
.dressing-sous-titre {
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  margin: 0 0 0.8rem;
}
.dressing-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  line-height: 0;
}
.dressing-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 380px;
  margin: 0 auto;
}
.dressing-carte {
  background: white;
  border: 3px solid #e0e0e0;
  border-radius: 16px;
  padding: 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.dressing-carte.equipe {
  border-color: var(--primaire);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25);
}
.dressing-carte.verrouille {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(60%);
}
.dressing-carte-nom {
  font-size: 0.85rem;
  font-weight: 700;
  color: #444;
  text-align: center;
}
.dressing-carte-badge {
  font-size: 0.7rem;
  background: #eee;
  color: #888;
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
}
.dressing-carte.equipe .dressing-carte-badge {
  background: var(--primaire);
  color: white;
}

/* ── Combo ── */
.combo-carte {
  gap: 0.5rem;
}
.combo-flamme {
  font-size: 1.3rem;
  font-weight: 900;
  color: #e17055;
  margin: 0;
  animation: flotte 1s ease-in-out infinite;
}

/* ── Planche des cent ──────────────────────────── */
.planche-mini {
  border-collapse: collapse;
  margin: 1rem auto;
  font-size: 1.2rem;
  font-weight: 700;
}
.planche-mini td {
  width: 2.8rem;
  height: 2.8rem;
  text-align: center;
  border: 2px solid var(--ombre);
  border-radius: 0.4rem;
  background: white;
}
.planche-vide {
  background: linear-gradient(135deg, var(--primaire), #a29bfe) !important;
  color: white;
  font-size: 1.5rem;
}

/* ── Grammaire Montessori ──────────────────────── */
.mot-cible {
  text-decoration: underline;
  text-decoration-color: var(--primaire);
  font-size: 1.3em;
}
.grammaire-nom    { color: #111; }
.grammaire-verbe  { color: #c0392b; }
.grammaire-adjectif { color: #2980b9; }
.grammaire-determinant { color: #1a6b3a; }

/* ── Perles dorées ─────────────────────────────── */
.perles-conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.perle-groupe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.perle-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
}
.perle-unite  { font-size: 1.2rem; color: #f39c12; }
.perle-dizaine { font-size: 1.6rem; color: #e67e22; }
.perle-centaine { font-size: 2rem; color: #d4ac0d; }
.perle-millier  { font-size: 2.4rem; color: #b7950b; }

/* ── Maîtrise (stars) ──────────────────────────── */
.maitrise-stars {
  display: block;
  font-size: 0.7rem;
  color: #f39c12;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}
.carte-diff-badge {
  position: absolute;
  bottom: 0.32rem;
  right: 0.38rem;
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.85;
}
.carte-jeu.jeu-maitrise {
  opacity: 0.55;
}
.carte-jeu.jeu-maitrise::after {
  content: "✅";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.8rem;
  line-height: 1;
}

/* ── Toast progression difficulté ─────────────────────────────────────────── */
.toast-progression {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-5rem);
  background: white;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  box-shadow: 0 4px 24px rgba(108, 92, 231, 0.25);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 150;
  white-space: nowrap;
  border: 2px solid var(--primaire);
  animation: toastEntree 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             toastSortie 0.4s 2.7s ease forwards;
}

@keyframes toastEntree {
  to { transform: translateX(-50%) translateY(0); }
}
@keyframes toastSortie {
  to { opacity: 0; transform: translateX(-50%) translateY(-1.5rem); }
}

/* ── Modal classe suivante ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 52, 54, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: entree 0.25s ease;
  padding: 1rem;
}

.modal-contenu {
  background: white;
  border-radius: 1.8rem;
  padding: 2rem 1.5rem 1.5rem;
  max-width: 22rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

.modal-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; }

.modal-titre {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primaire);
  margin: 0 0 0.6rem;
}

.modal-texte {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  color: var(--texte);
}

.modal-btns { display: flex; flex-direction: column; gap: 0.6rem; }

.btn-modal-oui {
  background: linear-gradient(135deg, var(--primaire), #a29bfe);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
  transition: transform 0.14s ease;
}
.btn-modal-oui:hover { transform: translateY(-2px); }
.btn-modal-oui:active { transform: scale(0.97); }

.btn-modal-non {
  background: none;
  border: 2px solid #dfe6e9;
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  color: #999;
  transition: border-color 0.14s, color 0.14s;
}
.btn-modal-non:hover { border-color: var(--texte); color: var(--texte); }

/* ── Missions du jour ──────────────────────────────────────────────────────── */
.missions-section { margin: 1rem 0; }
.missions-titre { font-size: 1rem; font-weight: 700; color: var(--primaire); margin-bottom: 0.6rem; }
.mission-item { display:flex; align-items:center; gap:0.6rem; background:white; border-radius:1rem; padding:0.7rem 1rem; margin-bottom:0.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.07); }
.mission-emoji { font-size:1.4rem; flex-shrink:0; }
.mission-texte { flex:1; font-size:0.85rem; font-weight:600; }
.mission-progress { font-size:0.75rem; color:#999; }
.mission-item.complete { opacity:0.6; }
.mission-item.complete .mission-texte { text-decoration:line-through; }
.mission-barre { height:4px; background:#eee; border-radius:2px; margin-top:4px; }
.mission-barre-fill { height:100%; background:linear-gradient(90deg,var(--primaire),var(--accent)); border-radius:2px; transition:width 0.4s ease; }

/* ── Badges / Trophées ─────────────────────────────────────────────────────── */
.btn-badges-menu { background:white; border:2px solid var(--primaire); color:var(--primaire); border-radius:999px; padding:0.4rem 1rem; font-family:inherit; font-weight:700; font-size:0.85rem; cursor:pointer; }
.badges-header { display:flex; align-items:center; gap:1rem; padding:1rem; flex-wrap:wrap; }
.badges-header h2 { margin:0; font-size:1.4rem; flex:1; }
#badges-compteur { font-size:0.9rem; color:#999; margin:0; }
.badges-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; padding:0.5rem 1rem 2rem; }
.badge-carte { background:white; border-radius:1.2rem; padding:1rem 0.6rem; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform 0.15s; }
.badge-carte.obtenu { border:2px solid var(--primaire); }
.badge-carte.verrouille { opacity:0.4; filter:grayscale(1); }
.badge-emoji { font-size:2rem; display:block; margin-bottom:0.3rem; }
.badge-nom { font-size:0.72rem; font-weight:700; line-height:1.2; }
.badge-desc { font-size:0.62rem; color:#999; margin-top:0.2rem; line-height:1.3; }
.btn-retour-small { background:none; border:none; font-size:1.2rem; cursor:pointer; padding:0.3rem; }

/* ── Cartes CM1/CM2 ─────────────────────────────────────────────────────────── */
.carte-jeu[data-cat="cm"]::before { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }

/* ── Notif badge (overlay) ─────────────────────────────────────────────────── */
.badge-notif-overlay { position:fixed; inset:0; background:rgba(45,52,54,0.6); display:flex; align-items:center; justify-content:center; z-index:300; animation:entree 0.25s ease; padding:1rem; }
.badge-notif-carte { background:white; border-radius:1.8rem; padding:2rem 1.5rem; max-width:20rem; width:100%; text-align:center; box-shadow:0 12px 48px rgba(0,0,0,0.2); }
.badge-notif-label { font-size:0.8rem; font-weight:700; color:var(--primaire); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; }
.badge-notif-emoji { font-size:4rem; display:block; margin:0.5rem 0; }
.badge-notif-nom { font-size:1.4rem; font-weight:800; color:var(--texte); margin:0 0 0.4rem; }
.badge-notif-desc { font-size:0.9rem; color:#636e72; margin:0 0 1.5rem; }

/* ── Tamagotchi UI ──────────────────────────────────────────────────────────── */
.tama-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #e8f4ff 0%, #fff5e6 100%);
  border-radius: 2rem;
  padding: 1.2rem 1rem 0.8rem;
  width: 100%;
  max-width: 320px;
  gap: 0.2rem;
  position: relative;
}
@keyframes bulle-pop { 0%{transform:scale(0.85);opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }
.tama-bulle {
  background: white;
  border: 2px solid var(--primaire);
  border-radius: 1rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primaire);
  text-align: center;
  position: relative;
  min-height: 1.8rem;
  animation: bulle-pop 0.3s ease;
}
.tama-bulle::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--primaire);
}
.tama-jauges { display:flex; flex-direction:column; gap:0.55rem; width:100%; max-width:260px; }
.tama-jauge-ligne { display:flex; align-items:center; gap:0.5rem; }
.tama-jauge-icone { font-size:1.4rem; width:1.8rem; text-align:center; }
.tama-segments { display:flex; gap:5px; flex:1; }
.tama-segment { flex:1; height:20px; border-radius:6px; transition:background 0.4s ease; }
.tama-segment.plein    { background: var(--succes); }
.tama-segment.mi-plein { background: var(--soleil); }
.tama-segment.vide     { background: #e0e0e0; }
@keyframes clignoter { 0%,100%{opacity:1} 50%{opacity:0.25} }
.tama-segment.critique { background: var(--erreur); animation: clignoter 0.8s ease infinite; }
.tama-actions { display:flex; gap:0.65rem; width:100%; max-width:320px; justify-content:center; }
.tama-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  border: none;
  border-radius: 1.2rem;
  padding: 0.85rem 0.3rem 0.7rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
  color: white;
  min-height: 84px;
}
.tama-btn:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,0.18); }
.tama-btn:disabled { opacity:0.42; cursor:not-allowed; }
.tama-btn-emoji { font-size:1.9rem; display:block; line-height:1.1; }
.tama-btn small { font-size:0.62rem; opacity:0.88; display:block; margin-top:0.1rem; }
.tama-btn-nourrir { background: linear-gradient(145deg, #fdcb6e, #e17055); }
.tama-btn-calin   { background: linear-gradient(145deg, #fd79a8, #d63031); }
.tama-btn-jouer   { background: linear-gradient(145deg, #00cec9, #0984e3); }
@keyframes monterEmoji { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-90px) scale(1.7);opacity:0} }
.emoji-flottant { position:fixed; font-size:2rem; pointer-events:none; z-index:500; animation:monterEmoji 0.9s ease-out forwards; transform-origin:center; }

/* ── Histoire narrative ─────────────────────────────────────────────────────── */
.histoire-intro-carte { max-width: 340px; }
.histoire-intro-emoji { font-size: 2rem; margin: 0 0 0.2rem; letter-spacing: 0.2em; }
.histoire-intro-texte { font-size: 0.92rem; color: #636e72; line-height: 1.6; margin: 0; }
.histoire-chapitre { border-top: 1px solid #f0f0f0; padding-top: 0.75rem; width: 100%; text-align: center; }
.histoire-chapitre-emoji { font-size: 1.8rem; margin: 0 0 0.15rem; }
.histoire-chapitre-titre { font-size: 0.88rem; font-weight: 700; color: var(--accent); margin: 0 0 0.25rem; }
.histoire-chapitre-texte { font-size: 0.8rem; color: #636e72; font-style: italic; margin: 0; line-height: 1.5; }
.histoire-panel { background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%); border-radius: 1.2rem; padding: 1rem 1.2rem; margin: 0.8rem 0; width: 100%; box-sizing: border-box; }
.histoire-panel-label { font-size: 0.72rem; font-weight: 700; color: var(--primaire); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.4rem; }
.histoire-panel-chapitre { font-size: 1rem; margin: 0 0 0.35rem; color: var(--texte); }
.histoire-panel-texte { font-size: 0.84rem; color: #636e72; line-height: 1.5; margin: 0 0 0.7rem; font-style: italic; }
.histoire-panel-suivant { font-size: 0.78rem; color: var(--primaire); margin: 0 0 0.35rem; font-weight: 600; }
.histoire-barre-fond { background: rgba(0,0,0,0.08); border-radius: 99px; height: 8px; overflow: hidden; }
.histoire-barre-fill { background: var(--primaire); border-radius: 99px; height: 100%; transition: width 0.6s ease; }

/* ── Cadre-dix (ten-frame) pour addition CP ─────────────────────────────── */
.cadre-dix-add { display:grid; grid-template-columns:repeat(5,2.4rem); grid-template-rows:repeat(2,2.4rem); gap:0.3rem; margin:0.6rem auto 0.2rem; border:3px solid var(--primaire); padding:0.5rem; border-radius:0.8rem; width:fit-content; background:#f8f6ff; }
.dix-cel { border-radius:0.4rem; border:2px solid #ccc; background:#fff; }
.dix-a { background:#fdcb6e; border-color:#d98600; }
.dix-b { background:#74b9ff; border-color:#0063c6; }
.dix-retire { background:#ff7675; border-color:#d63031; opacity:0.55; }
.dix-legende { font-size:1.7rem; font-weight:700; margin:0.2rem 0 0; }
.dix-leg-a { color:#d98600; }
.dix-leg-b { color:#0063c6; }
.decomp-hint { font-size:0.82rem; color:#6c5ce7; background:#f0eeff; border-radius:0.6rem; padding:0.35rem 0.7rem; margin-top:0.5rem; }


/* ── Footer SEO ──────────────────────────────────────────────────────────── */
.seo-footer { margin-top: 2rem; padding: 1rem 1.5rem; background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.06); text-align: center; }
.seo-footer p { font-size: 0.75rem; color: #888; line-height: 1.6; max-width: 680px; margin: 0 auto; }

/* ── Landing page marketing ──────────────────────────────────────────────────── */
#ecran-landing { display:flex; flex-direction:column; align-items:center; padding:1.5rem 1.2rem 3rem; gap:1.5rem; overflow-y:auto; background:var(--fond); min-height:100dvh; }

.landing-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.75rem; padding-top:0.5rem; }
.landing-fox { font-size:4rem; line-height:1; animation:bounce 2s ease-in-out infinite; }
.landing-titre { font-size:clamp(1.7rem, 6vw, 2.2rem); font-weight:700; color:var(--primaire); margin:0; }
.landing-sous-titre { font-size:clamp(0.95rem, 3.5vw, 1.1rem); color:var(--texte); margin:0; line-height:1.5; }
.landing-gratuit { font-size:0.82rem; color:#999; margin:0; }

.btn-landing-cta { background:var(--primaire); color:#fff; border:none; border-radius:2rem; padding:0.95rem 2.4rem; font-size:clamp(1rem, 4vw, 1.15rem); font-weight:700; font-family:inherit; cursor:pointer; box-shadow:0 4px 20px rgba(108,92,231,0.35); transition:transform 0.15s, box-shadow 0.15s; }
.btn-landing-cta:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(108,92,231,0.5); }
.btn-landing-cta:active { transform:translateY(0); }

.landing-features { display:flex; flex-direction:column; gap:0.75rem; width:100%; max-width:480px; }
.landing-feature { display:flex; align-items:center; gap:1rem; background:#fff; border-radius:1rem; padding:0.85rem 1.1rem; box-shadow:0 2px 12px var(--ombre); }
.landing-feat-icon { font-size:1.7rem; flex-shrink:0; }
.landing-feature strong { display:block; font-size:0.92rem; color:var(--texte); margin-bottom:0.12rem; }
.landing-feature p { font-size:0.78rem; color:#888; margin:0; line-height:1.4; }

.landing-matieres { display:flex; flex-wrap:wrap; gap:0.45rem; justify-content:center; max-width:480px; }
.landing-matieres span { background:#fff; border-radius:2rem; padding:0.38rem 0.85rem; font-size:0.82rem; color:var(--texte); box-shadow:0 1px 6px var(--ombre); }

/* ── Bouton partage landing ──────────────────────────────────────────────────── */
.btn-landing-partager { background:none; border:2px solid var(--primaire); color:var(--primaire); border-radius:2rem; padding:0.5rem 1.4rem; font-size:0.88rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s, color 0.15s; }
.btn-landing-partager:hover { background:var(--primaire); color:#fff; }

/* ── Bouton partage menu ─────────────────────────────────────────────────────── */
.btn-partager-menu { background:none; border:none; font-size:1.1rem; cursor:pointer; padding:0.3rem 0.5rem; border-radius:0.6rem; transition:background 0.15s; }
.btn-partager-menu:hover { background:rgba(108,92,231,0.1); }

/* ── Bandeau RGPD ────────────────────────────────────────────────────────────── */
.banner-rgpd { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#2d3436; color:#fff; padding:1rem 1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; justify-content:space-between; box-shadow:0 -4px 20px rgba(0,0,0,0.2); }
.banner-rgpd-texte { margin:0; font-size:0.82rem; line-height:1.5; flex:1; min-width:200px; }
.banner-rgpd-lien { color:#a29bfe; text-decoration:underline; }
.banner-rgpd-btns { display:flex; gap:0.6rem; flex-shrink:0; }
.btn-rgpd { border:none; border-radius:1.5rem; padding:0.5rem 1.2rem; font-size:0.82rem; font-weight:700; font-family:inherit; cursor:pointer; }
.btn-rgpd-refuser { background:rgba(255,255,255,0.12); color:#fff; }
.btn-rgpd-refuser:hover { background:rgba(255,255,255,0.22); }
.btn-rgpd-accepter { background:var(--primaire); color:#fff; }
.btn-rgpd-accepter:hover { background:var(--primaire-fonce); }