/* Cap v3 : un fond d'ecran (fonds.js) derriere des panneaux en verre depoli. Formes arrondies, texte doux pour les yeux
   (jamais de noir pur sur blanc pur), contraste verifie sur chaque fond. Les couleurs du fond choisi sont posees par
   appliquerTheme() (app.js) sur :root ; les valeurs ci-dessous servent avant le chargement du script. */
:root {
  --bg: #f4f6fb; --surface: rgba(255, 255, 255, .76); --surface-2: rgba(255, 255, 255, .6); --surface-plein: rgba(255, 255, 255, .92);
  --line: rgba(25, 30, 50, .09); --line-2: rgba(25, 30, 50, .16);
  --ink: #2a2e37; --ink-strong: #161922; --muted: #5c6270; --on-ink: #ffffff;
  --accent: #0071e3; --accent-2: #7a5cff; --on-accent: #ffffff;
  --ok-bg: #e2f4e3; --ok-fg: #2c6a32; --warn-bg: #fdf0d0; --warn-fg: #855600;
  --info-bg: #e0eefc; --info-fg: #1d5c8f; --bad-bg: #fde6e6; --bad-fg: #a12f2d;
  --or: #f5b301; --or-ink: #3b2a00;
  --voile: 0; --lueur: 0 10px 30px rgba(30, 35, 70, .08); --ombre-btn: 0 8px 20px -10px var(--accent);
  --bord-btn: 1px solid transparent; --bord-btn-2: 1px solid var(--line-2); --bord-carte: 1px solid var(--line);
  --sans: "Nunito", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans); --display-poids: 700;
  --r-xl: 26px; --r-l: 20px; --r-m: 16px; --r-s: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --ressort: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1020; --surface: rgba(26, 30, 44, .74); --surface-2: rgba(255, 255, 255, .07); --surface-plein: rgba(26, 30, 44, .9);
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
    --ink: #e1e4ec; --ink-strong: #f6f7fb; --muted: #a5abba; --on-ink: #121420;
    --ok-bg: rgba(90, 190, 110, .18); --ok-fg: #9fdcaa; --warn-bg: rgba(230, 180, 60, .16); --warn-fg: #f0cd75;
    --info-bg: rgba(90, 160, 230, .16); --info-fg: #8cc4ee; --bad-bg: rgba(230, 100, 100, .16); --bad-fg: #f2a3a0;
    --lueur: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1020; --surface: rgba(26, 30, 44, .74); --surface-2: rgba(255, 255, 255, .07); --surface-plein: rgba(26, 30, 44, .9);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --ink: #e1e4ec; --ink-strong: #f6f7fb; --muted: #a5abba; --on-ink: #121420;
  --ok-bg: rgba(90, 190, 110, .18); --ok-fg: #9fdcaa; --warn-bg: rgba(230, 180, 60, .16); --warn-fg: #f0cd75;
  --info-bg: rgba(90, 160, 230, .16); --info-fg: #8cc4ee; --bad-bg: rgba(230, 100, 100, .16); --bad-fg: #f2a3a0;
  --lueur: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; background: transparent; color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* fond d'ecran : couche fixe, un voile de la couleur du fond calme les motifs charges */
#fond { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; view-transition-name: fond; }
#fond .couche { position: absolute; inset: 0; }
#fond svg { width: 100%; height: 100%; display: block; }
#fond::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--voile); }

.app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 16px calc(112px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; }
.vue { padding-top: calc(16px + env(safe-area-inset-top, 0px)); display: grid; gap: 16px; align-content: start; }
.vue.entre > * { animation: entree 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes entree { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* typographie : titres dans la police du fond, texte courant arrondi et aere */
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
.titre { font: var(--display-poids) 30px/1.12 var(--display); letter-spacing: -0.005em; color: var(--ink-strong); overflow-wrap: anywhere; }
.sous-titre { font: var(--display-poids) 21px/1.25 var(--display); color: var(--ink-strong); }
.etiquette { font: 800 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.discret { color: var(--muted); font-size: 14px; }
.lead { max-width: 56ch; color: var(--muted); margin: 4px 0 0; }

/* panneaux de verre : tout le texte vit dessus, jamais directement sur le fond */
.panneau, .carte { background: var(--surface); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: var(--bord-carte); border-radius: var(--r-xl); box-shadow: var(--lueur); }
.panneau { padding: 18px; display: grid; gap: 14px; min-width: 0; }
.panneau.serre { padding: 10px; }
/* une colonne qui ne s'elargit jamais au contenu : un titre long sur une ligne (lien retour) se coupe au lieu de deborder */
.vue, .panneau, .entete { grid-template-columns: minmax(0, 1fr); }

/* entete de vue */
.entete { display: grid; gap: 8px; }
.retour { max-width: 100%; text-align: left; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; min-height: 40px; color: var(--muted); font-size: 14px; font-weight: 700; width: fit-content; }
.retour:hover { color: var(--ink-strong); }
.retour-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ligne-entete > :first-child { min-width: 0; }

/* boutons : gros, arrondis, retour tactile a ressort */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-m); border: var(--bord-btn); background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: var(--ombre-btn); transition: transform 200ms var(--ressort), filter 160ms, box-shadow 200ms; text-align: center; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px) scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.second { background: var(--surface-plein); color: var(--ink-strong); border: var(--bord-btn-2); box-shadow: none; }
.btn.second:hover { background: var(--surface-2); }
.btn.danger { background: transparent; color: var(--bad-fg); border: var(--bord-btn-2); box-shadow: none; }
.btn.bloc { width: 100%; }
.btn.petit { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-s); }
.icone-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; border: var(--bord-btn-2); background: var(--surface-plein); color: var(--ink-strong); transition: transform 200ms var(--ressort); text-decoration: none; }
.icone-btn:hover { background: var(--surface-2); }
.icone-btn:active { transform: scale(.9); }
.ico { width: 18px; height: 18px; flex: none; }

/* niveau et XP */
.niveau { display: flex; align-items: center; gap: 12px; }
.badge-niveau { width: 46px; height: 46px; flex: none; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--on-accent); font: var(--display-poids) 20px/1 var(--display); box-shadow: var(--ombre-btn); }
.badge-niveau.grand { width: 96px; height: 96px; border-radius: 30px; font-size: 44px; margin: 0 auto; }
.niveau-corps { flex: 1; min-width: 0; display: grid; gap: 6px; }
.niveau-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14.5px; color: var(--ink-strong); }
.niveau-ligne b { font-weight: 800; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niveau-corps > .xp-texte { justify-self: end; margin-top: -2px; }
.niveau .serie { padding: 3px 9px; font-size: 13px; }
.xp-texte { color: var(--muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-barre { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; position: relative; }
.xp-barre i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease); }
.xp-barre i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: reflet 2.6s ease-in-out infinite; }
@keyframes reflet { 60%, 100% { transform: translateX(100%); } }
.serie { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; background: var(--warn-bg); color: var(--warn-fg); font-weight: 800; font-size: 14px; flex: none; }
.serie .ico { width: 16px; height: 16px; }

/* rappel du jour */
.rappel { gap: 6px; }
.rappel-tete { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.rappel-ligne { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; margin: 0 -4px; border: 0; border-radius: var(--r-m); background: transparent; transition: background 160ms; }
.rappel-ligne:hover, .rappel-ligne:active { background: var(--surface-2); }
.rappel-k { grid-column: 1; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.rappel-v { grid-column: 1; color: var(--ink-strong); font-weight: 700; overflow-wrap: anywhere; }
.rappel-ligne > :last-child:not(.rappel-v) { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); }

/* anneaux de progression */
.anneau-mini { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.anneau-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anneau-mini circle { fill: none; stroke-width: 4; }
.anneau-mini .piste { stroke: var(--line); }
.anneau-mini .plein { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 900ms var(--ease); }
.anneau-mini b { font-size: 11px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

/* cartes d'objectif */
.liste-objectifs { display: grid; gap: 12px; }
.objectif { display: grid; gap: 12px; padding: 18px; text-align: left; width: 100%; transition: transform 240ms var(--ressort); color: inherit; }
.objectif:active { transform: scale(.98); }
.obj-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.objectif .nom { font: var(--display-poids) 19px/1.25 var(--display); color: var(--ink-strong); min-width: 0; overflow-wrap: anywhere; }
.objectif.atteint { box-shadow: 0 0 0 2px var(--or), var(--lueur); }
.barre { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; display: block; }
.barre > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; }

/* pastilles */
.pastille { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 99px; font: 800 11.5px/1 var(--sans); letter-spacing: .02em; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pastille.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pastille.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pastille.info { background: var(--info-bg); color: var(--info-fg); }
.pastille.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pastille.or { background: var(--or); color: var(--or-ink); }
.pastille .ico { width: 13px; height: 13px; }

/* grille 3 par 3 */
.mandala { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; container-type: inline-size; touch-action: pan-y; }
.cell { position: relative; aspect-ratio: 1 / 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 11px; text-align: left; background: var(--surface-plein); border: var(--bord-carte); border-radius: var(--r-m); overflow: hidden; color: inherit;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 240ms var(--ressort), box-shadow 220ms, background 220ms, outline-color 160ms; outline: 3px solid transparent; outline-offset: 2px; }
.cell:active { transform: scale(.95); }
.vue.entre .cell { animation: pop 560ms var(--ressort) both; animation-delay: calc(var(--i, 0) * 40ms + 100ms); }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.cell .txt { flex: 1; min-height: 0; font-size: 12.5px; line-height: 1.3; font-weight: 700; color: var(--ink-strong); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
@container (min-width: 440px) { .cell .txt { font-size: 14.5px; -webkit-line-clamp: 5; } .cell { padding: 14px; } }
.cell .pied { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 18px; color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cell.vide { border: 2px dashed var(--line-2); background: var(--surface-2); align-items: center; justify-content: center; color: var(--muted); }
.cell.vide:hover { border-color: var(--accent); color: var(--accent); }
.cell.vide .ico { width: 22px; height: 22px; }
.cell.centre { background: linear-gradient(145deg, var(--accent), var(--accent-2)); border: var(--bord-carte); border-color: transparent; color: var(--on-accent); justify-content: center; align-items: center; text-align: center; cursor: default; padding: 14px 10px; box-shadow: var(--ombre-btn); }
.cell.centre .txt { flex: 0 1 auto; color: var(--on-accent); font: var(--display-poids) 13.5px/1.2 var(--display); -webkit-line-clamp: 4; }
@container (min-width: 440px) { .cell.centre .txt { font-size: 17px; } }
.cell.centre:active { transform: none; }
.cell.centre.atteint { background: linear-gradient(145deg, #f7c948, #e08a00); color: #3b2a00; }
.cell.centre.atteint .txt, .cell.centre.atteint .pct { color: #3b2a00; }
.cell.centre .pct { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.cell.centre .pct .ico { width: 13px; height: 13px; }
.cell.centre.recoit { animation: recoit 700ms var(--ressort); }
@keyframes recoit { 35% { transform: scale(1.12); filter: brightness(1.25); } }
.anneau-centre { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anneau-centre rect { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; }
.anneau-centre .piste { stroke: currentColor; opacity: .25; }
.anneau-centre .plein { stroke: currentColor; stroke-linecap: round; transition: stroke-dasharray 1200ms var(--ease); }
.cell.fait { background: var(--ok-bg); }
.cell.fait .txt { color: var(--ok-fg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cell.trophee { box-shadow: inset 0 0 0 2.5px var(--or); }
.badge-trophee { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--or); color: var(--or-ink); display: grid; place-items: center; z-index: 1; }
.badge-trophee .ico { width: 14px; height: 14px; }
.cell.trophee .txt { padding-right: 18px; }
.mini-barre { display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; flex: none; }
.mini-barre i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); }
.cell .marques { display: flex; gap: 4px; align-items: center; }
.cell .marques .ico { width: 14px; height: 14px; }
.cell .etoile { color: var(--warn-fg); }
/* case d'action : un bouton pour ouvrir, une coche ronde pour cocher sans ouvrir */
.cell.action { padding: 0; display: block; }
.cell-ouvrir { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: 11px 11px 38px; background: none; border: 0; text-align: left; color: inherit; border-radius: inherit; }
/* la boite du texte ne doit pas etre etiree : sinon les lignes au-dela de la limite restent visibles sous la date */
.cell-ouvrir .txt { flex: 1 1 auto; max-height: 100%; }
.cell.action .pied { position: absolute; left: 11px; right: 46px; bottom: 12px; pointer-events: none; }
.coche-rapide { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface-plein); color: transparent; display: grid; place-items: center; padding: 0; transition: transform 260ms var(--ressort), background 200ms, border-color 200ms; }
.coche-rapide:hover { border-color: var(--ok-fg); color: var(--ok-fg); }
.coche-rapide[aria-pressed="true"] { background: var(--ok-fg); border-color: var(--ok-fg); color: var(--surface-plein); }
.coche-rapide:active { transform: scale(.8); }
.coche-rapide .ico { width: 17px; height: 17px; }
@container (min-width: 440px) { .cell-ouvrir { padding: 14px 14px 42px; } }
/* glisser pour deplacer */
.cell.souleve, .mandala.en-glisse .cell.souleve { animation: none !important; z-index: 6; box-shadow: 0 22px 44px rgba(0, 0, 0, .28); transition: box-shadow 200ms; opacity: .96; }
.mandala.en-glisse .cell:not(.souleve):not(.centre) { animation: tremble 260ms ease-in-out infinite alternate; }
@keyframes tremble { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
.cell.cible { outline-color: var(--accent); }
.cell.pose { animation: pop 520ms var(--ressort) both; }
.astuce { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 2px 4px 0; }
.astuce .ico { width: 15px; height: 15px; }

/* selecteur segmente */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 14px; padding: 4px; background: var(--surface-2); gap: 4px; border: var(--bord-btn-2); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 200ms, color 200ms; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg .point { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.seg .point.on { background: var(--ok-fg); }

/* listes d'actions */
.rangees { display: grid; }
.rangee { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 13px 2px; border-bottom: 1px solid var(--line); transition: opacity 300ms; }
.rangee:last-child { border-bottom: 0; }
.rangee .corps { min-width: 0; text-align: left; background: none; border: 0; padding: 0; }
.rangee .corps .t { color: var(--ink-strong); font-weight: 600; overflow-wrap: anywhere; }
.rangee .corps .t.fait, .rangee.fait .t { text-decoration: line-through; color: var(--muted); }
.rangee .corps .ctx { color: var(--muted); font-size: 13px; margin-top: 2px; }
.case { width: 28px; height: 28px; margin-top: 0; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface-plein); display: grid; place-items: center; color: transparent; padding: 0; transition: transform 260ms var(--ressort), background 200ms; }
.case:hover { border-color: var(--ok-fg); }
.case:active { transform: scale(.82); }
.case[aria-pressed="true"] { background: var(--ok-fg); border-color: var(--ok-fg); color: var(--surface-plein); }
.case .ico { width: 15px; height: 15px; }
.groupe { display: grid; gap: 6px; }

/* formulaires et feuilles */
.champ { display: grid; gap: 6px; }
.champ label { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.champ input, .champ textarea { width: 100%; padding: 13px 15px; background: var(--surface-plein); border: 1.5px solid var(--line-2); border-radius: var(--r-s); min-height: 48px; }
.champ textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: transparent; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0; background: none; border: 0; width: 100%; text-align: left; font-weight: 600; }
.interrupteur .rail { width: 48px; height: 28px; border-radius: 14px; background: var(--line-2); position: relative; transition: background 200ms; flex: none; }
.interrupteur .rail::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform 280ms var(--ressort); }
.interrupteur[aria-pressed="true"] .rail { background: var(--accent); }
.interrupteur[aria-pressed="true"] .rail::after { transform: translateX(20px); }
.indice { padding: 11px 13px; border-radius: var(--r-s); font-size: 13.5px; background: var(--warn-bg); color: var(--warn-fg); display: flex; gap: 8px; align-items: flex-start; }
.indice.erreur { background: var(--bad-bg); color: var(--bad-fg); }
.indice .ico { margin-top: 3px; width: 14px; height: 14px; }

.voile { position: fixed; inset: 0; z-index: 30; background: rgba(8, 10, 20, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: fondu 220ms ease both; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.feuille { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: var(--surface-plein); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border-radius: 30px 30px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; animation: monte 420ms var(--ressort) both; border-top: var(--bord-carte); }
.feuille::before { content: ""; justify-self: center; width: 42px; height: 5px; border-radius: 3px; background: var(--line-2); }
@keyframes monte { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.feuille .tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feuille .actions { display: grid; gap: 10px; }
@media (min-width: 640px) { .voile { align-items: center; } .feuille { border-radius: 30px; border: var(--bord-carte); } }

.proposition { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 13px 14px; background: var(--surface-plein); border: 1.5px solid var(--line); border-radius: var(--r-m); width: 100%; text-align: left; transition: transform 220ms var(--ressort), border-color 160ms, background 160ms; }
.proposition:active { transform: scale(.98); }
.proposition[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.proposition .case[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.attente { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 8px 0; }
.rond { width: 18px; height: 18px; border: 2.5px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: tour 800ms linear infinite; }
@keyframes tour { to { transform: rotate(360deg); } }

/* navigation basse flottante */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; view-transition-name: nav; }
.nav nav { pointer-events: auto; max-width: 420px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: var(--surface-plein); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: var(--bord-carte); border-radius: 26px; box-shadow: 0 12px 34px rgba(0, 0, 0, .14); }
.nav a { display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; min-height: 54px; border-radius: 20px; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 800; position: relative; transition: background 240ms, color 240ms, transform 240ms var(--ressort); }
.nav a:active { transform: scale(.92); }
.nav a .ico { width: 21px; height: 21px; }
.nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.nav .compteur { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--bad-fg); color: #fff; font: 800 11px/19px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface-plein); }

.vide-etat { display: grid; gap: 14px; }
.etapes { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: e; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; }
.etapes li::before { content: counter(e); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-size: 13px; font-weight: 800; color: var(--accent); }
.etapes b { color: var(--ink-strong); font-weight: 800; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; background: var(--ink-strong); color: var(--on-ink); padding: 12px 18px; border-radius: 99px; font-size: 14px; font-weight: 700; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); animation: toast 420ms var(--ressort) both; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 20px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-action { background: none; border: 0; color: var(--on-ink); font-weight: 800; text-decoration: underline; padding: 6px 0; }

/* loupe, report */
.icone-btn.mini { width: 38px; height: 38px; border-color: transparent; border: 0; background: transparent; color: var(--muted); }
.icone-btn.mini:hover { color: var(--ink-strong); background: var(--surface-2); }
.icone-btn.mini.plein { color: var(--accent); }
.lien-corps { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; }
.etoile-inline { color: var(--warn-fg); margin-right: 6px; display: inline-flex; vertical-align: -2px; }
.etoile-inline .ico { width: 14px; height: 14px; }
.reporter { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 34px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 99px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.reporter:hover { color: var(--ink-strong); }
.reporter .ico { width: 14px; height: 14px; }

/* fetes : XP qui s'envole, confettis, trophee, niveau */
.xp-vole { position: fixed; z-index: 60; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 99px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.xp-vole .ico { width: 14px; height: 14px; }
.confettis { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.confettis i { position: absolute; width: 9px; height: 13px; border-radius: 3px; }
.voile.fete { align-items: center; z-index: 50; }
.fete-carte { width: min(360px, calc(100% - 32px)); background: var(--surface-plein); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: var(--bord-carte); border-radius: 30px; padding: 26px 22px 22px; display: grid; gap: 10px; text-align: center; animation: surgit 620ms var(--ressort) both; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
@keyframes surgit { from { opacity: 0; transform: scale(.6) translateY(30px); } to { opacity: 1; transform: none; } }
.fete-trophee { width: 104px; height: 104px; margin: 0 auto 4px; border-radius: 34px; display: grid; place-items: center; background: linear-gradient(145deg, #ffd95a, #f08c00); color: #3b2a00; box-shadow: 0 14px 34px rgba(240, 140, 0, .45); animation: brille 1.8s ease-in-out infinite; }
.fete-trophee .ico { width: 58px; height: 58px; }
@keyframes brille { 50% { transform: translateY(-6px) rotate(-4deg); box-shadow: 0 22px 44px rgba(240, 140, 0, .55); } }
.trophee-vole { position: fixed; left: 0; top: 0; z-index: 60; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, #ffd95a, #f08c00); color: #3b2a00; pointer-events: none; box-shadow: 0 10px 24px rgba(240, 140, 0, .5); }
.trophee-vole .ico { width: 26px; height: 26px; }

/* choix du fond d'ecran */
.vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vignette { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; border: 2.5px solid transparent; padding: 0; background: var(--surface-2); transition: transform 260ms var(--ressort), border-color 200ms; }
.vignette:active { transform: scale(.94); }
.vignette[aria-pressed="true"] { border-color: var(--accent); }
.vignette-img, .vignette-img svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette-nom { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px 4px; border-radius: 10px; background: var(--surface-plein); color: var(--ink-strong); font-size: 13px; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette-ok { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: none; place-items: center; }
.vignette[aria-pressed="true"] .vignette-ok { display: grid; }
.vignette-ok .ico { width: 14px; height: 14px; }
.bareme { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bareme li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bareme b { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* transitions entre pages (Chrome) : on avance vers la droite, on revient vers la gauche */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html[data-dir="avant"]::view-transition-old(root) { animation-name: sort-gauche; }
html[data-dir="avant"]::view-transition-new(root) { animation-name: entre-droite; }
html[data-dir="arriere"]::view-transition-old(root) { animation-name: sort-droite; }
html[data-dir="arriere"]::view-transition-new(root) { animation-name: entre-gauche; }
@keyframes sort-gauche { to { transform: translateX(-18%); opacity: 0; } }
@keyframes entre-droite { from { transform: translateX(18%); opacity: 0; } }
@keyframes sort-droite { to { transform: translateX(18%); opacity: 0; } }
@keyframes entre-gauche { from { transform: translateX(-18%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* v3.1 : prioriser (etoile partout), prochaine etape, mode d'emploi */
.etoile-rapide { position: absolute; top: 3px; right: 3px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--muted); opacity: .75; transition: transform 260ms var(--ressort), color 160ms, background 160ms; }
.etoile-rapide .ico, .etoile-ligne .ico { width: 18px; height: 18px; }
.etoile-rapide:hover { color: var(--warn-fg); }
.etoile-rapide[aria-pressed="true"], .etoile-ligne[aria-pressed="true"] { color: var(--or); background: var(--warn-bg); opacity: 1; }
.etoile-rapide[aria-pressed="true"] svg, .etoile-ligne[aria-pressed="true"] svg { fill: currentColor; }
.etoile-rapide:active, .etoile-ligne:active { transform: scale(.8); }
.cell.action .txt { padding-right: 30px; -webkit-line-clamp: 2; }
/* petite grille (petit ecran, bordure epaisse) : la date quitte la case, elle reste dans la liste et Aujourd'hui */
@container (max-width: 320px) { .cell.action .pied > span:first-child { display: none; } }
@container (min-width: 440px) { .cell.action .txt { -webkit-line-clamp: 4; } }
.etoile-ligne { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--muted); transition: transform 260ms var(--ressort), color 160ms, background 160ms; }
.outils { display: flex; align-items: center; gap: 2px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.puces:empty { display: none; }
.puce { min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--surface-plein); color: var(--muted); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.puce[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.second[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.etape { gap: 8px; border: 2px solid var(--accent); }
.etape-tete { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.etape-num .ico { width: 18px; height: 18px; }
.etape-titre { margin: 0; font: var(--display-poids) 18px/1.3 var(--display); color: var(--ink-strong); overflow-wrap: anywhere; }
.etape .btn { margin-top: 6px; }
.fete-carte.guide { gap: 12px; width: min(400px, calc(100% - 32px)); }
.guide-dessin { display: grid; place-items: center; height: 120px; }
.guide-dessin svg { width: 110px; height: 110px; }
.points { display: flex; justify-content: center; gap: 6px; margin: 4px 0; }
.points i { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: width 260ms var(--ressort), background 200ms; }
.points i.on { width: 22px; background: var(--accent); }

/* Fonds en image (GPia, gpia/fonds-images.css) : l'image couvre l'ecran, recadree au centre. */
#fond .fond-image, .vignette-img .fond-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ================================================================================================================
   v5 : THEMES VIVANTS (themes.js). Decor anime en couches, interface habillee par la "forme" du theme
   (data-forme : neon / synth / sticker / doux), une couleur par levier (--c), mouvement propre au theme.
   Regles de performance : on n'anime que transform et opacity ; les filtres ne bougent jamais. Voir docs/techniques-ui.md
   ================================================================================================================ */
:root { --ressort-fort: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); }

/* --- la scene : boite 400 x 860 qui couvre l'ecran, un peu plus grande pour laisser jouer la profondeur */
#fond .scene { position: absolute; left: 50%; top: 50%; width: max(108vw, calc(108vh * 400 / 860)); aspect-ratio: 400 / 860; transform: translate(-50%, -50%); }
.morceau { position: absolute; }
.morceau > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prof { transform: translate3d(calc(var(--par-x, 0) * var(--prof, 0) * 70px), calc(var(--par-y, 0) * var(--prof, 0) * -.3px), 0); will-change: transform; }
#fond .particules { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* --- Neon : enseignes qui gresillent, drones, reflets qui miroitent */
.morceau > svg[class*="neon-"] { will-change: opacity; }
.neon-lent { animation: neon-lent 7s infinite; }
.neon-lent2 { animation: neon-lent 9s 2.5s infinite; }
.neon-vif { animation: neon-vif 3.4s infinite; }
.neon-casse { animation: neon-casse 5.2s infinite; }
.neon-calme { animation: neon-calme 4s ease-in-out infinite; }
@keyframes neon-lent { 0%, 40%, 43.5%, 46%, 100% { opacity: 1; } 41% { opacity: .25; } 42% { opacity: .9; } 45% { opacity: .4; } }
@keyframes neon-vif { 0%, 70%, 74%, 100% { opacity: 1; } 71% { opacity: .3; } 72.5% { opacity: .85; } 73% { opacity: .2; } }
@keyframes neon-casse { 0%, 100% { opacity: .95; } 10% { opacity: .3; } 11% { opacity: .95; } 37% { opacity: .95; } 38% { opacity: .15; } 41% { opacity: .15; } 42% { opacity: 1; } 76% { opacity: .5; } 77% { opacity: 1; } }
@keyframes neon-calme { 50% { opacity: .78; } }
.drone > i { position: absolute; inset: 0; animation: drone 19s linear infinite; }
.drone-2 > i { animation-duration: 27s; animation-delay: -11s; animation-direction: reverse; }
.drone > i::before { content: ""; position: absolute; left: 0; top: 40%; width: 7px; height: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px #9ff; }
.drone > i::after { content: ""; position: absolute; left: -6px; top: 42%; width: 4px; height: 4px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: clignote 1.1s steps(2) infinite; }
@keyframes drone { from { transform: translateX(-8%); } to { transform: translateX(108%); } }
@keyframes clignote { 50% { opacity: 0; } }
.miroitement { overflow: hidden; mix-blend-mode: screen; opacity: .55; }
.miroitement::before { content: ""; position: absolute; inset: 0 -100% 0 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .07) 22px 24px, transparent 24px 41px); animation: miroite 8s ease-in-out infinite alternate; }
@keyframes miroite { to { transform: translateX(-40%); } }

/* --- Vaporwave : sol quadrille qui defile, soleil qui respire, palmiers qui se balancent, meteores, lignes VHS */
.sol-retro { overflow: hidden; perspective: 240px; perspective-origin: 50% 0; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.sol-retro .plan { position: absolute; left: 0; right: 0; top: -40%; height: 340%; transform-origin: 50% 0; transform: rotateX(70deg); background-image: linear-gradient(var(--grille) 2px, transparent 2px), linear-gradient(90deg, var(--grille) 2px, transparent 2px); background-size: 9% 34px; background-position: center top; opacity: .9; animation: grille 1.4s linear infinite; }
@keyframes grille { from { transform: rotateX(70deg) translateY(0); } to { transform: rotateX(70deg) translateY(34px); } }
.respire { animation: respire 9s ease-in-out infinite; }
@keyframes respire { 50% { transform: translateY(3.5%); } }
.balance { transform-origin: 50% 100%; animation: balance 6.5s ease-in-out infinite; }
.balance-2 { animation-duration: 7.4s; animation-delay: -2s; }
@keyframes balance { 50% { transform: rotate(2.6deg); } }
.meteore { position: absolute; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); border-radius: 2px; opacity: 0; transform-origin: 0 50%; animation: meteore 12s linear infinite; box-shadow: 0 0 6px #fff; }
.meteore-2 { animation-duration: 17s; animation-delay: 6s; }
@keyframes meteore { 0% { opacity: 0; transform: translate(0, 0) rotate(-28deg) scaleX(.2); } 2% { opacity: 1; } 7% { opacity: 0; transform: translate(-60%, 900%) rotate(-28deg) scaleX(1); } 100% { opacity: 0; transform: translate(-60%, 900%) rotate(-28deg) scaleX(1); } }
.lignes-vhs { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); opacity: .45; overflow: hidden; }
.lignes-vhs::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(transparent, rgba(255, 255, 255, .07), transparent); animation: vhs 8s linear infinite; }
@keyframes vhs { from { transform: translateY(-100%); } to { transform: translateY(1100%); } }

/* --- Cartoon : soleil rieur, nuages qui derivent, etoiles qui scintillent, Pepin qui saute */
.soleil-rieur .rayons { transform-box: fill-box; transform-origin: center; animation: tourne 28s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.morceau .yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.scintille { transform-box: fill-box; transform-origin: center; animation: scintille 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes scintille { 50% { transform: scale(.72) rotate(18deg); opacity: .75; } }
.derive .nuage-boite { position: absolute; left: 0; top: 0; height: 100%; animation: derive var(--dur, 80s) linear infinite; animation-delay: var(--retard, 0s); }
.derive .nuage-boite > svg { width: 100%; height: 100%; overflow: visible; }
@keyframes derive { from { transform: translateX(-100%); } to { transform: translateX(calc(var(--n, 3) * 100%)); } }
.pepin .pepin-corps { transform-box: fill-box; transform-origin: 50% 100%; animation: saute 2.8s infinite; }
@keyframes saute { 0%, 58%, 100% { transform: translateY(0) scale(1, 1); } 64% { transform: translateY(0) scale(1.12, .86); } 74% { transform: translateY(-24%) scale(.92, 1.1); } 84% { transform: translateY(0) scale(1.1, .9); } 90% { transform: translateY(0) scale(.97, 1.03); } }

/* --- celebrations des themes (pieces jetables, voir CapDecor) */
.eclat { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.eclat > i { position: absolute; left: 0; top: 0; }
.eclat-trait { width: 3px; height: 22px; border-radius: 2px; }
.eclat-anneau { width: 44px; height: 44px; border: 3px solid; border-radius: 50%; }
.eclat-etincelle { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.eclat-bulle { width: 128px; height: 128px; }
.eclat-bulle svg { width: 100%; height: 100%; overflow: visible; }
.eclat-rond { width: 15px; height: 15px; border-radius: 50%; }

/* --- partout : onde au toucher, remplissages a l'arrivee, couleur par levier, reflet sur les grands boutons */
.btn, .rappel-ligne, .vignette { position: relative; overflow: hidden; }
.onde { position: absolute; border-radius: 50%; background: currentColor; opacity: .2; transform: scale(0); pointer-events: none; animation: onde 620ms cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes onde { to { transform: scale(1); opacity: 0; } }
.vue.entre .barre > i, .vue.entre .mini-barre i, .vue.entre .xp-barre i { animation: remplir 1.2s var(--ease) both; animation-delay: .25s; }
@keyframes remplir { from { transform: scaleX(0); } }
.vue.entre .anneau-mini .plein { animation: anneau-remplir 1.3s var(--ease) both .2s; }
@keyframes anneau-remplir { from { stroke-dasharray: 0 100; } }
.cell.levier::after, .cell.action::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--accent)); pointer-events: none; }
.cell .mini-barre i { background: var(--c, var(--accent)); }
.cell.centre[style*="--c"] { background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 55%, var(--accent-2))); }
.pastille-levier::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--surface-plein); }
.btn.bloc:not(.second):not(.danger)::after, .etape .btn:not(.second)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-120%); animation: brillance 5s ease-in-out infinite 1.5s; pointer-events: none; }
@keyframes brillance { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.vue.entre .cell { animation-timing-function: var(--ressort-fort); }

/* ===================================== forme NEON (cyberpunk) ===================================== */
[data-forme="neon"] .titre, [data-forme="neon"] .sous-titre, [data-forme="neon"] .objectif .nom, [data-forme="neon"] .etape-titre {
  text-shadow: 0 0 2px var(--bg), 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); letter-spacing: .01em; }
[data-forme="neon"][data-theme="dark"] .titre { color: #fff; }
[data-forme="neon"] .panneau, [data-forme="neon"] .carte {
  border-radius: 6px;
  background: linear-gradient(var(--accent), var(--accent)) top left / 16px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) top left / 2px 16px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 16px 2px no-repeat, linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 2px 16px no-repeat, var(--surface); }
[data-forme="neon"] .btn:not(.second):not(.danger) { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border: 0; border-radius: 3px; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); text-transform: uppercase; letter-spacing: .06em; font-size: 14.5px; }
[data-forme="neon"] .btn.second, [data-forme="neon"] .btn.danger { border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-forme="neon"] .cell { border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 65%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); }
[data-forme="neon"] .cell.levier::after, [data-forme="neon"] .cell.action::after { height: 2px; box-shadow: 0 0 10px var(--c, var(--accent)), 0 0 4px var(--c, var(--accent)); }
[data-forme="neon"] .cell.centre { border-radius: 5px; box-shadow: 0 0 24px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); }
[data-forme="neon"] .nav nav { border-radius: 8px; box-shadow: 0 -1px 0 var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 35%, transparent); }
[data-forme="neon"] .nav a { border-radius: 4px; }
[data-forme="neon"] .xp-barre i, [data-forme="neon"] .barre > i { box-shadow: 0 0 12px var(--accent); }
[data-forme="neon"] .badge-niveau { border-radius: 6px; }
[data-forme="neon"] .cell.coche-anim { animation: glitch .42s steps(2) both; }
[data-forme="neon"] .cell.coche-anim .txt, [data-forme="neon"] .rangee.coche-anim .t { animation: glitch-texte .42s steps(3) both; }
@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-3px, 1px) skewX(-4deg); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0) skewX(3deg); } 80% { transform: translate(2px, 1px); } 100% { transform: none; } }
@keyframes glitch-texte { 0%, 100% { text-shadow: none; } 30% { text-shadow: 2px 0 #ff2bd6, -2px 0 #21e8ff; } 60% { text-shadow: -3px 0 #ff2bd6, 3px 0 #21e8ff; } }
html[data-forme="neon"]::view-transition-new(root) { animation: neon-entre .38s steps(5) both; }
@keyframes neon-entre { 0% { clip-path: inset(0 0 100% 0); transform: translateX(6px); } 30% { clip-path: inset(0 0 55% 0); transform: translateX(-4px); } 60% { clip-path: inset(0 0 20% 0); transform: translateX(3px); } 100% { clip-path: inset(0); transform: none; } }

/* ===================================== forme SYNTH (vaporwave 80) ===================================== */
[data-forme="synth"][data-theme="dark"] .titre, [data-forme="synth"][data-theme="dark"] .objectif .nom {
  background: linear-gradient(180deg, #ffffff 0%, #ffe0fb 44%, #ff71ce 50%, #6b2a9e 53%, #7af6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
[data-forme="synth"][data-theme="light"] .titre, [data-forme="synth"][data-theme="light"] .objectif .nom {
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-forme="synth"] .titre { letter-spacing: .02em; }
/* le chrome se repete sur chaque ligne d'un titre long (sinon seule la premiere ligne est claire) */
[data-forme="synth"][data-theme="dark"] .titre { background-size: 100% 1.12em; background-repeat: repeat-y; }
[data-forme="synth"][data-theme="dark"] .objectif .nom { background-size: 100% 1.25em; background-repeat: repeat-y; }
[data-forme="synth"] .panneau, [data-forme="synth"] .carte { position: relative; border-color: transparent; border-radius: 16px; }
[data-forme="synth"] .panneau::before, [data-forme="synth"] .carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2), #ff9a3c, var(--accent)); background-size: 300% 300%; animation: flux 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes flux { to { background-position: 300% 0; } }
[data-forme="synth"] .btn:not(.second):not(.danger) { background: linear-gradient(90deg, var(--accent), #ff9a3c); border: 0; border-radius: 14px; }
[data-forme="synth"] .cell { border-radius: 11px; }
[data-forme="synth"] .cell.levier::after, [data-forme="synth"] .cell.action::after { height: 4px; background: linear-gradient(90deg, var(--c, var(--accent)), color-mix(in srgb, var(--c, var(--accent)) 40%, #ff9a3c)); }
[data-forme="synth"] .xp-barre i, [data-forme="synth"] .barre > i { background: linear-gradient(90deg, #ffe259, #ff9a3c, var(--accent), var(--accent-2)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-forme="synth"] .nav nav { border-radius: 22px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent), 0 10px 34px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-forme="synth"] .cell.coche-anim { animation: synth-coche .6s var(--ressort-fort) both; }
@keyframes synth-coche { 0% { transform: scale(.94); box-shadow: 0 0 0 0 var(--c, var(--accent)); } 60% { transform: scale(1.04); } 100% { transform: scale(1); box-shadow: 0 0 0 16px transparent; } }

/* ===================================== forme STICKER (cartoon) ===================================== */
[data-forme="sticker"] .titre, [data-forme="sticker"] .objectif .nom, [data-forme="sticker"] .etape-titre { letter-spacing: .01em; }
[data-forme="sticker"][data-theme="light"] .titre { text-shadow: 3px 3px 0 var(--accent); }
[data-forme="sticker"][data-theme="dark"] .titre { text-shadow: 3px 3px 0 var(--accent-2); }
[data-forme="sticker"] .panneau, [data-forme="sticker"] .carte { border-radius: 24px; }
[data-forme="sticker"] .btn { border-radius: 18px; transition: transform 140ms var(--ressort), box-shadow 140ms; }
[data-forme="sticker"] .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--encre); }
[data-forme="sticker"] .cell { border: 3px solid var(--encre); border-radius: 18px; box-shadow: 0 4px 0 var(--encre); background: color-mix(in srgb, var(--c, var(--accent)) 20%, var(--surface-plein)); }
[data-forme="sticker"] .cell.vide { background: color-mix(in srgb, var(--surface-plein) 70%, transparent); border-style: dashed; box-shadow: none; }
[data-forme="sticker"] .cell:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
[data-forme="sticker"] .cell.levier::after, [data-forme="sticker"] .cell.action::after { height: 7px; border-bottom: 3px solid var(--encre); }
[data-forme="sticker"] .cell.centre { box-shadow: 0 5px 0 var(--encre); }
[data-forme="sticker"] .nav a[aria-current="page"] { border: 2.5px solid var(--encre); color: var(--encre); }
[data-forme="sticker"] .xp-barre, [data-forme="sticker"] .barre { border: 2.5px solid var(--encre); height: 14px; }
[data-forme="sticker"] .badge-niveau { border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); color: var(--encre); }
[data-forme="sticker"] .coche-rapide, [data-forme="sticker"] .case { border: 2.5px solid var(--encre); }
[data-forme="sticker"] .cell.coche-anim, [data-forme="sticker"] .rangee.coche-anim { animation: boing .6s both; }
@keyframes boing { 0% { transform: scale(1); } 25% { transform: scale(1.14, .84); } 50% { transform: scale(.9, 1.12); } 72% { transform: scale(1.05, .96); } 100% { transform: scale(1); } }
html[data-forme="sticker"]::view-transition-new(root) { animation: sticker-entre .5s var(--ressort-fort) both; }
@keyframes sticker-entre { from { transform: scale(.9) translateY(18px); opacity: 0; } }
.eclat-flash { width: 70px; height: 70px; border-radius: 50%; }

/* ================================== v5 : animations des 9 themes de themes-2.js ================================== */
.aurore { position: absolute; border-radius: 50%; animation: aurore var(--dur, 22s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes aurore { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, -8%) scale(1.15); } 100% { transform: translate(-10%, 10%) scale(.92); } }
.piece-tourne { animation: piece-tourne 1.1s steps(6) infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
@keyframes piece-tourne { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.1); } }
.bloc-saut { animation: bloc-saut 2.4s infinite; }
@keyframes bloc-saut { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-14%); } 92% { transform: translateY(0); } }
.heros { animation: heros .7s steps(2) infinite; }
@keyframes heros { 50% { transform: translateY(-5%); } }
.orbite { transform-origin: 50% 50%; animation: tourne 60s linear infinite; }
.orbite-2 { animation-duration: 90s; animation-direction: reverse; }
.vague-defile { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: vague 34s linear infinite; }
.vague-defile > svg { width: 100%; height: 100%; }
@keyframes vague { to { transform: translateX(-50%); } }
.coulure { transform-origin: 50% 0; animation: coulure 11s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes coulure { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1); opacity: 1; } 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.eclabousse { animation: eclabousse 7s infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
@keyframes eclabousse { 0%, 100% { transform: scale(0); opacity: 0; } 4% { transform: scale(1.25); opacity: 1; } 8% { transform: scale(1); } 70% { transform: scale(1); opacity: 1; } 80% { transform: scale(1); opacity: 0; } }
.flotte { animation: flotte var(--dur, 8s) ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9%) rotate(8deg); } }
.flotte-lent { animation-name: flotte-lent; }
@keyframes flotte-lent { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-6%, -8%) rotate(8deg); } }
.couche-impulsions .impulsions path { stroke-dasharray: 6 94; animation: impulsion 3.2s linear infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 3px currentColor); }
@keyframes impulsion { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 18%; pointer-events: none; background: linear-gradient(transparent, color-mix(in srgb, var(--c) 18%, transparent) 85%, color-mix(in srgb, var(--c) 55%, transparent) 99%, transparent); animation: balayage 6s linear infinite; }
@keyframes balayage { from { transform: translateY(-100%); } to { transform: translateY(560%); } }
.monte { animation: envol var(--dur, 36s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes envol { 0% { transform: translate(0, 120%); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(14%, -200%); } 92% { opacity: 1; } 100% { transform: translate(-6%, -520%); opacity: 0; } }
.papillon { animation: papillon 12s ease-in-out infinite; animation-delay: var(--d, 0s); }
.papillon .ailes { transform-box: fill-box; transform-origin: 50% 50%; animation: battre .28s ease-in-out infinite alternate; }
@keyframes battre { to { transform: scaleX(.35); } }
@keyframes papillon { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40%, -60%); } 50% { transform: translate(-30%, -110%); } 75% { transform: translate(-60%, -40%); } }
.eclat-forme { display: block; }

/* ===================================== forme VERRE (epure) ===================================== */
[data-forme="verre"] .panneau, [data-forme="verre"] .carte { -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border-radius: 28px; position: relative; border-color: transparent; }
[data-forme="verre"] .panneau::before, [data-forme="verre"] .carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--accent) 60%, #fff), rgba(255, 255, 255, .25), color-mix(in srgb, var(--accent-2) 60%, #fff), rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-forme="verre"] .btn:not(.second):not(.danger) { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-radius: 99px; }
[data-forme="verre"] .btn.second { border-radius: 99px; }
[data-forme="verre"] .cell { border-radius: 20px; }
[data-forme="verre"] .xp-barre i, [data-forme="verre"] .barre > i { background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); }
[data-forme="verre"] .cell.coche-anim { animation: verre-coche .7s var(--ressort-fort) both; }
@keyframes verre-coche { 0% { transform: scale(.9); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }

/* ===================================== forme PIXEL (jeu video, esprit NES.css) ===================================== */
[data-forme="pixel"] .panneau, [data-forme="pixel"] .carte { border-radius: 0; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .12), 6px 6px 0 rgba(0, 0, 0, .3); }
[data-forme="pixel"] .btn, [data-forme="pixel"] .icone-btn, [data-forme="pixel"] .seg, [data-forme="pixel"] .seg button, [data-forme="pixel"] .champ input, [data-forme="pixel"] .champ textarea, [data-forme="pixel"] .feuille, [data-forme="pixel"] .nav nav, [data-forme="pixel"] .nav a, [data-forme="pixel"] .badge-niveau, [data-forme="pixel"] .pastille, [data-forme="pixel"] .toast { border-radius: 0; }
[data-forme="pixel"] .btn:active { transform: translate(2px, 2px); }
[data-forme="pixel"] .cell { border-radius: 0; border: 3px solid var(--encre); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .2); }
[data-forme="pixel"] .cell.levier::after, [data-forme="pixel"] .cell.action::after { height: 6px; }
[data-forme="pixel"] .xp-barre, [data-forme="pixel"] .barre { border-radius: 0; border: 3px solid var(--encre); height: 16px; }
[data-forme="pixel"] .xp-barre i, [data-forme="pixel"] .barre > i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 70%, #fff) 8px 10px); transition: transform .9s steps(10); }
[data-forme="pixel"] .titre { text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 45%, transparent); }
[data-forme="pixel"] .cell.coche-anim, [data-forme="pixel"] .rangee.coche-anim { animation: pixel-coche .5s steps(4) both; }
@keyframes pixel-coche { 0% { transform: translateY(0); } 40% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
html[data-forme="pixel"]::view-transition-new(root) { animation: pixel-entre .4s steps(6) both; }
@keyframes pixel-entre { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }

/* ===================================== forme ENCRE (japonisme) ===================================== */
[data-forme="encre"] .panneau, [data-forme="encre"] .carte { border-radius: 14px; border-top: 3px solid var(--accent); }
[data-forme="encre"] .btn:not(.second):not(.danger) { border-radius: 10px; letter-spacing: .04em; }
[data-forme="encre"] .cell { border-radius: 12px; }
[data-forme="encre"] .badge-niveau { border-radius: 8px; background: var(--accent); transform: rotate(-4deg); }
[data-forme="encre"] .titre::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 10px; background: var(--accent); border-radius: 2px; }
[data-forme="encre"] .cell.coche-anim { animation: encre-coche .8s ease-out both; }
@keyframes encre-coche { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--accent)) 50%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

/* ===================================== forme GRAFF (graffiti) ===================================== */
[data-forme="graff"] .panneau, [data-forme="graff"] .carte { border-radius: 10px; }
[data-forme="graff"] .panneau:nth-child(odd), [data-forme="graff"] .carte:nth-child(odd) { transform: rotate(-.35deg); }
[data-forme="graff"] .panneau:nth-child(even), [data-forme="graff"] .carte:nth-child(even) { transform: rotate(.3deg); }
[data-forme="graff"] .titre { text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 var(--accent-2); }
[data-forme="graff"] .btn { border-radius: 10px; }
[data-forme="graff"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
[data-forme="graff"] .cell { border: 3px solid var(--encre); border-radius: 10px; box-shadow: 4px 4px 0 var(--c, var(--accent)); }
[data-forme="graff"] .cell.coche-anim, [data-forme="graff"] .rangee.coche-anim { animation: graff-coche .55s both; }
@keyframes graff-coche { 0% { transform: rotate(0); } 30% { transform: rotate(-4deg) scale(1.06); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }

/* ===================================== forme MEMPHIS (cool) ===================================== */
[data-forme="memphis"] .panneau, [data-forme="memphis"] .carte { border-radius: 20px; }
[data-forme="memphis"] .btn { border-radius: 99px; }
[data-forme="memphis"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
[data-forme="memphis"] .cell { border: 2.5px solid var(--encre); border-radius: 16px; box-shadow: 3px 3px 0 var(--c, var(--accent)); }
[data-forme="memphis"] .titre { text-shadow: 3px 3px 0 var(--accent-2); }
[data-forme="memphis"] .cell.coche-anim, [data-forme="memphis"] .rangee.coche-anim { animation: boing .6s both; }

/* ===================================== forme HOLO (tech, espace) ===================================== */
[data-forme="holo"] .panneau, [data-forme="holo"] .carte { border-radius: 10px;
  background: linear-gradient(var(--accent), var(--accent)) top left / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) top left / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) top right / 2px 12px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 5%, transparent) 3px 4px), var(--surface); }
[data-forme="holo"] .titre { letter-spacing: .01em; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-forme="holo"] .btn:not(.second):not(.danger) { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 8px; letter-spacing: .03em; }
[data-forme="holo"] .cell { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); }
[data-forme="holo"] .xp-barre i, [data-forme="holo"] .barre > i { box-shadow: 0 0 10px var(--accent); }
[data-forme="holo"] .cell.coche-anim { animation: holo-coche .5s both; }
@keyframes holo-coche { 0% { box-shadow: inset 0 0 0 2px var(--c, var(--accent)), 0 0 0 0 var(--c, var(--accent)); } 100% { box-shadow: inset 0 0 0 0 transparent, 0 0 22px 2px transparent; } }

/* ===================================== forme BULLE (feel good) ===================================== */
[data-forme="bulle"] .panneau, [data-forme="bulle"] .carte { border-radius: 32px; }
[data-forme="bulle"] .btn { border-radius: 99px; }
[data-forme="bulle"] .btn:not(.second):not(.danger) { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
[data-forme="bulle"] .cell { border-radius: 26px; }
[data-forme="bulle"] .xp-barre i, [data-forme="bulle"] .barre > i { background: linear-gradient(90deg, #ff8a8a, #ffb86b, #ffe27a, #9be59b, #8ecbff, #c4a7ff); }
[data-forme="bulle"] .cell.coche-anim, [data-forme="bulle"] .rangee.coche-anim { animation: boing .7s both; }
html[data-forme="bulle"]::view-transition-new(root) { animation: sticker-entre .55s var(--ressort-fort) both; }

/* Baloo 2 (Feel good) a de grandes jambes : plus d interligne pour ne pas toucher la ligne suivante */
[data-forme="bulle"] .titre { line-height: 1.28; }
[data-forme="bulle"] .sous-titre, [data-forme="bulle"] .objectif .nom, [data-forme="bulle"] .etape-titre { line-height: 1.35; }

/* =================== v6 : jus et micro-interactions (game feel, vanilla-tilt, Hover.css, canvas-confetti) =================== */
.confettis-physiques { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 75; pointer-events: none; }
#app { will-change: auto; }

/* inclinaison 3D + reflet qui suit le doigt ou la souris */
.carte.objectif, .cell.levier, .vignette { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s var(--ressort-fort); }
.carte.objectif.incline, .cell.levier.incline, .vignette.incline { transition: transform .08s linear; }
.cell.levier:active, .carte.objectif:active, .cell.levier.incline:active, .carte.objectif.incline:active { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.97); }
.carte.objectif::after, .vignette::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 55%); mix-blend-mode: soft-light; }
.carte.objectif { position: relative; }
.carte.objectif.incline::after, .vignette.incline::after { opacity: 1; }
.cell.levier.incline { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c, var(--accent)) 70%, transparent); }

/* la coche se dessine, l'etoile bondit */
.coche-rapide[aria-pressed="true"] svg path, .case[aria-pressed="true"] svg path { stroke-dasharray: 24; animation: trace .38s cubic-bezier(.3, .8, .3, 1) both .05s; }
@keyframes trace { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.coche-rapide[aria-pressed="true"], .case[aria-pressed="true"] { animation: coche-bond .45s var(--ressort-fort); }
@keyframes coche-bond { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.etoile-rapide.pop, .etoile-ligne.pop { animation: etoile-pop .55s var(--ressort-fort); }
@keyframes etoile-pop { 0% { transform: scale(.4) rotate(-40deg); } 60% { transform: scale(1.35) rotate(18deg); } 100% { transform: scale(1) rotate(0); } }

/* l'icone de l'onglet actif sautille quand on change d'onglet */
.nav a[aria-current="page"] .ico { animation: onglet .6s var(--ressort-fort); }
@keyframes onglet { 0% { transform: translateY(6px) scale(.7); } 100% { transform: none; } }

/* apparition au defilement (animations liees au defilement, Chrome Android) */
@supports (animation-timeline: view()) {
  .vue > *:nth-child(n+4), .liste-objectifs > *, .rangees > .rangee {
    animation: reveler linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes reveler { from { opacity: 0; transform: translateY(26px) scale(.97); } }   /* sans "to" : rend l'etat d'origine (cartes inclinees du Graffiti) */
}

/* survol (seulement les appareils a souris) : vocabulaire Hover.css reecrit */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.07); }
  .btn:not(:disabled):hover .ico { animation: buzz .35s linear; }
  @keyframes buzz { 25% { transform: translateX(2px) rotate(4deg); } 50% { transform: translateX(-2px) rotate(-4deg); } 75% { transform: translateX(1px) rotate(2deg); } }
  .icone-btn:hover .ico { animation: tourne-un .5s var(--ressort-fort); }
  @keyframes tourne-un { from { transform: rotate(-90deg) scale(.8); } }
  .rappel-ligne > :last-child { transition: transform .25s var(--ressort); }
  .rappel-ligne:hover > :last-child { transform: translateX(5px); }
  .cell.action:hover, .cell.vide:hover { transform: translateY(-3px); }
  .rangee:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .nav a:not([aria-current="page"]):hover .ico { animation: onglet .5s var(--ressort-fort); }
  .pastille { transition: transform .2s var(--ressort); }
  .pastille:hover { transform: scale(1.06); }
}

/* ================================================================================================================
   v7 : STYLE "INFOGRAPHIE SPATIALE" (vecteur plat facon Kurzgesagt, personnages originaux). Pas de contour : des aplats,
   un bord eclaire en haut, un rebord colore en bas, des halos. S'applique a TOUS les themes (prefixe :root = passe
   apres les formes). Avatar, mascotte Pip, bulles de dialogue, glisser entre onglets.
   ================================================================================================================ */
#app .vue { touch-action: pan-y; }

/* --- plus aucun contour d'encre : aplats, bord eclaire, ombre coloree */
:root .panneau, :root .carte { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .05), 0 18px 38px -20px color-mix(in srgb, var(--accent) 65%, #000 25%); }
:root .btn { border: 0; }
:root .btn:not(.second):not(.danger) { box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--accent) 55%, #000 35%), inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -12px var(--accent); }
:root .btn:not(.second):not(.danger):active { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 55%, #000 35%), 0 4px 10px -6px var(--accent); transform: translateY(3px); }
:is([data-forme="doux"], [data-forme="sticker"], [data-forme="memphis"], [data-forme="graff"], [data-forme="pixel"], [data-forme="encre"]) .btn:not(.second):not(.danger) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 60%); }
:root .btn.second, :root .btn.danger { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root .icone-btn { border: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root .xp-barre, :root .barre { border: 0; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18); }
:root .badge-niveau { border: 0; }
:root .coche-rapide, :root .case { border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent); }
:root .coche-rapide[aria-pressed="true"], :root .case[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-fg) 25%, transparent); }

/* --- cases : aplat teinte de la couleur du levier, rebord colore, bord eclaire */
:root .cell:not(.vide):not(.centre) { border: 0; background: linear-gradient(165deg, color-mix(in srgb, var(--c, var(--accent)) 26%, var(--surface-plein)), color-mix(in srgb, var(--c, var(--accent)) 11%, var(--surface-plein)));
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--c, var(--accent)) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root .cell.fait:not(.centre) { background: linear-gradient(165deg, color-mix(in srgb, var(--ok-fg) 26%, var(--surface-plein)), var(--ok-bg)); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--ok-fg) 45%, transparent); }
:root .cell.levier::after, :root .cell.action::after { display: none; }
:root .cell.vide { border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; }
:root .cell.trophee { box-shadow: inset 0 -5px 0 var(--or), inset 0 0 0 2px color-mix(in srgb, var(--or) 70%, transparent); }
/* la case centrale devient un astre eclaire (lumiere en haut a gauche, ombre propre) */
:root .cell.centre { border: 0; background: radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--c, var(--accent)) 50%, #fff) 0, var(--c, var(--accent)) 46%, color-mix(in srgb, var(--c, var(--accent-2)) 62%, #000 38%) 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), 0 14px 32px -10px color-mix(in srgb, var(--c, var(--accent)) 80%, transparent); }
:root .cell.centre.atteint { background: radial-gradient(circle at 30% 24%, #fff4c2 0, #f7c948 46%, #c47a00 100%); }

/* --- barre de navigation : pilules d'icones pleines, l'onglet actif est une bulle qui brille */
.nav a { gap: 1px; padding-top: 5px; }
.nav-pastille { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 99px; transition: transform .35s var(--ressort-fort), background .25s, box-shadow .25s; }
.nav a .ico-plate { width: 22px; height: 22px; }
.nav-nom { line-height: 1.1; }
:root .nav a[aria-current="page"] { background: transparent; color: var(--ink-strong); }
:root .nav a[aria-current="page"] .nav-pastille { background: var(--accent); color: var(--on-accent); transform: translateY(-2px) scale(1.06); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 55%, #000 35%), 0 6px 16px -4px var(--accent); }
.nav a:not([aria-current="page"]) .nav-pastille { color: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.serie .ico-plate { width: 16px; height: 16px; color: #ff7a2b; }

/* --- bulles de dialogue (Pip, compagnon) : aplat, coin arrondi, petite pointe */
.bulle { position: relative; background: var(--surface-plein); border-radius: 18px; padding: 11px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -14px rgba(0, 0, 0, .45); min-width: 0; }
.bulle::before { content: ""; position: absolute; left: -7px; top: 18px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.pip-dit { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }
.pip-boite { display: block; width: 62px; height: 56px; }
.pip-boite svg, .pip svg { width: 100%; height: 100%; overflow: visible; }
.etape .bulle { background: color-mix(in srgb, var(--accent) 9%, var(--surface-plein)); }
.etape .bulle .etape-titre { margin-bottom: 4px; }

/* --- avatar : bouton du niveau, apercu, editeur */
.avatar-bouton { position: relative; width: 60px; height: 60px; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; transition: transform .3s var(--ressort-fort); }
.avatar-bouton:active { transform: scale(.92); }
.avatar-boite, .avatar-apercu, .compagnon-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 20px -8px var(--accent); --av-fond: color-mix(in srgb, var(--accent) 35%, #1e1b4b); }
.avatar-boite svg, .avatar-apercu svg, .compagnon-avatar svg, .avatar-grand svg { width: 100%; height: 100%; display: block; }
.avatar-bouton .badge-niveau { position: absolute; right: -5px; bottom: -4px; width: 25px; height: 25px; border-radius: 9px; font-size: 13px; box-shadow: 0 0 0 3px var(--surface-plein); }
.avatar-ligne { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.avatar-apercu { width: 84px; height: 84px; }
.avatar-grand { width: 168px; height: 168px; margin: 0 auto; border-radius: 50%; overflow: hidden; --av-fond: color-mix(in srgb, var(--accent) 35%, #1e1b4b); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 20px 40px -14px var(--accent); }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.teinte { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: var(--t); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .25s var(--ressort-fort); }
.teinte[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface-plein), 0 0 0 6px var(--accent); transform: scale(1.08); }
.puce:disabled { opacity: .45; cursor: not-allowed; }

@keyframes zz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -12px); } }


/* compagnon : l'avatar passe dire un mot apres une reussite, puis repart */
.compagnon { position: fixed; left: 12px; bottom: calc(158px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); pointer-events: none; animation: compagnon-entre .55s var(--ressort-fort) both; }
.compagnon.part { animation: compagnon-part .42s ease-in both; }
.compagnon-avatar { width: 62px; height: 62px; flex: none; }
.bulle-compagnon { font-weight: 800; color: var(--ink-strong); padding: 10px 14px; white-space: nowrap; }
.bulle-compagnon::before { left: -6px; top: calc(50% - 7px); }
@keyframes compagnon-entre { from { transform: translateX(-120%) rotate(-12deg); opacity: 0; } }
@keyframes compagnon-part { to { transform: translateX(-120%) rotate(-10deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .compagnon { animation: none; } }

/* v7 : derniers contours d'encre retires (Cartoon, Graffiti, Cool, Jeu) ; le relief vient des aplats et des rebords */
:root .seg, :root .nav nav, :root .nav a, :root:root .nav a[aria-current="page"], :root .feuille, :root .champ input, :root .champ textarea { border: 0; }
:root .seg { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12); }
:root .nav nav { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px -14px color-mix(in srgb, var(--accent) 70%, #000 30%); }
:root .champ input, :root .champ textarea { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); }
:root .etape { border: 0; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 38px -20px var(--accent); }
:root .cell.vide:active, :root .cell:not(.vide):active { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c, var(--accent)) 50%, transparent); }
/* le compagnon passe au-dessus du toast (qui peut tenir sur 2 lignes), jamais dessus */
.compagnon { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }

/* ================================================================================================================
   v7.1 FLUIDITE (mesure : tests/banc_fluidite.py, processeur bride x4). Au repos, l'accueil occupait le navigateur
   40 a 50 % du temps : flou d'arriere-plan recalcule sur un decor qui bouge, animations infinies DANS les SVG (le dessin
   entier est repeint a chaque image). Regle : au repos, on n'anime que des elements entiers (transform, opacity) ;
   le detail dans un SVG ne bouge que pendant une reaction courte ou un clignement bref (app.js, clignements()).
   ================================================================================================================ */
:root :is(.panneau, .carte, .feuille, .fete-carte, .nav nav) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes cligne-vite { 50% { transform: scaleY(.1); } }



/* decor : Pepin saute en entier, les yeux des decors clignent par coups brefs */
.morceau .yeux, .pepin .pepin-corps { animation: none; }
.anime.pepin { animation: saute 2.8s infinite; transform-origin: 50% 100%; }
#fond.cligne .morceau .yeux { animation: cligne-vite .28s ease-in-out; }

/* textes des cases : JAMAIS coupes. Une case est au moins carree et grandit avec son texte (la rangee prend la hauteur
   de la plus haute) ; les 2 premieres lignes contournent l'etoile ; ajusterTextes() reduit la police au-dela de 5 lignes */
.mandala .cell { aspect-ratio: auto; min-height: calc((100cqi - 16px) / 3); }
.cell .txt, .cell.action .txt, .cell.centre .txt { display: block; -webkit-line-clamp: none; padding-right: 0; flex: 0 1 auto; overflow: visible; }
/* case d'action : le bouton (tout le texte) revient dans le flux pour pouvoir allonger la case ; la marge basse reste
   reservee a la date et au rond de coche, qui restent poses en bas */
.mandala .cell.action { padding: 0; }
.mandala .cell-ouvrir { position: relative; inset: auto; flex: 1 1 auto; width: 100%; }
.cell-ouvrir .txt { max-height: none; }
/* pas de mot coupe en plein milieu : ajusterTextes() reduit la police jusqu'a ce que le mot tienne ; en dernier recours
   seulement (classe .coupe), coupure avec tiret */
.cell .txt { min-width: 0; overflow-wrap: normal; word-break: normal; }
.cell .txt.coupe { overflow-wrap: anywhere; hyphens: auto; }
/* reserve de l'etoile en pixels (elle ne retrecit pas avec la police) : bouton de 36 px a 3 px du bord, texte a 11 px */
.cell.action .txt::before { content: ""; float: right; width: 30px; height: 29px; }
.mandala .cell-ouvrir { padding-bottom: 44px; }
@container (min-width: 440px) { .mandala .cell-ouvrir { padding-bottom: 48px; } }
.cell.action .pied { white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .avatar, .avatar *, .pip, .pip *, .anime { animation: none !important; } }
/* boite d'animation des morceaux de decor (themes.js, morceau()) ; les rayons du soleil tournent en entier */
.morceau > .anime { width: 100%; height: 100%; }
.tourne-lent { animation: tourne 28s linear infinite; transform-origin: 50% 50%; }

/* ================================================================================================================
   v8 AVATAR (dessins GPia, lots B et B2) : boites HTML empilees (web/avatar.js). Seules les boites bougent, en
   transform : composees par la carte graphique. Pivots donnes par GPia : tete (60,72), corps (60,99), yeux y = 54.
   ================================================================================================================ */
.avatar { position: relative; display: block; width: 100%; height: 100%; container-type: size;
  --av-fond: color-mix(in srgb, var(--accent) 16%, #eef3f7); --av-fond-halo: color-mix(in srgb, var(--accent) 28%, #d3dfe9); }
.nv-c { position: absolute; inset: 0; display: block; }
.nv-c svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nv-tete { transform-origin: 50% 60%; }
.nv-corps { transform-origin: 50% 82.5%; }
.nv-yeux { transform-origin: 50% 45%; }
/* calme : respire (tete et corps), clignement bref par app.js (classe .cligne toutes les 4 a 7 s) */
.av-calme .nv-tete { animation: nv-respire 4.2s ease-in-out infinite; }
.av-calme .nv-corps { animation: nv-respire-corps 4.2s ease-in-out infinite; }
@keyframes nv-respire { 50% { transform: translateY(-1.2%) rotate(-1.2deg); } }
@keyframes nv-respire-corps { 50% { transform: scaleY(1.02); } }
.avatar.cligne .nv-yeux { animation: cligne-vite .28s ease-in-out; }
/* reactions courtes (2,6 s) */
.av-joie .nv-tete { animation: nv-saut .75s var(--ressort-fort) 2; }
.av-joie .nv-corps { animation: nv-saut-corps .75s var(--ressort-fort) 2; }
@keyframes nv-saut { 40% { transform: translateY(-7%) rotate(4deg); } }
@keyframes nv-saut-corps { 40% { transform: translateY(-3%) scaleY(1.04); } }
.av-fete .nv-tete { animation: nv-fete .42s ease-in-out infinite alternate; }
.av-fete .nv-corps { animation: nv-fete-corps .42s ease-in-out infinite alternate; }
@keyframes nv-fete { from { transform: rotate(-6deg) translateY(-2%); } to { transform: rotate(6deg) translateY(-5%); } }
@keyframes nv-fete-corps { from { transform: rotate(-2deg); } to { transform: rotate(2deg) translateY(-2%); } }
/* poses : dort (tete penchee, z qui montent), encourage (hochement de tete) */
.av-dort .nv-tete { transform: rotate(-7deg) translateY(2%); }
.av-dort .nv-corps { animation: nv-respire-corps 5s ease-in-out infinite; }
.av-encourage .nv-tete { animation: nv-hoche 2.4s ease-in-out infinite; }
@keyframes nv-hoche { 0%, 60%, 100% { transform: none; } 72% { transform: rotate(5deg) translateY(1%); } 84% { transform: rotate(-2deg); } }
.nv-zz { position: absolute; right: 8%; top: 4%; font: 800 16cqw/1 Nunito, sans-serif; color: #c7d2fe; pointer-events: none; }
.nv-zz i { display: inline-block; font-style: normal; animation: zz 3s ease-in-out infinite; }
.nv-zz i + i { font-size: .75em; animation-delay: 1s; }

/* v8 PIP (lot C) : boites HTML (web/avatar.js, pip()) ; seules les boites bougent */
.pip { position: relative; display: block; width: 100%; height: 100%; container-type: size;
  --pip-halo-loin: color-mix(in srgb, var(--accent) 12%, transparent); --pip-halo-pres: color-mix(in srgb, var(--accent) 20%, transparent); }
.pp-c { position: absolute; inset: 0; display: block; }
.pp-c svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pp-ens { transform-origin: 52% 49%; animation: pp-flotte 3.2s ease-in-out infinite; }
@keyframes pp-flotte { 50% { transform: translateY(-5%) rotate(-3deg); } }
.pp-queue { transform-origin: 40% 60%; animation: pp-queue 1.4s ease-in-out infinite alternate; }
@keyframes pp-queue { from { transform: scaleX(.88) rotate(2deg); opacity: .85; } to { transform: scaleX(1.06) rotate(-2deg); opacity: 1; } }
.pp-antenne { transform-origin: 70% 14%; animation: pp-scintille 2.2s ease-in-out infinite; }
@keyframes pp-scintille { 50% { transform: scale(1.18) rotate(12deg); } }
.pp-yeux { transform-origin: 52% 45%; }
.pip.cligne .pp-yeux { animation: cligne-vite .28s ease-in-out; }
.pip-joie .pp-ens { animation: pp-saut .7s var(--ressort-fort) 3; }
@keyframes pp-saut { 40% { transform: translateY(-12%) rotate(-6deg); } }
.pip-fete .pp-ens { animation: pp-fete .45s ease-in-out infinite alternate; }
@keyframes pp-fete { from { transform: rotate(-8deg) translateY(-3%); } to { transform: rotate(8deg) translateY(-7%); } }
.pp-etincelles { animation: pp-scintille 1s ease-in-out infinite; transform-origin: 50% 50%; }
.pip-dort .pp-ens { animation-duration: 6s; }
.pip-dort .pp-queue { animation-duration: 3s; }
.pip-montre .pp-ens { animation: pp-montre 2.6s ease-in-out infinite; }
@keyframes pp-montre { 0%, 100% { transform: none; } 50% { transform: translate(3%, -3%) rotate(4deg); } }

/* v8 Vaporwave : lignes du sol qui viennent vers nous (l'ancien plan 3D .sol-retro etait projete hors de sa zone) */
.vapor-sol { position: absolute; overflow: hidden; container-type: size; pointer-events: none; }
.vapor-sol i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grille); transform-origin: 50% 0; opacity: 0;
  animation: vapor-ligne 2.4s cubic-bezier(.55, 0, 1, .6) infinite; animation-delay: var(--d, 0s); }
@keyframes vapor-ligne { from { transform: translateY(0) scaleY(.5); opacity: .15; } to { transform: translateY(100cqh) scaleY(3); opacity: 1; } }
/* v8 Japonisme : les vagues glissent doucement (boite entiere, transform) */
.vague-glisse { animation: vague-glisse 9s ease-in-out infinite alternate; }
@keyframes vague-glisse { to { transform: translateX(-5%); } }

/* v8 lot E : icones plates en trois tons OPAQUES derives de la couleur courante (guide GPia : pas de transparence,
   pas de contour) ; o = face d'ombre en bas a droite, l = lisere clair cote lumiere */
.ico-plate .o { fill: color-mix(in srgb, currentColor 64%, #1b1640); }
.ico-plate .l { fill: color-mix(in srgb, currentColor 38%, #ffffff); }

/* v8 lot F : pieces qui tournent, chevalier qui pietine, aile du dragon, souffle, radar et scanner (transform/opacity) */
.piece-pixel { animation: piece-pixel 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
@keyframes piece-pixel { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
.pas { animation: pas .9s steps(2) infinite; }
@keyframes pas { 50% { transform: translateY(-4%); } }
.aile-bat { transform-origin: 30% 100%; animation: aile-bat .5s ease-in-out infinite alternate; }
@keyframes aile-bat { to { transform: scaleY(-.55) translateY(-10%); } }
.souffle { opacity: 0; animation: souffle 3.2s steps(1) infinite; }
@keyframes souffle { 70%, 90% { opacity: 1; } 80% { opacity: .6; } }
.radar { transform-origin: 50% 50%; animation: tourne 3.2s linear infinite; }
.scanner { position: absolute; overflow: hidden; pointer-events: none; container-type: size; }
.scanner i { position: absolute; left: 0; right: 0; top: 0; height: 7%; background: color-mix(in srgb, var(--scan) 14%, transparent); border-top: 2px solid var(--scan); opacity: .85;
  animation: scanner 6s linear infinite; }
@keyframes scanner { 0% { transform: translateY(-10cqh); } 65%, 100% { transform: translateY(110cqh); } }
@media (prefers-reduced-motion: reduce) { .piece-pixel, .pas, .aile-bat, .radar, .scanner i { animation: none; } .souffle { opacity: 0; } }

/* v9 AVATAR : 22 poses (web/avatar.js POSES). Boites : bras droit (pivot epaule 88,92), bras gauche (32,92), bouches de
   parole, coeur. Seules les boites bougent (transform, opacity). */
.nv-bras-d { transform-origin: 73.3% 76.7%; }
.nv-bras-g { transform-origin: 26.7% 76.7%; }
.nv-coeur { transform-origin: 50% 74%; animation: nv-pulse 1s ease-in-out infinite; }
@keyframes nv-pulse { 50% { transform: scale(1.14); } }
.av-salut .nv-bras-d { animation: nv-coucou .38s ease-in-out infinite alternate; }
@keyframes nv-coucou { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
.av-joie .nv-bras-d, .av-super .nv-bras-d, .av-super .nv-bras-g { animation: nv-pouce .6s var(--ressort-fort) 3; }
@keyframes nv-pouce { 45% { transform: translateY(-6%) rotate(-4deg); } }
.av-fete .nv-bras-d, .av-fete .nv-bras-g { animation: nv-agite .32s ease-in-out infinite alternate; }
.av-fete .nv-bras-g { animation-direction: alternate-reverse; }
@keyframes nv-agite { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.av-applaudit .nv-bras-d { animation: nv-clap-d .24s ease-in-out infinite alternate; }
.av-applaudit .nv-bras-g { animation: nv-clap-g .24s ease-in-out infinite alternate; }
@keyframes nv-clap-d { to { transform: rotate(-9deg); } }
@keyframes nv-clap-g { to { transform: rotate(9deg); } }
.av-montre .nv-bras-d { animation: nv-pousse .9s ease-in-out infinite alternate; }
@keyframes nv-pousse { to { transform: translateX(3%) rotate(-3deg); } }
.av-determine .nv-bras-d, .av-victoire .nv-bras-d { animation: nv-leve .5s ease-in-out infinite alternate; }
@keyframes nv-leve { to { transform: translateY(-5%) rotate(4deg); } }
.av-hausse .nv-corps, .av-hausse .nv-bras-d, .av-hausse .nv-bras-g { animation: nv-hausse 1.4s ease-in-out infinite; }
@keyframes nv-hausse { 30%, 60% { transform: translateY(-3%); } }
.av-reflechit .nv-tete { transform: rotate(5deg) translateY(1%); }
.av-surpris .nv-tete { animation: nv-sursaut .5s var(--ressort-fort) 1 both; }
@keyframes nv-sursaut { 40% { transform: translateY(-6%) scale(1.04); } }
.av-triste .nv-tete { transform: rotate(-4deg) translateY(2.5%); }
.av-triste .nv-corps { transform: scaleY(.97); }
.av-fier .nv-corps { animation: nv-respire-corps 3s ease-in-out infinite; }
.av-fier .nv-tete { transform: translateY(-1.5%) rotate(-2deg); }
.av-baille .nv-tete { animation: nv-baille 2.6s ease-in-out infinite; }
@keyframes nv-baille { 40%, 70% { transform: rotate(-5deg) translateY(-1%); } }
.av-amour .nv-tete, .av-emu .nv-tete { animation: nv-balance-tete 1.8s ease-in-out infinite alternate; }
@keyframes nv-balance-tete { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.av-bisou .nv-tete { transform: rotate(6deg); }
.av-concentre .nv-tete { animation: nv-respire 5s ease-in-out infinite; }
.av-victoire .nv-tete { animation: nv-fete .42s ease-in-out infinite alternate; }
/* parle : trois bouches qui se relaient */
.av-parle .nv-tete { animation: nv-hoche 2.4s ease-in-out infinite; }
.nv-bouche-a, .nv-bouche-e, .nv-bouche-o { opacity: 0; animation: nv-parle .9s steps(1) infinite; }
.nv-bouche-e { animation-delay: .3s; }
.nv-bouche-o { animation-delay: .6s; }
@keyframes nv-parle { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nv-bouche-a { opacity: 1; animation: none; } .nv-bouche-e, .nv-bouche-o { animation: none; } }

button.avatar-grand { display: block; padding: 0; border: 0; background: none; cursor: pointer; }

/* changement de page : les couches du decor rejoignent leur place en douceur (la parallaxe de defilement revient a 0) */
#fond.reinit .prof { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }

/* v10.1 : la page qui s'envole au balayage (translateX 120 %, rotation) elargissait le document (390 -> 980 px) et le
   navigateur mobile dezoomait sans revenir : le fond fixe paraissait sortir de l'ecran (signale par Jordan le 11/10,
   reproduit par tests/banc_balayage.py). Le debordement horizontal est coupe, sans creer de conteneur de defilement. */
html, body, .app { overflow-x: clip; }

/* v11 (lot A) : ecran de connexion, cases d'accord, panneau Mon compte */
.connexion { min-height: calc(100dvh - 40px); display: grid; align-content: center; padding-block: 24px; }
.connexion-carte { background: var(--surface-plein); border-radius: var(--r-l, 24px); box-shadow: var(--ombre-carte, 0 10px 30px rgba(0,0,0,.12)); padding: 24px 20px; gap: 14px; text-align: left; }
.connexion-pip { width: 96px; height: 86px; justify-self: center; margin-bottom: -6px; }
.connexion-titre { font: var(--display-poids, 800) 40px/1 var(--display); color: var(--ink-strong); text-align: center; margin: 0; letter-spacing: .04em; }
.connexion-promesse { text-align: center; color: var(--muted); margin: -6px 0 4px; font-weight: 700; }
.connexion-form { display: grid; gap: 14px; }
.connexion-msg { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 700; color: var(--info-fg); }
.connexion-msg.erreur { color: var(--bad-fg); }
.case-accord { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.case-accord input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.case-accord a, .liens-legaux a { color: var(--accent); font-weight: 700; }
.champ-code { width: 100%; min-height: 60px; background: var(--surface-plein); border: 0; border-radius: var(--r-s); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent); font: 800 30px/1.2 var(--sans); letter-spacing: .5em; text-align: center; padding: 12px 8px 12px calc(8px + .5em); font-variant-numeric: tabular-nums; }
.liens-legaux { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.badge-droits { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12.5px; }
.champ-code:focus { outline: 3px solid var(--accent); outline-offset: 0; }

/* v12 (lot B) : themes verrouilles par niveau, offre Premium, pseudo, panneau createur */
.vignette.verrou .vignette-img { filter: grayscale(.85) brightness(.85); opacity: .55; }
.vignette.verrou { cursor: not-allowed; }
.vignette-verrou { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--ink-strong); color: var(--bg); font: 800 11px/1.3 var(--sans); letter-spacing: .04em; }
.etiquette-premium { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-2, var(--accent)); color: var(--on-accent); font: 800 10.5px/1.5 var(--sans); letter-spacing: .04em; vertical-align: middle; }
.ligne-pseudo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.chiffres-createur { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.chiffre { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); }
.chiffre b { font: 800 22px/1.1 var(--sans); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 12.5px; color: var(--muted); }
.liste-comptes { display: grid; gap: 10px; }
.ligne-compte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2, rgba(0,0,0,.08)); }
.ligne-compte .discret { display: block; font-size: 12.5px; }