/* Huile & Gravure : fresque sacrée qui saigne. Os et or pour le Serment, sang pour le combat, pourpre pour l'Ombre.
   Une seule source de lumière, grain de toile partout, hachures de gravure sur les boss. Voir Refonte/DA.md. */
:root {
  color-scheme: dark;
  --fond: #0B0809; --surface: #161012; --surface-2: #211619;
  --encre: #EDE3D1; --encre-att: #A8998A; --filet: #3B2A2E;
  --serment: #F0D9A0; --ombre: #C77BC0; --sang: #C8423A; --danger: #D4544A; --vie: #9DBF8E;
  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --texte: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --etiquette: "IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hachures: repeating-linear-gradient(115deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 4px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--encre); font: 400 1rem/1.5 var(--texte); -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse 70% 55% at 12% 92%, rgba(122, 46, 110, .26), transparent 70%),
    radial-gradient(ellipse 60% 50% at 95% 100%, rgba(158, 42, 43, .24), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% -8%, rgba(240, 217, 160, .12), transparent 70%),
    var(--fond);
  background-attachment: fixed;
}
/* Grain de toile sur tout l'écran. Sans mode de fusion : une couche plein écran en « overlay » au-dessus de tout
   obligeait à recomposer toute la page à chaque animation (tablette, Android) ; une faible opacité donne le même grain. */
body::after { content: ""; position: fixed; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; z-index: 40; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--serment); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; text-wrap: balance; }
.att { color: var(--encre-att); }
.or { color: var(--serment); }
.ombre { color: var(--ombre); }
.danger { color: var(--danger); }
.petit { font: 400 .82rem/1.2 var(--etiquette); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-att); }
.num { font-variant-numeric: lining-nums tabular-nums; }
svg.i { width: 1.1em; height: 1.1em; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 1px solid #F6E7BE; color: #1A0F0A;
  background: linear-gradient(180deg, #F8ECC8, #D9BC7C);
  box-shadow: 0 0 28px rgba(240, 217, 160, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
  font: 400 1.05rem/1 var(--etiquette); letter-spacing: .1em; text-transform: uppercase; border-radius: 2px;
}
.bouton:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.bouton.second { background: rgba(11, 8, 9, .6); color: var(--encre); border-color: var(--filet); box-shadow: none; }
.erreur-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2); border: 1px solid var(--danger); color: var(--encre); padding: 12px 18px; max-width: min(92vw, 520px); z-index: 50;
  width: max-content; pointer-events: none;
}
/* Sous la barre d'état et l'encoche de l'iPhone (zone sûre) */
.hors-ligne {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  background: var(--danger); color: var(--fond); text-align: center; font-weight: 600;
  padding: calc(6px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
}
.hors-ligne[hidden] { display: none; }
.hors-ligne-recharger {
  min-height: 36px; padding: 4px 14px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.hors-ligne-recharger[hidden] { display: none; }

/* ——— TABLE (tablette, lisible à 1 m) ——— */
body.table { font-size: 24px; }
.table-app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.table-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px; border-bottom: 1px solid var(--filet); }
.table-entete h1 { font-size: 1.3em; }
.jauge { display: flex; align-items: center; gap: 12px; color: var(--ombre); }
.jauge .crans { display: flex; gap: 5px; }
.jauge .cran { width: 22px; height: 22px; border: 1px solid var(--ombre); transform: rotate(45deg); }
.jauge .cran.plein { background: var(--ombre); }
.scene { padding: 32px; display: grid; align-content: start; gap: 24px; max-width: 1400px; width: 100%; margin: 0 auto; }
.scene .texte p { margin: 0 0 .6em; max-width: 40ch; }
.scene h2 { font-size: 2.4em; line-height: 1.05; }
.cadre { border: 1px solid var(--filet); background: linear-gradient(180deg, rgba(33, 22, 25, .9), rgba(18, 12, 14, .92)); padding: 28px 32px; position: relative; }
.cadre::after { content: ""; position: absolute; inset: 5px; border: .5px solid color-mix(in srgb, var(--serment) 40%, transparent); pointer-events: none; }
.accueil { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.accueil > img { width: min(42vh, 360px); height: auto; display: block; border: 10px solid var(--encre); }
.accueil .code { font: 600 3.2em/1 var(--titre); letter-spacing: .12em; color: var(--serment); }
.accueil .lien { font-size: .7em; color: var(--encre-att); word-break: break-all; }
/* Salon de la Table : chaque joueur montre son cadre et ses dés */
.accueil-joueurs { display: flex; flex-wrap: wrap; gap: 14px 18px; list-style: none; padding: 0; margin: 12px 0 0; }
.accueil-joueur { display: grid; justify-items: center; gap: 7px; width: 92px; text-align: center; }
.accueil-nom { font-size: .72em; line-height: 1.15; overflow-wrap: anywhere; }
.accueil-des { gap: 4px; justify-content: center; }
.accueil-des .de6 { --taille: 20px; }
.accueil-perso { margin-top: 12px; font-size: .6em; }
.accueil-perso b { color: var(--serment); font-weight: 600; }
.boss-panneau { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: end; }
.boss-panneau h2 { color: var(--serment); }
.barre { height: 18px; background: var(--surface-2); border: 1px solid var(--filet); grid-column: 1 / -1; }
.barre > span { display: block; height: 100%; background: var(--danger); transition: width .4s ease-out; }
.stats-boss { display: flex; gap: 28px; flex-wrap: wrap; font-size: .85em; }
.consigne { font: italic 500 1.3em/1.3 var(--titre); color: var(--encre); }
.joueurs-bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--filet); position: sticky; bottom: 0; background: var(--fond); padding-bottom: env(safe-area-inset-bottom, 0px); }
.joueur-col { padding: 18px 20px; border-right: 1px solid var(--filet); display: grid; gap: 4px; align-content: start; position: relative; }
.joueur-col:last-child { border-right: 0; }
.joueur-col .nom { font: 600 1.15em/1.1 var(--titre); }
.joueur-col .pv { font: 600 2em/1 var(--texte); font-variant-numeric: tabular-nums; }
.joueur-col .pv small { font-size: .45em; color: var(--encre-att); font-weight: 400; }
.joueur-col.a-terre { opacity: .45; }
.joueur-col .etat { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.joueur-col .pret { position: absolute; top: 14px; right: 16px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--filet); }
.joueur-col .pret.oui { background: var(--serment); border-color: var(--serment); }
.joueur-col .hors { color: var(--danger); font-size: .55em; }
.repartition { font-size: .7em; color: var(--encre-att); }
.des { display: flex; gap: 6px; flex-wrap: wrap; }
.de { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--filet); font: 600 .75em/1 var(--texte); font-variant-numeric: tabular-nums; }
.de.ok { border-color: var(--serment); color: var(--serment); }
.de.def { border-radius: 50%; }
.bilan-ligne { font-size: .65em; color: var(--encre-att); }
.bilan-ligne b { color: var(--encre); }
.actions-table { display: flex; gap: 16px; flex-wrap: wrap; }
.revelation { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.revelation .cadre { padding: 18px 22px; }
@media (max-width: 900px) { body.table { font-size: 18px; } .accueil { grid-template-columns: 1fr; } }

/* ——— MAIN (téléphone, une action par écran, fond noir discret) ——— */
body.main { background: #000; font-size: 17px; }
.main-app { min-height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.main-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.main-entete .nom { font: 600 1.25rem/1.1 var(--titre); }
.main-entete .pv { font: 600 1.4rem/1 var(--texte); font-variant-numeric: tabular-nums; }
.ecran { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 0 16px; }
.ecran h2 { font-size: 1.7rem; }
.ecran p { margin: 0; }
.pied { position: sticky; bottom: 0; background: #000; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; border-top: 1px solid var(--filet); }
.pied .bouton { width: 100%; }
/* Pied collant : l'élément focalisé (VoiceOver, clavier, scrollIntoView) ne passe pas dessous */
html:has(.pied) { scroll-padding-bottom: 150px; }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.onglets button { min-height: 44px; background: transparent; border: 1px solid var(--filet); color: var(--encre-att); font: 600 .78rem/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; }
.onglets button[aria-pressed="true"] { color: var(--encre); border-color: var(--encre-att); }
.choix { display: grid; gap: 8px; }
.choix button {
  min-height: 52px; text-align: left; padding: 10px 14px; background: var(--surface); border: 1px solid var(--filet); color: var(--encre);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.choix button[aria-pressed="true"] { border-color: var(--serment); box-shadow: inset 0 0 0 1px var(--serment); }
.choix button .att { font-size: .85em; }
.choix button.trahison[aria-pressed="true"] { border-color: var(--ombre); box-shadow: inset 0 0 0 1px var(--ombre); }
.groupe { display: grid; gap: 8px; }
.compteur { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--filet); }
.compteur button { width: 48px; height: 48px; background: var(--surface-2); border: 1px solid var(--filet); font-size: 1.4rem; }
.compteur output { min-width: 2ch; text-align: center; font: 600 1.6rem/1 var(--texte); font-variant-numeric: tabular-nums; }
.saisie-de { display: grid; gap: 6px; }
.saisie-de .faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.saisie-de .faces button { aspect-ratio: 1; min-height: 44px; background: var(--surface); border: 1px solid var(--filet); font: 600 1.25rem/1 var(--texte); }
.saisie-de .faces button[aria-pressed="true"] { background: var(--encre); color: #000; border-color: var(--encre); }
.attente { margin: auto 0; text-align: center; display: grid; gap: 10px; color: var(--encre-att); }
.attente .grand { font: 600 1.6rem/1.2 var(--titre); color: var(--encre); }
.fiche { display: grid; gap: 14px; }
.fiche .bloc { background: var(--surface); border: 1px solid var(--filet); padding: 14px; display: grid; gap: 6px; }
.fiche .bloc p { font-size: .95rem; }
.secret-btn { min-height: 64px; background: var(--surface); border: 1px dashed var(--filet); color: var(--encre-att); user-select: none; -webkit-user-select: none; touch-action: none; }
.messages { display: grid; gap: 6px; font-size: .95rem; }
.messages p { padding-left: 10px; border-left: 2px solid var(--filet); }
.objet { display: grid; gap: 2px; }
.objet .nom-objet { font-weight: 600; }
.formulaire { display: grid; gap: 12px; margin-top: auto; }
.formulaire input { min-height: 56px; padding: 0 14px; background: var(--surface); border: 1px solid var(--filet); color: var(--encre); font: inherit; font-size: 1.1rem; }

/* ——— Dés à points ——— */
.de6 {
  --taille: 44px;
  width: var(--taille); height: var(--taille); display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--taille) * .14); gap: calc(var(--taille) * .04);
  background: var(--encre); border-radius: calc(var(--taille) * .18); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  flex: none;
}
.de6 i { display: block; border-radius: 50%; }
.de6 i.p { background: #121014; }
.de6.ok { background: var(--serment); outline: 2px solid var(--serment); outline-offset: 2px; }
.de6.rate { opacity: .4; }
.de6.roule { animation: rouler .28s linear infinite; }
.de6.pose { animation: poser .35s ease-out; }
.de6.petit { --taille: 30px; }
.de6.grand { --taille: 64px; }
@keyframes rouler {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -6px) rotate(90deg); }
  50% { transform: translate(-2px, -2px) rotate(180deg); }
  75% { transform: translate(-4px, -7px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes poser { 0% { transform: scale(1.25); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
.rangee-des { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.coup { font: 600 1.1em/1 var(--texte); font-variant-numeric: tabular-nums; animation: apparaitre .4s ease-out both; animation-delay: .9s; }
.coup.degats { color: var(--serment); }
.coup.subis { color: var(--danger); }
.coup.pare { color: var(--vie); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.secousse { animation: secousse .45s ease-in-out 1s; }
@keyframes secousse { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ——— Jauge sur 20 à trois paliers ——— */
.jauge20 { position: relative; display: block; height: 10px; background: var(--surface-2); border: 1px solid var(--filet); }
.jauge20 .remplie { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) / 20 * 100%); background: var(--serment); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.jauge20.def .remplie { background: var(--encre-att); }
.jauge20.vide .remplie { width: 0; }
.jauge20 .palier { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--encre); opacity: .6; }

/* ——— Temps de combat ——— */
.temps { display: flex; gap: 8px; align-items: center; }
.temps span { padding: 6px 12px; border: 1px solid var(--filet); font: 600 .6em/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-att); }
.temps span.actif { border-color: var(--serment); color: var(--serment); }
.resultats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.resultat-joueur { display: grid; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--filet); }
.resultat-joueur .tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.resultat-joueur .tete b { font: 600 1.1em/1 var(--titre); }
.badge-pari { font: 600 .6em/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-att); border: 1px solid var(--filet); padding: 5px 8px; }

/* ——— Révélation (Table) ——— */
.revelations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.carte-classe { perspective: 900px; min-height: 260px; }
.carte-classe .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--filet); background: var(--surface); padding: 20px; display: grid; gap: 10px; align-content: start; }
.carte-classe .interieur { position: relative; height: 100%; min-height: 260px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.carte-classe.tournee .interieur { transform: rotateY(180deg); }
.carte-classe .dos { display: grid; place-items: center; align-content: center; color: var(--serment); }
.carte-classe .dos svg { width: 72px; height: 72px; }
.carte-classe .recto { transform: rotateY(180deg); }
.carte-classe .recto h3 { font-size: 1.3em; color: var(--serment); }
.stat-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: .75em; }
.stat-ligne .num { font-weight: 600; min-width: 2ch; text-align: right; }

/* ——— Révélation (Main) ——— */
body.main .carte-classe { min-height: 0; flex: 1; display: flex; }
body.main .carte-classe .interieur { width: 100%; min-height: 420px; }
body.main .carte-classe .face { padding: 22px; gap: 14px; }
body.main .carte-classe .recto h3 { font-size: 1.8rem; }
body.main .stat-ligne { font-size: 1rem; }
.stat-bloc { display: grid; gap: 6px; }
.stat-bloc .des-stat { display: flex; gap: 6px; min-height: 30px; }
.stat-bloc .des-stat .de6 { animation: apparaitre .35s ease-out both; }

/* ——— Choix du pari (Main) ——— */
.paris { display: grid; gap: 8px; }
.paris button { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; text-align: left; min-height: 64px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--filet); color: var(--encre); }
.paris button[aria-pressed="true"] { border-color: var(--serment); box-shadow: inset 0 0 0 1px var(--serment); }
.paris .chiffre { font: 600 2rem/1 var(--titre); text-align: center; color: var(--serment); }
.paris .detail { font-size: .85rem; color: var(--encre-att); display: grid; gap: 2px; }
.paris .detail b { color: var(--encre); font-weight: 600; }
.zone-lancer { display: flex; gap: 12px; justify-content: center; padding: 18px 0; min-height: 100px; align-items: center; }

/* ——— Huile & Gravure : toiles peintes ——— */
/* Un panneau peint : --art = toile générée par peinture.js ; un dégradé garde le texte lisible */
.peint { background-image: linear-gradient(90deg, rgba(11, 8, 9, .94) 0%, rgba(11, 8, 9, .72) 45%, rgba(11, 8, 9, .15) 100%), var(--art); background-size: cover; background-position: center; }
.peint.bas { background-image: linear-gradient(0deg, rgba(11, 8, 9, .96) 0%, rgba(11, 8, 9, .6) 45%, rgba(11, 8, 9, .05) 80%), var(--art); }
/* Boss : la toile passe sous des hachures de gravure */
.gravure { background-image: var(--hachures), linear-gradient(90deg, rgba(11, 8, 9, .95) 0%, rgba(11, 8, 9, .7) 50%, rgba(11, 8, 9, .25) 100%), var(--art); background-size: auto, cover, cover; background-position: center; border-color: rgba(200, 66, 58, .45); }
.gravure h2 { color: var(--encre); text-shadow: 0 0 24px rgba(200, 66, 58, .55); }
.gravure .barre > span { background: linear-gradient(90deg, #6E1416, var(--sang)); box-shadow: 0 0 12px rgba(200, 66, 58, .6); }
.table-entete { position: relative; background: linear-gradient(180deg, rgba(11, 8, 9, .9), rgba(11, 8, 9, .6)); }
.table-entete h1 { font-weight: 500; letter-spacing: .02em; }
.table-entete h1 .or { font-style: italic; text-shadow: 0 0 18px rgba(240, 217, 160, .35); }
/* Rayon de lumière vertical : signature du Serment */
.jauge .cran { border-color: rgba(199, 123, 192, .7); }
.jauge .cran.plein { background: linear-gradient(135deg, #D07BC8, #7A2E6E); box-shadow: 0 0 10px rgba(199, 123, 192, .6); }
.joueurs-bande { background: linear-gradient(0deg, rgba(11, 8, 9, .97), rgba(11, 8, 9, .85)); }
.resultat-joueur { background: linear-gradient(180deg, rgba(33, 22, 25, .9), rgba(18, 12, 14, .9)); }
.de6 { background: linear-gradient(160deg, #F4ECDD, #D8CBB4); }
.de6 i.p { background: #2A1414; }
.de6.ok { background: linear-gradient(160deg, #FBF0CC, #E2C27E); outline-color: var(--serment); box-shadow: 0 0 16px rgba(240, 217, 160, .55); }
.carte-classe .face { background-size: cover; background-position: center; border-color: rgba(240, 217, 160, .25); }
.carte-classe .dos { box-shadow: inset 0 0 60px rgba(0, 0, 0, .7); }
.carte-classe .recto h3 { text-shadow: 0 0 20px rgba(0, 0, 0, .9); }
.fin-toile { min-height: 46vh; display: grid; align-content: end; }
.fin-toile h2 { font-size: 3.4em; font-style: italic; }
body.main { background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(240, 217, 160, .06), transparent 70%), #000; }
body.main .paris button[aria-pressed="true"], body.main .choix button[aria-pressed="true"] { background: linear-gradient(90deg, rgba(240, 217, 160, .1), transparent); }
/* Le rayon de lumière passe derrière le contenu ; les cartes de classe laissent la place aux stats */
.scene, .joueurs-bande { position: relative; z-index: 1; }
body.table .carte-classe, body.table .carte-classe .interieur { min-height: 400px; }
.carte-classe .face { overflow: hidden; }
/* Bandeau des annonces publiques (Actifs, Serments rompus) */
.annonces { position: relative; z-index: 2; display: grid; gap: 2px; padding: 10px 32px; background: linear-gradient(90deg, rgba(240, 217, 160, .12), transparent 70%); border-bottom: 1px solid rgba(240, 217, 160, .25); font: italic 500 .8em/1.3 var(--titre); color: var(--serment); }
.annonces p { margin: 0; }
.annonces p:not(:last-child) { opacity: .55; }
.table-entete > .petit { flex: 1; text-align: center; }
.carte-classe.prete .face { border-color: var(--serment); box-shadow: 0 0 24px rgba(240, 217, 160, .25), inset 0 0 60px rgba(0, 0, 0, .7); }
.carte-classe .dos { gap: 8px; }
.carte-classe .dos .petit { text-align: center; text-wrap: balance; }
.boss-defi { min-height: 48vh; display: grid; align-content: end; }
.boss-defi h2 { font-size: 3em; }
.revelation .cadre.peint { min-height: 180px; display: grid; align-content: end; }
/* Choix de quête et défi sur le téléphone */
.option-quete { display: grid; gap: 4px; }
.option-quete small { color: var(--encre-att); font-size: .85rem; }
.offre-secrete { border: 1px dashed rgba(199, 123, 192, .6); padding: 12px; display: grid; gap: 8px; background: rgba(122, 46, 110, .12); }
.etats { display: flex; flex-wrap: wrap; gap: 6px; }
.etats span { font: 400 .8rem/1 var(--etiquette); letter-spacing: .06em; padding: 5px 8px; border: 1px solid var(--filet); color: var(--encre-att); }

/* ——— Paris lisibles ——— */
.paris .detail { gap: 6px; }
.paris .gains { display: grid; gap: 3px; }
.paris .gain { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; background: rgba(240, 217, 160, .06); border-left: 2px solid rgba(240, 217, 160, .3); }
.paris .gain b { color: var(--serment); font-variant-numeric: tabular-nums; white-space: nowrap; }
.saisie-de .faces button.face-ok { border-color: rgba(240, 217, 160, .5); }
.saisie-de .faces button:not(.face-ok) { opacity: .5; }
.total-direct { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border: 1px solid var(--filet); background: var(--surface); opacity: .35; transition: opacity .2s; }
.total-direct.visible { opacity: 1; border-color: rgba(240, 217, 160, .5); }
.total-direct b { font: 600 1.6rem/1 var(--titre); color: var(--serment); }
.ligne-coup { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ligne-coup .att { font-size: .6em; }

/* ——— Actif prêt : bannière qui respire ——— */
.banniere-actif { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--serment); background: linear-gradient(110deg, rgba(240, 217, 160, .16), rgba(122, 46, 110, .12)); color: var(--encre); animation: respire 2.4s ease-in-out infinite; }
.banniere-actif .nom-actif { font: 600 1.35rem/1.1 var(--titre); color: var(--serment); }
.banniere-actif .att { font-size: .85rem; }
@keyframes respire { 0%, 100% { box-shadow: 0 0 0 rgba(240, 217, 160, 0); } 50% { box-shadow: 0 0 22px rgba(240, 217, 160, .35); } }
.bloc.passif { border-color: rgba(199, 123, 192, .5); }

/* ——— Passifs et Actifs qui se déclenchent : carte qui tombe du haut ——— */
.pile-evenements { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline: 12px; display: grid; gap: 8px; z-index: 70; pointer-events: none; }
.carte-evenement { display: grid; gap: 3px; padding: 12px 14px; background: linear-gradient(180deg, #1D1416, #120C0E); border: 1px solid var(--serment); box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 24px rgba(240, 217, 160, .25); animation: tomber .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.carte-evenement.passif { border-color: var(--ombre); box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 24px rgba(199, 123, 192, .3); }
.carte-evenement b { font: 600 1.2rem/1.1 var(--titre); color: var(--serment); }
.carte-evenement.passif b { color: var(--ombre); }
.carte-evenement > span:last-child { font-size: .9rem; }
.carte-evenement.sortie { animation: remonter .5s ease-in both; }
@keyframes tomber { from { opacity: 0; transform: translateY(-30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes remonter { to { opacity: 0; transform: translateY(-20px); } }
@media (prefers-reduced-motion: reduce) { .banniere-actif, .carte-evenement, .carte-evenement.sortie { animation: none; } }

/* ——— Splash art : gravure de Doré passée en noir et blanc, teintée selon l'humeur, qui arrive comme un coup de théâtre ——— */
[data-illu] { isolation: isolate; overflow: hidden; background-image: none !important; }
[data-illu]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--voile, linear-gradient(90deg, rgba(11, 8, 9, .96) 0%, rgba(11, 8, 9, .7) 38%, rgba(11, 8, 9, .08) 75%)), var(--img) center 30% / cover no-repeat, #0B0809;
  filter: grayscale(1) sepia(var(--sepia, .4)) hue-rotate(var(--teinte, 0deg)) saturate(var(--sat, 1)) contrast(1.28) brightness(.92);
  transform-origin: 70% 40%;
  animation: derive 28s ease-in-out infinite alternate;
}
[data-illu="sang"] { --sepia: 1; --teinte: -28deg; --sat: 3.2; }
[data-illu="ombre"] { --sepia: 1; --teinte: 245deg; --sat: 2.4; }
[data-illu="lumiere"] { --sepia: .7; --teinte: -8deg; --sat: 1.3; }
[data-illu="cendre"] { --sepia: .45; --teinte: -10deg; --sat: .8; }
/* Gravure déjà teintée par outils/variantes-images.mjs (illustrations/teintes/) : plus de filtre à recalculer */
[data-illu][data-preteint]::before { filter: none; }
/* Boutique ouverte par-dessus la partie (profil.js, ouvrirBoutique) : l'écran du dessous ne s'anime plus */
.sous-voile #app *, .sous-voile #app *::before, .sous-voile #app *::after { animation-play-state: paused !important; }
/* Première apparition : zoom et flou qui se dissipent, titre qui se grave */
[data-illu][data-neuf]::before { animation: entree-splash 1.6s cubic-bezier(.2, .7, .2, 1) both, derive 28s ease-in-out 1.6s infinite alternate; }
[data-illu][data-neuf] h2 { animation: titre-grave 1.1s cubic-bezier(.2, .7, .2, 1) .35s both; }
[data-illu][data-neuf] h2 ~ *, [data-illu][data-neuf] .petit { animation: apparaitre .6s ease-out .9s both; }
@keyframes entree-splash { from { opacity: 0; transform: scale(1.22); filter: grayscale(1) blur(10px) brightness(.4); } }
@keyframes derive { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes titre-grave { from { opacity: 0; letter-spacing: .25em; transform: translateY(12px); text-shadow: 0 0 40px rgba(240, 217, 160, .9); } }
/* Grands formats : boss, défi, fin, récits */
.splash-grand { min-height: min(68vh, 640px); display: grid; align-content: end; }
.splash-grand h2 { font-size: clamp(2.6em, 6vw, 4.2em); text-shadow: 0 2px 30px rgba(0, 0, 0, .9); }
.gravure[data-illu] { --voile: var(--hachures), linear-gradient(90deg, rgba(11, 8, 9, .95) 0%, rgba(11, 8, 9, .65) 45%, rgba(11, 8, 9, .1) 85%); }
.bas[data-illu], .fin-toile[data-illu] { --voile: linear-gradient(0deg, rgba(11, 8, 9, .97) 0%, rgba(11, 8, 9, .55) 45%, rgba(11, 8, 9, .05) 80%); }
.carte-classe .face[data-illu] { position: absolute; }
/* Le haut de la carte reste assez sombre pour lire « Chevalier · 21 PV » sur un ciel clair */
.carte-classe .recto[data-illu] { --voile: linear-gradient(0deg, rgba(11, 8, 9, .98) 0%, rgba(11, 8, 9, .9) 55%, rgba(11, 8, 9, .4) 80%, rgba(11, 8, 9, .78) 100%); }
.credit { position: absolute; right: 10px; bottom: 6px; font: 400 .5em/1 var(--etiquette); color: rgba(237, 227, 209, .45); letter-spacing: .06em; z-index: 1; }
@media (prefers-reduced-motion: reduce) { [data-illu]::before, [data-illu][data-neuf]::before, [data-illu][data-neuf] h2 { animation: none; } }

/* Ce que la quête révèle à tous (jets, élus…) */
.info-quete { margin-top: 10px; font: italic 600 1.15em/1.35 var(--titre, serif); color: var(--or, #d8b26a); text-shadow: 0 2px 12px rgba(0,0,0,.8); }


/* Téléphone : bandeau gravé en tête de chaque écran */
.bandeau { position: relative; min-height: 132px; margin: 0 -16px 14px; padding: 18px 16px 14px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid rgba(216, 178, 106, .25); }
.bandeau[data-illu] { --voile: linear-gradient(0deg, rgba(11, 8, 9, .96) 0%, rgba(11, 8, 9, .55) 45%, rgba(11, 8, 9, .1) 100%); }
.bandeau[data-illu]::before { background-position: center, center 28%; }
.bandeau-titre { font: 600 1.45rem/1.15 'Cormorant Garamond', serif; color: var(--encre, #ECE4D6); text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.bandeau .barre { margin-top: 8px; }
.bandeau-pv { margin-top: 4px; font-size: .8rem; color: var(--or, #d8b26a); }
.bandeau .barre > span { background: linear-gradient(90deg, #6E1416, var(--sang)); box-shadow: 0 0 12px rgba(200, 66, 58, .6); }
.accueil[data-illu] { --voile: linear-gradient(90deg, rgba(11, 8, 9, .96) 0%, rgba(11, 8, 9, .84) 58%, rgba(11, 8, 9, .3) 100%); }

/* Prescience de Kealhin */
.vision-quete { border-top: 1px solid var(--filet); padding: 10px 0; }
.vision-quete summary { cursor: pointer; font: 600 1.1rem/1.3 var(--titre); list-style: none; }
.vision-quete summary::-webkit-details-marker { display: none; }
.vision-quete summary .petit { display: block; }
.vision-quete p { margin-top: 6px; font-size: .92rem; }

/* Table : le bouton se remplit, puis la Table avance seule */
.bouton-auto { position: relative; overflow: hidden; }
.auto-barre { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .55; transform-origin: left; animation: auto-remplir linear forwards; }
@keyframes auto-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .auto-barre { animation: none; transform: scaleX(1); opacity: .25; } }

/* Objet reçu : carte dorée qui brille un instant */
.carte-evenement.objet { border-color: var(--serment); background: radial-gradient(ellipse 90% 120% at 15% 0%, rgba(240, 217, 160, .22), transparent 60%), linear-gradient(180deg, #1D1416, #120C0E); }
.carte-evenement.objet b { color: var(--serment); text-shadow: 0 0 18px rgba(240, 217, 160, .55); }

/* Grimbalda : la compagne de Shaina, en violet d'ombre */
.banniere-actif.grimbalda { border-color: var(--ombre); background: linear-gradient(110deg, rgba(199, 123, 192, .2), rgba(240, 217, 160, .06)); }
.banniere-actif.grimbalda .nom-actif { color: var(--ombre); }
.bloc.grimbalda { border-color: var(--ombre); }

/* Sac plein : choisir quoi garder */
.voile-remplacement { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; padding: 16px; background: rgba(5, 3, 4, .78); backdrop-filter: blur(3px); animation: fondu .25s ease-out both; }
.carte-remplacement { width: min(100%, 460px); max-height: 88vh; overflow: auto; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #1D1416, #0F0A0C); border: 1px solid var(--serment); box-shadow: 0 -10px 40px rgba(0, 0, 0, .7), 0 0 30px rgba(240, 217, 160, .18); animation: monter .35s cubic-bezier(.2, .9, .3, 1.1) both; }
.carte-remplacement h2 { color: var(--serment); margin-top: 4px; }
.carte-remplacement .choix { margin: 8px 0 12px; }
@keyframes fondu { from { opacity: 0; } }
@keyframes monter { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .voile-remplacement, .carte-remplacement { animation: none; } }

/* ═══════════ Finitions : confort tactile, états, transitions ═══════════ */

/* Calques des frappes animées (animations.js) : hors de #app, ils survivent aux re-rendus */
.calque-frappes { position: absolute; z-index: 35; pointer-events: none; }
.calque-frappe-main { position: fixed; inset: 0; z-index: 45; pointer-events: none; }

/* Boutons : une seule famille, un état pressé net, jamais de transition: all */
.bouton { transition-property: transform, box-shadow, background-color, opacity; transition-duration: .15s; transition-timing-function: ease-out; -webkit-user-select: none; user-select: none; }
.bouton:not(:disabled):active { transform: scale(.97); box-shadow: 0 0 12px rgba(240, 217, 160, .18), inset 0 2px 6px rgba(90, 46, 28, .35); }
.bouton.second { min-height: 52px; font-size: .95rem; }
.bouton.second:not(:disabled):active { background: rgba(33, 22, 25, .9); border-color: var(--encre-att); }
.bouton:focus-visible, .choix button:focus-visible, .paris button:focus-visible { outline-offset: 2px; }

/* ——— Téléphone ——— */
body.main { -webkit-font-smoothing: antialiased; }
.main-entete { padding: 12px 0; position: relative; z-index: 2; }
.main-entete .sous-nom { font-size: .85rem; margin-top: 2px; }
.main-entete .etat-perso { display: grid; justify-items: end; gap: 4px; }
.main-entete .pv { display: flex; align-items: baseline; gap: 4px; color: var(--encre); }
.main-entete .pv svg.i { color: var(--sang); align-self: center; }
.main-entete .pv .att { font: 400 .8rem/1 var(--texte); }
.main-entete .des-perso { display: flex; gap: 10px; font-size: .82rem; }
.main-entete .des-perso span { display: inline-flex; align-items: center; gap: 3px; }

/* Entrée d'écran : seulement quand l'écran change (classe posée par joueur.js) */
.ecran { gap: 14px; padding: 18px 0 20px; }
.ecran > h2 { line-height: 1.1; margin-top: -4px; }
.ecran.entree > * { animation: ecran-entree .32s cubic-bezier(.2, .7, .2, 1) both; }
.ecran.entree > :nth-child(2) { animation-delay: .03s; }
.ecran.entree > :nth-child(3) { animation-delay: .06s; }
.ecran.entree > :nth-child(n+4) { animation-delay: .09s; }
@keyframes ecran-entree { from { opacity: 0; transform: translateY(8px); } }
.ecran > .att { text-wrap: pretty; line-height: 1.45; }

/* Pied collant : un fondu au-dessus pour que le contenu ne soit pas tranché net */
.pied { gap: 8px; padding-top: 10px; z-index: 3; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; background: linear-gradient(0deg, #000, transparent); pointer-events: none; }
.onglets button { min-height: 44px; border-radius: 2px; transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out; }
.onglets button[aria-pressed="true"] { background: var(--surface); border-color: rgba(240, 217, 160, .45); color: var(--serment); }
.onglets button:active { background: var(--surface-2); }

/* Choix : grande cible, un repère clair quand c'est choisi */
.choix { gap: 8px; }
.choix button, .paris button {
  position: relative; border-radius: 2px; -webkit-user-select: none; user-select: none;
  transition-property: border-color, background-color, box-shadow, transform; transition-duration: .15s; transition-timing-function: ease-out;
}
.choix button { min-height: 54px; padding: 12px 14px 12px 16px; line-height: 1.3; }
.choix button:not(:disabled):active, .paris button:active { transform: scale(.985); background-color: var(--surface-2); }
.choix button:disabled { opacity: .4; cursor: not-allowed; }
.choix button > span:first-child { font-weight: 600; }
.choix button .att { text-align: right; flex: none; max-width: 48%; line-height: 1.25; }
.choix button::before, .paris button::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--serment);
  transform: scaleY(0); transition: transform .18s ease-out;
}
.choix button[aria-pressed="true"]::before, .paris button[aria-pressed="true"]::before { transform: scaleY(1); }
.choix button.trahison::before { background: var(--ombre); }
body.main .choix button.trahison[aria-pressed="true"] { background: linear-gradient(90deg, rgba(199, 123, 192, .14), transparent); }
.choix button.trahison > span:first-child { color: color-mix(in srgb, var(--ombre) 55%, var(--encre)); }
.option-quete { gap: 3px; }
.option-quete > span { font-weight: 600; }
.option-quete small { font-weight: 400; line-height: 1.35; text-wrap: pretty; }
.groupe { gap: 8px; margin-top: 4px; }
.groupe > .petit, .bloc > .petit { margin-bottom: 2px; }

/* Pari : le chiffre dans un sceau, les gains alignés */
.paris { gap: 8px; }
.paris button { grid-template-columns: 48px 1fr; gap: 12px; padding: 10px 12px; min-height: 72px; }
.paris .chiffre {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(240, 217, 160, .35); font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums;
  transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out;
}
.paris button[aria-pressed="true"] .chiffre { background: linear-gradient(160deg, #F8ECC8, #D9BC7C); color: #1A0F0A; border-color: #F6E7BE; box-shadow: 0 0 16px rgba(240, 217, 160, .35); }
.paris .detail { font-size: .88rem; line-height: 1.35; }
.paris .gain { font-size: .84rem; padding: 3px 8px; }
.paris button:not([aria-pressed="true"]) .gain { border-left-color: rgba(240, 217, 160, .18); }

/* Dés : faces bien tactiles, le dé choisi ressemble à un dé */
.saisie-de { gap: 8px; padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--filet); }
.saisie-de .faces { gap: 6px; }
.saisie-de .faces button { min-height: 46px; border-radius: 6px; background: var(--fond); font-variant-numeric: tabular-nums; transition: background-color .12s ease-out, color .12s ease-out, transform .12s ease-out, opacity .12s ease-out; }
.saisie-de .faces button:active { transform: scale(.94); }
.saisie-de .faces button.face-ok { color: var(--serment); }
.saisie-de .faces button:not(.face-ok) { opacity: .55; }
.saisie-de .faces button[aria-pressed="true"] { opacity: 1; background: linear-gradient(160deg, #F4ECDD, #D8CBB4); color: #1A0F0A; border-color: #F4ECDD; }
.saisie-de .faces button.face-ok[aria-pressed="true"] { background: linear-gradient(160deg, #FBF0CC, #E2C27E); box-shadow: 0 0 14px rgba(240, 217, 160, .45); }
.total-direct { padding: 12px 16px; transition: opacity .2s ease-out, border-color .2s ease-out; }
.total-direct > span { font-size: .95rem; color: var(--encre-att); }
.total-direct b { font-variant-numeric: lining-nums tabular-nums; }
.zone-lancer:empty { min-height: 0; padding: 0; }

/* Bandeau gravé en tête d'écran */
.bandeau { min-height: 150px; padding: 20px 16px 14px; margin-bottom: 4px; gap: 2px; }
.bandeau-titre { font-size: 1.6rem; line-height: 1.1; letter-spacing: .01em; text-wrap: balance; }
.bandeau .barre { height: 8px; margin-top: 10px; border-color: rgba(200, 66, 58, .35); background: rgba(11, 8, 9, .7); }
.bandeau-pv { font: 400 .82rem/1 var(--etiquette); letter-spacing: .08em; font-variant-numeric: lining-nums tabular-nums; color: var(--serment); margin-top: 6px; }

/* Bannières d'Actif et de Grimbalda : un appel à toucher, avec une flèche */
.banniere-actif { position: relative; min-height: 64px; padding: 14px 44px 14px 16px; border-radius: 2px; transition: transform .15s ease-out, background-color .15s ease-out; }
.banniere-actif::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); color: var(--serment); opacity: .8;
}
.banniere-actif.grimbalda::after { color: var(--ombre); }
.banniere-actif:active { transform: scale(.985); }
.banniere-actif .nom-actif { font-size: 1.4rem; }
.banniere-actif .att { line-height: 1.35; text-wrap: pretty; }
.bloc { display: grid; gap: 8px; }
.ecran > .bloc { padding: 14px; background: var(--surface); border: 1px solid var(--filet); }
.bloc.offre-actif { border-color: rgba(240, 217, 160, .5); background: linear-gradient(180deg, rgba(240, 217, 160, .07), var(--surface) 60%); }
.bloc.offre-actif.grimbalda, .bloc.offre-actif.passif { border-color: rgba(199, 123, 192, .5); background: linear-gradient(180deg, rgba(199, 123, 192, .09), var(--surface) 60%); }
.bloc.offre-actif > p:not(.petit) { font-size: .95rem; line-height: 1.45; }
.bloc .bouton { width: 100%; }
.offre-secrete { padding: 14px; border-radius: 2px; }
.offre-secrete > .petit + p { font-size: .95rem; line-height: 1.45; }

/* Résultat sur le téléphone : un chiffre, puis le détail */
.resultat-main { justify-content: center; text-align: center; align-items: center; gap: 12px; }
.bilan { display: grid; justify-items: center; gap: 4px; margin: 4px 0; }
.bilan-val { font: 600 4.6rem/1 var(--titre); color: var(--serment); text-shadow: 0 0 28px rgba(240, 217, 160, .3); }
.bilan-legende { font: italic 500 1.3rem/1.2 var(--titre); color: var(--encre); }
.bilan.subit .bilan-val { color: var(--sang); text-shadow: 0 0 28px rgba(200, 66, 58, .4); }
.bilan.pare .bilan-val { color: var(--vie); text-shadow: 0 0 24px rgba(157, 191, 142, .3); }
.bilan-des { display: grid; justify-items: center; gap: 8px; }
.bilan-des .rangee-des { justify-content: center; }
.bilan-des .att { font-size: .92rem; }
.bilan-note { font-size: .95rem; }
.bilan-suite { margin-top: 8px !important; font: 400 .82rem/1.2 var(--etiquette); letter-spacing: .1em; text-transform: uppercase; }

/* Attente : centrée, respirable */
.attente { gap: 12px; padding: 0 8px; }
.attente p { text-wrap: pretty; line-height: 1.45; }
.attente .grand { text-wrap: balance; }

/* Fiche */
.fiche { gap: 12px; }
.fiche .bloc { padding: 14px 16px; gap: 8px; }
.fiche .bloc h3 { font-size: 1.35rem; line-height: 1.15; color: var(--serment); }
.fiche .bloc p { line-height: 1.45; text-wrap: pretty; }
.fiche .objet { padding: 8px 0; border-top: 1px solid var(--filet); }
.fiche .objet:first-of-type { border-top: 0; padding-top: 2px; }
.fiche .stat-ligne { font-size: .9rem; }
.secret-btn { width: 100%; border-radius: 2px; font: 400 .9rem/1.2 var(--etiquette); letter-spacing: .08em; transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out; }
.secret-btn:active { border-style: solid; border-color: var(--encre-att); background: var(--surface-2); }

/* Sac plein : feuille qui monte du bas, seulement à sa première apparition */
.voile-remplacement { animation: none; padding: 12px; }
.voile-remplacement.neuf { animation: fondu .25s ease-out both; }
.voile-remplacement .carte-remplacement { animation: none; border-radius: 4px 4px 2px 2px; padding-top: 22px; position: relative; display: grid; gap: 6px; }
.voile-remplacement.neuf .carte-remplacement { animation: monter .35s cubic-bezier(.2, .9, .3, 1.05) both; }
.carte-remplacement::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 3px; margin-left: -20px; border-radius: 2px; background: rgba(240, 217, 160, .35); }
.carte-remplacement h2 { font-size: 1.7rem; line-height: 1.1; }
.carte-remplacement > .att { line-height: 1.4; }
.carte-remplacement .bouton { width: 100%; }

/* Cartes d'événement : icône, titre, texte ; l'objet reçu brille une fois */
.carte-evenement { grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 12px 14px; border-radius: 2px; }
.evt-icone { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; color: var(--serment); background: rgba(240, 217, 160, .08); }
.evt-icone svg.i { width: 20px; height: 20px; vertical-align: 0; }
.carte-evenement.passif .evt-icone { color: var(--ombre); background: rgba(199, 123, 192, .1); }
.evt-corps { display: grid; gap: 3px; min-width: 0; }
.evt-texte { font-size: .9rem; line-height: 1.4; text-wrap: pretty; }
.carte-evenement.objet { overflow: hidden; position: relative; }
.carte-evenement.objet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, .28) 50%, transparent 65%);
  transform: translateX(-100%); animation: reflet 1.1s ease-out .45s both;
}
.carte-evenement.objet .evt-icone { box-shadow: 0 0 16px rgba(240, 217, 160, .45); }
@keyframes reflet { to { transform: translateX(100%); } }

/* ——— Table ——— */
.scene.entree > :not(.secousse) { animation: ecran-entree .4s cubic-bezier(.2, .7, .2, 1) both; }
.boss-panneau { gap: 14px 32px; }
.boss-panneau .petit svg.i { color: var(--sang); }
.boss-panneau .barre { height: 14px; }
.boss-panneau .num { text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.stats-boss span { display: inline-flex; align-items: center; gap: 8px; }
.temps { gap: 10px; }
.temps span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: .62em; border-radius: 2px; transition: color .2s ease-out, border-color .2s ease-out, background-color .2s ease-out; }
.temps span.actif { background: rgba(240, 217, 160, .08); box-shadow: 0 0 18px rgba(240, 217, 160, .12); }
.resultats { gap: 14px; }
.resultat-joueur { padding: 16px 18px 14px; border-radius: 2px; gap: 12px; }
.resultat-joueur .tete b { font-size: 1.2em; }
.resultat-joueur .ligne-coup { border-top: 1px solid var(--filet); padding-top: 10px; }
.resultat-joueur .ligne-coup .att { font-size: .62em; }
.resultat-joueur .coup { font-size: 1.15em; }
.bouton-auto { min-width: 12em; }

/* Bande des joueurs : nom, classe (si connue), état ; le témoin « fait » est lisible de loin */
.joueurs-bande { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.joueur-col { padding: 16px 44px 16px 20px; gap: 3px; transition: opacity .3s ease-out; }
.joueur-col .nom { font-size: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-col .pret { top: 50%; right: 18px; width: 16px; height: 16px; margin-top: -8px; border-color: var(--encre-att); transition: background-color .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out; }
.joueur-col .pret.oui { box-shadow: 0 0 12px rgba(240, 217, 160, .6); }
.joueur-col .etat:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ecran.entree > *, .scene.entree > *, .voile-remplacement.neuf, .voile-remplacement.neuf .carte-remplacement, .carte-evenement.objet::after { animation: none; }
  .bouton:not(:disabled):active, .choix button:active, .paris button:active, .banniere-actif:active, .saisie-de .faces button:active { transform: none; }
}
.ecran > .bouton.second, .bloc > .bouton.second { font-size: .88rem; letter-spacing: .07em; padding: 0 16px; text-wrap: balance; line-height: 1.2; }
/* Pendant ma frappe animée, le bilan se retire derrière l'animation, puis revient */
.resultat-main .bilan, .resultat-main .bilan-des, .resultat-main .bilan-note { transition: opacity .4s ease-out; }
body.frappe-en-cours .resultat-main .bilan, body.frappe-en-cours .resultat-main .bilan-des, body.frappe-en-cours .resultat-main .bilan-note { opacity: 0; transition-duration: .15s; }

/* ——— Figurines ——— */
/* Téléphone : en-tête et révélation */
.fig-entete { flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.main-entete .entete-nom { flex: 1; min-width: 0; }
.fig-zone { display: grid; place-items: center; min-height: 150px; margin: 4px 0 10px; }
/* Table : cartes de révélation, bande des joueurs, boss */
.fig-carte { display: grid; place-items: center; margin-bottom: 6px; }
.fig-bande { display: grid; place-items: center; height: 76px; margin-bottom: 4px; }
.joueur-col.a-terre .fig-bande { opacity: .35; filter: grayscale(1); }
.boss-panneau { position: relative; }
/* (le portrait du boss vit désormais dans la scène de combat, voir arene.css) */
.fig-defi { display: block; margin-bottom: 10px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .85)); }
/* Table : grande scène plein écran (révélation d'une classe, entrée d'un boss) */
.scene-figurine { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(40, 24, 30, .9), rgba(5, 3, 4, .94)); animation: fondu .4s ease-out both; }
.scene-figurine.sortie { animation: fondu .5s ease-in reverse both; }
.scene-fig { position: relative; display: grid; place-items: center; min-width: 300px; min-height: 300px; }
.scene-titre { font: 600 clamp(1.4rem, 3vw, 2.2rem)/1.2 var(--titre); color: var(--serment); text-align: center; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { .scene-figurine, .scene-figurine.sortie { animation: none; } }
/* Une figurine garde toujours sa taille, quelles que soient les règles des SVG voisins (sceau, icônes) */
.fig > svg { width: var(--fig-w) !important; height: var(--fig-h) !important; max-width: none; }

/* Bouton son : coupe ou remet les bruitages (le choix reste sur l'appareil) */
.bouton-son {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid rgba(240, 217, 160, .35); background: transparent; cursor: pointer; font-size: 1.05rem; line-height: 1;
  transition: background-color .15s, transform .12s;
}
.bouton-son:hover { background: rgba(240, 217, 160, .1); }
.bouton-son:active { transform: scale(.94); }
.bouton-son[aria-pressed="false"] { opacity: .55; }
.bouton-son-petit { width: 30px; height: 30px; font-size: .85rem; vertical-align: middle; margin-left: 4px; }
.bouton-son-av { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; font-size: .9rem; z-index: 3; }
.av-entete { position: relative; }
.bouton-son-accueil { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 5; }
.av-entete .av-moi { padding-right: 128px; }
/* iOS (Safari) : le grain de film en « overlay » sur tout l'écran peut noircir les images filtrées en dessous */
@supports (-webkit-touch-callout: none) { body::after { mix-blend-mode: normal; opacity: .05; } }

/* Table : chrono doux (donne le rythme, ne pénalise personne) */
.chrono-doux { height: 6px; margin: 6px 0 12px; border-radius: 3px; background: rgba(240, 217, 160, .12); overflow: hidden; }
.chrono-doux span { display: block; height: 100%; background: linear-gradient(90deg, #D9A94E, #FFE7A6); transform-origin: left; animation: chrono-vider linear forwards; }
.chrono-doux.fini { animation: chrono-pouls 1.6s ease-in-out infinite; }
@keyframes chrono-vider { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes chrono-pouls { 50% { background: rgba(200, 66, 58, .35); } }
@media (prefers-reduced-motion: reduce) { .chrono-doux span { animation: none; transform: scaleX(.5); } .chrono-doux.fini { animation: none; } }

/* ——— Cibles tactiles d'au moins 44 px (audit 09, P2-6) ———
   Les petits boutons des en-têtes gardent leur dessin ; une zone invisible élargit ce qu'on peut toucher. */
.bouton-son-petit, .bourse-entete { position: relative; }
.bouton-son-petit::after, .bourse-entete::after, .mc-entete::after, .bouton-son-av::after, .mc-av::after, .bourse-av::after {
  content: ''; position: absolute; inset: -7px; border-radius: 12px;
}
/* Le bouton son ferme les en-têtes : sa zone ne dépasse pas à droite (sinon la page défile de quelques pixels) */
.bouton-son-petit::after { right: 0; }
/* Le groupe (bruitages + musique) porte les classes de ses boutons, mais pas leur zone élargie */
.groupe-son::after { content: none !important; }
.bourse-entete::after { inset: -7px -1px; }
.mc-entete::after { inset: -5px -1px; }
.bouton-son-av::after, .mc-av::after { inset: -5px; }
.bourse-av::after { inset: -7px -4px; }
/* Tablette : les boutons ronds de l'en-tête passent à 44 px */
body.table .bouton-son, body.table .bouton-aide { width: 44px; height: 44px; }

/* ——— Confirmer (quitter, abandonner) et le titre qui ramène à l'accueil ——— */
.confirmer {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(5, 3, 4, .78);
}
.confirmer-boite {
  display: grid; gap: 12px; width: min(100%, 400px); padding: 20px;
  border: 1px solid var(--filet); background: linear-gradient(180deg, #1C1315, #0D090A); box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}
.confirmer-boite h2 { margin: 0; font: 600 1.4rem/1.15 var(--titre); color: var(--serment); }
.confirmer-boite p { margin: 0; line-height: 1.45; color: var(--encre-att); }
.confirmer-choix { display: grid; gap: 8px; margin-top: 4px; }
.bouton.danger { color: #FFF; background: linear-gradient(180deg, #B8352E, #7A1914); border-color: #E05A50; }
/* Le nom du jeu ramène à l'accueil : une zone tactile plus haute que le texte, sans décaler la mise en page */
a.lien-accueil { position: relative; color: inherit; text-decoration: none; }
a.lien-accueil::after { content: ""; position: absolute; inset: -12px 0; }
a.lien-accueil:hover, a.lien-accueil:focus-visible { text-decoration: underline; text-underline-offset: 3px; }