/* ─────────────────────────────────────────────────────────────────────────────
   FoudreBattle — thème « Orage de nuit »

   Chargé APRÈS style.css : il redessine l'habillage (typographie, formes,
   navigation, pages) sans toucher aux mécaniques — cartes en 3D, foil,
   animations de combat restent dans style.css et fx.js.

   Principes
   • Une seule chose spectaculaire par page ; le reste reste calme.
   • Laiton = action principale et marque. Éclair = ton tour, le focus.
     Braise = l'adversaire, les dégâts. Sève = les alliés, les soins.
   • Arrondis hiérarchisés : boutons en pilule, panneaux 20 px, cartes 14 px.
   • Texte en casse normale : les majuscules espacées se lisent mal.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Polices (hébergées sur le site) ── */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2');
}

:root {
  --rayon-carte: 14px;
  --rayon-panneau: 20px;
  --surface: linear-gradient(170deg, rgba(38, 43, 98, .72), rgba(22, 25, 62, .78));
  --surface-plate: #181b45;
  --bord: rgba(160, 170, 255, .16);
  --bord-fort: rgba(160, 170, 255, .3);
  --ombre-douce: 0 14px 40px rgba(3, 4, 20, .55);
  --twitch: #9146ff;
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────────────────────── */

/* « clip » et non « hidden » : coupe les débordements décoratifs (éventail,
   halos) sans casser le positionnement collant du panneau d'équipe. */
html, body { overflow-x: clip; }

body {
  font-size: 16px;
  line-height: 1.55;
  background: var(--nuit);
}

/* Le ciel d'orage : une lueur froide en haut, une chaude en bas. Pas de grain. */
body::before {
  background:
    radial-gradient(1100px 520px at 70% -10%, rgba(110, 139, 255, .22), transparent 65%),
    radial-gradient(700px 420px at 0% 0%, rgba(127, 230, 255, .07), transparent 70%),
    radial-gradient(900px 500px at 50% 115%, rgba(242, 193, 78, .07), transparent 70%);
}
body::after { opacity: .18; }

::selection { background: rgba(242, 193, 78, .35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--eclair);
  outline-offset: 3px;
  border-radius: 8px;
}

.aller-contenu {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10000;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--or);
  color: var(--nuit);
  font-weight: 700;
  text-decoration: none;
}
.aller-contenu:focus { top: .6rem; }

h1, h2, h3, .page-title, .section-titre {
  font-family: var(--police-titre);
  text-wrap: balance;
}

.haut { color: var(--menthe); }
.bas { color: var(--sang); }

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.nav {
  background: rgba(13, 14, 38, .78);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bord);
}
.nav::after { display: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.brand-mot {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.02em;
  font-stretch: 88%;
  text-transform: none;
}
.brand-bolt {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  clip-path: none;
  font-size: 1rem;
  background: linear-gradient(145deg, var(--or-vif), var(--or) 55%, #c98b1c);
  box-shadow: 0 0 0 1px rgba(255, 217, 131, .4), 0 6px 20px rgba(242, 193, 78, .35);
}

.nav-links { gap: .25rem; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texte-2);
  transition: background .18s, color .18s;
}
.nav-link::after { display: none; }
.nav-link:hover { color: var(--texte); background: var(--panneau-h); }
.nav-link.active {
  color: var(--nuit);
  background: var(--or);
}
.nav-link .ico { width: 18px; height: 18px; }

.nav-user { gap: .6rem; }
.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  clip-path: none;
}
.nav-avatar-vide {
  display: grid;
  place-items: center;
  font-family: var(--police-titre);
  font-weight: 800;
  color: var(--nuit);
  background: linear-gradient(145deg, var(--eclair), var(--arc));
}
.nav-name { font-weight: 700; font-size: .92rem; }
.nav-logout {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  clip-path: none;
  border: 1px solid var(--bord);
  color: var(--texte-2);
  text-decoration: none;
}
.nav-logout:hover { color: var(--sang); border-color: rgba(255, 92, 122, .5); }

.btn-twitch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  clip-path: none;
  background: var(--twitch);
  color: #fff;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(145, 70, 255, .35);
}
.btn-twitch::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.3 2 3 5.4v13.8h4.7V22h2.6l2.7-2.8h3.9L22 14.1V2zm16 11.2-3 3h-4.7l-2.6 2.6v-2.6h-4V3.7h14.3zM17.3 6.9v5.2h-1.7V6.9zm-4.7 0v5.2h-1.7V6.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.3 2 3 5.4v13.8h4.7V22h2.6l2.7-2.8h3.9L22 14.1V2zm16 11.2-3 3h-4.7l-2.6 2.6v-2.6h-4V3.7h14.3zM17.3 6.9v5.2h-1.7V6.9zm-4.7 0v5.2h-1.7V6.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-twitch .court { display: none; }
.btn-twitch:hover { background: #a36bff; transform: translateY(-1px); }

/* Barre d'onglets : téléphone uniquement */
.onglets { display: none; }

.foot {
  border-top: 1px solid var(--bord);
  font-size: .82rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOUTONS, PASTILLES, ALERTES
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  gap: .5rem;
  padding: .72rem 1.35rem;
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.btn .ico { width: 18px; height: 18px; }

.btn-primary {
  background: linear-gradient(180deg, var(--or-vif), var(--or));
  color: #1c1405;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 24px rgba(242, 193, 78, .28);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 30px rgba(242, 193, 78, .42); }

.btn-secondaire {
  background: transparent;
  color: var(--or-vif);
  border-color: rgba(242, 193, 78, .55);
}
.btn-secondaire:hover { background: rgba(242, 193, 78, .1); }

.btn-ghost {
  background: rgba(160, 170, 255, .07);
  border-color: var(--bord);
  color: var(--texte);
}
.btn-ghost:hover { background: rgba(160, 170, 255, .13); border-color: var(--bord-fort); }

.btn.inactif,
.btn[aria-disabled="true"] {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.pill {
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  text-transform: none;
  letter-spacing: 0;
}

.alert {
  border-radius: 14px;
  clip-path: none;
  font-size: .95rem;
}

.empty {
  border-radius: var(--rayon-panneau);
  clip-path: none;
}
.empty .btn { margin-top: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   EN-TÊTES DE PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.page-head {
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.page-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-transform: none;
}
.page-title::before { display: none; }
.page-sub {
  padding-left: 0;
  margin-top: .55rem;
  max-width: 62ch;
  font-size: 1rem;
  color: var(--texte-2);
}

.section-titre {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCUEIL
   ───────────────────────────────────────────────────────────────────────────── */

.accueil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 2rem;
  min-height: min(620px, calc(100vh - 170px));
  margin: -.5rem 0 3rem;
}
.accueil.sans-eventail { grid-template-columns: 1fr; min-height: 0; padding: 3rem 0 1rem; }

.accueil-texte { position: relative; z-index: 2; }
.accueil-salut {
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--eclair);
}
.accueil-titre {
  margin: 0;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: .95;
  letter-spacing: -.035em;
  max-width: 11ch;
  background: linear-gradient(180deg, #fff 20%, #cfd3ff 70%, #a9b0f0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accueil-intro {
  margin: 1.3rem 0 0;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--texte-2);
}
.accueil-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.9rem;
}
.accueil-cta .btn,
.accueil-cta .btn-twitch { padding: .9rem 1.5rem; font-size: 1rem; }

/* ── L'éventail : la pièce maîtresse de l'accueil ── */
.eventail {
  position: relative;
  height: min(540px, 62vw);
  perspective: 1500px;
  display: grid;
  place-items: center;
}
.eventail::before {
  /* Tapis de jeu sous les cartes */
  content: "";
  position: absolute;
  inset: 12% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 139, 255, .28), rgba(110, 139, 255, .06) 60%, transparent);
  filter: blur(10px);
}
.eventail-scene {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: min(236px, 23vw);
  aspect-ratio: 450 / 490;
  transform-style: preserve-3d;
  transform: translateY(8%) rotateX(calc(8deg + var(--rx))) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ev-carte {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  /* Pivot loin sous la carte : la rotation dessine l'arc d'une main de cartes */
  transform-origin: 50% 185%;
  /* Paquet serré avant la distribution */
  transform: translateY(40px) translateZ(calc(var(--d) * -3px));
  opacity: 0;
  box-shadow: 0 24px 48px rgba(3, 4, 20, .7), 0 0 0 1px rgba(255, 255, 255, .12);
  transition:
    transform .9s cubic-bezier(.2, .9, .25, 1.05) calc((var(--i) + 2) * 70ms),
    opacity .4s ease-out calc((var(--i) + 2) * 50ms),
    box-shadow .3s;
}
.ev-carte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-carte .foil { border-radius: inherit; }
/* La profondeur dépend de la distance au centre (--d) : en 3D, c'est elle,
   et non z-index, qui décide quelle carte passe devant. */
.eventail.donne .ev-carte {
  opacity: 1;
  transform: rotateZ(calc(var(--i) * var(--ecart, 16deg))) translateZ(calc(var(--d) * -16px));
}
.eventail.donne .ev-carte:hover {
  transition-delay: 0s;
  transition-duration: .3s;
  transform: rotateZ(calc(var(--i) * var(--ecart, 16deg))) translateY(-34px) translateZ(40px) scale(1.04);
  box-shadow: 0 34px 60px rgba(3, 4, 20, .8), 0 0 0 1px rgba(255, 255, 255, .25), 0 0 40px rgba(127, 230, 255, .25);
}
.ev-carte.rarity-legendary { box-shadow: 0 24px 48px rgba(3, 4, 20, .7), 0 0 0 1px rgba(251, 191, 36, .55), 0 0 30px rgba(251, 191, 36, .2); }
.ev-carte.rarity-legendary_holo { box-shadow: 0 24px 48px rgba(3, 4, 20, .7), 0 0 0 1px rgba(34, 211, 238, .6), 0 0 34px rgba(240, 171, 252, .25); }
.ev-carte.rarity-limited_holo,
.ev-carte.rarity-limited { box-shadow: 0 24px 48px rgba(3, 4, 20, .7), 0 0 0 1px rgba(255, 255, 255, .6); }

/* L'éclair : une seule fois, à l'ouverture */
.eventail-eclair {
  position: absolute;
  left: 50%;
  top: -4%;
  width: 90px;
  height: 108%;
  transform: translateX(-50%) rotate(8deg);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.eventail-eclair path {
  fill: none;
  stroke: #eafcff;
  stroke-width: 3.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--eclair)) drop-shadow(0 0 18px rgba(127, 230, 255, .8));
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.eventail.donne .eventail-eclair { animation: eclairFlash 1.1s ease-out .75s both; }
.eventail.donne .eventail-eclair path { animation: eclairTrace .28s ease-in .75s forwards; }
.eventail.donne::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 245, 255, .5), transparent 70%);
  opacity: 0;
  animation: eclairLueur .9s ease-out 1s both;
}
@keyframes eclairTrace { to { stroke-dashoffset: 0; } }
@keyframes eclairFlash {
  0% { opacity: 1; }
  30% { opacity: 1; }
  45% { opacity: .2; }
  55% { opacity: .9; }
  100% { opacity: 0; }
}
@keyframes eclairLueur {
  0% { opacity: 0; }
  20% { opacity: .9; }
  100% { opacity: 0; }
}

/* ── Parcours ── */
.parcours { margin-bottom: 1rem; }
.parcours-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: none;
}
.etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.3rem 1.3rem 1.3rem;
  border-radius: var(--rayon-panneau);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-douce);
}
.etape-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--texte-2);
  border: 1.5px solid var(--bord-fort);
}
.etape h3 {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.etape p {
  margin: 0;
  color: var(--texte-2);
  font-size: .95rem;
}
.etape-corps { flex: 1; }
.etape-etat {
  display: inline-block;
  margin-top: .7rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--texte-3);
}
.etape .btn { align-self: flex-start; }

.etape.encours {
  border-color: rgba(242, 193, 78, .55);
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(242, 193, 78, .14), transparent 70%),
    var(--surface);
}
.etape.encours .etape-num { background: var(--or); border-color: var(--or); color: #1c1405; }
.etape.encours .etape-etat { color: var(--or-vif); }

.etape[data-etat="fait"] .etape-num {
  background: rgba(75, 227, 163, .15);
  border-color: rgba(75, 227, 163, .6);
  color: transparent;
  position: relative;
}
.etape[data-etat="fait"] .etape-num::after {
  content: "✓";
  position: absolute;
  color: var(--menthe);
  font-size: 1.2rem;
}
.etape[data-etat="fait"] .etape-etat { color: var(--menthe); }
.etape[data-etat="bloque"] { opacity: .62; }
.etape[data-etat="bloque"] .btn { pointer-events: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   COLLECTION ET CARTES
   ───────────────────────────────────────────────────────────────────────────── */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 1.4rem;
}
.chiffres div {
  padding: .7rem 1.1rem;
  border-radius: 14px;
  background: var(--panneau);
  border: 1px solid var(--bord);
}
.chiffres dt {
  font-size: .82rem;
  color: var(--texte-3);
}
.chiffres dd {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.filters {
  gap: .45rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-2);
  background: var(--panneau);
  border: 1px solid var(--bord);
}
.filter::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texte-3);
}
.filter[data-rarity="all"]::before,
.filter[data-r="all"]::before { display: none; }
.rar-common::before { background: #94a3b8 !important; }
.rar-rare::before { background: #60a5fa !important; }
.rar-epic::before { background: #c084fc !important; }
.rar-legendary::before { background: #fbbf24 !important; }
.rar-legendary_holo::before { background: conic-gradient(#22d3ee, #f0abfc, #fbbf24, #22d3ee) !important; }
.rar-limited::before { background: #e4e4e7 !important; }
.rar-limited_holo::before { background: conic-gradient(#fff, #71717a, #fff) !important; }
.filter:hover { color: var(--texte); border-color: var(--bord-fort); }
.filter.active {
  color: #1c1405;
  background: var(--or);
  border-color: var(--or);
}
.filter-n {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}
.filtre-compte {
  margin: 0 0 1.2rem;
  font-size: .85rem;
  color: var(--texte-3);
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1.2rem;
}
.card {
  padding: 10px 10px 12px;
  border-radius: var(--rayon-carte);
}
.card::before {
  clip-path: none;
  border-radius: inherit;
  background: linear-gradient(175deg, #232760, #15183f 80%);
}
.card-img { border-radius: 9px; background: #0a0b22; }
.card:hover { transform: translateY(-4px); }
.card-rarity {
  margin: 10px 0 2px;
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.card-name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.card-qty,
.card-event {
  border-radius: 999px;
  font-size: .76rem;
}
.card.picked {
  border-color: var(--menthe);
  box-shadow: 0 0 0 2px var(--menthe), 0 14px 34px rgba(75, 227, 163, .2);
}
.card-apercu {
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  text-transform: none;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MON ÉQUIPE
   ───────────────────────────────────────────────────────────────────────────── */

.deck-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.8rem;
  align-items: start;
}
.deck-pool { min-width: 0; }
.deck-pool .cards { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }

.equipe {
  position: sticky;
  top: 88px;
  padding: 1.2rem;
  border-radius: var(--rayon-panneau);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-douce);
}
.equipe-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .9rem;
}
.equipe-titre {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}
.equipe-cout {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--or-vif);
}
.equipe-cout.depasse { color: var(--sang); }

.equipe .deck-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  min-height: 0;
  padding: 0;
  margin: 0 0 1rem;
  background: none;
  border: none;
  clip-path: none;
}
.deck-slot {
  width: auto;
  border-radius: 10px;
  overflow: hidden;
  border-width: 1.5px;
}
.deck-slot img { background: #0a0b22; }
.deck-slot::after { display: none; }
.deck-slot-x {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .7rem;
  color: #fff;
  background: rgba(13, 14, 38, .8);
  border: 1px solid rgba(255, 255, 255, .25);
  transition: background .15s;
}
.deck-slot:hover { border-color: var(--sang); }
.deck-slot:hover .deck-slot-x { background: var(--sang); }
.deck-slot-cost {
  border-radius: 8px 0 0 0;
  font-size: .78rem;
}
.deck-slot.vide {
  display: grid;
  place-items: center;
  aspect-ratio: 450 / 490;
  cursor: default;
  background: rgba(160, 170, 255, .04);
  border: 1.5px dashed var(--bord-fort);
  color: var(--texte-3);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
}
.deck-slot.vide:hover { transform: none; box-shadow: none; }

/* Jauge : un segment par point de budget */
.jauge {
  display: flex;
  gap: 3px;
  height: 14px;
}
.jauge i {
  flex: 1;
  border-radius: 3px;
  background: rgba(160, 170, 255, .14);
  transition: background .25s;
}
.jauge i.pris { background: linear-gradient(180deg, var(--or-vif), var(--or)); }
.jauge i.reserve {
  background: repeating-linear-gradient(135deg, rgba(242, 193, 78, .45) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .35);
}
.jauge i.trop { background: var(--sang); }

.equipe-aide {
  margin: .7rem 0 1rem;
  font-size: .92rem;
  color: var(--texte-2);
  min-height: 2.8em;
}
.equipe-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.equipe-actions .btn { flex: 1; }
.deck-vider {
  padding: .6rem 1rem;
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  font-size: .9rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

/* Carte de la réserve : raison visible plutôt qu'une carte simplement éteinte */
.card.unavailable {
  opacity: .55;
  filter: grayscale(.5);
}
.card-etat {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 1100;
  transform: translate(-50%, -50%);
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--texte);
  background: rgba(13, 14, 38, .88);
  border: 1px solid var(--bord-fort);
  pointer-events: none;
}
/* Équipe complète : l'information ne sert qu'au survol */
.card-etat.discret { opacity: 0; transition: opacity .15s; }
.card:hover .card-etat.discret { opacity: 1; }
.card-etat.choisie {
  top: 18px;
  transform: translateX(-50%);
  color: #06281a;
  background: var(--menthe);
  border-color: var(--menthe);
}
.card-stats span { font-variant-numeric: tabular-nums; }
.card-cost {
  border-radius: 999px;
  clip-path: none;
}
.card-effect { border-radius: 10px; }
.card-effect-nom { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.card-effect-nom::before { display: none; }
.card-effect-desc { font-size: .82rem; line-height: 1.45; }

/* ─────────────────────────────────────────────────────────────────────────────
   SALON DE COMBAT
   ───────────────────────────────────────────────────────────────────────────── */

.lobby-equipe {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon-panneau);
  background: var(--surface);
  border: 1px solid var(--bord);
}
.lobby-equipe h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.lobby-equipe p { margin: .15rem 0 0; font-size: .92rem; color: var(--texte-2); }
.lobby-equipe-texte { min-width: 190px; }
.lobby-equipe-cartes {
  flex: 1;
  display: flex;
  gap: .45rem;
}
.mini-carte {
  width: 54px;
  aspect-ratio: 450 / 490;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0b22;
  border: 1.5px solid var(--bord-fort);
}
.mini-carte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-carte.vide { border-style: dashed; background: rgba(160, 170, 255, .04); }
.mini-carte.rarity-legendary { border-color: rgba(251, 191, 36, .7); }
.mini-carte.rarity-legendary_holo { border-color: rgba(34, 211, 238, .7); }
.mini-carte.rarity-epic { border-color: rgba(192, 132, 252, .7); }
.mini-carte.rarity-rare { border-color: rgba(96, 165, 250, .7); }
.mini-carte.rarity-limited,
.mini-carte.rarity-limited_holo { border-color: rgba(255, 255, 255, .8); }
.lobby-equipe.incomplete { border-color: rgba(255, 92, 122, .45); }
.lobby-equipe.incomplete .btn { background: var(--or); color: #1c1405; border-color: var(--or); }

.lobby-grille {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 1.2rem;
  align-items: stretch;
}

.pvp {
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--rayon-panneau);
  clip-path: none;
  border: 1px solid rgba(127, 230, 255, .3);
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(127, 230, 255, .16), transparent 70%),
    var(--surface);
  display: flex;
  flex-direction: column;
}
.pvp::before, .pvp::after { display: none; }
.pvp-corps {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  flex: 1;
}
.pvp-titre {
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: none;
}
.pvp-sous { font-size: .98rem; color: var(--texte-2); margin: .4rem 0 0; }
.pvp-infos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .93rem;
  color: var(--texte-2);
}
.pvp-infos li { display: flex; gap: .6rem; align-items: baseline; }
.pvp-infos b { color: var(--texte); }
.pvp-action { margin-top: auto; }
.pvp-action .btn { padding: .9rem 1.6rem; font-size: 1rem; }
.pvp-etat { border-radius: 999px; clip-path: none; margin-top: 1rem; }
.pvp-compteur { margin-top: .6rem; font-size: .88rem; color: var(--eclair); }

.entrainement {
  padding: 1.5rem;
  border-radius: var(--rayon-panneau);
  background: var(--surface);
  border: 1px solid var(--bord);
}
.entrainement-titre { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.015em; }
.entrainement-sous { margin: .4rem 0 1.1rem; color: var(--texte-2); }

.levels {
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 0;
}
.level {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "pips nom go" "pips desc go";
  align-items: center;
  column-gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  clip-path: none;
  background: rgba(160, 170, 255, .05);
  border: 1px solid var(--bord);
}
.level::before,
.level::after,
.level[data-level]::after { display: none; }
.level:hover { transform: translateX(3px); box-shadow: none; }
.level[data-level]:hover { border-color: var(--bord-fort); box-shadow: none; background: rgba(160, 170, 255, .1); }
.level-pips { grid-area: pips; display: flex; gap: 3px; }
.level-pips i {
  width: 7px;
  height: 22px;
  border-radius: 3px;
  background: rgba(160, 170, 255, .18);
}
.level[data-level="facile"] .level-pips i.on { background: var(--menthe); }
.level[data-level="normal"] .level-pips i.on { background: var(--or); }
.level[data-level="difficile"] .level-pips i.on { background: var(--sang); }
.level-name {
  grid-area: nom;
  font-size: 1.08rem;
  font-weight: 700;
  text-transform: none;
}
.level-desc { grid-area: desc; font-size: .9rem; color: var(--texte-2); margin: .1rem 0 0; }
.level-go {
  grid-area: go;
  margin: 0;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
  border: 1px solid var(--bord-fort);
}
.level:hover .level-go { background: var(--or); color: #1c1405; border-color: var(--or); }

.tuto-banniere {
  border-radius: 16px;
  background:
    radial-gradient(400px 120px at 0% 50%, rgba(242, 193, 78, .18), transparent 70%),
    var(--surface-plate);
  border-color: rgba(242, 193, 78, .4);
}
.tuto-banniere-go {
  padding: .45rem .95rem;
  border-radius: 999px;
  background: var(--or);
  color: #1c1405;
}
.tuto-banniere.discrete { display: inline-flex; border-radius: 999px; }
.tuto-banniere.discrete .tuto-banniere-go { background: none; color: var(--or); padding: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   ARÈNE — seul l'habillage change, la table 3D reste celle de style.css
   ───────────────────────────────────────────────────────────────────────────── */

.bt-head {
  border-radius: 18px;
  clip-path: none;
  background: rgba(24, 27, 69, .75);
  border: 1px solid var(--bord);
  backdrop-filter: blur(8px);
}
.bt-name { font-family: var(--police-titre); font-weight: 800; font-size: 1.08rem; }
.bt-alive { font-size: .82rem; }
.bt-turn {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: -.01em;
}
.bt-turn.you,
.bt-turn.moi {
  color: var(--eclair);
  text-shadow: 0 0 24px rgba(127, 230, 255, .45);
}
.bt-timer {
  display: inline-block;
  min-width: 2.6em;
  padding: .05rem .5rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  background: rgba(160, 170, 255, .12);
}
.bt-forfeit,
.bt-aide-btn {
  border-radius: 999px;
  clip-path: none;
  font-family: var(--police-texte);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: .4rem .9rem;
}
.bt-journal {
  border-radius: 18px;
  clip-path: none;
  background: rgba(24, 27, 69, .6);
  border: 1px solid var(--bord);
}
.bt-journal-titre {
  font-family: var(--police-titre);
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
}
.bt-log, .bt-log div { font-size: .82rem; }
.bt-coup {
  border-radius: 14px;
  border-left-width: 1px;
  border-color: var(--bord);
  box-shadow: inset 3px 0 0 var(--or);
  font-size: .86rem;
}
.bt-coup.vide { box-shadow: none; }
.bt-hint { font-size: .9rem; }
.bt-actions .btn { padding: .65rem 1.2rem; }
.bt-card { border-radius: 12px; clip-path: none; }
.bt-card img, .bt-noimg { border-radius: 7px; }
.bt-hp { border-radius: 999px; }
.bt-hp span { border-radius: 999px; }
.bt-cname { font-size: .8rem; }
.bt-prev, .bt-joue, .bt-cd, .bt-formule, .bt-states .etat { border-radius: 999px; }
.bt-fiche, .bt-aide-boite { border-radius: var(--rayon-panneau); }
.bt-mort-subite { border-radius: 14px; clip-path: none; }

/* ── Écran de fin ── */
.fin-boite {
  border-radius: 26px;
  clip-path: none;
  background: linear-gradient(170deg, #262b62, #14173d);
  border: 1px solid var(--bord-fort);
}
.fin-boite::before { border-radius: inherit; }
.fin-sceau { border-radius: 50%; clip-path: none; }
.fin-verdict {
  font-family: var(--police-titre);
  font-stretch: 80%;
  letter-spacing: -.03em;
  text-transform: none;
}
.fin-stat { border-radius: 14px; clip-path: none; }
.fin-lib { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.fin-heros { border-radius: 14px; clip-path: none; }
.fin-heros img { border-radius: 8px; }
.fin-heros-lib { text-transform: none; letter-spacing: 0; }

/* ── Tutoriel ── */
.tuto-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 2rem 0;
}
.tuto-intro .page-title { font-size: clamp(2.4rem, 5vw, 4rem); }
.tuto-intro .page-sub { font-size: 1.1rem; }
.tuto-intro .tuto-go { margin-top: 1.6rem; padding: .95rem 1.8rem; font-size: 1.05rem; }
.tuto-note { margin: .7rem 0 0; font-size: .88rem; color: var(--texte-3); }
.tuto-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  gap: .5rem;
}
.tuto-plan-item span { display: flex; flex-direction: column; font-size: .92rem; color: var(--texte-2); }
.tuto-plan-item strong { color: var(--texte); font-size: 1rem; }
.tuto-plan-item {
  border-radius: 14px;
  background: var(--surface);
  border-color: var(--bord);
}
.tuto-plan-item b {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  color: #1c1405;
  background: var(--or);
}
.coach {
  border-radius: var(--rayon-panneau);
  overflow: hidden;
  border-color: rgba(242, 193, 78, .45);
}
.coach-etape { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.coach-titre { font-size: 1.2rem; font-weight: 800; }
.coach-texte { font-size: .95rem; }
.tuto-focus { outline-color: var(--eclair) !important; border-radius: 12px; }
@keyframes tutoFocus {
  0%, 100% { outline-color: rgba(127, 230, 255, .95); box-shadow: 0 0 0 0 rgba(127, 230, 255, 0); }
  50% { outline-color: rgba(127, 230, 255, .35); box-shadow: 0 0 24px 2px rgba(127, 230, 255, .35); }
}

/* ── Aperçu d'une capacité, bêta ── */
.beta { border-radius: 26px; clip-path: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   ÉCRANS MOYENS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .deck-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .lobby-grille { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .accueil { grid-template-columns: 1fr; min-height: 0; gap: 0; margin-top: 0; }
  .accueil-texte { order: 2; }
  .eventail { order: 1; height: 330px; margin: -1rem 0 1rem; }
  .eventail-scene { width: 170px; }
  .eventail { overflow: visible; }
  .eventail-scene { --ecart: 12deg; }
  .accueil-titre { max-width: 14ch; }
  .parcours-liste { grid-template-columns: 1fr; }
  .etape { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .etape-corps { min-width: 200px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TÉLÉPHONE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.en-combat { padding-bottom: 0; }

  .nav-in { gap: .6rem; }
  .nav-links { display: none; }
  .nav-name { display: none; }
  .nav .btn-twitch { padding: .55rem 1rem; font-size: .88rem; }
  .nav .btn-twitch .long { display: none; }
  .nav .btn-twitch .court { display: inline; }

  .onglets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(13, 14, 38, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--bord);
  }
  .onglet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--texte-3);
    text-decoration: none;
  }
  .onglet .ico { width: 22px; height: 22px; }
  .onglet.active { color: var(--or-vif); background: rgba(242, 193, 78, .12); }
  body.en-combat .onglets { display: none; }

  .wrap { padding: 1.4rem 1rem 2rem; }
  .page-head { margin-bottom: 1.1rem; }
  .page-head .btn { width: 100%; }

  .accueil-cta .btn,
  .accueil-cta .btn-twitch { flex: 1 1 100%; justify-content: center; }
  .eventail { height: 270px; }
  .eventail-scene { width: 140px; }
  .eventail-scene { --ecart: 11deg; }
  .etape { padding: 1rem; gap: .8rem; }
  .etape .btn { width: 100%; }

  .chiffres div { flex: 1 1 30%; padding: .55rem .7rem; }
  .chiffres dd { font-size: 1.2rem; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem .8rem; padding: 0 1rem .2rem; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .cards, .deck-pool .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .card-name { font-size: .92rem; }

  /* Le panneau d'équipe devient une barre fixée au-dessus des onglets */
  .deck-layout { grid-template-columns: minmax(0, 1fr); }
  .equipe {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    top: auto;
    z-index: 8900;
    padding: .7rem .8rem;
    border-radius: 18px;
    background: rgba(24, 27, 69, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px rgba(3, 4, 20, .6);
  }
  .page-deck .wrap { padding-bottom: 12rem; }
  .equipe-tete { margin-bottom: .45rem; }
  .equipe-titre { font-size: 1rem; }
  .equipe .deck-bar { grid-template-columns: repeat(6, 1fr); gap: .3rem; margin-bottom: .5rem; }
  .deck-slot-x { width: 16px; height: 16px; font-size: .55rem; top: 2px; right: 2px; }
  .deck-slot-cost { font-size: .62rem; padding: 0 4px; }
  .deck-slot.vide { font-size: .8rem; }
  .jauge { height: 8px; gap: 2px; }
  .equipe-aide { margin: .45rem 0 .55rem; font-size: .8rem; min-height: 0; }
  .equipe-actions .btn { padding: .55rem 1rem; }

  .lobby-equipe { flex-wrap: wrap; gap: .8rem; }
  .lobby-equipe-cartes { order: 3; flex-basis: 100%; }
  .mini-carte { width: auto; flex: 1; }
  .lobby-equipe .btn { margin-left: auto; }
  .pvp, .entrainement { padding: 1.1rem; }
  .level { grid-template-columns: auto 1fr; grid-template-areas: "pips nom" "pips desc" "go go"; row-gap: .2rem; }
  .level-go { justify-self: start; margin-top: .5rem; }
  .tuto-banniere-go { width: 100%; text-align: center; }
  .tuto-intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 0; }
  .tuto-intro .tuto-go { width: 100%; }

  .coach { bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  .page-tuto .coach { bottom: .5rem; }
}

/* ── Mouvement réduit : pas de distribution, pas d'éclair ── */
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .ev-carte { transition: none !important; }
  html.anim-reduites .eventail-eclair, html.anim-reduites .eventail.donne::after { display: none; }
  html.anim-reduites .eventail-scene { transition: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   HOLOGRAPHIE PARTOUT
   Légendaires holo : arc-en-ciel. Limitées holo : obsidienne argentée.
   Le calque (.foil) est le même que dans la collection ; il est posé par
   window.fbHolo (app.js) dans l'arène, l'équipe, le salon, l'aperçu, l'écran
   de fin et l'accueil.
   ───────────────────────────────────────────────────────────────────────────── */

/* Variables déclarées : sans elles, le reflet ne peut pas s'animer au repos,
   et un calque sans --fx (foil obsidienne) restait invisible. */
@property --fx { syntax: "<number>"; inherits: true; initial-value: .55; }
@property --fy { syntax: "<number>"; inherits: true; initial-value: .35; }
@property --fstr { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --fhue { syntax: "<angle>"; inherits: true; initial-value: 25deg; }

.foil {
  --fx: .55;
  --fy: .35;
  --fstr: .25;
  --fhue: 25deg;
}

/* Au repos, le reflet glisse lentement : le holo se voit sans souris,
   sur téléphone comme dans l'arène. Le pointeur prend le relais au survol. */
.foil[data-active="0"] {
  animation: holoRepos 7s ease-in-out infinite alternate;
}
.foil[data-active="0"]::before { opacity: .34; }
.foil[data-active="0"]::after { opacity: .2; mix-blend-mode: screen; }
.foil.foil-void[data-active="0"]::before { opacity: .3; }
.foil.foil-void[data-active="0"]::after { opacity: .18; mix-blend-mode: color-dodge; }
.foil[data-active="1"] { animation: none; }

@keyframes holoRepos {
  0% { --fx: .15; --fy: .2; --fhue: -10deg; --fstr: .3; }
  50% { --fx: .6; --fy: .55; --fhue: 40deg; --fstr: .45; }
  100% { --fx: .9; --fy: .3; --fhue: 80deg; --fstr: .35; }
}

/* ── Porteurs du calque ── */
/* Spécificité nulle : ne doit jamais écraser un positionnement existant
   (les cartes de l'éventail sont en absolu). */
:where(.holo) { position: relative; }
.bt-illu,
.fin-heros-illu {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
  border-radius: 7px;
}
.fin-heros-illu { flex: none; border-radius: 8px; }
.fin-heros-illu img { display: block; }
.deck-slot.holo,
.mini-carte/* Spécificité nulle : ne doit jamais écraser un positionnement existant
   (les cartes de l'éventail sont en absolu). */
:where(.holo) { position: relative; }
.bt-illu > .foil,
.fin-heros-illu > .foil,
.deck-slot > .foil,
.mini-carte > .foil,
.ev-carte > .foil {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.deck-slot-cost, .deck-slot-x { z-index: 4; }

/* Liseré irisé autour de l'illustration, pour reconnaître la rareté d'un coup
   d'œil même quand le reflet est discret. */
.holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(var(--angle-holo, 120deg), #22d3ee, #a855f7, #fbbf24, #4ade80, #22d3ee);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: holoLisere 6s linear infinite;
  opacity: .9;
}
.holo:has(> .foil-void)::after {
  background-image: linear-gradient(120deg, #ffffff, #52525b, #e4e4e7, #18181b, #ffffff);
}
/* La vignette d'équipe a un vrai bord : pas de double liseré */
.deck-slot.holo { border-color: transparent; }
@keyframes holoLisere {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}

/* Cartes adverses : l'image est assombrie, le reflet doit rester lisible */
.bt-enemy .bt-illu.holo img { filter: brightness(.95) saturate(1); }

/* Carte KO : l'hologramme s'éteint */
.bt-card.dead .foil,
.bt-card.dead .holo::after { display: none; }

/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .foil[data-active="0"],
  html.anim-reduites .holo::after { animation: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   TABLE DE COMBAT — plateau de verre sous l'orage
   Deux camps teintés (braise en haut, éclair en bas), une ligne de foudre au
   centre avec le nom de chaque camp, un quadrillage gravé. L'inclinaison 3D
   reste celle de style.css (.bt-room).
   ───────────────────────────────────────────────────────────────────────────── */

.bt-table {
  inset: -26px -10px;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 46% at 50% 50%, rgba(127, 230, 255, .10), transparent 70%),
    radial-gradient(ellipse 95% 85% at 50% 50%, #252a6a 0%, #1a1d4c 45%, #111335 80%, #0c0d28 100%);
  box-shadow:
    0 0 0 1.5px rgba(160, 170, 255, .38),
    0 0 0 7px #0c0d28,
    0 0 0 8.5px rgba(127, 230, 255, .22),
    0 0 50px rgba(110, 139, 255, .25),
    0 40px 80px rgba(3, 4, 20, .85),
    inset 0 0 120px rgba(5, 6, 22, .75),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Quadrillage gravé : on lit la surface comme un plateau de jeu */
.bt-table::before {
  opacity: 1;
  mix-blend-mode: normal;
  background-image:
    linear-gradient(rgba(160, 170, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 170, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 90%);
  mask: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 90%);
}

/* Reflet de verre, en biais sur le plateau */
.bt-table::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, transparent 28%, transparent 70%, rgba(255, 255, 255, .03) 100%);
}

/* Les deux camps */
.bt-zone {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  pointer-events: none;
  transition: opacity .6s ease-out;
}
.bt-zone-adv {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 92, 122, .16), rgba(255, 92, 122, .04) 60%, transparent);
  box-shadow: inset 0 3px 0 rgba(255, 92, 122, .45);
}
.bt-zone-moi {
  bottom: 0;
  background: linear-gradient(0deg, rgba(127, 230, 255, .16), rgba(127, 230, 255, .04) 60%, transparent);
  box-shadow: inset 0 -3px 0 rgba(127, 230, 255, .5);
}
/* Le camp qui ne joue pas s'efface un peu */
.bt-scene[data-tour="moi"] .bt-zone-adv,
.bt-scene[data-tour="adverse"] .bt-zone-moi { opacity: .45; }
.bt-scene[data-tour="fin"] .bt-zone { opacity: .35; }

/* Ligne de foudre au centre */
.bt-table-line {
  left: 3%;
  right: 3%;
  height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, transparent, rgba(127, 230, 255, .55) 15%, rgba(234, 252, 255, .9) 50%, rgba(127, 230, 255, .55) 85%, transparent);
  box-shadow: 0 0 14px rgba(127, 230, 255, .6), 0 0 40px rgba(110, 139, 255, .35);
}
.bt-table-line::before,
.bt-table-line::after { display: none; }

.bt-embleme {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.25rem;
  background: radial-gradient(circle at 40% 35%, #2e3480, #121436);
  box-shadow:
    0 0 0 1.5px rgba(127, 230, 255, .7),
    0 0 0 5px #121436,
    0 0 0 6px rgba(242, 193, 78, .45),
    0 0 26px rgba(127, 230, 255, .55);
}

/* Nom de chaque camp, de part et d'autre de l'emblème, dans l'espace libre
   entre les deux rangées */
.bt-camp {
  position: relative;
  flex: 0 1 auto;
  margin: 0 .6rem;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: #151842;
  max-width: 36%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: .7rem;
  line-height: 1.3;
  letter-spacing: .02em;
}
.bt-camp-adv { color: #ffb3c1; box-shadow: 0 0 0 1px rgba(255, 92, 122, .35); }
.bt-camp-moi { color: #b6f2ff; box-shadow: 0 0 0 1px rgba(127, 230, 255, .35); }
.bt-camp-adv::before { content: "▲ "; font-size: .7em; }
.bt-camp-moi::before { content: "▼ "; font-size: .7em; }

/* Halo selon le camp actif, dans les nouvelles couleurs */
.bt-table-glow { width: 70%; height: 60%; }
.bt-scene[data-tour="moi"] .bt-table-glow {
  top: 70%;
  background: radial-gradient(ellipse, rgba(127, 230, 255, .22), rgba(110, 139, 255, .06) 50%, transparent 72%);
}
.bt-scene[data-tour="adverse"] .bt-table-glow {
  top: 30%;
  background: radial-gradient(ellipse, rgba(255, 92, 122, .2), rgba(110, 139, 255, .05) 50%, transparent 72%);
}
.bt-table-glow { transition: background .6s ease-out, top .6s ease-out; }

/* Liseré du camp actif, aux nouvelles couleurs */
.bt-scene[data-tour="moi"] .bt-mine::after {
  background: linear-gradient(90deg, transparent, var(--eclair) 18%, #eafcff 50%, var(--eclair) 82%, transparent);
  box-shadow: 0 0 22px rgba(127, 230, 255, .8);
}
.bt-scene[data-tour="adverse"] .bt-enemy::after {
  background: linear-gradient(90deg, transparent, var(--sang) 18%, #ffc2cd 50%, var(--sang) 82%, transparent);
  box-shadow: 0 0 22px rgba(255, 92, 122, .7);
}

/* Cartes posées : verre sombre, bord fin */
.bt-card {
  background: linear-gradient(170deg, #262b66, #151841);
  border-color: rgba(160, 170, 255, .22);
  box-shadow: 0 10px 22px rgba(3, 4, 20, .7), 0 2px 5px rgba(3, 4, 20, .55);
}
.bt-mine .bt-card.jouable:hover:not(.selected),
.bt-card.targetable:hover:not(.selected) {
  border-color: var(--eclair);
  box-shadow: 0 10px 22px rgba(3, 4, 20, .7), 0 0 26px rgba(127, 230, 255, .45);
}
/* Carte choisie : elle se lève moins haut pour ne plus couvrir ses voisines */
.bt-card.selected {
  transform: translateZ(16px) rotateX(-8deg) translateY(-6px) scale(1.03);
  border-color: var(--or-vif);
  box-shadow: 0 26px 40px rgba(3, 4, 20, .85), 0 0 0 1.5px var(--or), 0 0 30px rgba(242, 193, 78, .4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BARRE DE COMMANDE — toujours au-dessus de la table et des cartes
   Couche 9300 : sous l'aperçu (9400), l'écran de fin (9500), les particules
   (9600), le coach (9650), les fiches (9700) et l'aide (9800).
   ───────────────────────────────────────────────────────────────────────────── */

/* Hauteurs CONSTANTES : si la barre ou l'en-tête changeaient de taille, la
   table se redimensionnait et bougeait. La barre défile à l'intérieur si son
   contenu dépasse, et la vue réserve sa hauteur. Le débordement du plateau
   incliné est absorbé par la mise à l'échelle (ajusterTable) ; --marge-3d
   reste disponible pour ajouter de l'air si besoin. */
:root {
  --hud-h: 126px;
  --marge-3d: 0px;
}
body.en-combat #battleView,
.page-tuto #battleView {
  padding-bottom: calc(var(--hud-h) + var(--marge-3d) + 12px);
}
/* Le plateau déborde en 3D : il reste sous l'en-tête et sous la barre */
.bt-arene { position: relative; z-index: 1; }
.bt-head { position: relative; z-index: 5; }

.bt-hud {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9300;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 24px));
  height: var(--hud-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: .7rem;
  padding: .6rem;
  border-radius: 22px;
  /* Opaque : on ne voit jamais la table au travers */
  background: #15183f;
  border: 1px solid var(--bord-fort);
  box-shadow: 0 18px 50px rgba(3, 4, 20, .7), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Zone d'action */
.bt-hud .bt-mid {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: .35rem .5rem;
  text-align: left;
  min-height: 0;
  overflow-y: auto;
}
.bt-hud .bt-mid:empty { display: none; }
.bt-hud:has(.bt-mid:empty) { grid-template-columns: 1fr; }
.bt-hud .bt-actions { justify-content: flex-start; gap: .45rem; }
.bt-hud .bt-actions .btn { padding: .7rem 1.2rem; font-size: 1rem; }
.bt-hud .bt-actions .btn-primary { box-shadow: 0 6px 20px rgba(242, 193, 78, .35); }
.bt-hud .bt-hint {
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--texte-2);
  text-align: left;
}
.bt-hud .bt-hint.err { color: #ffc2cd; }

/* Détail du dernier coup, à côté des boutons */
.bt-hud .bt-coup {
  margin: 0;
  max-width: none;
  min-height: 0;
  overflow-y: auto;
  border-radius: 14px;
  background: rgba(8, 9, 30, .5);
  font-size: .82rem;
}
.bt-hud .bt-coup.vide { display: flex; align-items: center; }

@media (max-width: 900px) {
  .bt-hud {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: .5rem;
    border-radius: 18px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
  }
  .bt-hud .bt-actions { justify-content: stretch; }
  .bt-hud .bt-actions .btn { flex: 1 1 auto; padding: .7rem .8rem; font-size: .95rem; }
  .bt-hud .bt-hint { font-size: .78rem; }
  .bt-hud { grid-template-rows: minmax(0, 1fr) 3.2rem; }
  .bt-hud:has(.bt-mid:empty) { grid-template-rows: 1fr; }
  .bt-hud .bt-coup { font-size: .72rem; padding: .35rem .6rem; }
  .bt-camp { font-size: .56rem; margin: 0 .3rem; padding: 0 .4rem; }
  .bt-embleme { width: 30px; height: 30px; font-size: .9rem; }
  /* Tutoriel : le coach monte en haut pour laisser la barre en bas */
  .page-tuto .coach { top: .5rem; bottom: auto; }
  .page-tuto .coach-corps { max-height: 28vh; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .bt-hud { padding: .4rem; }
  :root { --hud-h: 108px; }
  .bt-hud .bt-hint { font-size: .78rem; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLE IMMOBILE
   Aucune animation ni transformation ne peut déplacer la table, même si un
   effet visuel l'oublie. Les cartes, elles, restent libres de bouger.
   ───────────────────────────────────────────────────────────────────────────── */
.bt-scene,
.bt-scene.fx-shake,
.bt-scene.fx-slowmo {
  transform: none !important;
  animation: none !important;
  will-change: auto;
}
.bt-room { transition: none !important; }
.bt-table, .bt-zone, .bt-table-line { animation: none !important; }

/* L'en-tête garde toujours la même hauteur (tour + consigne) */
.bt-status { min-height: 2.9rem; }
.bt-status .bt-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mort subite : superposée au plateau, elle ne pousse plus rien */
.bt-arene > .bt-mort-subite {
  position: absolute;
  top: .3rem;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  padding: .35rem .9rem;
  border-radius: 999px;
  border-left: 0;
  background: rgba(60, 10, 26, .92);
  box-shadow: 0 0 0 1px rgba(255, 92, 122, .6), 0 8px 24px rgba(3, 4, 20, .6);
  pointer-events: none;
  font-size: .82rem;
}

@media (max-width: 900px) {
  :root { --hud-h: 150px; }
  .bt-arene > .bt-mort-subite { font-size: .7rem; }
}

/* Cartes à hauteur constante : une ligne d'états qui apparaît ou disparaît
   agrandissait la rangée, donc le plateau. */
.bt-cname,
.bt-eff {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bt-states {
  flex-wrap: nowrap;
  overflow: hidden;
  height: 17px;
}
.bt-states .etat { flex: none; }


/* Barre : la zone d'action ne dépasse jamais la barre, et son contenu reste
   atteignable par le haut quand il défile (centrage « sûr »). */
.bt-hud { grid-template-rows: minmax(0, 1fr); }
.bt-hud .bt-mid { justify-content: flex-start; }
.bt-hud .bt-mid > :first-child { margin-top: auto; }
.bt-hud .bt-mid > :last-child { margin-bottom: auto; }

@media (max-width: 900px) {
  .bt-hud { grid-template-rows: minmax(0, 1fr) 3.2rem; }
  .bt-hud:has(.bt-mid:empty) { grid-template-rows: minmax(0, 1fr); }
}

/* ── Cadre de mise à l'échelle du plateau (voir ajusterTable dans battle.js) ── */
.bt-cadre {
  /* Transparent aux clics, comme le plateau : seules les rangées les captent */
  pointer-events: none;
  width: 100%;
  transform-style: preserve-3d;
  transform: translateY(var(--recentre, 0px)) scale(var(--ajust, 1));
  transform-origin: 50% 50%;
}
/* Le plateau déborde en 3D : c'est le cadre qui le contient, la scène coupe
   ce qui dépasserait malgré tout plutôt que de recouvrir le reste */
.bt-scene { align-items: center; }

/* Téléphone : boutons sur deux lignes possibles, barre un peu plus haute */
@media (max-width: 700px) {
  :root { --hud-h: 172px; }
}

/* Pendant un combat, le menu se réduit à ses icônes : il tient sur une ligne
   et laisse la hauteur au plateau */
/* En combat et dans le tutoriel, le menu se réduit à ses icônes, quelle que
   soit la largeur : avec les libellés, il finissait sur deux lignes (75 → 136
   px de hauteur) et poussait toute l'arène vers le bas, jusqu'à ce que le
   panneau du coach recouvre des cartes. La hauteur compte plus que les
   libellés sur ces deux pages. */
body.en-combat .nav-link span,
body.page-tuto .nav-link span { display: none; }
body.en-combat .nav-link,
body.page-tuto .nav-link { padding: .5rem .65rem; }
body.en-combat .nav-name { display: none; }
/* En-tête du combat : les noms ne se coupent plus sur plusieurs lignes */
.bt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-alive { white-space: nowrap; }

/* Tablette : en-tête sur deux lignes (noms, puis tour) au lieu de noms tronqués */
@media (min-width: 701px) and (max-width: 999px) {
  .bt-head { flex-wrap: wrap; row-gap: .3rem; }
  .bt-head .bt-side { flex: 1 1 30%; }
  .bt-status { order: 5; flex: 1 1 100%; }
}

/* Barre : assez haute pour les boutons ET les consignes, sans rognure */
@media (max-width: 900px) { :root { --hud-h: 184px; } }
@media (max-width: 700px) {
  :root { --hud-h: 200px; }
  .bt-hud .bt-hint { font-size: .74rem; }
}
@media (max-width: 700px) and (max-height: 640px) { :root { --hud-h: 172px; } }
@media (max-width: 700px) and (max-height: 640px) {
  .bt-hud .bt-mid .bt-hint:not(.err) + .bt-hint:not(.err) { display: none; }
  .bt-hud .bt-actions .btn { padding: .55rem .7rem; font-size: .9rem; }
}

/* Rendu WebGL des effets (lumiere.js) : le canvas couvre la fenêtre */
.fx-canvas-gl { width: 100%; height: 100%; }

/* Lignes des cartes à hauteur exacte : un badge (recharge ⏳, flèche ▲▼)
   qui apparaît ne doit pas grandir la ligne, même d'un pixel. */
.bt-cname { height: 1.2em; line-height: 1.2; }
.bt-nums { height: 1.35em; line-height: 1.35; align-items: center; }
.bt-eff { height: 1.4em; line-height: 1.4; }
.bt-cd, .bt-atk i { line-height: 1; vertical-align: baseline; }
.bt-cd { padding-top: 0; padding-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   CHIFFRES DE COMBAT — lisibles sur n'importe quel effet lumineux
   ───────────────────────────────────────────────────────────────────────────── */
.fx-num {
  font-family: var(--police-titre);
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.7rem;
  letter-spacing: -.02em;
  -webkit-text-stroke: 5px rgba(8, 6, 20, .9);
  paint-order: stroke fill;
  text-shadow: 0 4px 14px rgba(0, 0, 0, .8);
  animation: fxNumPop 1.9s cubic-bezier(.2, .9, .2, 1) forwards;
  z-index: 9700;
}
.fx-num-dmg { color: #ffd0d7; -webkit-text-stroke-color: rgba(90, 8, 24, .95); }
.fx-num-heal { color: #c8ffe3; -webkit-text-stroke-color: rgba(6, 60, 36, .95); }
.fx-num-poison { color: #e4ff9e; -webkit-text-stroke-color: rgba(30, 50, 10, .95); font-size: 1.3rem; }
.fx-num-buff { color: #fff1c2; -webkit-text-stroke-color: rgba(80, 50, 0, .95); font-size: 1.1rem; letter-spacing: .02em; }
.fx-num-debuff { color: #e1d4ff; -webkit-text-stroke-color: rgba(40, 20, 80, .95); font-size: 1.1rem; }
.fx-num-bloque { color: #dce9ff; -webkit-text-stroke-color: rgba(16, 30, 80, .95); font-size: 1rem; }

@keyframes fxNumPop {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.4); }
  9% { opacity: 1; transform: translate(-50%, -22px) scale(1.45); }
  17% { transform: translate(-50%, -26px) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -40px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -74px) scale(.92); }
}
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .fx-num { animation-duration: .01s; animation-fill-mode: forwards; }


/* ─────────────────────────────────────────────────────────────────────────────
   LATENCE — indicateur à quatre barres, dans le pied de page et l'arène
   ───────────────────────────────────────────────────────────────────────────── */
.ping {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .05rem .45rem .05rem .35rem;
  border-radius: 999px;
  background: rgba(160, 170, 255, .08);
  border: 1px solid var(--bord);
  font-size: .72rem;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}
.ping b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: right;
}
.ping-barres {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 10px;
}
.ping-barres i {
  width: 3px;
  border-radius: 1px;
  background: rgba(160, 170, 255, .22);
}
.ping-barres i:nth-child(1) { height: 3px; }
.ping-barres i:nth-child(2) { height: 5px; }
.ping-barres i:nth-child(3) { height: 7.5px; }
.ping-barres i:nth-child(4) { height: 10px; }

.ping-bon { color: var(--menthe); }
.ping-moyen { color: var(--or-vif); }
.ping-lent { color: #ffab5c; }
.ping-mauvais { color: var(--sang); }
.ping-inconnu { color: var(--texte-3); }
.ping-bot { color: var(--eclair); }
.ping-bot b { min-width: 0; letter-spacing: .04em; }

.ping[data-barres="1"] .ping-barres i:nth-child(-n+1),
.ping[data-barres="2"] .ping-barres i:nth-child(-n+2),
.ping[data-barres="3"] .ping-barres i:nth-child(-n+3),
.ping[data-barres="4"] .ping-barres i:nth-child(-n+4),
.ping-bot .ping-barres i { background: currentColor; }
.ping-bot .ping-barres i { opacity: .55; }

.foot-ping { margin-left: .6rem; }
.bt-alive .bt-ping:empty { display: none; }
.bt-alive .ping { font-size: .66rem; }

/* Tour passé faute de carte disponible */
.coup-passe {
  margin-top: .15rem;
  color: var(--eclair);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRÉRÉGLAGES D'ÉQUIPE — jusqu'à cinq équipes enregistrées
   ───────────────────────────────────────────────────────────────────────────── */
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.4rem;
}
.preset {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  background: var(--panneau);
  border: 1px solid var(--bord);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.preset:hover { border-color: var(--bord-fort); }
.preset.vacant { border-style: dashed; }
.preset.actif {
  border-color: rgba(242, 193, 78, .65);
  background: radial-gradient(360px 120px at 0% 0%, rgba(242, 193, 78, .16), transparent 70%), var(--panneau);
}

.preset-onglet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: .5rem .9rem;
  background: none;
  border: none;
  color: var(--texte-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.preset-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--texte);
}
.preset-etat {
  font-size: .72rem;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.preset.actif .preset-nom { color: var(--or-vif); }
.preset.actif .preset-onglet::after {
  content: "part au combat";
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--or);
}
.preset.vacant .preset-nom { color: var(--texte-3); font-weight: 600; }

.preset-outils {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: .35rem;
}
.preset-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--texte-3);
  font-size: .82rem;
  cursor: pointer;
}
.preset-btn:hover { background: rgba(160, 170, 255, .14); color: var(--texte); }
.preset-btn.danger:hover { background: rgba(255, 92, 122, .18); color: var(--sang); }

.presets-aide {
  flex-basis: 100%;
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--texte-3);
}

@media (max-width: 760px) {
  .presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1rem 1rem;
    padding: 0 1rem .3rem;
    scrollbar-width: none;
  }
  .presets::-webkit-scrollbar { display: none; }
  .preset { flex: none; }
  .presets-aide { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGE « COMPTE VALIDÉ »
   Deux niveaux venus de Foudremagic : standard (bleu) et or.
   ───────────────────────────────────────────────────────────────────────────── */
.badge-valide {
  display: inline-block;
  vertical-align: -.16em;
  margin-left: .3rem;
  flex: none;
}
.badge-gold { filter: drop-shadow(0 0 6px rgba(242, 193, 78, .55)); }
.badge-standard { filter: drop-shadow(0 0 5px rgba(56, 189, 248, .45)); }

/* Dans l'en-tête de combat, le badge suit la taille du nom */
.bt-name .badge-valide { vertical-align: -.12em; }
.nav-name { display: inline-flex; align-items: center; }

/* Badge robot : même gabarit que les badges « validé » */
.badge-robot {
  display: inline-block;
  vertical-align: -.18em;
  margin-left: .3rem;
  flex: none;
  filter: drop-shadow(0 0 5px rgba(127, 230, 255, .4));
}

/* ── Écran de fin : choisir la difficulté du prochain robot ── */
.fin-rejouer { margin: 1.2rem 0 .3rem; }
.fin-rejouer-titre {
  font-size: .78rem;
  color: var(--texte-3);
  margin-bottom: .5rem;
}
.fin-niveaux {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.fin-niveau {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(160, 170, 255, .07);
  border: 1px solid var(--bord);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.fin-niveau:hover { background: rgba(160, 170, 255, .14); border-color: var(--bord-fort); transform: translateY(-1px); }
.fin-niveau:disabled { opacity: .5; cursor: progress; }
/* Le niveau qu'on vient d'affronter, mis en avant */
.fin-niveau.dernier {
  border-color: var(--or);
  background: linear-gradient(180deg, rgba(242, 193, 78, .22), rgba(242, 193, 78, .1));
  color: var(--or-vif);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 6px 20px rgba(242, 193, 78, .18);
}
.fin-niveau-note {
  font-size: .68rem;
  font-weight: 600;
  color: var(--or);
  opacity: .85;
}
.fin-niveau-pips { display: flex; gap: 2px; }
.fin-niveau-pips i {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: rgba(160, 170, 255, .2);
}
.fin-niveau[data-niveau="facile"] .fin-niveau-pips i.on { background: var(--menthe); }
.fin-niveau[data-niveau="normal"] .fin-niveau-pips i.on { background: var(--or); }
.fin-niveau[data-niveau="difficile"] .fin-niveau-pips i.on { background: var(--sang); }

@media (max-width: 560px) {
  .fin-niveaux { flex-direction: column; }
  .fin-niveau { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RELECTURE DES PARTIES (administrateurs)
   ───────────────────────────────────────────────────────────────────────────── */
.rec-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.rec-retour { font-size: .85rem; color: var(--texte-3); text-decoration: none; }
.rec-retour:hover { color: var(--texte); }
.rec-boutons { display: flex; gap: .5rem; }
.rec-note { color: var(--texte-3); font-size: .82em; }

/* ── Liste ── */
.rec-table-enveloppe { overflow-x: auto; }
.rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.rec-table th {
  text-align: left;
  padding: .5rem .7rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-3);
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
.rec-table td {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
.rec-table tr:hover td { background: rgba(160, 170, 255, .05); }
.rec-num { font-variant-numeric: tabular-nums; color: var(--texte-2); }
.rec-lien { color: var(--or-vif); font-weight: 700; text-decoration: none; }
.rec-lien:hover { text-decoration: underline; }
.rec-vs { color: var(--texte-3); }
.rec-tag {
  display: inline-block;
  padding: 0 .45rem;
  border-radius: 999px;
  font-size: .7rem;
  background: rgba(160, 170, 255, .12);
  border: 1px solid var(--bord);
  color: var(--texte-2);
}
.rec-tag.pvp { color: var(--eclair); border-color: rgba(127, 230, 255, .4); }

/* ── Composition (« le build ») ── */
.rec-build {
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon-panneau);
  background: var(--surface);
  border: 1px solid var(--bord);
}
.rec-build summary {
  cursor: pointer;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.05rem;
}
.rec-avertissement {
  margin: .6rem 0 1rem;
  font-size: .85rem;
  color: var(--texte-2);
  border-left: 2px solid var(--or);
  padding-left: .7rem;
}
.rec-equipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
}
.rec-equipe h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rec-cartes { display: grid; gap: .5rem; }
.rec-carte {
  display: flex;
  gap: .7rem;
  padding: .5rem;
  border-radius: 12px;
  background: rgba(160, 170, 255, .05);
  border: 1px solid var(--bord);
}
.rec-carte img, .rec-carte-vide {
  width: 54px;
  height: 59px;
  object-fit: cover;
  border-radius: 8px;
  background: #0a0b22;
  flex: none;
}
.rec-carte-vide { display: grid; place-items: center; color: var(--texte-3); }
.rec-carte-nom { font-weight: 700; }
.rec-carte-stats { font-size: .82rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.rec-carte-cap { font-size: .82rem; color: var(--texte-2); margin-top: .15rem; }
.rec-carte-cap b { color: var(--or); }

.rec-regles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .5rem;
  margin: 1.2rem 0 0;
}
.rec-regles div {
  padding: .45rem .7rem;
  border-radius: 10px;
  background: rgba(160, 170, 255, .05);
  border: 1px solid var(--bord);
}
.rec-regles dt { font-size: .72rem; color: var(--texte-3); }
.rec-regles dd { margin: 0; font-weight: 700; font-size: .9rem; }

/* ── Barre de lecture ── */
.rec-barre {
  position: sticky;
  bottom: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: .6rem .8rem;
  border-radius: 16px;
  background: rgba(20, 22, 58, .96);
  border: 1px solid var(--bord-fort);
  box-shadow: 0 12px 34px rgba(3, 4, 20, .55);
}
.rec-btn {
  min-width: 36px;
  height: 34px;
  padding: 0 .6rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .07);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.rec-btn:hover { background: rgba(160, 170, 255, .15); }
.rec-btn-principal {
  background: linear-gradient(180deg, var(--or-vif), var(--or));
  border-color: var(--or);
  color: #1c1405;
  font-size: 1rem;
}
.rec-vitesses { display: flex; gap: .25rem; }
.rec-vitesse { min-width: 30px; font-size: .78rem; }
.rec-vitesse.actif { border-color: var(--or); color: var(--or-vif); }
.rec-piste { flex: 1; min-width: 160px; accent-color: var(--or); }
.rec-compteur {
  font-size: .8rem;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .rec-compteur { order: 5; flex-basis: 100%; text-align: center; }
  .rec-piste { flex-basis: 100%; order: 4; }
}

/* ── Relecture : l'arène s'insère dans la page au lieu de la remplir ──
   Sans cela, elle passe en mode plein écran comme un vrai combat : la page
   ne défilait plus et la barre de commande flottait par-dessus la
   composition. */
body.page-rec.en-combat {
  overflow: auto;
  padding-bottom: 0;
}
/* `body.` est nécessaire : les règles du combat (body.en-combat …) sont plus
   spécifiques, sans quoi elles l'emportent et l'arène reste écrasée.
   On rend aussi à la page sa mise en page normale : en mode combat, le
   conteneur devient une boîte plein écran et tout le reste disparaît. */
body.page-rec.en-combat { height: auto; }
body.page-rec.en-combat .wrap {
  display: block;
  max-width: min(1760px, 96vw);
  flex: none;
}
body.page-rec.en-combat .foot { display: block; }
body.page-rec #battleView {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  height: min(76vh, 780px);
  min-height: 520px;
  padding-bottom: 0;
  margin-bottom: .5rem;
}
body.page-rec .bt-hud {
  position: static;
  transform: none;
  width: 100%;
  height: auto;
  min-height: 92px;
}
body.page-rec .bt-arene { z-index: 0; }
body.page-rec .onglets { display: none; }

/* En relecture, la latence affichée serait celle d'aujourd'hui, pas celle du
   combat enregistré : on la masque plutôt que d'induire en erreur. */
body.page-rec .bt-ping { display: none; }

/* Atterrissage d'une carte après une charge : le rebond se joue sur l'échelle
   et non sur la profondeur. Une courbe « avec dépassement » sur la position
   faisait passer la carte sous le plateau pendant un instant. */
@keyframes fxPose {
  0% { transform: translateZ(3px) scale(1.015); }
  55% { transform: translateZ(3px) scale(.985); }
  100% { transform: translateZ(3px) scale(1); }
}
.bt-card.fx-pose { animation: fxPose .26s cubic-bezier(.3, .9, .3, 1); }

/* Carte hors combat : posée sur la table, pas dedans. À profondeur nulle elle
   est exactement au niveau de la surface, ce qui la fait scintiller contre
   elle ; quelques dixièmes suffisent à l'en décoller. */
.bt-card.dead { transform: translateZ(1.5px) rotateZ(-9deg) translateY(10px) scale(.94); }

/* En-tête de combat à hauteur fixe : son contenu change à chaque tour et en
   fin de partie, mais la table en dessous ne doit jamais bouger. */
/* Hauteur fixe pour que la table ne bouge jamais, mais calculée à partir de
   hauteurs de ligne explicites : devinée, elle rognait la consigne
   (« Choisis une de tes cartes… » coupée en deux). */
.bt-status .bt-turn { line-height: 1.75rem; min-height: 1.75rem; }
.bt-status .bt-hint {
  line-height: 1.45rem;
  min-height: 1.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 701px) {
  .bt-status { height: 3.8rem; min-height: 0; overflow: hidden; }
}
.bt-status .bt-end { font-size: inherit; line-height: inherit; margin: 0; }

/* En fin de partie, le bouton d'abandon garde sa place sans être visible :
   sa disparition raccourcissait l'en-tête (surtout sur mobile, 42 px) et la
   table remontait d'un coup sous l'écran de fin. */
.bt-forfeit-fantome { visibility: hidden; pointer-events: none; }
@media (max-width: 700px) {
  .bt-status { height: 3.9rem; min-height: 0; overflow: hidden; }
  .bt-status .bt-hint { font-size: .78rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DIALOGUES — remplacent les fenêtres du navigateur (confirm, alert, prompt)
   ───────────────────────────────────────────────────────────────────────────── */
.dlg-voile {
  position: fixed;
  inset: 0;
  z-index: 10050;               /* au-dessus de l'écran de fin et de l'aide */
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(6, 7, 22, 0);
  backdrop-filter: blur(0);
  transition: background .18s ease, backdrop-filter .18s ease;
}
.dlg-voile.ouvert {
  background: rgba(6, 7, 22, .66);
  backdrop-filter: blur(5px);
}
.dlg-voile.ferme { background: rgba(6, 7, 22, 0); backdrop-filter: blur(0); }

.dlg {
  width: min(430px, 100%);
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(170deg, #262b62, #15183f);
  border: 1px solid var(--bord-fort);
  box-shadow: 0 30px 80px rgba(3, 4, 20, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
  text-align: center;
  transform: translateY(14px) scale(.96);
  opacity: 0;
  transition: transform .2s cubic-bezier(.2, .9, .3, 1), opacity .16s ease;
}
.dlg-voile.ouvert .dlg { transform: none; opacity: 1; }
.dlg-voile.ferme .dlg { transform: translateY(8px) scale(.97); opacity: 0; }
.dlg-danger { border-color: rgba(255, 92, 122, .55); }

.dlg-icone {
  width: 54px;
  height: 54px;
  margin: 0 auto .8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  background: rgba(242, 193, 78, .14);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .4);
}
.dlg-danger .dlg-icone {
  background: rgba(255, 92, 122, .14);
  box-shadow: 0 0 0 1px rgba(255, 92, 122, .45);
}
.dlg-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--texte);
}
.dlg-message {
  margin: .55rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--texte-2);
}
.dlg-champ {
  width: 100%;
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--bord-fort);
  background: rgba(8, 9, 30, .6);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}
.dlg-champ:focus { outline: 2px solid var(--eclair); outline-offset: 1px; }
.dlg-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 1.3rem;
  flex-wrap: wrap;
}
.dlg-actions .btn { min-width: 128px; }

.btn-danger {
  background: linear-gradient(180deg, #ff7a93, var(--sang));
  border-color: var(--sang);
  color: #2a0610;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 24px rgba(255, 92, 122, .3);
}
.btn-danger:hover { filter: brightness(1.06); }

@media (max-width: 480px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
}
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .dlg, html.anim-reduites .dlg-voile { transition: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   CARTE ÉLECTRIFIÉE (Orage) : des décharges parcourent le cadre
   ───────────────────────────────────────────────────────────────────────────── */
.bt-card.electrisee {
  box-shadow: 0 0 0 1.5px rgba(127, 230, 255, .85), 0 0 18px rgba(127, 230, 255, .55);
}
.bt-card.electrisee::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(210, 250, 255, .95) 48%, transparent 54%) 0 0 / 260% 100%,
    linear-gradient(295deg, transparent 44%, rgba(127, 230, 255, .8) 49%, transparent 53%) 0 0 / 300% 100%;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  animation: fxDecharge 1.1s steps(9) infinite;
}
@keyframes fxDecharge {
  0% { background-position: 120% 0, -40% 0; opacity: 1; }
  30% { opacity: .35; }
  45% { opacity: 1; }
  70% { opacity: .5; }
  100% { background-position: -80% 0, 140% 0; opacity: 1; }
}
.etat.mauvais[title^="Électrifiée"] { color: #7fe6ff; }
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .bt-card.electrisee::after { animation: none; opacity: .6; }


/* ─────────────────────────────────────────────────────────────────────────────
   PILE OU FACE — désigne le premier joueur en début de partie
   ───────────────────────────────────────────────────────────────────────────── */
.pf-voile {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  background: rgba(6, 7, 22, 0);
  transition: background .25s ease, opacity .25s ease;
  cursor: pointer;
}
.pf-voile.ouvert { background: rgba(6, 7, 22, .62); }
.pf-voile.ferme { opacity: 0; }

.pf-boite {
  width: min(420px, 92vw);
  padding: 1.4rem 1.4rem 1.3rem;
  border-radius: 24px;
  background: linear-gradient(170deg, #262b62, #15183f);
  border: 1px solid var(--bord-fort);
  box-shadow: 0 30px 80px rgba(3, 4, 20, .75);
  text-align: center;
  transform: translateY(16px) scale(.95);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1), opacity .25s ease;
}
.pf-voile.ouvert .pf-boite { transform: none; opacity: 1; }
.pf-titre {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--or-vif);
  letter-spacing: -.01em;
}

/* La pièce : deux faces dos à dos, lancée en l'air puis retombée */
.pf-scene {
  position: relative;
  height: 170px;
  perspective: 700px;
  margin: .4rem 0 .2rem;
}
.pf-piece {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 104px;
  height: 104px;
  margin-left: -52px;
  transform-style: preserve-3d;
  animation: pfLancer 1.5s cubic-bezier(.3, .05, .3, 1) forwards;
}
.pf-piece.pf-face { animation-name: pfLancerFace; }
.pf-cote {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: 0;
  backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff4c4, #f2c14e 45%, #b8860b 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35), inset 0 0 0 9px rgba(122, 83, 5, .45), 0 0 26px rgba(242, 193, 78, .45);
  color: #5b3d02;
}
.pf-cote span { font-size: 2rem; line-height: 1; }
.pf-cote b { font-family: var(--police-titre); font-size: .8rem; letter-spacing: .12em; }
.pf-cote-face { transform: rotateY(180deg); }
.pf-ombre {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 90px;
  height: 14px;
  margin-left: -45px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, .55), transparent 70%);
  animation: pfOmbre 1.5s cubic-bezier(.3, .05, .3, 1) forwards;
}
/* Pile : finit à plat côté pile (tours complets) ; face : un demi-tour de plus */
@keyframes pfLancer {
  0% { transform: translateY(40px) rotateY(0) rotateX(12deg); }
  45% { transform: translateY(-38px) rotateY(1260deg) rotateX(-8deg); }
  100% { transform: translateY(0) rotateY(2160deg) rotateX(0); }
}
@keyframes pfLancerFace {
  0% { transform: translateY(40px) rotateY(0) rotateX(12deg); }
  45% { transform: translateY(-38px) rotateY(1350deg) rotateX(-8deg); }
  100% { transform: translateY(0) rotateY(2340deg) rotateX(0); }
}
@keyframes pfOmbre {
  0% { transform: scale(1); opacity: .9; }
  45% { transform: scale(.45); opacity: .35; }
  100% { transform: scale(1); opacity: .9; }
}

.pf-camps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .3rem;
}
.pf-camp {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: .5rem .6rem;
  border-radius: 14px;
  background: rgba(160, 170, 255, .06);
  border: 1px solid var(--bord);
  transition: border-color .3s, background .3s, transform .3s;
}
.pf-camp small { font-size: .7rem; color: var(--texte-3); letter-spacing: .08em; text-transform: uppercase; }
.pf-camp b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-voile.revele .pf-camp.gagne {
  border-color: var(--or);
  background: rgba(242, 193, 78, .14);
  transform: translateY(-2px);
}
.pf-voile.revele .pf-camp:not(.gagne) { opacity: .55; }
.pf-resultat {
  margin-top: .9rem;
  min-height: 1.5em;
  color: var(--texte-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.pf-resultat b { color: var(--texte); }
.pf-voile.revele .pf-resultat { opacity: 1; transform: none; }

/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .pf-piece, html.anim-reduites .pf-ombre { animation-duration: .01s; }


/* Électrifiée : le vrai spectacle vient des arcs dessinés par fx.js. Le cadre,
   lui, garde un liseré froid qui vacille, et s'illumine d'un coup à chaque
   décharge (classe fx-zap). L'ancien balayage lumineux faisait artificiel. */
.bt-card.electrisee::after { display: none; }
.bt-card.electrisee {
  animation: fxCourant 2.4s steps(1) infinite;
}
@keyframes fxCourant {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(127, 230, 255, .75), 0 0 14px rgba(127, 230, 255, .4); }
  12% { box-shadow: 0 0 0 1.5px rgba(200, 246, 255, .95), 0 0 22px rgba(127, 230, 255, .6); }
  14% { box-shadow: 0 0 0 1.5px rgba(127, 230, 255, .6), 0 0 10px rgba(127, 230, 255, .3); }
  47% { box-shadow: 0 0 0 1.5px rgba(160, 238, 255, .9), 0 0 18px rgba(127, 230, 255, .5); }
  49% { box-shadow: 0 0 0 1.5px rgba(127, 230, 255, .7), 0 0 12px rgba(127, 230, 255, .35); }
}
.bt-card.fx-zap .bt-illu { animation: fxZap .11s steps(2) 1; }
@keyframes fxZap {
  0% { filter: brightness(1.35) saturate(.75); }
  100% { filter: none; }
}
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .bt-card.electrisee { animation: none; }
  html.anim-reduites .bt-card.fx-zap .bt-illu { animation: none; }


/* Action en route : les cartes et les boutons ne réagissent plus, jusqu'à ce
   que le nouvel état soit affiché. */
.bt-verrou .bt-card,
.bt-verrou [data-act],
.bt-verrou [data-act2] { cursor: progress; }
.bt-verrou .bt-mine .bt-card:not(.dead):hover { transform: none; }
.bt-verrou .bt-actions { opacity: .55; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   CLASSEMENT ET PROFIL
   ───────────────────────────────────────────────────────────────────────────── */
.cl-onglets { display: flex; gap: .6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cl-onglet {
  display: flex;
  flex-direction: column;
  padding: .55rem 1rem;
  border-radius: 14px;
  background: var(--panneau);
  border: 1px solid var(--bord);
  color: var(--texte);
  text-decoration: none;
  font-family: var(--police-titre);
  font-weight: 700;
}
.cl-onglet small { font-size: .7rem; font-weight: 500; color: var(--texte-3); font-family: var(--police-texte); }
.cl-onglet:hover { border-color: var(--bord-fort); }
.cl-onglet.actif {
  border-color: var(--or);
  color: var(--or-vif);
  background: radial-gradient(320px 90px at 0% 0%, rgba(242, 193, 78, .16), transparent 70%), var(--panneau);
}
.cl-moi-rang { margin: -.4rem 0 1rem; color: var(--texte-2); }

.cl-enveloppe { overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cl-table th {
  text-align: left;
  padding: .5rem .7rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-3);
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
.cl-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.cl-table tr:hover td { background: rgba(160, 170, 255, .05); }
.cl-rang { width: 3rem; font-family: var(--police-titre); font-weight: 800; color: var(--texte-2); }
.cl-nom { color: var(--texte); text-decoration: none; font-weight: 600; }
.cl-nom:hover { color: var(--or-vif); text-decoration: underline; }
.cl-elo { font-family: var(--police-titre); font-weight: 800; color: var(--or-vif); font-variant-numeric: tabular-nums; }
.cl-num { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.cl-moi td { background: rgba(242, 193, 78, .1); }
.cl-moi .cl-nom { color: var(--or-vif); }

.pr-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.pr-bloc {
  padding: 1.1rem 1.2rem;
  border-radius: var(--rayon-panneau);
  background: var(--panneau);
  border: 1px solid var(--bord);
}
.pr-bloc h2 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pr-bloc h2 small { font-size: .75rem; font-weight: 500; color: var(--texte-3); }
.pr-elo {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--or-vif);
}
.pr-elo span { font-size: .8rem; color: var(--texte-3); margin-left: .35rem; font-weight: 600; }
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin: 1rem 0 0; }
.pr-stats div { padding: .4rem .6rem; border-radius: 10px; background: rgba(160, 170, 255, .05); border: 1px solid var(--bord); }
.pr-stats dt { font-size: .68rem; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; }
.pr-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-titre { margin: 1.8rem 0 .8rem; font-size: 1.1rem; }

/* Écran de fin : variation de classement après un duel */
.fin-elo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 .2rem;
  padding: .6rem .9rem;
  border-radius: 14px;
  background: rgba(160, 170, 255, .07);
  border: 1px solid var(--bord);
}
.fin-elo-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.fin-elo b { font-family: var(--police-titre); font-size: 1.35rem; color: var(--or-vif); }
.fin-elo i { font-style: normal; font-weight: 800; }
.fin-elo.gagne i { color: var(--menthe); }
.fin-elo.perd i { color: var(--sang); }
.fin-elo-saison { flex-basis: 100%; font-size: .76rem; color: var(--texte-3); }

/* Le pseudo de la barre mène au profil de classement */
a.nav-name { color: inherit; text-decoration: none; }
a.nav-name:hover { color: var(--or-vif); }

/* ─────────────────────────────────────────────────────────────────────────────
   CHAT DE PARTIE — dans le panneau « Déroulé du combat »
   Grand écran : le déroulé occupe le haut, la discussion le bas.
   Petit écran : deux onglets, la colonne n'étant pas assez haute pour couper.
   ───────────────────────────────────────────────────────────────────────────── */
.bt-journal { display: flex; flex-direction: column; min-height: 0; }
/* En duel, le panneau est plus large : la discussion mérite mieux que la
   colonne prévue pour un simple journal. La classe est posée pour toute la
   partie, fin comprise, sinon la table changerait de taille au dernier coup. */
@media (min-width: 1000px) {
  #battleView.bt-duel .bt-arene { grid-template-columns: minmax(0, 1fr) 356px; }
}
.bt-journal-haut { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bt-journal-bas { display: none; min-height: 0; }
.bt-journal.avec-chat .bt-journal-bas { display: flex; flex: 0 0 56%; }
.bt-journal.avec-chat .bt-journal-haut { flex: 1 1 44%; border-bottom: 1px solid var(--bord); }
.bt-journal-onglets { display: none; }

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.chat[hidden] { display: none; }
.chat-tete { padding: .55rem .9rem .3rem; }
/* Le bouton de fermeture ne sert qu'au volet mobile */
.chat-fermer { display: none; }
.chat-titre {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--or);
}
.chat-corps { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Le fil : des bulles, alignées à droite pour soi et à gauche pour
   l'adversaire. Une simple liste de lignes se lisait mal dès que les messages
   s'enchaînaient. */
.chat-fil {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .35rem .8rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .92rem;
  line-height: 1.4;
  scrollbar-width: thin;
}
.chat-ligne {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  max-width: 88%;
  padding: .4rem .6rem;
  border-radius: 14px;
  background: rgba(160, 170, 255, .1);
  border: 1px solid var(--bord);
}
.chat-moi {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(242, 193, 78, .2), rgba(242, 193, 78, .12));
  border-color: rgba(242, 193, 78, .45);
  border-bottom-right-radius: 5px;
}
.chat-lui {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(127, 230, 255, .16), rgba(127, 230, 255, .08));
  border-color: rgba(127, 230, 255, .4);
  border-bottom-left-radius: 5px;
}
.chat-auteur {
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.chat-moi .chat-auteur { color: var(--or-vif); }
.chat-lui .chat-auteur { color: var(--eclair); }
.chat-texte { color: var(--texte); overflow-wrap: anywhere; }
.chat-ligne time {
  align-self: flex-end;
  font-size: .66rem;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.chat-systeme {
  align-self: center;
  max-width: 100%;
  background: none;
  border: none;
  padding: .1rem 0;
  color: var(--texte-3);
  font-size: .8rem;
  font-style: italic;
  text-align: center;
}

.chat-rapides { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .8rem .4rem; }
.chat-rapide {
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .08);
  color: var(--texte-2);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chat-rapide:hover { background: rgba(160, 170, 255, .2); color: var(--texte); border-color: var(--bord-fort); }

.chat-envoi { display: flex; gap: .4rem; padding: 0 .8rem .45rem; }
.chat-champ {
  flex: 1;
  min-width: 0;
  padding: .52rem .75rem;
  border-radius: 12px;
  border: 1px solid var(--bord-fort);
  background: rgba(8, 9, 30, .65);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
}
.chat-champ::placeholder { color: var(--texte-3); }
.chat-champ:focus { outline: 2px solid var(--eclair); outline-offset: 1px; }
.chat-bouton {
  width: 42px;
  border-radius: 12px;
  border: 1px solid var(--or);
  background: linear-gradient(180deg, var(--or-vif), var(--or));
  color: #1c1405;
  font-size: 1.05rem;
  cursor: pointer;
}
.chat-bouton:hover { filter: brightness(1.07); }
.chat-pied { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem .55rem; font-size: .74rem; }
.chat-couper {
  background: none; border: none; color: var(--texte-3); font: inherit; font-size: .74rem;
  text-decoration: underline; cursor: pointer; padding: 0;
}
.chat-couper:hover { color: var(--texte); }
.chat-erreur { color: var(--sang); margin-left: auto; text-align: right; }
.chat.chat-mute .chat-titre::after { content: " (coupé)"; color: var(--texte-3); font-weight: 500; text-transform: none; }

/* Partie terminée : on peut relire, plus écrire */
.chat.chat-fini .chat-rapides,
.chat.chat-fini .chat-envoi { display: none; }

/* ── Petit écran : onglets ── */
@media (max-width: 999px) {
  .bt-journal.avec-chat .bt-journal-onglets {
    display: flex;
    gap: .3rem;
    padding: .4rem .5rem 0;
  }
  .bt-journal-onglet {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .35rem .5rem;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--bord);
    border-bottom: none;
    background: rgba(160, 170, 255, .05);
    color: var(--texte-3);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .bt-journal-onglet.actif { color: var(--or-vif); background: rgba(242, 193, 78, .12); border-color: var(--or); }
  .bt-journal-pastille {
    min-width: 17px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--sang);
    color: #2a0610;
    font-size: .66rem;
    font-weight: 800;
  }
  /* Une seule zone à la fois. Sur téléphone, la colonne du journal fait une
     centaine de pixels : la discussion y serait écrasée. Elle s'ouvre donc en
     volet posé au-dessus de l'arène, ce qui laisse la table intacte. */
  /* Seule la zone de discussion se détache : si tout le panneau sortait du
     flux, la colonne disparaissait, la scène s'agrandissait et la table
     changeait de taille en ouvrant l'onglet. */
  .bt-journal.avec-chat { --volet-h: min(46vh, 340px); }
  .bt-journal.avec-chat[data-vue="chat"] .bt-journal-bas {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--hud-h, 172px) + 12px);
    height: var(--volet-h);
    z-index: 9350;
    border-radius: 16px;
    background: rgba(21, 24, 63, .97);
    border: 1px solid var(--bord-fort);
    box-shadow: 0 -10px 40px rgba(3, 4, 20, .6);
    overflow: hidden;
  }
  .bt-journal.avec-chat[data-vue="chat"] .chat-tete { display: block; }
  /* Le volet recouvre les onglets : il porte donc son propre bouton de
     fermeture, visible sans avoir à viser derrière lui. */
  .bt-journal.avec-chat[data-vue="chat"] .chat-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .8rem .3rem;
  }
  .chat-fermer {
    border: 1px solid var(--bord);
    background: rgba(160, 170, 255, .08);
    color: var(--texte-2);
    border-radius: 999px;
    padding: .2rem .7rem;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
  }
  .bt-journal.avec-chat .bt-journal-haut,
  .bt-journal.avec-chat .bt-journal-bas { flex: 1 1 auto; border-bottom: none; }
  /* Le déroulé reste en place sous le volet : sa disparition ferait, elle
     aussi, bouger la table. */
  .bt-journal.avec-chat:not([data-vue="chat"]) .bt-journal-bas { display: none; }
  .bt-journal.avec-chat .chat-tete { display: none; }
}

/* Badge « compte validé » dans le fil de discussion */
.chat-badge { margin-left: .25rem; vertical-align: -.12em; }

/* ── Administration : suivi en direct et fiches ── */
.direct-etat { display: inline-flex; align-items: center; gap: .45rem; color: var(--texte-2); font-size: .9rem; }
.direct-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--texte-3); }
.direct-pastille.vive { background: var(--menthe); box-shadow: 0 0 10px var(--menthe); animation: fxPulse 1.6s infinite; }
.direct-pastille.finie { background: var(--sang); }
@keyframes fxPulse { 50% { opacity: .35; } }

.direct-chat { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--rayon-panneau); background: var(--panneau); border: 1px solid var(--bord); }
.direct-chat h2 { margin: 0 0 .5rem; font-size: 1rem; }
.direct-fil { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.direct-message { display: flex; gap: .5rem; align-items: baseline; }
.direct-message b { color: var(--eclair); }
.direct-message time { margin-left: auto; font-size: .7rem; color: var(--texte-3); }

.adm-cartes { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--texte-2); }
.adm-messages { display: flex; flex-direction: column; gap: .3rem; }
.adm-message {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .4rem .7rem; border-radius: 10px;
  background: rgba(160, 170, 255, .05); border: 1px solid var(--bord); font-size: .88rem;
}
.adm-message time { color: var(--texte-3); font-size: .74rem; white-space: nowrap; }
.adm-message a { margin-left: auto; color: var(--or-vif); font-size: .74rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   BARRE DE NAVIGATION — toujours sur une seule ligne
   Avec « Classement » et « Parties », le contenu réclamait ~1300 px pour une
   barre bridée à 1240 : elle passait sur deux lignes à toutes les largeurs.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  .nav-in {
    max-width: 1420px;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .nav-in > .brand { flex: none; }
  /* Le pseudo est la partie compressible : il s'abrège plutôt que de pousser
     le reste sur une deuxième ligne. */
  .nav-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Place insuffisante pour les libellés : on garde les icônes, dont le sens
     est rappelé par l'infobulle. */
  @media (max-width: 1300px) {
    .nav-link span { display: none; }
    .nav-link { padding: .5rem .62rem; }
    .nav-name { max-width: 120px; }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMBAT SUR TÉLÉPHONE — rendre la table lisible
   L'en-tête occupait 228 px (un tiers de l'écran) et la barre du bas 200 px :
   il ne restait que 208 px pour le plateau, avec des cartes de 53 px de large.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* En combat, la barre du site se réduit à sa plus simple expression */
  body.en-combat .nav-in { padding: 6px 12px; gap: .5rem; }
  body.en-combat .nav-links { display: none; }
  body.en-combat .brand { font-size: .95rem; }
  body.en-combat .brand-bolt { width: 22px; height: 22px; }

  /* En-tête du combat : une ligne par camp, resserrée */
  .bt-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .2rem .4rem;
    padding: .4rem .6rem;
  }
  .bt-head .bt-side { flex: none; min-width: 0; }
  .bt-head .bt-side:last-of-type { text-align: right; }
  .bt-name { font-size: .92rem; }
  .bt-alive { font-size: .68rem; }
  .bt-status { grid-column: 1 / -1; height: 3.1rem; }
  .bt-status .bt-turn { font-size: 1rem; line-height: 1.5rem; min-height: 1.5rem; }
  .bt-status .bt-hint { font-size: .72rem; line-height: 1.25rem; min-height: 1.25rem; }
  /* Deux camps sur la première ligne, les deux boutons au milieu : l'en-tête
     tient en une grille de trois colonnes et ne déborde plus. */
  .bt-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .bt-head .bt-side { grid-row: 1; grid-column: 1; }
  .bt-head .bt-side-me { grid-column: 3; }
  /* Les deux boutons descendent sur une ligne à eux : la première ligne
     revient entièrement aux noms, qui n'ont plus besoin d'être tronqués. */
  .bt-head .bt-side { grid-column: 1 / 3; }
  .bt-head .bt-side-me { grid-column: 3 / -1; }
  .bt-head .bt-aide-btn { grid-row: 2; grid-column: 1 / 3; justify-self: end; }
  .bt-head .bt-forfeit { grid-row: 2; grid-column: 3 / -1; justify-self: start; }
  .bt-head .bt-aide-btn,
  .bt-head .bt-forfeit {
    padding: .28rem .5rem;
    font-size: .68rem;
    white-space: nowrap;
  }
  .bt-status { grid-row: 3; }
  .bt-ping { display: none; }              /* la latence reste en pied de page */

  /* Barre du bas : le détail du coup n'a pas besoin d'un tiers de l'écran */
  :root { --hud-h: 132px; }
  .bt-hud { padding: .4rem .6rem; }
  .bt-hud .bt-coup { font-size: .76rem; }
  .bt-journal { max-height: 64px; }

  /* Tout l'espace regagné va au plateau */
  .bt-scene { min-height: 46vh; }
}
@media (max-width: 700px) and (max-height: 700px) {
  :root { --hud-h: 118px; }
  .bt-scene { min-height: 42vh; }
}

/* Téléphone : deux rangées de trois cartes par camp.
   Six cartes de front sur 390 px donnaient des cartes de 53 px, illisibles.
   En 3 × 2, elles passent à environ 100 px : le plateau reste entier à
   l'écran et l'on distingue enfin les illustrations et les points de vie. */
@media (max-width: 700px) {
  .bt-team {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
  }
  .bt-card { width: auto; }
  .bt-illu { aspect-ratio: 1 / 1; }
}

/* Écran court : le journal cède sa place au plateau. Le dernier coup reste
   détaillé dans la barre du bas, donc rien n'est perdu. */
@media (max-width: 700px) and (max-height: 780px) {
  :root { --hud-h: 112px; }
  .bt-journal { display: none; }
  .bt-scene { min-height: 48vh; }
  .bt-head .bt-alive { display: none; }
}

/* Tutoriel sur téléphone : le coach passe en bas, au-dessus de la barre.
   Ancré en haut, il recouvrait les cartes adverses depuis que le plateau est
   plus grand — le tutoriel devenait injouable au doigt. */
@media (max-width: 700px) {
  body.page-tuto .coach {
    top: auto;
    bottom: calc(var(--hud-h, 132px) + 8px);
    max-height: 38vh;
    overflow-y: auto;
  }
  /* Le plateau se contente de la hauteur laissée libre par le coach : mieux
     vaut des cartes plus petites pendant l'apprentissage que des cartes
     inaccessibles au doigt. */
  body.page-tuto .coach { max-height: 30vh; }
  body.page-tuto .bt-scene { min-height: 0; max-height: 30vh; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARTES DÉSACTIVÉES ET SIGNALEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.card.desactivee { opacity: .55; filter: grayscale(.5); }
.card.desactivee .card-img, .card.desactivee .img-wrap { filter: grayscale(1) brightness(.7); }
.card-hs, .mini-hs {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sang);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255, 92, 122, .35), 0 2px 8px rgba(0, 0, 0, .5);
}
.mini-carte.desactivee { outline: 2px solid var(--sang); filter: grayscale(.8); position: relative; }
.mini-hs { width: 16px; height: 16px; font-size: .6rem; top: -4px; left: -4px; }

/* Bandeau d'alerte : volontairement gros et rouge — aucune partie n'est
   possible tant que la carte est dans l'équipe. */
.alerte-hs {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 92, 122, .22), rgba(255, 92, 122, .12));
  border: 2px solid var(--sang);
  box-shadow: 0 0 0 1px rgba(255, 92, 122, .25), 0 10px 30px rgba(255, 92, 122, .18);
  color: var(--texte);
  animation: hsPulse 2.4s ease-in-out infinite;
}
@keyframes hsPulse {
  50% { box-shadow: 0 0 0 1px rgba(255, 92, 122, .45), 0 10px 36px rgba(255, 92, 122, .32); }
}
.alerte-hs-icone { font-size: 1.7rem; line-height: 1; color: var(--sang); }
.alerte-hs b { display: block; font-family: var(--police-titre); font-size: 1.08rem; color: #ffd7de; }
.alerte-hs span { font-size: .92rem; color: var(--texte-2); }
.alerte-hs a { color: var(--or-vif); font-weight: 700; }
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */ html.anim-reduites .alerte-hs { animation: none; } 

/* Bouton de signalement dans l'aperçu d'une capacité */
.ap-signaler {
  margin-top: .6rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .08);
  color: var(--texte-3);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.ap-signaler:hover { color: var(--texte); border-color: var(--bord-fort); }

/* Administration des signalements */
.sig-groupe {
  margin-bottom: .9rem;
  padding: .9rem 1.1rem;
  border-radius: var(--rayon-panneau);
  background: var(--panneau);
  border: 1px solid var(--bord);
}
.sig-groupe.desactivee { border-color: var(--sang); background: linear-gradient(180deg, rgba(255, 92, 122, .1), var(--panneau)); }
.sig-groupe header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sig-groupe h3 { margin: 0; font-size: 1rem; }
.sig-groupe h3 small { display: block; font-size: .74rem; font-weight: 500; color: var(--texte-3); }
.sig-hs { color: var(--sang); font-size: .8rem; }
.sig-liste { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sig-liste li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .8rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  background: rgba(160, 170, 255, .05);
  border: 1px solid var(--bord);
}
.sig-texte { font-size: .9rem; }
.sig-meta { grid-column: 1; font-size: .72rem; color: var(--texte-3); }
.sig-boutons { grid-row: 1 / 3; display: flex; align-items: center; gap: .3rem; }
.sig-mini {
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .07);
  color: var(--texte-2);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.sig-mini:hover { color: var(--texte); border-color: var(--bord-fort); }

.card-etat.hs { background: var(--sang); color: #fff; font-weight: 800; }

/* ── Panneau d'administration : menu, recherche, tableaux ── */
.adm-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: -.4rem 0 1.4rem;
}
.adm-onglet {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .06);
  color: var(--texte-2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
}
.adm-onglet:hover { color: var(--texte); border-color: var(--bord-fort); }
.adm-onglet.actif { color: var(--or-vif); border-color: var(--or); background: rgba(242, 193, 78, .14); }

.adm-recherche { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.adm-recherche input, .adm-recherche select {
  padding: .5rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--bord-fort);
  background: rgba(8, 9, 30, .6);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
}
.adm-recherche input { flex: 1; min-width: 200px; }
.adm-vignette { width: 38px; height: 42px; object-fit: cover; border-radius: 6px; }
.adm-cartes-table td { vertical-align: middle; white-space: normal; }
.adm-cartes-table code { font-size: .72rem; color: var(--texte-3); }
tr.adm-hs td { background: rgba(255, 92, 122, .1); }
.sig-mini.danger { color: var(--sang); border-color: rgba(255, 92, 122, .4); }
.sig-mini.danger:hover { background: rgba(255, 92, 122, .16); color: #ffd7de; }

/* ── FoudreDex : toutes les cartes, possédées ou non ── */
.card-possede {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(8, 9, 30, .82);
  border: 1px solid var(--bord-fort);
  font-size: .7rem;
  font-weight: 800;
  color: var(--or-vif);
}
.card-possede.zero { color: var(--texte-3); font-weight: 600; }
.card.manquante { opacity: .62; }
.card.manquante .card-img, .card.manquante .img-wrap { filter: grayscale(.85) brightness(.8); }
.card.manquante:hover { opacity: .92; }

.card-capacite {
  margin-top: .3rem;
  font-size: .76rem;
  line-height: 1.35;
  color: var(--texte-2);
}
.card-capacite b { color: var(--or); display: block; font-size: .8rem; }

/* Le bouton de signalement, discret jusqu'au survol */
.card-signaler {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: rgba(8, 9, 30, .78);
  color: var(--texte-3);
  font-size: .82rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s;
}
.card:hover .card-signaler,
.card-signaler:focus-visible { opacity: 1; }
.card-signaler:hover { color: var(--texte); border-color: var(--bord-fort); }
@media (hover: none) { .card-signaler { opacity: .85; } }

/* Bouton de signalement dans la fiche d'une carte, en plein combat */
.fiche-signaler {
  /* La fiche est transparente aux clics pour ne pas gêner le plateau ; seul
     ce bouton les reçoit. */
  pointer-events: auto;
  margin-top: .5rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .08);
  color: var(--texte-3);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.fiche-signaler:hover { color: var(--texte); border-color: var(--bord-fort); }

/* ─────────────────────────────────────────────────────────────────────────────
   MENU DE SIGNALEMENT
   Posé au-dessus de TOUT, écran de fin compris : une partie peut se terminer
   pendant qu'on rédige.
   ───────────────────────────────────────────────────────────────────────────── */
.sig-voile {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(6, 7, 22, 0);
  backdrop-filter: blur(0);
  transition: background .18s ease, backdrop-filter .18s ease;
}
.sig-voile.ouvert { background: rgba(6, 7, 22, .7); backdrop-filter: blur(5px); }
.sig-fenetre {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  padding: 1.1rem 1.3rem 1.3rem;
  border-radius: 22px;
  background: linear-gradient(170deg, #262b62, #15183f);
  border: 1px solid var(--bord-fort);
  box-shadow: 0 30px 80px rgba(3, 4, 20, .75);
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .2s cubic-bezier(.2, .9, .3, 1), opacity .16s ease;
}
.sig-voile.ouvert .sig-fenetre { transform: none; opacity: 1; }

.sig-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.sig-tete h2 { flex: 1; margin: 0; font-family: var(--police-titre); font-size: 1.15rem; }
.sig-fermer, .sig-retour {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .08);
  color: var(--texte-2);
  font: inherit;
  cursor: pointer;
}
.sig-fermer:hover, .sig-retour:hover { color: var(--texte); border-color: var(--bord-fort); }
.sig-merci .sig-fermer { width: auto; height: auto; border-radius: 999px; padding: .5rem 1.2rem; }
.sig-aide { margin: .2rem 0 .8rem; font-size: .88rem; color: var(--texte-2); }

.sig-choix { display: grid; gap: .5rem; }
.sig-choix button {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  gap: .1rem .7rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .06);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sig-choix button:hover:not(:disabled) { background: rgba(160, 170, 255, .16); border-color: var(--bord-fort); }
.sig-choix button:disabled { opacity: .45; cursor: not-allowed; }
.sig-choix .sig-ico { grid-row: 1 / 3; font-size: 1.5rem; align-self: center; }
.sig-choix small { color: var(--texte-3); font-size: .78rem; }

/* La mini-table : deux rangées, comme le plateau */
.sig-table {
  padding: .7rem;
  border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(110, 139, 255, .12), transparent 70%), rgba(8, 9, 30, .5);
  border: 1px solid var(--bord);
}
.sig-camp { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); margin-bottom: .3rem; }
.sig-cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.sig-milieu { height: 1px; background: var(--bord); margin: .7rem 0; }
.sig-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .25rem .15rem;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .06);
  color: var(--texte-2);
  font: inherit;
  cursor: pointer;
}
.sig-carte:hover { border-color: var(--or); background: rgba(242, 193, 78, .14); color: var(--texte); }
.sig-carte img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.sig-carte-vide { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; background: rgba(8, 9, 30, .6); }
.sig-carte-nom { font-size: .6rem; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sig-carte.morte { opacity: .45; }

.sig-texte-champ {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--bord-fort);
  background: rgba(8, 9, 30, .6);
  color: var(--texte);
  font: inherit;
  font-size: .95rem;
  resize: vertical;
}
.sig-texte-champ:focus { outline: 2px solid var(--eclair); outline-offset: 1px; }
.sig-pied { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; }
.sig-erreur { flex: 1; color: var(--sang); font-size: .84rem; }
.sig-merci { text-align: center; padding: .6rem 0; }
.sig-merci .sig-ico { font-size: 2.4rem; }
.sig-merci h2 { margin: .3rem 0; font-family: var(--police-titre); }
.sig-merci p { color: var(--texte-2); margin-bottom: 1rem; }

/* Boutons d'appel */
.bt-signaler {
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(160, 170, 255, .08);
  color: var(--texte-3);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
  white-space: nowrap;
}
.bt-signaler:hover { color: var(--texte); border-color: var(--bord-fort); }

@media (max-width: 700px) {
  .sig-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-signaler { font-size: .68rem; padding: .25rem .5rem; }
}
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */ html.anim-reduites .sig-voile, html.anim-reduites .sig-fenetre { transition: none; } 

/* Logo de la barre : l'image remplace l'éclair dessiné en CSS. On garde la
   lueur dorée, qui faisait l'identité de la barre. */
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  filter: drop-shadow(0 0 12px rgba(242, 193, 78, .45));
}
.brand-bolt { display: none; }
body.en-combat .brand-logo,
body.page-tuto .brand-logo { width: 24px; height: 24px; }

/* Pied de page : liens légaux et mention de propriété */
.foot { flex-wrap: wrap; row-gap: .35rem; }
.foot-liens { display: flex; gap: .8rem; flex-wrap: wrap; }
.foot-liens a { color: var(--texte-3); text-decoration: none; }
.foot-liens a:hover { color: var(--texte); text-decoration: underline; }
.foot-copyright { flex-basis: 100%; color: var(--texte-3); font-size: .78rem; }
.foot-copyright a { color: var(--texte-3); }

/* Pages légales : du texte long, donc une colonne lisible */
.legal { max-width: 74ch; }
.legal h2 { margin: 1.6rem 0 .5rem; font-size: 1.12rem; color: var(--or-vif); }
.legal h3 { margin: 1.1rem 0 .3rem; font-size: .98rem; }
.legal p, .legal li { color: var(--texte-2); line-height: 1.65; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .3rem; }
.legal table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .9rem; }
.legal th, .legal td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.legal th { color: var(--texte-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.legal-maj { color: var(--texte-3); font-size: .84rem; }
.legal-avis {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(242, 193, 78, .1);
  border: 1px solid rgba(242, 193, 78, .4);
  color: var(--texte-2);
  font-size: .9rem;
}

/* Encart des demandes RGPD sur la fiche d'un joueur */
.rgpd-encart {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon-panneau);
  background: var(--panneau);
  border: 1px solid var(--bord-fort);
}
.rgpd-encart h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.rgpd-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .6rem; }
.rgpd-note { margin: 0; font-size: .82rem; color: var(--texte-3); line-height: 1.5; }
.rgpd-note b { color: var(--texte-2); }

/* ─────────────────────────────────────────────────────────────────────────────
   DÉCOR DE L'ACCUEIL
   Des cartes dérivent en arrière-plan, comme sur la couverture du jeu. Trois
   plans de profondeur : les plus lointaines sont petites, floues et sombres,
   les plus proches nettes et un peu plus vives. Tout est décoratif : le décor
   ne reçoit aucun clic et n'est pas lu par les lecteurs d'écran.
   ───────────────────────────────────────────────────────────────────────────── */
.decor {
  position: fixed;
  /* Le décor commence SOUS la barre : celle-ci est translucide, et une carte
     qui passait derrière restait visible au travers, comme posée sur le menu.
     La hauteur réelle est mesurée par decor.js (--nav-h). */
  inset: var(--nav-h, 68px) 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Le contenu doit rester lisible : le décor s'efface vers le centre */
  /* Le texte doit rester lisible : le décor s'efface derrière lui, mais
     beaucoup moins qu'avant — les cartes étaient devenues invisibles. */
  /* Deux masques combinés : le premier dégage le texte d'accroche, le second
     éteint le décor vers le bas, là où commencent les panneaux de contenu. */
  -webkit-mask:
    radial-gradient(85% 70% at 42% 42%, transparent 12%, rgba(0, 0, 0, .55) 42%, #000 72%),
    linear-gradient(#000 52%, rgba(0, 0, 0, .35) 76%, transparent 94%);
  mask:
    radial-gradient(85% 70% at 42% 42%, transparent 12%, rgba(0, 0, 0, .55) 42%, #000 72%),
    linear-gradient(#000 52%, rgba(0, 0, 0, .35) 76%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* La page d'accueil porte la classe « page-home » : contenu au-dessus du décor */
body.page-home main.wrap,
body.page-home .nav,
body.page-home .foot { position: relative; z-index: 1; }

.decor-carte {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 150px;
  border-radius: 10px;
  /* --px/--py : décalage de parallaxe écrit par decor.js. Il s'ajoute à la
     dérive, qui reste une animation CSS — le script ne pilote donc pas
     l'animation image par image. */
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(var(--r));
  animation: decorDerive 26s ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * -1);
  will-change: transform;
}
/* Plan lointain : petit, très flou, presque fondu dans le fond */
.decor-carte.plan-1 {
  width: 108px;
  filter: blur(3px) brightness(.85) saturate(1.05);
  opacity: .5;
  box-shadow: 0 0 26px rgba(110, 139, 255, .3);
  animation-duration: 26s;
}
/* Plan intermédiaire */
.decor-carte.plan-2 {
  width: 146px;
  filter: blur(1.4px) brightness(.95) saturate(1.1);
  opacity: .68;
  box-shadow: 0 0 30px rgba(110, 139, 255, .38), 0 10px 30px rgba(3, 4, 20, .5);
  animation-duration: 21s;
}
/* Plan proche : net, avec la lueur bleue de la couverture */
.decor-carte.plan-3 {
  width: 186px;
  filter: brightness(1.05) saturate(1.15);
  opacity: .82;
  box-shadow: 0 0 40px rgba(110, 139, 255, .5), 0 0 90px rgba(242, 193, 78, .12), 0 16px 44px rgba(3, 4, 20, .65);
  animation-duration: 17s;
}

/* Dérive : un déplacement franc mais lent, pour que le décor vive sans
   attirer l'œil. À ±14 px, le mouvement était imperceptible. */
@keyframes decorDerive {
  from { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(calc(var(--r) - 4deg)) translate(-26px, -34px) scale(.97); }
  to   { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(calc(var(--r) + 5deg)) translate(24px, 30px) scale(1.06); }
}

/* Téléphone : le décor accompagne l'accroche sans l'encombrer. Moins de
   cartes, plus petites, sans flou (coûteux à calculer) et resserrées vers le
   haut, où il y a de la place — le bas est occupé par le texte et les boutons. */
@media (max-width: 760px) {
  .decor {
    bottom: auto;
    height: 62vh;
    -webkit-mask: radial-gradient(90% 60% at 50% 30%, transparent 8%, rgba(0, 0, 0, .5) 40%, #000 70%),
      linear-gradient(#000 55%, transparent 96%);
    mask: radial-gradient(90% 60% at 50% 30%, transparent 8%, rgba(0, 0, 0, .5) 40%, #000 70%),
      linear-gradient(#000 55%, transparent 96%);
  }
  /* Les classes de plan portent leur propre filtre : il faut les viser
     explicitement pour retirer le flou, coûteux sur téléphone. */
  .decor-carte.plan-1,
  .decor-carte.plan-2,
  .decor-carte.plan-3 {
    filter: brightness(.95) saturate(1.05);
    box-shadow: 0 0 18px rgba(110, 139, 255, .3);
  }
  .decor-carte.plan-1 { width: 86px; opacity: .4; }
  .decor-carte.plan-2 { width: 96px; opacity: .5; }
  .decor-carte.plan-3 { width: 108px; opacity: .62; }
  /* Six suffisent : au-delà, l'écran se charge et le rendu coûte cher */
  .decor-carte:nth-child(n+7) { display: none; }
}
/* Animations réduites : déclenchées par le réglage du jeu, et non plus par
   celui du système (Windows coupe les animations pour des raisons de
   performance, ce qui figeait les cartes sans que le joueur l'ait voulu). */
  html.anim-reduites .decor-carte { animation: none; }


/* Interrupteur des animations, dans le pied de page */
.foot-anim {
  background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 100px;
  color: inherit; font: inherit; font-size: .78rem; cursor: pointer;
  padding: .3rem .8rem; opacity: .75; transition: opacity .15s, border-color .15s;
}
.foot-anim:hover { opacity: 1; border-color: rgba(255,255,255,.25); }
.foot-anim b { font-weight: 700; }

/* ═════════════════════════════════════════════════════════════════════════════
   NOTES DE VERSION — la page /patch-notes et la popup « Nouveautés »
   Rouge : ce qui baisse · vert : ce qui monte · bleu : ce qui est ajusté
   ═════════════════════════════════════════════════════════════════════════════ */
.pn { max-width: 860px; }
.pn-sous { color: var(--texte-2); margin-top: .35rem; }
.pn-version { margin-bottom: 3rem; }
.pn-tete { padding: 1.4rem 1.5rem; border-radius: var(--coupe);
  background: linear-gradient(160deg, rgba(110,139,255,.16), rgba(242,193,78,.08));
  border: 1px solid var(--liseré); margin-bottom: 1.4rem; }
.pn-date { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.pn-tete h2 { font-family: var(--police-titre); font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: .25rem 0 .5rem; }
.pn-accroche { color: var(--texte-2); line-height: 1.6; font-size: 1.02rem; }

.pn-essentiel { margin-bottom: 2rem; }
.pn-essentiel h3, .pn-section h3 { font-family: var(--police-titre); font-size: 1.15rem; margin-bottom: .8rem; }
.pn-essentiel ul { list-style: none; display: grid; gap: .5rem; }
.pn-essentiel li { display: flex; gap: .7rem; align-items: baseline; padding: .65rem .9rem; border-radius: 10px;
  background: var(--panneau); border: 1px solid var(--liseré); line-height: 1.5; }
.pn-essentiel li > span { font-size: .8rem; flex-shrink: 0; }

.pn-section { margin-bottom: 2.2rem; }
.pn-intro { color: var(--texte-2); line-height: 1.65; margin-bottom: 1rem; }

.pn-chg { position: relative; padding: 1.1rem 1.2rem 1.1rem 1.4rem; border-radius: var(--coupe);
  background: var(--panneau); border: 1px solid var(--liseré); margin-bottom: .9rem; overflow: hidden; }
.pn-chg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pn-teinte); }
.pn-chg-tete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem; }
.pn-chg-tete h4 { font-family: var(--police-titre); font-size: 1.12rem; }
.pn-sens { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 100px; color: var(--pn-teinte);
  border: 1px solid color-mix(in srgb, var(--pn-teinte) 45%, transparent);
  background: color-mix(in srgb, var(--pn-teinte) 12%, transparent); }
.pn-baisse { --pn-teinte: var(--sang); }
.pn-hausse { --pn-teinte: var(--menthe); }
.pn-ajustement { --pn-teinte: var(--arc-vif); }
.pn-nouveau { --pn-teinte: var(--or); }
.pn-essentiel li > span, .pn-pop-icone { color: var(--pn-teinte); }

.pn-cartes { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pn-carte { width: 74px; text-align: center; }
.pn-carte img { width: 74px; aspect-ratio: 450 / 490; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--liseré); box-shadow: 0 6px 16px rgba(0,0,0,.4); display: block; }
.pn-carte figcaption { font-size: .68rem; color: var(--texte-3); margin-top: .3rem; line-height: 1.25; }

.pn-lignes { display: grid; gap: .45rem; }
.pn-ligne { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; font-size: .9rem; line-height: 1.45; }
.pn-ligne.pn-seule { grid-template-columns: 1fr; }
.pn-avant { color: var(--texte-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texte-3) 70%, transparent); }
.pn-fleche { color: var(--or); font-weight: 800; }
.pn-apres { color: var(--texte); font-weight: 600; }
.pn-note { margin-top: .7rem; font-size: .86rem; color: var(--texte-2); line-height: 1.55; }
.pn-pourquoi { margin-top: .75rem; padding: .65rem .8rem; border-radius: 9px; font-size: .86rem; line-height: 1.55;
  color: var(--texte-2); background: rgba(0,0,0,.22); }
.pn-pourquoi b { color: var(--or-vif); }
.pn-tableau { width: 100%; max-width: 460px; margin-top: .9rem; border-collapse: collapse; font-size: .86rem; }
.pn-tableau caption { text-align: left; font-size: .74rem; color: var(--texte-3); margin-bottom: .35rem; }
.pn-tableau th { text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); padding: .3rem .5rem; }
.pn-tableau td { padding: .38rem .5rem; border-top: 1px solid var(--liseré); font-variant-numeric: tabular-nums; }
.pn-tableau td:last-child { color: var(--menthe); font-weight: 700; }

@media (max-width: 620px) {
  .pn-ligne { grid-template-columns: 1fr; gap: .1rem; }
  .pn-fleche { display: none; }
  .pn-avant::after { content: " →"; color: var(--or); text-decoration: none; display: inline-block; margin-left: .3rem; }
}

/* ── La popup ── */
.pn-pop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(5, 6, 20, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.pn-pop.ouverte { opacity: 1; }
.pn-pop-boite { width: 100%; max-width: 520px; max-height: calc(100vh - 2.4rem); overflow-y: auto;
  padding: 1.5rem 1.6rem; border-radius: 18px;
  background: linear-gradient(170deg, #1d2152, var(--nuit) 70%);
  border: 1px solid var(--liseré-fort); box-shadow: var(--ombre), 0 0 60px rgba(242,193,78,.12);
  transform: translateY(14px) scale(.97); transition: transform .25s cubic-bezier(.2,1.2,.4,1); }
.pn-pop.ouverte .pn-pop-boite { transform: none; }
.pn-pop-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.pn-pop-badge { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 100px; color: #241800; background: linear-gradient(135deg, var(--or-vif), var(--or)); }
.pn-pop-date { font-size: .78rem; color: var(--texte-3); }
.pn-pop-titre { font-family: var(--police-titre); font-size: 1.45rem; margin-bottom: .4rem; }
.pn-pop-accroche { color: var(--texte-2); line-height: 1.55; font-size: .94rem; margin-bottom: 1rem; }
.pn-pop-liste { list-style: none; display: grid; gap: .45rem; margin-bottom: 1.3rem; }
.pn-pop-liste li { display: flex; gap: .6rem; align-items: baseline; font-size: .9rem; line-height: 1.45;
  padding: .55rem .7rem; border-radius: 9px; background: var(--panneau); }
.pn-pop-icone { font-size: .76rem; flex-shrink: 0; }
.pn-pop-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.pn-pop-actions .btn { text-decoration: none; }

html.anim-reduites .pn-pop, html.anim-reduites .pn-pop-boite { transition: none; }

/* ═══════════════ PARTIES PERSO ═══════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-petit { padding: .45rem .85rem; font-size: .85rem; }

.perso {
  margin-top: 1.2rem;
  padding: 1.5rem;
  border-radius: var(--rayon-panneau);
  border: 1px solid rgba(75, 227, 163, .28);
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(75, 227, 163, .12), transparent 70%),
    var(--surface);
}
.perso-accueil { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; }
.perso-texte { flex: 1 1 320px; }
.perso-titre { margin: 0; font-family: var(--police-titre); font-size: 1.6rem; font-weight: 800; letter-spacing: -.015em; color: var(--texte); }
.perso-sous { margin: .4rem 0 0; color: var(--texte-2); }
.perso-entree { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.perso-code { display: flex; gap: .45rem; }
.perso-code input {
  width: 8.5rem; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid var(--bord); background: rgba(0, 0, 0, .25); color: var(--texte);
  font: 700 1rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .18em; text-transform: uppercase;
}
.perso-code input:focus { outline: 2px solid var(--menthe); outline-offset: 1px; }

.perso-tete { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.perso-etiquette { font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px;
  color: var(--menthe); background: rgba(75, 227, 163, .1); border: 1px solid rgba(75, 227, 163, .3); }

.perso-joueurs { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.perso-joueur { flex: 1 1 220px; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--bord); }
.perso-joueur b { display: block; color: var(--texte); }
.perso-joueur small { color: var(--texte-3); }
.perso-joueur.vide { border-style: dashed; }
.perso-joueur.vide b { color: var(--texte-2); font-weight: 600; }
.perso-vs { font-family: var(--police-titre); font-weight: 800; color: var(--texte-3); }
.perso-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; color: var(--texte); background: var(--feutre-2); }
.perso-avatar.petit { width: 32px; height: 32px; font-size: .85rem; }
.perso-avatar.attente { background: transparent; border: 2px dashed var(--texte-3); animation: persoAttente 1.6s ease-in-out infinite; }
@keyframes persoAttente { 50% { opacity: .35; } }

.perso-info { margin: 1rem 0 0; padding: .6rem .9rem; border-radius: 10px; font-size: .92rem;
  color: var(--eclair); background: rgba(127, 230, 255, .07); border: 1px solid rgba(127, 230, 255, .22); }

.perso-inviter { margin-top: 1.2rem; display: grid; gap: 1rem; }
.perso-libelle { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-3); margin-bottom: .4rem; }
.perso-champ { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.perso-valeur { flex: 1 1 260px; min-width: 0; padding: .55rem .8rem; border-radius: 9px; overflow-wrap: anywhere;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--bord); color: var(--texte); font-size: .9rem; }
.perso-valeur.perso-code { flex: 0 0 auto; font-size: 1.1rem; font-weight: 800; letter-spacing: .25em; }
.perso-valeur.masquee { color: var(--texte-2); }
.perso-aide { display: block; margin-top: .35rem; font-size: .8rem; color: var(--texte-3); }

.perso-amis { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 260px; overflow-y: auto; }
.perso-ami { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .16); }
.perso-ami-nom { flex: 1; min-width: 0; }
.perso-ami-nom b { display: block; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perso-ami-nom small { font-size: .8rem; color: var(--texte-3); }
.perso-ami-nom small.en-ligne { color: var(--menthe); }
.perso-ami-nom small.occupe { color: var(--or); }
.perso-vide { padding: .7rem; color: var(--texte-3); font-size: .9rem; }

.perso-actions { margin-top: 1.3rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.perso-actions .btn-primary { padding: .9rem 1.6rem; font-size: 1rem; }
.perso-attente { flex: 1 1 260px; margin: 0; display: flex; align-items: center; gap: .7rem; color: var(--texte-2); }

.fin-perso { margin: .8rem auto 0; font-size: .9rem; font-weight: 700; color: var(--menthe); text-align: center; }

/* Notifications d'invitation, sur toutes les pages */
.invit-pile { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 74px); right: 1rem; z-index: 9000;
  display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.invit { pointer-events: auto; position: relative; display: flex; gap: .8rem; padding: .9rem 2.2rem .9rem .9rem;
  border-radius: 14px; background: var(--nuit-2); border: 1px solid rgba(75, 227, 163, .4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); opacity: 0; transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease; }
.invit.visible { opacity: 1; transform: none; }
.invit.partante { opacity: 0; transform: translateX(16px); }
.invit-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; color: var(--texte); background: var(--feutre-2); }
.invit-corps p { margin: 0 0 .55rem; color: var(--texte-2); font-size: .93rem; line-height: 1.35; }
.invit-corps b { color: var(--texte); }
.invit-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.invit-fermer { position: absolute; top: .45rem; right: .45rem; width: 28px; height: 28px; border-radius: 8px;
  border: 0; background: transparent; color: var(--texte-3); cursor: pointer; }
.invit-fermer:hover { color: var(--texte); background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .invit, .invit.partante { transition: none; transform: none; }
  .perso-avatar.attente { animation: none; }
}