[x-cloak] { display: none !important; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: ease-in-out;
}
::view-transition-group(root) {
  animation-duration: 0.35s;
}

::view-transition-group(card-detail) {
  z-index: 9999;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(card-detail),
::view-transition-new(card-detail) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
}

.modal-shell {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.modal-shell.modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* ── Thème Sombre (défaut) ── */
:root, [data-theme="dark"] {
  --acc-300: 165 180 252;
  --acc-400: 129 140 248;
  --acc-500: 99 102 241;
  --acc-600: 79 70 229;
  --acc-900: 49 46 129;
}

/* ── Thème Luxe (Joaillerie) ── */
[data-theme="luxe"] {
  --acc-300: 225 158 142;
  --acc-400: 195 112  95;
  --acc-500: 162  82  68;
  --acc-600: 130  58  46;
  --acc-900:  40  13  10;
}

/* Typographie fine */
[data-theme="luxe"] body { font-weight: 300; letter-spacing: 0.015em; }

/* Grain de papier vergé très subtil */
[data-theme="luxe"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Backgrounds */
[data-theme="luxe"] .bg-gray-900  { background-color: #060408 !important; }
[data-theme="luxe"] .bg-gray-800  {
  background: rgba(255 235 228 / 0.045) !important;
  backdrop-filter: blur(18px) saturate(130%);
  position: relative;
}
[data-theme="luxe"] .bg-gray-700  { background-color: #1a0f16 !important; }
[data-theme="luxe"] .bg-gray-700\/30  { background-color: rgb(200 100 90 / 0.05) !important; }
[data-theme="luxe"] .bg-gray-700\/50  { background-color: rgb(200 100 90 / 0.09) !important; }
[data-theme="luxe"] .bg-gray-600  { background-color: #261620 !important; }
[data-theme="luxe"] .hover\:bg-gray-700\/30:hover { background-color: rgb(200 100 90 / 0.08) !important; }

/* Liseré vertical gauche sur les panneaux (signature joaillerie) */
[data-theme="luxe"] .bg-gray-800::before {
  content: '';
  position: absolute;
  top: 10%; left: 0;
  width: 2px; height: 80%;
  background: linear-gradient(180deg, transparent, rgb(210 120 100 / 0.50), transparent);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 1px 1px 0;
}

/* Bordures */
[data-theme="luxe"] .border-gray-700     { border-color: rgb(180 90 80 / 0.16) !important; }
[data-theme="luxe"] .border-gray-700\/40 { border-color: rgb(180 90 80 / 0.08) !important; }
[data-theme="luxe"] .border-gray-600     { border-color: rgb(180 90 80 / 0.26) !important; }
[data-theme="luxe"] .border-gray-500,
[data-theme="luxe"] .hover\:border-gray-500:hover { border-color: rgb(180 90 80 / 0.52) !important; }

/* Texte */
[data-theme="luxe"] .text-gray-100 { color: #f0e6e0 !important; }
[data-theme="luxe"] .text-gray-400 { color: #c8806a !important; }
[data-theme="luxe"] .text-gray-500 { color: #8a5045 !important; }
[data-theme="luxe"] .text-gray-600 { color: #604040 !important; }
[data-theme="luxe"] .text-white    { color: #ffffff !important; }
[data-theme="luxe"] .hover\:text-white:hover { color: #ffd8c8 !important; }
[data-theme="luxe"] .placeholder-gray-500::placeholder { color: #6a3835 !important; }

/* Titres haute couture : espacés, légers, incandescents */
[data-theme="luxe"] h2.text-gray-400 {
  color: #c87860 !important;
  -webkit-text-fill-color: #c87860;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 200;
  text-shadow: 0 0 22px rgba(200 100 80 / 0.30);
}

/* Boutons : shimmer perle lent */
[data-theme="luxe"] button.bg-accent-600:not(.rounded-full) { position: relative; overflow: hidden; }
[data-theme="luxe"] .bg-accent-600 {
  background: linear-gradient(150deg, #b87060 0%, #7a4035 100%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 200 180 / 0.30),
    inset 0 -1px 0 rgb(0 0 0 / 0.20),
    0 0 12px rgb(180 80 60 / 0.18),
    0 3px 8px rgb(0 0 0 / 0.50) !important;
}
[data-theme="luxe"] button.bg-accent-600:not(.rounded-full)::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 230 220 / 0.28), transparent);
  transform: skewX(-15deg);
  transition: left 0s;
}
[data-theme="luxe"] button.bg-accent-600:not(.rounded-full):hover::before {
  left: 160%;
  transition: left 0.8s ease-in;
}

/* Jauges : lueur perle rosée, douce (pas néon) */
[data-theme="luxe"] .bg-accent-500,
[data-theme="luxe"] .bg-emerald-500 {
  background-color: #fff0ec !important;
  box-shadow:
    0 0 4px  2px rgb(220 130 110 / 0.72),
    0 0 12px 4px rgb(175  80  60 / 0.38),
    0 0 24px 8px rgb(130  50  38 / 0.16) !important;
}

/* Badges statut */
[data-theme="luxe"] .bg-green-900\/50 { background-color: rgb(30 60 25 / 0.25) !important; }
[data-theme="luxe"] .text-green-300   { color: #6ddb8a !important; }
[data-theme="luxe"] .text-emerald-300 { color: #50c878 !important; }
[data-theme="luxe"] .bg-emerald-900   { background-color: rgb(20 50 20 / 0.4) !important; }

/* Ring des swatches de thème */
[data-theme="luxe"] .ring-white           { --tw-ring-color: #c8806a !important; }
[data-theme="luxe"] .ring-offset-gray-900 { --tw-ring-offset-color: #060408 !important; }

/* Ombre */
[data-theme="luxe"] .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(180 80 60 / 0.12) !important;
}

/* Contrôles audio */
[data-theme="luxe"] audio::-webkit-media-controls-panel { background-color: #1a0f16 !important; }

/* Focus ring */
[data-theme="luxe"] .focus\:border-accent-500:focus { border-color: rgb(var(--acc-500)) !important; }

/* Sélection de texte */
[data-theme="luxe"] *::selection { background: rgb(200 100 80 / 0.28); color: #f0e6e0; }

/* Curseur de saisie */
[data-theme="luxe"] input { caret-color: #c8806a; }

/* ── Thème Terminal (Matrix) ── */
[data-theme="terminal"] {
  --acc-300: 0 255 65;
  --acc-400: 0 210 52;
  --acc-500: 0 170 42;
  --acc-600: 0 80 16;
  --acc-900: 0 28 7;
}

[data-theme="terminal"] body {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace !important;
}

/* Scanlines */
[data-theme="terminal"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.1) 3px,
    rgba(0,0,0,0.1) 4px
  );
}

/* Coins droits (conserve rounded-full pour les cercles) */
[data-theme="terminal"] .rounded-2xl { border-radius: 0 !important; }
[data-theme="terminal"] .rounded-xl  { border-radius: 1px !important; }
[data-theme="terminal"] .rounded-lg  { border-radius: 1px !important; }

/* Backgrounds */
[data-theme="terminal"] .bg-gray-900     { background-color: #000000 !important; }
[data-theme="terminal"] .bg-gray-800     { background-color: #050c05 !important; }
[data-theme="terminal"] .bg-gray-700     { background-color: #0c190c !important; }
[data-theme="terminal"] .bg-gray-700\/30 { background-color: rgb(0 255 65 / 0.04) !important; }
[data-theme="terminal"] .bg-gray-700\/50 { background-color: rgb(0 255 65 / 0.07) !important; }
[data-theme="terminal"] .bg-gray-600     { background-color: #162e16 !important; }
[data-theme="terminal"] .hover\:bg-gray-700\/30:hover {
  background-color: rgb(0 255 65 / 0.07) !important;
  box-shadow: inset 3px 0 0 rgb(0 255 65 / 0.6), inset 0 0 28px rgb(0 255 65 / 0.05) !important;
}

/* Bordures */
[data-theme="terminal"] .border-gray-700     { border-color: rgb(0 255 65 / 0.22) !important; }
[data-theme="terminal"] .border-gray-700\/40 { border-color: rgb(0 255 65 / 0.09) !important; }
[data-theme="terminal"] .border-gray-600     { border-color: rgb(0 255 65 / 0.28) !important; }
[data-theme="terminal"] .border-gray-500,
[data-theme="terminal"] .hover\:border-gray-500:hover { border-color: rgb(0 255 65 / 0.55) !important; }

/* Texte */
[data-theme="terminal"] .text-gray-100 { color: #00ff41 !important; text-shadow: 0 0 7px rgba(0,255,65,0.3); }
[data-theme="terminal"] .text-gray-400 { color: #00cc33 !important; }
[data-theme="terminal"] .text-gray-500 { color: #008f22 !important; }
[data-theme="terminal"] .text-gray-600 { color: #005c16 !important; }
[data-theme="terminal"] .text-white    { color: #00ff41 !important; text-shadow: 0 0 7px rgba(0,255,65,0.3); }
[data-theme="terminal"] .hover\:text-white:hover { color: #00ff41 !important; text-shadow: 0 0 12px rgba(0,255,65,0.6); }
[data-theme="terminal"] .placeholder-gray-500::placeholder { color: #005c16 !important; }
[data-theme="terminal"] .opacity-40 { opacity: 0.3 !important; }

/* Sons : émeraude → matrix green */
[data-theme="terminal"] .text-emerald-300 { color: #00ff41 !important; }
[data-theme="terminal"] .bg-emerald-500   { background-color: rgb(0 160 40) !important; }
[data-theme="terminal"] .bg-emerald-900   { background-color: rgb(0 28 7) !important; }

/* Badges statut */
[data-theme="terminal"] .bg-green-900\/50 { background-color: rgb(0 255 65 / 0.1) !important; }
[data-theme="terminal"] .text-green-300   { color: #00ff41 !important; }

/* Ring swatches */
[data-theme="terminal"] .ring-white            { --tw-ring-color: #00ff41 !important; }
[data-theme="terminal"] .ring-offset-gray-900  { --tw-ring-offset-color: #050c05 !important; }

/* Ombre login : lueur verte */
[data-theme="terminal"] .shadow-2xl {
  box-shadow: 0 0 40px rgb(0 255 65 / 0.12), 0 0 80px rgb(0 255 65 / 0.05) !important;
}

/* ── Jauges néon : blanc avec halo vert matrix ── */
[data-theme="terminal"] .bg-accent-500,
[data-theme="terminal"] .bg-emerald-500 {
  background-color: #e8fff0 !important;
  box-shadow:
    0 0 5px  2px rgb(0 255 65 / 0.95),
    0 0 14px 4px rgb(0 200 40 / 0.55),
    0 0 30px 8px rgb(0 140 20 / 0.25) !important;
}

/* Vignette CRT */
[data-theme="terminal"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.75) 100%);
}

/* Sélection de texte */
[data-theme="terminal"] *::selection { background: rgb(0 255 65 / 0.25); color: #00ff41; }

/* Curseur de saisie */
[data-theme="terminal"] input { caret-color: #00ff41; }

/* Flicker CRT */
[data-theme="terminal"] body { animation: crt-flicker 8s infinite; }

/* Audio */
[data-theme="terminal"] audio::-webkit-media-controls-panel { background-color: #0c190c !important; }

/* ── Thème Bloodstone ── */
[data-theme="bloodstone"] {
  --acc-300: 210  70  80;
  --acc-400: 170  30  45;
  --acc-500: 135  15  28;
  --acc-600: 100   8  18;
  --acc-900:  28   4   8;
}

/* Vignette oppressante : coins quasi-noirs + halo rouge au bas */
[data-theme="bloodstone"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background:
    radial-gradient(ellipse 62% 62% at 50% 50%, transparent 38%, rgb(6 0 2 / 0.85) 100%),
    radial-gradient(ellipse 110% 55% at 50% 105%, rgb(60 5 10 / 0.18) 0%, transparent 60%);
}

/* Backgrounds */
[data-theme="bloodstone"] .bg-gray-900 { background-color: #080507 !important; }
[data-theme="bloodstone"] .bg-gray-800 { background-color: #0f0809 !important; position: relative; }

/* Braise qui monte par le bas des panneaux */
[data-theme="bloodstone"] .bg-gray-800::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(0deg, rgb(100 8 18 / 0.24) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

[data-theme="bloodstone"] .bg-gray-700     { background-color: #1a1010 !important; }
[data-theme="bloodstone"] .bg-gray-700\/30 { background-color: rgb(170 30 45 / 0.04) !important; }
[data-theme="bloodstone"] .bg-gray-700\/50 { background-color: rgb(170 30 45 / 0.08) !important; }
[data-theme="bloodstone"] .bg-gray-600     { background-color: #281616 !important; }
[data-theme="bloodstone"] .hover\:bg-gray-700\/30:hover { background-color: rgb(170 30 45 / 0.07) !important; }

/* Bordures */
[data-theme="bloodstone"] .border-gray-700     { border-color: rgb(170 30 45 / 0.18) !important; }
[data-theme="bloodstone"] .border-gray-700\/40 { border-color: rgb(170 30 45 / 0.08) !important; }
[data-theme="bloodstone"] .border-gray-600     { border-color: rgb(170 30 45 / 0.28) !important; }
[data-theme="bloodstone"] .border-gray-500,
[data-theme="bloodstone"] .hover\:border-gray-500:hover { border-color: rgb(170 30 45 / 0.55) !important; }

/* Texte */
[data-theme="bloodstone"] .text-gray-100 { color: #e8d0d2 !important; }
[data-theme="bloodstone"] .text-gray-400 { color: #a05860 !important; }
[data-theme="bloodstone"] .text-gray-500 { color: #6a3840 !important; }
[data-theme="bloodstone"] .text-gray-600 { color: #482830 !important; }
[data-theme="bloodstone"] .text-white    { color: #ffffff !important; }
[data-theme="bloodstone"] .hover\:text-white:hover { color: #f0c0c5 !important; }
[data-theme="bloodstone"] .placeholder-gray-500::placeholder { color: #5a3038 !important; }

/* Titres : rouge incandescent avec halo (pas de gradient clipé) */
[data-theme="bloodstone"] h2.text-gray-400 {
  color: #c02030 !important;
  -webkit-text-fill-color: #c02030;
  text-shadow:
    0 0 14px rgb(180 15 28 / 0.55),
    0 0 36px rgb(120  8 18 / 0.25);
}

/* Lueur sanglante statique (sans clignotement) */
[data-theme="bloodstone"] .bg-gray-800 {
  box-shadow: 0 0 16px 2px rgb(135 15 28 / 0.14);
}

/* Boutons : plaie qui s'ouvre au hover — pas de shimmer */
[data-theme="bloodstone"] .bg-accent-600 {
  background: linear-gradient(150deg, #8a0f1c 0%, #5a0812 100%) !important;
  box-shadow:
    inset 0  1px 0 rgb(220 80 90 / 0.25),
    inset 0 -1px 0 rgb(0 0 0 / 0.35),
    0 0 10px rgb(135 15 28 / 0.20),
    0 3px 8px rgb(0 0 0 / 0.65) !important;
  transition: box-shadow 0.35s ease !important;
}
[data-theme="bloodstone"] .bg-accent-600:hover {
  box-shadow:
    inset 0 0 30px rgb(60 0 10 / 0.70),
    0 0 30px rgb(135 15 28 / 0.60),
    0 3px 8px rgb(0 0 0 / 0.65) !important;
}

/* Jauges : halo cramoisi */
[data-theme="bloodstone"] .bg-accent-500,
[data-theme="bloodstone"] .bg-emerald-500 {
  background-color: #ffe8ea !important;
  box-shadow:
    0 0 5px  2px rgb(210  70  80 / 0.95),
    0 0 14px 4px rgb(135  15  28 / 0.60),
    0 0 28px 8px rgb( 80   5  15 / 0.30) !important;
}

/* Badges statut */
[data-theme="bloodstone"] .bg-green-900\/50 { background-color: rgb(135 15 28 / 0.10) !important; }
[data-theme="bloodstone"] .text-green-300   { color: #e05060 !important; }
[data-theme="bloodstone"] .text-emerald-300 { color: #e05060 !important; }
[data-theme="bloodstone"] .bg-emerald-900   { background-color: rgb(28 4 8) !important; }

/* Ring swatches */
[data-theme="bloodstone"] .ring-white           { --tw-ring-color: #c02030 !important; }
[data-theme="bloodstone"] .ring-offset-gray-900 { --tw-ring-offset-color: #0f0809 !important; }

/* Ombre login */
[data-theme="bloodstone"] .shadow-2xl {
  box-shadow:
    0 0 60px  rgb(135 15 28 / 0.10),
    0 0 120px rgb( 80  5 15 / 0.05),
    0 25px 50px -12px rgb(0 0 0 / 0.90) !important;
}

/* Sélection & caret */
[data-theme="bloodstone"] *::selection { background: rgb(170 30 45 / 0.28); color: #f0c0c5; }
[data-theme="bloodstone"] input { caret-color: #c02030; }

/* Audio */
[data-theme="bloodstone"] audio::-webkit-media-controls-panel { background-color: #1a1010 !important; }

/* ── Thème Saros (luxe doré) ── */
[data-theme="saros"] {
  --acc-300: 255 200 80;
  --acc-400: 255 155 20;
  --acc-500: 230 115 0;
  --acc-600: 190 100 0;
  --acc-900: 52 30 0;
}

/* ── Spotlight ambiant sur le fond ── */
[data-theme="saros"] .bg-gray-900 {
  background:
    radial-gradient(ellipse 85% 55% at 50% -5%, rgb(255 150 0 / 0.07) 0%, transparent 65%),
    #080604 !important;
}

/* ── Highlight doré en haut des cartes ── */
[data-theme="saros"] .bg-gray-800 { background-color: #100d07 !important; position: relative; }
[data-theme="saros"] .bg-gray-800::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 150 0 / 0.35), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Shimmer sur les boutons au hover ── */
[data-theme="saros"] button.bg-accent-600:not(.rounded-full) {
  position: relative;
  overflow: hidden;
}
[data-theme="saros"] button.bg-accent-600:not(.rounded-full)::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.18), transparent);
  transform: skewX(-15deg);
  transition: left 0s;
}
[data-theme="saros"] button.bg-accent-600:not(.rounded-full):hover::before {
  left: 160%;
  transition: left 0.5s ease-in;
}

/* Backgrounds (suite) */
[data-theme="saros"] .bg-gray-700     { background-color: #1c1609 !important; }
[data-theme="saros"] .bg-gray-700\/30 { background-color: rgb(255 150 0 / 0.04) !important; }
[data-theme="saros"] .bg-gray-700\/50 { background-color: rgb(255 150 0 / 0.08) !important; }
[data-theme="saros"] .bg-gray-600     { background-color: #2e200a !important; }
[data-theme="saros"] .hover\:bg-gray-700\/30:hover { background-color: rgb(255 150 0 / 0.07) !important; }

/* Bordures */
[data-theme="saros"] .border-gray-700     { border-color: rgb(255 150 0 / 0.18) !important; }
[data-theme="saros"] .border-gray-700\/40 { border-color: rgb(255 150 0 / 0.08) !important; }
[data-theme="saros"] .border-gray-600     { border-color: rgb(255 150 0 / 0.28) !important; }
[data-theme="saros"] .border-gray-500,
[data-theme="saros"] .hover\:border-gray-500:hover { border-color: rgb(255 150 0 / 0.55) !important; }

/* Texte */
[data-theme="saros"] .text-gray-100 {
  color: #ffd68a !important;
  text-shadow: 0 0 12px rgba(255, 160, 0, 0.2);
}
[data-theme="saros"] .text-gray-400 { color: #d47a00 !important; }
[data-theme="saros"] .text-gray-500 { color: #8a5200 !important; }
[data-theme="saros"] .text-gray-600 { color: #5a3500 !important; }
[data-theme="saros"] .text-white    { color: #1a0f00 !important; }
[data-theme="saros"] .hover\:text-white:hover { color: #ff9500 !important; }
[data-theme="saros"] .placeholder-gray-500::placeholder { color: #5a3500 !important; }

/* Boutons : dégradé + reflet interne */
[data-theme="saros"] .bg-accent-600 {
  background: linear-gradient(150deg, #df8800 0%, #a05400 100%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 220 80 / 0.35),
    inset 0 -1px 0 rgb(0 0 0 / 0.25),
    0 0 14px rgb(255 150 0 / 0.25),
    0 3px 8px rgb(0 0 0 / 0.55) !important;
}

/* ── Jauges Saros : néon doré ── */
[data-theme="saros"] .bg-accent-500,
[data-theme="saros"] .bg-emerald-500 {
  background-color: #fffde8 !important;
  box-shadow:
    0 0 5px  2px rgb(255 210 80 / 0.95),
    0 0 14px 4px rgb(255 150 0 / 0.65),
    0 0 28px 8px rgb(200 80 0 / 0.3) !important;
}

/* Badges statut */
[data-theme="saros"] .bg-green-900\/50 { background-color: rgb(255 150 0 / 0.08) !important; }
[data-theme="saros"] .text-green-300   { color: #ff9500 !important; }
[data-theme="saros"] .text-emerald-300 { color: #ff9500 !important; }
[data-theme="saros"] .bg-emerald-900   { background-color: rgb(52 30 0) !important; }

/* Ring swatches */
[data-theme="saros"] .ring-white            { --tw-ring-color: #ff9500 !important; }
[data-theme="saros"] .ring-offset-gray-900  { --tw-ring-offset-color: #100d07 !important; }

/* Ombre login : lueur ambrée */
[data-theme="saros"] .shadow-2xl {
  box-shadow:
    0 0 60px  rgb(255 150 0 / 0.1),
    0 0 120px rgb(230 100 0 / 0.05),
    0 25px 50px -12px rgb(0 0 0 / 0.9) !important;
}

/* ── Respiration des cartes ── */
[data-theme="saros"] .bg-gray-800 {
  animation: saros-breathe 4s ease-in-out infinite;
}

/* ── Titres de section en dégradé or animé ── */
[data-theme="saros"] h2.text-gray-400 {
  background: linear-gradient(90deg, #cc7700, #ffd68a, #ff9500, #ffd68a, #cc7700);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: saros-text-shine 12s linear infinite;
}

/* Audio */
[data-theme="saros"] audio::-webkit-media-controls-panel { background-color: #1c1609 !important; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes crt-flicker {
  0%,  19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55%                            { opacity: 0.96; }
}
@keyframes saros-breathe {
  0%, 100% { box-shadow: 0 0 0px  0px rgb(255 150 0 / 0); }
  50%       { box-shadow: 0 0 12px 2px rgb(255 150 0 / 0.16); }
}
@keyframes saros-text-shine {
  0%   { background-position: 250% center; }
  100% { background-position: -250% center; }
}

/* ═══════════════════════════════════════════
   Bibliothèque — Composant carte
═══════════════════════════════════════════ */

.card {
  position: relative;
  width: 190px;
  height: 285px;
  border-radius: 14px;
  /* visible : le cadre ornemental déborde de la carte ; chaque calque se
     rogne lui-même via border-radius (les pseudos glitch via .card-art) */
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.3);
  transition: box-shadow 0.35s ease;
  --mx: 50;
  --my: 50;
}

.card-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  overflow: hidden; /* contient les pseudos glitch qui se translatent */
}

.card-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(to bottom, transparent 42%, rgba(0,0,0,0.6) 68%, rgba(0,0,0,0.88) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.1);
}

/* Cadre ornemental (test) — posé AU-DESSUS de tout et légèrement plus grand
   que la carte : le rail tombe pile sur le bord, les ornements dépassent.
   Alternance temporaire dans les grilles pour comparer les 4 variantes. */
.card-cadre {
  position: absolute;
  inset: -2.95% -4.25%;
  pointer-events: none;
  z-index: 12;
  background: url('/fx/cadre-dore.webp') center / 100% 100% no-repeat;
}

.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 4;
}

.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
  z-index: 10;
}

.card-class {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  line-height: 1.2;
}

.card-subclass {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 1.3;
  margin-top: 1px;
}

.card-element {
  font-size: 14px;
  position: absolute;
  bottom: 16px; right: 20px;
  z-index: 10;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}

.card-artiste {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 10;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.04em;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,0.4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
}

.card-effet-badge {
  position: absolute;
  top: 8px; right: 16px;
  z-index: 10;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Brillant (holofoil à halo adaptatif — JS règle --b-* selon la luminance, anti-cramage) ── */
.card--brillant .card-art { transition: filter 0.3s ease; }
.card--brillant:hover .card-art { filter: brightness(var(--b-artbri, 1)); }

.card--brillant .card-shine {
  opacity: 0.18;
  background-image:
    url('/img/grain.webp'),
    url('/img/vmaxbg.jpg');
  background-size: 55%, 75%;
  background-position: center, center;
  background-blend-mode: soft-light, soft-light, color-burn;
  mix-blend-mode: color-dodge;
  transition: none;
}
.card--brillant:hover .card-shine {
  opacity: 1;
  background-image:
    url('/img/grain.webp'),
    url('/img/vmaxbg.jpg');
  background-size: 55%, 75%;
  background-position: center, center;
  background-blend-mode: hard-light, normal;
  filter: brightness(1.4) contrast(var(--b-contrast, 3.0)) saturate(1.0);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.card--brillant:hover .card-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),
    rgba(255, 255, 255, var(--b-glare, 0.42)) 0%,
    rgba(255, 255, 255, calc(var(--b-glare, 0.42) * 0.3)) 65%,
    transparent 75%
  );
  mix-blend-mode: hard-light;
}
.card--brillant {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12), 0 0 50px rgba(200, 220, 255, 0.06);
}
.card--brillant .card-effet-badge {
  color: #e8f0ff;
  border-color: rgba(220, 235, 255, 0.35);
}

/* ── Holographique (effet V sunpillar — poke-holo.simey.me) ── */
.card--holo .card-shine {
  opacity: 1;
  background-image:
    url('/img/grain.webp'),
    repeating-linear-gradient(0deg,
      hsl(2,   100%, 73%)  5%,
      hsl(53,  100%, 69%) 10%,
      hsl(93,  100%, 69%) 15%,
      hsl(176, 100%, 76%) 20%,
      hsl(228, 100%, 74%) 25%,
      hsl(283, 100%, 73%) 30%
    ),
    repeating-linear-gradient(133deg,
      #0e152e 0%,
      hsl(180, 10%, 60%)  3.8%,
      hsl(180, 29%, 66%)  4.5%,
      hsl(180, 10%, 60%)  5.2%,
      #0e152e 10%,
      #0e152e 12%
    );
  background-size: 500px 100%, 200% 700%, 600% 100%;
  background-position:
    center,
    0%                       calc(var(--my, 50) * 1%),
    calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%);
  background-blend-mode: soft-light, hue, hard-light;
  mix-blend-mode: color-dodge;
  filter: brightness(0.99) contrast(2) saturate(1);
  transition: filter 0.45s ease, background-position 0.25s ease-out;
}
.card--holo:hover .card-shine {
  filter: brightness(0.8) contrast(1) saturate(2.5);
}

/* halo lumineux qui suit le curseur — fondu au survol */
.card--holo .card-shine::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle 70% at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
    hsla(0, 0%, 100%, 0.45) 0%,
    hsla(0, 0%, 100%, 0.15) 28%,
    transparent 62%
  );
  mix-blend-mode: color-dodge;
  transition: opacity 0.45s ease;
}
.card--holo:hover .card-shine::before { opacity: 1; }

/* seconde nappe holographique (parallaxe) — fondu au survol */
.card--holo .card-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    url('/img/grain.webp'),
    repeating-linear-gradient(0deg,
      hsl(2,   100%, 73%)  5%,
      hsl(53,  100%, 69%) 10%,
      hsl(93,  100%, 69%) 15%,
      hsl(176, 100%, 76%) 20%,
      hsl(228, 100%, 74%) 25%,
      hsl(283, 100%, 73%) 30%
    ),
    repeating-linear-gradient(133deg,
      #0e152e 0%,
      hsl(180, 10%, 60%)  3.8%,
      hsl(180, 29%, 66%)  4.5%,
      hsl(180, 10%, 60%)  5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(farthest-corner circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.65) 20%, hsla(0, 0%, 0%, 0.5) 90%
    );
  background-size: 500px 100%, 200% 400%, 390% 100%, 200% 100%;
  background-position:
    center,
    0%                                   calc(100% - var(--my, 50) * 1%),
    calc(100% - var(--mx, 50) * 1%)      calc(100% - var(--my, 50) * 1%),
    calc(var(--mx, 50) * 1%)             calc(var(--my, 50) * 1%);
  background-blend-mode: soft-light, hue, hard-light, normal;
  filter: brightness(1) contrast(1.3) saturate(1.2);
  opacity: 0;
  mix-blend-mode: exclusion;
  transition: opacity 0.45s ease, background-position 0.25s ease-out;
}
.card--holo:hover .card-shine::after { opacity: 0.7; }
.card--holo .card-effet-badge {
  color: #d4b0ff;
  border-color: rgba(180, 100, 255, 0.4);
}


/* ── Normal (cadre classique) ── */
.card--normal .card-frame {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 50%,
    rgba(6, 10, 26, 0.62) 62%,
    rgba(6, 10, 26, 0.95) 100%
  );
  box-shadow: inset 0 0 0 1.5px rgba(200, 215, 255, 0.2);
}

/* ── Glitch ── */
.card--glitch .card-art {
  animation: card-glitch 5s infinite;
}
/* Aberration chromatique — copies tintées rouge/cyan décalées selon le pointeur */
.card--glitch .card-art::before,
.card--glitch .card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.08s linear;
}
.card--glitch:hover .card-art::before,
.card--glitch:hover .card-art::after {
  opacity: 0.35;
}
.card--glitch .card-art::before {
  filter: grayscale(1) sepia(1) saturate(200%) hue-rotate(-50deg) brightness(1.5);
  transform: translate(
    calc((var(--mx, 50) - 50) * 0.18px),
    calc((var(--my, 50) - 50) * 0.18px)
  );
}
.card--glitch .card-art::after {
  filter: grayscale(1) sepia(1) saturate(200%) hue-rotate(140deg) brightness(1.5);
  transform: translate(
    calc((50 - var(--mx, 50)) * 0.18px),
    calc((50 - var(--my, 50)) * 0.18px)
  );
}
.card--glitch .card-shine {
  opacity: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 3px
  );
}
.card--glitch .card-effet-badge {
  color: #0ff;
  border-color: rgba(0, 255, 255, 0.35);
  font-family: monospace;
}

@keyframes card-glitch {
  0%, 83%, 100% { filter: none; transform: translate(0); }
  85% { filter: hue-rotate(200deg) saturate(3); transform: translate(-3px, 0); }
  87% { filter: hue-rotate(-90deg) saturate(2); transform: translate(3px, 1px); }
  89% { filter: brightness(1.8) saturate(0); transform: translate(0, -2px); }
  91% { filter: none; transform: translate(0); }
}


/* ── Void (cosmique + holo pourpre) ── */
.card--void .card-shine {
  opacity: 0.65;
  background:
    repeating-linear-gradient(
      115deg,
      transparent                 0%,
      hsla(  0, 90%, 55%, 0.07)   3%,
      hsla(330, 90%, 60%, 0.09)   6%,
      hsla(280, 90%, 60%, 0.09)   9%,
      hsla(240, 80%, 60%, 0.05)  12%,
      transparent                15%
    ),
    radial-gradient(
      ellipse 160% 120% at 50% 110%,
      hsl(270, 80%, 24%) 0%,
      hsl(285, 75%, 14%) 50%,
      hsl(240, 40%,  6%) 100%
    );
  background-size: 300% 400%, 100% 100%;
  background-position: 50% 50%, center;
  mix-blend-mode: color;
  transition: opacity 0.5s ease;
}
.card--void:hover .card-shine {
  opacity: 1;
  background:
    repeating-linear-gradient(
      115deg,
      transparent                 0%,
      hsla(  0, 90%, 55%, 0.15)   3%,
      hsla(330, 90%, 65%, 0.20)   6%,
      hsla(280, 90%, 65%, 0.18)   9%,
      hsla(240, 80%, 60%, 0.10)  12%,
      transparent                15%
    ),
    radial-gradient(
      ellipse 160% 120% at calc(var(--mx) * 1%) 110%,
      hsl(275, 85%, 30%) 0%,
      hsl(290, 80%, 18%) 45%,
      hsl(240, 40%,  6%) 100%
    );
  background-size: 300% 400%, 100% 100%;
  background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%), center;
  mix-blend-mode: color;
  animation: void-pulse 4s ease-in-out infinite;
}

.card--void .card-shine::before {
  display: none;
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
}
.card--void:hover .card-shine::before {
  display: block;
  background: radial-gradient(
    circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
    rgba(180, 40, 255, 0.38) 0%,
    rgba(100, 0, 200, 0.18) 40%,
    transparent 72%
  );
  mix-blend-mode: screen;
}

.card--void .card-shine::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url('/img/illusion.png');
  background-size: 50%;
  mix-blend-mode: color-burn;
  filter: hue-rotate(200deg) saturate(2);
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.card--void:hover .card-shine::after {
  opacity: 0.45;
  filter: hue-rotate(200deg) saturate(3) brightness(0.8);
}

.card--void {
  box-shadow:
    0 0 0 1px rgba(80, 0, 120, 0.50),
    0 0 12px rgba(10, 0, 30, 0.95),
    0 0 40px rgba(60, 0, 100, 0.45),
    0 0 90px rgba(40, 0, 80, 0.20);
  transition: box-shadow 0.5s ease;
}
.card--void:hover {
  box-shadow:
    0 0 0 1px rgba(140, 0, 200, 0.70),
    0 0 18px rgba(10, 0, 30, 1.00),
    0 0 60px rgba(100, 0, 180, 0.65),
    0 0 130px rgba(70, 0, 140, 0.35);
}

.card--void .card-effet-badge {
  color: #d060c0;
  border-color: rgba(200, 40, 120, 0.45);
}

@keyframes void-pulse {
  0%, 100% { filter: none; }
  50%       { filter: brightness(1.15) saturate(1.3); }
}


/* ── Lumen (déclinaison claire du void — bandes or/blanc/cyan) ── */
.card--lumen .card-shine {
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      115deg,
      transparent                 0%,
      hsla( 45, 100%, 52%, 0.40)  3%,     /* rayure dorée */
      hsla( 35, 100%, 48%, 0.52)  6%,     /* rayure ambrée */
      hsla( 25,  95%, 45%, 0.46)  9%,     /* rayure orangée */
      hsla( 48, 100%, 55%, 0.26) 12%,     /* rayure or clair */
      transparent                15%
    ),
    linear-gradient(
      125deg,
      hsla( 45, 100%, 90%, 0.55)  0%,     /* doré lumineux */
      hsla( 60, 100%, 92%, 0.35) 25%,     /* chaud clair */
      hsla( 38,  95%, 80%, 0.42) 50%,     /* reflet ambré */
      hsla( 30,  95%, 82%, 0.42) 75%,     /* reflet ambré */
      hsla( 48, 100%, 90%, 0.55) 100%     /* doré lumineux */
    ),
    radial-gradient(
      ellipse 160% 120% at calc(var(--mx) * 1%) -10%,
      hsl( 52, 100%, 93%) 0%,
      hsl( 45,  96%, 79%) 45%,
      hsl( 37,  72%, 58%) 100%
    );
  background-size: 300% 400%, 300% 300%, 100% 100%;
  background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%), calc(var(--mx) * 1%) calc(var(--my) * 1%), center;
  mix-blend-mode: overlay;
  transition: opacity 0.55s ease, background-position 0.3s ease-out;
}
.card--lumen:hover .card-shine {
  opacity: 1;
  animation: lumen-pulse 4s ease-in-out infinite;
}

.card--lumen .card-shine::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
    rgba(255, 240, 190, 0.55) 0%,
    rgba(255, 210, 120, 0.22) 40%,
    transparent 72%
  );
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.card--lumen:hover .card-shine::before {
  opacity: 1;
}

.card--lumen .card-shine::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url('/img/illusion.png');
  background-size: 50%;
  mix-blend-mode: overlay;
  filter: hue-rotate(20deg) saturate(1.4) brightness(1.2);
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.card--lumen:hover .card-shine::after {
  opacity: 0.4;
  filter: hue-rotate(20deg) saturate(1.8) brightness(1.35);
}

.card--lumen {
  box-shadow:
    0 0 0 1px rgba(255, 220, 140, 0.45),
    0 0 16px rgba(255, 225, 150, 0.45),
    0 0 50px rgba(255, 200,  90, 0.30),
    0 0 100px rgba(255, 190, 80, 0.15);
  transition: box-shadow 0.5s ease;
}
.card--lumen:hover {
  box-shadow:
    0 0 0 1px rgba(255, 235, 170, 0.65),
    0 0 22px rgba(255, 230, 160, 0.60),
    0 0 70px rgba(255, 205, 100, 0.45),
    0 0 140px rgba(255, 195, 85, 0.22);
}

.card--lumen .card-effet-badge {
  color: #ffe9a8;
  border-color: rgba(255, 220, 130, 0.5);
}

@keyframes lumen-pulse {
  0%, 100% { filter: none; }
  50%       { filter: brightness(1.1) saturate(1.15); }
}


/* ══════════════════════════════════════════════════════════════
   Nouveaux effets (brouillon — tri ultérieur)
   ══════════════════════════════════════════════════════════════ */

/* ── Braise (charbons ardents — lueur rouge/orange montant du bas) ── */
/* distorsion de chaleur — l'image elle-même ondule (filtre SVG #fx-chaleur) */
.card--braise:hover .card-art { filter: url(#fx-chaleur) brightness(1.05) saturate(1.1); }
/* braises volantes (vidéo en boucle, fond noir → blend screen) */
.card--braise .card-video {
  mix-blend-mode: screen;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
.card--braise:hover .card-video { opacity: 1; }
.card--braise .card-shine {
  opacity: 0.55;
  background:
    radial-gradient(circle 2px   at 50% 50%, hsla(45,100%,78%,0.90) 0%, transparent 60%),
    radial-gradient(circle 1.5px at 50% 50%, hsla(30,100%,66%,0.80) 0%, transparent 60%),
    radial-gradient(circle 2.5px at 50% 50%, hsla(18,100%,58%,0.70) 0%, transparent 60%),
    radial-gradient(ellipse 160% 70% at 50% 118%, hsla(22,100%,52%,0.42) 0%, hsla(8,95%,40%,0.22) 45%, transparent 76%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 25% 70%, 55% 60%, 80% 65%, center;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.card--braise:hover .card-shine { opacity: 1; animation: braise-rise 2.4s linear infinite, braise-flicker 0.34s ease-in-out infinite; }
/* incrustation chaude — dégradé or → rouge fusionné dans l'image */
.card--braise .card-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.55;
  background: linear-gradient(180deg,
    hsla(45,100%,60%,0.30) 0%, hsla(25,100%,50%,0.42) 55%, hsla(8,95%,45%,0.55) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.5s ease;
}
.card--braise:hover .card-shine::after { opacity: 1; }
.card--braise {
  box-shadow: 0 0 0 1px rgba(255,120,40,0.5), 0 0 16px rgba(255,100,30,0.45), 0 0 52px rgba(220,60,10,0.28);
  transition: box-shadow 0.5s ease;
}
.card--braise:hover { box-shadow: 0 0 0 1px rgba(255,160,80,0.7), 0 0 24px rgba(255,130,50,0.62), 0 0 74px rgba(240,80,20,0.4); }
.card--braise .card-effet-badge { color: #ffb070; border-color: rgba(255,140,70,0.5); }
@keyframes braise-rise {
  0%   { background-position: 25% 120%, 55% 120%, 80% 120%, center; }
  100% { background-position: 28% -10%, 52% -10%, 83% -10%, center; }
}
@keyframes braise-flicker { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13) saturate(1.12); } }


/* ── Encre (dessin à l'encre permanent) ── */
.card--encre .card-art { filter: url(#fx-encre); }
.card--encre .card-shine {
  opacity: 0.45;
  background: linear-gradient(160deg, hsla(40,30%,96%,0.28) 0%, hsla(220,20%,20%,0.18) 100%);
  mix-blend-mode: overlay;
}
.card--encre {
  box-shadow: 0 0 0 1px rgba(232,226,210,0.35), 0 0 14px rgba(15,18,26,0.7), 0 0 44px rgba(210,200,180,0.12);
  transition: box-shadow 0.6s ease;
}
.card--encre:hover { box-shadow: 0 0 0 1px rgba(240,235,220,0.55), 0 0 20px rgba(10,12,20,0.85), 0 0 60px rgba(220,212,190,0.2); }
.card--encre .card-effet-badge { color: #efe9dc; border-color: rgba(230,222,205,0.5); }

/* ── Givre (verre martelé — l'image se déforme derrière le givre, filtre #fx-givre) ── */
.card--givre:hover .card-art { filter: url(#fx-givre) brightness(1.06); }
.card--givre .card-shine {
  opacity: 0.5;
  background:
    radial-gradient(circle 1.5px at 20% 22%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px   at 74% 34%, #eaf6ff 0%, transparent 100%),
    radial-gradient(circle 1.5px at 46% 80%, #fff 0%, transparent 100%),
    radial-gradient(ellipse 140% 130% at 50% 50%, transparent 48%, hsla(200,80%,88%,0.16) 74%, hsla(205,90%,92%,0.38) 100%);
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.card--givre:hover .card-shine { opacity: 1; mix-blend-mode: color-dodge; }
.card--givre .card-shine::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
    rgba(220,240,255,0.28) 0%, rgba(170,215,255,0.12) 40%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.card--givre:hover .card-shine::before { opacity: 1; }
/* incrustation froide — dégradé bleu ciel/blanc fusionné dans l'image */
.card--givre .card-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.5;
  background: linear-gradient(180deg,
    hsla(0,0%,100%,0.50) 0%, hsla(200,90%,85%,0.40) 45%, hsla(208,85%,60%,0.48) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.5s ease;
}
.card--givre:hover .card-shine::after { opacity: 1; }
.card--givre {
  box-shadow: 0 0 0 1px rgba(190,225,255,0.45), 0 0 16px rgba(175,215,255,0.35), 0 0 50px rgba(140,190,250,0.2);
  transition: box-shadow 0.5s ease;
}
.card--givre:hover { box-shadow: 0 0 0 1px rgba(220,240,255,0.7), 0 0 24px rgba(200,230,255,0.55), 0 0 70px rgba(160,205,255,0.32); }
.card--givre .card-effet-badge { color: #d8eeff; border-color: rgba(200,230,255,0.5); }

/* ── Abysse (au fond de l'eau : caustiques + dégradé bleu, ondulation au hover) ── */
.card--abysse .card-art {
  filter: saturate(0.85) brightness(0.9);
  transition: filter 0.45s ease;
}
.card--abysse:hover .card-art {
  filter: url(#fx-chaleur) saturate(0.9) brightness(0.95);
}
.card--abysse .card-video {
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.card--abysse:hover .card-video { opacity: 0.85; }
.card--abysse .card-shine { opacity: 1; }
.card--abysse .card-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.55;
  background: linear-gradient(180deg,
    hsla(190, 80%, 60%, 0.18) 0%,
    hsla(207, 90%, 42%, 0.38) 45%,
    hsla(222, 95%, 24%, 0.62) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.55s ease;
}
.card--abysse:hover .card-shine::after { opacity: 1; }
.card--abysse {
  box-shadow: 0 0 0 1px rgba(90,170,230,0.35), 0 6px 20px rgba(0,0,0,0.55), 0 0 26px rgba(30,110,200,0.25);
  transition: box-shadow 0.5s ease;
}
.card--abysse:hover { box-shadow: 0 0 0 1px rgba(120,200,255,0.6), 0 0 24px rgba(60,150,235,0.5), 0 0 70px rgba(20,90,190,0.35); }
.card--abysse .card-effet-badge { color: #9cd4ff; border-color: rgba(120,190,255,0.5); }

/* ── Orage (ciel d'avant-tempête au repos ; les éclairs frappent au survol) ── */
.card--orage .card-art {
  filter: contrast(1.12) brightness(0.82) saturate(0.85);
  transition: filter 0.4s ease;
}
.card--orage:hover .card-art { filter: contrast(1.1) brightness(1); }
.card--orage .card-video {
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card--orage:hover .card-video { opacity: 1; }
.card--orage .card-shine { opacity: 1; }
.card--orage .card-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.75;
  background: linear-gradient(180deg,
    hsla(230, 60%, 70%, 0.25) 0%, hsla(240, 50%, 40%, 0.30) 55%, hsla(250, 60%, 25%, 0.45) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.5s ease;
}
.card--orage:hover .card-shine::after { opacity: 1; }
.card--orage {
  box-shadow: 0 0 0 1px rgba(150,170,255,0.45), 0 6px 20px rgba(0,0,0,0.55), 0 0 24px rgba(90,110,230,0.4);
  transition: box-shadow 0.5s ease;
}
.card--orage:hover { box-shadow: 0 0 0 1px rgba(180,200,255,0.6), 0 0 24px rgba(120,150,255,0.5), 0 0 70px rgba(80,100,230,0.35); }
.card--orage .card-effet-badge { color: #b9c6ff; border-color: rgba(160,180,255,0.5); }

/* ── Toxique (brume verte empoisonnée — vidéo en boucle, fond noir → blend screen) ── */
.card--toxique .card-art {
  filter: saturate(0.9);
  transition: filter 0.5s ease;
}
.card--toxique:hover .card-art { filter: saturate(1.05) hue-rotate(12deg) brightness(1.02); }
.card--toxique .card-video {
  mix-blend-mode: screen;
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.card--toxique:hover .card-video { opacity: 0.95; }
.card--toxique .card-shine { opacity: 1; }
.card--toxique .card-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.5;
  background: linear-gradient(180deg,
    hsla(95, 80%, 55%, 0.20) 0%, hsla(120, 70%, 40%, 0.30) 55%, hsla(140, 80%, 22%, 0.48) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.5s ease;
}
.card--toxique:hover .card-shine::after { opacity: 1; }
.card--toxique {
  box-shadow: 0 0 0 1px rgba(120,220,120,0.35), 0 6px 20px rgba(0,0,0,0.55), 0 0 24px rgba(60,180,80,0.28);
  transition: box-shadow 0.5s ease;
}
.card--toxique:hover { box-shadow: 0 0 0 1px rgba(160,255,150,0.6), 0 0 24px rgba(90,220,100,0.5), 0 0 70px rgba(40,160,60,0.35); }
.card--toxique .card-effet-badge { color: #b8f0a0; border-color: rgba(150,230,130,0.5); }


/* ── Putréfaction (brume écarlate/rouille — vidéo en boucle, fond noir → blend screen) ── */
.card--putrefaction .card-art {
  filter: saturate(0.8) sepia(0.18);
  transition: filter 0.5s ease;
}
.card--putrefaction:hover .card-art { filter: saturate(0.9) sepia(0.32) hue-rotate(-12deg) brightness(0.96); }
.card--putrefaction .card-video {
  mix-blend-mode: screen;
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.card--putrefaction:hover .card-video { opacity: 0.95; }
.card--putrefaction .card-shine { opacity: 1; }
.card--putrefaction .card-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0.5;
  background: linear-gradient(180deg,
    hsla(30, 70%, 45%, 0.22) 0%, hsla(15, 75%, 35%, 0.32) 55%, hsla(5, 80%, 22%, 0.5) 100%);
  mix-blend-mode: overlay;
  transition: opacity 0.5s ease;
}
.card--putrefaction:hover .card-shine::after { opacity: 1; }
.card--putrefaction {
  box-shadow: 0 0 0 1px rgba(210,120,70,0.35), 0 6px 20px rgba(0,0,0,0.55), 0 0 24px rgba(170,80,40,0.28);
  transition: box-shadow 0.5s ease;
}
.card--putrefaction:hover { box-shadow: 0 0 0 1px rgba(240,150,100,0.6), 0 0 24px rgba(210,110,60,0.5), 0 0 70px rgba(160,60,30,0.35); }
.card--putrefaction .card-effet-badge { color: #f0b088; border-color: rgba(230,150,110,0.5); }

/* ── Fractale (test — croissance dorée fusionnée dans l'image, blend overlay) ── */
.card--fractale .card-video {
  mix-blend-mode: overlay;
  opacity: 0.65;
  transition: opacity 0.5s ease;
}
.card--fractale:hover .card-video { opacity: 1; }
.card--fractale .card-art {
  filter: saturate(1.05);
  transition: filter 0.5s ease;
}
.card--fractale:hover .card-art { filter: saturate(1.15) brightness(1.05); }
.card--fractale {
  box-shadow: 0 0 0 1px rgba(230,190,90,0.4), 0 6px 20px rgba(0,0,0,0.55), 0 0 24px rgba(200,150,50,0.28);
  transition: box-shadow 0.5s ease;
}
.card--fractale:hover { box-shadow: 0 0 0 1px rgba(255,220,130,0.65), 0 0 24px rgba(235,180,80,0.5), 0 0 70px rgba(190,130,40,0.32); }
.card--fractale .card-effet-badge { color: #ffe2a0; border-color: rgba(240,200,120,0.5); }

/* ── Distortion (test — voile spatial rouge/bleu en hard-light, figé au repos, animé au survol) ── */
.card--distortion .card-video {
  mix-blend-mode: hard-light;
  opacity: 0.75;
  transition: opacity 0.4s ease;
}
.card--distortion:hover .card-video { opacity: 0.95; }
.card--distortion .card-art {
  filter: brightness(0.88) saturate(0.95);
  transition: filter 0.5s ease;
}
.card--distortion:hover .card-art { filter: brightness(0.95) saturate(1.05); }
.card--distortion {
  box-shadow: 0 0 0 1px rgba(220,90,110,0.4), 0 6px 20px rgba(0,0,0,0.55), 0 0 24px rgba(120,60,200,0.3);
  transition: box-shadow 0.5s ease;
}
.card--distortion:hover { box-shadow: 0 0 0 1px rgba(255,130,150,0.6), 0 0 24px rgba(230,90,120,0.45), 0 0 70px rgba(110,60,220,0.4); }
.card--distortion .card-effet-badge { color: #ffb0c0; border-color: rgba(240,140,170,0.5); }