/* Elaris — habillage saisonnier « Halloween ». ------------------------------------------------------------------------------------------ Ce fichier ne redéfinit QUE des tokens et le décor de fond. Aucun composant n'est réécrit : le site reste Afterglow, il change d'heure et de saison. C'est ce qui permet de l'allumer et de l'éteindre sans rien casser, et de l'ouvrir aux joueurs plus tard sans y revenir. CE QUI N'EST PAS TOUCHÉ, ET POURQUOI : les couleurs de rareté (--tier-*) et les cadres de carte (--frame-*). Ce sont des repères de jeu — un joueur reconnaît une Légendaire à son or avant d'avoir lu le mot. Les teinter en orange rendrait toute la collection illisible pendant la durée du thème, pour un gain purement décoratif (décision Noé, 2026-10-16). Chargé uniquement pour les admins (voir layout.php) et activé par l'interrupteur des Paramètres, qui pose data-saison="halloween" sur . */ html[data-saison="halloween"] { /* Fonds — on quitte le bleu-nuit pour une nuit violette, plus chaude sans jamais virer au brun : le site garde sa profondeur, c'est la température qui change. */ --bg: #080510; --bg-deep: #0b0715; --bg-raised: #140c1f; --bg-card: #180f24; --bg-overlay: rgba(10, 6, 18, 0.88); /* Encres — le texte principal reste presque blanc (lisibilité d'abord) ; seules les teintes secondaires prennent le violet, là où elles ne portent pas d'information critique. */ --ink: #f3ecf8; --ink-soft: #ebe0f3; --ink-dim: #a68cba; --ink-faint: #6f5880; /* Accent — orange citrouille. Le périwinkle disparaît complètement, sinon les deux familles de bleu et d'orange se disputent chaque écran. */ --accent: #ff9a3c; --accent-deep: #e0661a; --accent-soft: rgba(255, 154, 60, 0.14); /* Alias historique : tout l'ancien code appelle --gold, il suit l'accent. */ --gold: #ff9a3c; --gold-deep: #e0661a; --gold-soft: rgba(255, 154, 60, 0.14); /* ═══════════════════════════════════════════════════════════════════════════════════════ RÉGLAGES DU DÉCOR — tout ce qui se touche sans lire le reste du fichier. Tout est ici, en un bloc : chaque valeur dit ce qu'elle fait et dans quel sens elle bouge. Rien à recompiler, le site sert ce fichier tel quel ; un rechargement suffit (Ctrl+Maj+R si le navigateur garde l'ancienne version). ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── Les toiles ────────────────────────────────────────────────────────────────────────── */ /* Largeur de la toile de DROITE. Plus grand = toile plus imposante, et l'araignée suit toute seule : sa position se calcule à partir de cette largeur. */ --hw-toile: 400px; /* Largeur de la toile de GAUCHE, réglée à part : c'est un dessin en portrait, une fois et demie plus haut que large. Lui donner la valeur de droite la ferait descendre sur la moitié de l'écran. */ --hw-toile-g: 220px; /* Transparence des deux toiles. 1 = encre pleine, 0.3 = à peine suggérées. */ --hw-toile-opacite: 0.62; /* ── L'araignée et son fil ─────────────────────────────────────────────────────────────── */ /* Largeur de la bête. Le dessin garde ses proportions, la hauteur suit. */ --hw-bete: 30px; /* POSITION DU FIL, mesurée sur le dessin : la colonne 167 sur 620 de cobwebr.webp est celle où l'encre descend sans interruption le plus longtemps (de y=150 à y=249), c'est-à-dire le fil qui pend. 0.731 = sa distance au bord droit, en fraction de la largeur de la toile ; 0.491 = l'endroit où le trait s'arrête, en fraction de la hauteur. Si tu changes le dessin, ce sont ces deux fractions qu'il faut remesurer. */ --hw-fil: calc(var(--hw-toile) * 0.731); --hw-moyeu: calc(var(--hw-toile) * 0.7177 * 0.491); /* POUR DÉPLACER L'ARAIGNÉE À LA MAIN, sans toucher à la mesure ci-dessus. Ce sont des décalages, en pixels : positif = vers la GAUCHE et vers le BAS. Mets 0 pour revenir sur le fil dessiné. */ --hw-bete-dx: 0px; --hw-bete-dy: 0px; /* Le fil : sa couleur et son épaisseur. Une couleur plus claire le rend plus visible sur le ciel sombre ; au-delà de 2 px il cesse de ressembler à de la soie. */ --hw-fil-couleur: rgba(60, 57, 83, 0.745); --hw-fil-epaisseur: 1px; /* Teinte de la BÊTE. `none` garde le dessin tel quel. Exemples : hue-rotate(40deg) → vers le roux saturate(0) brightness(1.4) → gris clair, presque blanche brightness(0.6) → plus sombre, plus discrète Attention : ce filtre s'applique à tout l'élément, donc il teinte AUSSI le fil. Si tu veux une araignée d'une autre couleur sans toucher au fil, redonne-moi le PNG recoloré. */ --hw-bete-filtre: none; /* ── Le booster ────────────────────────────────────────────────────────────────────────── */ /* Le dessin d'Halloween. Il remplace celui de l'année, il ne le recolore pas. Pour revenir au pack de base, mets l'autre chemin — rien d'autre à changer. */ --hw-pack: url('/assets/images/halloween/pack-halloween.webp'); /* ── La lune ───────────────────────────────────────────────────────────────────────────── */ /* Hauteur dans le ciel : petit = haut, grand = bas. Et distance au bord droit. */ --hw-lune-haut: 15%; --hw-lune-droite: 5%; /* Diamètre du disque. */ --hw-lune-taille: 128px; --border: rgba(255, 154, 60, 0.18); --border-strong: rgba(255, 154, 60, 0.34); /* Le vert de succès vire au vert sorcière, le rouge d'erreur reste franc : un message d'erreur n'est pas un élément de décor. */ --success: #9ad67f; } /* ── Décor de fond ───────────────────────────────────────────────────────────────────────── */ /* Le dégradé du canvas est écrit en dur dans base.css (il ne passe pas par les tokens), donc il se redéfinit ici explicitement — sinon le fond resterait bleu sous une interface orange. */ html[data-saison="halloween"] .bg-canvas { background: linear-gradient(180deg, #1a0d22 0%, #110819 55%, #080510 100%); } /* La lune. Le halo existait déjà (.bg-glow) : il devient un astre. TROIS RÉGLAGES APPRIS À L'ÉCRAN, le premier jet était un gros soleil flou : - la TAILLE (240px hérités de base.css → 128px) : au-delà, elle cesse d'être un détail de fond et devient le sujet de la page, devant le pack qu'on vient ouvrir ; - la COULEUR : ivoire à peine chaud, pas orange saturé. Une lune d'octobre est blanche, c'est la brume autour d'elle qui est orange. En plein orange, elle se lit comme un soleil ; - le HALO, resserré (62% → 50%) et désormais porté par une ombre portée large plutôt que par un flou : le disque reste net, et c'est cette netteté qui dit « lune ». */ /* `:not(.two)` : le second halo porte AUSSI la classe .bg-glow. Sans cette exclusion il héritait du disque net, de l'ombre et du `top`, et devenait une deuxième lune violette collée en haut à gauche — une erreur invisible dans ce fichier, qui ne se voit qu'à l'écran. */ html[data-saison="halloween"] .bg-glow:not(.two) { width: var(--hw-lune-taille); height: var(--hw-lune-taille); /* Dans la marge droite plutôt qu'au milieu du ciel : sur un grand écran, la colonne de contenu fait 1180 px au centre et la lune n'y touche pas. Au centre du ciel, elle passait derrière les titres de page — lisibles, mais posés sur un disque clair. DESCENDUE sous la toile depuis que celle-ci occupe le coin (2026-10-19) : collées, la toile se détachait en clair sur le disque et l'araignée se découpait dessus en ombre chinoise. REMONTÉE le 2026-10-22 (retour Noé : « tu peux monter la lune un peu »). Elle avait dû descendre à 44 % pour laisser passer l'araignée ; depuis que celle-ci pend du fil dessiné, à 219 px du bord droit, leurs deux colonnes ne se croisent plus du tout — la lune occupe les 160 premiers pixels depuis la droite, l'araignée commence à 219. Le conflit n'existe plus, la contrainte non plus. */ top: var(--hw-lune-haut); right: var(--hw-lune-droite); background: /* Cratères : deux voiles à peine plus sombres, assez pour que le disque ne soit pas une pastille plate, trop faibles pour qu'on les identifie comme des taches. */ radial-gradient(circle at 62% 34%, rgba(214, 196, 170, 0.5), transparent 22%), radial-gradient(circle at 38% 64%, rgba(214, 196, 170, 0.38), transparent 18%), radial-gradient(circle at 44% 40%, #fff6e6, #ffe9c6 58%, #f6d9a8 78%, #e9c48c 100%); border-radius: 50%; filter: none; box-shadow: 0 0 44px 12px rgba(255, 214, 150, 0.22), 0 0 120px 40px rgba(255, 154, 60, 0.10); } /* Fenêtre étroite : il n'y a plus de marge où loger la lune, elle tombe forcément sur le contenu. On la pousse à moitié hors du cadre, comme une lune qui se lève derrière la fenêtre — le décor survit, le contenu reste net. (Règle rétablie le 2026-10-19 : une suppression par motif, en retirant les citrouilles, l'avait emportée au passage.) */ @media (max-width: 1040px) { /* Seul le `right` change : la hauteur reste celle du bureau, et pour la même raison qu'ailleurs — une seule valeur à régler, un seul endroit où elle se discute. */ html[data-saison="halloween"] .bg-glow:not(.two) { right: -44px; } } /* Second halo : le violet froid qui répond à la lune, sans quoi tout l'écran tire au jaune. */ html[data-saison="halloween"] .bg-glow.two { background: radial-gradient(circle, rgba(150, 70, 220, 0.22), transparent 70%); } html[data-saison="halloween"] .bg-band { background: linear-gradient(180deg, transparent, rgba(255, 154, 60, 0.07) 55%, rgba(8, 5, 16, 0.92)); } /* Les étoiles deviennent des braises : même dispositif, température changée. */ html[data-saison="halloween"] .bg-stars { color: #ffc46e; } /* Brume au ras du sol. Deux couches de largeur double qui glissent en sens inverse : c'est le décalage entre les deux qui donne le mouvement, une seule couche se lirait comme un bandeau qui défile. Lente (plus de 60 s) — une brume rapide attire l'œil, or ce n'est qu'un fond. */ html[data-saison="halloween"]::before, html[data-saison="halloween"]::after { content: ''; position: fixed; left: 0; bottom: 0; z-index: 0; width: 200%; height: 26vh; pointer-events: none; background: radial-gradient(ellipse 50% 100% at 20% 100%, rgba(190, 140, 230, 0.10), transparent 70%), radial-gradient(ellipse 40% 100% at 62% 100%, rgba(255, 154, 60, 0.07), transparent 70%); animation: hw-brume 78s linear infinite; } html[data-saison="halloween"]::after { height: 17vh; animation-duration: 112s; animation-direction: reverse; opacity: 0.7; } @keyframes hw-brume { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Un fond animé n'a aucune raison de s'imposer à qui demande moins de mouvement. */ @media (prefers-reduced-motion: reduce) { html[data-saison="halloween"]::before, html[data-saison="halloween"]::after { animation: none; } } /* Toiles d'angle — DESSINS DE NOÉ (2026-10-19), à la place de celles que je calculais. Les miennes étaient géométriquement justes et sans vie : rayons réguliers, arcs identiques. Celle-ci a des fils rompus, des densités inégales, des fils qui pendent — c'est ce qu'on reconnaît comme une vraie toile. Le dessin est orienté pour le coin HAUT DROIT ; à gauche c'est le même, retourné. Un seul fichier pour les deux coins : deux dessins différents aux deux bouts du même écran, l'œil s'arrête dessus pour comprendre pourquoi ils ne se ressemblent pas. Posées sur .bg-canvas, donc fixes et derrière tout le contenu : une toile qui défile avec la page se lit comme une image de page, pas comme un décor de fenêtre. */ html[data-saison="halloween"] .bg-canvas::before, html[data-saison="halloween"] .bg-canvas::after { content: ''; position: absolute; top: 0; z-index: 0; opacity: var(--hw-toile-opacite); pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; } /* DEUX DESSINS DISTINCTS depuis le 2026-10-22, à la place d'un seul retourné. Noé en a fourni un par coin : celui de gauche descend le long du bord en longues traînes, celui de droite est plus large que haut. Un miroir du même fichier donnait deux coins symétriques — joli en géométrie, faux en toile d'araignée, et l'œil le remarque avant de savoir pourquoi. Chacun garde donc son `aspect-ratio`, celui de son fichier : forcer un ratio commun écraserait l'un des deux. */ html[data-saison="halloween"] .bg-canvas::before { left: 0; width: var(--hw-toile-g); aspect-ratio: 420 / 680; background-image: url('/assets/images/halloween/cobwebl.webp'); } html[data-saison="halloween"] .bg-canvas::after { right: 0; width: var(--hw-toile); aspect-ratio: 620 / 507; background-image: url('/assets/images/halloween/cobwebr.webp'); } /* L'ARAIGNÉE AU BOUT DE SON FIL (retour Noé 2026-10-17 : « une araignée qui monte et descend tranquillement »). Dessin de Noé depuis le 2026-10-19. Elle pend sous la toile de droite, à l'aplomb de son moyeu — c'est de là qu'un fil part. Elle vit sur body::after et non sur .bg-canvas, dont les deux pseudo-éléments portent désormais les toiles. Le fil est un fond d'un pixel accroché en haut, la bête un fond posé en bas, et c'est la HAUTEUR de l'élément qu'on anime : le fil s'allonge et l'araignée descend avec, d'un seul mouvement. Animer sa position aurait décollé le fil du haut, ou obligé à le laisser pendre sous elle quand elle remonte. ORDRE DES FONDS : le premier est peint PAR-DESSUS, donc l'araignée passe devant son fil — à l'envers, le trait lui barrait le corps (retour Noé 2026-10-19). */ html[data-saison="halloween"] body::after { content: ''; /* Elle part du MOYEU de la toile, pas du haut de la fenêtre (retour Noé 2026-10-22 : « déplace l'araignée correctement par rapport à la toile de droite »). Avant, le fil descendait depuis le bord de l'écran et traversait la toile de part en part. */ position: fixed; top: calc(var(--hw-moyeu) + var(--hw-bete-dy)); right: calc(var(--hw-fil) - var(--hw-bete) / 2 + var(--hw-bete-dx)); z-index: 0; filter: var(--hw-bete-filtre); /* PLUS PETITE (retour Noé 2026-10-22). À 48 px elle pesait autant que les icônes du bandeau juste à côté ; un décor de fond ne doit pas se disputer la place avec l'interface. */ width: var(--hw-bete); height: 150px; background: url('/assets/images/halloween/araignee.png') bottom center / var(--hw-bete) auto no-repeat, /* LE FIL S'ARRÊTE SUR SON DOS (retour Noé 2026-10-19 : « le fil dépasse de ses fesses »). À 100 % il descendait jusqu'au bas de l'élément, et le dessin est transparent entre les pattes : on le voyait ressortir dessous. Il s'arrête au sommet de l'abdomen. */ /* Le fil : un fond d'une seule couleur, dont la largeur et la teinte sont réglables en haut du fichier. Il s'arrête sur le dos de la bête — la marge suit donc sa taille. */ linear-gradient(var(--hw-fil-couleur), var(--hw-fil-couleur)) top center / var(--hw-fil-epaisseur) calc(100% - var(--hw-bete) * 1.1) no-repeat; animation: hw-araignee 41s ease-in-out infinite; pointer-events: none; } /* Descente IRRÉGULIÈRE (retour Noé : « c'est trop linéaire, faudrait un peu de hasard »). Un aller-retour régulier se devine au bout de deux passages et devient un métronome dans le coin de l'œil. Ici elle file, se reprend, remonte un peu, redescend plus bas : les paliers sont choisis pour qu'aucun intervalle ne se répète, et le cycle complet dure assez longtemps (41 s) pour qu'on ne le reconnaisse pas. Elle redescend aussi moins bas qu'avant. */ @keyframes hw-araignee { 0% { height: 118px; } 9% { height: 173px; } 17% { height: 146px; } 31% { height: 238px; } 40% { height: 199px; } 52% { height: 262px; } 61% { height: 164px; } 73% { height: 221px; } 86% { height: 134px; } 100% { height: 118px; } } @media (prefers-reduced-motion: reduce) { html[data-saison="halloween"] body::after { animation: none; height: 190px; } } @media (max-width: 760px) { /* Les toiles prennent la moitié d'un écran de téléphone à leur taille de bureau : réduites, elles restent un décor au lieu de se poser en travers du bandeau. On ne redit QUE les tailles : position du fil, épaisseur, couleur et marge sous la bête se recalculent à partir d'elles. C'est le but du bloc de réglages — une valeur à changer, pas cinq à tenir d'accord. */ html[data-saison="halloween"] { --hw-toile: 170px; --hw-toile-g: 112px; --hw-bete: 27px; } } /* UN VRAI DESSIN D'HALLOWEEN, et non le pack de l'année recoloré (retour Noé 2026-10-22). Jusqu'ici on tordait l'image de base par filtre : grayscale pour neutraliser, sepia pour reposer une teinte, puis rotation vers l'orange citrouille. Ça marchait, mais ça ne donnait qu'un pack orange — alors que là il y a des citrouilles, des chauves-souris et un ciel. Un filtre ne dessine rien ; il ne pouvait pas faire apparaître ça. LE REFLET SUIT LA MÊME IMAGE. .ag-sweep se découpe à la silhouette du pack par un masque : s'il gardait celle du dessin de base, la lumière baverait là où les deux contours ne coïncident pas. Les deux dessins font 432 × 731 et leurs silhouettes ne diffèrent que de 2,5 % (le bord anticrénelé), mais c'est l'image qui doit faire autorité, pas la ressemblance. */ html[data-saison="halloween"] .ag-pack-body { background-image: var(--hw-pack); } html[data-saison="halloween"] .ag-sweep { -webkit-mask-image: var(--hw-pack); mask-image: var(--hw-pack); } /* ── Retouches ponctuelles ───────────────────────────────────────────────────────────────── */ /* LE LOSANGE DES CRISTAUX NE CHANGE PAS DE COULEUR (retour Noé 2026-10-16 : « c'est une monnaie, pas un truc qu'on change de couleur comme on veut »). Il suit --accent dans base.css, donc il virait à l'orange avec le reste : c'est précisément ce que la règle du projet interdit — le joueur reconnaît la monnaie à ce symbole, il doit être identique partout, en toute saison. Valeur réécrite en dur, et non via une variable : si --accent redevenait une piste, le losange repartirait avec lui. */ html[data-saison="halloween"] .gem { background: #bcd7ff; box-shadow: 0 0 7px rgba(188, 215, 255, 0.6); } /* Même raison pour le gros cristal de la boutique : c'est le MÊME objet, en grand. Il tirait sa facette claire et sa facette sombre de --accent / --accent-deep, donc il virait aussi. */ html[data-saison="halloween"] .sh-gem { background: linear-gradient(150deg, #e3eeff, #bcd7ff 45%, #82b4e8); } /* L'interrupteur des Paramètres a sa couleur « allumé » écrite en dur en périwinkle : sans ceci, le bouton qui commande Halloween serait le seul élément bleu de l'écran. */ html[data-saison="halloween"] .set-switch-input:checked + .set-switch { background: rgba(255, 154, 60, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 154, 60, 0.6); }