/* Veillée — maquette cliquable. Feuille de style unique. */

:root {
  /* Bleu de Prusse : le drap des uniformes de l'époque de la poudre noire */
  --prusse-950: #0c1824;
  --prusse-900: #11202f;
  --prusse-800: #172a3c;
  --prusse-700: #1e354b;
  --prusse-600: #284560;
  --ligne: #335473;
  --ligne-douce: #24405a;

  --texte: #ebe4d3;
  --texte-doux: #9fb2c4;
  --texte-faible: #6f879d;

  --laiton: #c9a55a;          /* cadres, icônes, valeurs forcées par le MJ */
  --lanterne: #f5b941;        /* réservé au « à toi » et à l'action en cours */
  --poudre: #ee7a2b;          /* dé de poudre, explosions */
  --buff: #7fcf8a;
  --debuff: #f2705f;
  --sang: #d94b3d;

  --papier: #efe8d8;
  --papier-2: #e4dbc6;
  --encre: #24262d;
  --encre-douce: #5b5a58;

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --r-panneau: 14px;
  --r-bouton: 10px;
  --ombre: 0 10px 30px rgba(4, 10, 18, .55);

  --cote: 380px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--prusse-950);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lanterne); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- */
/* Écran « Rejoindre »                                              */
/* ---------------------------------------------------------------- */
#ecran-join {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--prusse-950);
}
body:not([data-screen="join"]) #ecran-join { display: none; }
.faux-navigateur {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: #2a2d33; color: #c8ccd2; font-size: 13px;
  border-bottom: 1px solid #1a1c20;
}
.faux-navigateur .pastilles { display: flex; gap: 6px; }
.faux-navigateur .pastilles i { width: 11px; height: 11px; border-radius: 50%; background: #55595f; display: block; }
.faux-navigateur .url {
  flex: 1; max-width: 640px; background: #1c1e22; border-radius: 6px; padding: 5px 12px;
  font-family: var(--sans); color: #e3e6ea;
}
.faux-navigateur .url b { font-weight: 500; color: #fff; }
.join-fond { position: relative; overflow: hidden; display: grid; place-items: center; }
.join-fond svg.carte-floue {
  position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
  filter: blur(6px) saturate(.7) brightness(.45);
}
.join-fond::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(12,24,36,.2), rgba(12,24,36,.92) 75%);
}
.join-carte {
  position: relative; z-index: 2; width: min(520px, calc(100% - 32px));
  background: var(--prusse-800); border: 1px solid var(--ligne); border-radius: 18px;
  box-shadow: var(--ombre); padding: 34px 38px 30px;
}
.join-carte .marque { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--laiton); display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.join-carte h1 { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.12; margin: 0 0 6px; }
.join-carte .sous { color: var(--texte-doux); margin: 0 0 24px; font-size: 16px; }
.champ { display: grid; gap: 6px; margin-bottom: 16px; }
.champ label { font-size: 14px; color: var(--texte-doux); }
.champ input {
  background: var(--prusse-950); border: 1px solid var(--ligne); border-radius: 9px;
  padding: 11px 13px; font-size: 16px;
}
.champ input:focus { border-color: var(--lanterne); outline: none; }
.perso-attribue {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 4px 0 22px;
  background: var(--prusse-900); border-radius: 12px; border: 1px solid var(--ligne-douce);
}
.perso-attribue .p { color: var(--texte-doux); font-size: 14px; }
.perso-attribue strong { font-family: var(--serif); font-size: 18px; display: block; color: var(--texte); }
.erreur { color: var(--debuff); font-size: 14px; min-height: 20px; margin: -6px 0 10px; }
.btn-principal {
  width: 100%; border: 0; border-radius: 11px; padding: 14px 18px;
  background: var(--lanterne); color: #2a1d05; font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 18px rgba(245, 185, 65, .25);
}
.btn-principal:hover { filter: brightness(1.06); }
.join-carte .rassure { margin: 14px 0 0; font-size: 13.5px; color: var(--texte-faible); text-align: center; }

/* ---------------------------------------------------------------- */
/* Disposition de la table                                          */
/* ---------------------------------------------------------------- */
#table {
  height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cote);
  grid-template-rows: 64px minmax(0, 1fr) auto;
  grid-template-areas: "haut haut" "carte cote" "barre cote";
}
body[data-screen="join"] #table { visibility: hidden; }

/* Bandeau du haut */
#haut {
  grid-area: haut; display: flex; align-items: center; gap: 18px;
  padding: 0 16px; background: var(--prusse-800); border-bottom: 1px solid var(--ligne-douce);
  min-width: 0;
}
.marque-table { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; }
.marque-table b { font-family: var(--serif); font-weight: 800; font-size: 21px; color: var(--laiton); }
.marque-table span { color: var(--texte-doux); font-size: 14px; white-space: nowrap; }
.haut-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pilule {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 5px 11px; font-size: 13.5px; background: var(--prusse-700); border: 1px solid var(--ligne-douce);
  color: var(--texte-doux); white-space: nowrap;
}
button.pilule:hover { color: var(--texte); border-color: var(--ligne); }
.pilule.on { color: var(--texte); border-color: var(--laiton); }
.pilule svg { width: 15px; height: 15px; }
.kbd { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ligne); color: var(--texte-doux); line-height: 1.3; }
.moi { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.moi .pastille { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: #1b1b1b; }

/* Ordre des tours */
#initiative { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; justify-content: center; }
.init-tour { font-family: var(--serif); font-size: 17px; color: var(--texte-doux); white-space: nowrap; }
.init-tour b { color: var(--texte); font-weight: 700; }
.init-liste { display: flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.init-item {
  display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: 999px;
  border: 1px solid transparent; font-size: 13.5px; color: var(--texte-doux); white-space: nowrap;
  background: transparent; user-select: none;
}
.init-item .rond { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 13px; color: #161616; flex: 0 0 auto; }
.init-item .val { color: var(--texte-faible); font-size: 12px; }
.init-item.passe { opacity: .45; }
.init-item.actif { padding-right: 12px; background: rgba(245, 185, 65, .12); border-color: var(--lanterne); color: var(--texte); }
.init-item.actif .rond { box-shadow: 0 0 0 2px var(--lanterne); }
.init-item.cache { border-style: dashed; border-color: var(--ligne); opacity: .7; }
.init-item.mort { text-decoration: line-through; opacity: .35; }
body[data-role="mj"] .init-item { cursor: grab; }
.init-item.drag-sur { border-color: var(--laiton); background: rgba(201,165,90,.12); }
.init-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.btn {
  border: 1px solid var(--ligne); background: var(--prusse-700); border-radius: 9px;
  padding: 6px 12px; font-size: 14px; color: var(--texte); white-space: nowrap;
}
.btn:hover { background: var(--prusse-600); }
.btn.fort { background: var(--lanterne); color: #2a1d05; border-color: var(--lanterne); font-weight: 700; }
.btn.laiton { border-color: var(--laiton); color: var(--laiton); background: transparent; }
.btn.fort .kbd { color: #2a1d05; border-color: rgba(42,29,5,.45); }
.btn.petit { padding: 3px 9px; font-size: 13px; border-radius: 7px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.segment { display: inline-flex; border: 1px solid var(--ligne); border-radius: 9px; overflow: hidden; }
.segment button { border: 0; background: transparent; padding: 5px 10px; font-size: 13.5px; color: var(--texte-doux); }
.segment button + button { border-left: 1px solid var(--ligne-douce); }
.segment button.on { background: var(--prusse-600); color: var(--texte); }
.segment-label { font-size: 13px; color: var(--texte-faible); margin-right: 6px; white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* Carte                                                            */
/* ---------------------------------------------------------------- */
#zone-carte { grid-area: carte; position: relative; overflow: hidden; background: var(--prusse-900); }
#carte { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#carte.pan { cursor: grabbing; }
#zone-carte.visee #carte { cursor: crosshair; }
#zone-carte.outil-mesure #carte, #zone-carte.outil-ping #carte { cursor: crosshair; }
#zone-carte::after { /* vignette légère */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 80px rgba(8, 16, 26, .55);
}
#zone-carte.visee::after { box-shadow: inset 0 0 0 2px rgba(245,185,65,.55), inset 0 0 90px rgba(8,16,26,.6); }

.outils-carte {
  position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: 4px;
  background: rgba(17, 32, 47, .88); border: 1px solid var(--ligne-douce); border-radius: 12px; padding: 4px;
  backdrop-filter: blur(4px);
}
.outils-carte button {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 8px;
  padding: 6px 10px; font-size: 13.5px; color: var(--texte-doux);
}
.outils-carte button:hover { background: var(--prusse-700); color: var(--texte); }
.outils-carte button.on { background: var(--prusse-600); color: var(--texte); }
.outils-carte svg { width: 16px; height: 16px; }

.indice-visee {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(17,32,47,.94); border: 1px solid var(--lanterne); color: var(--texte);
  border-radius: 999px; padding: 7px 16px; font-size: 15px; box-shadow: var(--ombre); white-space: nowrap;
}
.indice-visee .kbd { margin-left: 4px; }
.circ-chip {
  position: absolute; top: 112px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(17,32,47,.94); border: 1px solid var(--laiton); color: var(--laiton);
  border-radius: 999px; padding: 4px 13px; font-size: 14px;
}

/* Jetons (SVG) */
.jeton { cursor: pointer; transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.jeton.drag, .jeton.neuf { transition: none; }
.jeton .socle { stroke-width: 3; }
.jeton .initiales { font-family: var(--serif); font-weight: 800; font-size: 17px; text-anchor: middle; dominant-baseline: central; fill: #1a1712; pointer-events: none; }
.jeton .nom { font-family: var(--sans); font-size: 12.5px; text-anchor: middle; fill: #f2ecdf; paint-order: stroke; stroke: rgba(10,18,28,.85); stroke-width: 3.5px; pointer-events: none; }
.jeton .barre-fond { fill: rgba(10,18,28,.8); }
.jeton .barre-pv { transform-box: fill-box; transform-origin: left center; transition: transform .6s cubic-bezier(.2,.8,.2,1), fill .3s; }
.jeton .pv-txt { font-size: 10.5px; font-family: var(--sans); fill: #f2ecdf; text-anchor: middle; paint-order: stroke; stroke: rgba(10,18,28,.9); stroke-width: 3px; pointer-events: none; }
.jeton .halo-tour { fill: none; stroke: var(--lanterne); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: halo 1.6s ease-out infinite; pointer-events: none; }
@keyframes halo { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.jeton .anneau-cible { fill: none; stroke: var(--debuff); stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }
.jeton .anneau-survol { fill: none; stroke: var(--lanterne); stroke-width: 2.5; opacity: 0; pointer-events: none; }
#zone-carte.visee .jeton.visable:hover .anneau-survol { opacity: 1; }
#zone-carte.visee .jeton.hors-portee:hover .anneau-survol { opacity: 1; stroke: var(--debuff); }
.jeton.cache-mj { opacity: .55; }
.jeton.cache-mj .socle { stroke-dasharray: 5 4; }
.jeton.mort .socle { filter: grayscale(1); }
.jeton.mort { opacity: .55; }
.jeton.surgit { animation: surgit .7s ease-out; }
@keyframes surgit { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } }
.jeton .pastille-effet { stroke: rgba(10,18,28,.9); stroke-width: 1.5; }

.portee { fill: rgba(245,185,65,.05); stroke: rgba(245,185,65,.55); stroke-width: 2; stroke-dasharray: 10 8; pointer-events: none; }
.portee.min { fill: rgba(242,112,95,.07); stroke: rgba(242,112,95,.5); }
.portee-mvt { fill: rgba(127,207,138,.06); stroke: rgba(127,207,138,.55); stroke-width: 2; stroke-dasharray: 8 6; pointer-events: none; }
.regle-ligne { stroke: var(--lanterne); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.regle-txt { font-family: var(--sans); font-weight: 700; font-size: 18px; fill: var(--lanterne); paint-order: stroke; stroke: rgba(10,18,28,.9); stroke-width: 5px; }

/* Effets visuels */
.fx-trait { stroke: #ffd98a; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #f5b941); animation: trait .35s ease-out forwards; }
@keyframes trait { 0% { stroke-dashoffset: var(--len); opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-flash { fill: #ffe5a6; transform-box: fill-box; transform-origin: center; animation: flash .32s ease-out forwards; }
@keyframes flash { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.fx-fumee { fill: #c9c4ba; transform-box: fill-box; transform-origin: center; animation: fumee 1.6s ease-out forwards; }
@keyframes fumee { 0% { transform: translate(0,0) scale(.4); opacity: .75; } 100% { transform: translate(var(--dx), -40px) scale(2.2); opacity: 0; } }
.fx-dm { font-family: var(--serif); font-weight: 800; font-size: 34px; text-anchor: middle; paint-order: stroke; stroke: rgba(10,18,28,.95); stroke-width: 6px; animation: dm 1.4s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes dm { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 15% { transform: translateY(-18px) scale(1.15); opacity: 1; } 70% { transform: translateY(-34px) scale(1); opacity: 1; } 100% { transform: translateY(-48px) scale(1); opacity: 0; } }
.fx-dm { transform-box: fill-box; transform-origin: center; }
.fx-ping { fill: none; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: ping 1.2s ease-out forwards; }
@keyframes ping { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.fx-coup { stroke: #f2ecdf; stroke-width: 3; stroke-linecap: round; animation: coup .4s ease-out forwards; }
@keyframes coup { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.fx-reflet { fill: none; stroke: var(--buff); stroke-width: 2.5; animation: reflet 1s ease-out forwards; }
@keyframes reflet { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(26px); } }

/* Brouillard */
.brouillard-joueur { fill: #0b141e; }
.brouillard-mj { fill: rgba(11, 20, 30, .45); }

/* Dés */
#des {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: flex-end; gap: 18px; pointer-events: none;
  padding: 12px 20px 10px; border-radius: 16px; background: rgba(12,24,36,.72); backdrop-filter: blur(3px);
  border: 1px solid var(--ligne-douce);
}
#des .qui { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 13.5px; color: var(--texte-doux); white-space: nowrap; background: rgba(12,24,36,.85); padding: 2px 10px; border-radius: 999px; }
.de { display: grid; justify-items: center; gap: 2px; }
.de svg { width: 74px; height: 74px; overflow: visible; }
.de .lab { font-size: 12.5px; color: var(--texte-doux); }
.de.roule svg { animation: roule .9s cubic-bezier(.25,.8,.3,1) both; }
.de.roule.vite svg { animation-duration: .35s; }
@keyframes roule {
  0% { transform: translate(-120px, -30px) rotate(-540deg) scale(.7); }
  55% { transform: translate(8px, 0) rotate(-20deg) scale(1.05); }
  75% { transform: translate(-3px, -6px) rotate(8deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
.de-txt { font-family: var(--serif); font-weight: 800; font-size: 30px; text-anchor: middle; dominant-baseline: central; }
.des-total { font-family: var(--serif); font-size: 22px; padding-bottom: 22px; white-space: nowrap; }
.des-total small { display: block; font-family: var(--sans); font-size: 13px; color: var(--texte-doux); }
.des-total.ok { color: var(--buff); }
.des-total.ko { color: var(--debuff); }
.des-total.attente { color: var(--lanterne); }

/* Bandeaux */
#bandeau {
  position: absolute; left: 0; right: 0; top: 64px; z-index: 9; pointer-events: none;
  display: grid; place-items: center;
}
.bandeau-tour {
  text-align: center; padding: 16px 70px 18px;
  background: linear-gradient(90deg, transparent, rgba(23,42,60,.96) 18%, rgba(23,42,60,.96) 82%, transparent);
  border-top: 1px solid rgba(245,185,65,.5); border-bottom: 1px solid rgba(245,185,65,.5);
  animation: bandeau 2.8s cubic-bezier(.2,.8,.2,1) forwards; width: 100%;
}
.bandeau-tour h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 56px; line-height: 1; color: var(--lanterne); text-shadow: 0 0 28px rgba(245,185,65,.45); }
.bandeau-tour p { margin: 8px 0 0; font-size: 17px; color: var(--texte); }
@keyframes bandeau { 0% { opacity: 0; transform: translateY(-14px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
.bandeau-court {
  padding: 10px 30px; border-radius: 12px; background: rgba(23,42,60,.96); border: 1px solid var(--poudre);
  font-family: var(--serif); font-weight: 800; font-size: 30px; color: var(--poudre);
  animation: bandeau 1.8s ease-out forwards; text-align: center;
}
.bandeau-court small { display: block; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--texte); }

/* Encart cinématique : jamais la caméra, toujours un encart */
#encart {
  position: absolute; right: 16px; top: 16px; z-index: 10; width: 440px; height: 272px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--laiton);
  box-shadow: var(--ombre), 0 0 0 4px rgba(201,165,90,.12);
  background: #0a121b; animation: encart-in .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes encart-in { from { transform: translateY(-10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
#encart.sort { animation: encart-out .3s ease-in forwards; }
@keyframes encart-out { to { opacity: 0; transform: scale(.97); } }
#encart .scene { position: absolute; inset: 0; }
#encart .scene svg { width: 100%; height: 100%; display: block; }
#encart .titre { position: absolute; left: 22px; right: 22px; bottom: 18px; }
#encart .titre h3 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 38px; line-height: 1.05; }
#encart .titre p { margin: 4px 0 0; font-size: 15px; color: var(--texte); }
#encart .passer { position: absolute; top: 10px; right: 10px; z-index: 2; }
#encart .etiquette { position: absolute; top: 12px; left: 14px; font-size: 12.5px; color: var(--texte-doux); }
#encart.secoue .scene { animation: secoue .5s linear; }
@keyframes secoue { 0%,100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px,-4px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(3px,3px); } }
.etincelle { animation: etincelle 1.1s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes etincelle { 0% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(var(--ex), var(--ey)); opacity: 0; } }
.onde { fill: none; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: onde 1.2s ease-out forwards; }
@keyframes onde { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.gros-de { transform-box: fill-box; transform-origin: center; animation: gros-de .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes gros-de { 0% { transform: scale(2.4) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.volute { fill: #9a958c; transform-box: fill-box; transform-origin: center; animation: volute 2.6s ease-out forwards; }
@keyframes volute { 0% { transform: translateY(0) scale(.4); opacity: .8; } 100% { transform: translateY(-90px) scale(2); opacity: 0; } }
.flash-total { animation: flash-total .9s ease-out forwards; }
@keyframes flash-total { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Fenêtre de réaction (point de chance) */
#reaction {
  position: absolute; bottom: 18px; right: 18px; z-index: 11; width: 330px;
  background: var(--prusse-800); border: 1px solid var(--lanterne); border-radius: 14px;
  box-shadow: var(--ombre); padding: 14px 16px 12px; animation: encart-in .25s ease-out;
}
#reaction h4 { margin: 0 0 2px; font-family: var(--serif); font-size: 21px; }
#reaction p { margin: 0 0 12px; color: var(--texte-doux); font-size: 14.5px; }
#reaction .rangee { display: flex; gap: 8px; }
#reaction .rangee .btn { flex: 1; padding: 9px 10px; font-size: 15px; }
#reaction .compte { height: 4px; border-radius: 4px; background: var(--prusse-950); margin-top: 12px; overflow: hidden; }
#reaction .compte i { display: block; height: 100%; background: var(--lanterne); transform-origin: left; animation: compte linear forwards; }
@keyframes compte { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Note « la dernière fois » */
#note-arrivee { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8,16,26,.6); }
.note-carte {
  width: min(560px, calc(100% - 32px)); background: var(--papier); color: var(--encre);
  border-radius: 6px 6px 16px 16px; padding: 30px 36px 26px; box-shadow: var(--ombre);
  font-family: var(--serif); position: relative;
}
.note-carte .de-qui { font-family: var(--sans); color: var(--encre-douce); font-size: 14px; margin-bottom: 8px; }
.note-carte h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; }
.note-carte p { font-size: 18px; line-height: 1.55; margin: 0 0 12px; }
.note-carte .btn-principal { margin-top: 10px; font-family: var(--sans); }

/* ---------------------------------------------------------------- */
/* Barre d'actions                                                   */
/* ---------------------------------------------------------------- */
#barre { grid-area: barre; background: var(--prusse-800); border-top: 1px solid var(--ligne-douce); min-width: 0; }
.barre-haut {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; min-height: 40px;
  border-bottom: 1px solid var(--ligne-douce); font-size: 14px; flex-wrap: wrap;
}
.barre-haut .lib { color: var(--texte-faible); font-size: 13.5px; }
.effet {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13.5px;
  border: 1px solid; cursor: default; white-space: nowrap;
}
.effet.buff { color: var(--buff); border-color: rgba(127,207,138,.5); background: rgba(127,207,138,.08); }
.effet.debuff { color: var(--debuff); border-color: rgba(242,112,95,.5); background: rgba(242,112,95,.08); }
.effet i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
.effet .t { color: var(--texte-doux); }
.cible-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; border: 1px dashed var(--debuff); color: var(--texte); font-size: 13.5px; }
.cible-chip button { border: 0; background: transparent; color: var(--texte-doux); padding: 0 4px; }
.circ { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.circ button { border: 1px solid var(--ligne); background: transparent; border-radius: 7px; padding: 2px 8px; font-size: 13.5px; color: var(--texte-doux); }
.circ button.on { border-color: var(--laiton); color: var(--laiton); background: rgba(201,165,90,.1); }

.barre-corps { display: flex; gap: 14px; padding: 10px 14px 12px; align-items: stretch; min-width: 0; }
.bloc-moi { flex: 0 0 206px; display: grid; gap: 7px; align-content: start; }
.moi-tete { display: flex; align-items: center; gap: 10px; }
.portrait {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--serif); font-weight: 800; font-size: 20px; color: #1b1710; background: #d9a441;
  box-shadow: 0 0 0 2px var(--prusse-800), 0 0 0 3px var(--laiton);
}
.portrait.mon-tour { box-shadow: 0 0 0 2px var(--prusse-800), 0 0 0 4px var(--lanterne), 0 0 18px rgba(245,185,65,.5); }
.moi-tete .n { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.1; }
.moi-tete .s { font-size: 13px; color: var(--texte-doux); }
.moi-tete .btn { margin-left: auto; }
.res { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.res .k { color: var(--texte-doux); }
.jauge { height: 9px; border-radius: 9px; background: var(--prusse-950); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 9px; background: var(--buff); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.jauge.moyen i { background: var(--lanterne); }
.jauge.bas i { background: var(--sang); }
.pieces { display: flex; gap: 5px; }
.pieces i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #c99325); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); display: block; }
.pieces i.vide { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ligne); }

.bloc-tour { flex: 0 0 196px; display: grid; gap: 6px; align-content: start; padding: 0 14px; border-left: 1px solid var(--ligne-douce); border-right: 1px solid var(--ligne-douce); }
.bloc-tour h5 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 700; }
.bloc-tour h5.a-toi { color: var(--lanterne); }
.etat { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.etat i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--buff); display: block; flex: 0 0 auto; }
.etat.fait { color: var(--texte-faible); text-decoration: line-through; }
.etat.fait i { border-color: var(--texte-faible); background: var(--texte-faible); }
.etat.charge i { background: var(--buff); }
.etat.vide i { border-color: var(--lanterne); }
.etat.hs { color: var(--debuff); }
.etat.hs i { border-color: var(--debuff); background: var(--debuff); }
.bloc-tour .btn { margin-top: 2px; }
.attente-msg { margin-top: 2px; min-height: 33px; display: flex; align-items: center; font-size: 13px; color: var(--texte-faible); line-height: 1.25; }
.etat.attente { color: var(--texte-faible); }
.etat.attente i { border-color: var(--texte-faible); }

.bloc-actions { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; align-items: stretch; overflow-x: auto; }
.groupe-actions { display: grid; gap: 4px; align-content: start; }
.groupe-actions > span { font-size: 13px; color: var(--texte-faible); padding-left: 2px; }
.groupe-actions > div { display: flex; gap: 6px; }
.action {
  position: relative; width: 87px; min-height: 92px; display: grid; justify-items: start; align-content: start; gap: 1px;
  text-align: left; padding: 9px 9px 8px; border-radius: var(--r-bouton);
  background: var(--prusse-700); border: 1px solid var(--ligne);
  transition: background .15s, border-color .15s, transform .1s;
}
.action:hover { background: var(--prusse-600); }
.action:active { transform: translateY(1px); }
.action svg { width: 26px; height: 26px; color: var(--laiton); margin-bottom: 4px; }
.action .an { font-weight: 700; font-size: 14px; line-height: 1.15; }
.action .as { font-size: 12px; color: var(--texte-doux); line-height: 1.25; }
.action .touche { position: absolute; top: 7px; right: 7px; }
.action.en-visee { border-color: var(--lanterne); box-shadow: 0 0 0 1px var(--lanterne), 0 0 16px rgba(245,185,65,.35); }
.action.indispo { opacity: .42; }
.action.indispo:hover { background: var(--prusse-700); }
.action.depense::after {
  content: attr(data-raison); position: absolute; left: 6px; right: 6px; bottom: 6px;
  font-size: 11.5px; color: var(--texte); background: rgba(12,24,36,.85); border-radius: 5px; padding: 1px 5px; text-align: center;
}
.action.depense { opacity: .55; filter: grayscale(.7); }
.action.hs { border-color: rgba(242,112,95,.6); }
.action.hs svg { color: var(--debuff); }
.action.actif-buff { border-color: rgba(127,207,138,.55); }
.action.actif-buff svg { color: var(--buff); }
.val-buff { color: var(--buff) !important; }
.val-debuff { color: var(--debuff) !important; }
.val-force { color: var(--laiton) !important; }

/* Barre MJ */
.barre-mj { display: flex; gap: 14px; padding: 10px 14px 12px; min-width: 0; }
.mj-bloc { display: grid; gap: 7px; align-content: start; min-width: 0; }
.mj-bloc h5 { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--texte); display: flex; gap: 8px; align-items: baseline; }
.mj-bloc h5 small { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--texte-faible); }
.mj-sel { flex: 0 0 290px; }
.mj-arb { flex: 1 1 auto; border-left: 1px solid var(--ligne-douce); padding-left: 14px; }
.ligne-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.ligne-form .lib { color: var(--texte-doux); min-width: 128px; }
.ligne-form input, .ligne-form select {
  background: var(--prusse-950); border: 1px solid var(--ligne); border-radius: 7px; padding: 4px 8px; font-size: 14px;
}
.ligne-form input.large { width: 220px; }
.ligne-form input.court { width: 60px; }
.apercu { font-size: 13px; color: var(--texte-faible); }
.etats-livre { display: flex; gap: 4px; flex-wrap: wrap; }
.sel-stats { display: flex; gap: 14px; font-size: 14px; color: var(--texte-doux); }
.sel-stats b { color: var(--texte); font-size: 16px; }
.pv-plus { display: inline-flex; gap: 3px; }

/* ---------------------------------------------------------------- */
/* Colonne de droite : groupe + journal                              */
/* ---------------------------------------------------------------- */
#cote { grid-area: cote; display: flex; flex-direction: column; background: var(--prusse-800); border-left: 1px solid var(--ligne-douce); min-height: 0; }
.cote-bloc { padding: 12px 14px; border-bottom: 1px solid var(--ligne-douce); }
.cote-bloc h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.cote-bloc h4 small { font-family: var(--sans); font-weight: 400; color: var(--texte-faible); font-size: 13px; }
.allie { display: grid; grid-template-columns: 30px 1fr 64px; gap: 9px; align-items: center; padding: 4px 0; font-size: 14px; }
.allie .rond { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: #161616; font-size: 13px; }
.allie .n { line-height: 1.15; }
.allie .n small { display: block; color: var(--texte-faible); font-size: 12.5px; }
.allie .jauge { height: 7px; margin-top: 3px; }
.allie .v { text-align: right; color: var(--texte-doux); font-size: 13.5px; }
.allie.mon-tour .n { color: var(--lanterne); }

.ambiance .piste { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 1px 0; font-size: 14px; }
.ambiance .piste button.lecture { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--prusse-700); display: grid; place-items: center; padding: 0; }
.ambiance .piste.joue { color: var(--lanterne); }
.ambiance .piste.joue button.lecture { border-color: var(--lanterne); }
.ambiance .piste svg { width: 12px; height: 12px; }
.ambiance .piste .d { color: var(--texte-faible); font-size: 13px; }
.progression { height: 3px; background: var(--prusse-950); border-radius: 3px; overflow: hidden; grid-column: 2 / 4; }
.progression i { display: block; height: 100%; width: 0; background: var(--lanterne); animation: prog 60s linear infinite; }
@keyframes prog { to { width: 100%; } }
.ambiance .sfx { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.ambiance .vol { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--texte-faible); margin-top: 6px; }
.ambiance .vol input { flex: 1; accent-color: var(--laiton); }

#journal { flex: 1 1 0; overflow-y: auto; padding: 8px 14px 10px; min-height: 0; scroll-behavior: smooth; }
.j-tour { text-align: center; font-family: var(--serif); color: var(--texte-faible); font-size: 14.5px; margin: 10px 0 6px; }
.j-ligne { padding: 7px 0; border-bottom: 1px solid rgba(51,84,115,.35); font-size: 14.5px; }
.j-ligne .qui { font-weight: 700; }
.j-ligne .heure { float: right; color: var(--texte-faible); font-size: 12px; }
.j-ligne.mj .qui { color: var(--laiton); }
.j-ligne.narr { font-family: var(--serif); font-style: italic; color: var(--texte); font-size: 15.5px; }
.j-ligne.sys { color: var(--texte-doux); font-size: 13.5px; }
.j-ligne.annule .corps { text-decoration: line-through; opacity: .55; }
.j-ligne .annule-msg { color: var(--laiton); font-size: 13px; }
.j-ligne.secret { border-left: 2px dashed var(--laiton); padding-left: 8px; }
.j-des { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.mini-de { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 6px; font-family: var(--serif); font-weight: 800; font-size: 15px; }
.mini-de.blanc { background: #f1ece1; color: #1d2a38; }
.mini-de.poudre { background: #1b1714; color: var(--poudre); box-shadow: inset 0 0 0 2px var(--poudre); }
.mini-de.dm { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px var(--ligne); font-size: 14px; }
.mini-de.max { box-shadow: inset 0 0 0 2px var(--lanterne); }
.res-ok { color: var(--buff); font-weight: 700; }
.res-ko { color: var(--debuff); font-weight: 700; }
.res-attente { color: var(--lanterne); font-weight: 700; }
.res-gros { color: var(--lanterne); font-weight: 800; font-family: var(--serif); font-size: 16px; }
.j-corr { display: flex; gap: 12px; margin-top: 5px; font-size: 13px; flex-wrap: wrap; }
.j-corr button { border: 0; background: transparent; padding: 0; color: var(--texte-doux); text-decoration: underline; text-decoration-color: var(--ligne); text-underline-offset: 3px; }
.j-corr button:hover { color: var(--lanterne); text-decoration-color: var(--lanterne); }
.j-corr input { width: 54px; background: var(--prusse-950); border: 1px solid var(--lanterne); border-radius: 6px; padding: 1px 6px; }
.valider { display: flex; gap: 6px; margin-top: 6px; }
.def-mj { color: var(--laiton); font-size: 13px; }

.saisie { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--ligne-douce); }
.saisie input { flex: 1; background: var(--prusse-950); border: 1px solid var(--ligne); border-radius: 9px; padding: 9px 12px; min-width: 0; }
.saisie input:focus { border-color: var(--laiton); outline: none; }

/* ---------------------------------------------------------------- */
/* Fiche (papier)                                                    */
/* ---------------------------------------------------------------- */
#fiche {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 15; width: min(720px, 100%);
  background: var(--papier); color: var(--encre); box-shadow: 14px 0 40px rgba(4,10,18,.6);
  display: grid; grid-template-rows: auto minmax(0,1fr); animation: fiche-in .3s cubic-bezier(.2,.9,.3,1);
  font-family: var(--serif);
}
@keyframes fiche-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.fiche-tete { display: flex; align-items: center; gap: 14px; padding: 18px 24px 14px; border-bottom: 1px solid rgba(36,38,45,.15); }
.fiche-tete .portrait { width: 54px; height: 54px; font-size: 24px; box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px #8b6b2a; }
.fiche-tete h2 { margin: 0; font-size: 25px; line-height: 1.1; font-weight: 700; }
.fiche-tete p { margin: 2px 0 0; font-family: var(--sans); font-size: 14.5px; color: var(--encre-douce); }
.fiche-tete .droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.seg-papier { display: inline-flex; border: 1px solid rgba(36,38,45,.3); border-radius: 10px; overflow: hidden; font-family: var(--sans); }
.seg-papier button { border: 0; background: transparent; padding: 7px 14px; font-size: 14.5px; color: var(--encre-douce); }
.seg-papier button.on { background: var(--encre); color: var(--papier); }
.fermer { border: 1px solid rgba(36,38,45,.3); background: transparent; border-radius: 9px; padding: 6px 11px; font-family: var(--sans); color: var(--encre); }
.fiche-corps { overflow-y: auto; padding: 16px 24px 30px; }
.fiche-corps h3 { font-size: 19px; margin: 18px 0 8px; font-weight: 700; }
.fiche-corps h3:first-child { margin-top: 2px; }
.bandeau-modif { font-family: var(--sans); font-size: 14px; background: #fbe7b8; color: #5a3d06; padding: 8px 12px; border-radius: 9px; margin-bottom: 6px; }
.caracs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.carac { background: var(--papier-2); border-radius: 10px; padding: 7px 6px 6px; text-align: center; }
.carac .k { font-family: var(--sans); font-size: 13px; color: var(--encre-douce); }
.carac .v { font-size: 26px; font-weight: 800; line-height: 1.1; }
.carac .m { font-family: var(--sans); font-size: 13.5px; color: var(--encre-douce); }
.carac input { width: 54px; text-align: center; font-size: 22px; font-weight: 800; font-family: var(--serif); background: #fffaf0; border: 1px solid #b8a983; border-radius: 6px; }
.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.score { background: var(--papier-2); border-radius: 10px; padding: 8px 10px; cursor: help; border: 1px solid transparent; }
.score:hover { border-color: rgba(36,38,45,.3); }
.score .k { font-family: var(--sans); font-size: 13px; color: var(--encre-douce); }
.score .v { font-size: 28px; font-weight: 800; line-height: 1.1; }
.score .d { font-family: var(--sans); font-size: 12.5px; color: var(--encre-douce); }
.score .v.val-buff { color: #2f8a3e !important; }
.score .v.val-debuff { color: #c0392b !important; }
.score .v.val-force { color: #8b6b2a !important; }
.fiche-corps table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14.5px; }
.fiche-corps th { text-align: left; font-weight: 500; color: var(--encre-douce); font-size: 13px; padding: 4px 6px; border-bottom: 1px solid rgba(36,38,45,.2); }
.fiche-corps td { padding: 6px; border-bottom: 1px solid rgba(36,38,45,.1); vertical-align: top; }
.fiche-corps td.nom { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.btn-papier { border: 1px solid var(--encre); background: var(--encre); color: var(--papier); border-radius: 7px; padding: 3px 10px; font-size: 13.5px; font-family: var(--sans); }
.btn-papier:disabled { opacity: .35; }
.voie { font-family: var(--sans); font-size: 14.5px; display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid rgba(36,38,45,.1); }
.voie b { font-family: var(--serif); font-size: 15.5px; }
.voie .r { color: var(--encre-douce); font-size: 13px; }
.tag-l { display: inline-block; font-size: 12px; border: 1px solid currentColor; border-radius: 5px; padding: 0 4px; margin-left: 4px; color: #8b6b2a; }
.notes textarea { width: 100%; min-height: 110px; border: 1px solid #c9bc9b; background: #fffaf0; border-radius: 9px; padding: 10px 12px; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--encre); resize: vertical; }
.notes .aide { font-family: var(--sans); font-size: 13px; color: var(--encre-douce); }
.modif-ligne { display: flex; gap: 10px; align-items: center; font-family: var(--sans); font-size: 15px; padding: 5px 0; }
.modif-ligne select, .modif-ligne input[type=number] { font-family: var(--sans); font-size: 15px; background: #fffaf0; border: 1px solid #b8a983; border-radius: 6px; padding: 2px 6px; }
.effets-fiche { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--sans); }
.effets-fiche .effet.buff { color: #2f8a3e; border-color: #2f8a3e; background: rgba(47,138,62,.08); }
.effets-fiche .effet.debuff { color: #c0392b; border-color: #c0392b; background: rgba(192,57,43,.06); }
.effets-fiche .effet .t { color: var(--encre-douce); }
.rappel { font-size: 16px; line-height: 1.5; }
.rappel li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- */
/* Infobulle de provenance                                           */
/* ---------------------------------------------------------------- */
#bulle {
  position: fixed; z-index: 100; pointer-events: none; min-width: 230px; max-width: 320px;
  background: #0f1c29; color: var(--texte); border: 1px solid var(--ligne); border-radius: 11px;
  padding: 10px 12px; box-shadow: var(--ombre); font-size: 14px; font-family: var(--sans);
}
#bulle h6 { margin: 0 0 6px; font-family: var(--serif); font-size: 16px; font-weight: 700; }
#bulle .t { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
#bulle .t span:last-child { font-variant-numeric: tabular-nums; }
#bulle .t.buff { color: var(--buff); }
#bulle .t.debuff { color: var(--debuff); }
#bulle .t.force { color: var(--laiton); }
#bulle .t.total { border-top: 1px solid var(--ligne); margin-top: 4px; padding-top: 5px; font-weight: 700; }
#bulle p { margin: 4px 0 0; color: var(--texte-doux); font-size: 13.5px; }

/* ---------------------------------------------------------------- */
/* Palette Ctrl+K                                                    */
/* ---------------------------------------------------------------- */
#palette { position: fixed; inset: 0; z-index: 90; background: rgba(8,16,26,.55); display: grid; justify-items: center; align-content: start; padding-top: 12vh; }
.pal-boite { width: min(600px, calc(100% - 32px)); background: var(--prusse-800); border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; }
.pal-boite input { width: 100%; border: 0; border-bottom: 1px solid var(--ligne-douce); background: transparent; padding: 15px 18px; font-size: 18px; outline: none; }
.pal-liste { max-height: 380px; overflow-y: auto; padding: 6px; }
.pal-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 15px; cursor: pointer; }
.pal-item small { color: var(--texte-faible); font-size: 13px; }
.pal-item.on { background: var(--prusse-600); }
.pal-vide { padding: 16px; color: var(--texte-faible); }
.pal-pied { padding: 8px 14px; border-top: 1px solid var(--ligne-douce); font-size: 13px; color: var(--texte-faible); }

/* Réglages */
#reglages { position: fixed; inset: 0; z-index: 80; background: rgba(8,16,26,.55); display: grid; place-items: center; }
.reg-boite { width: min(560px, calc(100% - 32px)); background: var(--prusse-800); border: 1px solid var(--ligne); border-radius: 14px; padding: 20px 22px; box-shadow: var(--ombre); }
.reg-boite h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 24px; }
.reg-boite > p { margin: 0 0 14px; color: var(--texte-doux); font-size: 14.5px; }
.reg-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ligne-douce); font-size: 15px; }

/* Toasts */
#toasts { position: fixed; z-index: 95; left: 50%; bottom: 190px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.toast { background: var(--prusse-700); border: 1px solid var(--ligne); color: var(--texte); padding: 8px 16px; border-radius: 999px; font-size: 14.5px; box-shadow: var(--ombre); animation: toast 3s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- */
/* Panneau démo (hors produit : volontairement d'un autre style)     */
/* ---------------------------------------------------------------- */
#demo {
  position: fixed; left: 12px; bottom: 12px; z-index: 120; width: 268px;
  background: #f4f1ff; color: #231c3d; border: 2px dashed #6b55c9; border-radius: 12px;
  font-family: var(--sans); font-size: 13.5px; box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
#demo.replie { width: auto; }
#demo .demo-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; cursor: pointer; font-weight: 700; color: #4b36a8; }
#demo .demo-corps { padding: 2px 10px 10px; display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; }
#demo.replie .demo-corps { display: none; }
#demo .g > span { display: block; color: #5f5880; font-size: 12.5px; margin-bottom: 3px; }
#demo .g > div { display: flex; gap: 4px; flex-wrap: wrap; }
#demo button { border: 1px solid #b7aaf0; background: #fff; color: #231c3d; border-radius: 7px; padding: 3px 8px; font-size: 13px; }
#demo button:hover { background: #ebe5ff; }
#demo button.on { background: #6b55c9; color: #fff; border-color: #6b55c9; }
#demo .astuce { color: #5f5880; font-size: 12.5px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 1480px) {
  :root { --cote: 320px; }
  .bloc-moi { flex-basis: 182px; }
  .bloc-tour { flex-basis: 172px; padding: 0 10px; }
  .barre-corps { gap: 10px; }
  .action { width: 78px; padding: 8px 7px 7px; }
  .action .as { font-size: 11.5px; }
}
@media (max-width: 1280px) {
  :root { --cote: 290px; }
  .action { width: 72px; }
  .marque-table span { display: none; }
}

/* Mot de passe de la démo : champ texte masqué en CSS pour que le navigateur ne propose pas de l'enregistrer. */
.champ input.masque { -webkit-text-security: disc; text-security: disc; }

/* Ambiance : transport, crédits */
.ambiance .nom-piste { color: var(--texte-faible); font-size: 12px; display: block; }
.ambiance .transport { display: flex; gap: 5px; margin-top: 7px; }
.ambiance .vol .num { min-width: 2ch; text-align: right; }
.ambiance .credits { margin-top: 8px; font-size: 12px; color: var(--texte-faible); }
.ambiance .credits summary { cursor: pointer; }
.ambiance .credits ul { margin: 4px 0 0; padding-left: 16px; }
.ambiance .credits a { color: inherit; }