/* ───────────────────────────────────────────────────────────────────────────── FICHIER GENERE — NE PAS EDITER A LA MAIN. Source : IslandGamingOtaku-Website-OVH/waifucatch/css/style.css Regenerer : node Deploiement/generer-holo-dex.js Toute retouche ici sera ecrasee, et `verifier-tout.js` la signalera avant. ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ VERNIS HOLOGRAPHIQUE DES CARTES DE LA VITRINE — ajouté le 2026-08-19 ────────────────────────────────────────────────────────────────────────────── Demande : « intègre les animations holographiques, attention pas toutes les cartes en auront ». QUI EN A, ET POURQUOI CE DÉCOUPAGE ⚠️ CE PARAGRAPHE A ÉTÉ REMIS DROIT LE 2026-08-31 : il annonçait « seules les QUATRE raretés hautes » et « commune, rare et épique restent mates ». Les deux phrases étaient fausses, et de deux façons différentes — mesuré, pas supposé : · SUR CETTE PAGE (la vitrine), les SEPT cartes du carrousel portent les mêmes classes EN DUR dans `index.html` : `mf-arcenciel mp-papillons mc-metal`. La commune brille donc autant que la céleste. C'est VOULU — le carrousel est une démonstration du vernis, pas un échantillon du jeu — mais ce n'est pas ce que le texte disait. · DANS LE JEU (WaifuDex et éditeur WCM), le découpage ne vient plus d'ici : il vient de `/global-settings/holoPresets`, réglable rareté par rareté dans WCM › Configuration › Holographie. Les valeurs livrées allument CINQ raretés — épique, légendaire, mythique, divine, céleste — et laissent commune et rare mates. Épique n'a jamais été mate, contrairement à ce qui était écrit ici. L'INTENTION, elle, tient toujours, et elle vient de l'administrateur (2026-08-19, « attention pas toutes les cartes en auront ») : le LISEZMOI de `Assets/holographie` posait la question — « quel motif pour quelle rareté ; une commune doit rester sobre, sinon plus rien ne distingue une céleste ». C'est le contraste qui fait l'effet. Mais le CHIFFRE de ce découpage se règle désormais dans WCM : il ne se lit plus dans ce fichier, et le recopier ici le ferait périmer au premier réglage. LA RÈGLE DU MOTIF, REPRISE DU BANC D'ESSAI « Le motif est imprimé sur la carte : il ne bouge jamais. C'est la lumière qui se déplace dessus. » Le dégradé de trames est donc FIXE (`background-position` inchangé) ; seul le masque `--lx` bouge. Une version où le motif glissait avait été rejetée : « sur une vraie carte, l'encre est imprimée ». POURQUOI DU CSS PUR, SANS JAVASCRIPT 17 cartes concernées sur 28, déjà animées (elles flottent). Une boucle `requestAnimationFrame` par carte coûterait cher pour rien : une animation CSS est composée par le GPU et s'arrête d'elle-même hors écran. La page est à 18 requêtes / 1 047 Ko, on ne la charge pas d'un script pour un reflet. ⚠️ `::before` ET NON `::after` — VÉRIFIÉ, PAS SUPPOSÉ `.ig-card-art::after` est DÉJÀ pris par le dégradé de la carte, via une règle plus spécifique (`.hero-cards-bg .ig-spawn-card:not(.ig-mystery) .ig-card-art::after`, soit 4 classes contre 2). Ma première version l'écrasait — et perdait : le vernis ne s'affichait sur AUCUNE carte, en silence. `::before` est libre sur cet élément. Ne pas "simplifier" en revenant à `::after`. OÙ IL SE POSE Sur `.ig-card-art::before` : au-dessus de l'illustration, SOUS le texte et les stats (qui sont en z-index supérieur) — donc le vernis ne rend jamais un chiffre illisible. Il hérite du rognage de `.ig-card-art` (overflow + rayon), donc il ne déborde pas des coins arrondis. ══════════════════════════════════════════════════════════════════════════════ */ .rarity-legendary .ig-card-art::before, .rarity-mythic .ig-card-art::before, .rarity-divine .ig-card-art::before, .rarity-celestial .ig-card-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* L'ENCRE — imprimée, fixe. Trames fines en diagonale, teintées par rareté. */ background: repeating-linear-gradient( 115deg, var(--holo-a) 0px, var(--holo-b) 9px, var(--holo-c) 18px, var(--holo-b) 27px, var(--holo-a) 36px); mix-blend-mode: color-dodge; opacity: var(--holo-force, .5); /* LA LUMIÈRE — une bande claire qui traverse. C'est le SEUL élément mobile. */ -webkit-mask-image: linear-gradient(102deg, transparent 34%, #000 47%, #000 53%, transparent 66%); mask-image: linear-gradient(102deg, transparent 34%, #000 47%, #000 53%, transparent 66%); -webkit-mask-size: 260% 260%; mask-size: 260% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: igHoloSweep 7s linear infinite; } /* Le balayage : la POSITION DU MASQUE change, jamais celle du fond. */ @keyframes igHoloSweep { 0% { -webkit-mask-position: 120% 0%; mask-position: 120% 0%; } 100% { -webkit-mask-position: -20% 100%; mask-position: -20% 100%; } } /* Teintes et intensité par rareté : elles reprennent les couleurs déjà utilisées par `.ig-card-drop-rate`, pour que le vernis appartienne visuellement à la carte. L'intensité MONTE avec la rareté — c'est ce qui fait lire la hiérarchie. */ .rarity-legendary .ig-card-art::before { --holo-a:#ffcc02; --holo-b:#ff9800; --holo-c:#fff3c4; --holo-force:.42; } .rarity-mythic .ig-card-art::before { --holo-a:#ff8a80; --holo-b:#ff5252; --holo-c:#ffd0c4; --holo-force:.5; animation-duration: 6.2s; } .rarity-divine .ig-card-art::before { --holo-a:#ea80fc; --holo-b:#b388ff; --holo-c:#ffe0ff; --holo-force:.58; animation-duration: 5.6s; } .rarity-celestial .ig-card-art::before { --holo-a:#84ffff; --holo-b:#40c4ff; --holo-c:#e0ffff; --holo-force:.66; animation-duration: 5s; } /* Au survol, la carte se soulève déjà : le vernis s'intensifie avec elle. */ .rarity-legendary:hover .ig-card-art::before, .rarity-mythic:hover .ig-card-art::before, .rarity-divine:hover .ig-card-art::before, .rarity-celestial:hover .ig-card-art::before { opacity: calc(var(--holo-force, .5) + .22); } /* ⚠️ MOUVEMENT RÉDUIT : le vernis reste, il cesse de bouger. Une lumière qui traverse en boucle est exactement ce qui gêne les personnes sensibles au mouvement — mais retirer l'effet leur ferait perdre l'information de rareté. */ @media (prefers-reduced-motion: reduce) { .rarity-legendary .ig-card-art::before, .rarity-mythic .ig-card-art::before, .rarity-divine .ig-card-art::before, .rarity-celestial .ig-card-art::before { animation: none; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } } /* ═══ CARTE REELLE DANS LE CARROUSEL (2026-08-19, demande admin) ══════════════════ « fait la holographique 3 vernis de nova et met la a la place de cette image [...] en enlevant le modele pre fait qui a ete mis en place pour cela » La maquette CSS (.ig-card-inner, bandeau, stats) est REMPLACEE par l'image de la vraie carte. Tout — cadre, attaques, citation, etoiles, PV/ATK/DEF — vit dans le PNG produit par le logiciel de cartes, vernis holographique compris. ⚠️ POURQUOI L'IMAGE NE PORTE PAS `.ig-card-art` : la regle `.rarity-celestial .ig-card-art::before` poserait un SECOND vernis animé par-dessus celui deja cuit dans l'image. Deux trames superposees ne brillent pas mieux, elles se brouillent. La classe de rarete reste, elle, pour le carrousel et l'aura. ⚠️ `height:auto` sur la carte : la maquette est figee a 440 px pour 280 de large (ratio 0,636) alors que la vraie carte est en 0,709. Forcer 440 l'ecraserait. */ .ig-carte-img { display: block; height: 100%; width: auto; /* l'ombre suit la SILHOUETTE (coins arrondis compris), pas une boite rectangulaire */ filter: drop-shadow(0 16px 26px rgba(0,0,0,.72)); } /* ═══ LA LUMIERE QUI PASSE (2026-08-19) ═══════════════════════════════════════════ Principe du LISEZMOI d'Assets/holographie, qu'il fallait respecter jusqu'au bout : « Le motif est IMPRIME sur la carte : il ne bouge jamais. C'est la LUMIERE qui se deplace dessus. » Le motif (arc-en-ciel sur le fond, coeurs sur le personnage, diamant sur le cadre) est donc CUIT dans le .webp. Ici ne vit que le reflet mobile. ⚠️ POURQUOI PAS `color-dodge` : c'est la fusion de la maquette (.ig-card-art::before), et mesuree sur Nova elle deplacait 54/255 de moyenne — elle ne fait pas briller, elle REPEINT la carte en bleu. `overlay` a 0,30 laisse l'illustration intacte. ⚠️ La bande est ETROITE (masque 200 %, plage 44-56 %) : une bande large couvre la carte pendant presque tout le cycle et l'effet se lit comme un lavis permanent, pas comme un reflet qui passe. C'est le defaut exact de la maquette. */ /* ═══ CARTE REELLE : VERNIS EN CSS, IMAGE INTACTE (2026-08-19) ═══════════════════ Retour admin : « tu as detruit legerement mon image ». C'etait vrai — les motifs etaient CUITS dans le .webp, donc le dessin etait altere ET l'effet fige. Architecture corrigee, celle du labo `Assets/holographie` : · l'IMAGE est la carte du logiciel, telle quelle, on n'y touche pas ; · chaque VERNIS est une couche CSS masquee par sa zone ; · la LUMIERE et le VOLUME sont pilotes par `initCarteVolume` (js/main.js). Les trois zones : --m-perso masque du personnage detoure --m-cadre masque du cadre le FOND = la carte moins le personnage (masque compose) */ .ig-spawn-card.ig-carte-reelle { height: 440px; width: auto; flex: 0 0 auto; display: block; position: relative; overflow: visible; isolation: isolate; /* ⚠️ PAS de `will-change: transform` (retire le 2026-08-30, retour admin : « un leger flou qui disparait une fois le curseur sur la carte »). `will-change` epingle la carte sur un calque rasterise UNE FOIS ; la rotation 3D echantillonne ensuite cette texture, d'ou le flou. Au survol, `pointermove` reposait un transform a chaque mouvement, le calque se re-rasterisait, et la nettete revenait — ce qui explique exactement le symptome decrit. MESURE (energie des hautes frequences sur la meme carte, meme angle, x2 de densite) : avec will-change ................ 466,3 sans will-change ................ 509,3 soit +9,2 % sans WC + backface-visibility ... 240,1 soit -48,5 % <- le remede classique EMPIRE Le cout : le calque se re-rasterise a chaque image. Negligeable ici (2 cartes reelles au plus a l'ecran, 314x440), et la boucle ne tourne deja que pour les cartes visibles. */ transition: none; /* Ombre ALLÉGÉE le 2026-09-03 (retour admin mobile : « il y a beaucoup d'ombre derrière ») : .72 de noir faisait un pâté plus visible que la carte sur le fond clair du carrousel. Assez pour le relief, plus assez pour se remarquer. */ filter: drop-shadow(0 12px 22px rgba(0,0,0,.42)); } .ig-carte-img { display: block; height: 100%; width: auto; } /* ═══ LES TROIS VERNIS — ARCHITECTURE (refaite le 2026-08-30) ═══════════════════ Retour admin : « il melange les holographiques deja poses ». IL AVAIT RAISON, et la cause etait une faute de conception de ma part. AVANT : la regle de base du personnage portait le POCHOIR PAPILLONS dans son masque. Une classe de motif ne remplacait que `background` / `mix-blend-mode` / `filter` — jamais le masque. Choisir `foil` sur le personnage laissait donc le pochoir en place : la trame foil n'apparaissait QUE dans les papillons. Deux motifs se superposaient au lieu de se remplacer. MAINTENANT, trois etages nettement separes : 1. `.v` la geometrie et le SWEEP (la lumiere mobile), communs aux trois 2. `.v-fond|perso|cadre` la ZONE : quel masque delimite la couche 3. `.mf-*|mp-*|mc-*` le MOTIF : couleur, fusion, saturation — et RIEN d'autre Un pochoir de forme (papillons) est un motif comme un autre : il AJOUTE sa decoupe, et il est le seul a le faire. Changer de motif change donc tout, sans residu. */ /* ⚠️ ON N'ETEINT LE VERNIS QUE SUR PREUVE QUE SES MASQUES MANQUENT (2026-09-01, SECONDE VERSION — la premiere a casse le vernis pour tout le monde). Le probleme d'origine est reel : un masque en 404 n'est pas un masque vide, c'est un masque SANS LIMITE, et le vernis couvre alors la carte entiere. Ma premiere parade disait « pas de vernis TANT QU'ON N'A PAS PROUVE que les quatre masques chargent » : classe `holo-pret` posee au succes, tout eteint sans elle. Elle a eteint le vernis PARTOUT, pour trois raisons independantes : 1. sur le Dex, `initCarteVolume()` n'est jamais appelee sur la fiche de carte — `dexHoloAnimer()` n'a qu'un appelant, `setModalBody`, et `openCardDetailModal` n'y passe pas. Mesure : `holo-pret=false`, `--mx` jamais pose ; 2. sur la vitrine, `img.decode()` reste PENDANTE dans un onglet d'arriere-plan (Chromium suspend le rendu d'une page cachee, et `decode()` attend de peindre). `armerVernis` n'est appelee qu'une fois : une promesse pendante = vernis eteint pour toujours ; 3. `prefers-reduced-motion: reduce` fait sortir `initCarteVolume` AVANT la boucle : ces visiteurs perdaient le vernis en entier, alors qu'ils avaient droit au vernis fixe. Une garde qui exige une PREUVE DE SUCCES echoue en cassant le cas normal. Celle-ci exige une PREUVE D'ECHEC : sans rien, le vernis s'affiche comme avant ; il ne s'eteint que si le JS a CONSTATE qu'un masque ne charge pas. Le defaut d'origine reste couvert — c'est exactement le cas ou la preuve d'echec existe. */ .ig-carte-reelle.holo-sans-masque .v, .ig-carte-reelle.holo-sans-masque .v-glare { display: none !important; } .ig-carte-reelle .v { position: absolute; inset: 0; pointer-events: none; /* ⚠️ LA BANDE RESTE LE MÉCANISME — précision admin du 2026-09-03 : « le principe pour l'affichage des 7 raretés c'est INCLINER pour voir la rareté, pas la figer ». Une première correction avait OUVERT le dégradé en plein (motif visible en permanence) : c'était contresens, annulé le jour même. Ce qui était réellement en défaut : 1. la lumière blanche du curseur (v-glare) « n'avait pas lieu d'être » — elle est RETIRÉE, voir sa règle plus bas ; 2. le vernis révélé était « pas assez brillant » — la bande est donc ÉLARGIE (cœur plein à 20 % de la course contre 6 % avant, épaules plus douces) : ce qui se révèle à l'inclinaison se voit franchement. Sa position suit toujours --mx/--my : incliner révèle, redresser cache. */ --sweep: linear-gradient(102deg, transparent 24%, #000 40%, #000 60%, transparent 76%); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%, 260% 260%; mask-size: 100% 100%, 260% 260%; -webkit-mask-position: 0 0, var(--mx, 50%) var(--my, 50%); mask-position: 0 0, var(--mx, 50%) var(--my, 50%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* La teinte du motif GLISSE avec l'inclinaison, DANS la bande révélée : --mx/--my sont les mêmes variables qui font pencher la carte (boucle, souris, gyroscope) — la couleur du vernis change d'angle en angle, comme une vraie holo sous une lampe. C'est la moitié « plus brillant » de la demande admin du 2026-09-03 : la bande révèle, et ce qu'elle révèle chatoie au lieu d'être une teinte figée. background-size > 100% est nécessaire : à 100 % un dégradé ne glisse pas. Les trames à pas en px (métal, foil) en sortent ~2× plus larges — voulu, plus lisible à distance. */ .ig-carte-reelle .v-fond, .ig-carte-reelle .v-perso, .ig-carte-reelle .v-cadre, .ig-carte-reelle .v-voile { background-size: 210% 210%; background-position: var(--mx, 50%) var(--my, 50%); } /* ── ETAGE 2 : la ZONE de chaque couche ──────────────────────────────────────── */ /* === LES REGLAGES PAR COUCHE SONT ENFIN LUS (2026-08-31) ======================= Defaut mesure ce jour, en ouvrant l'editeur de WCM : `holoConfig.versCss` produit depuis toujours `--o-fond`, `--s-fond`, `--o-perso`... et AUCUNE regle ne les consommait. Chaque motif cuisait sa saturation dans un `filter: saturate(.8)`. Consequence : les curseurs d'opacite et de saturation de l'editeur etaient des commandes MORTES - le piege §5.2 de CLAUDE.md, « un champ que personne ne LIT est inerte : la fonctionnalite parait codee, elle ne fait rien ». Correction, en deux temps et sans changer le rendu par defaut : 1. chaque motif publie sa saturation dans `--sat-m` au lieu de l'appliquer ; 2. la couche calcule `--sat-eff` = le reglage de l'editeur S'IL EXISTE, sinon celle du motif, sinon 1. Le `filter` est applique une seule fois, sur `.v`. Sans aucune variable posee, `var(--s-fond, var(--sat-m, 1))` retombe exactement sur la valeur du motif : le site rend au pixel pres ce qu'il rendait avant (verifie par comparaison des styles CALCULES des quatre couches, avant / apres). ⚠️ `filter` reste sur le MEME element que `mix-blend-mode` - c'est deja le cas aujourd'hui. Le poser sur un PARENT creerait un contexte d'empilement qui neutraliserait la fusion, et le vernis disparaitrait sans erreur. */ /* 🎨 TEINTE PAR COUCHE (2026-09-05, demande admin : « personnaliser même les couleurs ») : `--h-` (degres, emis par holoConfig.versCss quand la teinte est reglee) tourne la roue chromatique de LA trame — un seul curseur repeint n'importe quel motif. 0deg = couleurs d'origine, rien ne change. */ .ig-carte-reelle .v { filter: saturate(var(--sat-eff, 1)) hue-rotate(var(--h-eff, 0deg)); } .ig-carte-reelle .v-fond { --sat-eff: var(--s-fond, var(--sat-m, 1)); --h-eff: var(--h-fond, 0deg); opacity: var(--o-fond, 1); } .ig-carte-reelle .v-perso { --sat-eff: var(--s-perso, var(--sat-m, 1)); --h-eff: var(--h-perso, 0deg); opacity: var(--o-perso, 1); } .ig-carte-reelle .v-cadre { --sat-eff: var(--s-cadre, var(--sat-m, 1)); --h-eff: var(--h-cadre, 0deg); opacity: var(--o-cadre, 1); } .ig-carte-reelle .v-voile { --sat-eff: var(--s-voile, var(--sat-m, 1)); --h-eff: var(--h-voile, 0deg); } /* 🎨 LUEUR EXTERNE (2026-09-05) : le halo autour de la carte. `--lueur-c` porte la couleur ET la force (dans son alpha), emis par holoConfig.versCss ; la classe n'est posee que force > 0 — l'existant ne change pas d'un pixel. */ .ig-carte-reelle.holo-lueur { box-shadow: 0 0 16px 2px var(--lueur-c, transparent), 0 0 38px 8px var(--lueur-c, transparent); } .ig-carte-reelle .v-fond { -webkit-mask-image: var(--m-fond), var(--sweep); mask-image: var(--m-fond), var(--sweep); } .ig-carte-reelle .v-perso { -webkit-mask-image: var(--m-perso), var(--sweep); mask-image: var(--m-perso), var(--sweep); } .ig-carte-reelle .v-cadre { -webkit-mask-image: var(--m-cadre), var(--sweep); mask-image: var(--m-cadre), var(--sweep); } /* ⚠️ QUATRIEME SURFACE — LE VOILE (2026-08-30, demande admin : « peut-on ajouter une autre surface ? fond, personnage, degrade et cadre ? »). Mesure sur Cadre-Kazuha : l'alpha du cadre se separe en deux familles nettes — 230-255 pour la bordure, les textes et les icones ; 12-199 pour le voile degrade, qui pese 0,3 % dans la moitie HAUTE et jusqu'a 88 % dans la moitie basse. C'est la bande qui porte les attaques, la citation, le nom et les stats : une surface a part entiere, qui merite son vernis. Les quatre zones sont EXCLUSIVES : deux vernis au meme endroit se brouillent. */ /* ⚠️ LE VOILE NE PORTE PAS LE SWEEP (2026-08-30, demande admin : « peux-tu enlever les holographies sur les degrades ? ... ne pas appliquer d'holographie, attention pas enlever le systeme »). Les trois autres couches intersectent leur zone AVEC la bande de lumiere mobile (`var(--sweep)`) : c'est ce qui les fait scintiller au basculement. Applique au voile, le meme masque avait une consequence que la formulation « holographie » decrit mal : le degrade PEINT n'etait visible QUE dans la bande, soit une fraction du cycle. Son degrade a lui clignotait au lieu de se poser. Ici, masque a UNE SEULE image : la zone du voile, rien d'autre. Le degrade est donc pose en permanence, fixe, comme une impression. ⚠️ Le systeme holographique reste ENTIER : `.v` garde sa definition de `--sweep`, et les douze motifs `.mv-*` de l'etage 3 restent disponibles pour cette couche — poser `mv-arcenciel` sur une carte lui rendra son vernis mobile. C'est le REGLAGE PAR DEFAUT qui change, pas la machinerie. ⚠️ `.v` declare `mask-size` et `mask-position` a deux valeurs (une par image). Avec une seule image de masque, la seconde valeur est simplement ignoree : rien a corriger. */ .ig-carte-reelle .v-voile { -webkit-mask-image: var(--m-voile); mask-image: var(--m-voile); } /* ── LE VOILE PREND UN DEGRADE PROPRE A CHAQUE RARETE (2026-08-30) ────────────── L'administrateur a fourni sept degrades peints a la main, un par rarete (certains partages). Ce sont des images verticales : transparentes en haut, colorees en bas — la forme exacte du voile. Elles remplacent donc la trame CSS sur cette couche. Le motif est choisi AUTOMATIQUEMENT par la classe de rarete deja portee par la carte : aucune classe supplementaire a poser, aucune correspondance a maintenir a la main dans le HTML. La classe `.mv-*` reste disponible pour forcer autre chose. */ /* ⚠️ LE DEGRADE N'EST PLUS POSE EN CSS (2026-08-31). Il etait ici en `background` de `.v-voile`, un par rarete — mais le degrade fait partie de la CARTE, pas du vernis : il est desormais empile dans l'image, entre le personnage et le cadre, exactement comme l'administrateur le decrit (« fond, personnage, degrade, cadre »). `.v-voile` redevient donc une couche de VERNIS comme les trois autres : elle ne peint rien tant qu'aucun motif `.mv-*` n'est pose, ce qui est le reglage voulu (« j'ai dit que je souhaitais pas en mettre pour l'instant, mais si jamais on peut l'appliquer a tout moment »). Sa zone est prete, son masque est genere. */ /* ⚠️ ET IL EST DOSE (2026-08-30). Retour admin, capture a l'appui : la moitie basse des cartes ressortait DELAVEE, blanchatre, et le texte y perdait son contraste. Mesure du defaut : le degrade peint porte une luminance de 73 (commune) a 193 (celeste) et son masque couvre 28 % de la carte, concentres en bas — le masque monte a 98,7 d'alpha a 90 % de hauteur. En `overlay`, une surface claire posee sur une illustration sombre l'ECLAIRCIT fortement : a pleine opacite, elle lave la bande qui porte justement les attaques, la citation, le nom et les stats. Ce n'etait pas visible avant : tant que le voile portait la bande de lumiere mobile, il ne se montrait qu'une fraction du cycle. En le posant en permanence — ce qui etait la bonne correction — on a rendu visible un dosage qui ne l'etait pas. Verification cote a cote : rangee AVEC voile / rangee SANS, meme carte, meme angle. `--voile-force` est reglable par carte comme les quatre vernis, et 0,3 est un DEFAUT, pas une regle : l'atelier WCM le pilote. */ .ig-carte-reelle .v-voile { mix-blend-mode: overlay; --sat-m: 1; /* ⚠️ PLEINE OPACITE (2026-08-31, decision admin : « y a rien a modifier en terme d'opacite, y a juste a l'appliquer normalement »). Elle avait ete baissee a 0,3 le 2026-08-30 pour arreter un delavage de la moitie basse — mais ce delavage ne venait PAS de l'intensite : le masque du voile debordait sur le BORD de la carte (mesure : 21,9 % du pourtour), la ou le degrade n'a rien a faire. Le bord etant maintenant exclu des trois couches interieures, le degrade peut se poser tel qu'il a ete peint. La variable reste, pour que l'atelier WCM puisse le doser carte par carte. */ opacity: var(--o-voile, var(--voile-force, 1)); } /* ═══ MOTIFS PERSONNALISES (2026-09-05, demande admin : « totalement personnalisable — motifs, regularite, couleurs, meme l'inclinaison »). QUATRE FAMILLES generiques ; la geometrie et les couleurs viennent des variables --vm--* emises par holoConfig.versCss : -a angle · -p pas (la REGULARITE) · -c1/-c2/-c3 couleurs · -fu fusion. `m?-suivre` : la trame de couleurs GLISSE avec l'inclinaison (--mx/--my), comme `scintillant` — exception assumee a « l'encre ne bouge pas ». ═══ */ /* lignes — rayures fines, angle et pas libres */ .ig-carte-reelle.mf-perso-lignes .v-fond, .ig-carte-reelle.mp-perso-lignes .v-perso, .ig-carte-reelle.mc-perso-lignes .v-cadre, .ig-carte-reelle.mv-perso-lignes .v-voile { background: repeating-linear-gradient(var(--vm-eff-a, 45deg), var(--vm-eff-c1, #fff) 0, var(--vm-eff-c2, #888) calc(var(--vm-eff-p, 8px) / 2), var(--vm-eff-c3, #fff) var(--vm-eff-p, 8px)); mix-blend-mode: var(--vm-eff-fu, color-dodge); --sat-m: .8; } /* points — semis de points, l'espacement est le pas */ .ig-carte-reelle.mf-perso-points .v-fond, .ig-carte-reelle.mp-perso-points .v-perso, .ig-carte-reelle.mc-perso-points .v-cadre, .ig-carte-reelle.mv-perso-points .v-voile { background: radial-gradient(circle at 30% 30%, var(--vm-eff-c1, #fff) 0 1.2px, transparent 2.4px), radial-gradient(circle at 75% 65%, var(--vm-eff-c2, #fff) 0 .9px, transparent 1.9px), linear-gradient(var(--vm-eff-a, 45deg), var(--vm-eff-c3, transparent), transparent); background-size: var(--vm-eff-p, 24px) var(--vm-eff-p, 24px), calc(var(--vm-eff-p, 24px) * 1.6) calc(var(--vm-eff-p, 24px) * 1.6), 100% 100%; mix-blend-mode: var(--vm-eff-fu, color-dodge); --sat-m: .8; } /* arc — roue conique, l'angle est le point de depart */ .ig-carte-reelle.mf-perso-arc .v-fond, .ig-carte-reelle.mp-perso-arc .v-perso, .ig-carte-reelle.mc-perso-arc .v-cadre, .ig-carte-reelle.mv-perso-arc .v-voile { background: conic-gradient(from var(--vm-eff-a, 0deg) at 50% 50%, var(--vm-eff-c1, #fff), var(--vm-eff-c2, #888), var(--vm-eff-c3, #fff), var(--vm-eff-c1, #fff)); mix-blend-mode: var(--vm-eff-fu, color-dodge); --sat-m: .8; } /* bandes — larges bandes fondues, le pas fait la largeur */ .ig-carte-reelle.mf-perso-bandes .v-fond, .ig-carte-reelle.mp-perso-bandes .v-perso, .ig-carte-reelle.mc-perso-bandes .v-cadre, .ig-carte-reelle.mv-perso-bandes .v-voile { background: repeating-linear-gradient(var(--vm-eff-a, 135deg), var(--vm-eff-c1, #fff) 0, var(--vm-eff-c2, #888) calc(var(--vm-eff-p, 40px) * 2), var(--vm-eff-c3, #fff) calc(var(--vm-eff-p, 40px) * 4), var(--vm-eff-c1, #fff) calc(var(--vm-eff-p, 40px) * 6)); background-size: 300% 300%; mix-blend-mode: var(--vm-eff-fu, color-dodge); --sat-m: .8; } /* chaque couche branche SES variables sur les generiques --vm-eff-* */ .ig-carte-reelle .v-fond { --vm-eff-a: var(--vm-fond-a); --vm-eff-p: var(--vm-fond-p); --vm-eff-c1: var(--vm-fond-c1); --vm-eff-c2: var(--vm-fond-c2); --vm-eff-c3: var(--vm-fond-c3); --vm-eff-fu: var(--vm-fond-fu, color-dodge); } .ig-carte-reelle .v-perso { --vm-eff-a: var(--vm-perso-a); --vm-eff-p: var(--vm-perso-p); --vm-eff-c1: var(--vm-perso-c1); --vm-eff-c2: var(--vm-perso-c2); --vm-eff-c3: var(--vm-perso-c3); --vm-eff-fu: var(--vm-perso-fu, color-dodge); } .ig-carte-reelle .v-cadre { --vm-eff-a: var(--vm-cadre-a); --vm-eff-p: var(--vm-cadre-p); --vm-eff-c1: var(--vm-cadre-c1); --vm-eff-c2: var(--vm-cadre-c2); --vm-eff-c3: var(--vm-cadre-c3); --vm-eff-fu: var(--vm-cadre-fu, color-dodge); } .ig-carte-reelle .v-voile { --vm-eff-a: var(--vm-voile-a); --vm-eff-p: var(--vm-voile-p); --vm-eff-c1: var(--vm-voile-c1); --vm-eff-c2: var(--vm-voile-c2); --vm-eff-c3: var(--vm-voile-c3); --vm-eff-fu: var(--vm-voile-fu, color-dodge); } /* suivre : la position de la trame suit l'inclinaison de la carte */ .ig-carte-reelle.mf-suivre .v-fond, .ig-carte-reelle.mp-suivre .v-perso, .ig-carte-reelle.mc-suivre .v-cadre, .ig-carte-reelle.mv-suivre .v-voile { background-position: var(--mx, 50%) var(--my, 50%); } /* ── ETAGE 3 : les MOTIFS. Couleur, fusion, saturation. Jamais de masque. ─────── */ /* ARC-EN-CIEL — conic-gradient du gabarit, palette « Arc-en-ciel » */ .ig-carte-reelle.mf-arcenciel .v-fond, .ig-carte-reelle.mp-arcenciel .v-perso, .ig-carte-reelle.mc-arcenciel .v-cadre, .ig-carte-reelle.mv-arcenciel .v-voile { background: conic-gradient(from 0deg at 50% 50%, #ff5f6d, #45c6ff, #b07cff, #ff5f6d, #45c6ff, #ff5f6d); mix-blend-mode: color-dodge; --sat-m: calc(1.5 * .5); } /* METAL — rayures de 1 px a 94 deg, du gabarit */ .ig-carte-reelle.mf-metal .v-fond, .ig-carte-reelle.mp-metal .v-perso, .ig-carte-reelle.mc-metal .v-cadre, .ig-carte-reelle.mv-metal .v-voile { background: repeating-linear-gradient(94deg, rgba(255,255,255,.75) 0 1px, rgba(0,0,0,.25) 1px 3px); mix-blend-mode: hard-light; --sat-m: .5; } /* PAPILLONS — SEUL motif a POCHOIR : il ajoute une 3e passe de masque. L'ordre des masques suit celui de `.v` : zone, FORME, sweep. */ .ig-carte-reelle.mf-papillons .v-fond, .ig-carte-reelle.mp-papillons .v-perso, .ig-carte-reelle.mc-papillons .v-cadre, .ig-carte-reelle.mv-papillons .v-voile { background: conic-gradient(from 40deg at 50% 50%, #ff5f6d, #45c6ff, #b07cff, #ff5f6d, #45c6ff, #ff5f6d); mix-blend-mode: hard-light; --sat-m: calc(1.35 * .4); -webkit-mask-size: 100% 100%, 150px 150px, 260% 260%; mask-size: 100% 100%, 150px 150px, 260% 260%; -webkit-mask-repeat: no-repeat, repeat, no-repeat; mask-repeat: no-repeat, repeat, no-repeat; -webkit-mask-position: 0 0, 0 0, var(--mx, 50%) var(--my, 50%); mask-position: 0 0, 0 0, var(--mx, 50%) var(--my, 50%); } .ig-carte-reelle.mf-papillons .v-fond { -webkit-mask-image: var(--m-fond), url("data:image/svg+xml,"), var(--sweep); mask-image: var(--m-fond), url("data:image/svg+xml,"), var(--sweep); } .ig-carte-reelle.mp-papillons .v-perso { -webkit-mask-image: var(--m-perso), url("data:image/svg+xml,"), var(--sweep); mask-image: var(--m-perso), url("data:image/svg+xml,"), var(--sweep); } .ig-carte-reelle.mc-papillons .v-cadre { -webkit-mask-image: var(--m-cadre), url("data:image/svg+xml,"), var(--sweep); mask-image: var(--m-cadre), url("data:image/svg+xml,"), var(--sweep); } .ig-carte-reelle.mv-papillons .v-voile { -webkit-mask-image: var(--m-voile), url("data:image/svg+xml,"), var(--sweep); mask-image: var(--m-voile), url("data:image/svg+xml,"), var(--sweep); } /* LA LUMIERE — elle suit le point pilote par le JS, et ne sort jamais de la carte. */ .ig-carte-reelle .v-glare { /* ⚠️ RETIRÉE le 2026-09-03 — mots de l'admin : « la lumière forcée du curseur n'avait pas lieu d'être ». C'est le vernis qui dit la rareté quand on incline, pas un rond de lumière blanche posé par-dessus. La règle et l'élément restent (le HTML des cartes porte à sept endroits, et le JS teste sa présence) : on éteint le CALQUE, on ne réécrit pas sept gabarits. Pour la faire revenir un jour : display revert + l'ancien radial-gradient est dans l'historique git. */ display: none; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, transparent 60%); mix-blend-mode: overlay; opacity: .38; -webkit-mask-image: var(--carte); mask-image: var(--carte); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ig-spawn-card.ig-carte-reelle.repos { transition: transform 420ms ease-out; } /* ── MOBILE (2026-08-30) ──────────────────────────────────────────────────────── Retour admin, capture a l'appui : « sur mobile cela ne rend pas trop bien ». La feuille a bien une regle mobile — `.ig-spawn-card { width:240px; height:380px }` dans `@media (max-width: 767px)`, l. 3080 — mais `.ig-spawn-card.ig-carte-reelle` est PLUS SPECIFIQUE (0,2,0 contre 0,1,0) et declaree plus bas : elle gagnait avec ses 440 px fixes. La carte reelle echappait donc entierement au reglage mobile, occupait presque toute la largeur de l'ecran et poussait le reste hors du champ. On lui donne sa propre regle, a la meme coupure et a specificite suffisante. ⚠️ L'inclinaison 3D est aussi REDUITE sur petit ecran : a 22 px de large par degre, un basculement de 13 deg fait sortir les coins du cadre visuel et donne l'impression que la carte "penche" au lieu de "briller". `initCarteVolume` lit cette valeur. */ @media (max-width: 767px) { .ig-spawn-card.ig-carte-reelle { height: 380px; /* ombre encore plus retenue qu'au bureau : sur un petit ecran clair, elle se voyait plus que la carte (retour admin du 2026-09-03) */ filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)); } /* Le carrousel reserve 5rem en haut et 5,5rem en bas pour l'ombre portee et l'inclinaison 3D. MESURE sur un ecran de 375 px : 498 px de hauteur pour une carte de 332 — 166 px de vide, soit un tiers de la bande. Sur mobile l'inclinaison est deja reduite a 8 deg (cf. `initCarteVolume`), l'ombre a donc besoin de bien moins. On rend cette place a la carte. ⚠️ CENTRAGE (2026-09-03, capture admin : « les cartes ne sont pas vraiment centrées ») : les cartes portent `scroll-snap-align: center`, mais la PREMIERE ne pouvait pas atteindre le centre — il aurait fallu un scroll negatif, le navigateur le borne a 0, et la carte restait decalee a droite. Le remede est un rembourrage lateral qui vaut exactement « la moitie de la fenetre moins la demi-carte » (380 px de haut x 731/1024 = 271 de large, demi-carte 136) : le centre devient atteignable aux deux bouts. */ .rarity-carousel { padding: 2.75rem max(1rem, calc(50% - 136px)) 3.25rem; } } /* Sous 380 px de large (iPhone SE, Galaxy A) la carte a 380 px de haut ferait 271 px de large pour 300 de place utile : elle deborderait. On la ramene a 340. */ @media (max-width: 380px) { .ig-spawn-card.ig-carte-reelle { height: 340px; } /* meme calcul de centrage avec la carte de 340 px de haut : 243 de large, demi-carte 122 */ .rarity-carousel { padding-left: max(.75rem, calc(50% - 122px)); padding-right: max(.75rem, calc(50% - 122px)); } } /* ═══ BIBLIOTHEQUE DE MOTIFS HOLOGRAPHIQUES (2026-08-30) ═══════════════════════════ Demande admin : « possibilite d'avoir d'autres motifs ? d'autres trucs super interessants ? » — et le constat que la plupart des 30 motifs du gabarit ne valent pas grand-chose une fois poses sur une vraie carte. Ceux-ci sont dessines pour LA CARTE, pas pour une demo : ils reprennent des trames qui existent physiquement sur les cartes a collectionner (foil lineaire, croisillon, nacre, carbone, givre…) plutot que des formes decoratives. COMMENT S'EN SERVIR — trois familles de classes, une par couche, posees sur la carte : .mf- le FOND .mp- le PERSONNAGE .mc- le CADRE Exemple :
Sans classe, chaque couche garde son motif par defaut (arc-en-ciel / papillons / metal). ⚠️ Chaque motif fixe SA fusion et SA saturation : une trame fine veut `overlay`, un spectre large veut `soft-light`, et `color-dodge` ne convient qu'aux motifs peu satures — au-dela il brule l'illustration (mesure sur Nova le 2026-08-19 : 54/255 de deplacement moyen, l'illustration disparaissait). */ /* ── FOIL LINEAIRE — la trame verticale des cartes brillantes classiques ────────── */ .ig-carte-reelle.mf-foil .v-fond, .ig-carte-reelle.mp-foil .v-perso, .ig-carte-reelle.mc-foil .v-cadre, .ig-carte-reelle.mv-foil .v-voile { background: repeating-linear-gradient(90deg, #ff5f6d 0 2px, #ffd76a 2px 4px, #4dffa8 4px 6px, #45c6ff 6px 8px, #b07cff 8px 10px); mix-blend-mode: overlay; --sat-m: .6; } /* ── CROISILLON — deux trames croisees : un chatoiement en losanges ─────────────── */ .ig-carte-reelle.mf-croisillon .v-fond, .ig-carte-reelle.mp-croisillon .v-perso, .ig-carte-reelle.mc-croisillon .v-cadre, .ig-carte-reelle.mv-croisillon .v-voile { background: repeating-linear-gradient(58deg, rgba(255,255,255,.55) 0 1px, rgba(0,0,0,.18) 1px 5px), repeating-linear-gradient(-58deg, #45c6ff 0 1px, #ff5f6d 1px 3px, #b07cff 3px 6px); mix-blend-mode: overlay; --sat-m: .5; } /* ── NACRE — spectre large et doux, le reflet d'un coquillage. Le plus discret. ─── */ .ig-carte-reelle.mf-nacre .v-fond, .ig-carte-reelle.mp-nacre .v-perso, .ig-carte-reelle.mc-nacre .v-cadre, .ig-carte-reelle.mv-nacre .v-voile { background: linear-gradient(118deg, #ffd9e8 0%, #d9f0ff 18%, #e8ffe4 36%, #fff6d9 54%, #f0dcff 72%, #d9f6ff 88%, #ffd9e8 100%); mix-blend-mode: soft-light; --sat-m: 1.1; } /* ── COSMOS — poussiere d'etoiles sur un fond spectral. Pour les hautes raretes. ── */ .ig-carte-reelle.mf-cosmos .v-fond, .ig-carte-reelle.mp-cosmos .v-perso, .ig-carte-reelle.mc-cosmos .v-cadre, .ig-carte-reelle.mv-cosmos .v-voile { background: radial-gradient(1.5px 1.5px at 12% 22%, #fff 0 60%, transparent 61%), radial-gradient(1.5px 1.5px at 68% 14%, #fff 0 60%, transparent 61%), radial-gradient(2px 2px at 38% 62%, #ffe9a8 0 60%, transparent 61%), radial-gradient(1.5px 1.5px at 84% 74%, #cfe6ff 0 60%, transparent 61%), radial-gradient(1.5px 1.5px at 26% 88%, #fff 0 60%, transparent 61%), conic-gradient(from 200deg at 50% 50%, #2b1b57, #4a2d8f, #1b3a6b, #6b2d7a, #2b1b57); background-size: 46px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px, 100% 100%; mix-blend-mode: screen; --sat-m: .8; } /* ── CARBONE — tissage serre, mat et technique. Excellent sur un cadre. ─────────── */ .ig-carte-reelle.mf-carbone .v-fond, .ig-carte-reelle.mp-carbone .v-perso, .ig-carte-reelle.mc-carbone .v-cadre, .ig-carte-reelle.mv-carbone .v-voile { background: repeating-linear-gradient(45deg, rgba(255,255,255,.34) 0 2px, rgba(0,0,0,.30) 2px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,.20) 0 2px, rgba(0,0,0,.20) 2px 4px); mix-blend-mode: overlay; --sat-m: .35; } /* ── GIVRE — facettes cristallines irregulieres, froides. ───────────────────────── */ .ig-carte-reelle.mf-givre .v-fond, .ig-carte-reelle.mp-givre .v-perso, .ig-carte-reelle.mc-givre .v-cadre, .ig-carte-reelle.mv-givre .v-voile { background: conic-gradient(from 20deg at 30% 40%, #e8f8ff, #9fd8ff 25%, #e8f8ff 50%, #b8e4ff 75%, #e8f8ff), repeating-linear-gradient(28deg, rgba(255,255,255,.42) 0 1px, transparent 1px 9px), repeating-linear-gradient(-64deg, rgba(180,225,255,.35) 0 1px, transparent 1px 13px); mix-blend-mode: overlay; --sat-m: .7; } /* ── PLUIE — stries verticales inegales, comme une averse sur du vernis. ────────── */ .ig-carte-reelle.mf-pluie .v-fond, .ig-carte-reelle.mp-pluie .v-perso, .ig-carte-reelle.mc-pluie .v-cadre, .ig-carte-reelle.mv-pluie .v-voile { background: repeating-linear-gradient(96deg, rgba(255,255,255,.50) 0 1px, transparent 1px 4px, rgba(160,220,255,.38) 4px 5px, transparent 5px 11px, rgba(255,255,255,.28) 11px 12px, transparent 12px 17px); mix-blend-mode: overlay; --sat-m: .6; } /* ── ECAILLES — arcs imbriques, une peau de dragon. ─────────────────────────────── */ .ig-carte-reelle.mf-ecailles .v-fond, .ig-carte-reelle.mp-ecailles .v-perso, .ig-carte-reelle.mc-ecailles .v-cadre, .ig-carte-reelle.mv-ecailles .v-voile { background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.5) 0 38%, transparent 40%), radial-gradient(circle at 0 100%, rgba(120,200,255,.42) 0 38%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(255,180,220,.42) 0 38%, transparent 40%); background-size: 26px 20px; mix-blend-mode: overlay; --sat-m: .55; } /* ── PRISME — larges bandes spectrales, franches. Le plus voyant. ───────────────── */ .ig-carte-reelle.mf-prisme .v-fond, .ig-carte-reelle.mp-prisme .v-perso, .ig-carte-reelle.mc-prisme .v-cadre, .ig-carte-reelle.mv-prisme .v-voile { background: repeating-linear-gradient(108deg, #ff2d55 0 14px, #ff9500 14px 28px, #ffd60a 28px 42px, #34c759 42px 56px, #32ade6 56px 70px, #5856d6 70px 84px, #af52de 84px 98px); mix-blend-mode: soft-light; --sat-m: .85; } /* ═══ HUIT MOTIFS « FACON TCG » (2026-09-05, demande admin : « des choses comme Yu-Gi-Oh / Pokemon en holographie, des noms qu'on comprend vite »). Meme moule que les douze d'origine : un FOND fixe (l'encre imprimee), un mode de fusion, une saturation publiee dans --sat-m — jamais de masque propre (la zone et la lumiere restent celles de l'etage 2). Enregistres dans holoConfig.MOTIFS (jumeau x4) : les listes de l'editeur WCM se remplissent toutes seules. ═══ */ /* ── ETINCELLES — paillettes Pokemon (glitter holo) : poussiere de points brillants. */ .ig-carte-reelle.mf-etincelles .v-fond, .ig-carte-reelle.mp-etincelles .v-perso, .ig-carte-reelle.mc-etincelles .v-cadre, .ig-carte-reelle.mv-etincelles .v-voile { background: radial-gradient(circle at 12% 18%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 68% 8%, #ffe9a8 0 1px, transparent 2px), radial-gradient(circle at 34% 44%, #a8e6ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 86% 36%, #ffc4f0 0 1px, transparent 2px), radial-gradient(circle at 8% 70%, #d0ffc4 0 1px, transparent 2px), radial-gradient(circle at 52% 78%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 78% 62%, #c4d2ff 0 1px, transparent 2px), radial-gradient(circle at 28% 92%, #ffe9a8 0 1px, transparent 2px), radial-gradient(circle at 94% 88%, #a8e6ff 0 1.5px, transparent 2.5px), conic-gradient(from 20deg at 50% 50%, #ff5f6d, #45c6ff, #b07cff, #ff5f6d); background-size: 56px 56px, 42px 42px, 64px 64px, 38px 38px, 46px 46px, 60px 60px, 44px 44px, 40px 40px, 52px 52px, 100% 100%; mix-blend-mode: color-dodge; --sat-m: .75; } /* ── ECLATS — glace brisee Pokemon (cracked ice) : facettes anguleuses. */ .ig-carte-reelle.mf-eclats .v-fond, .ig-carte-reelle.mp-eclats .v-perso, .ig-carte-reelle.mc-eclats .v-cadre, .ig-carte-reelle.mv-eclats .v-voile { background: linear-gradient(37deg, transparent 42%, rgba(255,255,255,.85) 43%, transparent 44.5%), linear-gradient(-63deg, transparent 57%, rgba(190,235,255,.8) 58%, transparent 59.5%), linear-gradient(81deg, transparent 23%, rgba(255,255,255,.7) 24%, transparent 25.5%), linear-gradient(-19deg, transparent 71%, rgba(210,190,255,.75) 72%, transparent 73.5%), linear-gradient(53deg, transparent 84%, rgba(255,255,255,.6) 85%, transparent 86.5%), conic-gradient(from 200deg at 30% 20%, #9be9ff 0 70deg, #e0f7ff 0 130deg, #b7c8ff 0 210deg, #9be9ff 0 280deg, #dff3ff 0 360deg); background-size: 130px 190px, 170px 150px, 110px 220px, 200px 140px, 150px 170px, 100% 100%; mix-blend-mode: hard-light; --sat-m: .6; } /* ── STRIES — micro-lignes diagonales Yu-Gi-Oh (secret rare) : fin, precieux. */ .ig-carte-reelle.mf-stries .v-fond, .ig-carte-reelle.mp-stries .v-perso, .ig-carte-reelle.mc-stries .v-cadre, .ig-carte-reelle.mv-stries .v-voile { background: repeating-linear-gradient(52deg, rgba(255,255,255,.85) 0 1px, transparent 1px 5px), repeating-linear-gradient(-38deg, rgba(255,255,255,.35) 0 1px, transparent 1px 7px), linear-gradient(120deg, #ffb3c1, #ffe29a 25%, #b6ffc9 50%, #9fd8ff 75%, #d9b3ff); mix-blend-mode: color-dodge; --sat-m: .6; } /* ── MOSAIQUE — pavage holo Pokemon (mosaic) : petites tuiles irisees. v2 le 2026-09-05 (verdict admin : « adoucir les couleurs entre elles ») — la grille des tuiles reste, mais les couleurs FONDENT d'un carreau a l'autre au lieu de casser net (plus de doubles butees 0/22px, un degrade continu qui boucle sans couture sur 220 px). */ .ig-carte-reelle.mf-mosaique .v-fond, .ig-carte-reelle.mp-mosaique .v-perso, .ig-carte-reelle.mc-mosaique .v-cadre, .ig-carte-reelle.mv-mosaique .v-voile { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 22px), repeating-linear-gradient(45deg, #ffb3c1 0, #ffe3ad 44px, #b9ecc4 88px, #b1d9ff 132px, #d9c2ff 176px, #ffb3c1 220px); mix-blend-mode: hard-light; --sat-m: .5; } /* ── DIAGONALE — demande admin (2026-09-05) : « en diagonale de gauche en haut a droite en bas, multicolore, une brillance comme une LUEUR mais legere ». Bandes larges qui fondent l'une dans l'autre, plus deux nappes blanches tres douces posees en travers — la lueur, pas un projecteur. */ .ig-carte-reelle.mf-diagonale .v-fond, .ig-carte-reelle.mp-diagonale .v-perso, .ig-carte-reelle.mc-diagonale .v-cadre, .ig-carte-reelle.mv-diagonale .v-voile { background: linear-gradient(135deg, rgba(255,255,255,.4) 10%, transparent 30%, rgba(255,255,255,.25) 54%, transparent 76%, rgba(255,255,255,.3) 94%), repeating-linear-gradient(135deg, #ff9aa8 0, #ffd9a1 60px, #fdf6b6 120px, #a8e8c0 180px, #9fd0ff 240px, #c9b2ff 300px, #ff9aa8 360px); mix-blend-mode: soft-light; --sat-m: .95; } /* ── SCINTILLANT — le « WHOA » (references admin : pinceaux holographic glitter / sparkle dust). Poussiere de points de tailles variees sur des pas PREMIERS (jamais alignes), posee sur un GRAND voile de couleurs dont la position SUIT l'inclinaison (--mx/--my, poses par holo-volume.js) : pencher dans un sens fait briller le meme endroit dans une AUTRE couleur. ⚠️ EXCEPTION ASSUMEE a la regle « l'encre ne bouge jamais » : ici c'est LE BUT demande — seul le voile de teinte glisse avec l'angle (comme la couleur d'un vrai foil change avec l'angle), les points, eux, restent imprimes fixes. */ .ig-carte-reelle.mf-scintillant .v-fond, .ig-carte-reelle.mp-scintillant .v-perso, .ig-carte-reelle.mc-scintillant .v-cadre, .ig-carte-reelle.mv-scintillant .v-voile { background: radial-gradient(circle at 22% 28%, #fff 0 .9px, transparent 1.7px), radial-gradient(circle at 64% 74%, #ffe9c4 0 1.3px, transparent 2.4px), radial-gradient(circle at 82% 18%, #c4f0ff 0 .7px, transparent 1.5px), radial-gradient(circle at 38% 88%, #ffc4e8 0 1.5px, transparent 2.8px), radial-gradient(circle at 92% 52%, #d9c4ff 0 .8px, transparent 1.7px), radial-gradient(circle at 12% 64%, #c4ffd9 0 1.1px, transparent 2.1px), conic-gradient(from 0deg at 50% 50%, #ff8fb3, #ffd98f, #f6ff9e, #8fffc4, #8fd2ff, #b89eff, #ff8fb3); background-size: 23px 23px, 37px 37px, 29px 29px, 47px 47px, 41px 41px, 31px 31px, 300% 300%; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, var(--mx, 50%) var(--my, 50%); mix-blend-mode: color-dodge; --sat-m: .9; } /* (`rayons`, `aurore` et `barres`, nes le matin meme, ont ete RETIRES le jour meme sur verdict admin — « pas bons » : trop plats face aux references reelles. Aucune carte ne les portait, le registre holoConfig.MOTIFS les a oublies aussi.) */ /* ── PAILLETTES — « prismatic secret rare » (photos admin 2026-09-05) : confettis de micro-pixels, chaque tuile de 6 px scintille d'une couleur differente. */ /* v2 le soir meme (verdict admin sur photo en main) : « des points PAS TOUS de la meme taille, mis un peu AU HASARD, plus des traits horizontaux — et la carte brille un peu partout, a differents endroits ». La grille reguliere de 6 px du premier jet trahissait la trame ; ici, six semis de points a des pas PREMIERS (23/29/31/37/41/47 px) qui ne s'alignent jamais — l'oeil ne voit plus de motif, il voit des paillettes. En color-dodge, chaque point FLAMBE quand la lumiere passe dessus : la brillance se promene, elle n'est jamais uniforme. */ .ig-carte-reelle.mf-paillettes .v-fond, .ig-carte-reelle.mp-paillettes .v-perso, .ig-carte-reelle.mc-paillettes .v-cadre, .ig-carte-reelle.mv-paillettes .v-voile { background: radial-gradient(circle at 20% 30%, #fff 0 .7px, transparent 1.4px), radial-gradient(circle at 60% 70%, #ffe45c 0 1.2px, transparent 2.2px), radial-gradient(circle at 80% 15%, #45c6ff 0 .9px, transparent 1.8px), radial-gradient(circle at 35% 85%, #ff5f6d 0 1.4px, transparent 2.6px), radial-gradient(circle at 90% 55%, #b07cff 0 .8px, transparent 1.6px), radial-gradient(circle at 10% 60%, #7dffc4 0 1.1px, transparent 2px), repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 5px), linear-gradient(115deg, #ffd1d9, #fff3bd 25%, #c9ffd4 50%, #c4e6ff 75%, #e6ccff); background-size: 23px 23px, 37px 37px, 31px 31px, 47px 47px, 41px 41px, 29px 29px, auto, auto; mix-blend-mode: color-dodge; --sat-m: .85; } /* ── OR — la « gold SECRET » (photo admin, Blue-Eyes MVP1) : diagonales du haut droit vers le bas gauche avec des CREUX (crete claire / sillon sombre, pas des lignes plates), des taches minuscules de tailles variees semees sur des pas premiers, et des eclats FROIDS glisses dans l'or — « les couleurs sont sublimes, on sent de la rarete ». La brillance n'est pas une simple lumiere : en hard-light, cretes et taches flambent chacune a leur tour sous le balayage. */ .ig-carte-reelle.mf-or .v-fond, .ig-carte-reelle.mp-or .v-perso, .ig-carte-reelle.mc-or .v-cadre, .ig-carte-reelle.mv-or .v-voile { background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.95) 0 .8px, transparent 1.6px), radial-gradient(circle at 70% 20%, rgba(255,240,180,.9) 0 1.3px, transparent 2.4px), radial-gradient(circle at 15% 75%, rgba(255,255,255,.85) 0 .6px, transparent 1.3px), radial-gradient(circle at 85% 65%, rgba(160,255,235,.9) 0 1px, transparent 2px), radial-gradient(circle at 50% 90%, rgba(255,255,255,.8) 0 1.2px, transparent 2.2px), repeating-linear-gradient(135deg, rgba(255,246,200,.9) 0 2px, rgba(122,76,7,.55) 2px 4px, rgba(255,233,138,.75) 4px 7px, rgba(90,55,5,.5) 7px 9px), linear-gradient(135deg, #8a5a0e 0%, #e8b64c 22%, #fff3b0 40%, #7fd4c4 52%, #e8b64c 64%, #b0742a 82%, #ffe98a 100%); background-size: 29px 29px, 43px 43px, 37px 37px, 53px 53px, 61px 61px, auto, auto; mix-blend-mode: hard-light; --sat-m: .8; } /* ── ORPUR — la « Gold Rare » simple (photo admin, Blue-Eyes MAGO) : « juste gold, rien d'autre » — mais avec le GRAIN qui donne la sensation de texture sans la toucher (micro-grain horizontal sur le brosse). */ .ig-carte-reelle.mf-orpur .v-fond, .ig-carte-reelle.mp-orpur .v-perso, .ig-carte-reelle.mc-orpur .v-cadre, .ig-carte-reelle.mv-orpur .v-voile { background: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 2px), repeating-linear-gradient(94deg, rgba(255,246,200,.8) 0 1px, rgba(140,90,10,.4) 1px 3px), linear-gradient(115deg, #7a4c07 0%, #e8b64c 18%, #fff3b0 38%, #c8922a 55%, #ffe98a 74%, #8a5a0e 100%); mix-blend-mode: hard-light; --sat-m: .7; } /* ── FANTOME — « ghost rare » (photos admin) : voile argente pastel qui fantomise l'illustration, presque monochrome, doux. */ .ig-carte-reelle.mf-fantome .v-fond, .ig-carte-reelle.mp-fantome .v-perso, .ig-carte-reelle.mc-fantome .v-cadre, .ig-carte-reelle.mv-fantome .v-voile { background: radial-gradient(130% 90% at 30% 20%, rgba(255,255,255,.9) 0 24%, transparent 60%), radial-gradient(120% 80% at 75% 65%, rgba(230,240,255,.75) 0 26%, transparent 62%), linear-gradient(118deg, #efe9ff 0%, #dff3ff 24%, #ffffff 46%, #ffe9f4 68%, #e9fff1 90%); mix-blend-mode: screen; --sat-m: .3; } /* ── VITRAIL — facettes franches, verre d'eglise : grands pans colores. */ .ig-carte-reelle.mf-vitrail .v-fond, .ig-carte-reelle.mp-vitrail .v-perso, .ig-carte-reelle.mc-vitrail .v-cadre, .ig-carte-reelle.mv-vitrail .v-voile { background: linear-gradient(64deg, transparent 49.4%, rgba(0,0,0,.55) 49.7%, rgba(0,0,0,.55) 50.3%, transparent 50.6%), linear-gradient(-41deg, transparent 33.4%, rgba(0,0,0,.5) 33.7%, rgba(0,0,0,.5) 34.3%, transparent 34.6%), linear-gradient(12deg, transparent 66.4%, rgba(0,0,0,.5) 66.7%, rgba(0,0,0,.5) 67.3%, transparent 67.6%), conic-gradient(from 15deg at 62% 38%, #ff6f7d 0 55deg, #ffc46b 0 105deg, #ffe98a 0 150deg, #7de6a0 0 205deg, #6fc4ff 0 260deg, #9a86ff 0 310deg, #ff6f7d 0 360deg); mix-blend-mode: overlay; --sat-m: .8; } /* ═══ PAS D'AURA DE MAQUETTE SUR UNE CARTE REELLE (2026-08-30) ═══════════════════ Retour admin : « sur Aria il y a une aura autour de la carte, un cadre bleu — une erreur ? il ne le fait que sur Aria et Kazuha, pour Kazuha il est jaune ». Oui, et c'est un reste de maquette. `.rarity-rare::before`, `.rarity-legendary::before` et `.rarity-celestial::before` posent un halo radial `inset:-10px` DERRIERE la carte, pour donner du relief a un rectangle CSS qui n'en avait pas. Une carte reelle porte deja son propre liseré et son propre vernis : le halo fait doublon et deborde. `rarity-common` n'a pas de regle — d'ou l'absence sur Hana, ce que l'admin avait remarque avant moi. On neutralise le pseudo-element uniquement sur les cartes reelles ; les maquettes restantes gardent leur aura, elles en ont besoin. */ .ig-spawn-card.ig-carte-reelle::before, .ig-spawn-card.ig-carte-reelle::after { content: none !important; } /* ⚠️ `igSpawnIn` porte `fill-mode: both` : son transform final PRIME sur le style inline du JS, et la carte restait figee alors que la boucle tournait. On la coupe. */ .rarity-section.cards-spawn .ig-spawn-card.ig-carte-reelle, .rarity-carousel-wrapper .ig-spawn-card.ig-carte-reelle { animation: none !important; } @media (prefers-reduced-motion: reduce) { .ig-spawn-card.ig-carte-reelle { transform: none !important; } } /* Les etincelles de la Celeste restent utiles : elles vivent HORS de l'image. */ .ig-carte-reelle .ig-sparkles { z-index: 3; }