/* Skins (skins.js) : dés, cadres de portrait, apparences de classe, variantes de frappe. Tout est préfixé sk-.
   Sans attribut data-des / data-cadre / data-apparence, rien ici ne s'applique : l'apparence par défaut ne bouge pas.
   Pas de mode de fusion sur les toiles filtrées (iOS) : teintes et lueurs passent par des calques translucides. */

/* ════════════════════ Dés ════════════════════ */
[data-des] .de6 { position: relative; overflow: hidden; isolation: isolate; }
[data-des] .de6 i { position: relative; z-index: 1; }
[data-des] .de6::before, [data-des] .de6::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; }
[data-des] .de6::before { inset: 0; z-index: 0; }
[data-des] .de6::after { inset: 0; z-index: 2; }
[data-des] .de6.ok { outline-width: 2px; }

/* Ivoire doré : ivoire poli, points d'or */
[data-des="des-ivoire"] .de6 {
  background: radial-gradient(120% 90% at 30% 18%, #FFFDF6, #F3E9D2 50%, #D6C29A);
  box-shadow: inset 0 -3px 0 rgba(120, 90, 40, .28), inset 0 1px 0 #FFF, 0 6px 12px rgba(0, 0, 0, .45);
}
[data-des="des-ivoire"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #FFF0B8, #D4A440 55%, #8A6418); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); }

/* Obsidienne : verre noir, reflet, points d'argent */
[data-des="des-obsidienne"] .de6 {
  background: linear-gradient(150deg, #423C4A, #121015 45%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .6);
}
[data-des="des-obsidienne"] .de6::before { background: linear-gradient(135deg, rgba(255, 255, 255, .26) 0 18%, transparent 34%); }
[data-des="des-obsidienne"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #FFF, #C9CED6 45%, #5E646D); box-shadow: 0 0 3px rgba(220, 230, 240, .5); }

/* Sang séché : rouge sombre veiné de noir, points gravés */
[data-des="des-sang"] .de6 {
  background:
    linear-gradient(118deg, transparent 38%, rgba(25, 0, 0, .65) 40%, transparent 42.5%),
    linear-gradient(64deg, transparent 60%, rgba(25, 0, 0, .55) 61.5%, transparent 63%),
    linear-gradient(160deg, transparent 72%, rgba(25, 0, 0, .5) 73.5%, transparent 75%),
    radial-gradient(circle at 30% 25%, #B3322C, #6E1214 58%, #320506);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 100, .15), inset 0 -3px 0 rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .55);
}
[data-des="des-sang"] .de6 i.p { background: radial-gradient(circle at 45% 40%, #1A0202, #000 70%); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 140, 120, .35); }

/* Givre : cristal glacé, reflets bleus, givre aux coins */
[data-des="des-givre"] .de6 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), transparent 42%), conic-gradient(from 30deg, #D5ECF9, #93C1E3, #EAF7FF, #86B5DA, #D5ECF9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 0 10px rgba(110, 170, 225, .7), 0 6px 14px rgba(0, 30, 60, .5);
}
[data-des="des-givre"] .de6::before {
  background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 6px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 45%, #000 80%); mask: radial-gradient(circle at 50% 50%, transparent 45%, #000 80%);
}
[data-des="des-givre"] .de6 i.p { background: radial-gradient(circle, #FFF 0 30%, #BFE3FF 60%, #4F8EC0); box-shadow: 0 0 5px rgba(255, 255, 255, .9); }

/* Jade ancien : pierre marbrée, liseré gravé, points creusés */
[data-des="des-jade"] .de6 {
  background:
    radial-gradient(circle at 20% 30%, rgba(210, 245, 220, .35), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(8, 40, 24, .55), transparent 40%),
    radial-gradient(circle at 62% 18%, rgba(160, 215, 180, .3), transparent 26%),
    linear-gradient(150deg, #64A47D, #2F6B4C 60%, #1A4130);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(220, 255, 230, .4), 0 6px 14px rgba(0, 0, 0, .5);
}
[data-des="des-jade"] .de6::before { inset: 7%; border: 1px solid rgba(215, 250, 225, .32); border-radius: 14%; box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(0, 0, 0, .35); }
[data-des="des-jade"] .de6::after {
  /* Runes dans les coins */
  background:
    linear-gradient(rgba(215, 250, 225, .3), rgba(215, 250, 225, .3)) 12% 12% / 8% 1px,
    linear-gradient(rgba(215, 250, 225, .3), rgba(215, 250, 225, .3)) 88% 88% / 1px 8%,
    linear-gradient(45deg, transparent 45%, rgba(215, 250, 225, .3) 46% 54%, transparent 55%) 86% 10% / 9% 9%;
  background-repeat: no-repeat;
}
[data-des="des-jade"] .de6 i.p { background: #12301F; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .75), 0 1px 0 rgba(200, 250, 215, .4); }

/* Braise : charbon fendu de feu, points qui rougeoient */
[data-des="des-braise"] .de6 {
  background: radial-gradient(circle at 50% 125%, rgba(255, 110, 30, .55), transparent 55%), linear-gradient(160deg, #2E2420, #110C0B);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 40, .25), 0 6px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(255, 100, 30, .25);
}
[data-des="des-braise"] .de6::before {
  background:
    linear-gradient(115deg, transparent 46.5%, #FF7A1A 48.5%, transparent 50.5%),
    linear-gradient(35deg, transparent 69%, #FF9A3A 70.5%, transparent 72%),
    linear-gradient(172deg, transparent 18%, rgba(255, 90, 20, .85) 19.5%, transparent 21%);
  animation: sk-braise 2.4s ease-in-out infinite alternate;
}
[data-des="des-braise"] .de6 i.p {
  background: radial-gradient(circle, #FFF2B0 0 20%, #FFA030 45%, #C2340E 85%);
  box-shadow: 0 0 2px rgba(255, 120, 30, .6);
}
/* La lueur des points : une ombre déjà dessinée dont seule l'opacité varie (une box-shadow animée se repeint à chaque image) */
[data-des="des-braise"] .de6 i.p::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 9px 1px rgba(255, 140, 40, .95); opacity: 0;
  animation: sk-rougeoie 1.6s ease-in-out infinite alternate;
}
@keyframes sk-braise { from { opacity: .45; } to { opacity: 1; } }
@keyframes sk-rougeoie { from { opacity: 0; } to { opacity: 1; } }

/* Œil de Verhal : violet profond, chaque point est un œil qui cligne */
[data-des="des-verhal"] .de6 {
  background: radial-gradient(circle at 30% 25%, #6E3C8C, #2E1240 60%, #12051C);
  box-shadow: inset 0 0 10px rgba(199, 123, 192, .35), 0 6px 14px rgba(0, 0, 0, .55), 0 0 10px rgba(122, 46, 110, .45);
}
[data-des="des-verhal"] .de6 i.p {
  background: radial-gradient(circle, #06000A 0 17%, #D07BC8 21% 36%, #F3E8F1 41% 64%, #3A1450 70%);
  box-shadow: 0 0 5px rgba(208, 123, 200, .7);
  animation: sk-cligne 4.2s ease-in-out infinite;
}
[data-des="des-verhal"] .de6 i:nth-child(3n+1) { animation-delay: -1.3s; animation-duration: 3.7s; }
[data-des="des-verhal"] .de6 i:nth-child(3n+2) { animation-delay: -2.6s; animation-duration: 5.1s; }
@keyframes sk-cligne { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }

/* Or du Serment : or massif gravé, un reflet le parcourt sans fin */
[data-des="des-serment"] .de6 {
  background: linear-gradient(145deg, #FFF3C4, #EBC266 28%, #B9852A 58%, #F3D27C 80%, #8E6019);
  box-shadow: inset 0 -3px 0 rgba(90, 55, 10, .45), inset 0 1px 0 #FFF8DC, 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(240, 196, 107, .45);
}
[data-des="des-serment"] .de6::before { inset: 6%; border: 1px solid rgba(90, 55, 10, .55); border-radius: 14%; box-shadow: 0 1px 0 rgba(255, 245, 210, .6), inset 0 1px 0 rgba(255, 245, 210, .5); }
[data-des="des-serment"] .de6::after {
  inset: -30% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%);
  animation: sk-reflet-de 3.4s ease-in-out infinite;
}
[data-des="des-serment"] .de6 i.p { background: radial-gradient(circle at 40% 35%, #7A4E12, #2E1A03 70%); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 240, 190, .7); }
@keyframes sk-reflet-de { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }

/* Astral : un ciel de nuit où dérivent des étoiles */
[data-des="des-astral"] .de6 {
  background:
    radial-gradient(ellipse at 72% 28%, rgba(130, 95, 210, .5), transparent 55%),
    radial-gradient(ellipse at 18% 82%, rgba(40, 120, 190, .4), transparent 50%),
    linear-gradient(160deg, #1C1846, #06061A);
  box-shadow: inset 0 0 0 1px rgba(170, 190, 255, .3), 0 6px 16px rgba(0, 0, 0, .6), 0 0 14px rgba(110, 120, 255, .4);
}
[data-des="des-astral"] .de6::before {
  inset: -100% 0 0 -100%;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #FFF, transparent), radial-gradient(1px 1px at 38% 62%, #CFE0FF, transparent),
    radial-gradient(1.5px 1.5px at 68% 28%, #FFF, transparent), radial-gradient(1px 1px at 82% 78%, #FFF, transparent),
    radial-gradient(1px 1px at 22% 88%, #BFD0FF, transparent), radial-gradient(1.5px 1.5px at 56% 8%, #FFF, transparent);
  background-size: 50% 50%;
  animation: sk-derive 14s linear infinite;
}
[data-des="des-astral"] .de6 i.p {
  background: radial-gradient(circle, #FFF 0 24%, #C4D6FF 46%, rgba(120, 150, 255, 0) 74%);
  box-shadow: 0 0 6px rgba(180, 200, 255, .85);
  animation: sk-scintille 2.6s ease-in-out infinite;
}
[data-des="des-astral"] .de6 i:nth-child(2n) { animation-delay: -1.1s; }
[data-des="des-astral"] .de6 i:nth-child(3n) { animation-delay: -1.9s; }
@keyframes sk-derive { to { transform: translate(50%, 50%); } }
@keyframes sk-scintille { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .7; } }

/* ════════════════════ Cadres ════════════════════ */
.fig[data-cadre] { isolation: isolate; }
.sk-cadre { position: absolute; inset: 0; z-index: 4; pointer-events: none; line-height: 0; }
.sk-cadre::before, .sk-cadre::after { content: ""; position: absolute; pointer-events: none; }

/* Bronze patiné : vieux bronze, vert-de-gris dans les creux */
.fig[data-cadre="cadre-bronze"] { --fig-lisere: #8DB3A2; --fig-filet: rgba(110, 158, 138, .45); }
.fig[data-cadre="cadre-bronze"] .fig-cadre { box-shadow: 0 0 0 1px #8DB3A2, 0 0 0 3px #1A110A, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-bronze"] .sk-cadre::before {
  inset: -5px; border: 3px solid transparent; border-radius: 4px;
  border-image: linear-gradient(135deg, #C08A48, #6A4520 25%, #6FA592 45%, #9A6A34 62%, #4E8370 82%, #B98446) 1;
}

/* Argent ciselé : volutes moletées, rosettes aux coins */
.fig[data-cadre="cadre-argent"] { --fig-lisere: rgba(226, 233, 240, .9); --fig-filet: rgba(200, 210, 222, .4); }
.fig[data-cadre="cadre-argent"] .fig-cadre { box-shadow: 0 0 0 1px #E6EDF3, 0 0 0 3px #121418, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-argent"] .sk-cadre::before {
  inset: -6px; border: 4px solid transparent;
  border-image: repeating-linear-gradient(45deg, #F5F8FB 0 1.5px, #9AA4AE 1.5px 3px, #59626C 3px 4px) 4;
  filter: drop-shadow(0 0 6px rgba(200, 215, 230, .25));
}
.sk-coin {
  position: absolute; width: 11px; height: 11px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #FFF, #B8C2CC 45%, #59626C); box-shadow: 0 0 0 1px #121418, 0 0 6px rgba(220, 230, 240, .5);
}
.sk-coin:nth-child(1) { left: -10px; top: -10px; } .sk-coin:nth-child(2) { right: -10px; top: -10px; }
.sk-coin:nth-child(3) { left: -10px; bottom: -10px; } .sk-coin:nth-child(4) { right: -10px; bottom: -10px; }
.fig-petit .sk-coin { width: 6px; height: 6px; }
.fig-petit .sk-coin:nth-child(-n+2) { top: -6px; } .fig-petit .sk-coin:nth-child(n+3) { bottom: -6px; }
.fig-petit .sk-coin:nth-child(odd) { left: -6px; } .fig-petit .sk-coin:nth-child(even) { right: -6px; }
.fig-petit[data-cadre="cadre-argent"] .sk-cadre::before { inset: -4px; border-width: 3px; }

/* Rosace : un vitrail de cathédrale, plombs sombres, rose en tête */
.fig[data-cadre="cadre-rosace"] { --fig-lisere: rgba(240, 217, 160, .85); }
.fig[data-cadre="cadre-rosace"] .sk-cadre::before {
  inset: -8px; padding: 6px; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(10, 6, 8, .95) 0 1.5px, transparent 1.5px 13px),
    repeating-linear-gradient(0deg, rgba(10, 6, 8, .95) 0 1.5px, transparent 1.5px 15px),
    conic-gradient(from 20deg, #2B4C9B, #8E1F2B, #D9A93A, #2E7D4F, #5A2D86, #1F5FA0, #A42A2A, #D9A93A, #2B4C9B);
  -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);
  box-shadow: 0 0 0 1px #0B0809;
}
.fig[data-cadre="cadre-rosace"] .sk-cadre::after { inset: -9px; border: 1px solid rgba(240, 217, 160, .55); border-radius: 5px; box-shadow: 0 0 14px rgba(120, 140, 220, .25); }
.sk-rose {
  position: absolute; left: 50%; top: 0; width: 34%; aspect-ratio: 1; z-index: 2; transform: translate(-50%, -58%); border-radius: 50%;
  background:
    radial-gradient(circle, #F6E7B8 0 12%, #0B0809 13% 16%, transparent 17%),
    repeating-conic-gradient(rgba(10, 6, 8, .95) 0 4deg, transparent 4deg 30deg),
    radial-gradient(circle, transparent 0 46%, #0B0809 47% 50%, transparent 51%),
    conic-gradient(#A42A2A, #D9A93A, #2B4C9B, #2E7D4F, #5A2D86, #A42A2A, #D9A93A, #2B4C9B, #2E7D4F, #5A2D86, #A42A2A);
  box-shadow: 0 0 0 2px #0B0809, 0 0 0 3px rgba(240, 217, 160, .7), 0 0 14px rgba(150, 160, 255, .35);
}
.fig-petit .sk-rose { display: none; }
.fig-petit[data-cadre="cadre-rosace"] .sk-cadre::before { inset: -5px; padding: 4px; }
.fig-petit[data-cadre="cadre-rosace"] .sk-cadre::after { inset: -6px; }

/* Épines : des ronces qui poussent lentement autour du cadre */
.fig[data-cadre="cadre-epines"] { --fig-lisere: rgba(160, 60, 50, .9); --fig-filet: rgba(120, 50, 40, .4); }
.sk-ronces { position: absolute; left: -9%; top: -7%; width: 118%; height: 114%; overflow: visible; }
.sk-tige { fill: none; stroke: #5C3A22; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 1px #000); stroke-dasharray: 100; stroke-dashoffset: 100; animation: sk-pousse 11s ease-in-out -5s infinite; }
.sk-tige--d { animation-delay: -5.6s; }
.sk-epine { fill: none; stroke: #8A5232; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: sk-epines 11s ease-in-out -5s infinite; }
.sk-bouton { fill: #9E1F24; stroke: #2A0A0A; stroke-width: .8; vector-effect: non-scaling-stroke; animation: sk-epines 11s ease-in-out -4s infinite; }
.fig-petit .sk-tige { stroke-width: 3; }
.fig-petit .sk-bouton { display: none; }
@keyframes sk-pousse { 0% { stroke-dashoffset: 100; opacity: 1; } 55% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sk-epines { 0%, 35% { opacity: 0; } 58%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Flammes : le cadre brûle sans jamais se consumer */
.fig[data-cadre="cadre-flammes"] { --fig-lisere: #FFB04A; --fig-filet: rgba(255, 120, 40, .45); }
.fig[data-cadre="cadre-flammes"] .fig-cadre { animation: fig-respire 6.4s ease-in-out var(--fig-d, 0s) infinite, sk-brasier 1.8s ease-in-out infinite alternate; }
@keyframes sk-brasier {
  from { box-shadow: 0 0 0 1px #FFB04A, 0 0 0 3px #1A0804, 0 0 10px 2px rgba(255, 110, 30, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
  to { box-shadow: 0 0 0 1px #FFD27A, 0 0 0 3px #2A0C04, 0 0 22px 5px rgba(255, 120, 30, .55), 0 12px 26px -8px rgba(0, 0, 0, .85); }
}
.sk-flammes { position: absolute; inset: 0; }
.sk-flammes::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: -6%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(255, 170, 60, .75), rgba(230, 80, 20, .35) 55%, transparent 75%); filter: blur(2px); animation: fig-pulse 1.4s ease-in-out infinite; }
.sk-flammes i {
  position: absolute; width: 26%; height: calc(var(--fig-w, 72px) * .46); transform-origin: 50% 100%;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse 50% 62% at 50% 78%, #FFF4B8 0 16%, #FFB13B 34%, #E5531A 60%, rgba(160, 30, 10, 0) 76%);
  filter: blur(.4px); opacity: .95;
  animation: sk-flamme 1.05s ease-in-out infinite alternate;
}
.sk-flammes i:nth-child(-n+5) { bottom: -12%; }
.sk-flammes i:nth-child(1) { left: -6%; } .sk-flammes i:nth-child(2) { left: 16%; animation-delay: -.3s; height: calc(var(--fig-w, 72px) * .26); }
.sk-flammes i:nth-child(3) { left: 39%; animation-delay: -.6s; height: calc(var(--fig-w, 72px) * .4); }
.sk-flammes i:nth-child(4) { left: 62%; animation-delay: -.15s; height: calc(var(--fig-w, 72px) * .28); }
.sk-flammes i:nth-child(5) { left: 84%; animation-delay: -.45s; }
.sk-flammes i:nth-child(n+6) { width: 20%; height: calc(var(--fig-w, 72px) * .34); }
.sk-flammes i:nth-child(6) { left: -11%; bottom: 22%; animation-delay: -.2s; } .sk-flammes i:nth-child(7) { left: -10%; bottom: 48%; animation-delay: -.7s; }
.sk-flammes i:nth-child(8) { left: -8%; bottom: 74%; animation-delay: -.4s; height: calc(var(--fig-w, 72px) * .17); }
.sk-flammes i:nth-child(9) { right: -11%; bottom: 22%; animation-delay: -.5s; } .sk-flammes i:nth-child(10) { right: -10%; bottom: 48%; animation-delay: -.1s; }
.sk-flammes i:nth-child(11) { right: -8%; bottom: 74%; animation-delay: -.8s; height: calc(var(--fig-w, 72px) * .17); }
.sk-flammes i:nth-child(12) { left: 40%; top: -10%; width: 20%; animation-delay: -.35s; height: calc(var(--fig-w, 72px) * .2); }
.fig-petit .sk-flammes i:nth-child(n+6) { display: none; }
@keyframes sk-flamme {
  0% { transform: scale(1, .82) skewX(-4deg); opacity: .8; }
  50% { transform: scale(.92, 1.08) skewX(3deg); opacity: 1; }
  100% { transform: scale(1.05, 1.18) skewX(-2deg); opacity: .88; }
}

/* Constellations : les étoiles tournent autour du portrait */
.fig[data-cadre="cadre-constellations"] { --fig-lisere: #CFE0FF; --fig-filet: rgba(150, 170, 255, .45); --fig-braise: #CFE0FF; }
.fig[data-cadre="cadre-constellations"] .fig-cadre { box-shadow: 0 0 0 1px #CFE0FF, 0 0 0 3px #0B0E2E, 0 0 0 4px rgba(150, 170, 255, .55), 0 0 22px rgba(110, 130, 255, .4), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-orbite { position: absolute; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-16deg) scaleY(.34); }
.sk-orbite--b { width: 128%; top: 30%; transform: translate(-50%, -50%) rotate(14deg) scaleY(.28); }
.sk-anneau { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(190, 205, 255, .28); animation: sk-tourne 16s linear infinite; }
.sk-orbite--b .sk-anneau { animation-duration: 23s; animation-direction: reverse; border-style: dashed; border-color: rgba(190, 205, 255, .18); }
.sk-anneau i {
  position: absolute; left: 50%; top: 50%; width: calc(var(--fig-w, 72px) * .07); height: calc(var(--fig-w, 72px) * .2);
  margin: calc(var(--fig-w, 72px) * -.1) 0 0 calc(var(--fig-w, 72px) * -.035); border-radius: 50%;
  background: radial-gradient(ellipse, #FFF 0 22%, #BFD0FF 42%, rgba(140, 160, 255, 0) 70%);
  transform: rotate(var(--a)) translateY(calc(var(--fig-w, 72px) * -.75));
}
.sk-orbite--b .sk-anneau i { transform: rotate(var(--a)) translateY(calc(var(--fig-w, 72px) * -.64)); }
.sk-astres { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.sk-astres path { fill: none; stroke: rgba(207, 224, 255, .55); stroke-width: .8; vector-effect: non-scaling-stroke; }
.sk-astres circle { fill: #FFF; animation: sk-scintille 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sk-astres circle:nth-of-type(2n) { animation-delay: -1.2s; }
.fig-petit .sk-orbite--b, .fig-petit .sk-astres { display: none; }
@keyframes sk-tourne { to { transform: rotate(360deg); } }

/* Couronne de Légende : rayons de lumière, reflet d'or, couronne flottante */
.fig[data-cadre="cadre-couronne"] { --fig-lisere: #FFE9A8; --fig-filet: rgba(255, 220, 140, .55); --fig-lumiere: rgba(255, 236, 180, .4); }
.fig[data-cadre="cadre-couronne"] .fig-cadre { box-shadow: 0 0 0 1px #FFF0C0, 0 0 0 3px #3A2408, 0 0 0 5px #E3B550, 0 0 0 6px #6E4A12, 0 0 26px rgba(255, 214, 120, .5), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-couronne"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-couronne"] .sk-eclat, .sk-couronne { z-index: 4; }
.sk-rayons {
  position: absolute; inset: -32% -46%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0) 0 7deg, rgba(255, 226, 150, .26) 7deg 10deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  animation: sk-tourne 48s linear infinite;
}
.sk-eclat {
  position: absolute; inset: -6px; padding: 5px; border-radius: 4px;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 240, .95) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  -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: sk-balaye 4.2s ease-in-out infinite;
}
.sk-couronne {
  position: absolute; left: 50%; top: 0; width: 40%; height: auto; overflow: visible;
  transform: translate(-50%, -58%); filter: drop-shadow(0 0 6px rgba(255, 220, 140, .75));
  animation: sk-flotte 3.6s ease-in-out infinite;
}
.fig-petit .sk-rayons { inset: -18% -26%; }
@keyframes sk-balaye { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes sk-flotte { 0%, 100% { transform: translate(-50%, -58%); } 50% { transform: translate(-50%, -66%); } }

/* ════════════════════ Apparences de classe ════════════════════ */
.sk-aura { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sk-aura::before, .sk-aura::after { content: ""; position: absolute; pointer-events: none; }
.sk-aura i, .sk-aura b { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.sk-aura i { width: calc(var(--fig-h, 96px) * .05); height: calc(var(--fig-h, 96px) * .05); animation: sk-monte 6s linear infinite; }
.sk-aura i:nth-child(8n+1) { left: 10%; animation-delay: -.3s; --dx: 10px; }
.sk-aura i:nth-child(8n+2) { left: 24%; animation-delay: -2.1s; --dx: -6px; animation-duration: 7.2s; }
.sk-aura i:nth-child(8n+3) { left: 38%; animation-delay: -4.4s; --dx: 12px; animation-duration: 5.4s; }
.sk-aura i:nth-child(8n+4) { left: 52%; animation-delay: -1.2s; --dx: -10px; animation-duration: 6.6s; }
.sk-aura i:nth-child(8n+5) { left: 64%; animation-delay: -3.3s; --dx: 8px; }
.sk-aura i:nth-child(8n+6) { left: 76%; animation-delay: -5.1s; --dx: -8px; animation-duration: 7.8s; }
.sk-aura i:nth-child(8n+7) { left: 86%; animation-delay: -2.7s; --dx: 6px; animation-duration: 5.8s; }
.sk-aura i:nth-child(8n) { left: 46%; animation-delay: -6s; --dx: -12px; animation-duration: 6.9s; }
.fig-petit .sk-aura i:nth-of-type(n+5) { display: none; }
@keyframes sk-monte {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  15% { opacity: var(--o, .9); }
  75% { opacity: calc(var(--o, .9) * .7); }
  100% { transform: translate(var(--dx, 8px), calc(var(--fig-h, 96px) * -.9)) rotate(var(--r, 200deg)) scale(.45); opacity: 0; }
}
@keyframes sk-tombe {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: var(--o, .9); }
  80% { opacity: calc(var(--o, .9) * .8); }
  100% { transform: translate(var(--dx, 8px), calc(var(--fig-h, 96px) * 1.05)) rotate(var(--r, 260deg)); opacity: 0; }
}
.sk-aura i { bottom: -4%; }

/* Lynn · Rose d'Hiver : givre, pétales de glace */
.fig[data-apparence="lynn-hiver"] .fig-img { filter: sepia(.08) saturate(.45) contrast(1.08) brightness(.98); }
.fig[data-apparence="lynn-hiver"] .sk-aura::before { inset: 0; background: linear-gradient(180deg, rgba(170, 215, 255, .28), rgba(60, 110, 170, .22)); box-shadow: inset 0 0 calc(var(--fig-h, 96px) * .12) rgba(225, 242, 255, .65); }
.fig[data-apparence="lynn-hiver"] .sk-aura i { top: -8%; bottom: auto; animation-name: sk-tombe; border-radius: 0 70% 0 70%; background: linear-gradient(135deg, #FFF, #A9D4F5); box-shadow: 0 0 5px rgba(220, 240, 255, .9); --o: .95; }

/* Lynn · Aube ardente : l'or de Thulvia, pétales de braise qui montent */
.fig[data-apparence="lynn-aube"] .fig-img { filter: sepia(.38) saturate(1.35) hue-rotate(-12deg) contrast(1.12) brightness(.96); }
.fig[data-apparence="lynn-aube"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 90% 45% at 50% 108%, rgba(255, 120, 30, .62), transparent 70%), linear-gradient(0deg, rgba(200, 60, 20, .18), transparent 60%); animation: fig-pulse 2.4s ease-in-out infinite; }
.fig[data-apparence="lynn-aube"] .sk-aura::after { inset: 0; box-shadow: inset 0 0 calc(var(--fig-h, 96px) * .1) rgba(255, 150, 60, .55); }
.fig[data-apparence="lynn-aube"] .sk-aura i { border-radius: 0 70% 0 70%; background: radial-gradient(circle at 30% 30%, #FFE7A0, #FF7A2A 50%, #B8261A); box-shadow: 0 0 6px rgba(255, 130, 40, .95); animation-duration: 4.2s; --r: 320deg; }

/* Azzgur · Masque de jais : encre noire qui monte */
.fig[data-apparence="azzgur-jais"] .fig-img { filter: grayscale(1) contrast(1.38) brightness(.78); }
.fig[data-apparence="azzgur-jais"] .sk-aura::before { inset: 0; background: linear-gradient(0deg, rgba(6, 3, 10, .7), transparent 55%), linear-gradient(180deg, rgba(40, 20, 60, .25), transparent 40%); }
.fig[data-apparence="azzgur-jais"] .sk-aura i { width: calc(var(--fig-w, 72px) * .4); height: calc(var(--fig-w, 72px) * .4); margin-left: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(5, 2, 8, .85), rgba(30, 10, 40, .4) 45%, transparent 70%); --o: .85; --r: 40deg; animation-duration: 7s; }

/* Azzgur · Mille Visages : des masques d'ombre s'élèvent et se dissipent */
.fig[data-apparence="azzgur-visages"] .fig-img { filter: grayscale(.55) sepia(.25) saturate(1.2) contrast(1.25) brightness(.8); }
.fig[data-apparence="azzgur-visages"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(122, 46, 150, .55), transparent 70%), linear-gradient(180deg, rgba(40, 10, 60, .35), transparent 50%); animation: fig-pulse 3.2s ease-in-out infinite; }
.fig[data-apparence="azzgur-visages"] .sk-aura i {
  width: calc(var(--fig-w, 72px) * .2); height: calc(var(--fig-w, 72px) * .26);
  border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
  background:
    radial-gradient(circle at 32% 40%, #000 0 10%, transparent 12%), radial-gradient(circle at 68% 40%, #000 0 10%, transparent 12%),
    radial-gradient(ellipse 26% 7% at 50% 74%, #000 0 60%, transparent 72%), linear-gradient(#3A2050, #0B0610);
  box-shadow: 0 0 8px rgba(190, 110, 240, .85); --o: .8; --r: 25deg; animation-duration: 8s;
}

/* Gildong · Ballade de cendre : le luth fume, la cendre retombe */
.fig[data-apparence="gildong-cendre"] .fig-img { filter: grayscale(.72) sepia(.42) contrast(1.1) brightness(.88); }
.fig[data-apparence="gildong-cendre"] .sk-aura::before { inset: 0; background: linear-gradient(0deg, rgba(60, 50, 48, .45), transparent 50%); }
.fig[data-apparence="gildong-cendre"] .sk-aura i { top: -8%; bottom: auto; animation-name: sk-tombe; animation-duration: 9s; width: calc(var(--fig-h, 96px) * .035); height: calc(var(--fig-h, 96px) * .025); background: #9C8E88; border-radius: 1px; --o: .8; }
.fig[data-apparence="gildong-cendre"] .sk-aura i:nth-child(3n) { background: #FFB060; box-shadow: 0 0 4px #FF8A30; }

/* Gildong · Corbeau-Roi : une nuée traverse le tableau */
.fig[data-apparence="gildong-corbeau"] .fig-img { filter: saturate(.5) hue-rotate(195deg) contrast(1.25) brightness(.78); }
.fig[data-apparence="gildong-corbeau"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 40%, rgba(6, 8, 20, .7)); }
.fig[data-apparence="gildong-corbeau"] .sk-aura i {
  left: -20%; top: var(--y, 20%); bottom: auto; width: calc(var(--fig-w, 72px) * .2); height: calc(var(--fig-w, 72px) * .12); background: #05040A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -6 20 11'%3E%3Cpath d='M-10 -1C-7-5-4-4-1.5-1.5-1-3 1-3.5 2-2.6L4.5-2.2 2.5-1.4C3.5-1 6-5 10-4.5 7-2 5 1 1.5 1.5L-1 4-1.5 1.8C-4 1.5-7-1-10-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -6 20 11'%3E%3Cpath d='M-10 -1C-7-5-4-4-1.5-1.5-1-3 1-3.5 2-2.6L4.5-2.2 2.5-1.4C3.5-1 6-5 10-4.5 7-2 5 1 1.5 1.5L-1 4-1.5 1.8C-4 1.5-7-1-10-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(160, 170, 220, .6));
  animation: sk-vol 5.5s linear infinite, sk-bat .32s ease-in-out infinite alternate;
}
.fig[data-apparence="gildong-corbeau"] .sk-aura i:nth-child(2n) { --y: 8%; } .fig[data-apparence="gildong-corbeau"] .sk-aura i:nth-child(3n) { --y: 34%; }
.fig[data-apparence="gildong-corbeau"] .sk-aura i:nth-child(5n) { --y: 52%; }
@keyframes sk-vol {
  0% { translate: 0 0; opacity: 0; } 10% { opacity: .95; } 50% { translate: calc(var(--fig-w, 72px) * .7) calc(var(--fig-h, 96px) * -.06); }
  90% { opacity: .9; } 100% { translate: calc(var(--fig-w, 72px) * 1.45) calc(var(--fig-h, 96px) * .02); opacity: 0; }
}
@keyframes sk-bat { from { scale: 1 1; } to { scale: 1 -.55; } }

/* Kealhin · Fil d'argent : clair de lune, fils du destin qui brillent */
.fig[data-apparence="kealhin-argent"] .fig-img { filter: grayscale(.55) contrast(1.12) brightness(1.04); }
.fig[data-apparence="kealhin-argent"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(220, 235, 255, .45), transparent 70%), linear-gradient(180deg, rgba(150, 175, 220, .22), rgba(20, 30, 60, .25)); }
.fig[data-apparence="kealhin-argent"] .sk-aura i { top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(235, 242, 255, .95) 40%, rgba(200, 215, 255, .6) 70%, transparent); box-shadow: 0 0 4px rgba(220, 230, 255, .9); animation: sk-fil 3.4s ease-in-out infinite; }
@keyframes sk-fil { 0%, 100% { opacity: 0; transform: translateY(-12%); } 50% { opacity: .9; transform: translateY(8%); } }

/* Kealhin · Œil du Néant : l'Œil s'ouvre sur le vide, la lumière y tombe */
.fig[data-apparence="kealhin-neant"] .fig-img { filter: saturate(1.2) hue-rotate(245deg) contrast(1.28) brightness(.66); }
.fig[data-apparence="kealhin-neant"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 40%, transparent 35%, rgba(10, 0, 20, .8)); }
.sk-oeil {
  left: 50%; top: 3%; width: 50%; height: 13%; margin-left: -25%; opacity: 1 !important; border-radius: 50%;
  background: radial-gradient(ellipse, #000 0 30%, #2A0838 38%, #9A4FC0 50%, rgba(199, 123, 192, .5) 58%, transparent 70%);
  box-shadow: 0 0 calc(var(--fig-h, 96px) * .08) rgba(160, 80, 220, .7);
  animation: sk-oeil 5.5s ease-in-out infinite;
}
.fig[data-apparence="kealhin-neant"] .sk-aura i { border-radius: 50%; background: #E2B6FF; box-shadow: 0 0 5px #B060F0; animation-name: sk-aspire; animation-duration: 3.6s; }
@keyframes sk-oeil { 0%, 100% { transform: scaleY(.06); } 18%, 70% { transform: scaleY(1); } 82% { transform: scaleY(.3); } }
@keyframes sk-aspire {
  0% { transform: translate(0, 0) scale(1); opacity: 0; } 20% { opacity: .95; }
  100% { transform: translate(calc(var(--dx, 8px) * -1.5), calc(var(--fig-h, 96px) * -.75)) scale(.2); opacity: 0; }
}

/* Nikolarz · Vapeurs pourpres : les fioles bouillonnent */
.fig[data-apparence="nikolarz-pourpre"] .fig-img { filter: sepia(.3) hue-rotate(225deg) saturate(1.35) contrast(1.08) brightness(.9); }
.fig[data-apparence="nikolarz-pourpre"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 90% 40% at 50% 105%, rgba(160, 70, 200, .55), transparent 70%); animation: fig-pulse 2.8s ease-in-out infinite; }
.fig[data-apparence="nikolarz-pourpre"] .sk-aura i { border-radius: 50%; border: 1px solid rgba(225, 175, 255, .85); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .7) 0 12%, rgba(180, 90, 220, .3) 30%, transparent 70%); animation-duration: 4.4s; --r: 0deg; }
.fig[data-apparence="nikolarz-pourpre"] .sk-aura i:nth-child(2n) { width: calc(var(--fig-h, 96px) * .08); height: calc(var(--fig-h, 96px) * .08); }

/* Nikolarz · Alchimie solaire : or liquide, lumière qui monte, reflet */
.fig[data-apparence="nikolarz-solaire"] .fig-img { filter: sepia(.55) saturate(1.6) hue-rotate(-6deg) contrast(1.1) brightness(1.02); }
.fig[data-apparence="nikolarz-solaire"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 95% 50% at 50% 108%, rgba(255, 205, 80, .7), transparent 70%); animation: fig-pulse 2s ease-in-out infinite; }
.fig[data-apparence="nikolarz-solaire"] .sk-aura::after { inset: -20% -60%; background: linear-gradient(105deg, transparent 44%, rgba(255, 245, 200, .45) 50%, transparent 56%); animation: sk-reflet-de 4.6s ease-in-out infinite; }
.fig[data-apparence="nikolarz-solaire"] .sk-aura i { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #FFFBE0, #FFCB4A 45%, #B07A12); box-shadow: 0 0 7px rgba(255, 200, 70, .95); animation-duration: 3.6s; --r: 0deg; }

/* Shaina · Éclipse : lumière et ombre tournent l'une autour de l'autre */
.fig[data-apparence="shaina-eclipse"] .fig-img { filter: sepia(.2) saturate(.9) contrast(1.15) brightness(.9); }
.fig[data-apparence="shaina-eclipse"] .sk-aura::before { inset: -40%; background: conic-gradient(rgba(255, 240, 200, .28) 0 160deg, rgba(10, 4, 22, .5) 200deg 340deg, rgba(255, 240, 200, .28) 360deg); animation: sk-tourne 12s linear infinite; }
.fig[data-apparence="shaina-eclipse"] .sk-aura::after {
  left: 70%; top: 5%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #0B0510;
  box-shadow: 0 0 0 1px rgba(255, 230, 170, .9), 0 0 calc(var(--fig-h, 96px) * .06) rgba(255, 220, 140, .8), 0 0 calc(var(--fig-h, 96px) * .14) rgba(199, 123, 192, .5);
}
.fig[data-apparence="shaina-eclipse"] .sk-aura i { border-radius: 50%; background: #FFF3D0; box-shadow: 0 0 5px #FFE19A; width: calc(var(--fig-h, 96px) * .03); height: calc(var(--fig-h, 96px) * .03); }

/* Shaina · Aube et Crépuscule : les ailes d'ange déchu de Grimbalda, plumes d'or et d'ombre */
.fig[data-apparence="shaina-crepuscule"] .fig-img { filter: sepia(.32) saturate(1.2) hue-rotate(-10deg) contrast(1.12) brightness(.92); }
.fig[data-apparence="shaina-crepuscule"] .sk-aura::before { inset: 0; background: linear-gradient(180deg, rgba(255, 210, 120, .32), transparent 45%, rgba(90, 40, 120, .45)); }
.sk-aile {
  top: 6%; width: 56%; height: 74%; opacity: .85 !important;
  background: linear-gradient(180deg, #FFF6DA, #F0C46B 38%, #7A3E8A 75%, #2A1030);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cpath d='M48 6C30 2 10 8 2 24c8-3 14-3 18-1C10 28 4 38 4 50c6-7 12-10 18-10-6 7-8 16-6 28 5-10 12-17 22-22 4-12 8-24 10-40z'/%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 50 70'%3E%3Cpath d='M48 6C30 2 10 8 2 24c8-3 14-3 18-1C10 28 4 38 4 50c6-7 12-10 18-10-6 7-8 16-6 28 5-10 12-17 22-22 4-12 8-24 10-40z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 220, 150, .8));
  animation: sk-aile 3.8s ease-in-out infinite;
}
.sk-aile--g { left: -16%; transform-origin: 100% 20%; }
.sk-aile--d { right: -16%; transform-origin: 0% 20%; scale: -1 1; animation-name: sk-aile-d; }
@keyframes sk-aile { 0%, 100% { rotate: 0deg; } 50% { rotate: -9deg; } }
@keyframes sk-aile-d { 0%, 100% { rotate: 0deg; } 50% { rotate: 9deg; } }
.fig[data-apparence="shaina-crepuscule"] .sk-aura i { top: -8%; bottom: auto; animation-name: sk-tombe; animation-duration: 7.5s; width: calc(var(--fig-h, 96px) * .03); height: calc(var(--fig-h, 96px) * .08); border-radius: 50%; background: linear-gradient(90deg, #FFF3D0 50%, #3A1A48 50%); --o: .9; --r: 140deg; }

/* ════════════════════ Variantes de frappe (animations.js) ════════════════════ */
.anim-eclair-braise { background: radial-gradient(circle at 50% 55%, rgba(255, 210, 120, .7), rgba(230, 90, 30, .35) 40%, transparent 70%); }
.anim-eclair-neant { background: radial-gradient(circle at 50% 50%, rgba(10, 0, 20, .85), rgba(80, 20, 120, .45) 40%, transparent 72%); }
.anim-eclair-solaire { background: radial-gradient(circle at 50% 50%, rgba(255, 250, 220, .85), rgba(255, 200, 70, .45) 35%, transparent 70%); }
.anim-eclair-crepuscule { background: linear-gradient(180deg, rgba(255, 225, 150, .45), transparent 50%, rgba(90, 30, 110, .5)); }
.anim-faille > svg { filter: drop-shadow(0 0 4px rgba(170, 90, 230, .95)); }
.anim-or-liquide > svg { filter: drop-shadow(0 0 3px rgba(255, 210, 90, .9)); }
.anim-visage > svg { filter: drop-shadow(0 0 5px rgba(170, 100, 230, .85)); }

/* ════════════════════ Mouvement réduit ════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-des] .de6::before, [data-des] .de6::after, [data-des] .de6 i,
  .sk-cadre *, .sk-cadre::before, .sk-aura, .sk-aura *, .sk-aura::before, .sk-aura::after,
  .fig[data-cadre="cadre-flammes"] .fig-cadre { animation: none !important; }
  .sk-tige { stroke-dashoffset: 0; }
  .sk-aura i { display: none; }
  [data-des="des-serment"] .de6::after { opacity: 0; }
}
:root[data-anim-reduite="1"] [data-des] .de6::before, :root[data-anim-reduite="1"] [data-des] .de6::after, :root[data-anim-reduite="1"] [data-des] .de6 i,
:root[data-anim-reduite="1"] .sk-cadre *, :root[data-anim-reduite="1"] .sk-aura * { animation: none !important; }

/* ════════════════════ Fastes (fastes.js) : la récompense selon la rareté ════════════════════ */
/* Rayons et nimbes débordent du portrait : jamais de défilement horizontal pour autant (clip garde position: sticky) */
body { overflow-x: clip; }
/* Rare : un lustre passe sur le cadre */
.sk-lustre {
  position: absolute; inset: -6px; padding: 4px; border-radius: 4px; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
  -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: sk-balaye 5.2s ease-in-out infinite;
}
.sk-lustre--vitrail { inset: -8px; padding: 6px; background-image: linear-gradient(115deg, transparent 38%, rgba(255, 250, 220, .7) 50%, transparent 62%); animation-duration: 6.4s; }
.fig-petit .sk-lustre { inset: -4px; padding: 3px; }

/* Épique · Épines : des pétales de sang se détachent des ronces */
.sk-petales { position: absolute; inset: 0; }
.sk-petales i {
  position: absolute; top: 4%; width: calc(var(--fig-w, 72px) * .09); height: calc(var(--fig-w, 72px) * .13); opacity: 0;
  border-radius: 0 80% 0 80%; background: radial-gradient(circle at 30% 30%, #E0454A, #7A0E14 75%); box-shadow: 0 0 3px rgba(0, 0, 0, .6);
  animation: sk-petale 7s ease-in infinite;
}
.sk-petales i:nth-child(1) { left: -8%; animation-delay: -1s; } .sk-petales i:nth-child(2) { left: 96%; animation-delay: -2.6s; --dx: -14px; }
.sk-petales i:nth-child(3) { left: 30%; top: -6%; animation-delay: -4.1s; } .sk-petales i:nth-child(4) { left: 102%; top: 40%; animation-delay: -5.4s; --dx: -10px; }
.sk-petales i:nth-child(5) { left: -10%; top: 46%; animation-delay: -3.3s; }
.fig-petit .sk-petales { display: none; }
@keyframes sk-petale {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 12% { opacity: .95; }
  100% { transform: translate(var(--dx, 12px), calc(var(--fig-h, 96px) * .7)) rotate(320deg); opacity: 0; }
}

/* Épique · Flammes : des escarbilles s'envolent du cadre */
.sk-escarbilles { position: absolute; inset: 0; }
.sk-escarbilles i {
  position: absolute; bottom: 4%; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #FFE7A0; box-shadow: 0 0 4px 1px rgba(255, 140, 40, .95);
  animation: sk-escarbille 2.6s ease-out infinite;
}
.sk-escarbilles i:nth-child(1) { left: -6%; animation-delay: -.2s; --dx: -8px; } .sk-escarbilles i:nth-child(2) { left: 18%; animation-delay: -1.1s; --dx: 6px; }
.sk-escarbilles i:nth-child(3) { left: 44%; animation-delay: -1.9s; --dx: -4px; } .sk-escarbilles i:nth-child(4) { left: 70%; animation-delay: -.7s; --dx: 9px; }
.sk-escarbilles i:nth-child(5) { left: 98%; animation-delay: -1.5s; --dx: 5px; } .sk-escarbilles i:nth-child(6) { left: 104%; bottom: 40%; animation-delay: -2.2s; --dx: 12px; }
.sk-escarbilles i:nth-child(7) { left: -10%; bottom: 52%; animation-delay: -.4s; --dx: -12px; }
.fig-petit .sk-escarbilles i:nth-child(n+4) { display: none; }
@keyframes sk-escarbille {
  0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; }
  100% { transform: translate(var(--dx, 6px), calc(var(--fig-h, 96px) * -1)) scale(.3); opacity: 0; }
}

/* Légendaire : un nimbe respire derrière le portrait */
.fig[data-cadre="cadre-constellations"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-constellations"] .sk-orbite, .fig[data-cadre="cadre-constellations"] .sk-astres { z-index: 4; }
.sk-nimbe {
  position: absolute; inset: -22% -34%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 170, 255, .55), rgba(110, 120, 255, .18) 55%, transparent 100%);
  animation: sk-nimbe 3.6s ease-in-out infinite;
}
.fig[data-cadre="cadre-couronne"] .sk-nimbe { background: radial-gradient(closest-side, rgba(255, 220, 140, .6), rgba(240, 180, 80, .2) 55%, transparent 100%); }
.fig[data-cadre="cadre-couronne"] .sk-rayons { background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0) 0 6deg, rgba(255, 226, 150, .4) 6deg 9deg); }
.fig-petit .sk-nimbe { inset: -14% -22%; }
@keyframes sk-nimbe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* Apparence légendaire : son aura derrière le tableau */
.fig[data-apparence] { isolation: isolate; }
.sk-halo {
  position: absolute; inset: -18% -26%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--h2), color-mix(in srgb, var(--h2) 25%, transparent) 55%, transparent 100%);
  opacity: .55; animation: sk-halo 2.8s ease-in-out infinite;
}
.fig-petit .sk-halo { inset: -12% -18%; }
@keyframes sk-halo { 0%, 100% { opacity: .4; transform: scale(.92); } 50% { opacity: .85; transform: scale(1.08); } }

/* ——— Réactions des portraits habillés ——— */
/* La pulsation passe par `scale` sur le portrait entier : animer .sk-cadre en ferait un contexte d'empilement
   et ferait passer le nimbe et les rayons (z-index -1) devant la toile */
.fig.fx-attaque { animation: fx-pulse .55s cubic-bezier(.2, .9, .3, 1); }
.fig.fx-attaque > .fig-cadre { box-shadow: 0 0 0 1px var(--fx-c1, #FFF), 0 0 0 3px #140D10, 0 0 18px 4px var(--fx-c2, #F0D9A0), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig.fx-touche > .fig-cadre::after { animation: fx-eclair-touche .5s ease-out; }
.fig.fx-victoire > .fig-cadre { animation: fx-gloire 1.6s ease-out; }
.fig.fx-victoire { animation: fx-pulse 1s cubic-bezier(.2, .9, .3, 1) 2; }
@keyframes fx-pulse { 0% { scale: 1; } 35% { scale: 1.07; } 100% { scale: 1; } }
@keyframes fx-eclair-touche { 0% { background: rgba(255, 255, 255, 0); } 15% { background: rgba(255, 245, 235, .75); border-color: #FFF; } 100% { background: rgba(255, 255, 255, 0); } }
@keyframes fx-gloire {
  0% { box-shadow: 0 0 0 1px var(--fig-lisere), 0 0 0 3px #140D10, 0 0 0 0 transparent; }
  25% { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px var(--fx-c1, #FFF), 0 0 40px 12px var(--fx-c2, #F0D9A0); filter: brightness(1.35); }
  100% { box-shadow: 0 0 0 1px var(--fig-lisere), 0 0 0 3px #140D10, 0 0 14px 2px transparent; filter: none; }
}

/* ——— Dés : atterrissage (tous les skins), dés réussis qui s'allument (épiques et légendaires) ——— */
[data-des="des-ivoire"] { --fx-c: rgba(233, 192, 102, .85); } [data-des="des-obsidienne"] { --fx-c: rgba(200, 210, 225, .8); }
[data-des="des-sang"] { --fx-c: rgba(230, 60, 50, .85); } [data-des="des-givre"] { --fx-c: rgba(170, 215, 255, .95); }
[data-des="des-jade"] { --fx-c: rgba(120, 200, 150, .9); } [data-des="des-braise"] { --fx-c: rgba(255, 140, 40, .95); }
[data-des="des-verhal"] { --fx-c: rgba(208, 123, 200, .95); } [data-des="des-serment"] { --fx-c: rgba(255, 216, 119, 1); }
[data-des="des-astral"] { --fx-c: rgba(160, 180, 255, 1); }
[data-des] .de6.fx-atterrit { animation: fx-atterrit .5s cubic-bezier(.3, 1.6, .5, 1) both; }
[data-des] .de6.ok.fx-allume { animation: fx-atterrit .5s cubic-bezier(.3, 1.6, .5, 1) both, fx-allume 1.6s ease-out .1s both; }
@keyframes fx-atterrit { 0% { scale: 1.28; translate: 0 -10px; } 55% { scale: .94 1.04; translate: 0 0; } 100% { scale: 1; translate: 0 0; } }
@keyframes fx-allume {
  0% { box-shadow: 0 0 0 0 transparent, 0 6px 14px rgba(0, 0, 0, .5); }
  25% { box-shadow: 0 0 26px 8px var(--fx-c), 0 6px 14px rgba(0, 0, 0, .5); }
  100% { box-shadow: 0 0 12px 3px var(--fx-c), 0 6px 14px rgba(0, 0, 0, .5); }
}
[data-des] .de6.ok.fx-allume i.p { filter: brightness(1.25); }

/* ——— La toile de particules et les calques plein écran ——— */
.fx-toile { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 95; pointer-events: none; }
.fx-toile[hidden] { display: none; }
.fx-plein { position: fixed; inset: 0; z-index: 94; pointer-events: none; overflow: hidden; }
.fx-ancre { position: absolute; left: 10%; right: 10%; bottom: 0; height: 12%; pointer-events: none; }

/* Or du Serment : la lumière d'or éclate depuis les dés, un reflet de pièce balaie l'écran */
.fx-plein--or::before {
  content: ""; position: absolute; left: var(--x); top: var(--y); width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 225, .95), rgba(255, 216, 119, .55) 18%, rgba(210, 154, 52, .2) 45%, transparent 70%);
  animation: fx-eclat-or var(--fx-d) cubic-bezier(.1, .7, .3, 1) both;
}
.fx-plein--or::after {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 170, 0) 43%, rgba(255, 246, 210, .75) 49%, rgba(255, 255, 255, .95) 50%, rgba(255, 236, 170, .6) 52%, transparent 58%);
  animation: fx-balaye-or var(--fx-d) cubic-bezier(.5, 0, .3, 1) both;
}
.fx-plein--doux::before { width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; }
@keyframes fx-eclat-or { 0% { transform: scale(.05); opacity: 0; } 12% { opacity: 1; } 40% { opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes fx-balaye-or { 0%, 15% { transform: translateX(-70%); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }

/* Astral : la nuit tombe, la constellation se dessine */
.fx-plein--astral { background: radial-gradient(ellipse 80% 70% at var(--x) var(--y), rgba(30, 30, 90, .25), rgba(6, 6, 26, .72) 70%); animation: fx-nuit var(--fx-d) ease-in-out both; }
.fx-plein--astral::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #FFF, transparent), radial-gradient(1px 1px at 28% 62%, #CFE0FF, transparent),
    radial-gradient(2px 2px at 68% 22%, #FFF, transparent), radial-gradient(1px 1px at 82% 78%, #FFF, transparent),
    radial-gradient(1.5px 1.5px at 44% 86%, #BFD0FF, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #FFF, transparent),
    radial-gradient(1px 1px at 6% 52%, #FFF, transparent), radial-gradient(2px 2px at 56% 46%, #E6EEFF, transparent);
  animation: fx-scintille 1.1s ease-in-out infinite alternate;
}
.fx-plein--astral.fx-plein--doux { animation-name: fx-nuit-douce; }
@keyframes fx-nuit { 0% { opacity: 0; } 18%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-nuit-douce { 0% { opacity: 0; } 20%, 65% { opacity: .65; } 100% { opacity: 0; } }
@keyframes fx-scintille { from { opacity: .55; } to { opacity: 1; } }
.fx-constellation { z-index: 96; }
.fx-constellation svg {
  position: absolute; left: var(--x); top: var(--y); width: calc(200px * var(--k, 1)); height: calc(130px * var(--k, 1));
  transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 0 6px rgba(170, 190, 255, .9));
  animation: fx-fondu-fin var(--fx-d) ease-in both;
}
.fx-constellation path { fill: none; stroke: #DCE6FF; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: fx-trace calc(var(--fx-d) * .5) ease-out .15s forwards; }
.fx-constellation circle { fill: #FFF; transform-box: fill-box; transform-origin: center; opacity: 0; animation: fx-etoile .5s cubic-bezier(.2, 1.6, .4, 1) calc(.15s + var(--n) * 110ms) forwards; }
@keyframes fx-trace { to { stroke-dashoffset: 0; } }
@keyframes fx-etoile { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fx-fondu-fin { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* Frappe légendaire : teinte, bandes de cinéma, nom du skin */
.fx-cine { z-index: 93; background: radial-gradient(ellipse 75% 65% at 50% 50%, color-mix(in srgb, var(--c2) 22%, transparent), color-mix(in srgb, var(--c3) 42%, rgba(5, 3, 4, .55)) 100%); animation: fx-cine var(--fx-d) ease-in-out both; }
@keyframes fx-cine { 0% { opacity: 0; } 14%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-cine-bande { position: absolute; left: 0; right: 0; height: 11vh; background: #050304; }
.fx-cine-bande--h { top: 0; transform-origin: top; animation: fx-bande var(--fx-d) cubic-bezier(.3, .7, .3, 1) both; }
.fx-cine-bande--b { bottom: 0; transform-origin: bottom; animation: fx-bande var(--fx-d) cubic-bezier(.3, .7, .3, 1) both; }
@keyframes fx-bande { 0% { transform: scaleY(0); } 16%, 82% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.fx-cine-nom {
  position: absolute; left: 0; right: 0; bottom: calc(11vh + 14px); margin: 0; text-align: center; padding: 0 16px;
  font: italic 600 clamp(2rem, 9vw, 4.4rem)/1 var(--titre, 'Cormorant Garamond', serif); letter-spacing: .02em;
  opacity: 0; animation: fx-nom 1.3s cubic-bezier(.2, .8, .3, 1) var(--fx-impact) both;
}
.fx-cine-nom span {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--c2) 0%, var(--c1) 40%, #FFF 50%, var(--c1) 60%, var(--c2) 100%); background-size: 250% 100%;
  filter: drop-shadow(0 0 16px var(--c2)) drop-shadow(0 2px 0 rgba(0, 0, 0, .8));
  animation: reflet-cine 1.3s ease-out var(--fx-impact) both;
}
@keyframes fx-nom { 0% { opacity: 0; transform: scale(1.6); letter-spacing: .3em; } 18% { opacity: 1; transform: scale(1); letter-spacing: .02em; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes reflet-cine { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* Révélation d'une apparence légendaire : la bannière d'or */
.fx-banniere {
  position: fixed; inset: auto; left: var(--x); top: var(--y); z-index: 96; display: grid; justify-items: center; gap: 2px;
  padding: 10px 26px 12px; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20, 12, 8, .92) 18%, rgba(20, 12, 8, .92) 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--c2) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c2) 70%, transparent);
  animation: fx-banniere var(--fx-d) cubic-bezier(.2, .8, .3, 1) both;
}
.fx-banniere-sur { font: 500 .7rem/1 var(--titre, serif); letter-spacing: .26em; text-transform: uppercase; color: var(--c1); opacity: .85; }
.fx-banniere-nom {
  font: italic 600 clamp(1.6rem, 6vw, 2.6rem)/1.05 var(--titre, serif); color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #E9C066 0%, #FFF3C4 45%, #FFFFFF 50%, #FFF3C4 55%, #E9C066 100%); background-size: 250% 100%;
  filter: drop-shadow(0 0 12px var(--c2)); animation: reflet-cine 1.6s ease-out .3s both;
}
@keyframes fx-banniere { 0% { opacity: 0; transform: translate(-50%, -80%) scaleX(.4); } 14% { opacity: 1; transform: translate(-50%, -100%) scaleX(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%); } }

/* Arène : traînée et reflets aux couleurs de l'apparence (épique et légendaire) */
.arene-trainee.fx-teinte { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--trainee) 75%, transparent) 55%, #FFF); box-shadow: 0 0 16px var(--trainee); }
.arene-fantome.fx-teinte { filter: drop-shadow(0 0 8px var(--trainee)) brightness(1.2); }

@media (prefers-reduced-motion: reduce) {
  .sk-lustre, .sk-petales, .sk-escarbilles { display: none; }
  .sk-nimbe, .sk-halo { animation: none; opacity: .75; transform: none; }
  [data-des] .de6.fx-atterrit, [data-des] .de6.ok.fx-allume { animation: none; }
  [data-des] .de6.ok.fx-allume { box-shadow: 0 0 12px 3px var(--fx-c), 0 6px 14px rgba(0, 0, 0, .5); }
  .fig.fx-attaque, .fig.fx-victoire, .fig.fx-victoire > .fig-cadre, .fig.fx-touche > .fig-cadre::after { animation: none; }
  .fx-banniere-nom { animation: none; background-position: 50% 0; }
  .fx-banniere { animation: fx-fondu-fin var(--fx-d) linear both; transform: translate(-50%, -100%); }
}
:root[data-anim-reduite="1"] .sk-lustre, :root[data-anim-reduite="1"] .sk-petales, :root[data-anim-reduite="1"] .sk-escarbilles { display: none; }

/* ════════════════════ Catalogue II : nouveaux dés ════════════════════ */
/* Échelle : commun = la matière ; rare = + un éclat qui passe ; épique = + mouvement ; légendaire = + halo et signature. */

/* Éclat des rares : un reflet traverse la face de temps en temps (dés rares sans calque ::after) */
[data-des="des-sang"] .de6::after, [data-des="des-givre"] .de6::after, [data-des="des-perle"] .de6::after,
[data-des="des-sceau-yse"] .de6::after, [data-des="des-cendre-vive"] .de6::after, [data-des="des-ecaille"] .de6::after, [data-des="des-parjure"] .de6::after {
  inset: -30% -70%;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .55) 50%, transparent 56%);
  animation: sk-reflet-de 5.6s ease-in-out infinite;
}
[data-des="des-givre"] .de6::after { animation-delay: -1.4s; }
[data-des="des-sang"] .de6::after { animation-delay: -2.8s; background: linear-gradient(105deg, transparent 45%, rgba(255, 170, 150, .4) 50%, transparent 55%); }

/* Ivoire et obsidienne (communs) : un biseau plus marqué, la matière se lit mieux */
[data-des="des-ivoire"] .de6::before { inset: 5%; border-radius: 16%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(150, 110, 40, .25); }
[data-des="des-obsidienne"] .de6::after { background: radial-gradient(ellipse 60% 30% at 30% 12%, rgba(255, 255, 255, .22), transparent 70%); }

/* Cuivre martelé : le cuivre des forges, piqué de coups de marteau */
[data-des="des-cuivre"] .de6 {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 215, 180, .4) 0 7%, transparent 9%) 0 0 / 33% 33%,
    radial-gradient(circle at 70% 70%, rgba(70, 25, 5, .3) 0 8%, transparent 10%) 0 0 / 29% 29%,
    linear-gradient(145deg, #F4AE78, #C06A32 40%, #7E3A16 78%, #C8783E);
  box-shadow: inset 0 -3px 0 rgba(60, 20, 5, .5), inset 0 1px 0 rgba(255, 225, 195, .75), 0 6px 14px rgba(0, 0, 0, .5);
}
[data-des="des-cuivre"] .de6::before { background: radial-gradient(ellipse 70% 40% at 35% 15%, rgba(255, 235, 210, .45), transparent 70%); }
[data-des="des-cuivre"] .de6 i.p { background: radial-gradient(circle at 45% 40%, #3A1606, #120500 70%); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 210, 170, .6); }

/* Bois runique : chêne veiné, runes de garde brûlées aux coins */
[data-des="des-bois-runique"] .de6 {
  background: repeating-radial-gradient(ellipse 160% 70% at -20% 130%, #9A6A3A 0 2.5px, #B47E4A 2.5px 5px, #7E5028 5px 6px), #9A6A3A;
  box-shadow: inset 0 -3px 0 rgba(50, 25, 5, .55), inset 0 1px 0 rgba(255, 220, 170, .4), 0 6px 14px rgba(0, 0, 0, .5);
}
[data-des="des-bois-runique"] .de6::before { inset: 7%; border: 1px solid rgba(50, 22, 4, .55); border-radius: 14%; box-shadow: 0 1px 0 rgba(255, 220, 170, .3); }
[data-des="des-bois-runique"] .de6::after {
  background:
    linear-gradient(#3A1A06, #3A1A06) 13% 11% / 1px 11% no-repeat, linear-gradient(45deg, transparent 45%, #3A1A06 46% 54%, transparent 55%) 15% 10% / 7% 7% no-repeat,
    linear-gradient(#3A1A06, #3A1A06) 87% 89% / 1px 11% no-repeat, linear-gradient(-45deg, transparent 45%, #3A1A06 46% 54%, transparent 55%) 85% 86% / 7% 7% no-repeat;
  opacity: .8;
}
[data-des="des-bois-runique"] .de6 i.p { background: radial-gradient(circle at 45% 40%, #2A1004, #0E0500 70%); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .8), 0 0 2px rgba(255, 140, 40, .35); }

/* Nacre des rivières : irisée, un reflet glisse sur la nacre */
[data-des="des-perle"] .de6 {
  background: conic-gradient(from 210deg at 62% 38%, #FBF6EE, #E9DBF4, #D3EEF0, #F5E8D2, #EBD8EC, #DCEFF4, #FBF6EE);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 -3px 4px rgba(120, 110, 150, .35), 0 6px 14px rgba(0, 0, 0, .45);
}
[data-des="des-perle"] .de6::before { background: radial-gradient(ellipse 55% 35% at 30% 20%, rgba(255, 255, 255, .9), transparent 70%); }
[data-des="des-perle"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #F4F0FF, #8A86A8 50%, #3A3852); box-shadow: 0 0 3px rgba(200, 190, 255, .6); }

/* Sablier d'Orvanne : verre fumé, un filet de sable d'or coule et s'amasse */
[data-des="des-sablier"] .de6 {
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 230, 170, .16), transparent 70%), linear-gradient(160deg, #3A2E22, #16100A);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .35), inset 0 0 8px rgba(255, 210, 120, .25), 0 6px 16px rgba(0, 0, 0, .6), 0 0 10px rgba(240, 196, 107, .25);
}
[data-des="des-sablier"] .de6::before {
  top: auto; height: 42%; border-radius: 0 0 18% 18%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, #FFE08A, #D9A43A 55%, rgba(160, 110, 30, 0) 100%);
  transform-origin: 50% 100%; animation: sk-sable-monte 6s ease-in-out infinite;
}
[data-des="des-sablier"] .de6::after {
  left: 48%; right: 48%; top: 0; bottom: 30%; border-radius: 1px;
  background: repeating-linear-gradient(180deg, #FFE7A0 0 2px, rgba(255, 220, 140, .2) 2px 4px);
  animation: sk-sable-coule .35s linear infinite;
}
[data-des="des-sablier"] .de6 i.p { background: radial-gradient(circle at 38% 32%, #FFF7D8, #E9C066 45%, #8A5E16); box-shadow: 0 0 4px rgba(255, 210, 120, .7); }
@keyframes sk-sable-monte { 0% { transform: scaleY(.45); } 85% { transform: scaleY(1); } 100% { transform: scaleY(.45); } }
@keyframes sk-sable-coule { to { background-position: 0 4px; } }

/* Tempête : un orage dans le verre ; les nuages dérivent, l'éclair frappe (et à chaque six, fastes.js) */
[data-des="des-tempete"] .de6 {
  background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(110, 140, 200, .35), transparent 70%), linear-gradient(170deg, #2A3448, #0C1220);
  box-shadow: inset 0 0 0 1px rgba(170, 200, 255, .3), 0 6px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(120, 160, 255, .3);
}
[data-des="des-tempete"] .de6::before {
  inset: 0 -100% 0 0;
  background: radial-gradient(ellipse 15% 22% at 10% 30%, rgba(160, 175, 200, .45), transparent 70%), radial-gradient(ellipse 13% 20% at 28% 20%, rgba(140, 155, 185, .4), transparent 70%),
    radial-gradient(ellipse 15% 24% at 40% 35%, rgba(170, 185, 210, .4), transparent 70%), radial-gradient(ellipse 15% 22% at 60% 30%, rgba(160, 175, 200, .45), transparent 70%),
    radial-gradient(ellipse 13% 20% at 78% 20%, rgba(140, 155, 185, .4), transparent 70%), radial-gradient(ellipse 15% 24% at 90% 35%, rgba(170, 185, 210, .4), transparent 70%);
  animation: sk-nuages 9s linear infinite;
}
[data-des="des-tempete"] .de6::after {
  background: linear-gradient(115deg, transparent 40%, rgba(230, 240, 255, .95) 47%, transparent 49%, transparent 52%, rgba(230, 240, 255, .8) 55%, transparent 60%);
  opacity: 0; animation: sk-eclair-de 4.8s linear infinite;
}
[data-des="des-tempete"] .de6 i.p { background: radial-gradient(circle, #FFFFFF 0 25%, #9CC4FF 55%, #3A5AA8); box-shadow: 0 0 6px rgba(150, 190, 255, .9); }
@keyframes sk-nuages { to { transform: translateX(-50%); } }
@keyframes sk-eclair-de { 0%, 88%, 100% { opacity: 0; } 89% { opacity: 1; } 90.5% { opacity: .1; } 91.5% { opacity: .85; } 94% { opacity: 0; } }

/* Couronne de la Légende : émail blanc et or, rayons royaux qui tournent, des couronnes pour points */
[data-des="des-legende"] .de6 {
  background: radial-gradient(circle at 50% 45%, #FFFDF4, #F3E6C2 60%, #D9B866);
  box-shadow: inset 0 0 0 1.5px #E3B550, inset 0 0 0 3px #FFF6D6, inset 0 -3px 0 rgba(120, 80, 10, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 220, 130, .55);
  animation: sk-legende-lueur 2.8s ease-in-out infinite;
}
[data-des="des-legende"] .de6::before {
  inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(240, 190, 80, 0) 0 9deg, rgba(240, 190, 80, .28) 9deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%);
  animation: sk-tourne 16s linear infinite;
}
[data-des="des-legende"] .de6::after {
  inset: -30% -60%;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .95) 50%, transparent 57%);
  animation: sk-reflet-de 3s ease-in-out infinite;
}
[data-des="des-legende"] .de6 i.p {
  border-radius: 1px;
  background: linear-gradient(180deg, #FFF3C4, #D9A43A 60%, #8A5E16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L0 2.5 3 5 5 0 7 5 10 2.5 9 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 10 10'%3E%3Cpath d='M1 9L0 2.5 3 5 5 0 7 5 10 2.5 9 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes sk-legende-lueur {
  0%, 100% { box-shadow: inset 0 0 0 1.5px #E3B550, inset 0 0 0 3px #FFF6D6, inset 0 -3px 0 rgba(120, 80, 10, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 220, 130, .4); }
  50% { box-shadow: inset 0 0 0 1.5px #F2C46B, inset 0 0 0 3px #FFFBEA, inset 0 -3px 0 rgba(120, 80, 10, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 24px 3px rgba(255, 225, 140, .75); }
}

/* Sceau d'Ysé (Reliquaire) : vélin bordé d'un double filet d'or, fleurons aux coins ;
   chaque point est une galette de cire au bord irrégulier, frappée de l'étoile d'Ysé */
[data-des="des-sceau-yse"] .de6 {
  background:
    radial-gradient(circle at 11% 11%, #C9A04A 0 4%, transparent 5%), radial-gradient(circle at 89% 11%, #C9A04A 0 4%, transparent 5%),
    radial-gradient(circle at 11% 89%, #C9A04A 0 4%, transparent 5%), radial-gradient(circle at 89% 89%, #C9A04A 0 4%, transparent 5%),
    radial-gradient(circle at 30% 22%, #FFFDF6, #F1E6CC 55%, #D9C49A);
  box-shadow: inset 0 0 0 1px #9A6A1E, inset 0 0 0 2.5px #F6EAC8, inset 0 0 0 3.5px #C9A04A, inset 0 -3px 0 rgba(120, 90, 40, .3), 0 6px 14px rgba(0, 0, 0, .45);
}
[data-des="des-sceau-yse"] .de6 i.p {
  border-radius: 0; transform: scale(1.2);
  background: radial-gradient(circle at 38% 30%, #F47E90, #C02840 45%, #6E0E22 88%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M19.7 10L18.3 13 17.2 16 14.5 17.8 11.6 19.2 8.4 18.8 5.3 18.2 3.4 15.6 .8 13.4 1.6 10 .6 6.6 3.6 4.7 5 1.3 8.5 1.7 11.7 .4 14.4 2.4 17.2 4 18.4 6.9Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M19.7 10L18.3 13 17.2 16 14.5 17.8 11.6 19.2 8.4 18.8 5.3 18.2 3.4 15.6 .8 13.4 1.6 10 .6 6.6 3.6 4.7 5 1.3 8.5 1.7 11.7 .4 14.4 2.4 17.2 4 18.4 6.9Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
[data-des="des-sceau-yse"] .de6 i.p::after {
  content: ""; position: absolute; inset: 18%; background: rgba(255, 228, 200, .7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.8L11 7.6 14.4 5.6 12.4 9 16.2 10 12.4 11 14.4 14.4 11 12.4 10 16.2 9 12.4 5.6 14.4 7.6 11 3.8 10 7.6 9 5.6 5.6 9 7.6Z'/%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 20 20'%3E%3Cpath d='M10 3.8L11 7.6 14.4 5.6 12.4 9 16.2 10 12.4 11 14.4 14.4 11 12.4 10 16.2 9 12.4 5.6 14.4 7.6 11 3.8 10 7.6 9 5.6 5.6 9 7.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Larmes d'Orvanne (Reliquaire) : cristal pâle, une larme d'or palpite au cœur */
[data-des="des-larmes-orvanne"] .de6 {
  background: conic-gradient(from 30deg, #EEF4FB, #C9D8EC, #F8FBFF, #BCCDE4, #EEF4FB);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 10px rgba(150, 175, 220, .6), 0 6px 14px rgba(0, 20, 50, .45), 0 0 12px rgba(255, 230, 170, .3);
}
[data-des="des-larmes-orvanne"] .de6::before {
  left: 36%; right: 36%; top: 26%; bottom: 24%; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 45% 65%, #FFF7D8, #F2C46B 45%, rgba(242, 196, 107, 0) 75%);
  animation: sk-larme 2.6s ease-in-out infinite;
}
[data-des="des-larmes-orvanne"] .de6 i.p { background: radial-gradient(circle, #FFFFFF 0 30%, #DCE6F5 55%, #8A9EC0); box-shadow: 0 0 5px rgba(255, 255, 255, .95); animation: sk-scintille 3.2s ease-in-out infinite; }
[data-des="des-larmes-orvanne"] .de6 i:nth-child(2n) { animation-delay: -1.4s; }
@keyframes sk-larme { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } }

/* Cendre vive (Reliquaire) : gris de cendre, fêlures qui rougeoient à peine */
[data-des="des-cendre-vive"] .de6 {
  background:
    linear-gradient(118deg, transparent 47%, rgba(255, 110, 40, .7) 48.5%, transparent 50%),
    linear-gradient(28deg, transparent 66%, rgba(255, 130, 50, .55) 67%, transparent 68.5%),
    radial-gradient(circle at 30% 25%, #8E8682, #4E4846 60%, #2A2624);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .2), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .55);
}
[data-des="des-cendre-vive"] .de6 i.p { background: radial-gradient(circle, #FFC27A 0 18%, #E5531A 50%, #3A1004); box-shadow: 0 0 3px rgba(255, 120, 40, .55); }

/* Cœur de Thulvia (Reliquaire) : braise pourpre, chaque point bat comme un cœur */
[data-des="des-coeur-thulvia"] .de6 {
  background: radial-gradient(circle at 50% 60%, #7A1414, #3A0606 65%, #1A0202);
  box-shadow: inset 0 0 0 1px rgba(255, 110, 60, .3), inset 0 0 10px rgba(255, 80, 30, .35), 0 6px 16px rgba(0, 0, 0, .6), 0 0 14px rgba(230, 70, 30, .35);
}
[data-des="des-coeur-thulvia"] .de6::before { background: radial-gradient(circle at 50% 55%, rgba(255, 120, 50, .45), transparent 60%); animation: sk-bat-coeur 1.15s ease-in-out infinite; }
[data-des="des-coeur-thulvia"] .de6 i.p {
  border-radius: 0; background: radial-gradient(circle at 40% 35%, #FFD7A0, #FF5A2A 50%, #8E0E0E);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 9.4C2 7 0 5.2 0 3.1 0 1.4 1.3.2 2.8.2 3.8.2 4.6.8 5 1.6 5.4.8 6.2.2 7.2.2 8.7.2 10 1.4 10 3.1 10 5.2 8 7 5 9.4Z'/%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 10 10'%3E%3Cpath d='M5 9.4C2 7 0 5.2 0 3.1 0 1.4 1.3.2 2.8.2 3.8.2 4.6.8 5 1.6 5.4.8 6.2.2 7.2.2 8.7.2 10 1.4 10 3.1 10 5.2 8 7 5 9.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sk-bat-coeur 1.15s ease-in-out infinite;
}
@keyframes sk-bat-coeur { 0%, 100% { transform: scale(1); opacity: .85; } 14% { transform: scale(1.3); opacity: 1; } 28% { transform: scale(1); } 42% { transform: scale(1.18); opacity: 1; } 70% { transform: scale(1); opacity: .85; } }

/* Écaille (Reliquaire) : taillés dans une écaille de Kar-oth, reflets rouges */
[data-des="des-ecaille"] .de6 {
  background:
    radial-gradient(circle at 50% 0%, transparent 0 55%, rgba(170, 30, 25, .55) 58%, #0C0606 68%) 0 0 / 34% 30%,
    radial-gradient(circle at 50% 0%, transparent 0 55%, rgba(170, 30, 25, .45) 58%, #0C0606 68%) 17% 15% / 34% 30%,
    linear-gradient(160deg, #3A1414, #0A0404);
  box-shadow: inset 0 0 0 1px rgba(220, 70, 50, .3), inset 0 -3px 0 rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .6);
}
[data-des="des-ecaille"] .de6 i.p { background: radial-gradient(circle at 40% 35%, #FFB08A, #C8301E 55%, #3A0606); box-shadow: 0 0 4px rgba(230, 70, 40, .7); }

/* Œil du dragon (Reliquaire) : iris d'ambre, pupilles fendues qui suivent le lancer */
[data-des="des-oeil-dragon"] .de6 {
  background: radial-gradient(circle at 50% 50%, #FFE58A, #F2A23A 40%, #A8401A 75%, #3A0E06);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .5), inset 0 0 12px rgba(80, 10, 0, .6), 0 6px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(242, 162, 58, .35);
}
[data-des="des-oeil-dragon"] .de6::before {
  background: repeating-conic-gradient(rgba(90, 30, 0, .25) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 72%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 72%);
}
[data-des="des-oeil-dragon"] .de6 i.p { position: relative; overflow: hidden; background: radial-gradient(circle, #FFF2B0, #E9A030 70%); box-shadow: 0 0 3px rgba(255, 200, 80, .8); }
[data-des="des-oeil-dragon"] .de6 i.p::after {
  content: ""; position: absolute; left: 38%; right: 38%; top: 6%; bottom: 6%; border-radius: 50%; background: #050200;
  animation: sk-pupille 3.8s ease-in-out infinite;
}
@keyframes sk-pupille { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-70%); } 60% { transform: translateX(70%); } }

/* Dés pipés (Reliquaire) : noirs d'un côté, blancs de l'autre ; les points aussi mentent */
[data-des="des-parjure"] .de6 { background: linear-gradient(90deg, #121014 50%, #F2EDE2 50%); box-shadow: inset 0 0 0 1px rgba(199, 123, 192, .45), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .5); }
[data-des="des-parjure"] .de6 i.p { background: #F2EDE2; box-shadow: 0 0 0 1px rgba(199, 123, 192, .5); }
[data-des="des-parjure"] .de6 i.p:nth-child(3n) { background: #121014; }
[data-des="des-parjure"] .de6 i.p:nth-child(3n+2) { background: linear-gradient(90deg, #F2EDE2 50%, #121014 50%); }

/* Mille Masques (Reliquaire) : ivoire ; chaque point est un masque qui se retourne */
[data-des="des-masque"] .de6 {
  background: radial-gradient(circle at 30% 25%, #F4ECDC, #CFC2A8 65%, #8E8270);
  box-shadow: inset 0 0 0 1px rgba(160, 110, 230, .35), inset 0 -3px 0 rgba(60, 40, 20, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 10px rgba(176, 110, 240, .3);
}
[data-des="des-masque"] .de6 i.p {
  border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 32% 40%, #F4ECDC 0 12%, transparent 15%), radial-gradient(circle at 68% 40%, #F4ECDC 0 12%, transparent 15%),
    radial-gradient(ellipse 30% 12% at 50% 74%, #F4ECDC 0 55%, transparent 70%), linear-gradient(#3A2050, #0B0610);
  box-shadow: 0 0 3px rgba(176, 110, 240, .7);
  animation: sk-masque-tourne 5s ease-in-out infinite;
}
[data-des="des-masque"] .de6 i:nth-child(2n) { animation-delay: -2.1s; } [data-des="des-masque"] .de6 i:nth-child(3n) { animation-delay: -3.6s; }
@keyframes sk-masque-tourne { 0%, 40% { transform: rotate(0deg); } 48%, 88% { transform: rotate(180deg); } 96%, 100% { transform: rotate(360deg); } }

/* Couleur d'éclat des nouveaux dés (atterrissage, dés réussis allumés) */
[data-des="des-cuivre"] { --fx-c: rgba(230, 140, 80, .9); } [data-des="des-bois-runique"] { --fx-c: rgba(200, 150, 90, .85); }
[data-des="des-perle"] { --fx-c: rgba(230, 215, 250, .95); } [data-des="des-sablier"] { --fx-c: rgba(255, 215, 120, 1); }
[data-des="des-tempete"] { --fx-c: rgba(150, 190, 255, 1); } [data-des="des-legende"] { --fx-c: rgba(255, 228, 150, 1); }
[data-des="des-sceau-yse"] { --fx-c: rgba(230, 80, 100, .95); } [data-des="des-larmes-orvanne"] { --fx-c: rgba(255, 236, 190, 1); }
[data-des="des-cendre-vive"] { --fx-c: rgba(255, 130, 50, .9); } [data-des="des-coeur-thulvia"] { --fx-c: rgba(255, 90, 40, 1); }
[data-des="des-ecaille"] { --fx-c: rgba(220, 60, 40, .9); } [data-des="des-oeil-dragon"] { --fx-c: rgba(255, 190, 70, 1); }
[data-des="des-parjure"] { --fx-c: rgba(199, 123, 192, .95); } [data-des="des-masque"] { --fx-c: rgba(176, 110, 240, 1); }

/* ════════════════════ Catalogue II : cadres ════════════════════ */

/* Bronze patiné (repris) : rivets aux coins */
.sk-rivet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2D2A0, #9A6A34 55%, #3A2208); box-shadow: 0 0 0 1px #1A110A, 0 1px 2px rgba(0, 0, 0, .7); }
.sk-rivet:nth-child(1) { left: -8px; top: -8px; } .sk-rivet:nth-child(2) { right: -8px; top: -8px; }
.sk-rivet:nth-child(3) { left: -8px; bottom: -8px; } .sk-rivet:nth-child(4) { right: -8px; bottom: -8px; }
.fig-petit .sk-rivet { width: 5px; height: 5px; }
.fig-petit .sk-rivet:nth-child(-n+2) { top: -5px; } .fig-petit .sk-rivet:nth-child(n+3) { bottom: -5px; }
.fig-petit .sk-rivet:nth-child(odd) { left: -5px; } .fig-petit .sk-rivet:nth-child(even) { right: -5px; }

/* Lierre des hameaux : bois brut, lierre enroulé */
.fig[data-cadre="cadre-lierre"] { --fig-lisere: #8A6A3E; --fig-filet: rgba(120, 160, 90, .4); }
.fig[data-cadre="cadre-lierre"] .fig-cadre { box-shadow: 0 0 0 1px #B48A52, 0 0 0 3px #1A1008, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-lierre"] .sk-cadre::before {
  inset: -6px; border: 4px solid transparent; border-radius: 3px;
  border-image: repeating-linear-gradient(90deg, #8A5E32 0 3px, #6E4824 3px 5px, #9E6E3C 5px 9px, #5A3A1C 9px 10px) 4;
}
.sk-lierre { position: absolute; left: -8%; top: -6%; width: 116%; height: 112%; overflow: visible; }
.sk-lierre-tige { fill: none; stroke: #3E5A26; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sk-lierre-f path { fill: #5A8A3A; stroke: #23361A; stroke-width: .6; vector-effect: non-scaling-stroke; }
.sk-lierre-f path:nth-child(3n) { fill: #74A84A; } .sk-lierre-f path:nth-child(4n+1) { fill: #3F6E2E; }
.fig-petit .sk-lierre-f path:nth-child(2n) { display: none; }

/* Runes de garde : pierre grise, runes qui s'allument une à une */
.fig[data-cadre="cadre-runes"] { --fig-lisere: #A8B4C0; --fig-filet: rgba(140, 200, 255, .35); }
.fig[data-cadre="cadre-runes"] .fig-cadre { box-shadow: 0 0 0 1px #B8C2CC, 0 0 0 3px #101418, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-runes"] .sk-cadre::before {
  inset: -10px; border: 8px solid transparent; border-radius: 3px;
  border-image: linear-gradient(135deg, #8A949E, #5A626C 30%, #7A848E 55%, #4A525C 80%, #8A949E) 8;
}
.sk-lustre--pierre { inset: -10px; padding: 8px; background-image: linear-gradient(115deg, transparent 40%, rgba(200, 230, 255, .45) 50%, transparent 60%); }
.sk-runes { position: absolute; inset: -10px; z-index: 2; }
.sk-rune {
  position: absolute; width: 7px; height: 8px; overflow: visible;
  fill: none; stroke: #262C34; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  animation: sk-rune 6s ease-in-out infinite; animation-delay: calc(var(--n) * .5s);
}
.sk-rune:nth-child(1) { left: 16%; top: 0; } .sk-rune:nth-child(2) { left: 46%; top: 0; } .sk-rune:nth-child(3) { left: 76%; top: 0; }
.sk-rune:nth-child(4) { right: 1px; top: 22%; } .sk-rune:nth-child(5) { right: 1px; top: 48%; } .sk-rune:nth-child(6) { right: 1px; top: 74%; }
.sk-rune:nth-child(7) { left: 76%; bottom: 0; } .sk-rune:nth-child(8) { left: 46%; bottom: 0; } .sk-rune:nth-child(9) { left: 16%; bottom: 0; }
.sk-rune:nth-child(10) { left: 1px; top: 74%; } .sk-rune:nth-child(11) { left: 1px; top: 48%; } .sk-rune:nth-child(12) { left: 1px; top: 22%; }
.fig-petit .sk-runes, .fig-petit .sk-lustre--pierre { inset: -7px; } .fig-petit[data-cadre="cadre-runes"] .sk-cadre::before { inset: -7px; border-width: 5px; }
.fig-petit .sk-rune { width: 4px; height: 5px; } .fig-petit .sk-rune:nth-child(3n+2) { display: none; }
@keyframes sk-rune { 0%, 30%, 100% { stroke: #262C34; filter: none; } 8%, 18% { stroke: #CFE8FF; filter: drop-shadow(0 0 2px #7CC0FF) drop-shadow(0 0 4px #4A90E0); } }

/* Givre éternel : le givre grimpe des coins, les flocons tombent */
.fig[data-cadre="cadre-givre"] { --fig-lisere: #DDF0FF; --fig-filet: rgba(170, 215, 255, .5); }
.fig[data-cadre="cadre-givre"] .fig-cadre { box-shadow: 0 0 0 1px #E6F4FF, 0 0 0 3px #0C1624, 0 0 0 4px rgba(170, 215, 255, .6), 0 0 18px rgba(160, 210, 255, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-givre { position: absolute; left: -6%; top: -5%; width: 112%; height: 110%; overflow: visible; }
.sk-givre path { fill: none; stroke: #EAF6FF; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sk-givre { filter: drop-shadow(0 0 2px rgba(170, 215, 255, .9)); }
.sk-givre g { animation: sk-givre-pousse 7s ease-in-out infinite; }
.sk-givre g:nth-child(2) { animation-delay: -1.7s; } .sk-givre g:nth-child(3) { animation-delay: -3.4s; } .sk-givre g:nth-child(4) { animation-delay: -5.1s; }
@keyframes sk-givre-pousse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.sk-flocons { position: absolute; inset: 0; overflow: hidden; }
.sk-flocons i {
  position: absolute; top: -6%; width: calc(var(--fig-w, 72px) * .06); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 35%, rgba(200, 230, 255, .5) 60%, transparent 70%);
  animation: sk-tombe 6s linear infinite;
}
.sk-flocons i:nth-child(1) { left: 8%; animation-delay: -1s; --dx: 6px; } .sk-flocons i:nth-child(2) { left: 24%; animation-delay: -3.2s; --dx: -5px; }
.sk-flocons i:nth-child(3) { left: 41%; animation-delay: -5s; --dx: 8px; } .sk-flocons i:nth-child(4) { left: 57%; animation-delay: -2.2s; --dx: -7px; }
.sk-flocons i:nth-child(5) { left: 72%; animation-delay: -4.4s; --dx: 5px; } .sk-flocons i:nth-child(6) { left: 86%; animation-delay: -.4s; --dx: -4px; }
.sk-flocons i:nth-child(7) { left: 50%; animation-delay: -3.8s; --dx: 3px; }
.fig-petit .sk-flocons i:nth-child(n+4) { display: none; }

/* Ailes de Grimbalda : une aile blanche, une aile noire ; le portrait est enveloppé */
.fig[data-cadre="cadre-ailes"] { --fig-lisere: #FFF3D0; --fig-filet: rgba(240, 196, 107, .5); --fig-lumiere: rgba(255, 240, 200, .4); }
.fig[data-cadre="cadre-ailes"] .fig-cadre { box-shadow: 0 0 0 1px #FFF3D0, 0 0 0 3px #1A1020, 0 0 0 5px #C9A04A, 0 0 0 6px #3A1A48, 0 0 24px rgba(255, 220, 150, .45), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-ailes"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-ailes"] .sk-nimbe { background: radial-gradient(closest-side, rgba(255, 240, 200, .55), rgba(120, 60, 140, .22) 60%, transparent 100%); }
.sk-ailes { position: absolute; inset: 0; z-index: -1; }
.sk-ailes b { position: absolute; top: -8%; width: 74%; height: 92%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M60 14C40 2 14 4 2 20 10 18 18 18 24 21 10 26 2 36 0 50 8 44 16 41 24 41 14 48 8 58 8 72 16 62 26 55 36 52 34 60 34 68 38 78 44 66 52 56 60 50Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M60 14C40 2 14 4 2 20 10 18 18 18 24 21 10 26 2 36 0 50 8 44 16 41 24 41 14 48 8 58 8 72 16 62 26 55 36 52 34 60 34 68 38 78 44 66 52 56 60 50Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sk-ailes-g { left: -56%; transform-origin: 100% 22%; background: linear-gradient(200deg, #FFFFFF, #F4EAD0 45%, #C9B48A); filter: drop-shadow(0 0 4px rgba(255, 240, 200, .9)); animation: sk-battement-g 4.2s ease-in-out infinite; }
.sk-ailes-d { right: -56%; transform-origin: 0% 22%; scale: -1 1; background: linear-gradient(200deg, #8A62B0, #3A2650 40%, #160C20); filter: drop-shadow(0 0 4px rgba(170, 100, 230, .9)); animation: sk-battement-d 4.2s ease-in-out infinite; }
@keyframes sk-battement-g { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg) scale(1.04); } }
@keyframes sk-battement-d { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg) scale(1.04); } }
.sk-plumes { position: absolute; inset: -10% -30%; overflow: visible; }
.sk-plumes i {
  position: absolute; top: 0; width: calc(var(--fig-w, 72px) * .05); height: calc(var(--fig-w, 72px) * .14); border-radius: 50%; opacity: 0;
  background: #FBF5E6; box-shadow: 0 0 4px rgba(255, 240, 200, .8); animation: sk-tombe 7s ease-in-out infinite;
}
.sk-plumes i:nth-child(2n) { background: #1E1426; box-shadow: 0 0 4px rgba(150, 90, 200, .8); }
.sk-plumes i:nth-child(1) { left: 6%; animation-delay: -1s; --dx: 10px; --r: 200deg; } .sk-plumes i:nth-child(2) { left: 92%; animation-delay: -2.4s; --dx: -12px; --r: -220deg; }
.sk-plumes i:nth-child(3) { left: 16%; animation-delay: -4s; --dx: 8px; --r: 160deg; } .sk-plumes i:nth-child(4) { left: 82%; animation-delay: -5.4s; --dx: -6px; --r: -180deg; }
.sk-plumes i:nth-child(5) { left: 30%; animation-delay: -3.1s; --dx: 12px; } .sk-plumes i:nth-child(6) { left: 70%; animation-delay: -6.3s; --dx: -9px; }
.fig-petit .sk-plumes { display: none; }

/* Tours d'Aubemont : la capitale se dresse au lever du jour */
.fig[data-cadre="cadre-tours-aubemont"] { --fig-lisere: #F4ECD8; --fig-filet: rgba(240, 217, 160, .5); }
.fig[data-cadre="cadre-tours-aubemont"] .fig-cadre { box-shadow: 0 0 0 1px #FFFBEA, 0 0 0 3px #1A140C, 0 0 0 4px #E9C066, 0 0 18px rgba(255, 220, 150, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-tours-aubemont"] .sk-cadre { z-index: auto; }
.sk-aurore {
  position: absolute; left: -30%; right: -30%; bottom: -12%; height: 70%; z-index: -1; border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 210, 140, .75), rgba(240, 150, 90, .3) 50%, transparent 75%);
  animation: sk-aurore 5s ease-in-out infinite;
}
@keyframes sk-aurore { 0%, 100% { opacity: .55; transform: translateY(6%); } 50% { opacity: 1; transform: translateY(0); } }
.sk-tours { position: absolute; left: -14%; bottom: -6%; width: 128%; height: 46%; z-index: 4; overflow: visible; filter: drop-shadow(0 -1px 3px rgba(255, 220, 150, .6)); }
.sk-tours path { fill: #EFE7D4; stroke: #8A7A5A; stroke-width: .4; }
.sk-tours .sk-tours-fenetres { fill: #F2C46B; stroke: none; animation: sk-fenetres 3s ease-in-out infinite alternate; }
@keyframes sk-fenetres { from { opacity: .4; } to { opacity: 1; } }
.sk-poussiere-or { position: absolute; inset: 0; z-index: 4; }
.sk-poussiere-or i { position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%; opacity: 0; background: #FFE7A0; box-shadow: 0 0 4px #F2C46B; animation: sk-escarbille 4s ease-out infinite; }
.sk-poussiere-or i:nth-child(1) { left: 4%; } .sk-poussiere-or i:nth-child(2) { left: 22%; animation-delay: -1.3s; } .sk-poussiere-or i:nth-child(3) { left: 46%; animation-delay: -2.6s; }
.sk-poussiere-or i:nth-child(4) { left: 68%; animation-delay: -.7s; } .sk-poussiere-or i:nth-child(5) { left: 88%; animation-delay: -3.3s; } .sk-poussiere-or i:nth-child(6) { left: 96%; animation-delay: -2s; }
.fig-petit .sk-poussiere-or { display: none; }

/* Reine-Flamme : une couronne de feu qui respire, le cadre couve */
.fig[data-cadre="cadre-reine-flamme"] { --fig-lisere: #FF9A3A; --fig-filet: rgba(255, 110, 40, .45); }
.fig[data-cadre="cadre-reine-flamme"] .fig-cadre { animation: fig-respire 6.4s ease-in-out var(--fig-d, 0s) infinite, sk-brasier 2.2s ease-in-out infinite alternate; }
.sk-couronne-feu {
  position: absolute; left: 50%; top: 0; width: 46%; height: auto; overflow: visible; transform-origin: 50% 100%;
  transform: translate(-50%, -78%); filter: drop-shadow(0 0 6px rgba(255, 120, 40, .9)); animation: sk-couronne-respire 1.6s ease-in-out infinite;
}
@keyframes sk-couronne-respire { 0%, 100% { transform: translate(-50%, -78%) scale(1, .92); } 50% { transform: translate(-50%, -78%) scale(1.05, 1.12); } }

/* Griffes de Kar-oth : quatre griffes tiennent le portrait ; parfois, elles serrent */
.fig[data-cadre="cadre-griffes"] { --fig-lisere: #A8301E; --fig-filet: rgba(200, 50, 30, .4); }
.fig[data-cadre="cadre-griffes"] .fig-cadre { box-shadow: 0 0 0 1px #C8402A, 0 0 0 3px #0A0404, 0 0 16px rgba(200, 40, 20, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-griffe { position: absolute; width: 44%; aspect-ratio: 1; height: auto; overflow: visible; filter: drop-shadow(0 0 4px rgba(230, 60, 30, .75)) drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); animation: sk-serre 5s ease-in-out infinite; }
.sk-griffe path:first-child { fill: #241212; stroke: #E0563A; stroke-width: 1; }
.sk-griffe-reflet { fill: none; stroke: #FFB08A; stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.sk-griffe--bg { left: -12%; bottom: -10%; }
.sk-griffe--bd { right: -12%; bottom: -10%; transform: scaleX(-1); animation-name: sk-serre-d; }
.sk-griffe--hg { left: -12%; top: -10%; transform: scaleY(-1); animation-name: sk-serre-h; }
.sk-griffe--hd { right: -12%; top: -10%; transform: scale(-1, -1); animation-name: sk-serre-hd; }
@keyframes sk-serre { 0%, 80%, 100% { translate: 0 0; } 86%, 92% { translate: 6% -6%; } }
@keyframes sk-serre-d { 0%, 80%, 100% { translate: 0 0; } 86%, 92% { translate: -6% -6%; } }
@keyframes sk-serre-h { 0%, 80%, 100% { translate: 0 0; } 86%, 92% { translate: 6% 6%; } }
@keyframes sk-serre-hd { 0%, 80%, 100% { translate: 0 0; } 86%, 92% { translate: -6% 6%; } }

/* Chaînes du Parjure : maillons violets qui se tendent, cadenas */
.fig[data-cadre="cadre-chaines"] { --fig-lisere: #9A6AB8; --fig-filet: rgba(176, 110, 240, .4); }
.fig[data-cadre="cadre-chaines"] .fig-cadre { box-shadow: 0 0 0 1px #B48ACC, 0 0 0 3px #0E0812, 0 0 14px rgba(150, 80, 200, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-chaines { position: absolute; left: -7%; top: -5%; width: 114%; height: 110%; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(170, 100, 230, .8)); animation: sk-tension 3.6s ease-in-out infinite; }
.sk-chaine ellipse { fill: none; stroke: #8A7AA0; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.sk-chaine ellipse:nth-child(2n) { stroke: #C8B8E0; }
@keyframes sk-tension { 0%, 100% { transform: scale(1); } 45% { transform: scale(.985); } 55% { transform: scale(1.012); } }
.sk-cadenas { position: absolute; left: 50%; bottom: 0; width: 20%; height: auto; overflow: visible; transform: translate(-50%, 46%); filter: drop-shadow(0 0 4px rgba(176, 110, 240, .8)); animation: sk-cadenas 3.6s ease-in-out infinite; }
.sk-cadenas rect { fill: #5A3A78; stroke: #D8C0F0; stroke-width: 1; }
.sk-cadenas-anse { fill: none; stroke: #B8A8D0; stroke-width: 2.2; }
.sk-cadenas-trou { stroke: #0E0812; stroke-width: 2.2; stroke-linecap: round; }
@keyframes sk-cadenas { 0%, 100% { transform: translate(-50%, 46%) rotate(0deg); } 50% { transform: translate(-50%, 50%) rotate(4deg); } }
.fig-petit .sk-chaine ellipse:nth-child(3n) { display: none; }

/* ════════════════════ Catalogue II : apparences de classe ════════════════════ */

/* Rares : une teinte de matière et un reflet qui passe sur le tableau (pas de particules : c'est l'épique) */
.fig[data-apparence="lynn-rose-noire"] .sk-aura::after, .fig[data-apparence="azzgur-cuivre"] .sk-aura::after, .fig[data-apparence="gildong-troubadour"] .sk-aura::after,
.fig[data-apparence="kealhin-sable"] .sk-aura::after, .fig[data-apparence="nikolarz-cuivre"] .sk-aura::after, .fig[data-apparence="shaina-aube"] .sk-aura::after {
  inset: -20% -60%; background: linear-gradient(105deg, transparent 44%, rgba(255, 245, 225, .32) 50%, transparent 56%); animation: sk-reflet-de 6.5s ease-in-out infinite;
}
.fig[data-apparence="lynn-rose-noire"] .fig-img { filter: sepia(.55) saturate(.85) hue-rotate(-14deg) contrast(1.18) brightness(.82); }
.fig[data-apparence="lynn-rose-noire"] .sk-aura::before { inset: 0; background: linear-gradient(180deg, rgba(150, 100, 50, .18), rgba(30, 10, 14, .45)); box-shadow: inset 0 0 calc(var(--fig-h, 96px) * .08) rgba(60, 10, 20, .6); }
.sk-rose-noire {
  left: 6%; bottom: 4%; width: 22%; aspect-ratio: 1; opacity: 1 !important; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0A0204 0 14%, #3A0A14 16% 26%, #0A0204 28% 36%, #4A0E1C 38% 50%, #120206 52% 62%, transparent 64%);
  filter: drop-shadow(0 0 3px rgba(160, 30, 50, .7));
}
.fig[data-apparence="azzgur-cuivre"] .fig-img { filter: sepia(.85) saturate(1.7) hue-rotate(-22deg) contrast(1.15) brightness(.88); }
.fig[data-apparence="azzgur-cuivre"] .sk-aura::before { inset: 0; background: linear-gradient(160deg, rgba(240, 150, 80, .2), rgba(80, 30, 10, .35)); }
.fig[data-apparence="gildong-troubadour"] .fig-img { filter: saturate(1.55) hue-rotate(14deg) contrast(1.08) brightness(1.05); }
.fig[data-apparence="gildong-troubadour"] .sk-aura::before { inset: 0; background: linear-gradient(135deg, rgba(220, 60, 60, .16) 0 25%, rgba(240, 200, 60, .14) 25% 50%, rgba(60, 140, 90, .14) 50% 75%, rgba(60, 90, 200, .16) 75%); }
.fig[data-apparence="kealhin-sable"] .fig-img { filter: sepia(.75) saturate(1.25) hue-rotate(-6deg) contrast(1.05) brightness(1.03); }
.fig[data-apparence="kealhin-sable"] .sk-aura::before { inset: 0; background: linear-gradient(0deg, rgba(200, 140, 60, .32), transparent 60%), radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 230, 180, .25), transparent 70%); }
.fig[data-apparence="nikolarz-cuivre"] .fig-img { filter: sepia(.65) saturate(1.35) hue-rotate(-14deg) contrast(1.12) brightness(.92); }
.fig[data-apparence="nikolarz-cuivre"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 90% 40% at 50% 105%, rgba(220, 120, 50, .4), transparent 70%), linear-gradient(180deg, transparent 50%, rgba(70, 35, 15, .3)); }
.fig[data-apparence="shaina-aube"] .fig-img { filter: sepia(.25) saturate(1.1) contrast(1.02) brightness(1.1); }
.fig[data-apparence="shaina-aube"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(255, 245, 210, .55), transparent 70%), linear-gradient(0deg, rgba(240, 200, 120, .18), transparent 60%); }

/* Lynn · Fille de la Flamme : le phénix plane, ses plumes de feu montent */
.fig[data-apparence="lynn-fille-flamme"] .fig-img { filter: sepia(.45) saturate(1.65) hue-rotate(-18deg) contrast(1.16) brightness(.95); }
.fig[data-apparence="lynn-fille-flamme"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 95% 50% at 50% 110%, rgba(255, 110, 20, .7), transparent 70%), linear-gradient(0deg, rgba(220, 40, 10, .22), transparent 55%); animation: fig-pulse 1.8s ease-in-out infinite; }
.fig[data-apparence="lynn-fille-flamme"] .sk-aura::after { inset: 0; box-shadow: inset 0 0 calc(var(--fig-h, 96px) * .12) rgba(255, 140, 40, .6); }
.fig[data-apparence="lynn-fille-flamme"] .sk-aura i { width: calc(var(--fig-h, 96px) * .03); height: calc(var(--fig-h, 96px) * .09); border-radius: 50%; background: linear-gradient(180deg, #FFF2B0, #FF8A2A 50%, #C2200E); box-shadow: 0 0 6px rgba(255, 120, 30, .95); animation-duration: 3.6s; --r: 30deg; }
.sk-phenix {
  left: 50%; top: 2%; width: 80%; height: 30%; margin-left: -40%; opacity: .95 !important;
  background: linear-gradient(180deg, #FFF2B0, #FF9A3A 45%, #D0280E);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M50 30C46 26 44 22 46 16 40 22 30 22 20 18 10 14 4 8 0 2 10 6 20 8 30 8 22 4 18 0 18 0 28 4 38 8 46 12 47 8 48 6 50 4 52 6 53 8 54 12 62 8 72 4 82 0 82 0 78 4 70 8 80 8 90 6 100 2 96 8 90 14 80 18 70 22 60 22 54 16 56 22 54 26 50 30Z M50 30 46 40 50 36 54 40Z'/%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 100 40'%3E%3Cpath d='M50 30C46 26 44 22 46 16 40 22 30 22 20 18 10 14 4 8 0 2 10 6 20 8 30 8 22 4 18 0 18 0 28 4 38 8 46 12 47 8 48 6 50 4 52 6 53 8 54 12 62 8 72 4 82 0 82 0 78 4 70 8 80 8 90 6 100 2 96 8 90 14 80 18 70 22 60 22 54 16 56 22 54 26 50 30Z M50 30 46 40 50 36 54 40Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sk-phenix 2.6s ease-in-out infinite;
}
@keyframes sk-phenix { 0%, 100% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.08, .78) translateY(4%); } }

/* Nikolarz · Sang de Dragon : vapeurs rouges, l'œil de Kar-oth s'ouvre dans la vapeur */
.fig[data-apparence="nikolarz-sang-dragon"] .fig-img { filter: sepia(.35) hue-rotate(-28deg) saturate(1.6) contrast(1.22) brightness(.84); }
.fig[data-apparence="nikolarz-sang-dragon"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 95% 45% at 50% 108%, rgba(220, 40, 20, .7), transparent 70%), linear-gradient(180deg, rgba(20, 0, 0, .35), transparent 40%); animation: fig-pulse 2.2s ease-in-out infinite; }
.fig[data-apparence="nikolarz-sang-dragon"] .sk-aura i { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFD08A, #E83A1A 50%, #5A0A04); box-shadow: 0 0 6px rgba(240, 70, 30, .95); animation-duration: 3.2s; }
.fig[data-apparence="nikolarz-sang-dragon"] .sk-aura i:nth-child(3n) { width: calc(var(--fig-h, 96px) * .09); height: calc(var(--fig-h, 96px) * .09); background: radial-gradient(circle, rgba(120, 10, 10, .55), transparent 70%); box-shadow: none; animation-duration: 6s; }
.sk-oeil-dragon {
  left: 50%; top: 4%; width: 34%; height: 12%; margin-left: -17%; opacity: 1 !important; border-radius: 50%;
  background: radial-gradient(ellipse 14% 50% at 50% 50%, #050200 0 80%, transparent 100%), radial-gradient(ellipse, #FFE58A 0 30%, #E9701A 60%, rgba(160, 30, 10, .5) 72%, transparent 76%);
  box-shadow: 0 0 calc(var(--fig-h, 96px) * .06) rgba(255, 120, 30, .8);
  animation: sk-oeil 6s ease-in-out infinite;
}

/* Kealhin · Voix de Verhal : murmures violets qui lacèrent, l'œil de Verhal au front */
.fig[data-apparence="kealhin-verhal"] .fig-img { filter: saturate(1.3) hue-rotate(255deg) contrast(1.28) brightness(.72); }
.fig[data-apparence="kealhin-verhal"] .sk-aura::before { inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(40, 0, 50, .78)); }
.fig[data-apparence="kealhin-verhal"] .sk-aura i { width: calc(var(--fig-h, 96px) * .04); height: calc(var(--fig-h, 96px) * .012); border-radius: 2px; background: #E2B6FF; box-shadow: 0 0 5px #B060F0; animation-duration: 4.6s; --r: 0deg; }
.sk-murmure {
  left: -20%; top: 30%; width: 140%; height: 22%; opacity: .9 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10C10 2 20 18 30 10S50 2 60 10 80 18 90 10 110 2 120 10 135 16 140 10' fill='none' stroke='%23D08AFF' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  filter: drop-shadow(0 0 3px #A050E0); animation: sk-murmure 2.8s linear infinite;
}
.sk-murmure--b { top: 58%; height: 16%; opacity: .6 !important; animation-duration: 3.8s; animation-direction: reverse; }
@keyframes sk-murmure { from { transform: translateX(0); } to { transform: translateX(-35.7%); } }
.sk-oeil--verhal { top: 6%; width: 36%; margin-left: -18%; height: 9%; background: radial-gradient(ellipse, #000 0 28%, #3A0A48 36%, #C07BFF 50%, rgba(200, 120, 255, .4) 58%, transparent 70%); }

/* Gildong · Héraut d'Ysé : devenu un tableau de la ligne d'Ysé (calques.js, traitement « heraut ») */

/* Azzgur · Premier Masque : masque d'ivoire, les ombres des premiers Envoyés montent */
.fig[data-apparence="azzgur-premier-masque"] .fig-img { filter: grayscale(.45) sepia(.3) contrast(1.24) brightness(.84); }
.fig[data-apparence="azzgur-premier-masque"] .sk-aura::before { inset: 0; background: linear-gradient(0deg, rgba(10, 6, 14, .72), transparent 55%), radial-gradient(ellipse 70% 40% at 50% 0%, rgba(240, 230, 200, .25), transparent 70%); }
.fig[data-apparence="azzgur-premier-masque"] .sk-aura i {
  width: calc(var(--fig-w, 72px) * .16); height: calc(var(--fig-w, 72px) * .3); background: linear-gradient(180deg, rgba(20, 12, 28, .95), rgba(20, 12, 28, .2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Ccircle cx='5' cy='3' r='2.6'/%3E%3Cpath d='M1 20C1 12 2 7 5 6.5 8 7 9 12 9 20Z'/%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 10 20'%3E%3Ccircle cx='5' cy='3' r='2.6'/%3E%3Cpath d='M1 20C1 12 2 7 5 6.5 8 7 9 12 9 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
  --o: .85; --r: 0deg; animation-duration: 7s;
}
.sk-masque-ivoire {
  left: 50%; top: 3%; width: 26%; height: 22%; margin-left: -13%; opacity: 1 !important;
  background: radial-gradient(circle at 32% 42%, #0A0610 0 10%, transparent 12%), radial-gradient(circle at 68% 42%, #0A0610 0 10%, transparent 12%), linear-gradient(180deg, #FFFBEA, #D9CDB0);
  border-radius: 46% 46% 50% 50% / 38% 38% 62% 62%;
  box-shadow: 0 0 0 1px #8A7A5A, 0 0 calc(var(--fig-h, 96px) * .08) rgba(255, 245, 210, .7);
  animation: sk-flotte-masque 4s ease-in-out infinite;
}
@keyframes sk-flotte-masque { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8%) rotate(3deg); } }

/* ════════════════════ Bannières (Blason, Annales) ════════════════════ */
.sk-ban { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; background: #0B0809; }
.sk-ban > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-ban::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Étoffe : un grain de tissage et l'ombre des plis, sur toutes */
.sk-ban::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 14%, transparent 60%, rgba(255, 255, 255, .06) 72%, transparent 84%, rgba(0, 0, 0, .3));
}
.sk-ban--fanion { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
/* Rare : un lustre passe sur l'étoffe */
.sk-ban[data-rang="rare"]::after { z-index: 2; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) 0 0 / 300% 100% no-repeat; animation: sk-balaye 6s ease-in-out infinite; }
/* Épique : l'étoffe vit */
.sk-ban[data-ban="banniere-yse"]::after { z-index: 2; background: repeating-linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .14) 24%, transparent 30%, rgba(0, 0, 0, .2) 38%, transparent 46%); background-size: 200% 100%; animation: sk-vent 3.2s linear infinite; }
@keyframes sk-vent { to { background-position: -200% 0; } }
.sk-ban[data-ban="banniere-yse"] > svg { animation: sk-claque 3.2s ease-in-out infinite; transform-origin: 0 50%; }
@keyframes sk-claque { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-1.4deg) scaleX(1.02); } }
.sk-ban .bn-coin { opacity: .25; animation: sk-coin 6s ease-in-out infinite; }
.sk-ban .bn-coin--2 { animation-delay: 1.5s; } .sk-ban .bn-coin--3 { animation-delay: 3s; } .sk-ban .bn-coin--4 { animation-delay: 4.5s; }
@keyframes sk-coin { 0%, 40%, 100% { opacity: .22; } 12%, 22% { opacity: 1; } }
.sk-ban[data-ban="banniere-cendres"] .bn-lettres { animation: sk-braise 2.2s ease-in-out infinite alternate; }
/* Légendaire : la lumière traverse le linceul */
.sk-ban[data-ban="banniere-orvanne"]::after {
  z-index: 2; inset: -60%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 250, 225, 0) 0 8deg, rgba(255, 250, 225, .32) 8deg 12deg);
  -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 80%); mask: radial-gradient(closest-side, #000 15%, transparent 80%);
  animation: sk-tourne 30s linear infinite;
}
.sk-ban[data-ban="banniere-orvanne"] > svg { animation: sk-orvanne 4s ease-in-out infinite; }
@keyframes sk-orvanne { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }

/* ════════════════════ Fastes des Reliquaires et des nouveaux skins ════════════════════ */
/* Épique révélé : une lueur pourpre puissante */
.fx-plein--epique { background: radial-gradient(circle at var(--x) var(--y), rgba(240, 190, 255, .55), rgba(199, 123, 192, .35) 25%, rgba(60, 20, 80, .25) 55%, transparent 80%); animation: fx-nuit var(--fx-d) ease-out both; }
/* Légendaire révélé : tout l'écran s'embrase d'or, des rayons tournent */
.fx-plein--legendaire { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 250, 1), rgba(255, 236, 170, .85) 20%, rgba(240, 180, 70, .45) 50%, rgba(120, 70, 10, .2) 80%); animation: fx-lumiere-legende var(--fx-d) cubic-bezier(.1, .7, .3, 1) both; }
.fx-plein--legendaire::before, .fx-plein--couronne::before {
  content: ""; position: absolute; left: var(--x); top: var(--y); width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 6deg, rgba(255, 250, 220, .55) 6deg 9deg);
  -webkit-mask: radial-gradient(closest-side, #000 5%, transparent 60%); mask: radial-gradient(closest-side, #000 5%, transparent 60%);
  animation: fx-rayons-legende var(--fx-d) linear both;
}
@keyframes fx-lumiere-legende { 0% { opacity: 0; } 8% { opacity: 1; } 45% { opacity: .9; } 100% { opacity: 0; } }
@keyframes fx-rayons-legende { from { transform: rotate(0deg) scale(.6); } to { transform: rotate(40deg) scale(1.1); } }
/* Couronne de la Légende (dés) : un halo royal et une couronne de lumière s'élèvent */
.fx-plein--couronne { background: radial-gradient(ellipse 80% 60% at var(--x) var(--y), rgba(255, 240, 200, .35), rgba(60, 40, 10, .55) 75%); animation: fx-nuit var(--fx-d) ease-in-out both; }
.fx-plein--couronne::before { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0) 0 5deg, rgba(255, 226, 150, .4) 5deg 8deg); }
.fx-plein--couronne svg { position: absolute; left: var(--x); top: var(--y); width: 150px; height: 86px; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 220, 140, .95)); animation: fx-couronne-monte var(--fx-d) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fx-couronne-monte { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -160%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1.1); } }
/* Tempête : l'éclair d'un six */
.fx-plein--eclair { background: rgba(220, 235, 255, .55); animation: fx-eclair-tempete var(--fx-d) linear both; }
@keyframes fx-eclair-tempete { 0% { opacity: 0; } 6% { opacity: 1; } 12% { opacity: .1; } 18% { opacity: .8; } 40%, 100% { opacity: 0; } }
.fx-plein--eclair svg { position: absolute; left: var(--x); top: 0; width: 80px; height: var(--y); transform: translateX(-50%); overflow: visible; }
.fx-plein--eclair path { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 6px #9CC4FF) drop-shadow(0 0 14px #5A8AF0); }

/* Signatures plein écran des nouvelles apparences légendaires (fastes.js cinematique) */
/* Fille de la Flamme : un phénix de feu déploie ses ailes sur tout l'écran */
.fx-phenix svg { position: absolute; left: 50%; top: 50%; width: min(120vw, 900px); height: auto; overflow: visible; filter: drop-shadow(0 0 20px rgba(255, 120, 30, .9)); animation: fx-phenix var(--fx-d) cubic-bezier(.2, .8, .3, 1) var(--fx-impact) both; }
@keyframes fx-phenix { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.3, .1); } 25% { opacity: .95; transform: translate(-50%, -50%) scale(1, 1); } 55% { opacity: .9; transform: translate(-50%, -54%) scale(1.05, .85); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1.15, 1.1); } }
/* Sang de Dragon : le souffle de feu balaie l'écran */
.fx-souffle { position: absolute; left: -10%; top: 28%; width: 130%; height: 44%; border-radius: 50%;
  background: radial-gradient(ellipse 60% 50% at 0% 50%, #FFF2B0, #FF9A3A 25%, #E5331A 50%, rgba(120, 10, 0, .4) 75%, transparent 85%);
  transform-origin: 0 50%; animation: fx-souffle 1.4s cubic-bezier(.2, .7, .3, 1) var(--fx-impact) both; }
@keyframes fx-souffle { 0% { opacity: 0; transform: scaleX(0) scaleY(.4); } 25% { opacity: 1; transform: scaleX(1) scaleY(1); } 60% { opacity: .9; transform: scaleX(1.1) scaleY(1.2); } 100% { opacity: 0; transform: scaleX(1.2) scaleY(1.4); } }
/* Voix de Verhal : des murmures violets lacèrent l'écran */
.fx-murmures { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(60, 10, 80, .3), rgba(10, 0, 20, .7)); }
.fx-murmures i { position: absolute; left: -10%; width: 120%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #E2B6FF 30%, #FFFFFF 50%, #C07BFF 70%, transparent); box-shadow: 0 0 12px #A050E0; transform-origin: 0 50%; opacity: 0; animation: fx-lacere .6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes fx-lacere { 0% { opacity: 0; transform: rotate(var(--a)) scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) scaleX(1); } }
.fx-murmures span { position: absolute; font: italic 600 clamp(1rem, 4vw, 1.6rem)/1 var(--titre, serif); color: #E2B6FF; text-shadow: 0 0 10px #A050E0; opacity: 0; animation: fx-murmure 1.8s ease-out both; white-space: nowrap; }
@keyframes fx-murmure { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-20px); } }
/* Héraut d'Ysé : des étendards d'or pleuvent sur l'écran */
.fx-etendards { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 236, 170, .35), rgba(90, 10, 20, .35) 80%); }
.fx-etendards i { position: absolute; top: -12%; width: 34px; height: 56px; background: linear-gradient(180deg, #F2C46B 0 16%, #A3202E 16% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); animation: fx-etendard 1.7s cubic-bezier(.3, .2, .5, 1) both; }
.fx-etendards i::after { content: ""; position: absolute; left: 50%; top: 30%; width: 18px; height: 18px; margin-left: -9px; background: #F2C46B; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .4L11.6 6.1 16.8 3.2 13.9 8.4 19.6 10 13.9 11.6 16.8 16.8 11.6 13.9 10 19.6 8.4 13.9 3.2 16.8 6.1 11.6 .4 10 6.1 8.4 3.2 3.2 8.4 6.1Z'/%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 20 20'%3E%3Cpath d='M10 .4L11.6 6.1 16.8 3.2 13.9 8.4 19.6 10 13.9 11.6 16.8 16.8 11.6 13.9 10 19.6 8.4 13.9 3.2 16.8 6.1 11.6 .4 10 6.1 8.4 3.2 3.2 8.4 6.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes fx-etendard { 0% { transform: translateY(0) rotate(var(--r)); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(125vh) rotate(calc(var(--r) * -1)); opacity: .9; } }
/* Premier Masque : les ombres des premiers Envoyés se lèvent au bas de l'écran */
.fx-envoyes { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; display: flex; justify-content: space-evenly; align-items: flex-end; background: linear-gradient(0deg, rgba(10, 6, 14, .85), transparent); }
.fx-envoyes i {
  width: 13vw; max-width: 90px; aspect-ratio: 1 / 2.2; background: linear-gradient(180deg, rgba(40, 28, 52, .98), rgba(10, 6, 14, .9));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Ccircle cx='5' cy='3' r='2.6'/%3E%3Cpath d='M0 22C0 13 2 7 5 6.5 8 7 10 13 10 22Z'/%3E%3C/svg%3E") bottom / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Ccircle cx='5' cy='3' r='2.6'/%3E%3Cpath d='M0 22C0 13 2 7 5 6.5 8 7 10 13 10 22Z'/%3E%3C/svg%3E") bottom / contain no-repeat;
  transform-origin: 50% 100%; opacity: 0; animation: fx-envoye 1.2s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes fx-envoye { from { opacity: 0; transform: scaleY(.1) translateY(30%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sk-ban::after, .sk-ban > svg, .sk-ban .bn-coin, .sk-ban .bn-lettres, .sk-rune, .sk-givre g, .sk-ailes b, .sk-aurore, .sk-tours-fenetres,
  .sk-couronne-feu, .sk-griffe, .sk-chaines, .sk-cadenas, .sk-phenix, .sk-murmure, .sk-oeil-dragon, .sk-masque-ivoire, [data-des="des-legende"] .de6 { animation: none !important; }
  .sk-flocons, .sk-plumes, .sk-poussiere-or { display: none; }
  .sk-ban .bn-coin { opacity: .6; }
}
:root[data-anim-reduite="1"] .sk-ban *, :root[data-anim-reduite="1"] .sk-ban::after { animation: none !important; }

/* ——— Signatures des légendaires illustrés (calques.js), une par ligne ——— */
/* Celle qui refusa la flamme : les hachures de la gravure balaient l'écran, puis s'embrasent */
.fx-gravure { position: absolute; inset: 0; }
.fx-gravure i {
  position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(35deg, rgba(20, 10, 6, .82) 0 2px, transparent 2px 8px), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232, 100, 42, .25), rgba(20, 10, 6, .5));
  animation: fx-hachures 1.3s cubic-bezier(.3, .7, .3, 1) var(--fx-impact) both;
}
.fx-gravure i.fx-gravure-feu {
  background: repeating-linear-gradient(35deg, rgba(255, 170, 60, .9) 0 1.5px, transparent 1.5px 8px);
  mix-blend-mode: screen; animation-delay: calc(var(--fx-impact) + 220ms);
}
@keyframes fx-hachures { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 45% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
/* Mille Masques : l'encre s'étale en taches, la feuille d'or s'en détache (particules « piece ») */
.fx-encre { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(233, 192, 102, .18), rgba(10, 6, 12, .55)); }
.fx-encre i {
  position: absolute; width: var(--t); aspect-ratio: 1; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 40% 40%, #0A070C 0 55%, rgba(10, 7, 12, .7) 65%, transparent 72%);
  box-shadow: 0 0 0 2px rgba(233, 192, 102, .55); opacity: 0;
  animation: fx-tache 1.5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes fx-tache { 0% { opacity: 0; transform: scale(.1) rotate(0deg); } 25% { opacity: .95; transform: scale(1) rotate(8deg); } 75% { opacity: .85; } 100% { opacity: 0; transform: scale(1.12) rotate(12deg); } }
/* Le Dernier Ménestrel : des notes d'or en spirale sur la nuit bleue */
.fx-notes { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(42, 63, 138, .25), rgba(10, 14, 40, .6)); }
.fx-notes i {
  position: absolute; left: 50%; top: 50%; font: 700 clamp(1.4rem, 5vw, 2.6rem) / 1 Georgia, serif; font-style: normal;
  color: #F2C46B; text-shadow: 0 0 12px rgba(255, 210, 120, .9); opacity: 0;
  animation: fx-note 1.6s cubic-bezier(.25, .6, .35, 1) both;
}
@keyframes fx-note {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-40deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(20deg); }
}
/* Le Fils de la Tisseuse : des fils d'or fouettent l'écran */
.fx-fils-or { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-fils-or path {
  fill: none; stroke: #FFE7A8; stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(233, 192, 102, .95));
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: fx-fil-fouet 1.3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes fx-fil-fouet { 0% { stroke-dashoffset: 100; opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
/* Le Grand Œuvre : noir, blanc, jaune, rouge passent sur l'écran */
.fx-oeuvre { position: absolute; inset: 0; }
.fx-oeuvre i { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; animation: fx-transmute .5s ease-out both; }
.fx-oeuvre i:nth-child(1) { background: radial-gradient(circle, rgba(10, 8, 6, .85), rgba(10, 8, 6, .5)); mix-blend-mode: normal; animation-delay: var(--fx-impact); }
.fx-oeuvre i:nth-child(2) { background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(220, 225, 235, .3)); animation-delay: calc(var(--fx-impact) + 160ms); }
.fx-oeuvre i:nth-child(3) { background: radial-gradient(circle, rgba(255, 220, 90, .85), rgba(242, 200, 70, .3)); animation-delay: calc(var(--fx-impact) + 320ms); }
.fx-oeuvre i:nth-child(4) { background: radial-gradient(circle, rgba(220, 40, 20, .85), rgba(140, 10, 10, .35)); animation-delay: calc(var(--fx-impact) + 480ms); animation-duration: .9s; }
@keyframes fx-transmute { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* Pietà inversée : une colonne de lumière tombe sur le héros */
.fx-pieta {
  position: absolute; left: 30%; right: 30%; top: -10%; bottom: 0; opacity: 0; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 246, 220, 0), rgba(255, 246, 220, .85) 40%, rgba(255, 220, 150, .5) 80%, rgba(255, 220, 150, 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent);
  animation: fx-colonne 1.4s cubic-bezier(.3, .7, .3, 1) var(--fx-impact) both;
}
@keyframes fx-colonne { 0% { opacity: 0; transform: scaleY(0); } 25% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1) scaleX(1.8); } }

/* ——— Variantes de couleur des dés (des-astral@rouge…) ——— */
[data-variante="rouge"] .de6 { filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(4.2) brightness(.92); }
[data-variante="blanc"] .de6 { filter: grayscale(1) brightness(1.55) contrast(.92); }
[data-variante="or"] .de6 { filter: grayscale(1) sepia(1) saturate(2.6) brightness(1.08); }
[data-variante="vert"] .de6 { filter: grayscale(1) sepia(1) hue-rotate(78deg) saturate(2.6) brightness(.95); }
[data-variante="bleu"] .de6 { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(3.2) brightness(.95); }
[data-variante="violet"] .de6 { filter: grayscale(1) sepia(1) hue-rotate(232deg) saturate(2.8) brightness(.92); }
/* Les dés sombres deviennent blancs en inversant leurs valeurs (les points clairs deviennent sombres) */
:is([data-des="des-obsidienne"], [data-des="des-sang"], [data-des="des-braise"], [data-des="des-verhal"], [data-des="des-astral"],
  [data-des="des-ecaille"], [data-des="des-oeil-dragon"], [data-des="des-tempete"], [data-des="des-parjure"], [data-des="des-cendre-vive"], [data-des="des-cloches-mortes"])[data-variante="blanc"] .de6 {
  filter: grayscale(1) invert(.92) contrast(1.08) brightness(1.04);
}
/* Noir : les dés clairs s'inversent (faces noires, points clairs), les dés sombres passent au noir de jais */
[data-variante="noir"] .de6 { filter: grayscale(1) invert(.9) contrast(1.15); }
:is([data-des="des-obsidienne"], [data-des="des-sang"], [data-des="des-braise"], [data-des="des-verhal"], [data-des="des-astral"],
  [data-des="des-ecaille"], [data-des="des-oeil-dragon"], [data-des="des-tempete"], [data-des="des-parjure"], [data-des="des-cendre-vive"], [data-des="des-cloches-mortes"])[data-variante="noir"] .de6 { filter: grayscale(1) brightness(.8) contrast(1.25); }

/* ════════════════════ Catalogue III : dés ════════════════════ */
/* Craie d'Aubemont : craie mate, poussière blanche, points de charbon estompés */
[data-des="des-craie"] .de6 {
  background: radial-gradient(circle at 22% 30%, rgba(255, 255, 255, .9) 0 1px, transparent 2px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(160, 150, 135, .35) 0 1px, transparent 2px) 0 0 / 9px 9px,
    radial-gradient(120% 90% at 30% 20%, #FBF8F0, #E6E0D2 60%, #CFC7B4);
  box-shadow: inset 0 -3px 0 rgba(120, 110, 90, .3), inset 0 1px 0 #FFF, 0 6px 12px rgba(0, 0, 0, .4);
}
[data-des="des-craie"] .de6 i.p { background: radial-gradient(circle at 45% 45%, #3E3A36 0 45%, rgba(62, 58, 54, .55) 70%, transparent 78%); }

/* Éclats de vitrail : verres couleur joyaux sertis de plomb, les points sont des cabochons d'ambre */
[data-des="des-vitrail"] .de6 {
  background:
    linear-gradient(32deg, transparent 47%, #0B0A0D 47% 53%, transparent 53%),
    linear-gradient(-58deg, transparent 47.5%, #0B0A0D 47.5% 52.5%, transparent 52.5%),
    linear-gradient(90deg, transparent 63%, #0B0A0D 63% 67%, transparent 67%),
    conic-gradient(from 20deg at 55% 45%, #B3202E, #D9A93A, #2B4C9B, #2E7D4F, #7A1420, #5A2D86, #B3202E);
  box-shadow: inset 0 0 0 2px #0B0A0D, inset 0 0 8px rgba(255, 240, 200, .25), 0 6px 14px rgba(0, 0, 0, .55);
}
[data-des="des-vitrail"] .de6::before { background: radial-gradient(ellipse 60% 50% at 25% 20%, rgba(255, 246, 220, .5), transparent 70%); }
[data-des="des-vitrail"] .de6 i.p { background: radial-gradient(circle at 38% 32%, #FFF6DC, #F2C46B 40%, #B9852A); box-shadow: 0 0 0 1.5px #0B0A0D, 0 0 5px rgba(255, 220, 140, .8); }

/* Page du Codex : vélin, filet rouge, points à l'encre ; le point du centre est une feuille d'or grattée */
[data-des="des-codex"] .de6 {
  background: radial-gradient(circle at 30% 25%, #F4EAD0, #E2D0A6 60%, #C8AE78);
  box-shadow: inset 0 0 0 1px #2A3F8A, inset 0 -3px 0 rgba(90, 60, 20, .3), 0 6px 14px rgba(0, 0, 0, .45);
}
[data-des="des-codex"] .de6::before { inset: 8%; border: 1px solid #9A2A20; border-radius: 10%; }
[data-des="des-codex"] .de6 i.p { background: radial-gradient(circle at 45% 40%, #2A1A10 0 55%, rgba(42, 26, 16, .6) 70%, transparent 76%); }
[data-des="des-codex"] .de6 i.p:nth-child(5) {
  background: linear-gradient(135deg, transparent 42%, #1A1010 44% 52%, transparent 54%), radial-gradient(circle at 35% 30%, #FFF0C0, #E9C066 50%, #8A6418);
  box-shadow: 0 0 0 1px #5A3E1A;
}

/* Toile de la Tisseuse : pierre bleue de Caelmhor, toile de givre gravée, une goutte de lumière la parcourt */
[data-des="des-toile-givre"] .de6 {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23DDEEFF' stroke-width='.6' opacity='.55'%3E%3Cpath d='M20 0V40M0 20H40M3 3L37 37M37 3L3 37'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='20' cy='20' r='16'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 35% 25%, #4A6A9A, #1E2E4E 60%, #0C1424);
  box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .45), inset 0 0 10px rgba(120, 170, 230, .35), 0 6px 16px rgba(0, 0, 0, .6), 0 0 10px rgba(160, 200, 255, .25);
}
[data-des="des-toile-givre"] .de6::after {
  inset: auto; left: 46%; top: 46%; width: 8%; height: 8%; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 4px 2px rgba(200, 230, 255, .95);
  animation: sk-rosee-de 5.5s ease-in-out infinite;
}
@keyframes sk-rosee-de {
  0% { transform: translate(0, -500%); opacity: 0; } 10% { opacity: 1; } 30% { transform: translate(300%, -300%); }
  55% { transform: translate(-400%, 200%); } 80% { transform: translate(250%, 450%); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; }
}
[data-des="des-toile-givre"] .de6 i.p { background: radial-gradient(circle, #FFFFFF 0 30%, #CFEAFF 60%, #6A8AC0); box-shadow: 0 0 5px rgba(220, 240, 255, .9); }

/* Mer de Verre : sable fondu, ambre et ivoire ; un reflet tourne lentement sous la surface */
[data-des="des-mer-de-verre"] .de6 {
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .65), transparent 30%), linear-gradient(160deg, #F4E2B8, #D9B47A 50%, #9A6A3A);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 220, .8), inset 0 -4px 6px rgba(90, 50, 20, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 10px rgba(240, 200, 130, .3);
}
[data-des="des-mer-de-verre"] .de6::before {
  inset: -40%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 250, 230, .55) 25%, transparent 32% 70%, rgba(120, 180, 200, .35) 76%, transparent 84%);
  animation: sk-tourne 9s linear infinite;
}
[data-des="des-mer-de-verre"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #6A5A6A, #1A1014 55%, #050304); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 1px 0 rgba(255, 240, 210, .6); }

[data-des="des-craie"] { --fx-c: rgba(240, 236, 226, .95); } [data-des="des-vitrail"] { --fx-c: rgba(255, 210, 120, 1); }
[data-des="des-codex"] { --fx-c: rgba(233, 192, 102, .95); } [data-des="des-toile-givre"] { --fx-c: rgba(200, 230, 255, 1); }
[data-des="des-mer-de-verre"] { --fx-c: rgba(240, 210, 150, 1); }
/* Dés sombres : la variante blanche inverse les valeurs, la noire passe au jais (comme plus haut) */
:is([data-des="des-toile-givre"], [data-des="des-vitrail"])[data-variante="blanc"] .de6 { filter: grayscale(1) invert(.92) contrast(1.08) brightness(1.04); }
:is([data-des="des-toile-givre"], [data-des="des-vitrail"])[data-variante="noir"] .de6 { filter: grayscale(1) brightness(.8) contrast(1.25); }

/* ════════════════════ Catalogue III : cadres ════════════════════ */
/* Reflet en transform : une bande claire glisse dans l'anneau du cadre (masque fixe, seul l'enfant bouge) */
.sk-reflet {
  position: absolute; inset: -7px; padding: 5px; border-radius: 4px; overflow: hidden; z-index: 1; pointer-events: none;
  -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);
}
.sk-reflet i { position: absolute; inset: 0 -60%; background: linear-gradient(105deg, transparent 44%, rgba(255, 250, 230, .8) 50%, transparent 56%); animation: sk-reflet-de 5.6s ease-in-out infinite; }
.fig-petit .sk-reflet { inset: -4px; padding: 3px; }

/* Fer des Dents : fer martelé noir, rivets */
.fig[data-cadre="cadre-fer-noir"] { --fig-lisere: #8A8A92; --fig-filet: rgba(160, 160, 170, .35); }
.fig[data-cadre="cadre-fer-noir"] .fig-cadre { box-shadow: 0 0 0 1px #9A9AA2, 0 0 0 3px #0A0A0C, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-fer-noir"] .sk-cadre::before {
  inset: -6px; border: 4px solid transparent; border-radius: 2px;
  border-image: linear-gradient(135deg, #5A5A62, #2A2A30 30%, #46464E 55%, #1A1A1E 80%, #3A3A42) 4;
}
.sk-rivet--fer { background: radial-gradient(circle at 35% 30%, #D8D8DE, #5A5A62 55%, #141418); }

/* Marges du Codex : vélin, filets rouge et bleu, lettrine d'or, escargot de marge */
.fig[data-cadre="cadre-velin"] { --fig-lisere: #9A2A20; --fig-filet: rgba(42, 63, 138, .5); }
.fig[data-cadre="cadre-velin"] .fig-cadre { box-shadow: 0 0 0 1px #9A2A20, 0 0 0 2px #EADCB6, 0 0 0 3px #2A3F8A, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-velin"] .sk-cadre::before {
  inset: -8px; border: 5px solid transparent; border-radius: 2px;
  border-image: linear-gradient(135deg, #F0E2BE, #D9C597 40%, #EADCB6 60%, #C8AE78) 5;
  box-shadow: 0 0 0 1px #5A3E1A;
}
.sk-lettrine { position: absolute; left: -11px; top: -11px; width: 24%; aspect-ratio: 1; height: auto; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.sk-escargot { position: absolute; right: -6px; bottom: -12px; width: 28%; height: auto; z-index: 2; }
.fig-petit .sk-escargot { display: none; }

/* Os d'Ushgal : ivoire sculpté, un masque au fronton */
.fig[data-cadre="cadre-ivoire"] { --fig-lisere: #F2EAD6; --fig-filet: rgba(232, 220, 192, .45); }
.fig[data-cadre="cadre-ivoire"] .fig-cadre { box-shadow: 0 0 0 1px #F2EAD6, 0 0 0 3px #2A2014, 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-ivoire"] .sk-cadre::before {
  inset: -8px; border: 6px solid transparent; border-radius: 6px;
  border-image: repeating-linear-gradient(45deg, #F6EEDC 0 3px, #D8CCB0 3px 5px, #B8A884 5px 6px) 6;
  filter: drop-shadow(0 0 4px rgba(240, 230, 200, .25));
}
.sk-masque-fronton { position: absolute; left: 50%; top: 0; width: 22%; height: auto; z-index: 2; transform: translate(-50%, -62%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }

/* Toile de la Tisseuse : toiles de givre aux coins, Serys descend au bout de son fil */
.fig[data-cadre="cadre-tisseuse"] { --fig-lisere: #DDEEFF; --fig-filet: rgba(200, 225, 255, .4); }
.fig[data-cadre="cadre-tisseuse"] .fig-cadre { box-shadow: 0 0 0 1px #E6F2FF, 0 0 0 3px #0C1424, 0 0 14px rgba(170, 210, 255, .3), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-toile { position: absolute; width: 40%; aspect-ratio: 1; height: auto; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(200, 230, 255, .9)); }
.sk-toile g { stroke: #EAF6FF; stroke-width: .7; }
.sk-toile--hg { left: -7%; top: -5%; } .sk-toile--hd { right: -7%; top: -5%; transform: scaleX(-1); }
.sk-toile--bg { left: -7%; bottom: -5%; transform: scaleY(-1); } .sk-toile--bd { right: -7%; bottom: -5%; transform: scale(-1, -1); }
.sk-rosee { fill: #FFFFFF; animation: sk-rosee 3.4s ease-in-out infinite; }
.sk-rosee--b { animation-delay: -1.7s; }
@keyframes sk-rosee { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sk-serys { position: absolute; right: 16%; top: -6%; width: 14%; height: 40%; z-index: 3; transform-origin: 50% 0; animation: sk-serys 7s ease-in-out infinite; }
.sk-serys-fil { position: absolute; left: 50%; top: 0; bottom: 18%; width: 1px; background: linear-gradient(180deg, rgba(234, 246, 255, 0), #EAF6FF); }
.sk-serys svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 0 2px rgba(200, 230, 255, .8)); }
@keyframes sk-serys { 0%, 100% { transform: translateY(-30%) rotate(0deg); } 45% { transform: translateY(0) rotate(3deg); } 70% { transform: translateY(-4%) rotate(-3deg); } }
.fig-petit .sk-serys, .fig-petit .sk-toile--bg, .fig-petit .sk-toile--bd { display: none; }

/* Hymne d'Haemun : la portée court sur les montants, les notes s'envolent */
.fig[data-cadre="cadre-hymne"] { --fig-lisere: #F2C46B; --fig-filet: rgba(90, 120, 200, .45); }
.fig[data-cadre="cadre-hymne"] .fig-cadre { box-shadow: 0 0 0 1px #F2C46B, 0 0 0 3px #101830, 0 0 14px rgba(120, 150, 230, .3), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-portee { position: absolute; left: -2%; top: -4%; width: 104%; height: 108%; overflow: visible; }
.sk-portee path { fill: none; stroke: #E9C066; stroke-width: .9; vector-effect: non-scaling-stroke; opacity: .85; }
.sk-portee .sk-portee-cle { stroke-width: 1.6; opacity: 1; }
.sk-notes { position: absolute; inset: 0; overflow: visible; }
.sk-notes i {
  position: absolute; bottom: 6%; opacity: 0; font: 700 calc(var(--fig-w, 72px) * .14) / 1 Georgia, serif; font-style: normal; color: #F2D58A;
  text-shadow: 0 0 6px rgba(255, 210, 120, .85), 0 1px 0 rgba(0, 0, 0, .7); animation: sk-escarbille 5s ease-out infinite;
}
.sk-notes i:nth-child(1) { left: -12%; --dx: -6px; } .sk-notes i:nth-child(2) { left: 100%; animation-delay: -.9s; --dx: 8px; }
.sk-notes i:nth-child(3) { left: -14%; bottom: 40%; animation-delay: -1.8s; --dx: -4px; } .sk-notes i:nth-child(4) { left: 102%; bottom: 36%; animation-delay: -2.7s; --dx: 6px; }
.sk-notes i:nth-child(5) { left: 8%; animation-delay: -3.6s; --dx: -8px; } .sk-notes i:nth-child(6) { left: 84%; animation-delay: -4.4s; --dx: 5px; }
.fig-petit .sk-notes i:nth-child(n+3) { display: none; }

/* ════════════════════ Catalogue III : bannières ════════════════════ */
.sk-ban .bn-lave { transform-box: fill-box; transform-origin: center; animation: sk-lave 2.6s ease-in-out infinite alternate; }
@keyframes sk-lave { from { opacity: .6; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
.sk-ban .bn-fumee { animation: sk-fumee 6s ease-in-out infinite; }
@keyframes sk-fumee { 0%, 100% { transform: translate(0, 0); opacity: .55; } 50% { transform: translate(4px, -3px); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .sk-reflet i, .sk-rosee, .sk-serys, .sk-notes i, .sk-ban .bn-lave, .sk-ban .bn-fumee,
  [data-des="des-toile-givre"] .de6::after, [data-des="des-mer-de-verre"] .de6::before { animation: none !important; }
  .sk-notes { display: none; }
}
:root[data-anim-reduite="1"] :is(.sk-reflet i, .sk-rosee, .sk-serys, .sk-notes i) { animation: none !important; }

/* ════════════════════ Trophées de la Tour de l'Ascension ════════════════════ */
/* Cloches mortes : bronze vert-de-gris, coulures de patine, points comme des battants muets */
[data-des="des-cloches-mortes"] .de6 {
  background:
    radial-gradient(ellipse 40% 30% at 30% 22%, rgba(150, 210, 180, .45), transparent 70%),
    radial-gradient(ellipse 30% 40% at 78% 80%, rgba(90, 170, 140, .5), transparent 70%),
    linear-gradient(155deg, #8A6A3A, #5A4224 55%, #3A2A16);
  box-shadow: inset 0 0 0 1px rgba(200, 160, 90, .45), inset 0 -4px 8px rgba(20, 40, 30, .5), 0 6px 14px rgba(0, 0, 0, .55);
}
[data-des="des-cloches-mortes"] .de6 i.p { background: radial-gradient(circle at 40% 35%, #C9A45A, #5A3E1A 70%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 0 0 1px rgba(110, 190, 160, .35); }
[data-des="des-cloches-mortes"] { --fx-c: rgba(140, 210, 180, .85); }

/* Dés de la Cime : marbre de nuage veiné d'or, un vent froid passe sur les faces */
[data-des="des-cime"] .de6 {
  background:
    linear-gradient(118deg, transparent 38%, rgba(233, 192, 102, .75) 39.5%, transparent 41%),
    linear-gradient(32deg, transparent 62%, rgba(233, 192, 102, .55) 63%, transparent 64.2%),
    radial-gradient(ellipse 70% 50% at 50% 20%, #FFFFFF, #E4ECF6 55%, #B8C8DC);
  box-shadow: inset 0 0 0 1px rgba(233, 192, 102, .7), inset 0 -5px 10px rgba(110, 140, 180, .35), 0 6px 16px rgba(0, 0, 0, .45), 0 0 14px rgba(170, 210, 255, .35);
}
[data-des="des-cime"] .de6::before {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 45%, transparent 60%) -120% 0 / 60% 100% no-repeat;
  animation: sk-vent-cime 3.6s ease-in-out infinite;
}
[data-des="des-cime"] .de6 i.p { background: radial-gradient(circle at 40% 35%, #FFF3C4, #C99231 60%, #7A4C0E); box-shadow: 0 0 3px rgba(233, 192, 102, .7); }
[data-des="des-cime"] { --fx-c: rgba(200, 225, 255, .95); }
@keyframes sk-vent-cime { 0%, 55% { background-position: -120% 0; } 100% { background-position: 260% 0; } }
@media (prefers-reduced-motion: reduce) { [data-des="des-cime"] .de6::before { animation: none; } }

/* ════════════════════ Rareté Céleste : l'exclusivité de la Tour ════════════════════ */
/* Dés de l'Empyrée : nacre de ciel, une aurore qui tourne sous la surface, des points comme des étoiles d'or blanc */
[data-des="des-empyree"] .de6 {
  background:
    radial-gradient(ellipse 60% 40% at 30% 18%, rgba(255, 255, 255, .95), transparent 70%),
    linear-gradient(140deg, #FBFDFF 0%, #D5F6EF 38%, #E6DCFF 72%, #FFF6DD 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 168, .85), inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 -6px 12px rgba(150, 130, 230, .28),
    0 6px 16px rgba(0, 0, 0, .45), 0 0 18px rgba(143, 230, 218, .45);
}
[data-des="des-empyree"] .de6::before {
  inset: -60%;
  background: conic-gradient(from 0deg, rgba(143, 230, 218, 0), rgba(143, 230, 218, .55) 60deg, rgba(185, 164, 255, .5) 140deg, rgba(255, 231, 168, .45) 220deg, rgba(143, 230, 218, 0) 300deg);
  mix-blend-mode: soft-light;
  animation: sk-tourne 7s linear infinite;
}
[data-des="des-empyree"] .de6::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .9) 48%, transparent 60%) -140% 0 / 55% 100% no-repeat;
  animation: sk-vent-cime 4.2s ease-in-out infinite;
}
[data-des="des-empyree"] .de6 i.p {
  background: radial-gradient(circle, #FFFFFF 0 20%, #FFE7A8 42%, #8FE6DA 64%, rgba(143, 230, 218, 0) 76%);
  box-shadow: 0 0 6px rgba(255, 231, 168, .95), 0 0 2px rgba(120, 90, 200, .6);
  animation: sk-scintille 2.4s ease-in-out infinite;
}
[data-des="des-empyree"] .de6 i:nth-child(2n) { animation-delay: -.8s; }
[data-des="des-empyree"] .de6 i:nth-child(3n) { animation-delay: -1.6s; }
[data-des="des-empyree"] { --fx-c: rgba(160, 240, 228, 1); }
@media (prefers-reduced-motion: reduce) { [data-des="des-empyree"] .de6::before, [data-des="des-empyree"] .de6::after, [data-des="des-empyree"] .de6 i.p { animation: none; } }
:root[data-anim-reduite="1"] [data-des="des-empyree"] .de6 :is(i.p) { animation: none; }

/* La signature : le ciel s'ouvre au-dessus des dés, une aurore descend, des rayons d'or blanc tournent */
.fx-plein--empyree {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 255, 255, .9), rgba(214, 246, 240, .45) 35%, transparent 70%),
    radial-gradient(circle at var(--x) var(--y), rgba(255, 250, 230, .8), rgba(160, 240, 228, .35) 22%, rgba(40, 30, 90, .35) 70%);
  animation: fx-lumiere-legende var(--fx-d) cubic-bezier(.1, .7, .3, 1) both;
}
.fx-plein--empyree::before {
  content: ""; position: absolute; left: var(--x); top: var(--y); width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 7deg, rgba(220, 255, 248, .5) 7deg 9deg, rgba(255, 236, 190, .45) 9deg 11deg);
  -webkit-mask: radial-gradient(closest-side, #000 4%, transparent 62%); mask: radial-gradient(closest-side, #000 4%, transparent 62%);
  animation: fx-rayons-legende var(--fx-d) linear both;
}
.fx-plein--empyree::after {
  content: ""; position: absolute; inset: -10% -30% 40%;
  background:
    linear-gradient(176deg, transparent 20%, rgba(143, 230, 218, .55) 45%, transparent 70%),
    linear-gradient(184deg, transparent 30%, rgba(185, 164, 255, .45) 55%, transparent 80%);
  filter: blur(14px);
  animation: fx-aurore-descend var(--fx-d) ease-out both;
}
.fx-plein--empyree.fx-plein--doux { animation-name: fx-nuit-douce; }
@keyframes fx-aurore-descend { 0% { opacity: 0; transform: translateY(-40%) skewX(-8deg); } 30% { opacity: 1; } 75% { opacity: .8; } 100% { opacity: 0; transform: translateY(10%) skewX(6deg); } }

/* ════════════════════ Reliquaires II : un dé, un cadre et une bannière légendaires par Reliquaire ════════════════════ */

/* ——— Dés ——— */
/* Grand Sceau : cire pourpre coulée, filet d'or, anneau du sceau en relief ; les points sont des étoiles d'Ysé en or */
[data-des="des-grand-sceau"] .de6 {
  background: radial-gradient(circle at 32% 26%, #EA6A80, #B3283A 38%, #7E1426 72%, #4A0A16);
  box-shadow: inset 0 0 0 1px #F2C46B, inset 0 0 0 2.5px #5A0A16, inset 0 2px 1px rgba(255, 190, 200, .35), inset 0 -4px 6px rgba(40, 0, 10, .55), 0 6px 14px rgba(0, 0, 0, .55), 0 0 12px rgba(230, 90, 100, .35);
  animation: sk-cire-lueur 3.4s ease-in-out infinite;
}
@keyframes sk-cire-lueur {
  0%, 100% { box-shadow: inset 0 0 0 1px #F2C46B, inset 0 0 0 2.5px #5A0A16, inset 0 2px 1px rgba(255, 190, 200, .35), inset 0 -4px 6px rgba(40, 0, 10, .55), 0 6px 14px rgba(0, 0, 0, .55), 0 0 10px rgba(230, 90, 100, .3); }
  50% { box-shadow: inset 0 0 0 1px #FFE7A8, inset 0 0 0 2.5px #5A0A16, inset 0 2px 1px rgba(255, 200, 210, .45), inset 0 -4px 6px rgba(40, 0, 10, .55), 0 6px 14px rgba(0, 0, 0, .55), 0 0 22px 3px rgba(242, 196, 107, .6); }
}
[data-des="des-grand-sceau"] .de6::before {
  inset: 8%; border-radius: 50%; border: 1px dotted rgba(242, 196, 107, .6);
  box-shadow: inset 0 1.5px 1px rgba(40, 0, 10, .6), inset 0 -1px 1px rgba(255, 180, 190, .35), 0 1px 0 rgba(255, 180, 190, .25);
}
[data-des="des-grand-sceau"] .de6::after {
  inset: -30% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 170, .75) 50%, transparent 58%);
  animation: sk-reflet-de 3.8s ease-in-out infinite;
}
[data-des="des-grand-sceau"] .de6 i.p {
  border-radius: 0; background: linear-gradient(180deg, #FFF6D2, #E3B550 55%, #8A5E16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .4L11.6 6.1 16.8 3.2 13.9 8.4 19.6 10 13.9 11.6 16.8 16.8 11.6 13.9 10 19.6 8.4 13.9 3.2 16.8 6.1 11.6 .4 10 6.1 8.4 3.2 3.2 8.4 6.1Z'/%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 20 20'%3E%3Cpath d='M10 .4L11.6 6.1 16.8 3.2 13.9 8.4 19.6 10 13.9 11.6 16.8 16.8 11.6 13.9 10 19.6 8.4 13.9 3.2 16.8 6.1 11.6 .4 10 6.1 8.4 3.2 3.2 8.4 6.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(1.25); animation: sk-etoile-pt 7s linear infinite;
}
[data-des="des-grand-sceau"] .de6 i:nth-child(2n) { animation-delay: -2.3s; } [data-des="des-grand-sceau"] .de6 i:nth-child(3n) { animation-delay: -4.6s; }
@keyframes sk-etoile-pt { 0% { transform: scale(1.25) rotate(0deg); } 50% { transform: scale(1.12) rotate(22.5deg); } 100% { transform: scale(1.25) rotate(45deg); } }

/* Dernier Brasier : obsidienne fendue où le feu coule, chaleur qui monte, points comme des tisons */
[data-des="des-dernier-brasier"] .de6 {
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 90, 20, .55), transparent 60%), linear-gradient(150deg, #3A2420, #140A0A 55%, #050303);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .55), inset 0 -3px 6px rgba(255, 80, 20, .35), 0 6px 14px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 100, 30, .45);
}
[data-des="des-dernier-brasier"] .de6::before {
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5L5 8 4.4 12 9 15.4 8 19.6M19 3L14.6 7.4 16 11 12.6 14.4 14.4 19M1.6 17.6L4.6 15M11 .6L10 4 12.4 6' stroke='%23FF6A1A' stroke-width='1.6' opacity='.45'/%3E%3Cpath d='M1 5L5 8 4.4 12 9 15.4 8 19.6M19 3L14.6 7.4 16 11 12.6 14.4 14.4 19M1.6 17.6L4.6 15M11 .6L10 4 12.4 6' stroke='%23FFD27A' stroke-width='.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: sk-fissures 1.7s ease-in-out infinite alternate;
}
@keyframes sk-fissures { from { opacity: .5; } to { opacity: 1; } }
[data-des="des-dernier-brasier"] .de6::after {
  inset: 0 0 -60%;
  background: linear-gradient(0deg, transparent 0%, rgba(255, 150, 50, .32) 35%, transparent 60%);
  animation: sk-chaleur 2.4s ease-in-out infinite;
}
@keyframes sk-chaleur { 0% { transform: translateY(30%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-40%); opacity: 0; } }
[data-des="des-dernier-brasier"] .de6 i.p {
  background: radial-gradient(circle, #FFF6C8 0 22%, #FFB13B 45%, #E5531A 70%, #6A0E04);
  box-shadow: 0 0 6px 1px rgba(255, 120, 30, .9);
  animation: sk-tison 1.3s ease-in-out infinite alternate;
}
[data-des="des-dernier-brasier"] .de6 i:nth-child(2n) { animation-delay: -.5s; } [data-des="des-dernier-brasier"] .de6 i:nth-child(3n) { animation-delay: -.9s; }
@keyframes sk-tison { from { opacity: .72; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }

/* Trésor de Kar-oth : or écaillé, rubis taillés pour points ; l'ombre d'une aile passe parfois sur la face */
[data-des="des-tresor-karoth"] .de6 {
  background:
    radial-gradient(circle at 50% 0, transparent 52%, rgba(110, 66, 10, .55) 56%, rgba(255, 240, 190, .4) 62%, transparent 66%) 0 0 / 33.4% 26%,
    radial-gradient(circle at 50% 0, transparent 52%, rgba(110, 66, 10, .55) 56%, rgba(255, 240, 190, .4) 62%, transparent 66%) 16.7% 13% / 33.4% 26%,
    linear-gradient(145deg, #FFF0B0, #E9B44C 35%, #A8741C 70%, #F2CF6A);
  box-shadow: inset 0 0 0 1px #FFF3C4, inset 0 -3px 0 rgba(90, 55, 10, .45), 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 180, 60, .45);
}
[data-des="des-tresor-karoth"] .de6::before {
  inset: -10% -120%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M2 22C10 10 20 4 34 2 30 7 29 10 30 12 33 8 38 6 44 6 40 10 39 13 40 16 43 14 48 13 54 14 49 16 47 19 47 23 43 21 38 21 34 23 36 19 35 17 32 18 28 22 22 25 14 25 15 22 14 20 11 21 8 23 5 24 2 22Z' fill='%23140804' fill-opacity='.5'/%3E%3C/svg%3E") 50% 50% / 40% auto no-repeat;
  animation: sk-ombre-aile 6.5s ease-in-out infinite;
}
@keyframes sk-ombre-aile { 0%, 62% { transform: translateX(-60%); opacity: 0; } 66% { opacity: 1; } 84% { opacity: 1; } 88%, 100% { transform: translateX(60%); opacity: 0; } }
[data-des="des-tresor-karoth"] .de6::after {
  inset: -30% -60%;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 240, .85) 50%, transparent 57%);
  animation: sk-reflet-de 3.2s ease-in-out infinite;
}
[data-des="des-tresor-karoth"] .de6 i.p {
  border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: scale(1.12);
  background: conic-gradient(from 45deg, #FF6A7A, #8E0A1E 25%, #E0303E 40%, #5A0412 60%, #FF8A9A 75%, #A8102A 90%, #FF6A7A);
  animation: sk-rubis 2.6s ease-in-out infinite;
}
[data-des="des-tresor-karoth"] .de6 i:nth-child(2n) { animation-delay: -.9s; } [data-des="des-tresor-karoth"] .de6 i:nth-child(3n) { animation-delay: -1.7s; }
@keyframes sk-rubis { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) saturate(1.2); } }

/* Miroir du Parjure : argent poli, reflet violet qui dérive ; un instant, les points mentent (un autre visage apparaît) */
[data-des="des-miroir-parjure"] .de6 {
  background: linear-gradient(135deg, #FDFEFF 0%, #C9CED8 22%, #F2F4F8 42%, #9AA0B0 64%, #E6E8F0 82%, #B8B0CC 100%);
  box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 2px #8A7AA0, inset 0 -3px 5px rgba(80, 40, 120, .35), 0 6px 14px rgba(0, 0, 0, .5), 0 0 14px rgba(176, 110, 240, .45);
}
[data-des="des-miroir-parjure"] .de6::before {
  inset: -30%;
  background: radial-gradient(ellipse 40% 30% at 35% 35%, rgba(176, 110, 240, .55), transparent 70%), radial-gradient(ellipse 34% 24% at 70% 72%, rgba(90, 40, 140, .45), transparent 70%);
  animation: sk-reflet-violet 5s ease-in-out infinite alternate;
}
@keyframes sk-reflet-violet { from { transform: translate(-12%, -8%) rotate(0deg); } to { transform: translate(10%, 12%) rotate(40deg); } }
[data-des="des-miroir-parjure"] .de6::after {
  inset: 0;
  background:
    radial-gradient(circle at 26% 26%, rgba(214, 170, 255, .95) 0 9%, transparent 11%), radial-gradient(circle at 74% 26%, rgba(214, 170, 255, .95) 0 9%, transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(214, 170, 255, .95) 0 9%, transparent 11%),
    radial-gradient(circle at 26% 74%, rgba(214, 170, 255, .95) 0 9%, transparent 11%), radial-gradient(circle at 74% 74%, rgba(214, 170, 255, .95) 0 9%, transparent 11%);
  opacity: 0; animation: sk-mensonge 4.6s steps(1, end) infinite;
}
[data-des="des-miroir-parjure"] .de6 i.p {
  background: radial-gradient(circle at 35% 30%, #9A7AC0, #2A1A3A 55%, #0A0610); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
  animation: sk-verite 4.6s steps(1, end) infinite;
}
[data-des="des-miroir-parjure"] .de6:nth-child(2)::after, [data-des="des-miroir-parjure"] .de6:nth-child(2) i.p { animation-delay: -1.5s; }
[data-des="des-miroir-parjure"] .de6:nth-child(3)::after, [data-des="des-miroir-parjure"] .de6:nth-child(3) i.p { animation-delay: -3.1s; }
@keyframes sk-mensonge { 0%, 88% { opacity: 0; transform: none; } 89% { opacity: 1; transform: translateX(4%); } 91% { opacity: .85; transform: translateX(-3%); } 94% { opacity: 0; transform: none; } }
@keyframes sk-verite { 0%, 88% { opacity: 1; } 89%, 93% { opacity: 0; } 94% { opacity: 1; } }

/* Couleur d'éclat (atterrissage, dés réussis allumés) */
[data-des="des-grand-sceau"] { --fx-c: rgba(255, 210, 130, 1); } [data-des="des-dernier-brasier"] { --fx-c: rgba(255, 120, 40, 1); }
[data-des="des-tresor-karoth"] { --fx-c: rgba(255, 200, 90, 1); } [data-des="des-miroir-parjure"] { --fx-c: rgba(200, 150, 255, 1); }
/* Dés sombres : la variante blanche inverse les valeurs, la noire passe au jais */
:is([data-des="des-grand-sceau"], [data-des="des-dernier-brasier"])[data-variante="blanc"] .de6 { filter: grayscale(1) invert(.92) contrast(1.08) brightness(1.04); }
:is([data-des="des-grand-sceau"], [data-des="des-dernier-brasier"])[data-variante="noir"] .de6 { filter: grayscale(1) brightness(.8) contrast(1.25); }

/* ——— Signatures plein écran ——— */
/* Grand Sceau : un sceau de cire géant tombe et s'imprime sur l'écran, l'étoile d'Ysé s'allume */
.fx-plein--sceau { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 236, 190, .55), rgba(179, 40, 58, .32) 30%, rgba(40, 6, 12, .45) 80%); animation: fx-nuit var(--fx-d) ease-out both; }
.fx-plein--sceau svg {
  position: absolute; left: var(--x); top: var(--y); width: min(46vmin, 300px); height: auto; margin: calc(min(46vmin, 300px) / -2) 0 0 calc(min(46vmin, 300px) / -2);
  overflow: visible; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 200, 120, .55));
  animation: fx-sceau-tombe var(--fx-d) cubic-bezier(.3, .1, .3, 1) both;
}
.fx-plein--sceau.fx-plein--doux svg { width: min(30vmin, 200px); margin: calc(min(30vmin, 200px) / -2) 0 0 calc(min(30vmin, 200px) / -2); }
.fx-sceau-etoile { transform-box: fill-box; transform-origin: center; animation: fx-sceau-etoile var(--fx-d) ease-out both; }
@keyframes fx-sceau-tombe { 0% { transform: scale(3.4) rotate(-14deg); opacity: 0; } 14% { transform: scale(1) rotate(0deg); opacity: 1; } 18% { transform: scale(.93); } 24% { transform: scale(1); } 78% { opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } }
@keyframes fx-sceau-etoile { 0%, 18% { opacity: 0; transform: scale(.4); } 32% { opacity: 1; transform: scale(1.12); } 44%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* Dernier Brasier : les bords de l'écran prennent feu, un anneau de flammes jaillit des dés */
.fx-plein--brasier { background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 42%, rgba(255, 90, 20, .32) 72%, rgba(120, 10, 0, .72) 100%); animation: fx-nuit var(--fx-d) ease-out both; }
.fx-plein--brasier::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -12%; height: 48%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 30% 100% at 15% 100%, rgba(255, 220, 120, .9), transparent 62%), radial-gradient(ellipse 26% 90% at 42% 100%, rgba(255, 150, 50, .85), transparent 62%),
    radial-gradient(ellipse 30% 100% at 68% 100%, rgba(255, 110, 30, .85), transparent 62%), radial-gradient(ellipse 24% 80% at 92% 100%, rgba(255, 200, 100, .85), transparent 62%);
  filter: blur(12px); animation: fx-flammes-montent var(--fx-d) ease-out both;
}
@keyframes fx-flammes-montent { 0% { transform: scaleY(.1); opacity: 0; } 22% { transform: scaleY(1.1); opacity: 1; } 45% { transform: scaleY(.88); } 70% { transform: scaleY(1.04); opacity: .9; } 100% { transform: scaleY(.5); opacity: 0; } }
.fx-plein--brasier::after {
  content: ""; position: absolute; left: var(--x); top: var(--y); width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 58%, rgba(255, 230, 140, .95) 68%, rgba(255, 110, 30, .6) 78%, transparent 92%);
  animation: fx-anneau-feu var(--fx-d) cubic-bezier(.1, .7, .3, 1) both;
}
.fx-plein--brasier.fx-plein--doux::before { display: none; }
@keyframes fx-anneau-feu { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: 1; } 60% { opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* Trésor de Kar-oth : l'ombre du dragon passe au-dessus de l'écran */
.fx-plein--ombre-dragon { background: rgba(10, 4, 2, .3); animation: fx-nuit var(--fx-d) ease-in-out both; }
.fx-plein--ombre-dragon svg {
  position: absolute; left: 0; top: calc(var(--y) - 30vmin); width: 95vmax; height: auto; fill: rgba(12, 4, 2, .66); filter: blur(3px);
  animation: fx-ombre-passe var(--fx-d) cubic-bezier(.4, 0, .6, 1) both;
}
@keyframes fx-ombre-passe { 0% { transform: translateX(105vw) scale(.9); } 100% { transform: translateX(-100vmax) scale(1.1); } }

/* Miroir du Parjure : l'écran se fend comme un miroir autour des dés, puis se ressoude */
.fx-plein--miroir { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .55), rgba(176, 110, 240, .28) 28%, rgba(20, 10, 30, .35) 75%); animation: fx-nuit var(--fx-d) ease-out both; }
.fx-plein--miroir svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(200, 150, 255, .95)); animation: fx-fondu-fin var(--fx-d) ease-in both; }
.fx-plein--miroir path { fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: fx-trace calc(var(--fx-d) * .22) cubic-bezier(.2, .8, .3, 1) forwards; }
.fx-plein--miroir path.fx-fente-violette { stroke: #C79BFF; stroke-width: 1; transform: translate(2px, 1px); }

/* ——— Cadres ——— */
/* Charte des Envoyés : l'étoile d'Ysé au fronton, les six sceaux des premiers Envoyés pendus sous le portrait */
.fig[data-cadre="cadre-charte"] { --fig-lisere: #FFE9A8; --fig-filet: rgba(200, 60, 70, .5); --fig-lumiere: rgba(255, 236, 180, .35); }
.fig[data-cadre="cadre-charte"] .fig-cadre { box-shadow: 0 0 0 1px #FFF0C0, 0 0 0 3px #3A0A14, 0 0 0 5px #E3B550, 0 0 0 6px #7E1426, 0 0 22px rgba(240, 150, 120, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-charte"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-charte"] .sk-nimbe { background: radial-gradient(closest-side, rgba(255, 226, 160, .6), rgba(179, 40, 58, .28) 55%, transparent 100%); }
.fig[data-cadre="cadre-charte"] .sk-eclat, .sk-etoile-yse, .sk-sceaux { z-index: 4; }
.sk-etoile-yse { position: absolute; left: 50%; top: 0; width: 28%; height: auto; overflow: visible; transform: translate(-50%, -56%); filter: drop-shadow(0 0 6px rgba(255, 214, 130, .9)); animation: sk-etoile-yse 4.4s ease-in-out infinite; }
@keyframes sk-etoile-yse { 0%, 100% { transform: translate(-50%, -56%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -64%) rotate(22.5deg) scale(1.08); } }
.sk-sceaux { position: absolute; left: 3%; right: 3%; bottom: -8%; display: flex; justify-content: space-between; align-items: flex-start; }
.sk-sceau {
  width: 14.5%; height: auto; overflow: visible; transform-origin: 50% 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  animation: sk-sceau-balance 3.4s ease-in-out infinite, sk-sceau-lueur 7.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.57s), calc(var(--i) * 1.2s);
}
@keyframes sk-sceau-balance { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes sk-sceau-lueur { 0%, 12%, 100% { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } 5% { filter: drop-shadow(0 0 5px rgba(255, 226, 150, 1)) brightness(1.35); } }
.fig-petit .sk-sceau:nth-child(2n) { display: none; }
.fig-petit .sk-sceaux { left: 12%; right: 12%; }

/* Envol du Phénix : le phénix déploie ses ailes au fronton, sa traîne de feu longe les montants, les braises montent */
.fig[data-cadre="cadre-phenix"] { --fig-lisere: #FFB04A; --fig-filet: rgba(255, 120, 40, .45); --fig-lumiere: rgba(255, 200, 120, .35); }
.fig[data-cadre="cadre-phenix"] .fig-cadre { animation: fig-respire 6.4s ease-in-out var(--fig-d, 0s) infinite, sk-brasier 1.8s ease-in-out infinite alternate; }
.fig[data-cadre="cadre-phenix"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-phenix"] .sk-nimbe { background: radial-gradient(closest-side, rgba(255, 200, 110, .6), rgba(230, 70, 20, .3) 55%, transparent 100%); }
.sk-phenix-envol, .fig[data-cadre="cadre-phenix"] .sk-escarbilles { z-index: 4; }
.sk-phenix-envol { position: absolute; left: 50%; top: 0; width: 124%; height: auto; overflow: visible; transform: translate(-50%, -64%); filter: drop-shadow(0 0 6px rgba(255, 130, 40, .9)); animation: sk-phenix-plane 3.2s ease-in-out infinite; }
@keyframes sk-phenix-plane { 0%, 100% { transform: translate(-50%, -64%); } 50% { transform: translate(-50%, -72%); } }
.sk-phenix-aile { transform-box: view-box; transform-origin: 50px 24px; animation: sk-aile-g 1.6s ease-in-out infinite; }
.sk-phenix-aile--d { animation-name: sk-aile-d; }
@keyframes sk-aile-g { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-9deg) scaleY(.8); } }
@keyframes sk-aile-d { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(9deg) scaleY(.8); } }
.sk-traine {
  position: absolute; top: 4%; bottom: 14%; width: 6%; z-index: -1; border-radius: 50%; filter: blur(2.5px); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 160, .95), rgba(255, 140, 40, .7) 30%, rgba(194, 32, 14, .4) 65%, transparent);
  animation: sk-traine 1.3s ease-in-out infinite alternate;
}
.sk-traine--g { left: -5%; } .sk-traine--d { right: -5%; animation-delay: -.65s; }
@keyframes sk-traine { from { transform: scaleY(.9) skewX(4deg); opacity: .7; } to { transform: scaleY(1.06) skewX(-4deg); opacity: 1; } }
.fig-petit .sk-traine { display: none; }

/* Gueule de Kar-oth : les mâchoires tiennent le portrait et se referment parfois, les yeux brûlent, la fumée monte */
.fig[data-cadre="cadre-gueule"] { --fig-lisere: #C8402A; --fig-filet: rgba(220, 70, 30, .4); --fig-lumiere: rgba(255, 140, 60, .3); }
.fig[data-cadre="cadre-gueule"] .fig-cadre { box-shadow: 0 0 0 1px #E0563A, 0 0 0 3px #0A0303, 0 0 0 4px #5A140C, 0 0 20px rgba(220, 60, 20, .4), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-gueule"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-gueule"] .sk-nimbe { background: radial-gradient(closest-side, rgba(255, 120, 40, .45), rgba(120, 20, 10, .3) 60%, transparent 100%); }
.sk-machoire { position: absolute; left: -9%; width: 118%; overflow: visible; z-index: 4; filter: drop-shadow(0 0 3px rgba(230, 70, 30, .55)) drop-shadow(0 3px 3px rgba(0, 0, 0, .85)); }
.sk-machoire--h { top: -8%; height: 21%; animation: sk-machoire-h 5.2s ease-in-out infinite; }
.sk-machoire--b { bottom: -7%; height: 17%; animation: sk-machoire-b 5.2s ease-in-out infinite; }
.sk-machoire-os { fill: #1C0B09; stroke: #8A2A16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-ecailles path { fill: none; stroke: #5A1A10; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-crocs path { fill: #F2E6CC; stroke: #6A5236; stroke-width: .8; vector-effect: non-scaling-stroke; }
.sk-oeil-k { fill: #FFB23A; animation: sk-oeil-k 3s ease-in-out infinite; }
.sk-pupille-k { fill: #1A0604; }
@keyframes sk-oeil-k { 0%, 100% { fill: #E8901E; } 50% { fill: #FFE07A; } }
@keyframes sk-machoire-h { 0%, 76%, 100% { translate: 0 0; } 82%, 90% { translate: 0 10%; } }
@keyframes sk-machoire-b { 0%, 76%, 100% { translate: 0 0; } 82%, 90% { translate: 0 -10%; } }
.sk-fumee { position: absolute; inset: 0; z-index: 4; }
.sk-fumee i { position: absolute; top: 0; width: 18%; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(130, 110, 104, .55), transparent); filter: blur(2px); animation: sk-fumee 4.4s ease-out infinite; }
.sk-fumee i:nth-child(1) { left: -6%; } .sk-fumee i:nth-child(2) { left: 80%; animation-delay: -1.5s; } .sk-fumee i:nth-child(3) { left: 4%; animation-delay: -2.9s; }
.sk-fumee i:nth-child(4) { left: 90%; animation-delay: -3.6s; } .sk-fumee i:nth-child(5) { left: -2%; animation-delay: -.8s; } .sk-fumee i:nth-child(6) { left: 84%; animation-delay: -2.2s; }
@keyframes sk-fumee { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(0, calc(var(--fig-h, 96px) * -.45)) scale(1.8); opacity: 0; } }
.fig-petit .sk-fumee { display: none; }

/* Fils du Marionnettiste : la croix se balance, les fils violets tirent le portrait, un masque pend au milieu */
.fig[data-cadre="cadre-marionnettiste"] { --fig-lisere: #D8C0F0; --fig-filet: rgba(176, 110, 240, .45); --fig-lumiere: rgba(200, 160, 255, .3); }
.fig[data-cadre="cadre-marionnettiste"] .fig-cadre {
  box-shadow: 0 0 0 1px #D8C0F0, 0 0 0 3px #0E0812, 0 0 0 4px #6A4A8A, 0 0 18px rgba(170, 100, 230, .4), 0 12px 26px -8px rgba(0, 0, 0, .85);
  animation: fig-respire 6.4s ease-in-out var(--fig-d, 0s) infinite, sk-pantin 4s ease-in-out infinite;
}
@keyframes sk-pantin { 0%, 100% { rotate: -1.6deg; translate: 0 0; } 25% { translate: 0 -1.5%; } 50% { rotate: 1.6deg; translate: 0 0; } 75% { translate: 0 -1.5%; } }
.fig[data-cadre="cadre-marionnettiste"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-marionnettiste"] .sk-nimbe { background: radial-gradient(closest-side, rgba(200, 150, 255, .5), rgba(90, 40, 140, .3) 55%, transparent 100%); }
.sk-croix { position: absolute; left: -4%; width: 108%; top: -30%; height: 34%; z-index: 4; overflow: visible; transform-origin: 50% 0; filter: drop-shadow(0 0 3px rgba(176, 110, 240, .7)); animation: sk-croix 4s ease-in-out infinite; }
@keyframes sk-croix { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.sk-fils-v path, .sk-fil-masque { stroke: #D8B8FF; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-fils-v path { animation: sk-fil-lueur 2.2s ease-in-out infinite alternate; }
@keyframes sk-fil-lueur { from { opacity: .45; } to { opacity: 1; } }
.sk-croix-bois { fill: #3A2414; stroke: #C9A04A; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-croix-or circle { fill: #E3B550; stroke: #5A3A0C; stroke-width: .6; vector-effect: non-scaling-stroke; }
.sk-masque-pendu { transform-box: view-box; transform-origin: 50px 30px; animation: sk-masque-pendu 2.8s ease-in-out infinite; }
@keyframes sk-masque-pendu { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
.fig-petit .sk-croix { top: -22%; height: 26%; }

/* ——— Bannières ——— */
/* Étendard d'Ysé (refait) : l'étoile respire au-dessus de l'épée */
.sk-ban[data-ban="banniere-yse"] .bn-etoile { transform-box: fill-box; transform-origin: center; animation: bn-etoile 3.2s ease-in-out infinite; }
@keyframes bn-etoile { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .92; } 50% { transform: scale(1.08) rotate(22.5deg); opacity: 1; } }
/* L'Œil qui ne cligne plus : les rayons tournent lentement, l'iris se resserre, les fenêtres d'Aubemont veillent */
.sk-ban .bn-rayons { transform-box: view-box; transform-origin: 60px 26px; animation: sk-tourne 40s linear infinite; }
.sk-ban .bn-halo, .sk-ban .bn-lueur { animation: bn-pulse 3.6s ease-in-out infinite; }
@keyframes bn-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.sk-ban .bn-iris { transform-box: fill-box; transform-origin: center; animation: bn-iris 4.2s ease-in-out infinite; }
@keyframes bn-iris { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
.sk-ban .bn-fenetres { animation: sk-fenetres 2.6s ease-in-out infinite alternate; }
/* La Rose ardente : les flammes dansent derrière la rose, les braises montent */
.sk-ban .bn-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: bn-flamme 1.1s ease-in-out infinite alternate; }
.sk-ban .bn-flamme--b { animation-duration: 1.4s; animation-delay: -.5s; }
@keyframes bn-flamme { from { transform: scale(1.04, .86); opacity: .8; } to { transform: scale(.96, 1.08); opacity: 1; } }
.sk-ban .bn-braises circle { animation: bn-braise 3.4s linear infinite; animation-delay: calc(var(--i) * -.48s); }
@keyframes bn-braise { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 2px -34px; opacity: 0; } }
/* Kar-oth s'éveille : la pupille se fend et se rouvre, l'œil cligne parfois */
.sk-ban .bn-pupille { transform-box: fill-box; transform-origin: center; animation: bn-pupille 4s ease-in-out infinite; }
@keyframes bn-pupille { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.42); } }
.sk-ban .bn-paupiere { transform-box: view-box; transform-origin: 60px 29px; transform: scaleY(0); animation: bn-cligne 6.5s ease-in-out infinite; }
@keyframes bn-cligne { 0%, 88%, 100% { transform: scaleY(0); } 92% { transform: scaleY(1); } }
/* Le Codex ouvert : un feuillet tourne, l'œil de la page regarde alentour, des runes s'échappent */
.sk-ban .bn-page { transform-box: view-box; transform-origin: 60px 44px; opacity: 0; animation: bn-page 5.4s ease-in-out infinite; }
@keyframes bn-page { 0%, 40% { transform: scaleX(1); opacity: 0; } 43% { opacity: 1; } 62% { transform: scaleX(0); } 78% { transform: scaleX(-1); opacity: 1; } 82%, 100% { transform: scaleX(-1); opacity: 0; } }
.sk-ban .bn-codex-iris { animation: bn-regard 4.8s ease-in-out infinite; }
@keyframes bn-regard { 0%, 100% { translate: 0 0; } 25% { translate: -1.6px 0; } 55% { translate: 1.8px .4px; } 80% { translate: 0 -.4px; } }
.sk-ban .bn-runes path { animation: bn-rune 3.6s ease-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes bn-rune { 0% { translate: 0 6px; opacity: 0; } 25% { opacity: 1; } 100% { translate: 0 -10px; opacity: 0; } }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  [data-des="des-grand-sceau"] .de6, [data-des="des-grand-sceau"] .de6::after, [data-des="des-dernier-brasier"] .de6::before, [data-des="des-dernier-brasier"] .de6::after,
  [data-des="des-tresor-karoth"] .de6::before, [data-des="des-tresor-karoth"] .de6::after, [data-des="des-miroir-parjure"] .de6::before, [data-des="des-miroir-parjure"] .de6 i.p,
  .sk-etoile-yse, .sk-sceau, .sk-phenix-envol, .sk-phenix-aile, .sk-traine, .sk-machoire, .sk-oeil-k, .sk-croix, .sk-fils-v path, .sk-masque-pendu,
  .fig[data-cadre="cadre-marionnettiste"] .fig-cadre, .sk-ban [class^="bn-"], .sk-ban [class^="bn-"] * { animation: none !important; }
  [data-des="des-miroir-parjure"] .de6::after, [data-des="des-tresor-karoth"] .de6::before, .sk-fumee { display: none; }
}
:root[data-anim-reduite="1"] :is([data-des="des-grand-sceau"], [data-des="des-dernier-brasier"], [data-des="des-tresor-karoth"], [data-des="des-miroir-parjure"]) .de6 i.p { animation: none; }
:root[data-anim-reduite="1"] [data-des="des-miroir-parjure"] .de6::after { display: none; }

/* ════════════════════ La Châsse de cristal : épiques et légendaires, en Serments ════════════════════ */

/* ——— Dés ——— */
/* Opale de feu : orange translucide, des feux verts et bleus qui changent de place ; points de nacre */
[data-des="des-opale"] .de6 {
  background: radial-gradient(ellipse 60% 45% at 30% 24%, rgba(255, 250, 235, .55), transparent 70%), linear-gradient(150deg, #FFC27A, #F0782E 45%, #B8381A 80%, #7A1E10);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .8), inset 0 -3px 6px rgba(90, 20, 6, .5), 0 6px 14px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 140, 60, .35);
}
[data-des="des-opale"] .de6::before {
  inset: -25%;
  background: radial-gradient(ellipse 20% 15% at 30% 40%, rgba(90, 255, 190, .6), transparent 70%), radial-gradient(ellipse 17% 13% at 68% 30%, rgba(110, 180, 255, .65), transparent 70%),
    radial-gradient(ellipse 19% 12% at 60% 70%, rgba(200, 255, 110, .55), transparent 70%), radial-gradient(ellipse 13% 11% at 28% 76%, rgba(140, 140, 255, .55), transparent 70%);
  animation: sk-feux-opale 4.2s ease-in-out infinite alternate;
}
[data-des="des-opale"] .de6:nth-child(2)::before { animation-delay: -1.4s; } [data-des="des-opale"] .de6:nth-child(3)::before { animation-delay: -2.8s; }
@keyframes sk-feux-opale { 0% { transform: translate(-8%, 4%) rotate(0deg); opacity: .5; } 50% { opacity: 1; } 100% { transform: translate(8%, -6%) rotate(28deg); opacity: .6; } }
[data-des="des-opale"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFF0D8 40%, #E8B888 85%); box-shadow: 0 0 0 1px rgba(122, 30, 16, .45), 0 0 4px rgba(255, 240, 220, .9); }

/* Géode d'améthyste : la pierre brute autour, la forêt de cristaux violets dedans qui s'allume ; points de cristal clair */
[data-des="des-geode"] .de6 {
  background:
    repeating-conic-gradient(from 10deg at 50% 50%, rgba(255, 255, 255, .09) 0 6deg, transparent 6deg 18deg, rgba(20, 0, 40, .3) 18deg 26deg, transparent 26deg 36deg),
    radial-gradient(circle at 50% 50%, #8A4ACB 0, #5E2398 26%, #3A1260 50%, #24083E 60%, #6A6058 63%, #8A8076 70%, #4A443E 84%, #2E2A26);
  box-shadow: inset 0 0 0 1px #A89C8E, inset 0 -2px 3px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .55), 0 0 12px rgba(170, 100, 240, .35);
}
[data-des="des-geode"] .de6::before { inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 140, 255, .45), transparent); animation: sk-geode-lueur 2.8s ease-in-out infinite alternate; }
@keyframes sk-geode-lueur { from { opacity: .35; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
[data-des="des-geode"] .de6::after { inset: -30% -60%; background: linear-gradient(105deg, transparent 45%, rgba(255, 240, 255, .6) 50%, transparent 55%); animation: sk-reflet-de 4.4s ease-in-out infinite; }
[data-des="des-geode"] .de6 i.p {
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #F2DAFF 45%, #C08AF0 92%);
  box-shadow: 0 0 0 1.5px #24083E, 0 0 6px rgba(226, 180, 255, .9); animation: sk-geode-pt 2.2s ease-in-out infinite;
}
[data-des="des-geode"] .de6 i:nth-child(2n) { animation-delay: -.7s; } [data-des="des-geode"] .de6 i:nth-child(3n) { animation-delay: -1.4s; }
@keyframes sk-geode-pt { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* Cristal de roche : cristal clair taillé en table, une bande d'arc-en-ciel le traverse ; points en gemmes serties d'or */
[data-des="des-cristal-roche"] .de6 {
  background:
    linear-gradient(45deg, transparent 49.2%, rgba(255, 255, 255, .75) 50%, transparent 50.8%), linear-gradient(-45deg, transparent 49.2%, rgba(110, 140, 175, .4) 50%, transparent 50.8%),
    radial-gradient(ellipse 50% 40% at 30% 22%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(135deg, #F4FAFF, #CFE0EE 30%, #EAF4FC 48%, #A9C2D8 70%, #E2EEF8);
  box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 3px rgba(150, 180, 210, .45), inset 0 -3px 5px rgba(70, 100, 140, .35), 0 6px 14px rgba(0, 0, 0, .45), 0 0 14px rgba(190, 220, 255, .55);
}
[data-des="des-cristal-roche"] .de6::before {
  inset: -20% -80%;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 90, 90, .45) 40%, rgba(255, 200, 70, .45) 44%, rgba(110, 230, 140, .45) 48%, rgba(90, 170, 255, .45) 52%, rgba(170, 110, 255, .45) 56%, transparent 62%);
  animation: sk-arc-cristal 3.6s ease-in-out infinite;
}
[data-des="des-cristal-roche"] .de6:nth-child(2)::before { animation-delay: -1.2s; } [data-des="des-cristal-roche"] .de6:nth-child(3)::before { animation-delay: -2.4s; }
@keyframes sk-arc-cristal { 0% { transform: translateX(-38%); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(38%); opacity: 0; } }
[data-des="des-cristal-roche"] .de6::after { inset: -30% -60%; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .95) 50%, transparent 56%); animation: sk-reflet-de 3.6s ease-in-out infinite; }
[data-des="des-cristal-roche"] .de6 i.p {
  --g: #2F6BD8; background: radial-gradient(circle at 35% 30%, #FFFFFF 0 12%, var(--g) 50%, #0C0A1A 120%);
  box-shadow: 0 0 0 1.2px #E3B550, 0 0 0 2px #7A5A1A, 0 0 5px rgba(255, 255, 255, .7); animation: sk-gemme-pt 3s ease-in-out infinite;
}
[data-des="des-cristal-roche"] .de6 i:nth-child(3n+2) { --g: #D0243E; animation-delay: -1s; } [data-des="des-cristal-roche"] .de6 i:nth-child(3n) { --g: #2AA86A; animation-delay: -2s; }
@keyframes sk-gemme-pt { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4) saturate(1.2); } }

[data-des="des-opale"] { --fx-c: rgba(255, 170, 90, 1); } [data-des="des-geode"] { --fx-c: rgba(200, 150, 255, 1); } [data-des="des-cristal-roche"] { --fx-c: rgba(210, 235, 255, 1); }
[data-des="des-geode"][data-variante="blanc"] .de6 { filter: grayscale(1) invert(.92) contrast(1.08) brightness(1.04); }
[data-des="des-geode"][data-variante="noir"] .de6 { filter: grayscale(1) brightness(.8) contrast(1.25); }

/* ——— Signature plein écran : le prisme ——— */
.fx-plein--prisme { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .5), rgba(170, 200, 255, .2) 28%, rgba(8, 10, 24, .42) 80%); animation: fx-nuit var(--fx-d) ease-out both; }
.fx-plein--prisme svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-plein--prisme.fx-plein--doux svg { opacity: .55; }
.fx-plein--prisme.fx-plein--doux .fx-faisceau { display: none; }
.fx-faisceau { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; filter: blur(2.5px); stroke-dasharray: 100; stroke-dashoffset: 100; animation: fx-faisceau var(--fx-d) ease-out both; }
@keyframes fx-faisceau { 0% { stroke-dashoffset: 100; opacity: 1; } 16% { stroke-dashoffset: 0; } 60% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-eventail { transform-box: view-box; filter: blur(3px); animation: fx-eventail var(--fx-d) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fx-eventail { 0%, 14% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: .62; } 72% { opacity: .48; } 100% { transform: scale(1.04); opacity: 0; } }
.fx-prisme-coeur { fill: #FFFFFF; filter: blur(4px); transform-box: fill-box; transform-origin: center; animation: fx-prisme-coeur var(--fx-d) ease-out both; }
@keyframes fx-prisme-coeur { 0%, 12% { transform: scale(0); opacity: 0; } 18% { transform: scale(2.2); opacity: 1; } 40% { transform: scale(1); opacity: .9; } 100% { transform: scale(.6); opacity: 0; } }

/* ——— Cadres ——— */
/* Reliure d'orfèvre : or repoussé, filet perlé, huit cabochons qui s'allument tour à tour */
.fig[data-cadre="cadre-orfevre"] { --fig-lisere: #FFE7A0; --fig-filet: rgba(227, 181, 80, .5); --fig-lumiere: rgba(255, 236, 180, .3); }
.fig[data-cadre="cadre-orfevre"] .fig-cadre { box-shadow: 0 0 0 1px #FFF3C4, 0 0 0 2px #3A2408, 0 0 16px rgba(240, 190, 90, .3), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-orfevre"] .sk-cadre::before {
  inset: -6px; border: 5px solid transparent; border-radius: 3px;
  border-image: linear-gradient(135deg, #FFF0B0, #C9902E 22%, #FFE7A0 40%, #8A5E16 58%, #F2CF6A 76%, #A8741C) 1;
  filter: drop-shadow(0 0 4px rgba(255, 210, 120, .35));
}
.fig[data-cadre="cadre-orfevre"] .sk-cadre::after { inset: -3.5px; border: 1.2px dotted rgba(255, 246, 210, .9); border-radius: 2px; }
.sk-cabochons i {
  position: absolute; width: calc(var(--fig-w, 72px) * .13); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, var(--g) 50%, #140810 118%);
  box-shadow: 0 0 0 1.5px #E3B550, 0 0 0 2.5px #6A4510, 0 2px 3px rgba(0, 0, 0, .6);
  animation: sk-cabochon 4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s);
}
.sk-cabochons i:nth-child(1) { left: 0; top: 0; } .sk-cabochons i:nth-child(2) { left: 50%; top: 0; } .sk-cabochons i:nth-child(3) { left: 100%; top: 0; } .sk-cabochons i:nth-child(4) { left: 100%; top: 50%; }
.sk-cabochons i:nth-child(5) { left: 100%; top: 100%; } .sk-cabochons i:nth-child(6) { left: 50%; top: 100%; } .sk-cabochons i:nth-child(7) { left: 0; top: 100%; } .sk-cabochons i:nth-child(8) { left: 0; top: 50%; }
@keyframes sk-cabochon { 0%, 18%, 100% { filter: brightness(.9); } 6% { filter: brightness(1.9) drop-shadow(0 0 4px var(--g)); } }
.fig-petit .sk-cabochons i:nth-child(2n) { display: none; }

/* Châsse de cristal : pignon et pinacles d'or au-dessus, piliers de cristal, la lumière irisée qui traverse le portrait */
.fig[data-cadre="cadre-chasse-cristal"] { --fig-lisere: #E8F4FF; --fig-filet: rgba(170, 210, 255, .5); --fig-lumiere: rgba(220, 240, 255, .4); }
.fig[data-cadre="cadre-chasse-cristal"] .fig-cadre { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #16222E, 0 0 0 5px #E3B550, 0 0 0 6px #8AB4D8, 0 0 24px rgba(170, 210, 255, .5), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-chasse-cristal"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-chasse-cristal"] .sk-nimbe { background: radial-gradient(closest-side, rgba(225, 242, 255, .65), rgba(150, 190, 240, .25) 55%, transparent 100%); }
.sk-pignon, .sk-pilier, .sk-vitre, .sk-eclats-cristal { z-index: 4; }
.sk-pignon { position: absolute; left: 50%; top: 0; width: 108%; height: auto; overflow: visible; transform: translate(-50%, -80%); filter: drop-shadow(0 0 5px rgba(200, 230, 255, .8)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.sk-gemme-pignon { animation: sk-gemme-pignon 3.2s ease-in-out infinite; }
@keyframes sk-gemme-pignon { 0%, 100% { fill: #B0182E; } 50% { fill: #FF5A6E; } }
.sk-pilier {
  position: absolute; top: 3%; bottom: -1%; width: 8%; border-radius: 2px;
  background: repeating-linear-gradient(180deg, transparent 0 21%, #E3B550 21% 23.5%, transparent 23.5% 25%), linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(180, 208, 236, .45) 40%, rgba(255, 255, 255, .75) 62%, rgba(140, 172, 206, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 246, 210, .9), 0 0 0 1px #6A4A12, 0 0 8px rgba(190, 220, 255, .55);
}
.sk-pilier--g { left: -9%; } .sk-pilier--d { right: -9%; }
.sk-vitre { position: absolute; inset: 0; overflow: hidden; }
.sk-vitre i {
  position: absolute; inset: 0 -100%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .32) 46%, rgba(255, 120, 120, .2) 48.5%, rgba(255, 230, 120, .2) 50%, rgba(120, 255, 160, .2) 51.5%, rgba(120, 180, 255, .22) 53%, transparent 58%);
  animation: sk-vitre 5.6s ease-in-out infinite;
}
@keyframes sk-vitre { 0% { transform: translateX(-34%); } 60%, 100% { transform: translateX(34%); } }
.sk-eclats-cristal { position: absolute; inset: 0; }
.sk-eclats-cristal i {
  position: absolute; width: calc(var(--fig-w, 72px) * .12); aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: #FFFFFF; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 3px #BFE0FF);
  animation: sk-eclat-cristal 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s);
}
.sk-eclats-cristal i:nth-child(1) { left: -4%; top: 22%; } .sk-eclats-cristal i:nth-child(2) { left: 104%; top: 40%; } .sk-eclats-cristal i:nth-child(3) { left: 18%; top: -3%; }
.sk-eclats-cristal i:nth-child(4) { left: 102%; top: 86%; } .sk-eclats-cristal i:nth-child(5) { left: -3%; top: 70%; } .sk-eclats-cristal i:nth-child(6) { left: 82%; top: -2%; }
@keyframes sk-eclat-cristal { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
.fig-petit .sk-pilier, .fig-petit .sk-eclats-cristal { display: none; }
.fig-petit .sk-pignon { transform: translate(-50%, -84%); }

/* ——— Bannières ——— */
/* Le Lustre de la Chambre : les pendeloques se balancent et scintillent, les bougies tremblent */
.sk-ban .bn-pendeloques { transform-box: view-box; transform-origin: 60px 24px; animation: bn-balance-lustre 4.6s ease-in-out infinite; }
@keyframes bn-balance-lustre { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.sk-ban .bn-scintille { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bn-scintille 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes bn-scintille { 0%, 70%, 100% { opacity: 0; transform: scale(.3); } 82% { opacity: 1; transform: scale(1); } }
/* La Rosace de l'aube : la lumière tourne dans les verres, les rais vibrent, la poussière dérive */
.sk-ban .bn-lumiere-tourne { transform-box: view-box; transform-origin: 60px 31px; animation: sk-tourne 18s linear infinite; }
.sk-ban .bn-verres circle { animation: bn-verre 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes bn-verre { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.sk-ban .bn-rais { animation: bn-pulse 4.4s ease-in-out infinite; }
.sk-ban .bn-coeur-rosace { transform-box: fill-box; transform-origin: center; animation: bn-etoile 3.2s ease-in-out infinite; }
.sk-ban .bn-poussiere circle { animation: bn-poussiere 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes bn-poussiere { 0% { translate: 0 0; opacity: 0; } 30% { opacity: 1; } 100% { translate: 3px 8px; opacity: 0; } }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  [data-des="des-opale"] .de6::before, [data-des="des-geode"] .de6::before, [data-des="des-geode"] .de6::after, [data-des="des-geode"] .de6 i.p,
  [data-des="des-cristal-roche"] .de6::before, [data-des="des-cristal-roche"] .de6::after, [data-des="des-cristal-roche"] .de6 i.p,
  .sk-cabochons i, .sk-vitre i, .sk-eclats-cristal i, .sk-gemme-pignon { animation: none !important; }
}
:root[data-anim-reduite="1"] :is([data-des="des-geode"], [data-des="des-cristal-roche"]) .de6 i.p { animation: none; }

/* Les cadres dont l'ornement dépasse au-dessus du portrait (pignon, phénix, couronne, croix, étoile) : la zone de révélation
   leur fait de la place, sinon l'ornement couvre la ligne au-dessus (« … voici qui vous êtes »). Pas dans la vue resserrée des choix. */
.ecran:not(:has(.choix-actif)) .fig-zone:has(.fig :is(.sk-pignon, .sk-phenix-envol, .sk-couronne, .sk-croix, .sk-etoile-yse)) { padding-top: 52px; }

/* ════════════════════ Châsse II : trois épiques, trois légendaires, les premières mythiques ════════════════════ */
/* Mythique : du feu prismatique sur du noir de jais. Aucune autre rareté n'a ce noir ni ce spectre entier. */

/* ——— Dés ——— */
/* Ambre ancien (épique) : miel translucide, une phalène prise dedans depuis mille ans, des bulles ; points de résine */
[data-des="des-ambre"] .de6 {
  background:
    radial-gradient(circle at 22% 70%, rgba(255, 240, 200, .7) 0 1.2px, transparent 2px), radial-gradient(circle at 76% 24%, rgba(255, 240, 200, .6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 82%, rgba(255, 240, 200, .5) 0 .8px, transparent 1.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%234A1E04' fill-opacity='.42'%3E%3Cpath d='M20 15c-5-7-15-6-14 1s8 7 14 3zM20 15c5-7 15-6 14 1s-8 7-14 3zM20 19c-4 2-10 6-8 11s7-2 8-9zM20 19c4 2 10 6 8 11s-7-2-8-9z'/%3E%3Cellipse cx='20' cy='20' rx='1.5' ry='7.5'/%3E%3C/g%3E%3Cpath d='M19 13c-1-3-3-5-5-6M21 13c1-3 3-5 5-6' stroke='%234A1E04' stroke-opacity='.4' stroke-width='.7' fill='none'/%3E%3C/svg%3E") 58% 46% / 64% no-repeat,
    radial-gradient(ellipse 60% 50% at 34% 28%, rgba(255, 236, 170, .85), transparent 70%),
    radial-gradient(circle at 72% 78%, #7A3A0E, transparent 62%),
    linear-gradient(135deg, #FFC75A, #E8901E 42%, #B0580C 78%, #6A2E06);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 150, .75), inset 0 -4px 7px rgba(90, 30, 0, .45), 0 6px 14px rgba(0, 0, 0, .45), 0 0 12px rgba(255, 170, 60, .4);
}
[data-des="des-ambre"] .de6:nth-child(2) { background-position: 0 0, 0 0, 0 0, 30% 64%, 0 0, 0 0, 0 0; }
[data-des="des-ambre"] .de6:nth-child(3) { background-position: 0 0, 0 0, 0 0, 70% 30%, 0 0, 0 0, 0 0; }
/* La lumière chaude dérive dans la résine */
[data-des="des-ambre"] .de6::before { inset: -40%; background: radial-gradient(circle at 50% 50%, rgba(255, 232, 160, .5), transparent 36%); animation: sk-ambre 6.4s ease-in-out infinite alternate; }
[data-des="des-ambre"] .de6:nth-child(2)::before { animation-delay: -2.1s; } [data-des="des-ambre"] .de6:nth-child(3)::before { animation-delay: -4.2s; }
@keyframes sk-ambre { from { transform: translate(-16%, -12%); } to { transform: translate(14%, 16%); } }
[data-des="des-ambre"] .de6::after { inset: -30% -70%; background: linear-gradient(105deg, transparent 44%, rgba(255, 250, 220, .6) 50%, transparent 56%); animation: sk-reflet-de 5s ease-in-out infinite; }
[data-des="des-ambre"] .de6 i.p { background: radial-gradient(circle at 35% 30%, #FFF2C8 0 14%, #C06A10 55%, #4A1E02 112%); box-shadow: inset 0 0 0 1px rgba(80, 30, 0, .5), 0 1px 0 rgba(255, 240, 200, .5); }

/* Saphir étoilé (légendaire) : un cabochon bleu nuit ; l'étoile à six branches glisse sur sa surface quand la lumière bouge ; points d'argent */
[data-des="des-saphir-etoile"] .de6 {
  background:
    radial-gradient(ellipse 55% 30% at 36% 16%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(ellipse 72% 62% at 42% 34%, #5A86FF, #1E3A9E 56%, #0A1450 92%);
  box-shadow: inset 0 0 0 1px rgba(220, 230, 255, .8), inset 0 0 0 3px rgba(40, 70, 170, .6), inset 0 -6px 10px rgba(0, 6, 40, .6), 0 6px 16px rgba(0, 0, 0, .5), 0 0 16px rgba(120, 160, 255, .55);
}
[data-des="des-saphir-etoile"] .de6::before {
  inset: -24%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0 3%, rgba(210, 225, 255, .45) 8%, transparent 26%),
    linear-gradient(90deg, transparent 49.2%, rgba(235, 242, 255, .75) 50%, transparent 50.8%),
    linear-gradient(30deg, transparent 49.2%, rgba(235, 242, 255, .75) 50%, transparent 50.8%),
    linear-gradient(150deg, transparent 49.2%, rgba(235, 242, 255, .75) 50%, transparent 50.8%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 8%, transparent 46%); mask: radial-gradient(circle at 50% 50%, #000 8%, transparent 46%);
  animation: sk-asterisme 5.2s ease-in-out infinite;
}
[data-des="des-saphir-etoile"] .de6:nth-child(2)::before { animation-delay: -1.7s; } [data-des="des-saphir-etoile"] .de6:nth-child(3)::before { animation-delay: -3.4s; }
@keyframes sk-asterisme { 0%, 100% { transform: translate(-16%, -12%) rotate(-6deg); } 50% { transform: translate(14%, 12%) rotate(6deg); } }
[data-des="des-saphir-etoile"] .de6 i.p {
  background: radial-gradient(circle, #FFFFFF 0 22%, #DCE4F4 50%, #8A9AB8);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  scale: 1.4; animation: sk-scintille 2.6s ease-in-out infinite;
}
[data-des="des-saphir-etoile"] .de6 i:nth-child(2n) { animation-delay: -.9s; } [data-des="des-saphir-etoile"] .de6 i:nth-child(3n) { animation-delay: -1.7s; }

/* Éclats du Premier Serment (mythique) : du cristal noir taillé ; le feu de toutes les couleurs y tourne,
   et de temps en temps le dé se fend de lumière, puis se ressoude ; points en prismes */
[data-des="des-eclats-serment"] .de6 {
  background:
    linear-gradient(45deg, transparent 49.3%, rgba(255, 255, 255, .22) 50%, transparent 50.7%), linear-gradient(-45deg, transparent 49.3%, rgba(255, 255, 255, .14) 50%, transparent 50.7%),
    radial-gradient(ellipse 50% 32% at 30% 18%, rgba(255, 255, 255, .3), transparent 70%),
    conic-gradient(from 20deg at 42% 38%, #221A30, #060409, #2E2440, #09070E, #1E1828, #050308, #221A30);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 2.5px #06040A, inset 0 0 0 3.5px rgba(255, 90, 106, .55),
    0 6px 16px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 90, 106, .45), 0 0 26px rgba(155, 107, 255, .35);
}
[data-des="des-eclats-serment"] .de6::before {
  inset: -60%;
  background: conic-gradient(from 0deg, rgba(255, 77, 109, 0), rgba(255, 77, 109, .55) 40deg, rgba(255, 181, 71, .5) 90deg, rgba(255, 243, 92, .4) 130deg,
    rgba(92, 240, 160, .45) 180deg, rgba(79, 216, 255, .55) 230deg, rgba(155, 107, 255, .55) 290deg, rgba(255, 77, 109, 0) 360deg);
  -webkit-mask: repeating-conic-gradient(from 8deg, #000 0 22deg, rgba(0, 0, 0, .25) 22deg 40deg); mask: repeating-conic-gradient(from 8deg, #000 0 22deg, rgba(0, 0, 0, .25) 22deg 40deg);
  opacity: .7; animation: sk-tourne 6s linear infinite;
}
[data-des="des-eclats-serment"] .de6:nth-child(2)::before { animation-duration: 7.4s; animation-direction: reverse; } [data-des="des-eclats-serment"] .de6:nth-child(3)::before { animation-duration: 8.2s; }
/* La fente de lumière : elle s'ouvre, flamboie, puis se referme */
[data-des="des-eclats-serment"] .de6::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='.9' stroke-linejoin='round'%3E%3Cpath d='M20 21L5 6M20 21L33 3M20 21L38 25M20 21L25 38M20 21L4 31M12 13L8 21M28 11L34 16M30 23L31 33M14 27L9 37'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
  filter: drop-shadow(0 0 2px #FFFFFF) drop-shadow(0 0 3px #FF5A6A);
  opacity: 0; animation: sk-fente-de 4.8s ease-in-out infinite;
}
[data-des="des-eclats-serment"] .de6:nth-child(2)::after { animation-delay: -1.6s; } [data-des="des-eclats-serment"] .de6:nth-child(3)::after { animation-delay: -3.2s; }
@keyframes sk-fente-de { 0%, 74%, 100% { opacity: 0; transform: scale(.94); } 78% { opacity: 1; transform: scale(1.04); } 86% { opacity: .6; transform: scale(1); } 94% { opacity: 0; } }
[data-des="des-eclats-serment"] .de6 i.p {
  background: conic-gradient(from 0deg, #FF4D6D, #FFB547, #FFF35C, #5CF0A0, #4FD8FF, #9B6BFF, #FF4D6D);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .65);
  animation: sk-tourne 3.2s linear infinite;
}
[data-des="des-eclats-serment"] .de6 i:nth-child(2n) { animation-direction: reverse; }

[data-des="des-ambre"] { --fx-c: rgba(255, 180, 70, 1); } [data-des="des-saphir-etoile"] { --fx-c: rgba(140, 170, 255, 1); } [data-des="des-eclats-serment"] { --fx-c: rgba(255, 110, 130, 1); }
:is([data-des="des-saphir-etoile"], [data-des="des-eclats-serment"])[data-variante="blanc"] .de6 { filter: grayscale(1) invert(.92) contrast(1.08) brightness(1.04); }
:is([data-des="des-saphir-etoile"], [data-des="des-eclats-serment"])[data-variante="noir"] .de6 { filter: grayscale(1) brightness(.8) contrast(1.25); }

/* ——— Cadres ——— */
/* Résille de diamants (épique) : un filet d'argent dans l'anneau du cadre ; ses huit diamants s'allument tour à tour */
.fig[data-cadre="cadre-resille"] { --fig-lisere: #F4F8FF; --fig-filet: rgba(220, 230, 245, .5); --fig-lumiere: rgba(230, 240, 255, .3); }
.fig[data-cadre="cadre-resille"] .fig-cadre { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #1A1E26, 0 0 0 6px #A8B4C4, 0 0 0 7px #4A5464, 0 0 16px rgba(220, 235, 255, .35), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.sk-resille {
  position: absolute; inset: -6px; padding: 3px; border-radius: 3px; z-index: 1; opacity: .8; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .9) 3px 4px), repeating-linear-gradient(-45deg, transparent 0 3px, rgba(255, 255, 255, .9) 3px 4px);
  -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);
}
.sk-diamants { position: absolute; inset: -4.5px; z-index: 2; }
.sk-diamants i {
  position: absolute; width: calc(var(--fig-w, 72px) * .085); aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; border-radius: 1px;
  background: linear-gradient(135deg, #FFFFFF, #CFE0F4 45%, #8AA0C0 55%, #FFFFFF);
  box-shadow: 0 0 0 1px rgba(60, 70, 90, .8), 0 0 3px rgba(255, 255, 255, .5);
  animation: sk-diamant 4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s);
}
.sk-diamants i:nth-child(1) { left: 0; top: 0; } .sk-diamants i:nth-child(2) { left: 50%; top: 0; } .sk-diamants i:nth-child(3) { left: 100%; top: 0; } .sk-diamants i:nth-child(4) { left: 100%; top: 50%; }
.sk-diamants i:nth-child(5) { left: 100%; top: 100%; } .sk-diamants i:nth-child(6) { left: 50%; top: 100%; } .sk-diamants i:nth-child(7) { left: 0; top: 100%; } .sk-diamants i:nth-child(8) { left: 0; top: 50%; }
@keyframes sk-diamant {
  0%, 76%, 100% { scale: 1; box-shadow: 0 0 0 1px rgba(60, 70, 90, .8), 0 0 3px rgba(255, 255, 255, .5); }
  86% { scale: 1.55; box-shadow: 0 0 0 1px #FFFFFF, 0 0 8px #FFFFFF, 0 0 16px rgba(200, 225, 255, .9); }
}
.fig-petit .sk-resille { inset: -4px; padding: 2px; }
.fig-petit .sk-diamants { inset: -3px; }
.fig-petit .sk-diamants i:nth-child(2n) { display: none; }

/* Couronne d'Ysé (légendaire) : la couronne de cristal flotte au-dessus du portrait ; ses pointes scintillent */
.fig[data-cadre="cadre-couronne-yse"] { --fig-lisere: #F4FAFF; --fig-filet: rgba(200, 225, 255, .55); --fig-lumiere: rgba(220, 238, 255, .4); }
.fig[data-cadre="cadre-couronne-yse"] .fig-cadre { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #182030, 0 0 0 5px #E3B550, 0 0 0 6px #A8C8EC, 0 0 26px rgba(190, 220, 255, .5), 0 12px 26px -8px rgba(0, 0, 0, .85); }
.fig[data-cadre="cadre-couronne-yse"] .sk-cadre { z-index: auto; }
.fig[data-cadre="cadre-couronne-yse"] .sk-nimbe { background: radial-gradient(closest-side, rgba(215, 235, 255, .6), rgba(170, 200, 250, .22) 55%, transparent 100%); }
.fig[data-cadre="cadre-couronne-yse"] .sk-rayons { background: repeating-conic-gradient(from 0deg, rgba(220, 236, 255, 0) 0 6deg, rgba(220, 236, 255, .34) 6deg 9deg); }
.sk-couronne-yse {
  position: absolute; left: 50%; top: 0; z-index: 4; width: 48%; height: auto; overflow: visible;
  transform: translate(-50%, -64%); filter: drop-shadow(0 0 6px rgba(200, 230, 255, .85)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  animation: sk-flotte-yse 3.8s ease-in-out infinite;
}
@keyframes sk-flotte-yse { 0%, 100% { transform: translate(-50%, -64%); } 50% { transform: translate(-50%, -72%); } }
.sk-cyse-pointes path { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sk-pointe 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
@keyframes sk-pointe { 0%, 66%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* Le Reliquaire d'Ysé (mythique) : une cage de cristal noir tourne autour du portrait ; le feu prismatique court sur l'anneau */
.fig[data-cadre="cadre-reliquaire-yse"] { --fig-lisere: #FFFFFF; --fig-filet: rgba(255, 140, 160, .5); --fig-lumiere: rgba(255, 220, 240, .3); }
.fig[data-cadre="cadre-reliquaire-yse"] .fig-cadre {
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #07040C, 0 0 0 4.5px #FF5A6A, 0 0 0 6px #07040C, 0 0 22px rgba(255, 90, 106, .42), 0 0 36px rgba(155, 107, 255, .35), 0 12px 26px -8px rgba(0, 0, 0, .9);
}
.sk-feu-prisme {
  position: absolute; inset: -8px; padding: 2.5px; border-radius: 5px; overflow: hidden; z-index: 1; pointer-events: none;
  -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);
}
.sk-feu-prisme::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, #FF4D6D, #FFB547, #FFF35C, #5CF0A0, #4FD8FF, #9B6BFF, #FF4D6D);
  animation: sk-tourne 4.5s linear infinite;
}
.sk-reliq-yse { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; transform-style: preserve-3d; animation: sk-reliq-tourne 16s linear infinite; pointer-events: none; }
@keyframes sk-reliq-tourne { from { transform: perspective(520px) rotateX(-7deg) rotateY(0deg); } to { transform: perspective(520px) rotateX(-7deg) rotateY(360deg); } }
.sk-reliq-yse i {
  --l: calc(var(--fig-w, 72px) * 1.12); --p: calc(var(--fig-w, 72px) * .4);
  position: absolute; left: 0; top: 0; height: calc(var(--fig-h, 96px) * 1.08); width: var(--l); margin: calc(var(--fig-h, 96px) * -.54) 0 0 calc(var(--l) / -2);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px;
  background: linear-gradient(115deg, rgba(40, 24, 60, .06), rgba(255, 255, 255, .14) 44%, rgba(255, 140, 170, .1) 48%, rgba(120, 220, 255, .1) 52%, rgba(40, 24, 60, .06) 60%);
  box-shadow: inset 0 0 0 1px rgba(10, 4, 20, .5), 0 0 6px rgba(255, 90, 106, .35);
  transform: rotateY(calc(var(--k) * 90deg)) translateZ(calc(var(--p) / 2));
}
.sk-reliq-yse i:nth-child(2n) { width: var(--p); margin-left: calc(var(--p) / -2); transform: rotateY(calc(var(--k) * 90deg)) translateZ(calc(var(--l) / 2)); border-color: rgba(155, 107, 255, .55); }
.sk-pignon--jais { filter: drop-shadow(0 0 5px rgba(255, 90, 106, .75)) drop-shadow(0 0 10px rgba(155, 107, 255, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.sk-coeur-prisme { animation: sk-coeur-prisme 4s linear infinite; }
@keyframes sk-coeur-prisme { 0%, 100% { fill: #FF4D6D; } 20% { fill: #FFB547; } 40% { fill: #5CF0A0; } 60% { fill: #4FD8FF; } 80% { fill: #9B6BFF; } }
.sk-eclats-prisme { position: absolute; inset: 0; z-index: 4; }
.sk-eclats-prisme i {
  --c: #FF4D6D; position: absolute; width: calc(var(--fig-w, 72px) * .09); height: calc(var(--fig-w, 72px) * .16); translate: -50% -50%;
  background: linear-gradient(160deg, #FFFFFF, var(--c) 45%, #08040E); clip-path: polygon(50% 0, 100% 38%, 64% 100%, 18% 82%, 0 30%);
  opacity: .9; animation: sk-eclat-flotte 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.68s);
}
.sk-eclats-prisme i:nth-child(1) { left: -8%; top: 18%; } .sk-eclats-prisme i:nth-child(2) { left: 108%; top: 30%; --c: #FFB547; } .sk-eclats-prisme i:nth-child(3) { left: -10%; top: 58%; --c: #5CF0A0; }
.sk-eclats-prisme i:nth-child(4) { left: 110%; top: 70%; --c: #4FD8FF; } .sk-eclats-prisme i:nth-child(5) { left: 8%; top: 102%; --c: #9B6BFF; } .sk-eclats-prisme i:nth-child(6) { left: 92%; top: 104%; --c: #FF4D6D; }
.sk-eclats-prisme i:nth-child(7) { left: -6%; top: 88%; --c: #FFF35C; } .sk-eclats-prisme i:nth-child(8) { left: 106%; top: 6%; --c: #9B6BFF; }
@keyframes sk-eclat-flotte { 0%, 100% { transform: translateY(0) rotate(-14deg); opacity: .55; } 50% { transform: translateY(calc(var(--fig-w, 72px) * -.1)) rotate(16deg); opacity: 1; } }
.fig-petit .sk-reliq-yse, .fig-petit .sk-eclats-prisme { display: none; }
.fig-petit .sk-feu-prisme { inset: -5px; padding: 1.5px; }

.ecran:not(:has(.choix-actif)) .fig-zone:has(.fig .sk-couronne-yse) { padding-top: 52px; }

/* ——— Bannières ——— */
/* Les Vitraux du chœur : les rais pulsent, un nuage passe devant le soleil et les saints s'assombrissent */
.sk-ban .bn-rais-choeur { animation: bn-pulse 5s ease-in-out infinite; }
.sk-ban .bn-nuage { animation: bn-nuage 13s linear infinite; }
@keyframes bn-nuage { from { transform: translateX(0); } to { transform: translateX(190px); } }
/* La Verrière d'Aubemont : la lune passe de vitre en vitre, les étoiles battent */
.sk-ban .bn-lune { animation: bn-lune 34s ease-in-out infinite alternate; }
@keyframes bn-lune { 0% { transform: translate(-34px, 8px); } 50% { transform: translate(0, -2px); } 100% { transform: translate(34px, 8px); } }
.sk-ban .bn-etoiles-verr circle, .sk-ban .bn-etoiles-yse circle { animation: bn-pulse 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.41s); }
.sk-ban .bn-rais-lune { animation: bn-pulse 6s ease-in-out infinite; }
/* Le Ciel d'Ysé : les voiles de l'aurore ondulent, une étoile file parfois, des fenêtres s'allument */
.sk-ban .bn-aurore { transform-box: view-box; transform-origin: 60px 30px; animation: bn-aurore 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
@keyframes bn-aurore { 0%, 100% { transform: translateX(-6px) scaleY(1); opacity: .4; } 50% { transform: translateX(6px) scaleY(1.18); opacity: .78; } }
.sk-ban .bn-filante { opacity: 0; animation: bn-filante 8s ease-in infinite; }
@keyframes bn-filante { 0%, 76% { opacity: 0; transform: translate(12px, 6px) rotate(18deg); } 79% { opacity: 1; } 90%, 100% { opacity: 0; transform: translate(80px, 30px) rotate(18deg); } }
.sk-ban .bn-fenetres rect { animation: bn-pulse 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
/* Mythique : un lustre prismatique passe sur l'étoffe */
.sk-ban[data-rang="mythique"]::after {
  z-index: 2; background: linear-gradient(105deg, transparent 36%, rgba(255, 77, 109, .2) 42%, rgba(255, 243, 92, .2) 46%, rgba(92, 240, 160, .2) 50%, rgba(79, 216, 255, .2) 54%, rgba(155, 107, 255, .22) 58%, transparent 64%) 0 0 / 300% 100% no-repeat;
  animation: sk-balaye 7s ease-in-out infinite;
}

/* ——— Le grand éclat d'une relique mythique : le noir de jais tombe, puis le spectre entier tourne ——— */
.fx-plein--mythique { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .95), rgba(255, 220, 235, .55) 12%, rgba(30, 12, 44, .75) 42%, rgba(4, 2, 8, .9) 80%); animation: fx-lumiere-legende var(--fx-d) cubic-bezier(.1, .7, .3, 1) both; }
.fx-plein--mythique::before {
  content: ""; position: absolute; left: var(--x); top: var(--y); width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, #FF4D6D 0 3deg, transparent 3deg 9deg, #FFB547 9deg 12deg, transparent 12deg 18deg, #5CF0A0 18deg 21deg, transparent 21deg 27deg, #4FD8FF 27deg 30deg, transparent 30deg 36deg, #9B6BFF 36deg 39deg, transparent 39deg 45deg);
  -webkit-mask: radial-gradient(closest-side, #000 4%, transparent 55%); mask: radial-gradient(closest-side, #000 4%, transparent 55%);
  opacity: .7; animation: fx-rayons-legende var(--fx-d) linear both;
}
.fx-plein--jais { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .5), rgba(255, 90, 106, .22) 26%, rgba(6, 3, 10, .6) 75%); }

@media (prefers-reduced-motion: reduce) {
  [data-des="des-ambre"] .de6::before, [data-des="des-ambre"] .de6::after, [data-des="des-saphir-etoile"] .de6::before, [data-des="des-saphir-etoile"] .de6 i.p,
  [data-des="des-eclats-serment"] .de6::before, [data-des="des-eclats-serment"] .de6::after, [data-des="des-eclats-serment"] .de6 i.p,
  .sk-diamants i, .sk-couronne-yse, .sk-cyse-pointes path, .sk-feu-prisme::before, .sk-reliq-yse, .sk-coeur-prisme, .sk-eclats-prisme i, .sk-ban[data-rang="mythique"]::after { animation: none !important; }
  .sk-cyse-pointes path { opacity: .8; }
}
:root[data-anim-reduite="1"] :is([data-des="des-saphir-etoile"], [data-des="des-eclats-serment"]) .de6 i.p, :root[data-anim-reduite="1"] :is(.sk-diamants i, .sk-eclats-prisme i) { animation: none; }

/* Saphir étoilé : l'astérisme s'ouvre sur l'écran, tourne à peine, s'efface */
.fx-plein--saphir svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-asterisme { animation: fx-asterisme var(--fx-d) cubic-bezier(.2, .8, .3, 1) both; }
.fx-asterisme path { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px #DCE4F4) drop-shadow(0 0 12px #6A8CFF); }
@keyframes fx-asterisme { 0% { transform: scale(0) rotate(-8deg); opacity: 0; } 18% { transform: scale(1) rotate(0deg); opacity: 1; } 70% { opacity: .85; } 100% { transform: scale(1.06) rotate(6deg); opacity: 0; } }