/* L'ATTRIBUT `hidden` DOIT GAGNER, TOUJOURS.
   La feuille du navigateur pose `[hidden] { display: none }`, mais une regle
   d'auteur comme `.connexion { display: grid }` la bat : l'ecran de connexion
   et le voile de chargement restaient donc empiles au-dessus du tableau une
   fois la famille chargee. Dans la maquette, l'hote fournissait cette ligne ;
   ici, elle doit etre ecrite. */
[hidden] { display: none !important; }


  /* ─────────────────────────────────────────────────────────────────────────
     Tout vient du jeu : la palette est celle de src/theme/index.ts, le ciel
     est bg_child.jpg, les coffres, les héros, les familiers, l'équipement et
     la révélation du Set du Créateur sont les images de l'application.
     Un seul monde visuel, assumé : ce tableau vit sur un écran de cuisine.
     ───────────────────────────────────────────────────────────────────────── */
  :root {
    --nuit:        #081126;
    --nuit-haute:  rgba(16, 27, 66, 0.82);
    --bordure:     rgba(139, 142, 200, 0.28);
    --bordure-vive:rgba(139, 98, 255, 0.62);
    --encre:       #F8F8FF;
    --encre-douce: #C3C1D8;
    --encre-faible:#9193B0;
    --or:          #FFC857;
    --or-sombre:   #C89120;
    --violet:      #A987FF;
    --violet-fonce:#684CFF;
    --vert:        #2FD66E;
    --ambre:       #FF9F43;
    --cyan:        #3DD6FF;
    --r-sm: 10px; --r-md: 16px; --r-lg: 26px;
  }
  * { box-sizing: border-box; }

  body {
    margin: 0; background: var(--nuit); color: var(--encre);
    font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  }

  .ciel {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: url('tableau/fond.jpg');
    background-size: cover; background-position: center top;
  }
  #poussiere { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .voile {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,17,38,0.24) 0%, rgba(8,17,38,0.58) 40%, rgba(8,17,38,0.90) 100%);
  }
  #confettis { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

  .enveloppe {
    position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
    padding-inline: 20px; padding-block: 20px 60px;
  }

  h1, h2, h3 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 700; text-wrap: balance; margin: 0; }
  .etiquette { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-faible); }
  .nombres { font-variant-numeric: tabular-nums; }
  .barre h1, .titre-bloc h2, .barre .etiquette, .titre-bloc .etiquette {
    text-shadow: 0 2px 14px rgba(8,17,38,0.9), 0 1px 3px rgba(8,17,38,0.8);
  }
  .verre {
    background: var(--nuit-haute); border: 1px solid var(--bordure);
    border-radius: var(--r-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }

  .avis {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px dashed var(--bordure); border-radius: var(--r-md);
    padding: 12px 16px; margin-bottom: 20px;
    background: rgba(61,214,255,0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 13.5px; color: var(--encre-douce); line-height: 1.45;
  }
  .avis strong { color: var(--cyan); font-weight: 800; }

  /* ── Connexion ─────────────────────────────────────────────────────────── */
  .connexion { min-height: 72vh; display: grid; place-items: center; padding-block: 24px; }
  .carte-connexion {
    width: 100%; max-width: 430px;
    background: linear-gradient(180deg, rgba(28,41,92,0.92), rgba(13,22,54,0.95));
    border: 1px solid var(--bordure-vive); border-radius: var(--r-lg);
    padding: 34px 30px; box-shadow: 0 34px 90px rgba(0,0,0,0.6);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .marque { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .sceau {
    width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 23px;
    background: linear-gradient(145deg, var(--violet), var(--violet-fonce));
    box-shadow: 0 10px 26px rgba(104,76,255,0.5);
  }
  .marque h1 { font-size: 23px; letter-spacing: -0.015em; }
  .marque p { margin: 3px 0 0; font-size: 12.5px; color: var(--encre-faible); }
  label.champ { display: block; margin-bottom: 14px; }
  label.champ span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); }
  input[type="email"], input[type="password"] {
    width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--bordure); background: rgba(8,17,38,0.66);
    color: var(--encre); font: inherit; font-size: 15px;
  }
  input:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

  .bouton {
    font: inherit; font-weight: 800; cursor: pointer; border-radius: var(--r-sm);
    border: 1px solid transparent; padding: 12px 18px;
    transition: transform 0.12s ease, filter 0.12s ease;
  }
  .bouton:hover { filter: brightness(1.1); }
  .bouton:active { transform: translateY(1px); }
  .bouton.plein {
    width: 100%; font-size: 15.5px; color: #fff;
    background: linear-gradient(140deg, var(--violet), var(--violet-fonce));
    box-shadow: 0 12px 30px rgba(104,76,255,0.45);
  }
  .bouton.discret {
    background: rgba(16,27,66,0.6); border-color: var(--bordure); color: var(--encre-douce);
    font-size: 13px; padding: 9px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .bouton.discret[aria-pressed="true"] { background: rgba(139,98,255,0.28); border-color: var(--bordure-vive); color: var(--encre); }
  .note-connexion { margin: 18px 0 0; font-size: 12px; color: var(--encre-faible); text-align: center; line-height: 1.55; }

  /* ── Barre ─────────────────────────────────────────────────────────────── */
  .barre { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-block: 4px 18px; }
  .barre-gauche { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .barre h1 { font-size: 21px; }
  .barre-outils { display: flex; gap: 8px; flex-wrap: wrap; }

  .rangee-enfants { display: flex; gap: 10px; overflow-x: auto; padding-block: 4px 18px; }
  .jeton-enfant {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 7px 16px 7px 7px; border-radius: 999px;
    border: 1px solid var(--bordure); background: rgba(16,27,66,0.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--encre-douce); cursor: pointer; font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .jeton-enfant[aria-pressed="true"] { border-color: var(--bordure-vive); background: rgba(139,98,255,0.26); color: var(--encre); }
  .disque {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    background: radial-gradient(closest-side, rgba(169,135,255,0.5), rgba(104,76,255,0.24));
  }
  .disque img { width: 122%; height: 122%; object-fit: contain; object-position: center 22%; }
  .jeton-enfant .qui { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
  .jeton-enfant .qui b { font-size: 15px; font-weight: 800; }
  .jeton-enfant .qui small { font-size: 11px; color: var(--encre-faible); }
  .grelot { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ambre); color: #2A1403; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }

  /* ── La scène du héros ─────────────────────────────────────────────────── */
  .scene {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    border: 1px solid var(--bordure);
    background:
      radial-gradient(760px 340px at 22% 118%, rgba(169,135,255,0.34), transparent 66%),
      linear-gradient(135deg, rgba(28,41,92,0.86), rgba(13,22,54,0.92));
    box-shadow: 0 26px 70px rgba(0,0,0,0.5);
    padding: 22px 26px; margin-bottom: 18px;
    display: grid; grid-template-columns: auto minmax(0,1fr); gap: 24px; align-items: center;
  }
  .scene::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 180px at 90% 0%, rgba(255,200,87,0.16), transparent 70%);
  }
  .duo { position: relative; display: flex; align-items: flex-end; flex: 0 0 auto; }
  .duo .heros { width: 208px; height: 208px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6)); }

  /* ── La visionneuse 3D ─────────────────────────────────────────────────── */
  .scene3d {
    position: relative; width: 300px; height: 320px; flex: 0 0 auto;
    border-radius: 22px; overflow: hidden;
    background:
      radial-gradient(closest-side at 50% 88%, rgba(169,135,255,0.34), transparent 74%),
      linear-gradient(180deg, rgba(8,17,38,0.24), rgba(8,17,38,0.52));
    border: 1px solid rgba(255,200,87,0.28);
    cursor: grab; touch-action: none; user-select: none;
  }
  .scene3d.tire { cursor: grabbing; }
  /* Derriere le portrait, le familier chevauche ; devant la visionneuse, non. */
  .scene3d:not([hidden]) ~ .familier { margin-left: 12px; }
  .scene3d canvas { display: block; width: 100%; height: 100%; }
  .scene3d .indice {
    position: absolute; left: 50%; bottom: 10px; translate: -50% 0;
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--encre-douce); background: rgba(8,17,38,0.72);
    border: 1px solid var(--bordure); border-radius: 999px; padding: 5px 11px;
    pointer-events: none; transition: opacity 0.4s ease;
    white-space: nowrap; font-size: 10px; letter-spacing: 0.04em;
  }
  .scene3d.touche .indice { opacity: 0; }
  .scene3d .chargement {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 12.5px; color: var(--encre-faible); text-align: center; padding: 20px;
  }
  @media (max-width: 660px) { .scene3d { width: 100%; max-width: 300px; height: 280px; } }
  .duo .familier { width: 124px; height: 124px; object-fit: contain; margin-left: -34px; margin-bottom: 6px; position: relative; z-index: 1; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55)); }
  .socle { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; width: 86%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(169,135,255,0.45), transparent 72%); }
  .scene-texte { min-width: 0; position: relative; }
  .scene-texte h2 { font-size: 40px; font-weight: 900; letter-spacing: -0.025em; line-height: 1; }
  .sous-nom { margin: 7px 0 0; font-size: 14px; color: var(--encre-douce); }
  .pastille-classe {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: rgba(169,135,255,0.2); border: 1px solid rgba(169,135,255,0.38);
    color: var(--violet); font-weight: 800; font-size: 12px; margin-right: 8px;
  }
  .pastille-recette {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: rgba(255,200,87,0.14); border: 1px solid rgba(255,200,87,0.4);
    color: var(--or); font-weight: 800; font-size: 12px; margin-right: 8px;
  }
  /* La pièce d'or dessinée (voir PIECE dans tableau.js) : elle suit la taille
     du texte autour d'elle et tombe sur la ligne de base comme un caractère. */
  .i-piece { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
  .bouton-prendre .i-piece { vertical-align: -0.16em; }

  /* Bouton avec pictogramme (plein écran) : l'icône et le mot alignés. */
  .bouton.avec-icone { display: inline-flex; align-items: center; gap: 7px; }
  .i-plein { width: 17px; height: 17px; flex: none; }
  .erreur-plein-ecran { flex-basis: 100%; max-width: 38rem; margin: 6px 0 0 auto; color: #ffd285; font-size: .85rem; line-height: 1.5; }

  .monnaies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
  .monnaie {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
    background: rgba(8,17,38,0.56); border: 1px solid var(--bordure); font-weight: 800; font-size: 15px;
  }
  .monnaie small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); }
  .monnaie.or b { color: var(--or); } .monnaie.cle b { color: var(--cyan); }
  .monnaie.xp b { color: var(--violet); } .monnaie.flamme b { color: var(--ambre); }

  /* Son équipement, tel qu'il le porte vraiment. */
  .equipement { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .piece {
    display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
    border-radius: 999px; background: rgba(8,17,38,0.5); border: 1px solid var(--bordure);
  }
  .piece img { width: 30px; height: 30px; object-fit: contain; }
  .piece span { display: flex; flex-direction: column; line-height: 1.15; }
  .piece b { font-size: 12.5px; font-weight: 800; }
  .piece small { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); font-weight: 800; }
  .rien-equipe { margin-top: 16px; font-size: 13px; color: var(--encre-faible); }

  @media (max-width: 660px) {
    .scene { grid-template-columns: 1fr; text-align: center; }
    .duo { justify-content: center; }
    .duo .heros { width: 160px; height: 160px; } .duo .familier { width: 96px; height: 96px; }
    .monnaies, .equipement { justify-content: center; }
    .scene-texte h2 { font-size: 32px; }
  }

  /* ── Le coffre ─────────────────────────────────────────────────────────── */
  .coffre {
    display: grid; grid-template-columns: auto minmax(0,1fr); gap: 26px; align-items: center;
    border-radius: var(--r-lg); padding: 22px 28px; margin-bottom: 16px;
    background:
      linear-gradient(135deg, rgba(255,200,87,0.17), rgba(255,200,87,0.02) 56%),
      linear-gradient(180deg, rgba(22,34,78,0.92), rgba(13,22,54,0.94));
    border: 1px solid rgba(255,200,87,0.38);
    box-shadow: 0 26px 70px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .coffre.pret { border-color: rgba(47,214,110,0.6); background: linear-gradient(135deg, rgba(47,214,110,0.2), rgba(47,214,110,0.02) 56%), linear-gradient(180deg, rgba(22,34,78,0.92), rgba(13,22,54,0.94)); }
  .coffre img.boite { width: 138px; height: 138px; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(255,200,87,0.3)); }
  .coffre.pret img.boite { animation: respire 2.6s ease-in-out infinite; }
  @keyframes respire { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-5px); } }
  .coffre h2 { font-size: 29px; letter-spacing: -0.02em; margin-bottom: 6px; }
  .coffre p { margin: 0; font-size: 16px; color: var(--encre-douce); }
  .rail { margin-top: 16px; height: 13px; border-radius: 999px; background: rgba(8,17,38,0.66); overflow: hidden; border: 1px solid var(--bordure); }
  .rail i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--or-sombre), var(--or)); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }
  .coffre.pret .rail i { background: linear-gradient(90deg, #15803D, var(--vert)); }
  @media (max-width: 560px) { .coffre { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

  /* ── Le Village, en grand : où l'enfant doit aller ─────────────────────── */
  .village {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    margin-bottom: 26px; border: 1px solid rgba(255,200,87,0.3);
    min-height: 168px; display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 20px; align-items: center; padding: 22px 26px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  }
  .village .decor {
    position: absolute; inset: 0; z-index: 0;
    background-image: url('tableau/village.jpg'); background-size: cover; background-position: center 38%;
  }
  .village .decor::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,17,38,0.92) 0%, rgba(8,17,38,0.74) 52%, rgba(8,17,38,0.42) 100%);
  }
  .village-texte { position: relative; z-index: 1; min-width: 0; }
  .village-texte .etiquette { color: var(--or); }
  .village-texte h2 { font-size: 30px; letter-spacing: -0.02em; margin: 5px 0 8px; }
  .village-texte p { margin: 0; font-size: 16.5px; color: var(--encre-douce); max-width: 46ch; }
  .mira-carte { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 132px; flex: 0 0 auto; text-align: center; }
  .mira-carte img {
    width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255,200,87,0.55); box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  }
  .mira-carte b { font-family: 'Fraunces', serif; font-size: 17px; }
  .mira-carte small { font-size: 10.5px; color: var(--encre-douce); line-height: 1.3; }
  @media (max-width: 660px) { .village { grid-template-columns: 1fr; text-align: center; justify-items: center; } .village-texte p { max-width: none; } }

  /* ── Grille ────────────────────────────────────────────────────────────── */
  /* LES DEUX COLONNES FINISSENT SUR LA MEME LIGNE.
     Avec `align-items: start`, chaque colonne s'arrete ou son contenu
     s'arrete : la carte du Set flottait quinze pixels plus bas que le panneau
     du butin, et ca se voyait. On etire les colonnes a la hauteur de la plus
     haute, puis la DERNIERE carte de chacune vient toucher le bas. */
  .grille {
    display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
    gap: 22px; align-items: stretch; margin-bottom: 42px;
  }
  .grille > div, .grille > aside { display: flex; flex-direction: column; min-width: 0; }
  .grille > aside > .panneau:last-child { flex: 1 1 auto; margin-bottom: 0; }
  @media (max-width: 960px) { .grille { grid-template-columns: 1fr; } }
  .bloc { margin-bottom: 26px; }
  .titre-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .titre-bloc h2 { font-size: 22px; }

  /* ── Une tâche ─────────────────────────────────────────────────────────── */
  .taches { display: flex; flex-direction: column; gap: 10px; }
  .tache {
    display: grid;
    /* Trois colonnes FIXES pour toute la liste : la case, le texte, la bande
       de gains. Les gains ont une largeur propre et identique d'une ligne à
       l'autre — c'est la seule façon d'obtenir des colonnes qui tombent
       droit, quel que soit le nombre de chiffres ou le nom du coffre. */
    grid-template-columns: 34px minmax(0, 1fr) 312px;
    gap: 16px; align-items: center;
    width: 100%; text-align: left;
    background: linear-gradient(180deg, rgba(20,32,74,0.86), rgba(14,24,58,0.86));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bordure);
    border-radius: 18px; padding: 13px 16px 13px 14px;
    color: inherit; font: inherit; cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
  }
  /* Le liseré d'état est peint, pas bordé : une bordure gauche décalait le
     contenu d'un état à l'autre et cassait justement l'alignement. */
  .tache::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--encre-faible);
  }
  .tache { position: relative; overflow: hidden; }
  .tache:hover { background: linear-gradient(180deg, rgba(30,45,100,0.9), rgba(18,30,72,0.9)); border-color: var(--bordure-vive); }
  .tache[data-etat="envoyee"]::before { background: var(--ambre); }
  .tache[data-etat="validee"]::before { background: var(--vert); }
  .tache[data-etat="validee"] { opacity: 0.62; cursor: default; }
  .tache[data-etat="validee"]:hover { background: linear-gradient(180deg, rgba(20,32,74,0.86), rgba(14,24,58,0.86)); border-color: var(--bordure); }
  .tache.vient-de-partir { animation: sursaut 0.55s cubic-bezier(0.22,1,0.36,1); }
  @keyframes sursaut {
    0% { transform: scale(1); }
    35% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(255,159,67,0.22); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,159,67,0); }
  }

  .case {
    width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
    border: 2px solid rgba(145,147,176,0.55); display: grid; place-items: center;
    font-size: 16px; font-weight: 800; color: transparent;
    background: rgba(8,17,38,0.4);
    transition: border-color 0.16s ease, background 0.16s ease;
  }
  .tache:hover[data-etat="afaire"] .case { border-color: var(--cyan); background: rgba(61,214,255,0.12); }
  .tache[data-etat="envoyee"] .case { border-color: var(--ambre); color: var(--ambre); background: rgba(255,159,67,0.16); }
  .tache[data-etat="validee"] .case { border-color: var(--vert); color: var(--vert); background: rgba(47,214,110,0.18); }

  .intitule { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .intitule b {
    display: flex; align-items: center; gap: 9px;
    font-size: 16.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere;
  }
  .intitule .categorie {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
    background: rgba(8,17,38,0.45); border: 1px solid var(--bordure);
    font-size: 13px; flex: 0 0 auto;
  }
  .tache[data-etat="validee"] .intitule .titre-texte { text-decoration: line-through; text-decoration-color: rgba(47,214,110,0.6); }
  .etat-mot { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding-left: 35px; }
  .tache[data-etat="afaire"] .etat-mot { color: var(--encre-faible); }
  .tache[data-etat="envoyee"] .etat-mot { color: var(--ambre); }
  .tache[data-etat="validee"] .etat-mot { color: var(--vert); }

  /* LA BANDE DE GAINS : une grille à colonnes fixes, pas des pastilles qui
     se poussent. Chaque valeur occupe la même case sur toutes les lignes. */
  .gains {
    display: grid; grid-template-columns: 58px 62px 66px 116px;
    gap: 8px; align-items: stretch; font-variant-numeric: tabular-nums;
  }
  .gain {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 6px 4px; border-radius: 12px;
    border: 1px solid transparent; white-space: nowrap;
    background: rgba(8,17,38,0.42);
  }
  .gain b { font-size: 14px; font-weight: 800; line-height: 1.1; }
  .gain small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); }
  .gain.or { border-color: rgba(255,200,87,0.3); } .gain.or b { color: var(--or); }
  .gain.xp { border-color: rgba(169,135,255,0.32); } .gain.xp b { color: var(--violet); }
  .gain.temps { border-color: rgba(61,214,255,0.3); } .gain.temps b { color: var(--cyan); }
  .gain.coffre {
    flex-direction: row; gap: 7px; justify-content: flex-start;
    padding: 4px 9px 4px 4px; border-color: var(--bordure);
  }
  .gain.coffre img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
  .gain.coffre .texte { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
  .gain.coffre .texte b { font-size: 12.5px; color: var(--encre-douce); }
  .gain.coffre .texte small { letter-spacing: 0.06em; }

  @media (max-width: 1180px) {
    .tache { grid-template-columns: 34px minmax(0, 1fr); }
    .gains { grid-column: 2; margin-top: 4px; }
  }
  @media (max-width: 480px) {
    .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gain.coffre { grid-column: 1 / -1; }
  }

  .vide { border: 1px dashed var(--bordure); border-radius: var(--r-md); padding: 28px 22px; text-align: center; color: var(--encre-douce); background: rgba(16,27,66,0.6); }
  .vide b { display: block; font-size: 17px; margin-bottom: 6px; color: var(--encre); }
  .vide small { font-size: 13px; color: var(--encre-faible); }

  /* ── Panneaux ──────────────────────────────────────────────────────────── */
  .panneau { padding: 18px; margin-bottom: 16px; }
  .panneau h3 { font-size: 16.5px; margin-bottom: 13px; }
  .compagnon { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: center; }
  .compagnon img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
  .nom-familier { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; line-height: 1.1; }
  .stade { font-size: 11px; color: var(--encre-faible); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .besoins { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
  .besoin { display: grid; grid-template-columns: 62px minmax(0,1fr) 34px; gap: 8px; align-items: center; font-size: 11.5px; }
  .besoin span { color: var(--encre-faible); font-weight: 700; }
  .b-rail { height: 7px; border-radius: 999px; background: rgba(8,17,38,0.6); overflow: hidden; }
  .b-rail i { display: block; height: 100%; border-radius: 999px; }
  .besoin em { font-style: normal; font-weight: 800; text-align: right; }

  /* ── La tirelire : un anneau, pas un cochon ────────────────────────────── */
  .epargne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: center; }
  .anneau { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
  .anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .anneau circle { fill: none; stroke-width: 9; stroke-linecap: round; }
  .anneau .piste { stroke: rgba(8,17,38,0.66); }
  .anneau .arc {
    stroke: url(#degradeOr); stroke: var(--or);
    stroke-dasharray: 327; stroke-dashoffset: 327;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  .anneau.atteint .arc { stroke: var(--vert); }
  .anneau .dedans {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1;
  }
  .anneau .dedans b { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; color: var(--or); }
  .anneau.atteint .dedans b { color: var(--vert); font-size: 34px; }
  .anneau .dedans small { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); margin-top: 3px; }
  .epargne-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .epargne-texte b { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
  .epargne-texte span { font-size: 12.5px; color: var(--encre-douce); line-height: 1.35; }
  .epargne-texte em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--or); }
  .epargne-texte em.atteint { color: var(--vert); }

  /* ── Ce que tu peux t'offrir ───────────────────────────────────────────── */
  .vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
  .prix-carte {
    position: relative; overflow: hidden; border-radius: 20px;
    border: 1px solid var(--bordure);
    background: linear-gradient(168deg, rgba(30,44,98,0.92), rgba(12,20,50,0.94));
    display: flex; flex-direction: column; min-height: 214px;
    transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), border-color 0.18s ease;
  }
  .prix-carte:hover { transform: translateY(-3px); border-color: var(--bordure-vive); }
  /* L'emoji devient un décor, pas une icône : grand, décalé, à peine visible.
     C'est ce qui donne une image de fond sans avoir à en inventer une. */
  .prix-carte .fond {
    position: absolute; right: -18px; bottom: -26px;
    font-size: 138px; line-height: 1; opacity: 0.15;
    rotate: -9deg; pointer-events: none; user-select: none;
  }
  .prix-carte .haut { position: relative; padding: 18px 20px 0; flex: 1; }
  .prix-carte .emo {
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
    font-size: 29px; background: rgba(8,17,38,0.5); border: 1px solid var(--bordure);
    margin-bottom: 13px;
  }
  .prix-carte .nom {
    display: block; font-family: 'Fraunces', serif; font-weight: 700;
    font-size: 19px; line-height: 1.22; overflow-wrap: anywhere;
  }
  .prix-carte .prix-or {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    font-size: 13px; font-weight: 800; color: var(--or);
    background: rgba(255,200,87,0.12); border: 1px solid rgba(255,200,87,0.3);
    padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
  }
  .prix-carte .bas {
    position: relative; margin-top: auto; padding: 13px 16px 14px;
    border-top: 1px solid var(--bordure); background: rgba(8,17,38,0.32);
  }
  .prix-carte .manque { font-size: 13px; font-weight: 800; color: var(--encre-douce); }
  .prix-carte .jauge { margin-top: 9px; height: 7px; border-radius: 999px; background: rgba(8,17,38,0.66); overflow: hidden; }
  .prix-carte .jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--or-sombre), var(--or)); }

  /* LE GESTE DE L'ENFANT : « je la prends ». Il demande, il ne se sert pas. */
  .bouton-prendre {
    width: 100%; font: inherit; font-weight: 800; font-size: 14.5px;
    border: 0; border-radius: 12px; padding: 11px 14px; cursor: pointer;
    background: linear-gradient(140deg, var(--or), var(--or-sombre));
    color: #2A1A03; box-shadow: 0 8px 20px rgba(255,200,87,0.22);
    transition: filter 0.14s ease, transform 0.12s ease;
  }
  .bouton-prendre:hover { filter: brightness(1.07); }
  .bouton-prendre:active { transform: translateY(1px); }
  .etat-demande {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 800; color: var(--ambre);
  }
  .etat-demande .point {
    width: 9px; height: 9px; border-radius: 50%; background: var(--ambre); flex: 0 0 auto;
    animation: battement 1.6s ease-in-out infinite;
  }
  @keyframes battement { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  .prix-carte.demandee { border-color: rgba(255,159,67,0.5); }
  .prix-carte.demandee .bas { background: rgba(74,45,12,0.42); border-top-color: rgba(255,159,67,0.4); }
  .prix-carte.trop-cher .bas { background: rgba(8,17,38,0.42); }

  /* ── Butin rare ────────────────────────────────────────────────────────── */
  .butin { text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .butin .gros { font-family: 'Fraunces', serif; font-weight: 900; font-size: 46px; line-height: 1; color: var(--or); }
  .butin .sous { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); margin-top: 3px; }
  .butin .b-rail { margin-top: 12px; height: 9px; }
  .butin p { margin: 11px 0 0; font-size: 13.5px; color: var(--encre-douce); line-height: 1.5; text-align: left; }

  /* ── Le Set du Créateur, en carte ─────────────────────────────────────── */
  .set-ultime {
    margin-top: auto;   /* colle au bas de la colonne ; l'ecart mini vient du bloc au-dessus */
    display: grid; grid-template-columns: 158px minmax(0, 1fr);
    gap: 18px; align-items: stretch; overflow: hidden;
    border-radius: 20px; border: 1px solid rgba(255,200,87,0.3);
    background: linear-gradient(150deg, rgba(34,46,104,0.9), rgba(13,22,54,0.94));
    box-shadow: 0 20px 52px rgba(0,0,0,0.42);
  }
  .set-ultime.eveille { border-color: rgba(255,200,87,0.62); box-shadow: 0 0 0 1px rgba(255,200,87,0.22), 0 20px 52px rgba(0,0,0,0.46); }
  .set-image { position: relative; overflow: hidden; }
  .set-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block; }
  /* Un voile sur le bord droit : l’image se fond dans la carte au lieu de
     s’arrêter net sur une couture. */
  .set-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(16,26,64,0.85) 100%);
  }
  .set-texte { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
  .set-texte .etiquette { color: var(--or); }
  .set-texte h3 { font-size: 22px; letter-spacing: -0.02em; }
  .set-texte p { margin: 0; font-size: 13.5px; color: var(--encre-douce); line-height: 1.5; }
  .pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .relique {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; padding: 3px 9px 3px 3px; border-radius: 999px;
    background: rgba(8,17,38,0.6); border: 1px solid var(--bordure); color: var(--encre-faible);
  }
  .relique img { width: 21px; height: 21px; object-fit: contain; opacity: 0.4; }
  .relique.acquise { border-color: rgba(255,200,87,0.55); color: var(--or); background: rgba(255,200,87,0.12); }
  .relique.acquise img { opacity: 1; }
  @media (max-width: 560px) {
    .set-ultime { grid-template-columns: 1fr; }
    .set-image { height: 220px; }
    .set-image::after { background: linear-gradient(180deg, transparent 45%, rgba(16,26,64,0.9) 100%); }
    .set-texte { padding: 0 20px 18px; }
  }
  /* ── La semaine, en commande de la page ───────────────────────────────── */
  .semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .jour {
    border: 1px solid var(--bordure); border-radius: 16px;
    background: linear-gradient(180deg, rgba(20,32,74,0.76), rgba(14,24,58,0.76));
    padding: 11px 6px 12px; text-align: center; cursor: pointer; font: inherit;
    color: var(--encre-douce); position: relative; overflow: hidden;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
  }
  .jour:hover { transform: translateY(-2px); border-color: var(--bordure-vive); }
  .jour[aria-pressed="true"] {
    border-color: var(--violet); color: var(--encre);
    background: linear-gradient(180deg, rgba(139,98,255,0.34), rgba(104,76,255,0.16));
    box-shadow: 0 10px 26px rgba(104,76,255,0.26);
  }
  .jour .lettre { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-faible); }
  .jour[aria-pressed="true"] .lettre { color: var(--violet); }
  .jour .num { display: block; font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; margin-top: 2px; line-height: 1; }
  .jour.present .num { color: var(--or); }
  .jour .combien {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 8px; min-height: 20px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 800;
    background: rgba(8,17,38,0.5); border: 1px solid var(--bordure); color: var(--encre-douce);
  }
  .jour .combien.rien { opacity: 0.35; }
  .jour .combien.reste { border-color: rgba(255,159,67,0.5); color: var(--ambre); }
  .jour .combien.fini { border-color: rgba(47,214,110,0.5); color: var(--vert); }
  .jour .aujourdhui {
    position: absolute; top: 0; left: 50%; translate: -50% 0;
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--or); color: #2A1A03; padding: 2px 10px; border-radius: 0 0 8px 8px;
  }
  @media (max-width: 620px) {
    .semaine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* ── Vue parent ────────────────────────────────────────────────────────── */
  .mois { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; }
  .mois .entete { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-faible); padding-bottom: 4px; }
  .case-mois { aspect-ratio: 1/1; border: 1px solid var(--bordure); border-radius: 9px; background: rgba(8,17,38,0.44); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--encre-douce); }
  .case-mois.hors { opacity: 0.3; }
  .case-mois.present { border-color: var(--or); color: var(--or); font-weight: 800; }
  .case-mois .points { display: flex; gap: 2px; }
  .case-mois .points i { width: 5px; height: 5px; border-radius: 50%; }
  .enveloppe-table { overflow-x: auto; }
  .table-famille { width: 100%; border-collapse: collapse; font-size: 14px; }
  .table-famille th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-faible); padding: 0 10px 8px 0; }
  .table-famille td { padding: 9px 10px 9px 0; border-top: 1px solid var(--bordure); vertical-align: middle; }
  .table-famille td:last-child, .table-famille th:last-child { text-align: right; padding-right: 0; }
  .cellule-enfant { display: flex; align-items: center; gap: 9px; }
  .cellule-enfant .disque { width: 30px; height: 30px; border-width: 1px; }

  /* ── Message flottant ──────────────────────────────────────────────────── */
  .brindille {
    position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 50;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; border-radius: 999px;
    background: linear-gradient(140deg, rgba(255,159,67,0.96), rgba(255,200,87,0.96));
    color: #2A1403; font-weight: 800; font-size: 15px;
    box-shadow: 0 16px 42px rgba(0,0,0,0.5);
    animation: monte 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  @keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

  .pied { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--bordure); font-size: 12.5px; color: var(--encre-faible); line-height: 1.6; }
  .pied b { color: var(--encre-douce); }

  @media (prefers-reduced-motion: reduce) {
    .coffre.pret img.boite, .tache.vient-de-partir, .brindille { animation: none; }
  }

  /* ── La feuille du frigo ───────────────────────────────────────────────── */
  /* ══════════════════════════════════════════════════════════════════════
     LA FEUILLE DU FRIGO

     L'ancienne version imprimait la page telle quelle : un calendrier du mois
     avec des points de couleur, illisible en noir et blanc, et sans une seule
     tache ecrite. Sur un frigo, ca ne sert a rien.

     Celle-ci imprime une SEMAINE, un enfant par bloc, sept colonnes de jours,
     chaque tache avec une case a cocher au crayon et ce qu'elle rapporte.
     C'est une feuille qu'on regarde de loin, pas un ecran.
     ══════════════════════════════════════════════════════════════════════ */
  .feuille { display: none; }

  @media print {
    @page { size: A4 landscape; margin: 10mm; }
    body > *:not(.feuille) { display: none !important; }
    body { background: #fff !important; color: #000; }
    .feuille { display: block; font-family: 'Figtree', system-ui, sans-serif; color: #111; }

    .feuille-tete {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 12px; border-bottom: 2.5px solid #111; padding-bottom: 6px; margin-bottom: 4mm;
    }
    .feuille-tete h1 { font-family: 'Fraunces', Georgia, serif; font-size: 22pt; margin: 0; }
    .feuille-tete .semaine-dit { font-size: 11pt; font-weight: 700; }

    .bloc-enfant { break-inside: avoid; page-break-inside: avoid; margin-bottom: 7mm; }
    .bloc-enfant + .bloc-enfant { border-top: 1px dashed #888; padding-top: 5mm; }
    .enfant-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 3mm; }
    .enfant-tete img { width: 46px; height: 46px; object-fit: contain; }
    .enfant-tete b { font-family: 'Fraunces', Georgia, serif; font-size: 16pt; }
    .enfant-tete span { font-size: 9.5pt; color: #444; }

    .grille-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; }
    .col-jour { border: 1.2px solid #333; border-radius: 3mm; padding: 2mm; min-height: 34mm; }
    .col-jour.aujourdhui { border-width: 2.5px; }
    .col-jour h3 {
      font-family: 'Figtree', sans-serif; font-size: 8pt; font-weight: 800;
      letter-spacing: 0.08em; text-transform: uppercase; color: #333;
      margin: 0 0 1.5mm; display: flex; justify-content: space-between; align-items: baseline;
    }
    .col-jour h3 em { font-style: normal; font-family: 'Fraunces', Georgia, serif; font-size: 13pt; color: #000; }
    .ligne-tache { display: flex; gap: 1.6mm; align-items: flex-start; margin-bottom: 1.6mm; }
    .ligne-tache .case-papier {
      width: 4.2mm; height: 4.2mm; border: 1.4px solid #222; border-radius: 1mm; flex: 0 0 auto; margin-top: 0.3mm;
    }
    .ligne-tache .case-papier.faite { background: #222; }
    .ligne-tache .quoi { font-size: 8.6pt; line-height: 1.25; }
    .ligne-tache .quoi b { font-weight: 700; display: block; }
    .ligne-tache .quoi small { font-size: 7.2pt; color: #555; }
    .col-jour .rien { font-size: 8pt; color: #999; }

    .feuille-pied {
      margin-top: 4mm; border-top: 1px solid #bbb; padding-top: 2mm;
      font-size: 8pt; color: #555; display: flex; justify-content: space-between; gap: 10px;
    }
  }


  /* ── Portail réel : attente, erreurs, déconnexion ───────────────────────── */
  .attente {
    position: relative; z-index: 1;
    min-height: 60vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
  }
  .attente p { margin: 0; font-size: 14.5px; color: var(--encre-douce); }
  .rondelle {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid rgba(139,142,200,0.28); border-top-color: var(--or);
    animation: tourne 0.9s linear infinite;
  }
  @keyframes tourne { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .rondelle { animation-duration: 3s; } }

  .erreur-connexion {
    margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-sm);
    background: rgba(255,92,92,0.12); border: 1px solid rgba(255,92,92,0.4);
    color: #FFB4B4; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  }

  .lien-pied {
    margin-top: 10px; font: inherit; font-size: 12.5px; font-weight: 800;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--encre-douce); text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lien-pied:hover { color: var(--encre); }
  .separateur-pied { margin: 0 8px; opacity: 0.5; }
  .ligne-mesures { white-space: nowrap; }


  /* ── La forme ultime se voit partout ───────────────────────────────────── */
  /* Un enfant qui porte les six reliques n'est plus de sa classe : sa pastille
     porte un liseré doré, pas le portrait d'un Viking qui n'existe plus. */
  .disque.ultime {
    border-color: rgba(255,200,87,0.85);
    background: radial-gradient(closest-side, rgba(255,200,87,0.42), rgba(255,140,40,0.2));
    box-shadow: 0 0 0 1px rgba(255,200,87,0.35), 0 0 14px rgba(255,160,60,0.4);
  }

  /* Les braises du Créateur débordent du cadre de la visionneuse. */
  .scene3d.embrase {
    border-color: rgba(255,170,70,0.55);
    box-shadow: 0 0 34px rgba(255,140,50,0.28), inset 0 0 40px rgba(255,120,30,0.16);
  }
  .scene3d.embrase::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(closest-side at 50% 92%, rgba(255,140,40,0.28), transparent 68%);
    animation: braise 3.1s ease-in-out infinite;
  }
  @keyframes braise { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .scene3d.embrase::after { animation: none; } }

  /* Le voile d'attente revient à chaque changement d'enfant : il doit se poser
     au-dessus du héros précédent, pas pousser la mise en page. */
  .scene3d .chargement {
    background: rgba(8,17,38,0.72);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
  }
/* Language remains available both before and after authentication. */
.tableau-langue { display:flex; justify-content:flex-end; padding:8px 0; }
.barre-outils { flex-wrap:wrap; }
.ligne-mesures { white-space:normal; overflow-wrap:anywhere; }
@media (max-width: 660px) {
  .duo { min-width:0; }
  .scene3d { max-width:100%; }
  .scene3d:not([hidden]) ~ .familier { position:absolute; right:-12px; bottom:0; margin-left:0; }
}
@media print { .tableau-langue { display:none; } }