/* ═══════════════════════════════════════════════════════════════════
   COSMETICS V2 — GÉNÉRÉ par tools/cosmetics_v2.py · NE PAS ÉDITER
   ═══════════════════════════════════════════════════════════════════
   Chargé après style.css (includes/header.php). Trois choses ici :
     1. le correctif du tableau de bord (l'avatar du dashboard n'était
        hôte d'AUCUN effet — voir le bloc DASHBOARD plus bas) ;
     2. quatre cadres et quatre effets neufs, rangs common → super_rare ;
     3. deux thèmes et trois titres neufs.
   Régénérer : python3 tools/cosmetics_v2.py
   Vérifier  : python3 tools/cosmetics_audit.py                        */

/* ── DASHBOARD · l'hôte manquant ────────────────────────────────────
   Cause du défaut « je vois les ailes de phénix partout SAUF sur mon
   tableau de bord » : toutes les règles d'effet de style.css listent
   `.sidebar-avatar`, `.post-avatar`, `.user-avatar`, `.sg-avatar` — et
   jamais `.dash-hero-avatar`. Les CADRES, eux, le listent : d'où une
   page où la jante s'affiche et l'aura non.
   Le correctif n'est PAS d'ajouter un cinquième sélecteur à trente
   listes (le prochain effet l'oublierait) : `users/dashboard.php` pose
   désormais `user-avatar` sur son avatar, donc tout effet écrit ou à
   écrire l'atteint par construction. Restaient deux conséquences, que
   voici, parce qu'elles sont propres au dashboard :                   */

/*  a) l'anneau arc-en-ciel maison vivait sur `::before` ET `::after` de
       l'avatar — les deux canaux vendus. Il déménage sur un vrai enfant
       `<i class="dash-ring">` posé par le PHP, et seulement quand aucun
       cadre n'est équipé. */
.dash-hero-avatar > .dash-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #7dd3fc, #a78bfa, #f472b6, #7dd3fc);
    z-index: -1;
    pointer-events: none;
}
.dash-hero-avatar > .dash-ring::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--bg-primary);
}

/*  b) `.dash-hero-card` était en `overflow:hidden` : l'avatar est collé
       au bord gauche, donc une aile à 250 % était COUPÉE net — le
       symptôme aurait survécu au correctif (a). La carte s'ouvre, et le
       filet lumineux du haut se ré-arrondit lui-même pour ne pas
       dépasser des coins. Ouverte SEULEMENT quand un effet est équipé
       (`dash-fx-open`, posé par le PHP) : une carte qui ne déborde de
       rien n'a aucune raison de changer de découpe pour tout le monde. */
.dash-hero-card.dash-fx-open { overflow: visible; }
.dash-hero-card.dash-fx-open::before { border-radius: 16px 16px 0 0; }

/* ═══ CADRES — canal `::before`, langue : la rotation ═══════════════ */
.frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) {
    position: relative;
    border: none;
    border-radius: 50%;
    overflow: visible;
}

.frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 0;
    pointer-events: none;
    animation: frameRim var(--fr-dur, 12s) linear infinite;
}

.frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > * {
    position: relative;
    z-index: 2;
}

/* COMMON — L'ENCRE. Le rang le moins cher n'a qu'UNE couche et AUCUNE
   lueur : c'est ce qui doit se voir le moins.

   ⚠ PREMIÈRE VERSION REFAITE APRÈS L'AVOIR REGARDÉE. Elle était peinte en
   encre SOMBRE (#16202c → #3a5069), ce qui est juste sur du papier et faux
   ici : le site est sombre, le cadre disparaissait dans le fond. « Moins
   d'effet » ne veut pas dire « invisible » — le rang common doit se voir,
   simplement sans lueur ni seconde couche.
   Le trait est donc CLAIR, et ce qui le distingue de l'argent (le seul
   autre cadre neutre) tient en deux choses qu'un métal n'a pas : les
   valeurs sont mates, et il y a une LEVÉE DE PINCEAU — un secteur où le
   trait tombe à 12 % d'opacité, comme un pinceau qui a manqué d'encre. */
.frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before {
    --fr-dur: 15s;
    background: conic-gradient(from var(--fr-a),
        #5b7a9d 0%, #c7dcf0 9%, #3f5570 19%, #9db4cb 29%,
        rgba(157, 180, 203, .12) 37%, rgba(199, 220, 240, .38) 44%,
        #6f8aa8 54%, #dbe9f6 65%, #37485e 76%, #a9bed2 88%, #5b7a9d 100%) border-box;
}

/* UNCOMMON — LA VIGNE. Deux couches : la tresse (alternance dure de
   trois verts, c'est elle qui fait le tressage) et deux bourgeons posés
   sur la jante. Une seule lueur, courte. */
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before {
    --fr-dur: 18s;
    /* ⚠ La tresse est RÉÉCRITE après l'avoir regardée : trois verts voisins
       (#14532d / #3f6212 / #166534) se moyennent à l'œil et ne donnaient
       qu'un anneau vert uni. Ce qui fait une tresse, c'est l'écart de
       VALEUR entre les brins, pas leur nombre — un brin clair franc tous
       les 18°, et le tressage apparaît. */
    background:
        radial-gradient(circle at 50% 0%, #fbcfe8 0 6%, transparent 7%) border-box,
        radial-gradient(circle at 88% 76%, #f9a8d4 0 4.5%, transparent 5.5%) border-box,
        repeating-conic-gradient(from var(--fr-a),
            #14532d 0deg 5deg, #4d7c0f 5deg 9deg,
            #86efac 9deg 12deg, #166534 12deg 18deg) border-box;
    filter: drop-shadow(0 0 2px rgba(74, 222, 128, .3));
}

/* RARE — L'HORLOGERIE. La denture est en arrêts DURS : c'est une
   grammaire de jante qu'aucun autre cadre n'emploie (l'argent est lisse,
   l'or est gravé, l'encre est irrégulière). Deux couches + double lueur. */
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before {
    --fr-dur: 22s;
    background:
        repeating-conic-gradient(from var(--fr-a),
            #d97706 0deg 4deg, #7c2d12 4deg 6deg,
            #f59e0b 6deg 8deg, #92400e 8deg 12deg) border-box,
        conic-gradient(from var(--fr-a), #78350f, #b45309 50%, #78350f) border-box;
    filter: drop-shadow(0 0 2px rgba(217, 119, 6, .45))
            drop-shadow(0 0 6px rgba(180, 83, 9, .22));
}

/* SUPER RARE — LA MARÉE. Le rang le plus cher du catalogue : trois
   couches (la crête, le creux, l'écume) et la lueur la plus large. Il
   reste QUATRE rangs au-dessus, vides — la place est gardée. */
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before {
    --fr-dur: 13s;
    background:
        radial-gradient(circle at 26% 8%, rgba(240, 253, 250, .95) 0 3%, transparent 4%) border-box,
        conic-gradient(from calc(var(--fr-a) * -1.6),
            transparent 0%, rgba(165, 243, 252, .5) 8%, transparent 18%,
            transparent 60%, rgba(153, 246, 228, .35) 68%, transparent 78%) border-box,
        conic-gradient(from var(--fr-a),
            #042f2e 0%, #0d9488 11%, #5eead4 19%, #a5f3fc 23%, #0e7490 33%,
            #042f2e 47%, #0f766e 59%, #67e8f9 67%, #155e75 75%, #042f2e 100%) border-box;
    filter: drop-shadow(0 0 4px rgba(45, 212, 191, .5))
            drop-shadow(0 0 11px rgba(6, 182, 212, .25));
}

/* ═══ EFFETS — canal `::after`, langue : le battement ═══════════════
   La BOÎTE grandit avec le rang (150 % → 200 % du disque) : l'article
   bon marché occupe moins d'espace autour de la figure, littéralement.
   Tous passent DERRIÈRE le contenu de l'avatar — une aura qui couvre la
   figure du joueur n'est pas une parure. */
.effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar),
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) {
    position: relative;
    overflow: visible;
}

.effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > *,
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar) > * {
    position: relative;
    z-index: 1;
}

/* COMMON — LA PLUIE DE BRAISES. Six braises, aucune image, aucune
   couche d'ambiance : six dégradés radiaux et une lueur de 2 px. */
.effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    width: 150%;
    background-image:
        radial-gradient(circle at 24% 74%, rgba(251, 146, 60, .95) 0 1.5%, transparent 2.2%),
        radial-gradient(circle at 76% 68%, rgba(253, 186, 116, .85) 0 1.2%, transparent 1.8%),
        radial-gradient(circle at 41% 88%, rgba(249, 115, 22, .9) 0 1.7%, transparent 2.4%),
        radial-gradient(circle at 63% 92%, rgba(254, 215, 170, .7) 0 1%, transparent 1.6%),
        radial-gradient(circle at 15% 55%, rgba(251, 146, 60, .6) 0 1.1%, transparent 1.7%),
        radial-gradient(circle at 87% 47%, rgba(249, 115, 22, .55) 0 1.3%, transparent 1.9%);
    filter: drop-shadow(0 0 2px rgba(249, 115, 22, .55));
    opacity: .92;
    animation: emberBeat 4.4s ease-in-out infinite;
}

/* UNCOMMON — LA CHUTE DE PÉTALES. Un vrai dessin (six pétales orientés
   différemment), une lueur courte. */
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    width: 165%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id=%27pg%27%20x1=%270%27%20y1=%270%27%20x2=%27.4%27%20y2=%271%27%3E%20%3Cstop%20offset=%270%27%20stop-color=%27%23fde7f3%27/%3E%3Cstop%20offset=%27.55%27%20stop-color=%27%23f9a8d4%27/%3E%20%3Cstop%20offset=%271%27%20stop-color=%27%23db2777%27/%3E%20%3C/linearGradient%3E%20%3Cpath%20id=%27pt%27%20d=%27M0%200%20C5.4%201.2%208.6%205%208.2%209.4%20C7.8%2013.6%204.4%2016%200%2016.4%20C-2.6%2013%20-3.4%208.4%20-2.2%204.6%20C-1.6%202.6%20-.9%201.1%200%200%20Z%27%20fill=%27url(%23pg)%27/%3E%20%3C/defs%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(20%2016)%20rotate(-24)%20scale(.92)%27%20opacity=%27.92%27/%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(74%2012)%20rotate(38)%20scale(.7)%27%20opacity=%27.78%27/%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(88%2044)%20rotate(96)%20scale(.86)%27%20opacity=%27.88%27/%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(69%2082)%20rotate(152)%20scale(.64)%27%20opacity=%27.72%27/%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(28%2088)%20rotate(196)%20scale(.9)%27%20opacity=%27.9%27/%3E%20%3Cuse%20href=%27%23pt%27%20transform=%27translate(8%2052)%20rotate(268)%20scale(.74)%27%20opacity=%27.8%27/%3E%20%3C/svg%3E");
    filter: drop-shadow(0 0 3px rgba(244, 114, 182, .4));
    opacity: .9;
    animation: petalBeat 5.2s ease-in-out infinite;
}

/* RARE — L'APPEL D'ORAGE. Trois arcs brisés qui épousent la jante,
   double lueur. */
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    width: 180%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id=%27sg%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%20%3Cstop%20offset=%270%27%20stop-color=%27%23e0f2fe%27/%3E%3Cstop%20offset=%27.5%27%20stop-color=%27%2338bdf8%27/%3E%20%3Cstop%20offset=%271%27%20stop-color=%27%234338ca%27/%3E%20%3C/linearGradient%3E%20%3Cg%20id=%27arc%27%20fill=%27none%27%20stroke=%27url(%23sg)%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%20%3Cpath%20d=%27M40.5%2020.7%20L47.4%2012.3%20L55.5%2018.7%20L65.8%2014.6%20L70.2%2024.2%27%20stroke-width=%272.3%27/%3E%20%3Cpath%20d=%27M53.5%2016.4%20L69.1%2014.0%27%20stroke-width=%271.3%27%20opacity=%27.75%27/%3E%20%3Cpath%20d=%27M66.8%2023.1%20L77.7%2025.1%27%20stroke-width=%271.1%27%20opacity=%27.6%27/%3E%20%3C/g%3E%20%3C/defs%3E%20%3Cuse%20href=%27%23arc%27/%3E%20%3Cuse%20href=%27%23arc%27%20transform=%27rotate(122%2050%2050)%27%20opacity=%27.82%27/%3E%20%3Cuse%20href=%27%23arc%27%20transform=%27rotate(241%2050%2050)%27%20opacity=%27.64%27/%3E%20%3C/svg%3E");
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, .6))
            drop-shadow(0 0 9px rgba(67, 56, 202, .3));
    opacity: .93;
    animation: stormBeat 3.6s ease-in-out infinite;
}

/* SUPER RARE — LA CONSTELLATION. Sept étoiles RELIÉES (le tracé est la
   troisième couche) et la lueur la plus large du lot. Haut du catalogue,
   et volontairement sous ce qu'un rang epic pourra faire. */
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    width: 200%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%20%3Cdefs%3E%20%3CradialGradient%20id=%27cg%27%3E%20%3Cstop%20offset=%270%27%20stop-color=%27%23fffbeb%27/%3E%3Cstop%20offset=%27.45%27%20stop-color=%27%23fde68a%27/%3E%20%3Cstop%20offset=%271%27%20stop-color=%27%23f59e0b%27%20stop-opacity=%27.15%27/%3E%20%3C/radialGradient%3E%20%3Cpath%20id=%27st%27%20d=%27M0%20-6%20L1.5%20-1.7%20L6%200%20L1.5%201.7%20L0%206%20L-1.5%201.7%20L-6%200%20L-1.5%20-1.7%20Z%27%20fill=%27url(%23cg)%27/%3E%20%3C/defs%3E%20%3Cg%20fill=%27none%27%20stroke=%27%23fde68a%27%20stroke-width=%27.7%27%20opacity=%27.42%27%3E%20%3Cpath%20d=%27M50%208%20L79%2022%20L91%2053%20L72%2082%20L38%2089%20L12%2068%20L11%2033%20Z%27/%3E%20%3C/g%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(50%208)%20scale(1.15)%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(79%2022)%20scale(.72)%20rotate(18)%27%20opacity=%27.86%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(91%2053)%20scale(.95)%20rotate(-12)%27%20opacity=%27.94%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(72%2082)%20scale(.62)%20rotate(24)%27%20opacity=%27.78%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(38%2089)%20scale(1.02)%20rotate(-8)%27%20opacity=%27.9%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(12%2068)%20scale(.68)%20rotate(14)%27%20opacity=%27.8%27/%3E%20%3Cuse%20href=%27%23st%27%20transform=%27translate(11%2033)%20scale(.88)%20rotate(-20)%27%20opacity=%27.88%27/%3E%20%3C/svg%3E");
    filter: drop-shadow(0 0 3px rgba(253, 230, 138, .6))
            drop-shadow(0 0 12px rgba(245, 158, 11, .28));
    opacity: .95;
    animation: starBeat 6s ease-in-out infinite;
}

/* Le battement — la langue des effets. La POSE (`translate(-50%,-50%)`)
   est dans la règle de base ET répétée ici : sans ça, un effet gelé part
   en bas à droite de l'avatar, le défaut déjà payé sur l'aile de phénix. */
@keyframes emberBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .86; }
    50%      { transform: translate(-50%, -50%) scale(1.035); opacity: .96; }
}
@keyframes petalBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .84; }
    50%      { transform: translate(-50%, -50%) scale(1.045); opacity: .95; }
}
@keyframes stormBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .72; }
    18%      { transform: translate(-50%, -50%) scale(1.02);  opacity: 1;   }
    26%      { transform: translate(-50%, -50%) scale(1);     opacity: .78; }
    34%      { transform: translate(-50%, -50%) scale(1.03);  opacity: .98; }
    50%      { transform: translate(-50%, -50%) scale(1);     opacity: .74; }
}
@keyframes starBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .88; }
    50%      { transform: translate(-50%, -50%) scale(1.05);  opacity: 1;   }
}

/* ── L'AVATAR EST IMMOBILE (suite) ──────────────────────────────────
   Phil, 05.09.2026 : « pls the avatar dont make a animation for now ».
   Le robinet de style.css est une LISTE de sélecteurs : les classes
   écrites aujourd'hui n'y sont pas, elles tourneraient donc pendant que
   les anciennes sont figées. Elles rejoignent le robinet ici. Pour tout
   rallumer un jour : supprimer ce bloc ET celui de style.css.          */
.frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .frame-ink :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-vine :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-clockwork :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
.frame-tide :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::before,
    .effect-emberfall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-petals :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-stormcall :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after,
.effect-constellation :is(.sidebar-avatar,.post-avatar,.dash-hero-avatar,.user-avatar,.sg-avatar)::after {
        animation: none !important;
    }
}

/* ═══ THÈMES — canal : le FOND de la carte, langue : la dérive ══════ */

/* COMMON — PARCHEMIN. Le seul thème CLAIR du catalogue : les six encres
   et les deux rares sont tous sombres, et Phil garde deux thèmes de site.
   Il ne dérive pas (rang common = une couche immobile). */
.theme-parchment {
    background: linear-gradient(135deg,
        rgba(214, 200, 168, 0.16) 0%, rgba(180, 160, 120, 0.07) 100%) !important;
    border-color: rgba(184, 168, 132, 0.30) !important;
    box-shadow: inset 0 0 30px rgba(214, 200, 168, 0.08), 0 0 18px rgba(184, 168, 132, 0.10);
}

/* RARE — LE PORT AU CRÉPUSCULE. Une bande d'horizon en plus du fond, et
   la dérive lente qui appartient aux thèmes. */
.theme-dusk {
    background:
        linear-gradient(to bottom, transparent 46%, rgba(56, 189, 248, 0.10) 52%, transparent 58%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(12, 74, 110, 0.55), rgba(30, 41, 59, 0.88)) !important;
    background-size: 100% 100%, 220% 220% !important;
    animation: duskDrift 11s ease infinite;
    border-color: rgba(56, 189, 248, 0.26) !important;
    box-shadow: inset 0 0 40px rgba(14, 116, 144, 0.12), 0 0 26px rgba(2, 132, 199, 0.14);
}
@keyframes duskDrift {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50%      { background-position: 0 0, 100% 50%; }
}

/* ═══ TITRES — canal : le badge sous le pseudo, langue : le balayage ═ */
.title-archivist {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.title-cartographer {
    background: rgba(20, 184, 166, 0.12);
    color: #5eead4;
    border: 1px solid rgba(20, 184, 166, 0.22);
}
.title-inkbinder {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(51, 65, 85, 0.35));
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.28);
}
.title-cartographer::after { background: linear-gradient(105deg, transparent 40%, rgba(153,246,228,.34) 50%, transparent 60%); }
.title-inkbinder::after    { background: linear-gradient(105deg, transparent 38%, rgba(191,219,254,.46) 50%, transparent 62%); }

/* ═══ INVENTAIRE — le filet de gauche, comme les articles d'origine ═ */
.inventory-card.frame-ink            { border-left: 3px solid rgba(51, 71, 95, 0.6); }
.inventory-card.frame-vine           { border-left: 3px solid rgba(74, 222, 128, 0.5); }
.inventory-card.frame-clockwork      { border-left: 3px solid rgba(217, 119, 6, 0.55); }
.inventory-card.frame-tide           { border-left: 3px solid rgba(45, 212, 191, 0.55); }
.inventory-card.effect-emberfall     { border-left: 3px solid rgba(249, 115, 22, 0.5); }
.inventory-card.effect-petals        { border-left: 3px solid rgba(244, 114, 182, 0.5); }
.inventory-card.effect-stormcall     { border-left: 3px solid rgba(56, 189, 248, 0.55); }
.inventory-card.effect-constellation { border-left: 3px solid rgba(253, 230, 138, 0.55); }
.inventory-card.theme-parchment      { border-left: 3px solid rgba(214, 200, 168, 0.5); }
.inventory-card.theme-dusk           { border-left: 3px solid rgba(56, 189, 248, 0.5); }
.inventory-card.title-archivist      { border-left: 3px solid rgba(148, 163, 184, 0.45); }
.inventory-card.title-cartographer   { border-left: 3px solid rgba(20, 184, 166, 0.45); }
.inventory-card.title-inkbinder      { border-left: 3px solid rgba(96, 165, 250, 0.45); }

/* ═══ VITRINE — la teinte d'alcôve, une par article ════════════════ */
.shop-card[data-fx="frame-ink"]            { --fx-rgb: 100,116,139; }
.shop-card[data-fx="frame-vine"]           { --fx-rgb: 74,222,128;  }
.shop-card[data-fx="frame-clockwork"]      { --fx-rgb: 217,119,6;   }
.shop-card[data-fx="frame-tide"]           { --fx-rgb: 45,212,191;  }
.shop-card[data-fx="effect-emberfall"]     { --fx-rgb: 249,115,22;  }
.shop-card[data-fx="effect-petals"]        { --fx-rgb: 244,114,182; }
.shop-card[data-fx="effect-stormcall"]     { --fx-rgb: 56,189,248;  }
.shop-card[data-fx="effect-constellation"] { --fx-rgb: 253,230,138; }
.shop-card[data-fx="theme-parchment"]      { --fx-rgb: 214,200,168; }
.shop-card[data-fx="theme-dusk"]           { --fx-rgb: 56,189,248;  }
.shop-card[data-fx="title-archivist"]      { --fx-rgb: 148,163,184; }
.shop-card[data-fx="title-cartographer"]   { --fx-rgb: 20,184,166;  }
.shop-card[data-fx="title-inkbinder"]      { --fx-rgb: 96,165,250;  }