/* ════════════════════════════════════════════════════════
   LITTLE PROFESSOR AI — DESIGN SYSTEM V5
   Tokens · Composants partagés · Jeu · Responsive
   ════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Palette principale */
  --clr-bg:         #07081a;
  --clr-bg2:        #0d0f28;
  --clr-surface:    rgba(255,255,255,.05);
  --clr-surface2:   rgba(255,255,255,.08);
  --clr-border:     rgba(255,255,255,.08);
  --clr-border2:    rgba(255,255,255,.14);

  /* Accent primaire */
  --clr-accent:     #4facfe;
  --clr-accent2:    #00f2fe;
  --clr-accent-grd: linear-gradient(135deg,#4facfe,#00f2fe);
  /* Actions : base contrastée sous le texte blanc, transition vers le bleu ciel historique. */
  --clr-action-grd: linear-gradient(135deg,#1d4ed8 0%,#2563eb 52%,#4facfe 100%);

  /* Accent secondaire */
  --clr-purple:     #a855f7;
  --clr-purple2:    #7c3aed;
  --clr-purple-grd: linear-gradient(135deg,#a855f7,#7c3aed);

  /* Success / Warning / Danger */
  --clr-green:      #4ade80;
  --clr-yellow:     #fbbf24;
  --clr-orange:     #fb923c;  /* 25/07 : demande Richard, opérateur "-" sur la landing */
  --clr-red:        #f87171;
  --clr-green-grd:  linear-gradient(135deg,#43e97b,#38f9d7);

  /* Texte */
  --clr-text:       #e2e8f0;
  --clr-text-muted: rgba(255,255,255,.5);
  --clr-text-dim:   rgba(255,255,255,.3);

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.25);
  --shadow-md:  0 4px 20px rgba(0,0,0,.35);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.5);
  --glow-blue:  0 0 20px rgba(79,172,254,.35);
  --glow-green: 0 0 20px rgba(67,233,123,.35);

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  --font-num:  'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Échelle de lecture centralisée — adultes, seniors et enfants */
  --text-xs:   .875rem;   /* 14px : légendes réellement secondaires */
  --text-sm:   1rem;      /* 16px : texte courant minimum */
  --text-base: 1.0625rem; /* 17px : lecture confortable */
  --text-lg:   1.125rem;  /* 18px : aide et consignes importantes */
  --line-reading: 1.65;

  /* Courbes de transition "premium" (v6) — remplacent le `ease` par défaut
     sur les éléments à forte visibilité (cartes, boutons, plans). Décision
     produit : la cohérence du mouvement est ce qui distingue le plus un
     site "correct" d'un site "haut de gamme", à coût de perf quasi nul. */
  --ease-premium: cubic-bezier(.16,1,.3,1);      /* décélération douce et nette (type Linear/Apple) */
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);  /* léger rebond — réservé aux éléments ludiques/enfant */
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  width: 100%; min-height: 100%;
  font-family: var(--font-base);
  background: var(--clr-bg);
  color: var(--clr-text);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ── Focus clavier global (23/07, audit a11y) ──────────────────────────
   :focus-visible (pas :focus simple) : ne s'affiche que pour une navigation
   clavier/lecteur d'écran réelle, jamais au clic souris — évite l'anneau
   disgracieux au clic tout en garantissant WCAG 2.4.7 pour tout le monde.
   Seulement 3 sélecteurs très spécifiques avaient déjà leur propre style de
   focus (.lp-lang-switcher, .lp-input, .inline-pin-form input) ; ce filet
   générique couvre tout le reste (nav, liens, boutons du jeu, hubs SEO…). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* jeu : fond animé du canvas */
body.game-active { background: transparent; }

/* ─────────────────────────────────────────────────────
   COMPOSANTS PARTAGÉS
   ───────────────────────────────────────────────────── */

/* ── Topbar (admin / parent / jeu) ───────────────────── */
.lp-topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: rgba(7,8,26,.85);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--clr-border);
}
.lp-topbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800;
  background: var(--clr-accent-grd);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.lp-topbar-logo span { font-size: 22px; -webkit-text-fill-color: initial; }
.lp-topbar-links { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Icônes SVG trait fin dans les liens de topbar (harmonisation 03/07) —
   même langage visuel que les pastilles du HUD et le footer de play.php. */
.lp-topbar-link { display: inline-flex; align-items: center; gap: 6px; }
.lp-topbar-link svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.lp-topbar-link {
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--clr-surface); color: var(--clr-text-muted);
  text-decoration: none; font-size: 13px; font-weight: 500;
  border: 1px solid var(--clr-border);
  transition: all .2s;
}
.lp-topbar-link:hover { background: var(--clr-surface2); color: var(--clr-text); }
.lp-topbar-link.danger { color: var(--clr-red); }
.lp-topbar-link.danger:hover { background: rgba(248,113,113,.1); }
.lp-topbar-link.active { background: rgba(79,172,254,.12); color: var(--clr-accent); border-color: rgba(79,172,254,.3); }

/* ── Sélecteur de langue (pastille bleue, harmonisé topbar) ───────── */
.lp-lang-switcher {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 6px 28px 6px 14px;
  border-radius: var(--r-pill);
  background-color: rgba(79,172,254,.12);
  color: var(--clr-accent);
  border: 1px solid rgba(79,172,254,.3);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer; outline: none;
  line-height: 1.2;
  transition: all .2s;
  /* chevron bleu intégré */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234facfe' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.lp-lang-switcher:hover  { background-color: rgba(79,172,254,.2); border-color: rgba(79,172,254,.5); }
.lp-lang-switcher:focus  { box-shadow: 0 0 0 3px rgba(79,172,254,.18); }
.lp-lang-switcher option { background: var(--clr-bg2); color: var(--clr-text); font-weight: 500; }

/* ── Cards ───────────────────────────────────────────── */
.lp-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 22px;
}
.lp-card-title {
  font-size: 14px; font-weight: 700;
  color: var(--clr-text-muted);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ── Stat pills ──────────────────────────────────────── */
.lp-stat {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.lp-stat-val {
  font-size: 28px; font-weight: 800;
  background: var(--clr-accent-grd);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  display: block; line-height: 1.1;
}
.lp-stat-label { font-size: 12px; font-weight: 600; color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* ── Boutons ─────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border: none; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: all .2s;
  white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-1px); opacity: .9; }
.lp-btn:active { transform: scale(.97); }
.lp-btn-primary { background: var(--clr-action-grd); color: #fff; box-shadow: var(--glow-blue); }
.lp-btn-secondary { background: var(--clr-surface2); color: var(--clr-text); border: 1px solid var(--clr-border2); }
.lp-btn-danger { background: rgba(248,113,113,.15); color: var(--clr-red); border: 1px solid rgba(248,113,113,.25); }
.lp-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--r-sm); }

/* ── Inputs ──────────────────────────────────────────── */
/* Tailles augmentées 25/07 (demande Richard : lisibilité "papi et mamie" sur
   les parcours de connexion/inscription/cadeau — un acheteur senior mérite un
   confort de lecture réel). Classe partagée : affecte aussi backoffice.php,
   parent.php, mot-de-passe-oublie.php, reinitialiser-mot-de-passe.php, et
   les champs du dashboard admin.php (nom/âge/PIN enfant) — bénéfice généralisé
   sans effet de bord négatif identifié (un champ plus grand ne nuit nulle part). */
.lp-input {
  width: 100%; padding: 13px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--clr-border2);
  border-radius: var(--r-md);
  color: var(--clr-text); font-size: 16px;
  outline: none; transition: border-color .2s;
}
.lp-input:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(79,172,254,.15); }
.lp-input::placeholder { color: var(--clr-text-dim); }

/* ── Badges plan ─────────────────────────────────────── */
.badge-plan { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }
.badge-plan-free    { background: rgba(255,255,255,.08); color: var(--clr-text-muted); }
.badge-plan-premium { background: rgba(251,191,36,.15);  color: var(--clr-yellow); }
.badge-plan-family  { background: rgba(74,222,128,.15);  color: var(--clr-green); }
.badge-status { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }
.badge-status-trial   { background: rgba(79,172,254,.15);  color: var(--clr-accent); }
.badge-status-active  { background: rgba(74,222,128,.15);  color: var(--clr-green); }
.badge-status-expired { background: rgba(248,113,113,.15); color: var(--clr-red); }

/* ── Alertes ─────────────────────────────────────────── */
.lp-alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 16px; border-left: 3px solid; }
.lp-alert-error   { background: rgba(248,113,113,.1); color: #fca5a5; border-color: var(--clr-red); }
.lp-alert-success { background: rgba(74,222,128,.1);  color: #86efac; border-color: var(--clr-green); }
.lp-alert-info    { background: rgba(79,172,254,.1);  color: #93c5fd; border-color: var(--clr-accent); }

/* ── Fond + carte de formulaire PARTAGÉS (register/offrir/redeem) ──────
   Harmonisé le 25/07 : Richard a signalé (2 captures) qu'offrir.php n'était
   pas aligné sur register.php (largeur ET couleur), puis a lui-même suggéré
   la vraie solution : "si tu utilises les mêmes CSS pour tous les
   formulaires, elles seraient toutes harmonisées d'un coup." Reprend les
   valeurs exactes de l'ancien .register-card/.reg-content (register.php,
   seule page qui les avait) — désormais LA référence unique pour toute page
   de ce type. Toute future retouche (couleur, largeur, rayon) s'applique
   aux 3 pages en une fois, plus jamais de divergence à rattraper page par
   page. */
body.lp-auth-bg {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(79,172,254,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(168,85,247,.06) 0%, transparent 55%),
    var(--clr-bg);
}
.lp-form-content {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 28px 16px 60px;
}
.lp-form-card {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--clr-border2);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 520px) {
  .lp-form-card { padding: 24px 18px; border-radius: 18px; }
}

/* ── Login card (partagé admin/parent) ───────────────── */
.lp-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, rgba(79,172,254,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(168,85,247,.06) 0%, transparent 60%),
              var(--clr-bg);
  padding: 24px;
}
.lp-login-box { width: 100%; max-width: 420px; }
.lp-login-logo { text-align: center; font-size: 52px; margin-bottom: 12px; }
.lp-login-title { text-align: center; font-size: 26px; font-weight: 800; color: var(--clr-text); margin-bottom: 4px; }
.lp-login-sub   { text-align: center; font-size: 14px; color: var(--clr-text-muted); margin-bottom: 28px; }
.lp-login-card  { background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid var(--clr-border2); border-radius: var(--r-xl); padding: 32px 28px; }
.lp-login-label { display: block; font-size: 14px; font-weight: 700; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; margin-top: 14px; }
.lp-login-label:first-of-type { margin-top: 0; }
.lp-login-links { text-align: center; margin-top: 20px; font-size: 13px; color: var(--clr-text-muted); }
.lp-login-links a { color: var(--clr-accent); text-decoration: none; }
.lp-login-links a:hover { text-decoration: underline; }
.lp-login-divider { color: rgba(255,255,255,.2); margin: 0 8px; }

/* ── Trust badges (bas de page, avant footer) — 27/07 ── */
.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 72px); /* espacement fluide : compact sur petit écran, plafonné sur desktop */
  padding: 40px 20px;
}
.trust-badges img { display: block; height: 44px; width: auto; opacity: 1; }
@media (max-width: 480px) {
  .trust-badges { gap: 16px; padding: 28px 16px; }
}

/* ─────────────────────────────────────────────────────
   JEU — PLAY.PHP
   ───────────────────────────────────────────────────── */

/* HUD */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  background: rgba(7,8,26,.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hud-left, .hud-right { display: flex; gap: 14px; align-items: center; }
.hud-item { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hud-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.45); margin-bottom: 1px; }
.hud-value { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
/* .hud-shop-btn supprimée le 12/07 — dernière page à l'utiliser (demo.php)
   migrée vers .hud-chip (harmonisation SVG). Zéro référence restante. */

/* Sélecteur de langue */
.lang-switcher {
  position: fixed; top: 50px; right: 10px; z-index: 102;
  display: flex; gap: 3px;
  background: rgba(0,0,0,.4); backdrop-filter: blur(10px);
  padding: 4px 6px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.1);
}
.lang-btn {
  background: transparent; border: 2px solid transparent;
  border-radius: var(--r-pill); padding: 2px 4px;
  font-size: 16px; cursor: pointer; opacity: .5;
  transition: all .2s; line-height: 1;
  -webkit-user-select: none; user-select: none;
}
.lang-btn:hover { opacity: .85; transform: scale(1.1); }
.lang-btn.active { opacity: 1; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }

/* ─────────────────────────────────────────────────────
   COMPAGNON — redesign V4
   Position : bande fixe entre la zone de question et le pavé.
   Look & feel : même surface sombre que le reste du jeu.
   ───────────────────────────────────────────────────── */
#companion-bubble {
  /* Bande horizontale au bas du viewport, juste au-dessus du pavé */
  position: fixed;
  bottom: 310px;          /* au-dessus du pavé (~300px) + marge */
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: 92%; max-width: 500px;   /* même largeur que #question-area */

  display: none;          /* géré par JS */
  align-items: flex-end;  /* v4.3 : le personnage « au sol », la bulle part de lui */
  gap: 10px;

  /* v4.3 : le conteneur devient TRANSPARENT — le verre est déplacé sur
     .companion-content, qui devient une vraie bulle de DIALOGUE avec queue
     pointée vers le personnage (désormais HORS de la bulle, comme en BD). */
  background: transparent;
  border: none;
  padding: 0;

  /* Entrée / sortie gérée par les classes .cb-in / .cb-out */
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
#companion-bubble.cb-in  { opacity: 1; transform: translateX(-50%) translateY(0); }
#companion-bubble.cb-out { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* Avatar — v4.6 (10/07, demande Richard) : SANS cercle, fond transparent.
   Le personnage vit directement dans l'interface ; les halos (univers, fête)
   passent de box-shadow à drop-shadow — la lueur épouse la SILHOUETTE. */
.companion-avatar {
  font-size: 30px;
  min-width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; top: -7px;
  background: transparent;
  filter: drop-shadow(0 0 9px rgba(79,172,254,.5));
  animation: compBounce var(--cv5-tempo, 2.4s) ease-in-out infinite; /* v5 : tempo émotionnel (companion-engine.js) */
}
@keyframes compBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ── Compagnon v4 (10/07) — personnage SVG animé ─────────────────────────
   Le SVG est injecté par companion.js (getSVG). Clignement des yeux,
   antenne du robot, bouche par humeur (mood-happy / mood-comfort /
   mood-party posées sur .companion-avatar par setMood), halo teinté par
   univers via les classes body.world-* posées par worlds.js.
   Repli prefers-reduced-motion : tout est statique. */
.companion-avatar svg { width: 48px; height: 48px; display: block; overflow: visible; }
.comp-picker-btn svg { width: 44px; height: 44px; vertical-align: middle; overflow: visible; pointer-events: none; }
/* v4.2 — avatars SVG dans les tooltips de modes (play.php) et de la landing */
.mode-tip-avatar svg, .land-tip-avatar svg { width: 38px; height: 38px; overflow: visible; } /* v4.6 : sans cercle, le personnage occupe l'espace */
.cv4-eye { transform-origin: center; transform-box: fill-box; animation: cv4Blink var(--cv5-blink, 4.4s) ease-in-out var(--blink-offset, 0s) infinite; } /* v5 : cadence émotionnelle ; v6 (26/07) : + délai var(--blink-offset), posé en JS par bouton du sélecteur (companion.js) pour désynchroniser les 5 compagnons — défaut 0s, comportement de la bulle inchangé */
@keyframes cv4Blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.cv4-antenna { transform-origin: 50% 100%; transform-box: fill-box; animation: cv4Antenna 3.2s ease-in-out infinite; }
@keyframes cv4Antenna { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.cv4-mouth-happy, .cv4-mouth-soft { display: none; }
.companion-avatar.mood-happy .cv4-mouth-happy,
.companion-avatar.mood-party .cv4-mouth-happy { display: block; }
.companion-avatar.mood-happy .cv4-mouth-idle,
.companion-avatar.mood-party .cv4-mouth-idle { display: none; }
.companion-avatar.mood-comfort .cv4-mouth-soft { display: block; }
.companion-avatar.mood-comfort .cv4-mouth-idle { display: none; }
.companion-avatar.mood-comfort .cv4-eye { animation: none; transform: scaleY(.55); }
.companion-avatar.mood-happy svg, .comp-picker-btn.just-picked svg { animation: cv4Hop .55s cubic-bezier(.3,1.6,.4,1); } /* 27/07 (demande Richard) : just-picked réutilise le hop « happy » existant pour le clic dans le sélecteur (cf. companion.js) — pas d'animation dupliquée */
@keyframes cv4Hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-7px) scale(1.08,.94); } 60% { transform: translateY(0) scale(.96,1.05); } 100% { transform: translateY(0) scale(1); } }
.companion-avatar.mood-comfort svg { animation: cv4Tilt 1.1s ease; }
@keyframes cv4Tilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } }
.companion-avatar.mood-party svg { animation: cv4Party .45s ease-in-out 3; }
@keyframes cv4Party { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-10deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }
#companion-bubble .companion-avatar.mood-party { filter: drop-shadow(0 0 12px rgba(250,204,21,.8)); }
/* Halo teinté par univers (mêmes teintes que GLOW_COLOR de worlds.js) — v4.6 : drop-shadow silhouette */
body.world-forest .companion-avatar { filter: drop-shadow(0 0 9px rgba(52,211,153,.6)); }
body.world-ocean .companion-avatar { filter: drop-shadow(0 0 9px rgba(56,189,248,.65)); }
body.world-mountain .companion-avatar { filter: drop-shadow(0 0 9px rgba(251,146,60,.65)); }
body.world-temple .companion-avatar { filter: drop-shadow(0 0 9px rgba(192,132,252,.65)); }
body.world-galaxy .companion-avatar { filter: drop-shadow(0 0 9px rgba(255,224,130,.65)); }
@media (prefers-reduced-motion: reduce) {
  .companion-avatar, .cv4-eye, .cv4-antenna,
  .companion-avatar.mood-happy svg, .companion-avatar.mood-comfort svg,
  .companion-avatar.mood-party svg, .comp-picker-btn.just-picked svg { animation: none; } /* 27/07 : nouveau hop du sélecteur inclus */
}

/* ─────────────────────────────────────────────────────
   COMPAGNON V5 — moteur vivant (12/07/2026)
   Consommé par assets/companion-engine.js : micro-comportements Idle
   (classes cv5-do-* posées sur .companion-avatar), regard via variables
   --cv5-gx/--cv5-gy (translate sur .cv5-gaze — DÉCOUPLÉ du scaleY du
   clignement cv4Blink, jamais les deux sur le même élément), secondary
   motion des pièces souples sous les humeurs mood-*, particules SVG .cv5-fx.
   Tout est transform/opacity. Sans le moteur (index.php, JS coupé) : inerte.
   ───────────────────────────────────────────────────── */
#companion-bubble .companion-avatar { position: relative; cursor: pointer; }
.companion-avatar .cv5-gaze { transform: translate(var(--cv5-gx, 0px), var(--cv5-gy, 0px)); transition: transform .55s cubic-bezier(.3,.9,.35,1); }
.cv5-ear, .cv5-wing, .cv5-horns, .cv5-barb, .cv5-brow, .cv5-pod, .cv5-scan, .cv5-cheek, .cv5-gaze,
.cv5-tassel, .cv5-cap, .cv5-glasses, .cv5-mane-back, .cv5-mane-front, .cv5-horn { transform-box: fill-box; } /* v7.1 : -back/-front (les groupes réels depuis la refonte v7), cv5-horn remplace cv5-glint */
.cv5-ear-l { transform-origin: 80% 95%; }  .cv5-ear-r { transform-origin: 20% 95%; }
.cv5-wing-l { transform-origin: 95% 60%; } .cv5-wing-r { transform-origin: 5% 60%; }
.cv5-horns { transform-origin: 50% 100%; }
.cv5-barb-l { transform-origin: 90% 5%; }  .cv5-barb-r { transform-origin: 10% 5%; }
.cv5-brow, .cv5-pod, .cv5-cheek, .cv5-glasses { transform-origin: 50% 50%; }
.cv5-tassel { transform-origin: 50% 0%; }  .cv5-cap { transform-origin: 50% 85%; }
.cv5-mane-back { transform-origin: 50% 0%; } .cv5-mane-front { transform-origin: 55% 15%; } /* racines au sommet du crâne — v7.1 : l'ancien .cv5-mane ne matchait plus les groupes -back/-front, crinière figée depuis la v7 */
.cv5-horn { transform-origin: 50% 100%; }

/* ── Catalogue Idle universel (corps entier — jamais pendant un mood-*) ── */
.cv5-do-tilt-l svg { animation: cv5TiltL 2.2s ease-in-out; }
.cv5-do-tilt-r svg { animation: cv5TiltR 2.2s ease-in-out; }
@keyframes cv5TiltL { 0%,100% { transform: rotate(0); } 22%,78% { transform: rotate(-5deg); } }
@keyframes cv5TiltR { 0%,100% { transform: rotate(0); } 22%,78% { transform: rotate(5deg); } }
.cv5-do-sway svg { animation: cv5Sway 3s ease-in-out; }
@keyframes cv5Sway { 0%,100% { transform: rotate(0); } 25% { transform: rotate(2.4deg); } 75% { transform: rotate(-2.4deg); } }
.cv5-do-peek svg { animation: cv5Peek 2s ease-in-out; }
@keyframes cv5Peek { 0%,100% { transform: translateX(0); } 30%,70% { transform: translateX(2.5px); } }
.cv5-do-stretch svg { animation: cv5Stretch 1.4s cubic-bezier(.35,1.4,.45,1); }
@keyframes cv5Stretch { 0%,100% { transform: scale(1,1); } 35% { transform: scale(.96,1.07) translateY(-1px); } 65% { transform: scale(1.03,.97); } }
.cv5-do-minihop svg { animation: cv5MiniHop .55s cubic-bezier(.3,1.6,.4,1); }
@keyframes cv5MiniHop { 0%,100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-4px) scale(1.04,.96); } 70% { transform: translateY(0) scale(.98,1.03); } }
.cv5-do-yawn svg { animation: cv5Yawn 1.6s ease-in-out; }
@keyframes cv5Yawn { 0%,100% { transform: scale(1); } 30% { transform: scale(1.05,.93); } 55% { transform: scale(.97,1.05) rotate(-2deg); } 80% { transform: scale(1); } }
.cv5-do-yawn .cv4-mouth-idle { display: none; }  .cv5-do-yawn .cv4-mouth-soft { display: block; }
.cv5-do-smile .cv4-mouth-idle { display: none; } .cv5-do-smile .cv4-mouth-happy { display: block; }
.cv5-do-blink2 .cv4-eye { animation: cv5Blink2 .75s ease-in-out; }
@keyframes cv5Blink2 { 0%,40%,80%,100% { transform: scaleY(1); } 15%,55% { transform: scaleY(.1); } }
.cv5-do-brow .cv5-brow { animation: cv5Brow .85s ease-in-out; }
@keyframes cv5Brow { 0%,100% { transform: translateY(0); } 25%,70% { transform: translateY(-1.6px); } }
.cv5-do-attend svg { animation: cv5Attend 1.6s ease-in-out; } /* l'enfant hésite → présence attentive */
@keyframes cv5Attend { 0%,100% { transform: scale(1) translateY(0); } 25%,75% { transform: scale(1.04) translateY(-1.5px); } }
.cv5-do-tickle svg { animation: cv5Tickle .7s cubic-bezier(.3,1.5,.4,1); } /* clic = chatouille */
@keyframes cv5Tickle { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-7deg) scale(1.06,.95); } 45% { transform: rotate(6deg) scale(.97,1.05); } 70% { transform: rotate(-3deg) scale(1.02); } }

/* ── Renard : oreilles, sourcils ── */
.cv5-do-ear-l .cv5-ear-l { animation: cv5EarFlickL .65s cubic-bezier(.3,1.5,.4,1); }
.cv5-do-ear-r .cv5-ear-r { animation: cv5EarFlickR .65s cubic-bezier(.3,1.5,.4,1); }
@keyframes cv5EarFlickL { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-13deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes cv5EarFlickR { 0%,100% { transform: rotate(0); } 30% { transform: rotate(13deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
.cv5-do-ear-perk .cv5-ear-l { animation: cv5PerkL .9s ease-in-out; }
.cv5-do-ear-perk .cv5-ear-r { animation: cv5PerkR .9s ease-in-out; }
@keyframes cv5PerkL { 0%,100% { transform: rotate(0); } 30%,70% { transform: rotate(6deg); } }
@keyframes cv5PerkR { 0%,100% { transform: rotate(0); } 30%,70% { transform: rotate(-6deg); } }

/* ── Dragon : ailerons, barbillons ── */
.cv5-do-wings .cv5-wing-l { animation: cv5WingL .85s ease-in-out; }
.cv5-do-wings .cv5-wing-r { animation: cv5WingR .85s ease-in-out; }
@keyframes cv5WingL { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
@keyframes cv5WingR { 0%,100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 55% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.cv5-do-barb .cv5-barb-l, .cv5-do-barb .cv5-barb-r { animation: cv5Barb 1.5s ease-in-out; }
@keyframes cv5Barb { 0%,100% { transform: rotate(0); } 30% { transform: rotate(5deg); } 70% { transform: rotate(-4deg); } }

/* ── Robot : antenne, scanline, pods, joues LED, servo ── */
.cv5-do-ping .cv4-antenna { animation: cv5Ping .95s cubic-bezier(.3,1.4,.4,1); }
@keyframes cv5Ping { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } 88% { transform: rotate(3deg); } }
.cv5-do-scan .cv5-scan { animation: cv5Scan 1.3s ease-in-out; }
@keyframes cv5Scan { 0%,100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(24px); opacity: .4; } }
.cv5-do-pods .cv5-pod-l { animation: cv5Pod .85s ease-in-out; }
.cv5-do-pods .cv5-pod-r { animation: cv5Pod .85s ease-in-out .12s; }
@keyframes cv5Pod { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-2.5px); } 70% { transform: translateY(.8px); } }
.cv5-do-cheeks .cv5-cheek { animation: cv5Cheek .95s ease-in-out; }
@keyframes cv5Cheek { 0%,100% { opacity: .55; } 30% { opacity: 1; } 60% { opacity: .3; } }
.cv5-do-servo svg { animation: cv5Servo 1.25s ease-in-out; } /* rotation à crans, volontairement mécanique */
@keyframes cv5Servo { 0%,100% { transform: rotate(0); } 20%,45% { transform: rotate(-4deg); } 55%,75% { transform: rotate(2deg); } }

/* ── Petit Prof (v5.1) : pompon, lunettes, toque ── */
.cv5-do-tassel .cv5-tassel { animation: cv5Tassel 1.25s cubic-bezier(.35,1.3,.4,1); }
@keyframes cv5Tassel { 0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 55% { transform: rotate(-9deg); } 80% { transform: rotate(4deg); } }
.cv5-do-glasses .cv5-glasses { animation: cv5Glasses .95s ease-in-out; } /* « remonte ses lunettes » */
@keyframes cv5Glasses { 0%,100% { transform: translateY(0); } 30% { transform: translateY(1.3px); } 60% { transform: translateY(-.7px); } }
.cv5-do-cap .cv5-cap { animation: cv5CapTip 1.05s ease-in-out; }
@keyframes cv5CapTip { 0%,100% { transform: rotate(0); } 30%,70% { transform: rotate(-4deg); } }

/* ── Licorne (v6.0) : crinière, reflet de corne ── */
.cv5-do-mane .cv5-mane-back, .cv5-do-mane .cv5-mane-front { animation: cv5Mane 1.4s ease-in-out; }
@keyframes cv5Mane { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-3.5deg); } 65% { transform: rotate(2.5deg); } }
.cv5-do-glint .cv5-horn { animation: cv5HornGlint 1.1s ease-in-out; } /* v7.1 : la CORNE scintille (le point .cv5-glint n'existe plus dans le design v7) */
@keyframes cv5HornGlint { 0%,100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(.98) rotate(1deg); } }

/* ── Secondary motion — les pièces souples SUIVENT l'action principale
   (follow-through légèrement retardé, overlap) pendant les humeurs mood-*.
   Pur CSS : se déclenche même sans le moteur, dès que setMood pose la classe. ── */
.companion-avatar.mood-happy .cv5-ear-l { animation: cv5EarFlickL .7s ease-in-out .06s both; }
.companion-avatar.mood-happy .cv5-ear-r { animation: cv5EarFlickR .7s ease-in-out .06s both; }
.companion-avatar.mood-happy .cv5-wing-l { animation: cv5WingL .7s ease-in-out .05s both; }
.companion-avatar.mood-happy .cv5-wing-r { animation: cv5WingR .7s ease-in-out .05s both; }
.companion-avatar.mood-happy .cv4-antenna { animation: cv5Ping .8s cubic-bezier(.3,1.4,.4,1) .05s both; }
.companion-avatar.mood-happy .cv5-pod-l { animation: cv5Pod .7s ease-in-out .08s both; }
.companion-avatar.mood-happy .cv5-pod-r { animation: cv5Pod .7s ease-in-out .16s both; }
.companion-avatar.mood-comfort .cv5-ear-l { animation: cv5DroopL 1.1s ease both; }
.companion-avatar.mood-comfort .cv5-ear-r { animation: cv5DroopR 1.1s ease both; }
@keyframes cv5DroopL { 0%,100% { transform: rotate(0); } 40%,75% { transform: rotate(8deg); } }
@keyframes cv5DroopR { 0%,100% { transform: rotate(0); } 40%,75% { transform: rotate(-8deg); } }
.companion-avatar.mood-comfort .cv5-wing-l { animation: cv5FoldL 1.1s ease both; }
.companion-avatar.mood-comfort .cv5-wing-r { animation: cv5FoldR 1.1s ease both; }
@keyframes cv5FoldL { 0%,100% { transform: rotate(0); } 40%,75% { transform: rotate(6deg) scale(.96); } }
@keyframes cv5FoldR { 0%,100% { transform: rotate(0); } 40%,75% { transform: rotate(-6deg) scale(.96); } }
.companion-avatar.mood-comfort .cv4-antenna { animation: cv5AntennaSad 1.1s ease both; }
@keyframes cv5AntennaSad { 0%,100% { transform: rotate(0); } 45%,80% { transform: rotate(-10deg); } }
.companion-avatar.mood-party .cv5-ear-l { animation: cv5EarFlickL .45s ease-in-out 3; }
.companion-avatar.mood-party .cv5-ear-r { animation: cv5EarFlickR .45s ease-in-out 3; }
.companion-avatar.mood-party .cv5-wing-l { animation: cv5WingL .45s ease-in-out 3; }
.companion-avatar.mood-party .cv5-wing-r { animation: cv5WingR .45s ease-in-out 3; }
.companion-avatar.mood-party .cv4-antenna { animation: cv5Ping .45s ease-in-out 3; }
.companion-avatar.mood-party .cv5-pod-l, .companion-avatar.mood-party .cv5-pod-r { animation: cv5Pod .45s ease-in-out 3; }
.companion-avatar.mood-happy .cv5-tassel { animation: cv5Tassel .8s cubic-bezier(.35,1.3,.4,1) .06s both; }
.companion-avatar.mood-happy .cv5-glasses { animation: cv5Glasses .7s ease-in-out .1s both; }
.companion-avatar.mood-comfort .cv5-tassel { animation: cv5AntennaSad 1.1s ease both; }
.companion-avatar.mood-comfort .cv5-cap { animation: cv5CapSad 1.1s ease both; }
@keyframes cv5CapSad { 0%,100% { transform: rotate(0); } 45%,80% { transform: rotate(-3deg); } }
.companion-avatar.mood-party .cv5-tassel { animation: cv5Tassel .45s ease-in-out 3; }
.companion-avatar.mood-happy .cv5-mane-back, .companion-avatar.mood-happy .cv5-mane-front { animation: cv5Mane .8s ease-in-out .06s both; }
.companion-avatar.mood-happy .cv5-horn { animation: cv5HornGlint .7s ease-in-out .1s both; }
.companion-avatar.mood-comfort .cv5-mane-back, .companion-avatar.mood-comfort .cv5-mane-front { animation: cv5ManeSad 1.1s ease both; }
@keyframes cv5ManeSad { 0%,100% { transform: rotate(0); } 45%,80% { transform: rotate(4deg); } }
.companion-avatar.mood-party .cv5-mane-back, .companion-avatar.mood-party .cv5-mane-front { animation: cv5Mane .45s ease-in-out 3; }
.companion-avatar.mood-party .cv5-horn { animation: cv5HornGlint .45s ease-in-out 3; }

/* ── Récompenses — particules SVG inline (étoiles/confettis/cœurs), spawnées
   par companion-engine.js dans .cv5-fx-layer, auto-retirées à animationend ── */
.cv5-fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.cv5-fx { position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; opacity: 0; animation: cv5FxBurst var(--fx-d, .8s) cubic-bezier(.2,.7,.4,1) forwards; }
.cv5-fx svg { width: 100%; height: 100%; display: block; }
@keyframes cv5FxBurst {
  0% { transform: translate(-50%,-50%) scale(.3) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fx-x, 0px)), calc(-50% + var(--fx-y, -20px))) scale(var(--fx-s, 1)) rotate(var(--fx-r, 160deg)); opacity: 0; }
}

/* ── Accessibilité V5 : tout le vivant se fige d'un bloc (le moteur JS se
   coupe aussi de lui-même via matchMedia — double sécurité) ── */
@media (prefers-reduced-motion: reduce) {
  #companion-bubble .companion-avatar svg, #companion-bubble .companion-avatar svg * { animation: none !important; }
  .companion-avatar .cv5-gaze { transition: none; }
  .cv5-fx-layer { display: none; }
}

/* Contenu textuel — v4.3 : c'est LUI la bulle de dialogue (verre + queue).
   v4.3.2 : fond passé de rgba(255,255,255,.08) à un verre PLUS COUVRANT —
   deux surfaces translucides ne peuvent JAMAIS fondre une queue de bulle sans
   couture (v4.3 losange = double épaisseur ; v4.3.1 triangle adjacent = pointe
   désolidarisée, retours Richard captures à l'appui). Avec ce fond, la recette
   éprouvée des tooltips (.mode-tip : 2 triangles bordure+remplissage) devient
   invisible au raccord. Le blur reste : c'est toujours du verre, et le texte
   gagne en lisibilité par-dessus les univers animés. */
.companion-content {
  flex: 1; min-width: 0;
  position: relative;
  /* 18/07 (demande Richard : « la bulle opaque cache le portail ») — fond
     nettement plus transparent (.78 → .48). Le flou fort + saturation gardent
     le texte lisible (le décor derrière est diffus), et l'ombre de texte
     ci-dessous assure le contraste même au-dessus d'une zone claire. */
  background: rgba(15,18,45,.48);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-xl); /* quatre coins doux ; la queue suffit à identifier la parole */
  padding: 12px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
  /* Poussée vers le haut lissée quand une nouvelle bulle pousse l'ancienne. */
  transition: opacity .3s ease, transform .3s ease;
}
/* ── v4.7 : PILE de messages façon chat (demande Richard) ──────────────────
   companion.js crée .companion-messages (colonne) et y empile les bulles :
   nouveau message EN BAS (cmIn), l'ancien remonte atténué et PERD sa queue,
   au 3e le plus vieux sort (cm-out). Max 2 visibles. */
.companion-messages { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.companion-messages .companion-content { flex: none; }
.companion-messages .companion-content:not(:last-child)::before,
.companion-messages .companion-content:not(:last-child)::after { display: none; }
.companion-messages .companion-content:not(:last-child) {
  opacity: .55; /* v4.10 : estompé plus franchement (demande Richard) — le DERNIER message domine */
  border-bottom-left-radius: var(--r-xl); /* il rend son coin « parole » */
}
.companion-content.cm-in { animation: cmIn .28s cubic-bezier(.2,.9,.3,1); }
@keyframes cmIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.companion-content.cm-out { opacity: 0 !important; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .companion-content.cm-in { animation: none; }
  .companion-content.cm-out { transition: none; }
}

/* Queue de la bulle — motif éprouvé de .mode-tip (2 couches superposées :
   bordure puis remplissage 1 px plus petit qui recouvre le segment de bordure
   de la bulle au raccord), orienté vers la gauche (le personnage). */
.companion-content::before {
  content: ''; position: absolute; right: 100%; bottom: 21px;
  border: 8px solid transparent;
  border-right-color: rgba(255,255,255,.2);
}
.companion-content::after {
  content: ''; position: absolute; right: calc(100% - 1.5px); bottom: 22px;
  border: 7px solid transparent;
  border-right-color: rgba(15,18,45,.5); /* 18/07 : aligné sur le fond translucide de la bulle */
}
.companion-name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.companion-text {
  font-size: 16px;          /* lisible pour un enfant */
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-text);   /* blanc cassé, cohérent avec le reste */
  white-space: pre-line;    /* v4.3 : ligne « 💡 la réponse était… » sous le message */
  text-shadow: 0 1px 3px rgba(0,0,0,.55); /* 18/07 : contraste garanti sur fond translucide */
}
/* Tip pédagogique — v4.10 (11/07, demande Richard) : HARMONISÉ sur le message
   normal (16px / blanc / 600). L'ancienne atténuation (15px gris 500) faisait
   croire à des fontes différentes entre jeu (surtout des tips) et démo
   (surtout des réactions). La classe reste posée (sémantique + ciblage futur). */
.companion-text.is-tip { }

/* Sélecteur de compagnon — pastilles carrées 62px (12/07 : mutualisé ici,
   valeurs reprises de play.php/demo.php qui étaient quasi-identiques à
   quelques px près). L'ancien #companion-selector flottant fixe (pastille
   HUD façon vieux design) est retiré : mort depuis la refonte du 12/06
   (écran 1-2-3), toujours écrasé par l'override de play.php, jamais
   consommé par aucune autre page. */
.comp-selector-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; }
/* flex-wrap ajouté le 14/07 (5e bouton licorne) : 5×62px+4×14px=366px tient sur la
   plupart des écrans mais sans marge sur mobile étroit — wrap = filet de sécurité,
   invisible tant que ça tient sur une ligne (c'était le cas à 4 boutons, ça l'est
   encore à 5 sur les tailles testées, mais mieux vaut un retour à la ligne propre
   qu'un débordement horizontal sur un très petit écran). */
.comp-picker-btn {
  font-size: 32px; width: 62px; height: 62px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12);
  opacity: .75; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.comp-picker-btn:hover  { opacity: .85; transform: scale(1.12); }
.comp-picker-btn.active { opacity: 1; border-color: var(--clr-accent); background: rgba(79,172,254,.15); transform: scale(1.05); }

/* ── Étapes numérotées + touches d'opération (verre jaune, hommage TI 1976)
   — mutualisées ici le 12/07 : dupliquées entre play.php et demo.php à
   quelques px près (48 vs 56px). Source unique désormais pour les 2 pages. ── */
.step-block { margin-bottom: 24px; }
.step-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--clr-text-muted);
  text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px;
}
.step-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--clr-action-grd); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.op-selector { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.op-btn {
  width: 48px; height: 48px; border-radius: 10px; cursor: pointer;
  font-size: 22px; font-weight: 800; color: #1a1a1a; line-height: 1;
  background: linear-gradient(180deg,#ffd23f,#f0b400);
  border: 2px solid #1a1a1a; box-shadow: 0 3px 0 #1a1a1a;
  transition: transform .08s, box-shadow .08s, opacity .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.op-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a1a1a; }
.op-btn.active { outline: 3px solid var(--clr-accent); outline-offset: 2px; }
.op-btn.locked { opacity: .25; cursor: not-allowed; filter: grayscale(1); }

/* Mode Selector */
#mode-selector {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; max-width: 580px; padding: 20px; text-align: center; z-index: 10;
}
#mode-selector h1 {
  font-size: 1.8rem; font-weight: 800; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  margin-bottom: 20px; letter-spacing: -.5px;
}
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* grid-column:auto (12/07) — vraie grille 2×3, la 5e carte ne doit pas
   s'étirer. L'ancien 'span 2' n'était de toute façon utile à personne :
   .mode-grid n'a qu'un seul vrai consommateur (play.php, 6 cartes), qui le
   neutralisait déjà par une override page-scopée devenue redondante. */
.mode-card:nth-child(5) { grid-column: auto; }
.mode-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg); padding: 18px 14px;
  cursor: pointer; transition: all .2s; text-align: center; color: #fff;
}
.mode-card:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(255,255,255,.35); }
.mode-card:active { transform: scale(.97); }
.mode-icon  { font-size: 36px; display: block; margin-bottom: 8px; }
.mode-name  { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; }
.mode-desc  { font-size: 12px; opacity: .75; display: block; }
/* Carte de mode verrouillée (12/07, demo.php) — même langage que .op-btn.locked,
   un peu plus lisible (.45 vs .25) : nom + description restent la meilleure
   vitrine du jeu complet (valeur perçue), inutile de les rendre illisibles. */
.mode-card.locked { opacity: .45; cursor: not-allowed; filter: grayscale(1); pointer-events: none; }

/* Game area */
#game-area { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; }
#world-canvas-container { position: absolute; inset: 0; z-index: 0; }
#world-canvas { width: 100%; height: 100%; }

/* Zone de question — v3.3 : même verre que le clavier (glassmorphisme
   blanc translucide + blur), le décor du monde reste perçu à travers.
   Lisibilité garantie par le blur + text-shadow des chiffres. */
#question-area {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10; width: 92%; max-width: 500px; text-align: center;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: 28px;
  padding: 28px 24px 20px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
#question-text {
  font-size: 3rem; font-weight: 900; color: #fff;
  text-shadow: 0 3px 16px rgba(0,0,0,.4);
  margin-bottom: 14px; letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}
#tip-text {
  font-size: 13px; color: rgba(255,255,255,.88);
  background: rgba(0,0,0,.3); backdrop-filter: blur(8px);
  border-radius: var(--r-md); padding: 10px 14px;
  margin-bottom: 14px; line-height: 1.55;
  white-space: pre-line; text-align: left;
}

/* Display réponse — v3.3 : pilule de verre, écho des touches rondes */
#answer-grid { display: flex; justify-content: center; margin: 14px 0; }
#answer-display {
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 99px; padding: 14px 36px;
  font-size: 3rem; font-weight: 900; color: #fff;
  min-width: 130px; min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s;
}
#answer-display.correct { border-color: var(--clr-green); box-shadow: var(--glow-green); }
#answer-display.wrong   { border-color: var(--clr-red); }
/* Curseur de saisie positionnable (v3.4) — partagé play.php + demo.php.
   La réponse est rendue en spans .ans-ch + caret clignotant #ans-caret ;
   un clic/toucher place le caret (logique dans app.js / demo.php). */
#answer-display { cursor: text; -webkit-user-select: none; user-select: none; }
#answer-display .ans-ch { padding: 0 1px; }
#ans-caret {
  display: inline-block; width: 3px; height: .85em;
  background: #fff; border-radius: 2px; margin: 0 1px;
  vertical-align: -.06em; box-shadow: 0 0 8px rgba(255,255,255,.7);
  animation: ansBlink 1.05s steps(2, start) infinite;
}
.ans-ph { opacity: .6; }
@keyframes ansBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #ans-caret { animation: none; } }
/* v3.4 — curseur positionnable dans la zone de réponse (souris/doigt) */
#answer-display { cursor: text; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#answer-display .ans-ch { padding: 0 1px; }
#answer-display .ans-ph { opacity: .55; }
#ans-caret {
  display: inline-block; width: 3px; height: .85em;
  background: #fff; border-radius: 2px; margin: 0 1px;
  vertical-align: -.06em;
  box-shadow: 0 0 8px rgba(255,255,255,.8);
  animation: ansBlink 1.05s steps(2, start) infinite;
}
@keyframes ansBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #ans-caret { animation: none; } }

/* Timer */
.timer-display {
  position: absolute; top: 54px; right: 16px; z-index: 20;
  font-size: 26px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  font-variant-numeric: tabular-nums;
}
.timer-display.urgent { color: var(--clr-red); animation: timerPulse .6s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* Pavé numérique — v3.2 (09/07) : touches RONDES en glassmorphisme, plaque
   opaque supprimée — les 5 univers (worlds.js) restent visibles entre et
   autour des touches au lieu d'être masqués par un bandeau plein. Le verre
   (backdrop-filter) garantit la lisibilité des chiffres sur tout décor. */
#numpad {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: center; align-items: center;
  gap: 10px; padding: 8px 12px 22px;
  background: transparent;
  max-width: 500px; margin: 0 auto;
}
.num-btn {
  width: 64px; height: 64px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  font-size: 22px; font-weight: 800; color: #fff;
  cursor: pointer; transition: all .12s;
  -webkit-user-select: none; user-select: none;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.num-btn:hover  { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); }
.num-btn:active { transform: scale(.92); background: rgba(255,255,255,.28); }
.delete-btn { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.2); color: var(--clr-red); }
.delete-btn:hover { background: rgba(248,113,113,.25); }
.submit-btn {
  background: var(--clr-green-grd) !important;
  color: #0a1a0f !important;
  font-size: 26px !important; font-weight: 900 !important;
  grid-column: span 3; justify-self: center;
  width: calc(3 * 64px + 2 * 10px); border-radius: 99px !important;
  box-shadow: var(--glow-green); border: none !important;
}
.submit-btn:hover  { opacity: .92; box-shadow: 0 0 28px rgba(67,233,123,.5); }
.submit-btn:active { transform: scale(.97) !important; }

/* Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
}
.overlay-content {
  background: rgba(13,15,40,.95); border: 1px solid var(--clr-border2);
  border-radius: var(--r-xl); padding: 36px 32px;
  text-align: center; max-width: 360px; width: 90%;
  box-shadow: var(--shadow-lg); animation: overlayPop .3s cubic-bezier(.175,.885,.32,1.275);
}
.overlay-content.celebration {
  background: linear-gradient(135deg,rgba(79,172,254,.15),rgba(168,85,247,.12));
  border-color: rgba(79,172,254,.3);
}
#result-icon  { font-size: 64px; margin-bottom: 14px; display: block; }
#result-text  { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
#result-details { font-size: 15px; color: var(--clr-text-muted); margin-bottom: 22px; }
#result-continue, #level-up-continue {
  background: var(--clr-action-grd); color: #fff; border: none;
  border-radius: var(--r-pill); padding: 12px 40px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: all .2s; box-shadow: var(--glow-blue);
}
#result-continue:hover, #level-up-continue:hover { transform: scale(1.05); box-shadow: 0 0 28px rgba(79,172,254,.5); }
.level-up-icon { font-size: 72px; margin-bottom: 12px; display: block; }
.overlay-content.celebration h2 { font-size: 18px; color: var(--clr-text-muted); margin-bottom: 4px; }
#level-up-text { font-size: 30px; font-weight: 900; margin-bottom: 24px; background: var(--clr-accent-grd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes overlayPop { from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }

/* ──────────────────────────────────────────────────────
   CÉLÉBRATION RENFORCÉE — trophées / avatars / niveaux (02/07)
   Additif : réutilise #level-up-overlay comme overlay générique
   d'accomplissement (icône/titre/texte dynamiques via JS, cf. app.js).
   Confettis en CSS pur (pas de charge Canvas supplémentaire, cf. LIVRÉ #14
   sur le budget perf du Canvas de fond).
   ────────────────────────────────────────────────────── */
.achieve-confetti {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; border-radius: inherit;
}
.achieve-confetti-piece {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 2px;
  opacity: 0;
}
.overlay-content.celebration.burst .achieve-confetti-piece {
  animation: achieveFly .9s var(--ease-premium) forwards;
  animation-delay: var(--confetti-delay, 0ms);
}
@keyframes achieveFly {
  0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) translate(0,0); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--confetti-rot,180deg)) translate(var(--confetti-x,0), var(--confetti-y,-90px)); }
}
.overlay-content.celebration.burst .level-up-icon {
  animation: achieveIconPop .6s var(--ease-spring);
}
@keyframes achieveIconPop {
  0%   { transform: scale(.3) rotate(-10deg); }
  60%  { transform: scale(1.2) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay-content.celebration.burst .achieve-confetti-piece,
  .overlay-content.celebration.burst .level-up-icon { animation: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────
   DASHBOARD PARENT
   ───────────────────────────────────────────────────── */
.parent-body { background: radial-gradient(ellipse at 20% 10%, rgba(79,172,254,.06) 0%,transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(168,85,247,.05) 0%,transparent 55%), var(--clr-bg); min-height: 100vh; }
.parent-container { max-width: 1100px; margin: 0 auto; padding: 24px 18px 60px; }
.child-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.child-tab {
  padding: 10px 20px; border-radius: var(--r-pill);
  background: var(--clr-surface); color: var(--clr-text-muted);
  cursor: pointer; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--clr-border); transition: all .2s;
}
.child-tab:hover { background: var(--clr-surface2); color: var(--clr-text); }
.child-tab.active { background: rgba(79,172,254,.12); border-color: rgba(79,172,254,.35); color: var(--clr-accent); }
.age-badge { font-size: 11px; font-weight: 500; background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.child-dashboard { display: none; } .child-dashboard.active { display: block; }
.profil-banner {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, rgba(79,172,254,.08), rgba(168,85,247,.06));
  border: 1px solid rgba(79,172,254,.2); border-radius: var(--r-lg);
  padding: 20px 24px; margin-bottom: 20px;
}
.profil-icon { font-size: 44px; flex-shrink: 0; }
.profil-label { font-size: 11px; font-weight: 800; color: var(--clr-accent); text-transform: uppercase; letter-spacing: 1px; }
.profil-name  { font-size: 20px; font-weight: 800; margin: 3px 0; }
.profil-desc  { font-size: 13px; color: var(--clr-text-muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; }
.chart-container { position: relative; height: 190px; }
.skill-bar-bg  { flex: 1; height: 7px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; }
.skill-bar-fill{ height: 100%; border-radius: 99px; background: var(--clr-accent-grd); transition: width .6s ease; }
.reco-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--clr-surface); border: 1px solid var(--clr-border); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.reco-item.type-success   { border-left: 3px solid var(--clr-green); }
.reco-item.type-difficulty{ border-left: 3px solid var(--clr-red); }
.reco-item.type-info      { border-left: 3px solid var(--clr-accent); }
.session-item { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.session-date   { font-size: 11px; font-weight: 600; color: var(--clr-text-dim); width: 42px; flex-shrink: 0; }
.session-detail { color: var(--clr-text-muted); }
.mode-score-item { display: flex; align-items: center; gap: 8px; background: var(--clr-surface); padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; border: 1px solid var(--clr-border); }
.mode-score-name  { color: var(--clr-text-muted); }
.mode-score-value { font-weight: 800; margin-left: auto; color: var(--clr-text); }
.badge-pill { font-size: 12px; background: var(--clr-surface); padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--clr-border); display: inline-flex; align-items: center; gap: 5px; }
.trend-up { color: var(--clr-green); } .trend-down { color: var(--clr-red); }

/* ── Carte classement (rang de l'enfant) ─────────────── */
.par-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.par-rank-cell {
  background: linear-gradient(135deg, rgba(79,172,254,.08), rgba(168,85,247,.06));
  border: 1px solid rgba(79,172,254,.2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.par-rank-cell-label {
  font-size: 12px; font-weight: 600; color: var(--clr-text-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.par-rank-band {
  font-size: 10px; font-weight: 700; color: var(--clr-accent);
  background: rgba(79,172,254,.12); padding: 1px 7px; border-radius: var(--r-pill);
}
.par-rank-cell-val {
  font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--clr-text);
}
.par-rank-cell-val strong {
  background: var(--clr-accent-grd);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.par-rank-cell-val sup { font-size: .5em; }
.par-rank-total { font-size: 13px; font-weight: 600; color: var(--clr-text-dim); }
@media (max-width: 420px) { .par-rank-grid { grid-template-columns: 1fr; } }

/* ── BILAN DE LA SEMAINE (parent_weekly.php) ─────────────
   Bloc de synthèse « bulletin de prof » : métriques + résumé narratif
   + point fort / point d'attention + conseil. Mis en avant en tête de
   dashboard pour porter la valeur perçue de l'abonnement. ── */
.wk-report {
  background: linear-gradient(135deg, rgba(79,172,254,.07), rgba(168,85,247,.05));
  border: 1px solid rgba(79,172,254,.22);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.wk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wk-title { font-size: 17px; font-weight: 800; color: var(--clr-text); }
.wk-sub { font-size: 12px; color: var(--clr-text-dim); }
.wk-empty { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }
/* Métriques en bandeau */
.wk-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.wk-metric {
  background: rgba(255,255,255,.04); border: 1px solid var(--clr-border);
  border-radius: var(--r-md); padding: 12px 8px; text-align: center;
}
.wk-metric-val {
  display: block; font-size: 22px; font-weight: 900; line-height: 1.1;
  background: var(--clr-accent-grd); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.wk-metric-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
/* Delta hebdo numérique (07/07) — le trend existait déjà en interne
   (adjectif dans la phrase de résumé), jamais affiché comme un chiffre. */
.wk-metric-delta { display: block; font-size: 10px; font-weight: 800; margin-top: 4px; }
/* Résumé narratif */
.wk-summary { font-size: 14.5px; line-height: 1.65; color: var(--clr-text); margin-bottom: 16px; }
/* Cartes force / attention */
.wk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.wk-card { border-radius: var(--r-md); padding: 13px 15px; border: 1px solid; }
.wk-card-strength  { background: rgba(74,222,128,.08);  border-color: rgba(74,222,128,.25); }
.wk-card-attention { background: rgba(251,191,36,.08);  border-color: rgba(251,191,36,.25); }
.wk-card-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.wk-card-strength  .wk-card-label { color: var(--clr-green); }
.wk-card-attention .wk-card-label { color: var(--clr-yellow); }
.wk-card-text { font-size: 13.5px; line-height: 1.55; color: var(--clr-text-muted); }
/* Conseil de la semaine */
.wk-advice {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(79,172,254,.08); border: 1px solid rgba(79,172,254,.25);
  border-radius: var(--r-md); padding: 13px 15px;
}
.wk-advice-icon { font-size: 24px; flex-shrink: 0; line-height: 1.2; }
.wk-advice-label { font-size: 12px; font-weight: 800; color: var(--clr-accent); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.wk-advice-text { font-size: 13.5px; line-height: 1.55; color: var(--clr-text); }
/* ── STRATÉGIES DE CALCUL (dashboard parent) ─────────── */
.pose-report {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.pose-report .wk-head { margin-bottom: 12px; }
.pose-report .wk-title { margin: 0; }
.pose-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.pose-operations { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pose-detail-label { color: var(--clr-text-muted); font-size: 12px; font-weight: 700; }
.pose-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.pose-chip { padding: 5px 10px; border-radius: 999px; background: rgba(79,172,254,.09); border: 1px solid rgba(79,172,254,.2); color: var(--clr-text-muted); font-size: 13px; }
.pose-chip strong { color: var(--clr-text); margin-left: 3px; }
.pose-focus { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--clr-accent); background: rgba(79,172,254,.06); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--clr-text-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) {
  .wk-metrics { grid-template-columns: repeat(2, 1fr); }
  .wk-cards { grid-template-columns: 1fr; }
  .pose-metrics { grid-template-columns: 1fr; }
}
/* Tendance 6 semaines (11/07) — sparkline SVG pur, même esprit que le graphe
   de l'onglet back-office « Visites » (§49) : zéro lib JS, barre courante
   accentuée. Longitudinal, complète le delta ponctuel vs semaine dernière. */
.wk-trend { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.wk-trend-title { font-size: 11px; font-weight: 700; color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.wk-trend-svg { width: 100%; height: 48px; display: block; }
.wk-trend-bar { fill: rgba(79,172,254,.35); transition: fill .2s; }
.wk-trend-bar.current { fill: var(--clr-accent); }

/* ─────────────────────────────────────────────────────
   ADMIN
   ───────────────────────────────────────────────────── */
.admin-body { background: var(--clr-bg); min-height: 100vh; }
.admin-container { max-width: 980px; margin: 0 auto; padding: 24px 18px 60px; }
.child-row-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--r-lg);
  flex-wrap: wrap; transition: border-color .2s;
  margin-bottom: 10px;
}
.child-row-card:hover { border-color: var(--clr-border2); }
.child-avatar-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--clr-accent-grd); display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
  box-shadow: var(--glow-blue);
}
.child-info { flex: 1; min-width: 140px; }
.child-info-name { font-size: 16px; font-weight: 700; }
.child-info-meta { font-size: 12px; color: var(--clr-text-muted); margin-top: 3px; }
.child-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inline-pin-form { display: flex; gap: 6px; align-items: center; }
.inline-pin-form input { width: 100px; padding: 7px 10px; background: rgba(255,255,255,.06); border: 1px solid var(--clr-border2); border-radius: var(--r-sm); color: var(--clr-text); font-size: 13px; outline: none; }
.inline-pin-form input:focus { border-color: var(--clr-accent); }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 14px; }
.plan-choice { border: 2px solid var(--clr-border); border-radius: var(--r-lg); padding: 20px; text-align: center; transition: all .2s; }
.plan-choice:hover { border-color: var(--clr-border2); }
.plan-choice.current { border-color: var(--clr-accent); background: rgba(79,172,254,.05); }
.plan-choice-name  { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.plan-choice-price { font-size: 26px; font-weight: 900; background: var(--clr-accent-grd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0; }
.plan-choice-price small { font-size: 13px; -webkit-text-fill-color: var(--clr-text-muted); font-weight: 400; }
.plan-choice ul  { list-style: none; text-align: left; font-size: 13px; color: var(--clr-text-muted); margin: 10px 0; }
.plan-choice li  { padding: 3px 0; }
.plan-choice li::before { content: "✓ "; color: var(--clr-green); font-weight: 700; }
.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }

/* ─────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .lp-topbar-links { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }
  #mode-selector h1 { font-size: 1.4rem; }
  .mode-grid { gap: 7px; }
  .mode-card { padding: 12px 8px; }
  .mode-icon { font-size: 28px; }
  .mode-name { font-size: 13px; }
  .mode-desc { font-size: 11px; }
  .comp-picker-btn { width: 54px; height: 54px; font-size: 27px; }
  #question-text { font-size: 2.3rem; }
  #answer-display { font-size: 2.5rem; padding: 12px 28px; min-height: 64px; }
  .num-btn { padding: 0; font-size: 20px; }
  .hud-value { font-size: 16px; }
  /* v3.2 : écart plancher entre les 2 groupes du HUD — à 390px les libellés
     PIÈCES et SÉRIE se touchaient (space-between sans gap minimum). */
  #hud { gap: 14px; }
  .hud-left, .hud-right { gap: 10px; }
  .lang-switcher { top: 48px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profil-banner { flex-direction: column; text-align: center; }
  .child-tabs { justify-content: center; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .child-row-card { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 768px) {
  #numpad { padding: 12px 24px 24px; gap: 12px; }
  .num-btn { padding: 0; font-size: 24px; border-radius: 50%; }
}
@media (hover: none) and (pointer: coarse) {
  .num-btn:hover { background: rgba(255,255,255,.1); }
  .num-btn:active { transform: scale(.92); background: rgba(255,255,255,.28); }
  .mode-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────
   BARRE XP → NIVEAU SUIVANT (E2.4)
   ───────────────────────────────────────────────────── */
.xp-progress-bar {
  width: 100%; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.15); margin-top: 4px;
}
#xp-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--clr-accent-grd);
  transition: width .4s ease;
  width: 0%;
}

/* Ajustement bulle compagnon selon taille du pavé */
@media (min-width: 768px) {
  #companion-bubble { bottom: 330px; }
}
@media (max-width: 640px) {
  #companion-bubble { bottom: 295px; font-size: 15px; }
  .companion-text { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE MOBILE PLAY.PHP 375px (6.1)
   ───────────────────────────────────────────────────── */
@media (max-width: 375px) {
  #question-text { font-size: 2rem; }
  #answer-display { min-width: 90px; font-size: 2.5rem; padding: 10px 20px; }
  .hud-left, .hud-right { gap: 7px; }
  .hud-label { display: none; }
  .hud-value { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────
   RÉVÉLATION AU SCROLL (v6) — utilitaire partagé
   Piloté en JS via IntersectionObserver (voir index.php) : la classe
   .reveal est ajoutée dynamiquement aux éléments ciblés, puis .is-visible
   au moment où ils entrent dans le viewport. Purement additif : aucun
   élément n'est cassé si le JS ne charge pas (pas de classe .reveal =
   comportement normal, opacité 1). Repli total si prefers-reduced-motion.
   ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────
   THÈME SOMBRE UNIQUE
   (l'ancien mode clair auto via prefers-color-scheme a été retiré :
    il rendait admin.php/parent.php clairs alors que landing/register/jeu
    restaient sombres → incohérence visuelle selon le réglage de l'OS.
    Le site est désormais sombre partout, comme la charte.)
   ───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   ANIMATION TRANSITION MODE → JEU (6.6)
   ───────────────────────────────────────────────────── */
#game-area {
  opacity: 0;
  transition: opacity .3s ease;
}
#game-area.visible { opacity: 1; }

/* ═════════════════════════════════════════════════════
   LAYOUT DE JEU PARTAGÉ — "TABLE 3 LIGNES" (#game-col)
   Mutualisé ici pour que play.php ET demo.php aient un rendu
   IDENTIQUE. #game-col empile : ① question (espace restant)
   ② compagnon ③ pavé. L'empilement flexbox garantit l'absence
   de chevauchement, quelle que soit la taille d'écran.
   Ces règles neutralisent les positionnements fixed/absolute
   par défaut de #question-area / #companion-bubble / #numpad
   définis plus haut, dès lors qu'ils sont DANS #game-col.
   ───────────────────────────────────────────────────── */
#game-col{
  position:relative; z-index:10;
  height:100%;
  display:flex; flex-direction:column;
  padding-top:46px; /* espace du HUD fixe */
}
#question-row{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:6px 0;
}
#question-row #question-area{
  position:static; top:auto; left:auto; transform:none;
  max-height:100%; margin:0 auto;
}
#companion-row{ flex:0 0 auto; }
#companion-row #companion-bubble{
  position:static !important; transform:none !important;
  bottom:auto !important; left:auto !important; top:auto !important;
  margin:0 auto 6px; width:92%; max-width:500px;
}
#game-col #numpad{
  position:static; bottom:auto; left:auto; right:auto;
  flex:0 0 auto; width:100%;
}

/* ── Clavier & carte question fluides (s'adaptent à la hauteur réelle) ──
   Sur une fenêtre basse, le pavé RAPETISSE au lieu de chevaucher.
   Partagé jeu + démo. ── */
#numpad{
  padding: clamp(5px, 1vh, 12px) clamp(10px, 2vw, 24px) clamp(8px, 1.8vh, 24px);
  gap: clamp(6px, 1.2vh, 12px);
}
#numpad .num-btn{
  padding: 0;
  width: clamp(46px, 8vh, 64px);
  height: clamp(46px, 8vh, 64px);
  font-size: clamp(16px, 3vh, 24px);
  display: flex; align-items: center; justify-content: center;
}
#numpad .submit-btn{
  width: calc(3 * clamp(46px, 8vh, 64px) + 2 * clamp(6px, 1.2vh, 12px));
  height: clamp(42px, 7vh, 56px);
  font-size: clamp(18px, 3.2vh, 26px) !important;
}
#game-col #question-area{
  padding: clamp(10px, 2.2vh, 28px) clamp(14px, 2vw, 24px) clamp(8px, 1.8vh, 20px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
#game-col #question-area::-webkit-scrollbar{ width: 5px; }
#game-col #question-area::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 99px; }
#game-col #question-area::-webkit-scrollbar-track{ background: transparent; }
#game-col #question-text{
  font-size: clamp(1.5rem, 5.5vh, 3rem);
  margin-bottom: clamp(6px, 1.2vh, 14px);
}
#game-col #answer-grid{ margin: clamp(6px, 1.2vh, 14px) 0; }
#game-col #answer-display{
  min-height: clamp(44px, 7.5vh, 72px);
  font-size: clamp(1.5rem, 4.5vh, 3rem);
  padding: clamp(6px, 1vh, 14px) clamp(20px, 4vw, 36px);
}

/* ── Chips d'action du HUD (v3.3, 03/07) : pastilles rondes glassmorphism,
   icônes SVG trait fin. Remplacent les emojis bruts (rendu incohérent
   selon l'OS — glossy 3D sur certains navigateurs, plat ailleurs) par un
   langage visuel unique. MUTUALISÉ ICI le 12/07 (harmonisation demandée par
   Richard) : auparavant dupliqué dans le <style> inline de play.php et
   absent de demo.php — cause exacte du bouton son "verre" sur le jeu réel
   mais emoji brut 🔊 sur la démo. Partagé play.php + demo.php. ── */
.hud-chip{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.82);
  cursor:pointer;transition:all .18s;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.hud-chip:hover{
  background:rgba(79,172,254,.16);border-color:rgba(79,172,254,.55);
  color:#fff;box-shadow:0 0 12px rgba(79,172,254,.28);transform:translateY(-1px);
}
.hud-chip svg{width:17px;height:17px;display:block;}
@media (max-width:480px){ .hud-chip{ width:31px;height:31px; } .hud-chip svg{ width:15px;height:15px; } }
@media (max-width:480px){ .op-selector{ gap:8px; } .op-btn{ width:44px; height:44px; font-size:20px; } }

/* ══ v4.5 (10/07, décision Richard — maquette B validée) : ÉQUATION EN LIGNE ══
   - La carte question disparaît : la question flotte sur l'univers (ombre
     portée renforcée pour la lisibilité sur les décors animés)
   - « a × b = [réponse] » sur UNE ligne (.eq-sign) — bascule .stacked posée
     par app.js quand l'énoncé contient déjà un '=' (Duel « 8 + _ = 15 »)
   - Touche − supprimée (moteur : jamais de réponse négative, engine.php:414),
     l'= vert devient une touche RONDE à sa place : [⌫][0][=], barre large
     supprimée → ~80 px rendus aux univers. Partagé play + démo. */
#question-area, #question-row #question-area, #game-col #question-area {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 640px;
}
#question-area {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 4px 16px;
}
#question-text, #game-col #question-text {
  margin-bottom: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,.75), 0 0 44px rgba(0,0,0,.45);
}
.eq-sign {
  font-size: clamp(1.5rem, 5.5vh, 3rem);
  font-weight: 900; line-height: 1;
  color: var(--clr-accent);
  text-shadow: 0 3px 16px rgba(0,0,0,.6);
}
#answer-grid, #game-col #answer-grid { margin: 0; }
#skill-badge { flex-basis: 100%; }
/* Énoncé contenant déjà '=' (Duel) : empilement, pas de signe ajouté */
#question-area.stacked { flex-direction: column; gap: 10px; }
#question-area.stacked .eq-sign { display: none; }
/* L'= est désormais une touche ronde comme les autres (verte) */
.submit-btn, #numpad .submit-btn {
  grid-column: auto; justify-self: auto;
  width: clamp(46px, 8vh, 64px);
  height: clamp(46px, 8vh, 64px);
  border-radius: 50% !important;
  font-size: clamp(20px, 3.4vh, 28px) !important;
}
/* Bulle compagnon compacte sur écran bas */
@media (max-height: 720px){
  #companion-row #companion-bubble{ padding: 8px 12px; gap: 10px; }
  #companion-row .companion-avatar{ min-width: 38px; height: 38px; font-size: 24px; }
  #companion-row .companion-text{ font-size: 13px !important; }
}
/* Écran vraiment écrasé : la bulle s'efface, priorité au jeu */
@media (max-height: 520px){
  #companion-row #companion-bubble{ display: none !important; }
  #skill-badge{ display: none !important; }
}

/* ── Comparatif public : même opération en ligne et posée ── */
.pose-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px;margin-top:22px;}
.pose-compare-card{display:grid;grid-template-rows:auto 1fr;justify-items:center;min-width:0;min-height:170px;padding:20px;border:1px solid rgba(79,172,254,.24);border-radius:18px;background:linear-gradient(145deg,rgba(79,172,254,.09),rgba(168,85,247,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.pose-compare-label{display:block;margin-bottom:18px;color:#dbeafe;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;}
.pose-compare-line{align-self:center;color:#fff;font-size:28px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;}
.pose-compare-stack{align-self:center;display:grid;grid-template-columns:28px auto;justify-items:end;color:#fff;font-size:28px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;}
.pose-compare-stack .pose-op{color:#60a5fa;justify-self:center;}
.pose-compare-stack .pose-rule{grid-column:1/-1;width:100%;height:3px;margin:6px 0 5px;border-radius:3px;background:rgba(255,255,255,.85);}
.pose-compare-stack .pose-sum{grid-column:1/-1;color:#4ade80;}
.pose-compare-arrow{align-self:center;display:grid;width:36px;height:36px;place-items:center;color:#60a5fa;font-size:0;font-weight:900;line-height:1;text-shadow:0 0 16px rgba(79,172,254,.45);}
.pose-compare-arrow::before{content:'→';font-size:28px;line-height:1;}
.land-feat-pose{grid-column:1/-1;}
.land-feat-pose>.land-feat-icon{margin-left:auto;margin-right:auto;}
.land-feat-pose>h3,.land-feat-pose>p{text-align:center;max-width:720px;margin-left:auto;margin-right:auto;}
@media(max-width:640px){.pose-compare{grid-template-columns:minmax(0,1fr);gap:10px}.pose-compare-arrow{width:100%;height:34px;transform:none}.pose-compare-arrow::before{content:'↓';font-size:30px}.pose-compare-card{min-height:150px;padding:18px}.pose-compare-line{font-size:28px}}

/* ── Aide transversale : calcul posé (phase 1) ── */
#question-area.pose-active{
  flex-direction:column;flex-wrap:nowrap;gap:8px;
  width:min(90vw,540px);max-width:540px;
  padding:clamp(14px,2.4vh,22px) clamp(24px,4vw,40px) clamp(18px,3vh,28px);
  border:0;border-radius:44px;
  background:radial-gradient(ellipse at center,rgba(7,8,38,.74) 0%,rgba(7,8,38,.56) 60%,rgba(7,8,38,0) 100%);
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
#question-area.pose-active #question-text,#question-area.pose-active .eq-sign,#question-area.pose-active #answer-grid{display:none;}
@media(max-width:560px){
  #question-area.pose-active{width:calc(100vw - 36px);padding:14px 18px 20px;border-radius:36px;}
}
.pose-toggle-row{flex-basis:100%;display:flex;justify-content:center;align-items:center;margin:2px 0 0;}
.pose-toggle-row:has(.pose-toggle[hidden]){display:none;}
.pose-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:150px;min-width:150px;height:34px;margin:0;padding:0 13px;border-radius:999px;border:1px solid rgba(79,172,254,.65);background:rgba(38,103,174,.72);color:#eef7ff;font:700 12px inherit;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 14px rgba(3,18,45,.24);backdrop-filter:blur(6px);}
.pose-toggle:hover,.pose-toggle:focus-visible{background:rgba(45,122,204,.86);outline:2px solid transparent;box-shadow:0 0 0 2px rgba(79,172,254,.55),0 5px 16px rgba(3,18,45,.3);}
.posed-calculation{--pcw:clamp(38px,7vh,58px);display:flex;flex-direction:column;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.posed-calculation[hidden]{display:none;}
.posed-calculation.is-multiplication{--pcw:clamp(30px,5.2vh,46px);gap:2px;}
.posed-partial{background:rgba(79,172,254,.1);}
.posed-shift-zero{color:rgba(255,255,255,.42);font-weight:700;}
.posed-row{display:grid;grid-template-columns:var(--pcw) repeat(var(--pose-cols),var(--pcw));align-items:center;justify-content:center;}
.posed-cell{width:var(--pcw);height:var(--pcw);display:flex;align-items:center;justify-content:center;font-size:calc(var(--pcw)*.62);font-weight:900;color:#fff;box-sizing:border-box;}
.posed-sign{color:#60a5fa}.posed-rule{height:3px;background:rgba(255,255,255,.75);grid-column:1/-1;border-radius:3px;}
.posed-result,.posed-helper{border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);cursor:pointer;}
.posed-result{border-radius:9px}.posed-helper{width:calc(var(--pcw)*.52);height:calc(var(--pcw)*.52);justify-self:center;border-style:dashed;border-radius:7px;font-size:calc(var(--pcw)*.3);color:#fbbf24;}
/* Soustraction avec emprunt : ancien chiffre barré + valeur réellement disponible. */
.posed-given-top.is-borrowed{flex-direction:column;justify-content:center;gap:0;line-height:.82;}
.posed-new-digit{color:#fbbf24;font-size:calc(var(--pcw)*.34);font-weight:900;}
.posed-old-digit{font-size:calc(var(--pcw)*.48);font-weight:800;opacity:.68;text-decoration-line:line-through;text-decoration-color:#f87171;text-decoration-thickness:3px;}
.posed-result.is-cursor,.posed-helper.is-cursor{border-color:#4facfe;background:rgba(79,172,254,.2);box-shadow:0 0 0 2px rgba(79,172,254,.2);}
.posed-result.is-wrong,.posed-helper.is-wrong{border-color:#f87171;background:rgba(248,113,113,.18);box-shadow:0 0 0 2px rgba(248,113,113,.18),0 0 14px rgba(248,113,113,.3);}
.posed-calculation.is-correct .posed-result:not(.posed-partial){border-color:#4ade80;background:rgba(74,222,128,.18);box-shadow:0 0 0 2px rgba(74,222,128,.18),0 0 14px rgba(74,222,128,.3);}
.posed-rank-0{color:#4ade80}.posed-rank-1{color:#60a5fa}.posed-rank-2{color:#c084fc}.posed-rank-3{color:#fbbf24}
/* Division posée : même état mathématique, trois conventions visuelles. */
.posed-division{--dcw:clamp(38px,7vh,56px);display:grid;align-items:stretch;justify-content:center;font-variant-numeric:tabular-nums;color:#fff;}
.division-given,.division-quotient,.division-remainder,.division-equation{display:flex;align-items:center;justify-content:center;}
.division-digit,.division-slot{width:var(--dcw);height:var(--dcw);display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:calc(var(--dcw)*.58);font-weight:900;}
.division-slot{border:1.5px solid rgba(255,255,255,.3);border-radius:9px;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;}
.division-slot.is-cursor{border-color:#4facfe;background:rgba(79,172,254,.22);box-shadow:0 0 0 2px rgba(79,172,254,.2)}
.division-slot.is-wrong{border-color:#f87171;background:rgba(248,113,113,.2);box-shadow:0 0 0 2px rgba(248,113,113,.18),0 0 14px rgba(248,113,113,.3)}
.posed-calculation.is-correct .division-slot{border-color:#4ade80;background:rgba(74,222,128,.2);box-shadow:0 0 0 2px rgba(74,222,128,.18),0 0 14px rgba(74,222,128,.3)}
.division-european{grid-template-columns:auto auto;grid-template-rows:auto auto;}
.division-european .division-dividend{justify-content:flex-end}.division-european .division-divisor{border-left:3px solid rgba(255,255,255,.8);padding:0 10px;color:#60a5fa}
.division-european .division-quotient{border-left:3px solid rgba(255,255,255,.8);border-top:3px solid rgba(255,255,255,.8);padding:6px 10px}
.division-remainder{gap:7px;padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#dbeafe}
.division-anglo{grid-template-columns:auto auto;grid-template-rows:auto auto auto}.division-anglo .division-quotient{grid-column:2;border-bottom:3px solid rgba(255,255,255,.8);padding:5px}.division-anglo .division-divisor{grid-column:1;grid-row:2;border-right:3px solid rgba(255,255,255,.8);padding:0 8px;color:#60a5fa}.division-anglo .division-dividend{grid-column:2;grid-row:2}.division-anglo .division-remainder{grid-column:2;grid-row:3}
.division-german{display:flex;flex-direction:column;gap:6px}.division-equation{font-size:calc(var(--dcw)*.5);font-weight:900;gap:5px}.division-german .division-remainder{align-self:center}
.division-work{display:flex;flex-direction:column;gap:3px;margin-top:5px;min-width:min(280px,85vw)}
.division-work-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:3px 10px;border-left:3px solid #4facfe;background:rgba(15,18,45,.28);border-radius:6px;font-size:13px;font-weight:800;color:#fff}
.division-work-row.is-invalid{border-left-color:#f87171;background:rgba(248,113,113,.14)}
.division-bring-down{color:#fbbf24;font-size:12px}
.division-caption{margin-top:5px;font-size:11px;color:#dbeafe;text-align:center}
@media(max-width:480px){.posed-calculation{--pcw:clamp(34px,12vw,46px)}.posed-calculation.is-multiplication{--pcw:clamp(28px,9vw,38px)}.posed-division{--dcw:clamp(34px,11vw,44px)}.division-work-row{font-size:12px;padding:2px 7px}.pose-toggle{padding:6px 11px}}

/* ─────────────────────────────────────────────────────
   ICÔNE SVG INLINE DANS DU TEXTE (v14 — aide.php)
   Même langage visuel que les pastilles HUD/topbar (trait fin,
   currentColor), mais dimensionnée en 1em pour s'aligner sur une
   ligne de texte courant plutôt que dans un bouton isolé.
   ───────────────────────────────────────────────────── */
.txt-icon {
  display: inline-flex; vertical-align: -2px;
  width: 1em; height: 1em; flex-shrink: 0;
}
.txt-icon svg { width: 100%; height: 100%; }

/* ── CONFORT DE LECTURE GLOBAL (28/07/2026) ───────────
   Source unique des tailles de texte utiles. Les titres et nombres ludiques
   conservent leurs proportions ; les paragraphes, libellés et conseils ne
   descendent plus sous le seuil confortable sans nécessité fonctionnelle. */
body { font-size: var(--text-sm); }

/* Navigation, boutons et libellés partagés */
.lp-topbar-link, .lp-stat-label, .lp-btn-sm, .badge-pill,
.par-rank-cell-label, .wk-sub, .wk-card-label, .wk-advice-label,
.pose-detail-label, .child-info-meta {
  font-size: var(--text-xs);
}
.wk-advice-text, .pose-chip, .profil-desc { font-size: var(--text-sm); line-height: var(--line-reading); }

/* Pages publiques destinées aux parents et grands-parents */
.land-body .land-feat p,
.land-body .land-benefit p,
.land-body .gift-proof-compare p,
.land-body .land-plan-tagline,
.land-body .land-plan-period,
.land-body .land-plan li,
.land-body .land-testi-name {
  font-size: var(--text-sm) !important;
  line-height: var(--line-reading);
}
.land-body .land-testi-role,
.land-body .pose-compare-label,
.land-body .land-plan > p { font-size: var(--text-xs) !important; }

/* Aide : priorité maximale à la lecture longue */
.land-body .help-toc a,
.land-body .help-step-body p,
.land-body .help-card p,
.land-body .help-note,
.land-body .help-safe,
.land-body .help-mode p,
.land-body .help-age p,
.land-body .help-algo-rhythm {
  font-size: var(--text-base) !important;
  line-height: var(--line-reading);
}
.land-body .help-mode-name,
.land-body .help-age-label { font-size: var(--text-sm) !important; }

/* Tableau de bord parent */
.parent-body .lp-topbar > span,
.parent-body .lp-topbar-links > span { font-size: var(--text-xs) !important; }
.parent-body .reco-item > span:last-child,
.parent-body .lp-card p { font-size: var(--text-sm) !important; line-height: var(--line-reading); }

/* Jeu et démo : les conseils doivent rester lisibles, même sur mobile */
.companion-text,
#companion-row .companion-text { font-size: var(--text-sm) !important; line-height: 1.45; }
.mode-desc { font-size: var(--text-xs); line-height: 1.4; }

@media (max-width: 360px) {
  .land-features, .land-plans, .land-testimonials {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .land-feat, .land-plan, .land-testi { min-width: 0; }
}

@media (max-width: 640px) {
  .land-body .help-hero p,
  .land-body .help-sec-lead { font-size: var(--text-base); }
  .companion-text,
  #companion-row .companion-text { font-size: var(--text-sm) !important; }
}