/* ============================================================
   Nethora Scans — skins de titre (fichier à part depuis le 04/10/2026)
   Chargé par l'appli (index.html, après style.css) ET par le tableau de
   bord (admin.html, servi par le serveur admin) : les deux affichent
   exactement les mêmes skins animés. Le moteur des effets est app/js/titres.js.
   ============================================================ */

/* Titre porté au-dessus du nom, partout (03/10/2026) */
.nt { display: inline-flex; flex-direction: column; line-height: 1.15; vertical-align: middle; min-width: 0; max-width: 100%; }
.nt-titre { font-size: .66em; font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-nom { overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Skins de titre (04/10/2026, demande de Kevin) : ils remplacent l'aspect
   du titre porté ET du nom, quel que soit le titre. Les effets partent des
   lettres : calque SVG .nt-calque dessiné par app/js/titres.js à la taille
   réelle du titre et du nom ; chaque effet est un <g class="fx-<type>">
   avec sa durée (--d), son décalage (--r) et sa position (--x, --y…).
   ============================================================ */
.nt-skin { position: relative; isolation: isolate; overflow: visible; }
.nt-skin .nt-titre, .nt-skin .nt-nom { position: relative; z-index: 1; overflow: visible; }
.nt-calque { position: absolute; left: -18px; top: -18px; z-index: 0; pointer-events: none; overflow: visible; }
.nt-calque.devant { z-index: 2; }
.nt-calque g { animation-duration: var(--d); animation-delay: var(--r); animation-iteration-count: infinite; animation-fill-mode: both; }
.nt-calque path, .nt-calque circle { animation-duration: inherit; animation-delay: inherit; animation-iteration-count: infinite; animation-fill-mode: both; }
.nt-skin.fx-pause .nt-calque, .nt-skin.fx-pause .nt-calque * { animation-play-state: paused !important; }
.nt-calque .h, .nt-calque .c { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Foudre rouge (Infamous) : cœur noir, bords rouge sombre qui luisent,
       vrais arcs électriques ramifiés qui jaillissent des lettres --- */
.skin-foudre-rouge .nt-texte, .skin-foudre-rouge .nt-titre {
  color: #0b0000; -webkit-text-stroke: .7px #9e0000;
  text-shadow: 0 0 2px #ff2222, 0 0 6px #c40000, 0 0 12px #7a0000, 0 0 22px #3d0000;
  animation: fr-crepite 3.4s steps(1) infinite;
}
.skin-foudre-rouge .nt-titre { -webkit-text-stroke: .5px #b00000; letter-spacing: .6px; }
@keyframes fr-crepite {
  0%, 100% { text-shadow: 0 0 2px #ff2222, 0 0 6px #c40000, 0 0 12px #7a0000, 0 0 22px #3d0000; }
  31% { text-shadow: 0 0 3px #ff4a4a, 0 0 9px #ff1010, 0 0 18px #a00000, 0 0 30px #5a0000; }
  33% { text-shadow: 0 0 2px #ff2222, 0 0 6px #c40000, 0 0 12px #7a0000, 0 0 22px #3d0000; }
  72% { text-shadow: 0 0 4px #ff5a5a, 0 0 11px #ff1a1a, 0 0 20px #b00000, 0 0 34px #600000; }
  74% { text-shadow: 0 0 1px #d01010, 0 0 4px #8a0000, 0 0 9px #500000; }
  76% { text-shadow: 0 0 2px #ff2222, 0 0 6px #c40000, 0 0 12px #7a0000, 0 0 22px #3d0000; }
}
.skin-foudre-rouge .nt-calque { filter: drop-shadow(0 0 1.5px #ff1a1a) drop-shadow(0 0 4px #9a0000); }
.skin-foudre-rouge .h { stroke: #c00000; stroke-width: calc(2.6px * var(--e, 1)); opacity: .6; }
.skin-foudre-rouge .c { stroke: #ff5a5a; stroke-width: calc(1px * var(--e, 1)); }
.skin-foudre-rouge .c.n { stroke: #050000; stroke-width: calc(1.3px * var(--e, 1)); }
.fx-eclair, .fx-arc { animation-name: fx-foudre; animation-timing-function: linear; }
/* Frappe : allumage brutal, deux ou trois scintillements, puis plus rien */
@keyframes fx-foudre {
  0% { opacity: 0; } 1% { opacity: 1; } 4% { opacity: .2; } 6% { opacity: 1; } 10% { opacity: .45; }
  13% { opacity: 1; } 17% { opacity: .7; } 20%, 100% { opacity: 0; }
}

/* --- Givre : bleu glacé, branches de givre qui poussent des lettres --- */
.skin-givre .nt-texte, .skin-givre .nt-titre {
  color: #eafcff; text-shadow: 0 0 3px #bdf1ff, 0 0 8px #5cc8ff, 0 0 16px #1f7fd6;
}
.skin-givre .nt-titre { color: #bfeeff; }
.skin-givre .nt-calque { filter: drop-shadow(0 0 1.5px #bdf1ff) drop-shadow(0 0 4px #2f9cff); }
.skin-givre .h { stroke: #5cc8ff; stroke-width: calc(2.2px * var(--e, 1)); opacity: .45; }
.skin-givre .c { stroke: #f2fdff; stroke-width: calc(.9px * var(--e, 1)); }
.fx-givre { animation-name: fx-pousse; animation-timing-function: ease-out; transform-origin: var(--ox) var(--oy); }
@keyframes fx-pousse {
  0% { opacity: 0; transform: scale(0); } 8% { opacity: 1; } 40% { transform: scale(1); }
  78% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); }
}
.skin-givre .fx-scintille path { fill: #ffffff; }
.fx-scintille, .fx-prisme, .fx-etoile { animation-name: fx-scintille; animation-timing-function: ease-in-out; }
@keyframes fx-scintille {
  0%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.1) rotate(0deg); }
  50% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(45deg); }
}

/* --- Brasier : lettres en feu, flammes qui lèchent le haut des lettres, braises --- */
.skin-brasier .nt-texte, .skin-brasier .nt-titre {
  background: linear-gradient(0deg, #ff2a00, #ff8a00 45%, #ffd54a 80%, #fff3b0); background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ff8a00;
  filter: drop-shadow(0 0 3px #ff6a00) drop-shadow(0 0 8px #c42a00); animation: br-flamme 1.6s ease-in-out infinite alternate;
}
@keyframes br-flamme { from { background-position: 0 0; filter: drop-shadow(0 0 3px #ff6a00) drop-shadow(0 0 8px #c42a00); } to { background-position: 0 100%; filter: drop-shadow(0 0 5px #ff9a1a) drop-shadow(0 0 12px #e03a00); } }
.skin-brasier .nt-calque { filter: drop-shadow(0 0 3px #ff5a00); }
.fx-flamme .ext { fill: #ff4a00; opacity: .85; }
.fx-flamme .int { fill: #ffd54a; }
.fx-flamme { animation-name: fx-flamme; animation-timing-function: ease-in-out; }
@keyframes fx-flamme {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.7, .2); }
  22% { opacity: .95; transform: translate(var(--x), var(--y)) scale(1, 1); }
  50% { transform: translate(var(--x), calc(var(--y) - 2px)) scale(.8, 1.25); }
  78% { opacity: .6; transform: translate(var(--x), calc(var(--y) - 5px)) scale(.5, .75); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 9px)) scale(.2, .3); }
}
.fx-braise circle { fill: #ffd27a; }
.fx-braise { animation-name: fx-braise; animation-timing-function: ease-out; }
@keyframes fx-braise {
  0% { opacity: 0; transform: translate(var(--x), var(--y)); } 12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))); }
}

/* --- Néant : cœur violet-noir, vrilles d'ombre qui s'échappent, ombres aspirées --- */
.skin-neant .nt-texte, .skin-neant .nt-titre {
  color: #120020; -webkit-text-stroke: .6px #7a2bd6;
  text-shadow: 0 0 3px #b06bff, 0 0 9px #6a1bb3, 0 0 18px #2e0a5c; animation: nn-pulse 2.8s ease-in-out infinite;
}
@keyframes nn-pulse { 50% { text-shadow: 0 0 5px #c48aff, 0 0 13px #8a2be2, 0 0 26px #3b0d78; } }
.skin-neant .nt-calque { filter: drop-shadow(0 0 2px #b06bff) drop-shadow(0 0 5px #5a1a9e); }
.skin-neant .h { stroke: #9b4dff; stroke-width: calc(3.4px * var(--e, 1)); opacity: .75; }
.skin-neant .c { stroke: #0a0014; stroke-width: calc(1.5px * var(--e, 1)); }
.fx-vrille { animation-name: fx-apparait; }
@keyframes fx-apparait { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-vrille path { stroke-dasharray: 1 1; animation-name: fx-vrille; animation-timing-function: ease-in-out; }
/* La vrille se déroule depuis les lettres, reste un instant, puis se détache vers l'extérieur */
@keyframes fx-vrille { 0% { stroke-dashoffset: 1; } 45%, 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.fx-ombre circle { fill: #07000e; stroke: #a05cff; stroke-width: calc(.7px * var(--e, 1)); }
.fx-ombre { animation-name: fx-aspire; animation-timing-function: ease-in; }
@keyframes fx-aspire {
  0% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.2); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.2); }
}

/* --- Sakura : rose tendre, pluie de pétales et de perles de rose sur le titre et le nom --- */
.skin-sakura .nt-texte, .skin-sakura .nt-titre {
  color: #ffe1ef; text-shadow: 0 0 3px #ffb3d6, 0 0 9px #ff6fae, 0 0 16px #c2346f;
}
.skin-sakura .nt-titre { color: #ffc2de; }
.skin-sakura .nt-calque { filter: drop-shadow(0 0 1.5px #ff7fb5); }
.fx-petale .nerv { fill: none; stroke: #ffffff; stroke-width: calc(.5px * var(--e, 1)); opacity: .5; }
.fx-perle circle { fill: #ff9cc4; }
.fx-perle .reflet { fill: #fff; }
.fx-petale, .fx-perle { animation-name: fx-pluie; animation-timing-function: linear; }
@keyframes fx-pluie {
  0% { opacity: 0; transform: translate(var(--x), var(--y0)) rotate(0deg) scaleX(1); }
  10% { opacity: 1; }
  35% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y0) + var(--h) * .35)) rotate(130deg) scaleX(.35); }
  70% { transform: translate(calc(var(--x) - var(--dx)), calc(var(--y0) + var(--h) * .7)) rotate(250deg) scaleX(1); }
  90% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y0) + var(--h))) rotate(360deg) scaleX(.5); }
}

/* --- Holographique : reflets irisés, étoiles multicolores qui apparaissent et disparaissent --- */
.skin-holo .nt-texte, .skin-holo .nt-titre {
  background: linear-gradient(90deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7afcff, #b6ffcf, #ff6ad5); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ad8cff;
  filter: drop-shadow(0 0 2px #ffffff88) drop-shadow(0 0 6px #ad8cff66); animation: ho-defile 4s linear infinite;
}
@keyframes ho-defile { from { background-position: 0 0; } to { background-position: 300% 0; } }
.skin-holo .nt-calque { filter: drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 0 4px #b6f0ff88); }
.skin-holo .h { stroke-width: calc(2.8px * var(--e, 1)); opacity: .8; }
.skin-holo .c { stroke: #ffffff; stroke-width: calc(.7px * var(--e, 1)); }
.fx-rayon { animation-name: fx-rayon; animation-timing-function: ease-out; transform-origin: var(--ox) var(--oy); }
@keyframes fx-rayon {
  0% { opacity: 0; transform: scale(0); } 8% { opacity: 1; transform: scale(1); }
  30% { opacity: .9; } 48%, 100% { opacity: 0; transform: scale(1.15); }
}

/* Étoile générique (scintille) : blanche, sauf couleur propre au skin */
.fx-scintille path { fill: #ffffff; }

/* --- Abysses : bleu des profondeurs, bulles qui remontent des lettres, ondes à leur pied --- */
.skin-abysses .nt-texte, .skin-abysses .nt-titre {
  color: #d6fbff; text-shadow: 0 0 3px #7ee8ff, 0 0 9px #00a6d6, 0 0 18px #023e8a; animation: ab-houle 3.6s ease-in-out infinite;
}
.skin-abysses .nt-titre { color: #9eefff; }
@keyframes ab-houle { 50% { text-shadow: 0 0 4px #a8f0ff, 0 0 12px #00b4d8, 0 0 24px #0353a4; } }
.skin-abysses .nt-calque { filter: drop-shadow(0 0 2px #48cae4); }
.skin-abysses .c { stroke: #9ff3ff; stroke-width: calc(.9px * var(--e, 1)); }
.fx-bulle circle { fill: #bff6ff; fill-opacity: .12; stroke: #bff6ff; stroke-width: calc(.7px * var(--e, 1)); }
.fx-bulle .reflet { fill: #ffffff; fill-opacity: .9; stroke: none; }
.fx-bulle { animation-name: fx-bulle; animation-timing-function: ease-in; }
@keyframes fx-bulle {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); }
  15% { opacity: 1; }
  50% { transform: translate(calc(var(--x) - var(--dx)), calc(var(--y) + var(--dy) * .5)) scale(.8); }
  88% { opacity: 1; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy) * .95)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.6); }
}
.fx-onde { animation-name: fx-onde; animation-timing-function: ease-out; transform-origin: var(--ox) var(--oy); }
@keyframes fx-onde { 0% { opacity: 0; transform: scale(.1); } 10% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }

/* --- Toxique : vert acide qui pulse, gouttes qui perlent sous les lettres et tombent --- */
.skin-toxique .nt-texte, .skin-toxique .nt-titre {
  color: #c8ff4d; text-shadow: 0 0 3px #a6ff00, 0 0 9px #4caf00, 0 0 18px #1b5e00; animation: tx-pulse 2.2s ease-in-out infinite;
}
@keyframes tx-pulse { 50% { color: #e4ff8a; text-shadow: 0 0 5px #c6ff3d, 0 0 13px #64dd17, 0 0 24px #2e7d00; } }
.skin-toxique .nt-calque { filter: drop-shadow(0 0 2px #7cff00); }
.skin-toxique .fx-bulle circle { fill: #7cff00; fill-opacity: .25; stroke: #c6ff5e; }
.skin-toxique .fx-bulle .reflet { fill: #f4ffd6; }
.fx-goutte path { fill: #9cff2e; }
.fx-goutte { animation-name: fx-goutte; animation-timing-function: ease-in; }
@keyframes fx-goutte {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4, .1); }
  10% { opacity: 1; }
  50% { transform: translate(var(--x), var(--y)) scale(1, 1); }
  60% { transform: translate(var(--x), calc(var(--y) + 1px)) scale(.85, 1.35); }
  92% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + var(--dy))) scale(.8, 1); }
}

/* --- Cosmos : nébuleuse qui défile dans les lettres, étoiles filantes --- */
.skin-cosmos .nt-texte, .skin-cosmos .nt-titre {
  background: linear-gradient(90deg, #a5b4fc, #f0abfc, #ffffff, #93c5fd, #a5b4fc); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #c7d2fe;
  filter: drop-shadow(0 0 3px #818cf8) drop-shadow(0 0 8px #4c1d95); animation: cs-nebuleuse 7s linear infinite;
}
@keyframes cs-nebuleuse { from { background-position: 0 0; } to { background-position: 250% 0; } }
.skin-cosmos .nt-calque { filter: drop-shadow(0 0 2px #c7d2fe); }
.skin-cosmos .fx-scintille path { fill: #e0e7ff; }
.fx-filante .queue { fill: none; stroke: #e0e7ff; stroke-width: calc(1px * var(--e, 1)); stroke-linecap: round; opacity: .75; }
.fx-filante circle { fill: #ffffff; }
.fx-filante { animation-name: fx-filante; animation-timing-function: linear; }
@keyframes fx-filante {
  0% { opacity: 0; transform: translate(var(--x), var(--y)); }
  3% { opacity: 1; } 20% { opacity: .9; }
  26%, 100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))); }
}

/* --- Or impérial : or massif balayé d'un reflet, pluie de paillettes d'or --- */
.skin-or-imperial .nt-texte, .skin-or-imperial .nt-titre {
  background: linear-gradient(100deg, #b8860b, #ffd700 35%, #fffbe0 50%, #ffd700 65%, #b8860b); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffd700;
  filter: drop-shadow(0 0 2px #ffcc33) drop-shadow(0 0 7px #a8790088); animation: or-reflet 3.2s linear infinite;
}
@keyframes or-reflet { from { background-position: 250% 0; } to { background-position: -50% 0; } }
.skin-or-imperial .nt-calque { filter: drop-shadow(0 0 2px #ffd700); }
.skin-or-imperial .fx-scintille path { fill: #fff6cc; }
.fx-paillette { animation-name: fx-pluie; animation-timing-function: linear; }

/* --- Glitch : lettres qui sautent en cyan et magenta, pixels et tranches parasites --- */
.skin-glitch .nt-texte { display: inline-block; }
.skin-glitch .nt-texte, .skin-glitch .nt-titre {
  color: #eaffff; text-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #00f0ff, 0 0 8px #00f0ff88; animation: gl-saute 2.6s steps(1, end) infinite;
}
@keyframes gl-saute {
  0%, 100% { text-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #00f0ff, 0 0 8px #00f0ff88; transform: none; }
  41% { text-shadow: -3px 0 #ff2bd6, 3px 0 #00f0ff, 0 0 8px #00f0ff88; transform: translateX(1px); }
  43% { text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; transform: translateX(-2px) skewX(-8deg); }
  45% { text-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #00f0ff, 0 0 8px #00f0ff88; transform: none; }
  78% { text-shadow: -4px 0 #ff2bd6, 2px 0 #00f0ff; transform: translateX(2px); }
  79% { text-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #00f0ff, 0 0 8px #00f0ff88; transform: none; }
}
.skin-glitch .nt-calque { filter: drop-shadow(0 0 2px #00f0ffaa); }
.fx-pixel, .fx-tranche { animation-timing-function: steps(1, end); }
.fx-pixel { animation-name: fx-pixel; }
@keyframes fx-pixel {
  0% { opacity: 0; transform: translate(var(--x), var(--y)); }
  6% { opacity: 1; } 11% { opacity: 0; }
  15% { opacity: 1; transform: translate(calc(var(--x) + 3px), var(--y)); }
  21%, 100% { opacity: 0; transform: translate(var(--x), var(--y)); }
}
.fx-tranche { animation-name: fx-tranche; }
@keyframes fx-tranche {
  0% { opacity: 0; transform: none; }
  3% { opacity: .75; transform: translateX(var(--dx)); }
  6% { opacity: .4; transform: translateX(calc(var(--dx) * -1)); }
  9%, 100% { opacity: 0; transform: none; }
}

/* --- Aurore boréale : lettres vert-violet, voiles d'aurore qui ondulent au-dessus du titre --- */
.skin-aurore .nt-texte, .skin-aurore .nt-titre {
  background: linear-gradient(90deg, #3dffb0, #1de9b6, #64b5f6, #c77dff, #3dffb0); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #3dffb0;
  filter: drop-shadow(0 0 3px #1de9b688) drop-shadow(0 0 8px #7b2ff755); animation: ho-defile 6s linear infinite;
}
.skin-aurore .nt-calque { filter: blur(.5px) drop-shadow(0 0 3px #3dffb0aa); }
.fx-voile .rideau { fill: none; stroke-width: calc(1.6px * var(--e, 1)); stroke-linecap: round; }
.skin-aurore .fx-scintille path { fill: #e0fff4; }
.fx-voile { animation-name: fx-voile; animation-timing-function: ease-in-out; transform-origin: var(--ox) var(--oy); }
@keyframes fx-voile {
  0% { opacity: 0; transform: translateX(0) scaleY(.6) skewX(0deg); }
  30% { opacity: .8; transform: translateX(calc(var(--dx) * .6)) scaleY(1) skewX(-10deg); }
  55% { transform: translateX(var(--dx)) scaleY(1.15) skewX(8deg); }
  75% { opacity: .65; }
  100% { opacity: 0; transform: translateX(calc(var(--dx) * 2)) scaleY(.8) skewX(-6deg); }
}

/* --- Plasma : bleu électrique, sphères de plasma en orbite autour du titre et du nom --- */
.skin-plasma .nt-texte, .skin-plasma .nt-titre {
  color: #e6f7ff; text-shadow: 0 0 3px #7cc8ff, 0 0 9px #3fa9ff, 0 0 18px #0047ff; animation: pl-pulse 1.8s ease-in-out infinite;
}
@keyframes pl-pulse { 50% { text-shadow: 0 0 4px #b3e0ff, 0 0 12px #59b8ff, 0 0 24px #1f5cff; } }
.skin-plasma .nt-calque { filter: drop-shadow(0 0 2px #7cc8ff) drop-shadow(0 0 5px #0057ff); }
.skin-plasma .fx-scintille path { fill: #cfeaff; }
.fx-orbe .coeur { fill: #ffffff; }
.fx-orbe .trace { fill: #59b8ff; }
/* Orbite elliptique : un va-et-vient horizontal et un vertical décalés d'un quart de tour */
.fx-orbe .ox { animation-name: fx-ox; animation-timing-function: ease-in-out; animation-delay: calc(var(--r) + var(--t, 0s)); }
.fx-orbe .oy { animation-name: fx-oy; animation-timing-function: ease-in-out; animation-delay: calc(var(--r) + var(--t, 0s) - var(--d) / 4); }
@keyframes fx-ox { 0%, 100% { transform: translateX(calc(var(--rx) * -1)); } 50% { transform: translateX(var(--rx)); } }
@keyframes fx-oy { 0%, 100% { transform: translateY(calc(var(--ry) * -1)); } 50% { transform: translateY(var(--ry)); } }

/* --- Féerie : or rosé, papillons de lumière qui volettent, poussière de fée --- */
.skin-feerie .nt-texte, .skin-feerie .nt-titre {
  background: linear-gradient(90deg, #ffd6a5, #ffb3e6, #fff1f8, #cdb4ff, #ffd6a5); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffc8dd;
  filter: drop-shadow(0 0 3px #ffb3e6aa) drop-shadow(0 0 7px #cdb4ff66); animation: cs-nebuleuse 6s linear infinite;
}
.skin-feerie .nt-calque { filter: drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 0 4px #ffb3e6); }
.skin-feerie .fx-scintille path { fill: #ffe6a8; }
.fx-papillon .corps { fill: none; stroke: #fff5e0; stroke-width: calc(.7px * var(--e, 1)); stroke-linecap: round; }
.fx-papillon .ailes path { opacity: .9; }
.fx-papillon { animation-name: fx-vol; animation-timing-function: ease-in-out; }
@keyframes fx-vol {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
  12%, 88% { opacity: 1; }
  50% { transform: translate(var(--x1), var(--y1)); }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}
/* Battement d'ailes, rapide et indépendant du vol */
.fx-papillon .ailes { animation: fx-battement .3s ease-in-out infinite; }
@keyframes fx-battement { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }

/* --- Arcane : violet et or, runes qui s'illuminent, sceau qui tourne sous le nom --- */
.skin-arcane .nt-texte, .skin-arcane .nt-titre {
  color: #f3e8ff; -webkit-text-stroke: .4px #ffd166;
  text-shadow: 0 0 3px #c084fc, 0 0 9px #a855f7, 0 0 18px #581c87; animation: ar-pulse 3s ease-in-out infinite;
}
@keyframes ar-pulse { 50% { text-shadow: 0 0 4px #e9d5ff, 0 0 12px #c084fc, 0 0 24px #7e22ce; } }
.skin-arcane .nt-calque { filter: drop-shadow(0 0 2px #ffd166) drop-shadow(0 0 4px #a855f7); }
.skin-arcane .fx-scintille path { fill: #ffe9a8; }
.skin-arcane .h { stroke: #a855f7; stroke-width: calc(2.4px * var(--e, 1)); opacity: .6; }
.skin-arcane .c { stroke: #ffe08a; stroke-width: calc(.9px * var(--e, 1)); }
.fx-rune { animation-name: fx-rune; animation-timing-function: ease-out; transform-origin: var(--ox) var(--oy); }
@keyframes fx-rune {
  0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1); }
  65% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); }
}
.fx-sceau .anneau { fill: none; stroke: #ffd166; stroke-width: calc(.8px * var(--e, 1)); stroke-dasharray: 6 3 1 3; animation: fx-sceau-tourne 6s linear infinite; }
.fx-sceau .anneau.fin { stroke: #c084fc; stroke-dasharray: 2 4; animation-direction: reverse; }
.fx-sceau { animation-name: fx-sceau; animation-timing-function: ease-in-out; }
@keyframes fx-sceau-tourne { to { stroke-dashoffset: -60; } }
@keyframes fx-sceau { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* --- Matrice : vert néon, pluie de code derrière les lettres --- */
.skin-matrice .nt-texte, .skin-matrice .nt-titre {
  color: #c9ffd6; text-shadow: 0 0 3px #00ff66, 0 0 9px #00a83e, 0 0 16px #00461a; animation: ma-scintille 3.2s steps(1, end) infinite;
}
@keyframes ma-scintille { 0%, 100% { opacity: 1; } 47% { opacity: .7; } 49% { opacity: 1; } 83% { opacity: .8; } 84% { opacity: 1; } }
.skin-matrice .nt-calque { filter: drop-shadow(0 0 2px #00ff66); overflow: hidden; }   /* la pluie reste dans le cadre du nom */
.fx-code text { fill: #00e65c; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.fx-code text.tete { fill: #eaffef; }
.fx-code { animation-name: fx-code; animation-timing-function: linear; }
@keyframes fx-code {
  0% { opacity: 0; transform: translate(var(--x), var(--y0)); }
  8%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y1)); }
}

/* --- Spectre : lettres fantômes qui s'effacent, brume et feux follets --- */
.skin-spectre .nt-texte, .skin-spectre .nt-titre {
  color: #e8f4ff; text-shadow: 0 0 4px #ffffff, 0 0 10px #9ecfff, 0 0 20px #3d6b99; animation: sp-hante 4.2s ease-in-out infinite;
}
@keyframes sp-hante {
  0%, 40%, 100% { opacity: 1; } 46% { opacity: .45; } 48% { opacity: .9; } 50% { opacity: .3; } 56% { opacity: .85; } 70% { opacity: .55; }
}
.skin-spectre .nt-calque { filter: blur(.8px) drop-shadow(0 0 3px #cfe8ff); }
.fx-brume { animation-name: fx-brume; animation-timing-function: ease-out; }
@keyframes fx-brume {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.7); }
}
.fx-follet circle { fill: #e0f4ff; }
.fx-follet { animation-name: fx-bulle; animation-timing-function: ease-in-out; }

/* --- Volcan : roche noire veinée de lave, projections de magma et fumée --- */
.skin-volcan .nt-texte, .skin-volcan .nt-titre {
  color: #120300; -webkit-text-stroke: .7px #ff6a00;
  text-shadow: 0 0 3px #ff7b00, 0 0 8px #ff3d00, 0 0 16px #8a1500; animation: vo-magma 2.4s ease-in-out infinite;
}
@keyframes vo-magma { 50% { -webkit-text-stroke-color: #ffb000; text-shadow: 0 0 4px #ffb000, 0 0 11px #ff5a00, 0 0 22px #a31d00; } }
.skin-volcan .nt-calque { filter: drop-shadow(0 0 2px #ff6a00) drop-shadow(0 0 5px #c42a00); }
.fx-projection .lave { fill: #ff8c00; }
.fx-projection .coeur { fill: #fff1a8; }
.fx-projection { animation-name: fx-apparait; }
/* Arc de la projection : avance régulière en largeur, montée puis chute en hauteur */
.fx-projection .px { animation-name: fx-px; animation-timing-function: linear; }
.fx-projection .py { animation-name: fx-py; }
@keyframes fx-px { from { transform: translate(var(--x), var(--y)); } to { transform: translate(calc(var(--x) + var(--dx)), var(--y)); } }
@keyframes fx-py {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  45% { transform: translateY(calc(var(--up) * -1)); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--down)); }
}

/* --- Phénix (exclusif : 3 podiums d'affilée) : lettres d'or en flammes,
       plumes de feu qui s'envolent en se balançant, braises --- */
.skin-phenix .nt-texte, .skin-phenix .nt-titre {
  background: linear-gradient(0deg, #b3260b, #ff6a1a 30%, #ffc84a 62%, #fff4c2 85%, #ffc84a); background-size: 100% 220%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffb02e;
  filter: drop-shadow(0 0 3px #ffb02e) drop-shadow(0 0 9px #e2431a); animation: ph-brule 2.4s ease-in-out infinite alternate;
}
@keyframes ph-brule { from { background-position: 0 0; } to { background-position: 0 100%; filter: drop-shadow(0 0 5px #ffd36e) drop-shadow(0 0 14px #ff5a1a); } }
.skin-phenix .nt-calque { filter: drop-shadow(0 0 3px #ff8c1a); }
.skin-phenix .fx-flamme .ext { fill: #ff7a1a; }
.skin-phenix .fx-flamme .int { fill: #ffe08a; }
.skin-phenix .fx-braise circle { fill: #fff0b0; }
.fx-plume .plume { fill: #ffb43a; opacity: .95; }
.fx-plume .tige { fill: none; stroke: #fff1c2; stroke-width: calc(.5px * var(--e, 1)); opacity: .8; }
.fx-plume { animation-name: fx-plume; animation-timing-function: ease-out; }
@keyframes fx-plume {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(0deg) scale(.6); }
  15% { opacity: 1; }
  50% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy) * .5)) rotate(25deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) - var(--dx)), calc(var(--y) + var(--dy))) rotate(-20deg) scale(.8); }
}

/* Série de podiums d'affilée : 🔥×N à côté du nom (dorée : 1er d'affilée) */
.nt-serie { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px; font-size: .7em; font-weight: 800; line-height: 1.5;
  -webkit-text-fill-color: #ffb36b; color: #ffb36b; background: #3a1606cc; border: 1px solid #ff7a1a66; vertical-align: .15em; filter: none; text-shadow: none; }
.nt-serie.or { -webkit-text-fill-color: #ffe08a; color: #ffe08a; border-color: #ffd36e99; box-shadow: 0 0 6px #ffb02e66; }

/* Mouvements réduits (réglage du téléphone) : les couleurs restent, sans animation ni effets */
@media (prefers-reduced-motion: reduce) {
  .nt-skin .nt-texte, .nt-skin .nt-titre { animation: none !important; }
  .nt-calque { display: none; }
}