/* ============================================================
   neo — l'arbre de déblocages
   Chargé après neo.css, sous html.neo comme lui.
   ============================================================
   L'arbre des vies (game.js, `renderArbre`, `deblMoment`) :
     .db-tete     la plaque qui compte, et le tronc : cinq branches qui
                  montent à mesure qu'elles s'ouvrent ;
     .db-portee   les trois nœuds les plus proches ;
     .db-onglets  une branche à la fois ;
     .db-arbre    la branche : un fil vertical, trois cercles, un nœud par
                  carte. Le point sur le fil est plein quand le nœud est
                  ouvert. Une carte fermée montre une silhouette sur un lieu
                  éteint, le sceau 封 ; ouverte, elle reprend ses couleurs et
                  le sceau rouge 開 ; héritée (avant l'arbre), le sceau 承.
     .db-moment   l'écran plein d'un nœud ouvert en fin de vie.
   Trois plans, une ombre noire, aucun verre, aucun halo, aucun dégradé
   décoratif. prefers-reduced-motion coupe tout.
   ============================================================ */

html.neo {
  --db-sceau: #e2372b;
  --db-sortie: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- l'accès, à l'accueil ---------- */
html.neo #screen-home .meta-row #btn-arbre .mb-k {
  font: 900 20px/1.2 "Noto Serif JP", "Yu Mincho", serif;
  color: var(--n-orange);
  height: 24px;
}
html.neo #screen-home .meta-row #btn-arbre { position: relative; }
html.neo #screen-home .meta-row #btn-arbre.db-a-neuf::after {
  content: "";
  position: absolute; top: 8px; left: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--db-sceau);
  box-shadow: 0 0 0 2px var(--n-s2);
}
/* Huit accès : deux rangées pleines, le Quizz reprend une seule case. */
html.neo #screen-home .meta-row:has(#btn-arbre) #btn-quizz { grid-column: auto !important; }

/* ---------- l'écran ---------- */
/* style.css range les enfants de #meta-content en deux colonnes sur grand
   écran (`#meta-content > *`) : l'arbre prend toute la largeur. */
html.neo #meta-content > .db { grid-column: 1 / -1; }
html.neo .db {
  grid-column: 1 / -1;
  min-width: 0;
  font-family: var(--n-titre);
  color: var(--n-encre);
}
html.neo .db-h {
  margin: 0 2px 10px;
  font: 800 11.5px/1.25 var(--n-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-orange);
}

/* la plaque et le tronc */
html.neo .db-tete {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "total tronc" "regle regle" "herite herite";
  align-items: end;
  gap: 4px 18px;
  margin: -6px 0 18px;
  padding: 16px 16px 14px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: var(--n-r);
  box-shadow: var(--n-ombre);
  animation: db-monte 0.5s var(--db-sortie) both;
}
html.neo .db-total { grid-area: total; }
html.neo .db-total-n { display: flex; align-items: baseline; gap: 6px; margin: 0; line-height: 1; }
html.neo .db-total-n b { font: 900 46px/0.9 var(--n-titre); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
html.neo .db-total-n span { font: 800 18px/1 var(--n-titre); color: var(--n-pale); font-variant-numeric: tabular-nums; }
html.neo .db-total-l {
  margin: 6px 0 0;
  font: 800 11px/1.2 var(--n-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-orange);
}
html.neo .db-tronc {
  grid-area: tronc;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  height: 78px;
  align-items: end;
}
html.neo .db-tronc-b {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%;
  border-radius: 8px 8px 10px 10px;
  background: var(--n-s2);
  box-shadow: inset 0 0 0 1px var(--n-filet);
  overflow: hidden;
}
html.neo .db-tronc-b::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--n-orange);
  transform: scaleY(var(--p, 0));
  transform-origin: 50% 100%;
  animation: db-pousse 1s 0.2s var(--db-sortie) both;
}
html.neo .db-tronc-b i {
  position: relative;
  padding: 0 0 6px;
  font: 900 15px/1 "Noto Serif JP", "Yu Mincho", serif;
  font-style: normal;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
html.neo .db-regle {
  grid-area: regle;
  margin: 12px 0 0;
  font: 600 12.5px/1.45 var(--n-titre);
  color: var(--n-doux);
}
html.neo .db-herite {
  grid-area: herite;
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--n-s2);
  font: 600 12.5px/1.4 var(--n-titre);
  color: var(--n-encre);
}
html.neo .db-herite span {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #3a3f4d;
  font: 900 15px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: #fff;
}

/* le plus proche */
html.neo .db-portee { margin: 0 0 18px; }
html.neo .db-portee ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
html.neo .db-portee li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: 12px;
  box-shadow: var(--n-ombre-choix);
}
html.neo .db-portee-k {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--n-s2);
  font: 900 17px/1 "Noto Serif JP", "Yu Mincho", serif;
}
html.neo .db-portee-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.neo .db-portee-t b { font: 800 14px/1.2 var(--n-titre); }
html.neo .db-portee-t small { font: 600 12px/1.3 var(--n-titre); color: var(--n-doux); }
html.neo .db-portee-c { font: 900 18px/1 var(--n-titre); color: var(--n-orange); font-variant-numeric: tabular-nums; }
html.neo .db-portee-c i { font-style: normal; font-size: 13px; color: var(--n-pale); }

/* les onglets */
html.neo .db-onglets {
  display: flex;
  gap: 8px;
  margin: 0 -16px 16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
html.neo .db-onglets::-webkit-scrollbar { display: none; }
html.neo .db-onglet {
  flex: none;
  display: flex; align-items: center; gap: 9px;
  min-height: 52px;
  padding: 6px 14px 6px 6px;
  font: inherit; color: var(--n-encre); text-align: left;
  background: var(--n-s2);
  border: 1.5px solid var(--n-filet-fort);
  border-radius: 14px;
  box-shadow: var(--n-ombre-choix);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s var(--db-sortie), border-color 0.18s, background-color 0.18s;
}
html.neo .db-onglet:active { transform: scale(0.96); }
html.neo .db-onglet:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 2px; }
html.neo .db-onglet-k {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--n-s3);
  font: 900 19px/1 "Noto Serif JP", "Yu Mincho", serif;
}
html.neo .db-onglet-t { display: flex; flex-direction: column; gap: 2px; }
html.neo .db-onglet-t b { font: 800 14px/1.1 var(--n-titre); white-space: nowrap; }
html.neo .db-onglet-t small { font: 700 12px/1 var(--n-titre); color: var(--n-pale); font-variant-numeric: tabular-nums; }
html.neo .db-onglet[aria-selected="true"] { border-color: var(--n-orange); background: #2a1d12; transform: translateY(-2px); }
html.neo .db-onglet[aria-selected="true"] .db-onglet-k { background: var(--n-orange); color: #1a0d00; }
html.neo .db-onglet[aria-selected="true"] .db-onglet-t small { color: var(--n-orange); }

/* la tête de branche : le lieu, et qui en sort */
html.neo .db-branche-tete {
  position: relative;
  height: 150px;
  margin: 46px 0 6px;
  border-radius: var(--n-r);
  background: var(--n-s1);
  box-shadow: var(--n-ombre);
  isolation: isolate;
}
html.neo .db-branche-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(0.85) brightness(0.8);
  z-index: -1;
}
html.neo .db-branche-perso {
  position: absolute; right: 6px; bottom: 0;
  height: 196px; width: auto; max-width: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  animation: db-arrive 0.6s 0.1s var(--db-sortie) both;
}
html.neo .db-branche-t {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "k h" "k p";
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(10, 11, 15, 0.86);
  border-radius: 0 0 var(--n-r) var(--n-r);
}
html.neo .db-branche-k {
  grid-area: k;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--n-orange);
  color: #1a0d00;
  font: 900 24px/1 "Noto Serif JP", "Yu Mincho", serif;
}
html.neo .db-branche-t h3 { grid-area: h; margin: 0; font: 900 21px/1.1 var(--n-titre); letter-spacing: -0.01em; color: #fff; }
html.neo .db-branche-t p { grid-area: p; margin: 2px 0 0; font: 700 12.5px/1.2 var(--n-titre); color: var(--n-doux); }

/* la branche : un fil, des cercles, des nœuds */
html.neo .db-arbre,
html.neo .db-noeuds { list-style: none; margin: 0; padding: 0; }
html.neo .db-arbre { position: relative; padding: 4px 0 4px 34px; }
html.neo .db-arbre::before {
  content: "";
  position: absolute; left: 13px; top: 0; bottom: 18px;
  width: 4px; border-radius: 2px;
  background: #3a2a1a;
  transform-origin: 50% 0;
  animation: db-fil 0.7s var(--db-sortie) both;
}
html.neo .db-palier { position: relative; }
html.neo .db-palier-t {
  position: relative;
  margin: 16px 0 10px;
  font: 800 11px/1.2 var(--n-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-pale);
}
html.neo .db-palier-t::before {
  content: "";
  position: absolute; left: -28px; top: 50%;
  width: 16px; height: 16px; translate: 0 -50%;
  border-radius: 4px; rotate: 45deg;
  background: var(--n-s3);
  box-shadow: 0 0 0 3px var(--n-fond);
}
html.neo .db-noeuds { display: grid; gap: 22px; padding-top: 8px; }
html.neo .db-noeud {
  position: relative;
  animation: db-monte 0.45s var(--db-sortie) both;
  animation-delay: calc(min(var(--i, 0), 10) * 45ms + 80ms);
}
html.neo .db-noeud-pt {
  position: absolute; left: -27px; top: 50%;
  width: 14px; height: 14px; translate: 0 -50%;
  border-radius: 50%;
  background: var(--n-fond);
  border: 3px solid #4a5163;
}
html.neo .db-noeud-pt::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  width: 13px; height: 3px; translate: 0 -50%;
  background: #3a2a1a;
}
html.neo .db-noeud[data-st="ouvert"] .db-noeud-pt,
html.neo .db-noeud[data-st="herite"] .db-noeud-pt { background: var(--n-orange); border-color: var(--n-orange); }
html.neo .db-noeud[data-st="herite"] .db-noeud-pt { background: #8a5a2a; border-color: #8a5a2a; }

html.neo .db-carte {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
  min-height: 132px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: 16px;
  box-shadow: var(--n-ombre);
}
html.neo .db-noeud[data-st="ouvert"] .db-carte { border-color: rgba(255, 138, 31, 0.45); }

/* la fenêtre d'un nœud : le lieu, le personnage qui sort par le haut, le sceau */
html.neo .db-vis {
  position: relative;
  display: block;
  min-height: 100%;
  border-radius: 15px 0 0 15px;
  background: var(--n-s3);
  clip-path: inset(-18px 0 0 0 round 0 0 0 15px);
}
html.neo .db-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 15px 0 0 15px;
}
html.neo .db-fig {
  position: absolute; left: 50%; bottom: 0;
  height: calc(100% + 16px); width: auto; max-width: none;
  translate: -50% 0;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}
html.neo .db-glyphe {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 900 40px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
html.neo .db-sceau {
  position: absolute; right: 6px; bottom: 6px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 5px;
  font: 900 16px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: #fff;
  background: var(--db-sceau);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  rotate: -8deg;
}
html.neo .db-vis[data-st="herite"] .db-sceau { background: #3a3f4d; rotate: 0deg; }
html.neo .db-vis[data-st="ferme"] .db-sceau { background: #232733; color: var(--n-pale); rotate: 0deg; box-shadow: inset 0 0 0 1px var(--n-filet-fort); }
html.neo .db-vis[data-st="ferme"] .db-decor { filter: grayscale(1) brightness(0.42); }
html.neo .db-vis[data-st="ferme"] .db-fig { filter: brightness(0) opacity(0.82); }
html.neo .db-vis[data-st="ferme"] .db-glyphe { color: #5b6172 !important; text-shadow: none; filter: grayscale(1) brightness(0.6); }

html.neo .db-corps { min-width: 0; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 5px; }
html.neo .db-genre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0;
  font: 800 10.5px/1.2 var(--n-titre);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-pale);
}
html.neo .db-st { padding: 2px 6px; border-radius: 5px; background: var(--n-s3); color: var(--n-doux); letter-spacing: 0.04em; }
html.neo .db-noeud[data-st="ouvert"] .db-st { background: var(--db-sceau); color: #fff; }
html.neo .db-neuf { padding: 2px 6px; border-radius: 5px; background: var(--n-orange); color: #1a0d00; letter-spacing: 0.04em; }
html.neo .db-nom { margin: 0; font: 900 17px/1.15 var(--n-titre); letter-spacing: -0.01em; color: #fff; }
html.neo .db-cond { margin: 0; font: 600 13px/1.4 var(--n-titre); color: var(--n-encre); }
html.neo .db-cond b { color: var(--n-orange); font-weight: 800; }
html.neo .db-noeud[data-st="herite"] .db-cond b { color: var(--n-pale); }
html.neo .db-dit { margin: 2px 0 0; font: 500 12.5px/1.45 var(--n-titre); color: var(--n-doux); }
html.neo .db-barre { height: 6px; margin-top: 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
html.neo .db-barre i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--n-orange);
  transform-origin: left center;
  animation: db-barre 0.9s 0.3s var(--db-sortie) both;
}
html.neo .db-compte { margin: 0; font: 800 12px/1 var(--n-titre); color: var(--n-pale); font-variant-numeric: tabular-nums; }
html.neo .db-relance .db-arbre::before { animation: db-fil 0.6s var(--db-sortie) both; }
html.neo .db-relance .db-branche-perso { animation: db-arrive 0.5s var(--db-sortie) both; }

/* ---------- l'écran de fin : l'encart ---------- */
html.neo .db-fin-l { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
html.neo .db-fin-l li {
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px;
  padding: 0 10px 0 0;
  background: var(--n-s2);
  border-radius: 12px;
  overflow: visible;
}
html.neo .db-fin-l .db-vis-p { height: 72px; border-radius: 12px 0 0 12px; clip-path: inset(0 round 12px 0 0 12px); }
html.neo .db-fin-l .db-vis-p .db-fig { top: 4px; bottom: auto; height: 190%; }
html.neo .db-fin-l .db-vis-p .db-decor { border-radius: 12px 0 0 12px; }
html.neo .db-fin-l .db-vis-p .db-sceau { width: 22px; height: 22px; font-size: 13px; right: 4px; bottom: 4px; }
html.neo .db-fin-l .db-vis-p .db-glyphe { font-size: 28px; }
html.neo .db-fin-l span { display: flex; flex-direction: column; gap: 2px; }
html.neo .db-fin-l small { font: 800 10.5px/1.2 var(--n-titre); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-orange); }
html.neo .db-fin-l strong { font: 900 16px/1.2 var(--n-titre); color: #fff; }

/* ---------- le moment : un nœud qui s'ouvre ---------- */
html.neo .db-moment {
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: rgba(6, 7, 10, 0.95);
  overflow-y: auto;
  animation: db-fond 0.3s ease-out both;
}
html.neo .db-moment.part { animation: db-fond-part 0.26s ease-in both; }
html.neo .db-m-scene {
  position: relative;
  flex: none;
  width: min(100%, 520px);
  height: 230px;
  margin-top: 70px;
  border-radius: var(--n-r) var(--n-r) 0 0;
  background: var(--n-s1);
  isolation: isolate;
  animation: db-secousse 0.32s 0.95s ease-out both;
}
html.neo .db-m-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: -1;
  animation: db-glisse 0.9s var(--db-sortie) both;
}
html.neo .db-m-fig {
  position: absolute; left: 50%; bottom: 0;
  height: 300px; width: auto; max-width: none;
  translate: -50% 0;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7));
  animation: db-revele 0.9s 0.25s var(--db-sortie) both;
}
html.neo .db-m-glyphe {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 900 110px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6);
  animation: db-arrive 0.7s 0.25s var(--db-sortie) both;
}
html.neo .db-m-sceau {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 10px;
  background: var(--db-sceau);
  color: #fff;
  font: 900 44px/1 "Noto Serif JP", "Yu Mincho", serif;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.18);
  rotate: -10deg;
  animation: db-tampon 0.42s 0.75s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
html.neo .db-m-plaque {
  flex: none;
  width: min(100%, 520px);
  padding: 18px 18px 18px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-top: 0;
  border-radius: 0 0 var(--n-r) var(--n-r);
  box-shadow: var(--n-ombre);
  animation: db-monte 0.5s 0.5s var(--db-sortie) both;
}
html.neo .db-m-kicker { margin: 0 0 8px; font: 800 11px/1.2 var(--n-titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-pale); }
html.neo .db-m-genre {
  display: inline-block;
  margin: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--n-orange);
  color: #1a0d00;
  font: 900 12px/1.2 var(--n-titre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.neo .db-m-nom { margin: 8px 0 10px; font: 900 30px/1.05 var(--n-titre); letter-spacing: -0.02em; color: #fff; }
html.neo .db-m-cond {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--db-sceau);
  border-radius: 0 10px 10px 0;
  background: var(--n-s2);
  font: 600 14px/1.4 var(--n-titre);
}
html.neo .db-m-cond b { color: var(--n-orange); }
html.neo .db-m-dit { margin: 0 0 16px; font: 500 14.5px/1.5 var(--n-titre); color: var(--n-doux); }
html.neo .db-m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.neo .db-m-actions .btn { margin: 0 !important; min-height: 50px; }

/* ---------- la création : ce qui est fermé ---------- */
html.neo .crs-tuile.crs-ferme .crs-t-vis img:not(.crs-t-lieu) { filter: brightness(0) opacity(0.8); }
html.neo .crs-tuile.crs-ferme img.crs-t-lieu { filter: grayscale(1) brightness(0.45); }
html.neo .crs-tuile.crs-ferme .crs-t-nom { color: var(--n-pale); }
html.neo .crs-tuile.crs-ferme .crs-t-sceau > span { filter: grayscale(1) brightness(0.55); }
html.neo .crs-tuile.crs-ferme::before {
  content: "封";
  position: absolute; top: 2px; right: 2px;
  z-index: 2;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  background: #232733;
  box-shadow: inset 0 0 0 1px var(--n-filet-fort);
  font: 900 12px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: var(--n-doux);
}
html.neo .crs-tuile.crs-ferme[aria-pressed="true"] { border-color: #6b7285; background: var(--n-s3); }
html.neo .crs-tuile.crs-ferme[aria-pressed="true"]::after { background: #6b7285; }
html.neo .crs-verrou {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #241a1a;
  box-shadow: inset 3px 0 0 var(--db-sceau);
  font: 600 13.5px/1.4 var(--n-titre);
  color: var(--n-encre);
}
html.neo .crs-verrou > span:first-child {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 5px;
  background: var(--db-sceau);
  color: #fff;
  font: 900 14px/1 "Noto Serif JP", "Yu Mincho", serif;
}
html.neo .crs-verrou b { color: #fff; }
html.neo .crs-go:disabled { opacity: 1; background: var(--n-s3) !important; color: var(--n-doux) !important; box-shadow: none !important; }

/* la feuille : choisir sa nature, tirer une seconde feuille */
html.neo .db-natures { margin: 4px 0 2px; }
html.neo .db-natures-t { margin: 0 2px 8px; font: 700 12.5px/1.35 var(--n-titre); color: var(--n-doux); }
html.neo .db-natures-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
html.neo .db-nat {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 64px;
  padding: 8px 4px 7px;
  font: inherit;
  background: var(--n-s2);
  border: 1.5px solid var(--n-filet-fort);
  border-radius: 12px;
  box-shadow: var(--n-ombre-choix);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.18s;
}
html.neo .db-nat:active { transform: scale(0.95); }
html.neo .db-nat[aria-pressed="true"] { border-color: var(--n-orange); background: #2a1d12; }
html.neo .db-nat-k { font: 900 24px/1 "Noto Serif JP", "Yu Mincho", serif; }
html.neo .db-nat-n { font: 700 11px/1.1 var(--n-titre); color: var(--n-encre); }
html.neo .db-nat:disabled { cursor: default; box-shadow: none; background: var(--n-s1); }
html.neo .db-nat:disabled .db-nat-k { color: #4a5163 !important; }
html.neo .db-nat:disabled .db-nat-n { color: var(--n-pale); }
html.neo .db-nat-f {
  position: absolute; top: 3px; right: 3px;
  font: 900 10px/1 "Noto Serif JP", "Yu Mincho", serif;
  color: var(--n-pale);
}
html.neo .db-feuille2 { width: 100%; margin: 4px 0 2px !important; }

/* l'ancien rendu de création, s'il passe par neo */
html.neo .choice-card.db-carte-fermee { opacity: 0.6; cursor: default; }

/* ---------- grand écran ---------- */
@media (min-width: 900px) {
  html.neo .db {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas: "tete onglets" "tete branche" "portee branche";
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  html.neo .db-tete { grid-area: tete; margin-top: 0; }
  html.neo .db-portee { grid-area: portee; }
  html.neo .db-onglets { grid-area: onglets; margin: 0 0 4px; padding: 2px 0 6px; flex-wrap: wrap; overflow: visible; }
  html.neo .db-branche { grid-area: branche; min-width: 0; }
  html.neo .db-branche-tete { margin-top: 64px; height: 170px; }
  html.neo .db-tete { align-self: start; }
  html.neo .db-portee { align-self: start; margin-top: 18px; }
  html.neo .db-branche-perso { height: 220px; right: 24px; }
  html.neo .db-noeuds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.neo .db-noeud-pt { display: none; }
  html.neo .db-noeuds .db-noeud:nth-child(odd) .db-noeud-pt { display: block; }
  html.neo .db-m-scene { height: 280px; }
  html.neo .db-m-fig { height: 360px; }
}

/* ---------- mouvements ---------- */
@keyframes db-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes db-pousse { from { transform: scaleY(0); } }
@keyframes db-barre { from { transform: scaleX(0); } }
@keyframes db-fil { from { transform: scaleY(0); } }
@keyframes db-arrive { from { opacity: 0; translate: 0 24px; } }
@keyframes db-fond { from { opacity: 0; } }
@keyframes db-fond-part { to { opacity: 0; } }
@keyframes db-glisse { from { opacity: 0; transform: scale(1.12) translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes db-revele {
  0% { opacity: 0; translate: -50% 40px; filter: brightness(0) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
  55% { opacity: 1; filter: brightness(0) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
  100% { opacity: 1; translate: -50% 0; filter: brightness(1) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
}
@keyframes db-tampon {
  0% { opacity: 0; scale: 2.6; rotate: -24deg; }
  70% { opacity: 1; scale: 0.92; rotate: -9deg; }
  100% { opacity: 1; scale: 1; rotate: -10deg; }
}
@keyframes db-secousse {
  0%, 100% { transform: none; }
  30% { transform: translateY(4px); }
  60% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html.neo .db *, html.neo .db-moment, html.neo .db-moment * { animation: none !important; transition: none !important; }
}