/* ============================================================ TEMPLE DE LA PAZ — feuille de style partagée Palette : --nuit : fond nocturne du temple --pierre : murs de pierre --or : or étoile (Power Star) --rouge : rouge Champi --creme : crème Champi --bois : bois des pancartes ============================================================ */ :root{ --nuit:#171030; --nuit-2:#221743; --pierre:#3d3560; --pierre-claire:#544a80; --or:#ffd23f; --or-sombre:#c99a1e; --rouge:#e63946; --creme:#fff4e0; --bois:#8a5a33; --bois-sombre:#5e3a1e; --encre:#241a3d; --velours:#4a1030; /* ciel de jour */ --jour-haut:#3f9ff2; --jour-bas:#a5dcff; font-size:16px; } *{margin:0;padding:0;box-sizing:border-box;} html,body{height:100%;} /* coupe les micro-débordements horizontaux (zoom d'apparition de scène, sprites qui traversent l'écran…) SANS créer de conteneur de défilement (clip ≠ hidden) — les zones à glisser internes (le monde sur téléphone) ne sont pas concernées */ html{overflow-x:clip;} body{ background:var(--nuit); color:var(--creme); font-family:'Nunito',sans-serif; /* clip et PAS hidden : hidden faisait du body une zone de défilement interne → window.scrollTo ne faisait RIEN (bug « le hall s'ouvre défilé ») ; clip coupe le débordement sans voler le défilement */ overflow-x:clip; } button{font-family:inherit;cursor:pointer;} :focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px;} /* ---------- Scènes ---------- */ .scene{display:none;min-height:100vh;position:relative;animation:sceneIn .6s ease both;} .scene.active{display:block;} /* ⚠️ l'apparition N'ANIME PLUS l'opacité (seulement un léger zoom) : le panneau de preview GÈLE parfois le rAF au changement de scène, et une anim d'opacité 0→1 figée laissait la scène (ex. la Galerie) INVISIBLE = « le clic ne mène nulle part » (owner 2026-07-06). L'opacité de base reste 1, donc visible même anim gelée ; l'iris gère déjà la transition dramatique entre lieux. */ @keyframes sceneIn{from{transform:scale(1.015);}to{transform:none;}} /* le FOYER et la GALERIE sont des HUBS atteints par l'iris (fondu au noir) : l'apparition-zoom sceneIn par-dessus donnait une transition « sale » (on voyait la salle 3D du foyer se recomposer) et rejouait à CHAQUE retour à la galerie (owner 2026-07-16). L'iris suffit → on coupe sceneIn sur ces deux scènes ; elles apparaissent nettes, à l'échelle 1. */ #foyer, #galerie{animation:none;} /* ⚠ MAIS la galerie doit GARDER un contexte de transform : son damier .sol est en position:fixed et n'est censé se voir qu'AU BAS DE LA PAGE. Sans transform sur la scène, « fixed » s'ancre au bas de l'ÉCRAN → les portes/ cadres/torches « clippent » dans le damier au scroll (owner 2026-07-16 : « avant on le voyait pas avant de scroller tout en bas »). C'est sceneIn qui posait ce contexte ; on le remet en STATIQUE (translateZ(0) = invisible, pas de zoom) → .sol redevient ancré au bas de la galerie. */ #galerie{transform:translateZ(0);} h1,h2,.display{font-family:'Luckiest Guy',cursive;letter-spacing:.04em;font-weight:400;} /* ============================================================ SCÈNE 1 — L'ENTRÉE DU TEMPLE (château façon Mario 64) Le ciel change tout seul : jour entre 7 h et 19 h, nuit sinon. ============================================================ */ #entree{ min-height:100vh; overflow:hidden; background:linear-gradient(#0d0a20 0%, var(--nuit) 45%, #241945 100%); transition:background 2s ease; } body.jour #entree{ background:linear-gradient(var(--jour-haut) 0%, #6fbdf7 55%, var(--jour-bas) 100%); } /* — Ciel — */ .ciel{position:absolute;inset:0;pointer-events:none;} .etoile{position:absolute;background:var(--creme);border-radius:50%; animation:scintille 3s ease-in-out infinite;transition:opacity 2s ease;} body.jour .etoile{opacity:0 !important;animation:none;} @keyframes scintille{0%,100%{opacity:.25;}50%{opacity:1;}} .lune{ position:absolute;top:8%;right:12%;width:90px;height:90px;border-radius:50%; background:radial-gradient(circle at 35% 35%, #fffbe8, #f5e3a1 60%, #d9bd6a); box-shadow:0 0 60px 18px rgba(255,235,170,.25); cursor:pointer;border:none;z-index:4; transition:opacity 2s ease, transform .3s ease; } .lune:hover{transform:scale(1.05);} body.jour .lune{opacity:0;pointer-events:none;} .soleil{ position:absolute;top:9%;left:11%;width:96px;height:96px;border-radius:50%; background:radial-gradient(circle at 40% 38%, #fffde5, #ffe66e 55%, #ffb62e); box-shadow:0 0 80px 30px rgba(255,214,90,.45); cursor:pointer;border:none;z-index:4; transition:opacity 2s ease, transform .3s ease; } .soleil:hover{transform:scale(1.05);} /* ⭐⭐ LE CIEL SUIT LE MONDE (2026-09-19) — l'enveloppe du soleil, de la lune, des nuages et de Lakitu (bâtie par temple.js : cielDansLeMonde). Large comme LE MONDE et décalée de son défilement : sur un grand écran, 100 % et 0 — rien ne change ; sur un téléphone le ciel s'étale sur les 252vw du monde et glisse avec lui, au lieu de s'entasser sur 375 px. ⚠ déplacée par `left`, JAMAIS par `transform` (un contexte d'empilement déclasserait le soleil). */ .ciel-monde{ position:absolute; top:0; height:100%; pointer-events:none; left:calc(var(--monde-x, 0px) * -1); width:var(--monde-l, 100%); } .ciel-monde > .soleil, .ciel-monde > .lune{pointer-events:auto;} body.nuit .soleil{opacity:0;pointer-events:none;} /* les petits haut-parleurs discrets (fond sonore · bruitages · musique) : collés au coin de l'ÉCRAN, sur TOUTES les pages, toujours visibles quelle que soit la taille de la fenêtre */ #controlesSon{ position:fixed;left:10px;bottom:10px;z-index:450; display:flex;flex-direction:column;gap:2px; } .bouton-son{ position:relative;background:none;border:none;padding:4px; font-size:21px;line-height:1;cursor:pointer;opacity:.42; transition:opacity .3s ease, transform .3s ease; } .bouton-son:hover,.bouton-son:focus-visible{opacity:.95;transform:scale(1.12);} /* coupé : éteint, une petite croix rouge dans le coin */ .bouton-son.coupe{opacity:.3;} .bouton-son.coupe:hover,.bouton-son.coupe:focus-visible{opacity:.6;} .bouton-son.coupe::after{ content:"✕";position:absolute;right:-1px;top:-1px; font-size:11px;font-weight:bold;color:var(--rouge,#e63946); } /* Chaque nuage part hors écran à gauche et traverse tout le ciel, lentement ; arrivé à droite, il ressort… et un « nouveau » entre par la gauche (c'est la boucle de l'animation). Les nuages sont dessinés en SVG façon Mario : joufflus, yeux qui clignent, joues. */ .nuage{ position:absolute;left:0; opacity:0;transition:opacity 2s ease;pointer-events:none; animation:traversee 180s linear infinite; } .nuage svg{ width:100%;height:auto;display:block; animation:nuageRespire 4.6s ease-in-out infinite; } .nuage:nth-of-type(2n) svg{animation-delay:-2.3s;} body.jour .nuage{opacity:.95;} @keyframes traversee{ from{transform:translateX(-150px);} to{transform:translateX(calc(var(--monde-l, 100vw) + 50px));} /* ils traversent LE MONDE, pas l'écran */ } /* petite respiration moelleuse du nuage */ @keyframes nuageRespire{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.035,.965);} } /* les yeux clignent de temps en temps */ .nuage-yeux{ transform-box:fill-box;transform-origin:center; animation:clignote 6s linear infinite; } @keyframes clignote{ 0%,90%,97%,100%{transform:scaleY(1);} 92.5%,95%{transform:scaleY(.12);} } /* — Lakitu : rare visiteur du ciel, de jour comme de nuit — */ #lakitu{ position:absolute;top:20%;left:0;width:72px;z-index:4; pointer-events:none;display:none; } #lakitu.vole{display:block;animation:lakituTraverse 26s linear forwards;} #lakitu img{ width:100%;display:block;image-rendering:pixelated; /* le GIF regarde à gauche : on le retourne pour suivre sa route */ animation:lakituFlotte 2.2s ease-in-out infinite; } @keyframes lakituTraverse{ from{transform:translateX(-90px);} to{transform:translateX(calc(var(--monde-l, 100vw) + 50px));} } @keyframes lakituFlotte{ 0%,100%{transform:scaleX(-1) translateY(0);} 50%{transform:scaleX(-1) translateY(-9px);} } /* — Titre — */ .titre-entree{ position:absolute;top:7%;left:50%;transform:translateX(-50%); text-align:center;width:100%;padding:0 1rem;z-index:5; pointer-events:none; /* laisse passer les clics vers le soleil et la lune */ } .titre-entree h1{ font-size:clamp(2.4rem,7vw,4.6rem);color:var(--or); text-shadow:0 4px 0 var(--or-sombre), 0 8px 0 rgba(0,0,0,.45); animation:flotte 5s ease-in-out infinite; } .titre-entree p{ margin-top:.8rem;font-weight:700;color:#cfc4f0;font-size:1.05rem; text-shadow:0 2px 6px rgba(0,0,0,.6);transition:color 2s ease; } body.jour .titre-entree p{color:#20456b;text-shadow:0 1px 3px rgba(255,255,255,.35);} @keyframes flotte{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} /* — Terrain : bande de sol pleine largeur, derrière la carte postale, pour que les bords (si l'écran est très large) restent verts et non ciel — */ .terrain{ position:absolute;left:0;right:0;bottom:0;height:16vh; background:linear-gradient(#2a4a30,#16251b); transition:background 2s ease;z-index:1; } body.jour .terrain{background:linear-gradient(#4ea94e,#3a8f43);} /* le décor (collines, cascade, douves…) vit DANS le même dessin que le château : il s'assombrit davantage la nuit */ .decor-groupe{transition:filter 2s ease;} body.nuit .decor-groupe{filter:brightness(.5) saturate(.7);} /* filets d'eau qui tombent (la cascade) */ .cascade-fils line{transform:translateY(0);} .cascade-fils{animation:chute .9s linear infinite;} @keyframes chute{to{transform:translateY(32px);}} /* les papillons naissent et s'effacent en fondu */ .papillon{transition:opacity 1.4s ease;} /* écume qui frémit au pied de la cascade */ .ecume{ transform-box:fill-box;transform-origin:center; animation:ecume 1.5s ease-in-out infinite alternate; } @keyframes ecume{to{transform:scale(1.18);}} /* ---------- Décor éditable : blocs, ennemis, arbres, herbe ---------- */ #calqueDecor{pointer-events:none;transition:filter 2s ease;} body.nuit #calqueDecor{filter:brightness(.5) saturate(.7);} .deco{transform-box:fill-box;transform-origin:center;} /* blocs : léger flottement */ .deco-bloc{animation:flotteBloc 3.2s ease-in-out infinite alternate;} .deco-bloc:nth-of-type(4n){animation-delay:-1.1s;} .deco-bloc:nth-of-type(4n+2){animation-delay:-2.2s;} @keyframes flotteBloc{to{transform:translateY(6px);}} /* ennemis marcheurs : patrouille aller-retour, retournés dans le sens de la marche (les GIF regardent vers la gauche au repos). .deco-marche est un GROUPE contenant l'ennemi ET son ombre : les deux se déplacent donc ensemble. */ .deco-marche{ transform-box:fill-box;transform-origin:center; animation:patrouille 6s linear infinite; } @keyframes patrouille{ 0% {transform:translateX(0) scaleX(-1);} 49.9% {transform:translateX(var(--roam,40px)) scaleX(-1);} 50.1% {transform:translateX(var(--roam,40px)) scaleX(1);} 100% {transform:translateX(0) scaleX(1);} } /* ---------- La vie sauvage : lucioles, papillons, oiseaux, Cheeps ---------- */ #calqueVie{pointer-events:none;} body.edition #calqueVie{display:none;} /* pas dans les pattes pendant l'édition */ body.edition #calqueVieFond{display:none;} /* lucioles : uniquement la nuit (elles brillent, pas de filtre nuit ici) */ #calqueVie .luciole{display:none;} body.nuit #calqueVie .luciole{display:block;} /* papillons : uniquement le jour */ body.nuit #calqueVie .papillon{display:none;} /* battement d'ailes des papillons */ .papillon .aile{transform-box:fill-box;} .papillon .aile-g{transform-origin:right center;animation:battement .34s ease-in-out infinite alternate;} .papillon .aile-d{transform-origin:left center;animation:battement .34s ease-in-out infinite alternate;} @keyframes battement{from{transform:scaleX(1);}to{transform:scaleX(.4);}} /* les oiseaux des packs (planches fenêtrées par clipPath) : cliquables */ .oiseau-luxe{pointer-events:auto;cursor:pointer;} /* derrière le rideau de la cascade : une ombre sombre à travers l'eau. L'opacité vit DANS le filtre : le fondu inline des poules (style=) écraserait une règle opacity classique */ .oiseau-luxe.ombre-eau image, image.ombre-eau{filter:brightness(0) opacity(.45);} /* l'ombre au sol des oiseaux s'estompe quand ils s'envolent */ .oiseau-ombre{transition:opacity .4s ease;} /* la plante piranha figée de terreur devant la roue du paon */ .deco-marche.plante-apeuree{animation-play-state:paused;} .plante-apeuree image{animation:planteTremble .14s linear infinite;} @keyframes planteTremble{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(-1.2px,-1px);} 75%{transform:translate(1.2px,0);} } @media (prefers-reduced-motion: reduce){ .plante-apeuree image{animation:none;} } /* Cheep Cheeps : attrapables ! (les Fishbones de nuit, EUX, mordent) */ #calqueVie image{image-rendering:pixelated;} .cheep{pointer-events:auto;cursor:grab;} .cheep.fishbone{cursor:not-allowed;} body.cheep-en-main{cursor:grabbing;} body.cheep-en-main .cheep{cursor:grabbing;} .cheep.flop{ transform-box:fill-box;transform-origin:center bottom; animation:cheepFlop .5s ease-in-out infinite; } @keyframes cheepFlop{ 0%,100%{transform:translateY(0) rotate(0);} 30%{transform:translateY(-7px) rotate(-14deg);} 60%{transform:translateY(0) rotate(10deg);} } .cheep.mort{ transform-box:fill-box;transform-origin:center; animation:cheepMort 1s ease-in forwards; } @keyframes cheepMort{ 30%{opacity:1;transform:rotate(180deg) translateY(-4px);} 100%{opacity:0;transform:rotate(180deg) translateY(6px);} } /* éclaboussures */ .splash-onde{ fill:none;stroke:rgba(234,247,255,.85);stroke-width:1.6; transform-box:fill-box;transform-origin:center;pointer-events:none; animation:splashOnde .6s ease-out forwards; } @keyframes splashOnde{from{opacity:.9;transform:scale(.5);}to{opacity:0;transform:scale(2.4);}} .splash-goutte{ fill:#eaf7ff;pointer-events:none; transform-box:fill-box;transform-origin:center; animation:splashGoutte .55s ease-out forwards; } @keyframes splashGoutte{ from{opacity:.95;transform:translate(0,0);} to{opacity:0;transform:translate(var(--gx,0), var(--gy,-16px));} } /* le Lunge Fish sort la tête de l'eau… et juge */ .lunge{ transform-box:fill-box;transform-origin:center bottom; animation:lungeMonte .7s ease-out both;pointer-events:none; } .lunge.replonge{animation:lungePlonge .85s ease-in forwards;} /* la mousse à sa ligne d'eau apparaît avec lui, s'efface quand il replonge */ .lunge-mousse{pointer-events:none;animation:lungeMousseIn .7s ease-out both;} .lunge-mousse.disparait{animation:lungeMousseOut .8s ease forwards;} @keyframes lungeMousseIn{from{opacity:0;}to{opacity:.92;}} @keyframes lungeMousseOut{from{opacity:.92;}to{opacity:0;}} @keyframes lungeMonte{from{transform:translateY(46px);opacity:0;}to{transform:translateY(0);opacity:1;}} @keyframes lungePlonge{from{transform:translateY(0);opacity:1;}to{transform:translateY(46px);opacity:0;}} /* l'étoile-récompense au-dessus du château */ #etoileChateau{ cursor:pointer; transform-box:fill-box;transform-origin:center; animation:etoileDanse 2.4s ease-in-out infinite; } @keyframes etoileDanse{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} #etoileChateau.prise{animation:etoilePrise .9s ease-out forwards;pointer-events:none;} @keyframes etoilePrise{ 30%{opacity:1;transform:translateY(-14px) scale(1.35);} 100%{opacity:0;transform:translateY(-44px) scale(.6);} } /* ---------- La nuée du crépuscule (oiseaux qui rentrent au nid) ---------- */ #nuee{ position:absolute;top:13%;left:0;width:110px;height:44px;z-index:3; pointer-events:none;opacity:0;transition:opacity 2s ease; animation:traverseNuee 78s linear infinite; } body.crepuscule #nuee{opacity:1;} /* la volée traverse le ciel puis attend, repliée, hors de l'écran */ @keyframes traverseNuee{ 0%{transform:translate(112vw,0);} 52%{transform:translate(-26vw,9vh);} 100%{transform:translate(-26vw,9vh);} } .oiseau-nuee{position:absolute;width:14px;} .oiseau-nuee svg{ width:100%;height:auto;display:block;transform-origin:center; animation:battreNuee .5s ease-in-out infinite alternate; } /* les ailes battent (on aplatit un peu l'oiseau, façon vol lointain) */ @keyframes battreNuee{from{transform:scaleY(1);}to{transform:scaleY(.42);}} /* ---------- Fenêtres ouvertes : cuisine (fumée) & bain (vapeur) ---------- */ #fenetresOuvertes{opacity:0;transition:opacity 3s ease;pointer-events:none;} body.crepuscule #fenetresOuvertes, body.nuit #fenetresOuvertes{opacity:1;} .volute{ fill:#8f8ba6; transform-box:fill-box;transform-origin:center bottom; animation:monteFumee 5.5s ease-out infinite; } .fumee-vapeur .volute{fill:#e9eef8;} @keyframes monteFumee{ 0%{opacity:0;transform:translateY(0) scale(.3);} 22%{opacity:.6;} 100%{opacity:0;transform:translateY(-34px) scale(1.3);} } @media (prefers-reduced-motion: reduce){ #nuee{animation:none;opacity:0 !important;} .oiseau-nuee svg,.volute{animation:none;} } /* ---------- Étoile filante (la nuit, cliquable) ---------- */ #etoileFilante{ position:absolute;width:96px;height:30px;z-index:5; background:none;border:none;padding:4px;display:none;cursor:pointer; } #etoileFilante svg{width:100%;height:100%;display:block;} #etoileFilante.file{display:block;animation:etoileFile 6s linear forwards;} @keyframes etoileFile{ 0%{transform:translate(0,0);opacity:0;} 6%{opacity:1;} 88%{opacity:1;} 100%{transform:translate(-620px,235px);opacity:0;} } /* ---------- Aube et crépuscule : le ciel se teinte ---------- */ body.jour.aube #entree{ background:linear-gradient(#6f8fd8 0%, #f2a06b 55%, #ffdfae 100%); } body.jour.crepuscule #entree{ background:linear-gradient(#43407e 0%, #e8734f 55%, #ffc57e 100%); } body.jour.aube .terrain{background:linear-gradient(#4f9a52,#3f7c46);} body.jour.crepuscule .terrain{background:linear-gradient(#478a4a,#33683c);} /* lumière dorée/rasante sur le paysage et le château */ body.jour.aube .decor-groupe,body.jour.aube #corpsChateau, body.jour.aube #calqueDecor{filter:sepia(.14) brightness(.97);} body.jour.crepuscule .decor-groupe,body.jour.crepuscule #corpsChateau, body.jour.crepuscule #calqueDecor{filter:sepia(.22) brightness(.9) hue-rotate(-8deg);} body.jour.aube .titre-entree p,body.jour.crepuscule .titre-entree p{color:#fff0da;text-shadow:0 2px 5px rgba(60,30,10,.5);} /* ---------- Drapeaux hissables ---------- */ .drapeau{cursor:pointer;} .drapeau.berne{ animation:none; transform:translateY(10px) scaleY(.68); opacity:.88; } /* ---------- Transition « iris » : le cercle qui se referme aux portes ---------- Le trou rond est découpé dans le noir par une ombre géante ; sa taille est animée en JS (transitionIris). Un fin liseré doré souligne le cercle pendant le voyage. */ /* ⚠⚠ L'IRIS PASSE AU-DESSUS DE TOUT (owner 2026-08-07, bug de la Zone de Warp : « quand ça révèle la zone, ça coupe instant dessus, genre on a pas l'iris-out »). À z-index 500 il passait SOUS les voiles plein écran (la Zone de Warp est à 600, les pilules d'objet à 620-660, les boîtes de dialogue à 500 mais plus bas dans le fichier) : un voile créé PENDANT le noir se posait par-dessus l'iris, et sa réouverture se jouait derrière lui — donc invisible. Une transition n'est pas du contenu : elle couvre tout. Seul l'écran de première visite (900) reste au-dessus, il a son propre rideau. */ #iris{ position:fixed;inset:0;z-index:800;display:none;overflow:hidden; } #iris .iris-trou{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:250vmax;height:250vmax;border-radius:50%; box-shadow:0 0 0 6px rgba(255,210,63,.85), 0 0 0 300vmax #05030f; } /* ⭐ LE NOIR DE LA SÉQUENCE DU DISQUE (2026-09-14) — on parle dans le noir, puis l'iris révèle l'échoppe en fête. ⚠⚠ z-index 480 : SOUS la boîte de dialogue (500), sinon on ne verrait pas ce qu'il raconte. ⚠⚠ `pointer-events:none` et posé par `hidden`, d'un coup : gelé, ce voile ne piège aucun clic et le site reste jouable — la règle anti-gel, appliquée à l'endroit le plus dangereux du site (un écran entièrement noir). Aucune transition d'opacité ici, jamais. */ #marchandNoir{ position:fixed; inset:0; z-index:480; background:#05030f; pointer-events:none; } #marchandNoir[hidden]{display:none;} /* ---------- ÉCRAN D'ACCUEIL (première visite) ---------- Noir total, l'icône PC flotte, message Mario ; après 5 s un petit prompt apparaît et le clic révèle le site par un cercle qui s'ouvre (même technique que l'iris : un trou à box-shadow géant qui grandit). */ #introEcran{ position:fixed;inset:0;z-index:900;overflow:hidden; cursor:pointer; } /* le noir = un trou (0px) à box-shadow géant → tout l'écran est noir ; à la révélation le trou grandit depuis le point cliqué */ .intro-noir{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:0;height:0;border-radius:50%; box-shadow:0 0 0 300vmax #05030f; } .intro-contenu{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2.2rem;padding:2rem;text-align:center; } .intro-pc{ width:min(210px,44vw);height:auto;image-rendering:auto; filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(120,150,255,.15)); animation:introFlot 3.2s ease-in-out infinite alternate; } @keyframes introFlot{from{transform:translateY(-9px);}to{transform:translateY(11px);}} .intro-msg{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:clamp(.95rem,3vw,1.5rem);line-height:1.7; color:#fff4e0;letter-spacing:.02em;margin:0; /* 2 lignes nettes (la coupure est au
) tant que l'écran le permet ; ne se rétrécit qu'en dessous — max-width large + équilibrage du wrap */ max-width:min(94vw,860px);text-wrap:balance; text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 24px rgba(255,210,63,.18); } .intro-prompt{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:clamp(.7rem,1.9vw,.98rem);color:#ffd23f;margin:0; opacity:0;letter-spacing:.03em; text-shadow:0 2px 0 rgba(0,0,0,.5); } .intro-prompt.visible{animation:introClignote 1.4s ease-in-out infinite;} @keyframes introClignote{0%,100%{opacity:.35;}50%{opacity:1;}} @media (prefers-reduced-motion: reduce){ .intro-pc{animation:none;} .intro-prompt.visible{animation:none;opacity:1;} } /* ---------- La brume de l'aube : nappes qui dérivent doucement ---------- */ #calqueBrume{opacity:0;transition:opacity 3.5s ease;pointer-events:none;} body.aube #calqueBrume{opacity:1;} .brume{transform-box:fill-box;transform-origin:center;animation:brumeDerive 46s ease-in-out infinite alternate;} .brume-2{animation-duration:58s;animation-delay:-14s;} .brume-3{animation-duration:52s;animation-delay:-30s;} .brume-4{animation-duration:64s;animation-delay:-8s;} .brume-5{animation-duration:70s;animation-delay:-22s;} @keyframes brumeDerive{from{transform:translateX(-44px);}to{transform:translateX(48px);}} /* les lucioles lève-tôt sortent dès le crépuscule */ body.crepuscule #calqueVie .luciole.crepusculaire{display:block;} /* grenouille cliquable ; poules et poussins apparaissent en fondu */ .grenouille{pointer-events:auto;cursor:pointer;} .poule,.poussin{pointer-events:none;transition:opacity 1.4s ease;} /* les Swoopers se cliquent (pour les faire décoller) */ .swooper{pointer-events:auto;cursor:pointer;transition:opacity 1.4s ease;} /* ---------- Les tuyaux voyageurs ---------- */ body.tuyaux-actifs .deco-tuyau{pointer-events:auto;cursor:pointer;} body.tuyaux-actifs .deco-tuyau:hover{filter:brightness(1.15);} /* pendant le voyage, le vrai curseur se cache (c'est le dessiné qui voyage) */ body.curseur-en-tuyau, body.curseur-en-tuyau *{cursor:none !important;} .curseur-voyageur{pointer-events:none;transition:transform .5s ease-in-out, opacity .45s ease;} .etoile-tuyau{ pointer-events:auto;cursor:pointer; transform-box:fill-box;transform-origin:center; animation:etoileDanse 2.4s ease-in-out infinite; } .etoile-tuyau.prise{animation:etoilePrise .9s ease-out forwards;pointer-events:none;} .goomba-etourdi{ pointer-events:none;transform-box:fill-box;transform-origin:center bottom; animation:goombaTitube .5s ease-in-out infinite alternate; } @keyframes goombaTitube{from{transform:rotate(-9deg);}to{transform:rotate(9deg);}} /* ---------- La pancarte du panneau en bois ---------- */ .deco-panneau{pointer-events:auto;cursor:pointer;} .deco-panneau:hover{filter:brightness(1.15);} #pancarteLecture{ position:fixed;inset:0;z-index:460;background:rgba(13,10,32,.55); display:flex;align-items:center;justify-content:center;cursor:pointer; } #pancarteLecture[hidden]{display:none;} .pancarte-papier{ background:#c98d4b;border:6px solid #8a5a33;border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 0 2px #5e3a1e; max-width:min(430px, 86vw);padding:26px 30px 18px;text-align:center; color:#3b2410; } .pancarte-papier h2{ font-family:'Cinzel',serif;font-weight:700;font-size:1.35rem; margin:0 0 10px;letter-spacing:.03em; } .pancarte-papier p{font-family:'Cinzel',serif;font-size:1rem;margin:0 0 14px;line-height:1.5;} .pancarte-fermer{font-family:'Nunito',sans-serif;font-size:.75rem;opacity:.65;} /* le vitrail de Toad salue au clic */ #vitrail{cursor:pointer;} /* ---------- Le Chomp enchaîné, gardien de la porte secrète ---------- */ #calqueChomp{pointer-events:none;transition:filter 2s ease;} body.nuit #calqueChomp{filter:brightness(.6) saturate(.75);} body.edition #calqueChomp{display:none;} /* pas dans les pattes pendant l'édition */ /* mâchoires : gueule entrouverte au repos (comme dans les jeux), qui claque quand il est excité et se ferme quand il dort */ #chompCorps .chomp-haut,#chompCorps .chomp-bas{ transform-box:fill-box;transform-origin:left center; transition:transform .5s ease; } #chompCorps .chomp-haut{transform:rotate(-8deg);} #chompCorps .chomp-bas{transform:rotate(5deg);} .chomp-excite .chomp-haut{animation:chompHaut .3s ease-in-out infinite;} .chomp-excite .chomp-bas{animation:chompBas .3s ease-in-out infinite;} .chomp-endormi .chomp-haut,.chomp-endormi .chomp-bas{transform:rotate(0);animation:none;} @keyframes chompHaut{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(-26deg);}} @keyframes chompBas{0%,100%{transform:rotate(5deg);}50%{transform:rotate(15deg);}} /* endormi : yeux fermés, petits z Z — et cliquable (il ronfle !) */ .chomp-yeux,.chomp-dodo{transition:opacity .8s ease;} .chomp-endormi .chomp-yeux{opacity:0;} .chomp-endormi .chomp-dodo{opacity:1;} #chompCorps.chomp-endormi{pointer-events:auto;cursor:pointer;} /* dérangé dans son sommeil : un œil s'entrouvre… puis se referme */ .chomp-oeil-mi{opacity:0;} .chomp-ronfle .chomp-oeil-mi{animation:oeilMi 1.6s ease both;} .chomp-ronfle .chomp-arc-g{animation:arcDodoCache 1.6s ease both;} @keyframes oeilMi{0%,12%{opacity:0;}30%,72%{opacity:1;}92%,100%{opacity:0;}} @keyframes arcDodoCache{0%,12%{opacity:1;}30%,72%{opacity:0;}92%,100%{opacity:1;}} .chomp-zzz{ font-family:'Luckiest Guy',cursive;fill:#fff4e0; transform-box:fill-box;transform-origin:center; animation:zzzFlotte 2.6s ease-in-out infinite; } @keyframes zzzFlotte{0%,100%{opacity:.35;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}} /* la porte secrète invite au clic (le Chomp, lui, n'est pas d'accord) */ #porteSecrete{cursor:pointer;} @media (prefers-reduced-motion: reduce){ .chomp-excite .chomp-haut,.chomp-excite .chomp-bas,.chomp-zzz, .chomp-ronfle .chomp-oeil-mi,.chomp-ronfle .chomp-arc-g, .brume,.goomba-etourdi,.etoile-tuyau{animation:none;} } /* ---------- Blocs cassables (briques + blocs ?) ---------- */ .deco-cassable{pointer-events:auto;cursor:pointer;} .deco-cassable:hover{filter:brightness(1.2);} .bloc-bump{animation:blocBump .3s ease both !important;} @keyframes blocBump{ 0%{transform:translateY(0);} 40%{transform:translateY(-9px);} 100%{transform:translateY(0);} } /* la pièce qui jaillit d'un bloc */ .piece-jaillie{ transform-box:fill-box;transform-origin:center;pointer-events:none; animation:pieceJaillit .8s ease-out forwards; } @keyframes pieceJaillit{ 0%{opacity:1;transform:translateY(0) scale(.7);} 30%{transform:translateY(-18px) scale(1.05);} 100%{opacity:0;transform:translateY(-36px) scale(.85);} } /* les éclats d'une brique cassée */ .eclat-brique{ transform-box:fill-box;transform-origin:center;pointer-events:none; animation:eclatVole .65s ease-out forwards; } @keyframes eclatVole{ 0%{opacity:1;transform:translate(0,0) rotate(0);} 100%{opacity:0;transform:translate(var(--vx,16px), var(--vy,-30px)) rotate(200deg);} } /* « +100 » : les briques donnent des points, pas des pièces */ .points-flottants{ font-family:'Luckiest Guy',cursive;font-size:9px;fill:#fff4e0; stroke:#241a3d;stroke-width:.6;paint-order:stroke; transform-box:fill-box;transform-origin:center;pointer-events:none; animation:pointsMontent .85s ease-out forwards; } @keyframes pointsMontent{ from{opacity:1;transform:translateY(0);} to{opacity:0;transform:translateY(-22px);} } /* P-Switch : quand on l'active, son dessin est remplacé par la version « enfoncée » (fournie) — pas d'écrasement CSS */ .deco-pswitch{pointer-events:auto;cursor:pointer;} .deco-pswitch:hover{filter:brightness(1.15);} /* pendant l'effet P-Switch, les briques sont des pièces (le GIF SMW tourne tout seul, pas besoin d'animer) */ .piece-p{animation:none !important;cursor:pointer;image-rendering:pixelated;} /* pièces cachées dans le décor : cliquables, ramassées une fois pour toutes */ .deco-piece{pointer-events:auto;cursor:pointer;image-rendering:pixelated;} .deco-piece:hover{filter:brightness(1.3);} .piece-ramassee{ animation:pieceRamassee .5s ease-out forwards !important; pointer-events:none; } @keyframes pieceRamassee{ 0%{opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(-26px) scale(1.15);} } /* ennemis : cliquables… et écrasables */ .deco-ennemi{pointer-events:auto;cursor:pointer;} .ennemi-ecrase{ transform-box:fill-box;transform-origin:center bottom; animation:ecrase .38s ease-in forwards !important; } @keyframes ecrase{ 30%{opacity:1;transform:scaleY(.3) scaleX(1.3);} 100%{opacity:0;transform:scaleY(.08) scaleX(1.5);} } /* le nuage « pouf » de disparition */ .pouf{ transform-box:fill-box;transform-origin:center;pointer-events:none; animation:pouf .5s ease-out forwards; } @keyframes pouf{ from{opacity:.95;transform:scale(.4);} to{opacity:0;transform:scale(1.9) translateY(-6px);} } /* Mode Éditeur actif */ body.edition #calqueDecor{pointer-events:auto;} body.edition .deco{pointer-events:auto;cursor:grab;animation:none !important;} body.edition .deco-marche{animation:none !important;} body.edition .deco-ombre{pointer-events:none;} body.edition .porte-hitbox{pointer-events:none;} body.edition .consigne{display:none;} .deco-sel{outline:none;filter:drop-shadow(0 0 0 var(--or));} /* cadre de sélection dessiné autour de la vignette choisie */ .deco.deco-sel{ paint-order:stroke; } /* Barre d'outils de l'éditeur */ #editeurBarre{ position:fixed;left:50%;bottom:1rem;transform:translateX(-50%); z-index:400;max-width:min(680px,94vw); background:linear-gradient(#241a3d,#171030); border:2px solid var(--or);border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.6); padding:.7rem .9rem;color:var(--creme); font-family:'Nunito',sans-serif; } #editeurBarre .eb-tete{ display:flex;align-items:center;justify-content:space-between; font-family:'Luckiest Guy',cursive;color:var(--or);font-size:1.05rem; letter-spacing:.04em;margin-bottom:.55rem; cursor:grab;user-select:none;touch-action:none; /* la poignée de déplacement */ } #editeurBarre .eb-tete:active{cursor:grabbing;} #editeurBarre .eb-tete-btns{display:flex;gap:.35rem;} #editeurBarre .eb-tete button{ background:none;border:2px solid var(--or);color:var(--or); width:26px;height:26px;border-radius:50%;font-weight:800;line-height:1; font-size:.8rem; } /* fenêtre repliée : il ne reste que le bandeau, l'écran est dégagé */ #editeurBarre.eb-reduite .eb-palette, #editeurBarre.eb-reduite .eb-actions, #editeurBarre.eb-reduite .eb-aide{display:none;} #editeurBarre.eb-reduite .eb-tete{margin-bottom:0;} #editeurBarre .eb-palette{ display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem; } #editeurBarre .eb-vig{ display:flex;flex-direction:column;align-items:center;gap:.15rem; background:rgba(255,255,255,.06);border:1.5px solid rgba(255,210,63,.3); border-radius:10px;padding:.35rem .5rem;color:#e8e0f7; font-size:.68rem;font-weight:700;min-width:62px; transition:transform .12s ease, background .12s ease, border-color .12s ease; } #editeurBarre .eb-vig:hover{ transform:translateY(-2px) scale(1.04); background:rgba(255,210,63,.16);border-color:var(--or); } #editeurBarre .eb-vig img{width:26px;height:26px;object-fit:contain; image-rendering:pixelated;} #editeurBarre .eb-vig svg{width:26px;height:26px;} #editeurBarre .eb-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem;} #editeurBarre .eb-actions button{ background:rgba(255,210,63,.12);border:1.5px solid var(--or);color:var(--or); border-radius:999px;padding:.32rem .8rem;font-weight:800;font-size:.8rem; transition:background .15s ease,color .15s ease; } #editeurBarre .eb-actions button:hover{background:var(--or);color:var(--encre);} #editeurBarre .eb-aide{font-size:.72rem;color:#a89ad6;font-weight:600;text-align:center;} @media (prefers-reduced-motion: reduce){ .deco-bloc,.deco-marche{animation:none;} } /* — Le château — La largeur est plafonnée par la hauteur (152vh) : ainsi la flèche du château reste toujours SOUS le titre, même sur un écran large et court. */ /* le wrapper du monde : transparent sur grand écran, défilable au doigt sur téléphone (voir la media query 720px tout en bas). pointer-events:none pour laisser passer les clics du ciel vers le soleil/la lune — la carte, elle, les réactive. */ .monde{position:absolute;inset:0;z-index:2;pointer-events:none;} .chateau-wrap{ position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:min(100vw,152vh);z-index:2; pointer-events:auto; /* (pointer-events s'hérite : on réactive) */ } .chateau-wrap svg{ width:100%;height:auto;display:block; overflow:visible; /* les collines débordent du cadre et remplissent l'écran */ } /* le corps du château s'assombrit doucement la nuit */ #corpsChateau{transition:filter 2s ease;} body.nuit #corpsChateau{filter:brightness(.72) saturate(.88);} /* la berge et l'eau au pied du château s'assombrissent comme le décor (et non comme le château) */ .teinte-decor{transition:filter 2s ease;} body.nuit .teinte-decor{filter:brightness(.7) saturate(.8);} /* fenêtres allumées : la nuit, toutes ensemble ; au crépuscule, une par une — le JS pose un délai aléatoire par fenêtre PUIS ajoute .allumee après le premier rendu (sinon, au chargement, le navigateur peint directement « tout allumé » sans jouer la transition) */ #lueursChateau{pointer-events:none;} #lueursChateau > *{opacity:0;transition:opacity 1.8s ease;} body.nuit #lueursChateau > *, body.crepuscule #lueursChateau > .allumee{opacity:1;} /* la nuit, les panneaux bleus du vitrail s'éclairent — le médaillon de Toad, lui, reste tel quel */ .vitrail-allume{opacity:0;transition:opacity 2.5s ease;} body.nuit .vitrail-allume{opacity:1;} /* drapeaux qui flottent */ .drapeau{ transform-box:fill-box;transform-origin:left center; animation:drapeau-flotte 3.2s ease-in-out infinite; } .drapeau.d2{animation-delay:-1.1s;} .drapeau.d3{animation-delay:-2.2s;} @keyframes drapeau-flotte{ 0%,100%{transform:skewY(0deg) scaleX(1);} 50%{transform:skewY(-4deg) scaleX(.92);} } /* porte du château : battants + lumière */ #battantG,#battantD{ transform-box:fill-box;transition:transform 1s cubic-bezier(.65,0,.35,1); } #battantG{transform-origin:left center;} #battantD{transform-origin:right center;} .chateau-wrap.ouverte #battantG{transform:scaleX(.08);} .chateau-wrap.ouverte #battantD{transform:scaleX(.08);} #lumierePorte{opacity:0;transition:opacity .9s ease .3s;} .chateau-wrap.ouverte #lumierePorte{opacity:1;} /* zone cliquable invisible par-dessus la porte */ .porte-hitbox{ position:absolute;left:45.2%;top:67%;width:9.6%;height:16%; background:none;border:none; } .consigne{ position:absolute;bottom:.55rem;left:50%;transform:translateX(-50%); white-space:nowrap;font-weight:800;color:var(--or);letter-spacing:.06em; animation:pulse 1.6s ease-in-out infinite;pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.55); } @keyframes pulse{0%,100%{opacity:.55;}50%{opacity:1;}} /* ============================================================ SCÈNE 1bis — LE FOYER (grand hall dessiné, plein écran) ============================================================ */ #foyer{background:#8fbfe6;overflow:hidden;} .foyer-monde{position:absolute;inset:0;overflow:hidden;} #svgFoyer{position:absolute;inset:0;width:100%;height:100%;display:block;} /* sur petit écran (portrait), le grand hall se découvre au doigt comme le monde de l'accueil : la carte reste large et lisible, on la fait défiler */ @media (max-width:900px){ .foyer-monde{ overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:none; } .foyer-monde::-webkit-scrollbar{display:none;} #svgFoyer{position:relative;inset:auto;height:100%;width:178vh;max-width:none;} } /* ⭐⭐ LE FOYER SUR PETIT ÉCRAN ET AU DOIGT (2026-09-19, owner : « le foyer sur téléphone ») — la convention de l'accueil : LE MONDE RESTE LARGE, ON LE FAIT GLISSER. La salle garde une fenêtre virtuelle d'au moins 1400 px (mesuré : sous ~1290 px les deux portes à étoiles sont HORS CHAMP même caméra à fond) dans un conteneur qui défile ; le défilement PILOTE la caméra (js : cameraSalle3d), donc arriver au bout = regarder à fond. ⭐ la MÊME règle sert la Salle de Jeux (`.cas3d`) : mesuré, sur un téléphone l'affiche Wanted, le jukebox, le comptoir et la porte gardée ne passaient jamais à l'écran. ⚠ `130vw` garantit une vraie course de défilement sur une grande tablette (sans lui un iPad de 1366 px n'aurait que 34 px pour tout le panoramique). ⚠ sur un grand écran à souris, RIEN ne change : la règle ne s'applique pas, le conteneur ne déborde pas, la caméra validée reste la même. */ .salle3d-defile{position:absolute;inset:0;overflow:hidden;} /* ⭐ « ‹ GLISSE › » (2026-09-19) — CE QUI SE GLISSE DOIT SE DIRE (la sœur de « ce qui se clique doit se voir ») : l'accueil, le foyer, la Salle de Jeux, le Salon et le Sanctuaire débordent de l'écran d'un téléphone, et rien ne le disait. Un petit cartouche paraît AU DOIGT seulement, tant que le visiteur n'a jamais glissé ; il s'en va au premier vrai glissé (js : indiceGlisse) ou au bout de quelques secondes. ⚠ ANTI-GEL : posé et retiré d'un coup ; le va-et-vient des chevrons est décoratif. ⚠ `pointer-events:none` : il ne vole aucun doigt. */ .indice-glisse{ position:absolute;left:50%;bottom:4.6rem;transform:translateX(-50%);z-index:70; display:flex;align-items:center;gap:.55rem;pointer-events:none; padding:.32rem .85rem;border-radius:999px;border:2px solid var(--or); background:rgba(23,16,48,.86);color:var(--creme); font:800 .82rem 'Nunito',sans-serif;letter-spacing:.06em;white-space:nowrap; } .indice-glisse i{font-style:normal;color:var(--or);font-size:1.15rem;line-height:1;} .indice-glisse i:first-child{animation:glisseG 1.1s ease-in-out infinite;} .indice-glisse i:last-child{animation:glisseD 1.1s ease-in-out infinite;} @keyframes glisseG{50%{transform:translateX(-5px);}} @keyframes glisseD{50%{transform:translateX(5px);}} @media (prefers-reduced-motion: reduce){ .indice-glisse i{animation:none;} } @media (max-width:1299px), (pointer:coarse){ .salle3d-defile{ overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:none; } .salle3d-defile::-webkit-scrollbar{display:none;} .salle3d-defile > .foyer3d, .salle3d-defile > .cas3d{position:relative;inset:auto;height:100%;width:max(1400px, 178vh, 130vw);} } /* ⭐⭐ ÉCRAN BAS (téléphone couché) : la salle est bâtie en PIXELS, rien ne la rétrécit quand la hauteur manque — elle était ROGNÉE (vu sur capture à 812×375 : plus une seule table de la Salle de Jeux à l'écran). Le js (echelleSalle3d) pose `--salle-k` = hauteur / 600 ; la salle entière prend ce `zoom`. ⚠ `zoom` et non `transform:scale` : il change la MISE EN PAGE, donc la course de défilement — c'est elle qui pilote la caméra. ⚠ k = 1 dès 600 px de haut. */ @media (max-height:700px){ .salle3d-defile > .foyer3d, .salle3d-defile > .cas3d{zoom:var(--salle-k, 1);} } /* ⚠ MESURÉ (2026-09-19) : sous `zoom`, TOUTES les longueurs rétrécissent — les `vw`/`vh` aussi. Sans compensation la fenêtre virtuelle tombait à 1400 × k = 875 px pour un écran de 812 : 63 px de course pour tout le panoramique (un frôlement du doigt balayait la salle). On divise par k ce qui doit rester une taille D'ÉCRAN. */ @media (max-height:700px) and (max-width:1299px), (max-height:700px) and (pointer:coarse){ .salle3d-defile > .foyer3d, .salle3d-defile > .cas3d{ width:max(1400px, calc(178vh / var(--salle-k, 1)), calc(130vw / var(--salle-k, 1))); } } /* ---- FOYER v2 : la pièce en VRAIE 3D (perspective CSS) ---- Le sol, les murs, le plafond sont de vrais plans dans l'espace : la perspective vient du navigateur, pas d'un dessin. */ .foyer3d{ position:absolute;inset:0;overflow:hidden; perspective:700px;perspective-origin:50% 60%; /* fond qui MIME la salle (ciel en haut → tapis rouge en bas) : si un coin devait fuir sur un écran très étroit, il se fond dans le décor */ background:linear-gradient(#cfe9fc 0%, #a9d3f3 42%, #8fb0d6 52%, #b7324a 66%, #9a1f30 100%); } .f3d-cam{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .16s ease-out;} /* l'œil est posé sur l'ouverture avant de la salle (« à la porte ») et regarde DEDANS en contre-plongée : la salle nous entoure = vue 1re personne. La contre-plongée vient du perspective-origin (bas), pas d'un translateZ (qui faisait passer le bord du sol derrière la caméra → coins de ciel). */ .f3d-scene{position:absolute;inset:0;transform-style:preserve-3d;} .f3d-face{position:absolute;left:50%;top:50%;transform-style:flat;backface-visibility:hidden;} /* BRIQUES en appareil DÉCALÉ (« running bond », owner 2026-07-06) : chaque rangée est décalée d'une demi-brique comme un vrai mur. 3 calques translucides par-dessus le fondu bleu (--fondu) : lignes horizontales + 2 jeux de joints verticaux alternés (petits rectangles peints par conic-gradient, le 2e décalé d'une demi-brique). Brique 93×45, joints 3px (avant : grille parfaite 84×42, joints 2px). --rangY aligne les rangées d'un mur à l'autre (les hauts des plans diffèrent). */ .f3d-mur,.f3d-riser,.f3d-coin,.f3d-limon,.f3d-murcourbe{ /* ⚠️ PIÈGE résolu 2026-07-06 : un repeating-linear-gradient SANS background-size ignore background-position (il s'ancre au BAS pour 0deg) → les rangées étaient décalées des joints selon la hauteur du mur (le joint « dépassait en haut et ne touchait pas en bas », owner ×2). Correctif : rangées en TUILE 96×48 (180deg = ligne en haut de tuile) → tout est ancré en HAUT + --rangY, et le joint (3×45, posé à rangY+3) va EXACTEMENT de la ligne du haut à la ligne du bas, sans dépasser. */ --briques: repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 3px, transparent 3px 48px), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(0,0,0,.05) 270deg 360deg), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(0,0,0,.05) 270deg 360deg); background-image: var(--briques), var(--fondu); background-size: 96px 48px, 96px 96px, 96px 96px, auto; background-position: 0 var(--rangY,0px), var(--jointX,0px) calc(var(--rangY,0px) + 3px), calc(var(--jointX,0px) + 48px) calc(var(--rangY,0px) + 51px), 0 0; } /* les lignes de mortier REDESSINÉES par-dessus la déco (collines/nuages) via ::after → effet « peint directement sur les briques ». Un peu plus marquées (.09) pour se lire sur le vert ; z-index:1 passe au-dessus de la déco (les OBJETS tableau/portes/plaques sont à z-index:2). */ .f3d-mur::after,.f3d-riser::after,.f3d-coin::after,.f3d-limon::after,.f3d-murcourbe::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.09) 0 3px, transparent 3px 48px), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(0,0,0,.09) 270deg 360deg), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(0,0,0,.09) 270deg 360deg); background-size: 96px 48px, 96px 96px, 96px 96px; background-position: 0 var(--rangY,0px), var(--jointX,0px) calc(var(--rangY,0px) + 3px), calc(var(--jointX,0px) + 48px) calc(var(--rangY,0px) + 51px); } /* frise de ciel AU-DESSUS du mur du fond : simple pan de bleu nuit qui scelle l'angle haut de la salle aux extrêmes du pan (invisible sinon) */ .f3d-frise{ width:2800px;height:1000px;margin:-500px 0 0 -1400px; transform:translateY(-1000px) translateZ(-1500px); background:#0f216d; } /* --- MUR DU FOND (porte le tableau) --- */ .f3d-back{ /* ÉLARGI 1900→2800 (2026-07-06) : la salle est plus large que l'écran, le pan caméra révèle les côtés (escaliers latéraux + portes d'étage) */ width:2800px;height:1050px;margin:-525px 0 0 -1400px; transform:translateZ(-1500px); /* mur de brique bleue façon SM64 (briques = calque partagé --briques) : haut proche du plafond (#0f216d) → #7ab2d1 en descendant. Fondu ABAISSÉ 2026-07-06 (owner : « qu'on voie plus de bleu foncé sur les murs »). --jointX 56 = un joint tombe PILE sur chaque couture d'angle (x ±960). */ --fondu: linear-gradient(#0f216d 8%, #21407b 16%, #4d84ad 30%, #7ab2d1 56%); --jointX: 56px; } /* --- SOL : tapis rouge + damier central + soleil --- (volontairement SURDIMENSIONNÉ : il déborde loin sous les murs pour qu'aucun coin de « ciel » n'apparaisse quand la caméra bouge) --- */ .f3d-floor{ width:3000px;height:2800px;margin:-1400px 0 0 -1500px; transform:translateY(525px) translateZ(-750px) rotateX(90deg); background: radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.28), transparent 55%), linear-gradient(#d13246,#b02133); overflow:hidden; } .f3d-checker{ /* damier ÉLARGI (était 940×1180) pour qu'il s'étende jusque sous les deux entrées de galerie (portes en bas à gauche/droite) — il est de toute façon découpé par le sol (overflow), donc l'agrandir ne peut pas créer de fuite */ position:absolute;left:50%;top:50%;width:1300px;height:1620px;transform:translate(-50%,-50%); background:repeating-conic-gradient(#eef0f4 0% 25%, #2f2b47 0% 50%); background-size:150px 150px; box-shadow:0 0 0 10px #b02133, 0 0 0 22px #8e1a2a; } /* le soleil PAZ dans un creux : anneau rouge + puits d'ombre (inset) */ .f3d-medaillon{ /* soleil avancé vers le visiteur (owner : 56→59→61→64%), AGRANDI 250→320 (2026-07-06). Le TAPIS OCTOGONAL est dessiné dans le svg .f3d-sun ; l'ancien puits d'ombre circulaire créait un « liseré noir » autour de l'octogone (owner bug-report) → supprimé : le tapis est posé À PLAT sur le damier, comme dans le jeu. */ position:absolute;left:50%;top:64%;width:320px;height:320px;transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center; } .f3d-sun{width:320px;height:320px;} .f3d-sun-rayons{transform-box:fill-box;transform-origin:center;animation:tourneLent 30s linear infinite;} /* --- PLAFOND : ciel --- */ .f3d-ceiling{ width:3000px;height:2800px;margin:-1400px 0 0 -1500px; transform:translateY(-525px) translateZ(-750px) rotateX(-90deg); /* plafond ENTIÈREMENT bleu nuit (#0f216d) ; il ne s'éclaircit qu'au tout bord, là où il rejoint le haut des murs */ background:radial-gradient(150% 135% at 50% 100%, #24427c 0%, #142a70 40%, #0d1c5c 78%);overflow:hidden; } /* nuages Mario (joufflus, à yeux) posés sur les murs — z-index:0 = SOUS le calque de briques ::after (owner 2026-07-06, DÉCISION INVERSÉE : on veut les lignes de mortier PAR-DESSUS les nuages, comme sur les collines, pour qu'ils soient « peints sur la brique » et non collés par-dessus). Ils restent au-dessus des collines (ordre DOM) et sous les objets tableau/ portes/étoile qui sont à z-index:2. */ .f3d-nuage{position:absolute;pointer-events:none;transform:translateX(-50%);aspect-ratio:120/64;overflow:visible;z-index:0;} /* collines vertes hautes et serrées, à la base des murs (motif tuilé) */ .f3d-collines{position:absolute;left:-3%;bottom:0;width:106%;height:560px;pointer-events:none;} .f3d-wallL .f3d-collines,.f3d-wallR .f3d-collines{bottom:31.2%;} /* = l'ancien 19% de 1700 */ /* collines aussi sur les PETITS murs (owner 2026-07-06), réduites via le viewBox de leur svg pour qu'on les voie EN ENTIER : – façade des portes galerie (riser, 346px de haut) → collines ≤ ~300px – mur du fond (tableau) → posées au niveau du sol de l'ÉTAGE (345px du bas, le bas du mur est caché par la façade), elles dépassent la balustrade */ .f3d-riser .f3d-collines{height:340px;} /* mur du fond : bandeau COURT (owner 2026-07-06) → on voit surtout le ciel + nuages, juste le HAUT des collines dépasse en bas → « un seul mur » avec les latéraux. (Le svg du fond a un viewBox → réduire la hauteur aplatit les collines en un liseré de sommets.) */ .f3d-back .f3d-collines{height:230px;bottom:345px;} /* collines sur les ANGLES ARRONDIS : MÊME écrasement vertical que le mur du fond (h230 pour un viewBox de 560 → hauteur max identique au fond, owner : « leur hauteur max à la même hauteur que celles du fond ») */ .f3d-coin .f3d-collines{height:230px;bottom:345px;} /* les collines des lattes/pans/flancs se PROLONGENT d'un pan à l'autre via le x de leur viewBox → bords exacts (pas de -3%/106% qui créait des fines coupures bleues au raccord, owner bug-report) */ .f3d-coin .f3d-collines,.f3d-murcourbe .f3d-collines,.f3d-limon .f3d-collines{left:0;width:100%;} /* collines à la BASE des flancs d'escalier (suivent la pente) — petit liseré d'herbe, owner 2026-07-06 ; clippées par le triangle du flanc */ .f3d-limon .f3d-collines{height:170px;bottom:0;} /* --- MURS LATÉRAUX : marbre + fenêtre cintrée --- */ .f3d-wallL,.f3d-wallR{ /* HAUTEUR 1700→2800 (2026-07-06, salle élargie + pan) : les murs géants bouchent tout au-dessus du plafond / sous le sol aux angles extrêmes du pan. Les % du dégradé et des enfants (collines, nuages) ont été RECALÉS pour que la partie visible soit STRICTEMENT identique à la version 1700 validée — si tu changes la hauteur, recalcule-les. */ width:2600px;height:2800px;margin:-1400px 0 0 -1300px; /* fondu UNIFIÉ (2026-07-06, « une seule même pièce ») : les transitions de couleur sont aux MÊMES HAUTEURS MONDE que sur le mur du fond (y -441 / -357 / -210 / +63, version ABAISSÉE — plus de bleu foncé visible — recalculées pour un mur de 2800 de haut) → AUCUNE démarcation possible aux coutures avec les angles arrondis ni le fond. --rangY 11px = rangées de briques alignées sur celles du fond. */ --fondu: linear-gradient(#0f216d 34.25%, #21407b 37.25%, #4d84ad 42.5%, #7ab2d1 52.25%); --rangY: 11px; } /* phases RECALÉES 2026-07-06 (l'owner voyait un petit décalage au raccord arrondi↔latéral : l'ancien calcul était ancré une demi-brique à côté) */ .f3d-wallL{--jointX: 91.5px;} .f3d-wallR{--jointX: 11px;} .f3d-wallL{transform:translateX(-1400px) translateZ(-750px) rotateY(90deg);} .f3d-wallR{transform:translateX(1400px) translateZ(-750px) rotateY(-90deg);} .f3d-fenetre{ position:absolute;top:24%;left:50%;transform:translateX(-50%); width:150px;height:300px;border-radius:75px 75px 6px 6px; background:linear-gradient(#eaf6ff,#cfeaff);border:8px solid #e9eef4; box-shadow:inset 0 0 0 3px #b7c9d8; } /* ===== ARCHITECTURE de la salle : corniche · colonnes · fenêtres · couloirs ===== */ .f3d-cornice{ position:absolute;left:-3%;right:-3%;top:9%;height:46px; background:linear-gradient(#f5efdd,#ddd0b4 55%,#c3b492); border-top:7px solid #ffd23f;border-bottom:4px solid #b39a6a; } .f3d-pilastre{ position:absolute;top:10%;bottom:-1%;width:80px;transform:translateX(-50%); background:linear-gradient(90deg,#c9c1ad,#f7f4ec 20%,#e7e0d0 50%,#f7f4ec 80%,#c4bca8); border-radius:5px 5px 0 0; } .f3d-pilastre::before{content:"";position:absolute;left:-10px;right:-10px;top:-2px;height:28px; background:linear-gradient(#f2eee2,#cabfa8);border-radius:5px;} .f3d-pilastre::after{content:"";position:absolute;left:-10px;right:-10px;bottom:0;height:34px; background:linear-gradient(#e6e0d2,#c0b6a0);border-radius:3px;} .f3d-fenetre-arche{ position:absolute;width:118px;height:216px;transform:translateX(-50%); border-radius:59px 59px 8px 8px;background:linear-gradient(#eaf6ff,#c6e6ff); border:10px solid #eef0f4;box-shadow:inset 0 0 0 3px #b7c9d8, 0 4px 10px rgba(0,0,0,.14); } .f3d-fenetre-arche::before{content:"";position:absolute;left:calc(50% - 3px);top:4px;bottom:4px;width:6px;background:#c3d3e0;} .f3d-fenetre-arche::after{content:"";position:absolute;left:4px;right:4px;top:46%;height:6px;background:#c3d3e0;} .f3d-galerie{ position:absolute;bottom:-1%;width:226px;height:320px;transform:translateX(-50%); padding:0;border:none;background:none;cursor:pointer;transition:transform .18s ease;z-index:2; } .f3d-galerie .arche{ position:absolute;inset:0;border-radius:113px 113px 0 0; background:linear-gradient(#cbc6b8,#a99e82); box-shadow:0 0 0 7px #948a72, inset 0 0 26px rgba(0,0,0,.35); transition:box-shadow .18s ease; } .f3d-galerie .passage{ position:absolute;left:18px;right:18px;bottom:0;top:24px;border-radius:96px 96px 0 0; background:radial-gradient(130% 80% at 50% 100%, #a9803e, #2a1e12 72%); } .f3d-galerie .plaque-gal{ /* vraie PLAQUE DORÉE gravée (owner 2026-07-06), plus un simple texte doré */ position:absolute;left:50%;top:-46px;transform:translateX(-50%); font-family:'Cinzel',serif;font-weight:700;font-size:24px;color:#5a3c08; background:linear-gradient(#ffe27a,#e9b93a 60%,#c99a1e); border:3px solid #8a5a12;border-radius:8px;padding:.12em .55em; box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55); white-space:nowrap; } /* .survol-force = survol SIMULÉ par le filet de sécurité JS (le hit-testing 3D du navigateur rate parfois ces éléments) — mêmes styles que :hover */ .f3d-galerie:hover,.f3d-galerie.survol-force{transform:translateX(-50%) translateY(-5px);} .f3d-galerie:hover .arche,.f3d-galerie.survol-force .arche{box-shadow:0 0 0 7px #ffd23f, inset 0 0 26px rgba(0,0,0,.35);} /* garde-corps le long de l'escalier central */ .f3d-rampe{ position:absolute;top:0;bottom:0;width:28px;border-radius:6px; background:repeating-linear-gradient(#f2ecdd 0 7px, #cabfa6 7px 15px); box-shadow:inset 0 0 0 3px #e6ddc8; } .f3d-rampe.g{left:-10px;} .f3d-rampe.d{right:-10px;} /* ÉTAGE SUPÉRIEUR : sol rouge plat, en retrait, devant le tableau (un peu plus PROFOND : bord avant ramené vers l'avant à z-1050) */ .f3d-etage{ /* ÉLARGI 1900→2800 : les escaliers latéraux débouchent sur ses extensions */ width:2800px;height:420px;margin:-210px 0 0 -1400px; transform:translateY(180px) translateZ(-1290px) rotateX(90deg); background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0) 50%), linear-gradient(#c62a3c,#a81d2c); } /* FAÇADE de l'étage (le mur SOUS le balcon) : porte les couloirs galerie */ .f3d-riser{ /* ÉLARGI 1900→2800 : ses extensions (au-delà de ±950) portent les 2 portes du bas, au pied des escaliers latéraux. ATTENTION : les left:% des portes Galerie ont été recalculés (34.4/65.6) pour garder la MÊME position monde (x ±437) qu'avant l'élargissement — ne pas remettre 27/73. */ width:2800px;height:346px;margin:-173px 0 0 -1400px; transform:translateY(352px) translateZ(-1080px); --fondu: linear-gradient(#63a0c6,#7ab2d1); } /* portes galerie : ÉTIRÉES vers le haut (230→270, owner 2026-07-06 « tassées, entrées pour des nains ») — la plaque au-dessus reste sous la ligne de l'étage (26px de marge monde) */ .f3d-riser .f3d-galerie{height:270px;} /* garde-corps de l'ÉTAGE : le BAS de la barrière repose sur le SOL de l'étage (base à y+180 = surface du palier), et elle monte vers le haut — jamais sous le sol, jamais collée au mur d'en dessous */ .f3d-balcon{ position:absolute;left:50%;top:50%;height:130px; transform:translateY(50px) translateZ(-1080px); background-image: linear-gradient(#f6f0e1,#d3c8ae), repeating-linear-gradient(90deg,#ece3ce 0 13px, transparent 13px 30px), linear-gradient(#d8ccb0,#a89c7e); background-size:100% 16px, 100% 100%, 100% 14px; background-position:top, center, bottom; background-repeat:no-repeat, repeat-x, no-repeat; } .f3d-balcon.g{width:730px;margin-left:-945px;} .f3d-balcon.d{width:730px;margin-left:215px;} /* rallonges de balustrade sur les EXTENSIONS de l'étage — raccourcies à x ±1100 (le sommet des escaliers COURBES arrive maintenant vers x ±1115) */ .f3d-balcon.eg{width:155px;margin-left:-1100px;} .f3d-balcon.ed{width:155px;margin-left:945px;} /* --- ESCALIERS LATÉRAUX COURBES (v3 2026-07-06, courbe LISSE) : 6 segments par escalier (virages de ~4° seulement → courbure continue à l'œil), pied incliné de ~23° vers le centre, sommet droit sur l'étage. Le TAPIS est un SEUL dégradé de 1008px DÉCOUPÉ en tranches (background-size 250×1008 + background-position par segment) : plus de bande de couleur aux jonctions (v2 : chaque segment recommençait son dégradé = « séparations » visibles). Les rayures-marches (cadence 33.6 = 168/5) tombent pareil sur chaque segment → continues aussi. Pente 20.2° = rotateX(69.8°). Chemin (droite) : pied (1035.7,-164.4,y529) → (1097.3,-310.3,y471) → (1148.3,-460.3,y413) → (1188.2,-613.6,y355) → (1216.8,-769.4,y297) → (1234.2,-926.8,y239) → étage (1240,-1085,y181). --- */ .f3d-esclat{ width:250px;height:172px;margin:-86px 0 0 -125px; background-image: repeating-linear-gradient(#ff8093 0 3px, transparent 3px 6px, #c9273a 6px 33.6px), linear-gradient(#e0384c,#b52235); background-size:auto, 250px 1008px; background-repeat:repeat, no-repeat; } .f3d-esclat.d1{background-position:0 2px, 0 -838px;transform:translateX(1066.5px) translateY(500px) translateZ(-237.4px) rotateY(-22.9deg) rotateX(69.8deg);} .f3d-esclat.d2{background-position:0 2px, 0 -670px;transform:translateX(1122.8px) translateY(442px) translateZ(-385.3px) rotateY(-18.8deg) rotateX(69.8deg);} .f3d-esclat.d3{background-position:0 2px, 0 -502px;transform:translateX(1168.3px) translateY(384px) translateZ(-536.9px) rotateY(-14.6deg) rotateX(69.8deg);} .f3d-esclat.d4{background-position:0 2px, 0 -334px;transform:translateX(1202.5px) translateY(326px) translateZ(-691.5px) rotateY(-10.4deg) rotateX(69.8deg);} .f3d-esclat.d5{background-position:0 2px, 0 -166px;transform:translateX(1225.5px) translateY(268px) translateZ(-848.1px) rotateY(-6.3deg) rotateX(69.8deg);} .f3d-esclat.d6{background-position:0 2px, 0 2px;transform:translateX(1237.1px) translateY(210px) translateZ(-1005.9px) rotateY(-2.1deg) rotateX(69.8deg);} .f3d-esclat.g1{background-position:0 2px, 0 -838px;transform:translateX(-1066.5px) translateY(500px) translateZ(-237.4px) rotateY(22.9deg) rotateX(69.8deg);} .f3d-esclat.g2{background-position:0 2px, 0 -670px;transform:translateX(-1122.8px) translateY(442px) translateZ(-385.3px) rotateY(18.8deg) rotateX(69.8deg);} .f3d-esclat.g3{background-position:0 2px, 0 -502px;transform:translateX(-1168.3px) translateY(384px) translateZ(-536.9px) rotateY(14.6deg) rotateX(69.8deg);} .f3d-esclat.g4{background-position:0 2px, 0 -334px;transform:translateX(-1202.5px) translateY(326px) translateZ(-691.5px) rotateY(10.4deg) rotateX(69.8deg);} .f3d-esclat.g5{background-position:0 2px, 0 -166px;transform:translateX(-1225.5px) translateY(268px) translateZ(-848.1px) rotateY(6.3deg) rotateX(69.8deg);} .f3d-esclat.g6{background-position:0 2px, 0 2px;transform:translateX(-1237.1px) translateY(210px) translateZ(-1005.9px) rotateY(2.1deg) rotateX(69.8deg);} /* le LIMON = flanc sous le bord intérieur : 6 morceaux par escalier dont les EXTRÉMITÉS PARTAGENT les mêmes points 3D ; hauteurs raccordées exactement. TEXTURE 2026-07-06 (owner) : plus de pierre crème → même BRIQUE BLEUE que la façade des portes Galerie. Le fondu est une tranche de 346px ANCRÉE AU SOL (background-size/position dédiés) → même couleur aux mêmes hauteurs sur toutes les pièces ET que le riser qu'elles rejoignent ; --rangY par pièce aligne les rangées de briques sur celles du riser (y monde 179+48k). backface VISIBLE : un flanc/une rambarde se voit des deux côtés (sinon ils disparaissaient en regardant l'escalier de côté, owner bug-report). */ .f3d-limon{ backface-visibility:visible; --fondu: linear-gradient(#63a0c6,#7ab2d1); background-size: 96px 48px, 96px 96px, 96px 96px, 100% 346px; background-position: 0 var(--rangY,0px), var(--jointX,0px) calc(var(--rangY,0px) + 3px), calc(var(--jointX,0px) + 48px) calc(var(--rangY,0px) + 51px), 0 100%; background-repeat: repeat, repeat, repeat, no-repeat; } .f3d-limon.d1{--rangY:44px;width:156px;height:60px;margin:-30px 0 0 -78px;transform:translateX(950.5px) translateY(501px) translateZ(-283.9px) rotateY(-112.9deg);clip-path:polygon(0 0,100% 96.7%,100% 100%,0 100%);} .f3d-limon.d2{--rangY:6px;width:151px;height:118px;margin:-59px 0 0 -75.5px;transform:translateX(1004.6px) translateY(472px) translateZ(-425.5px) rotateY(-108.8deg);clip-path:polygon(0 0,100% 49.2%,100% 100%,0 100%);} .f3d-limon.d3{--rangY:16px;width:151px;height:176px;margin:-88px 0 0 -75.5px;transform:translateX(1047.4px) translateY(443px) translateZ(-568.5px) rotateY(-104.6deg);clip-path:polygon(0 0,100% 33%,100% 100%,0 100%);} .f3d-limon.d4{--rangY:26px;width:151px;height:234px;margin:-117px 0 0 -75.5px;transform:translateX(1079.7px) translateY(414px) translateZ(-714.2px) rotateY(-100.4deg);clip-path:polygon(0 0,100% 24.8%,100% 100%,0 100%);} .f3d-limon.d5{--rangY:36px;width:151px;height:292px;margin:-146px 0 0 -75.5px;transform:translateX(1101.3px) translateY(385px) translateZ(-861.8px) rotateY(-96.3deg);clip-path:polygon(0 0,100% 19.9%,100% 100%,0 100%);} .f3d-limon.d6{--rangY:46px;width:151px;height:350px;margin:-175px 0 0 -75.5px;transform:translateX(1112.3px) translateY(356px) translateZ(-1010.5px) rotateY(-92.1deg);clip-path:polygon(0 0,100% 16.6%,100% 100%,0 100%);} .f3d-limon.g1{--rangY:44px;width:156px;height:60px;margin:-30px 0 0 -78px;transform:translateX(-950.5px) translateY(501px) translateZ(-283.9px) rotateY(112.9deg);clip-path:polygon(100% 0,0 96.7%,0 100%,100% 100%);} .f3d-limon.g2{--rangY:6px;width:151px;height:118px;margin:-59px 0 0 -75.5px;transform:translateX(-1004.6px) translateY(472px) translateZ(-425.5px) rotateY(108.8deg);clip-path:polygon(100% 0,0 49.2%,0 100%,100% 100%);} .f3d-limon.g3{--rangY:16px;width:151px;height:176px;margin:-88px 0 0 -75.5px;transform:translateX(-1047.4px) translateY(443px) translateZ(-568.5px) rotateY(104.6deg);clip-path:polygon(100% 0,0 33%,0 100%,100% 100%);} .f3d-limon.g4{--rangY:26px;width:151px;height:234px;margin:-117px 0 0 -75.5px;transform:translateX(-1079.7px) translateY(414px) translateZ(-714.2px) rotateY(100.4deg);clip-path:polygon(100% 0,0 24.8%,0 100%,100% 100%);} .f3d-limon.g5{--rangY:36px;width:151px;height:292px;margin:-146px 0 0 -75.5px;transform:translateX(-1101.3px) translateY(385px) translateZ(-861.8px) rotateY(96.3deg);clip-path:polygon(100% 0,0 19.9%,0 100%,100% 100%);} .f3d-limon.g6{--rangY:46px;width:151px;height:350px;margin:-175px 0 0 -75.5px;transform:translateX(-1112.3px) translateY(356px) translateZ(-1010.5px) rotateY(92.1deg);clip-path:polygon(100% 0,0 16.6%,0 100%,100% 100%);} /* flancs de l'escalier CENTRAL (il était « creux » vu de côté, owner) : grands triangles pleins à x ±235, même brique bleue, base au sol */ .f3d-limon.ccd{--rangY:0px;width:334px;height:352px;margin:-176px 0 0 -167px;transform:translateX(235px) translateY(355px) translateZ(-919px) rotateY(90deg);clip-path:polygon(100% 0,100% 100%,0 100%);} .f3d-limon.ccg{--rangY:0px;width:334px;height:352px;margin:-176px 0 0 -167px;transform:translateX(-235px) translateY(355px) translateZ(-919px) rotateY(-90deg);clip-path:polygon(0 0,0 100%,100% 100%);} /* --- RAMBARDES (owner 2026-07-06 : « dangereux » sans rampe !) : même habillage que la balustrade de l'étage. Sur les escaliers courbes = 6 morceaux le long du bord EXTÉRIEUR, inclinés dans la pente (rotateZ) ; sur l'escalier central = 1 pan par côté. --- */ .f3d-rail{ height:110px; /* backface VISIBLE : une rambarde se voit des deux côtés (les centrales disparaissaient dès que la caméra passait de leur côté, owner) */ backface-visibility:visible; background-image: linear-gradient(#f6f0e1,#d3c8ae), repeating-linear-gradient(90deg,#ece3ce 0 13px, transparent 13px 30px), linear-gradient(#d8ccb0,#a89c7e); background-size:100% 14px, 100% 100%, 100% 12px; background-position:top, center, bottom; background-repeat:no-repeat, repeat-x, no-repeat; } /* rambardes INTÉRIEURES des escaliers courbes (owner 2026-07-06 : il n'y en avait que d'un côté) — le long du bord intérieur, au-dessus des flancs */ .f3d-rail.di1{width:165px;margin:-55px 0 0 -82.5px;transform:translateX(950.5px) translateY(445px) translateZ(-283.9px) rotateY(-112.9deg) rotateZ(20.6deg);} .f3d-rail.di2{width:160px;margin:-55px 0 0 -80px;transform:translateX(1004.6px) translateY(387px) translateZ(-425.5px) rotateY(-108.8deg) rotateZ(21.2deg);} .f3d-rail.di3{width:160px;margin:-55px 0 0 -80px;transform:translateX(1047.4px) translateY(329px) translateZ(-568.5px) rotateY(-104.6deg) rotateZ(21.2deg);} .f3d-rail.di4{width:160px;margin:-55px 0 0 -80px;transform:translateX(1079.7px) translateY(271px) translateZ(-714.2px) rotateY(-100.4deg) rotateZ(21.2deg);} .f3d-rail.di5{width:160px;margin:-55px 0 0 -80px;transform:translateX(1101.3px) translateY(213px) translateZ(-861.8px) rotateY(-96.3deg) rotateZ(21.2deg);} .f3d-rail.di6{width:160px;margin:-55px 0 0 -80px;transform:translateX(1112.3px) translateY(155px) translateZ(-1010.5px) rotateY(-92.1deg) rotateZ(21.2deg);} .f3d-rail.gi1{width:165px;margin:-55px 0 0 -82.5px;transform:translateX(-950.5px) translateY(445px) translateZ(-283.9px) rotateY(112.9deg) rotateZ(-20.6deg);} .f3d-rail.gi2{width:160px;margin:-55px 0 0 -80px;transform:translateX(-1004.6px) translateY(387px) translateZ(-425.5px) rotateY(108.8deg) rotateZ(-21.2deg);} .f3d-rail.gi3{width:160px;margin:-55px 0 0 -80px;transform:translateX(-1047.4px) translateY(329px) translateZ(-568.5px) rotateY(104.6deg) rotateZ(-21.2deg);} .f3d-rail.gi4{width:160px;margin:-55px 0 0 -80px;transform:translateX(-1079.7px) translateY(271px) translateZ(-714.2px) rotateY(100.4deg) rotateZ(-21.2deg);} .f3d-rail.gi5{width:160px;margin:-55px 0 0 -80px;transform:translateX(-1101.3px) translateY(213px) translateZ(-861.8px) rotateY(96.3deg) rotateZ(-21.2deg);} .f3d-rail.gi6{width:160px;margin:-55px 0 0 -80px;transform:translateX(-1112.3px) translateY(155px) translateZ(-1010.5px) rotateY(92.1deg) rotateZ(-21.2deg);} /* --- MURS LATÉRAUX COURBES (v2 2026-07-06, owner : « les murs latéraux eux-mêmes doivent longer les escaliers en arc de cercle, la pièce est circulaire ») : 9 pans TALL (2800, comme les anciens murs plats) dont la base suit EXACTEMENT le bord extérieur de l'escalier, du coin arrondi jusqu'à l'avant de la salle. yaw = atan2(-dz,dx) (mur plat = -90° vérifié). Ils DEVIENNENT la paroi visible (collines + briques + fondu monde identiques au fond → sans couture) et occultent l'ancien mur plat (gardé derrière comme filet de sécurité anti-fuite). Plus besoin de rambarde extérieure. backface visible (vus des deux côtés au pan). --- */ .f3d-murcourbe{ height:2800px; --fondu: linear-gradient(#0f216d 34.25%, #21407b 37.25%, #4d84ad 42.5%, #7ab2d1 52.25%); --rangY: 11px; backface-visibility:visible; } .f3d-murcourbe .f3d-collines{bottom:31.2%;} .f3d-murcourbe.d1{width:136px;margin:-1400px 0 0 -68.0px;--jointX:56.0px;transform:translateX(1382.0px) translateZ(-1055.0px) rotateY(-105.5deg);} .f3d-murcourbe.d2{width:191px;margin:-1400px 0 0 -95.5px;--jointX:39.9px;transform:translateX(1361.0px) translateZ(-917.5px) rotateY(-94.1deg);} .f3d-murcourbe.d3{width:191px;margin:-1400px 0 0 -95.5px;--jointX:64.5px;transform:translateX(1343.0px) translateZ(-751.5px) rotateY(-98.3deg);} .f3d-murcourbe.d4{width:192px;margin:-1400px 0 0 -96.0px;--jointX:89.7px;transform:translateX(1313.0px) translateZ(-587.0px) rotateY(-102.4deg);} .f3d-murcourbe.d5{width:191px;margin:-1400px 0 0 -95.5px;--jointX:17.8px;transform:translateX(1271.0px) translateZ(-425.0px) rotateY(-106.7deg);} .f3d-murcourbe.d6{width:189px;margin:-1400px 0 0 -94.5px;--jointX:42.8px;transform:translateX(1218.0px) translateZ(-268.0px) rotateY(-110.6deg);} .f3d-murcourbe.d7{width:257px;margin:-1400px 0 0 -128.5px;--jointX:70.2px;transform:translateX(1174.5px) translateZ(-75.5px) rotateY(-97.2deg);} .f3d-murcourbe.d8{width:265px;margin:-1400px 0 0 -132.5px;--jointX:29.4px;transform:translateX(1151.0px) translateZ(160.0px) rotateY(-94.3deg);} .f3d-murcourbe.d9{width:264px;margin:-1400px 0 0 -132.0px;--jointX:76.7px;transform:translateX(1136.0px) translateZ(400.0px) rotateY(-92.9deg);} .f3d-murcourbe.g1{width:136px;margin:-1400px 0 0 -68.0px;--jointX:56.0px;transform:translateX(-1382.0px) translateZ(-1055.0px) rotateY(-74.5deg);} .f3d-murcourbe.g2{width:191px;margin:-1400px 0 0 -95.5px;--jointX:72.1px;transform:translateX(-1361.0px) translateZ(-917.5px) rotateY(-85.9deg);} .f3d-murcourbe.g3{width:191px;margin:-1400px 0 0 -95.5px;--jointX:47.5px;transform:translateX(-1343.0px) translateZ(-751.5px) rotateY(-81.7deg);} .f3d-murcourbe.g4{width:192px;margin:-1400px 0 0 -96.0px;--jointX:22.3px;transform:translateX(-1313.0px) translateZ(-587.0px) rotateY(-77.6deg);} .f3d-murcourbe.g5{width:191px;margin:-1400px 0 0 -95.5px;--jointX:94.2px;transform:translateX(-1271.0px) translateZ(-425.0px) rotateY(-73.3deg);} .f3d-murcourbe.g6{width:189px;margin:-1400px 0 0 -94.5px;--jointX:69.2px;transform:translateX(-1218.0px) translateZ(-268.0px) rotateY(-69.4deg);} .f3d-murcourbe.g7{width:257px;margin:-1400px 0 0 -128.5px;--jointX:41.8px;transform:translateX(-1174.5px) translateZ(-75.5px) rotateY(-82.8deg);} .f3d-murcourbe.g8{width:265px;margin:-1400px 0 0 -132.5px;--jointX:82.6px;transform:translateX(-1151.0px) translateZ(160.0px) rotateY(-85.7deg);} .f3d-murcourbe.g9{width:264px;margin:-1400px 0 0 -132.0px;--jointX:35.3px;transform:translateX(-1136.0px) translateZ(400.0px) rotateY(-87.1deg);} .f3d-rail.d1{width:173px;margin:-55px 0 0 -86.5px;transform:translateX(1182.5px) translateY(445px) translateZ(-190.8px) rotateY(-112.9deg) rotateZ(19.6deg);} .f3d-rail.d2{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(1241.1px) translateY(387px) translateZ(-345.1px) rotateY(-108.8deg) rotateZ(19.1deg);} .f3d-rail.d3{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(1289.1px) translateY(329px) translateZ(-505.5px) rotateY(-104.6deg) rotateZ(19.1deg);} .f3d-rail.d4{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(1325.4px) translateY(271px) translateZ(-668.9px) rotateY(-100.4deg) rotateZ(19.1deg);} .f3d-rail.d5{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(1349.7px) translateY(213px) translateZ(-834.4px) rotateY(-96.3deg) rotateZ(19.1deg);} .f3d-rail.d6{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(1362px) translateY(155px) translateZ(-1001.3px) rotateY(-92.1deg) rotateZ(19.1deg);} .f3d-rail.g1{width:173px;margin:-55px 0 0 -86.5px;transform:translateX(-1182.5px) translateY(445px) translateZ(-190.8px) rotateY(112.9deg) rotateZ(-19.6deg);} .f3d-rail.g2{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(-1241.1px) translateY(387px) translateZ(-345.1px) rotateY(108.8deg) rotateZ(-19.1deg);} .f3d-rail.g3{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(-1289.1px) translateY(329px) translateZ(-505.5px) rotateY(104.6deg) rotateZ(-19.1deg);} .f3d-rail.g4{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(-1325.4px) translateY(271px) translateZ(-668.9px) rotateY(100.4deg) rotateZ(-19.1deg);} .f3d-rail.g5{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(-1349.7px) translateY(213px) translateZ(-834.4px) rotateY(96.3deg) rotateZ(-19.1deg);} .f3d-rail.g6{width:177px;margin:-55px 0 0 -88.5px;transform:translateX(-1362px) translateY(155px) translateZ(-1001.3px) rotateY(92.1deg) rotateZ(-19.1deg);} /* escalier CENTRAL : un pan de rambarde de chaque côté, dans la pente (43.6°) */ .f3d-rail.cg{width:505px;margin:-55px 0 0 -252.5px;transform:translateX(-235px) translateY(297px) translateZ(-930px) rotateY(90deg) rotateZ(-43.6deg);} .f3d-rail.cd{width:505px;margin:-55px 0 0 -252.5px;transform:translateX(235px) translateY(297px) translateZ(-930px) rotateY(-90deg) rotateZ(43.6deg);} /* --- ANGLES ARRONDIS entre mur du fond et murs latéraux (v2 2026-07-06, « une seule même pièce ») : quart de cylindre en 7 LATTES par coin (rayon 440, centre x±960/z-1060, virages de ~13°). PLUS AUCUNE démarcation : (a) TOUTES les lattes + le fond + les latéraux partagent le MÊME fondu aux mêmes hauteurs monde (fini l'interpolation par latte de la v1) ; (b) le motif de briques CONTINUE de proche en proche : chaque latte fait ~1 brique de large (chorde 98.5 ≈ période 96) et son --jointX décale la phase du reste (±2.5px par latte, calé sur --jointX:56 du fond et sur 56.5/12.5 des latéraux). Les vrais murs restent entiers derrière. --- */ .f3d-coin{ width:101.5px;height:1050px;margin:-525px 0 0 -50.75px; --fondu:linear-gradient(#0f216d 8%,#21407b 16%,#4d84ad 30%,#7ab2d1 56%); } .f3d-coin.cd0{--jointX:1.5px;transform:translateX(1009.3px) translateZ(-1497.2px) rotateY(-6.4deg);} .f3d-coin.cd1{--jointX:95px;transform:translateX(1105.3px) translateZ(-1475.3px) rotateY(-19.3deg);} .f3d-coin.cd2{--jointX:92.5px;transform:translateX(1194.1px) translateZ(-1432.6px) rotateY(-32.1deg);} .f3d-coin.cd3{--jointX:90px;transform:translateX(1271.1px) translateZ(-1371.1px) rotateY(-45deg);} .f3d-coin.cd4{--jointX:87.5px;transform:translateX(1332.6px) translateZ(-1294.1px) rotateY(-57.9deg);} .f3d-coin.cd5{--jointX:85px;transform:translateX(1375.3px) translateZ(-1205.3px) rotateY(-70.7deg);} .f3d-coin.cd6{--jointX:82.5px;transform:translateX(1397.2px) translateZ(-1109.3px) rotateY(-83.6deg);} .f3d-coin.cg0{--jointX:4px;transform:translateX(-1009.3px) translateZ(-1497.2px) rotateY(6.4deg);} .f3d-coin.cg1{--jointX:6.5px;transform:translateX(-1105.3px) translateZ(-1475.3px) rotateY(19.3deg);} .f3d-coin.cg2{--jointX:9px;transform:translateX(-1194.1px) translateZ(-1432.6px) rotateY(32.1deg);} .f3d-coin.cg3{--jointX:11.5px;transform:translateX(-1271.1px) translateZ(-1371.1px) rotateY(45deg);} .f3d-coin.cg4{--jointX:14px;transform:translateX(-1332.6px) translateZ(-1294.1px) rotateY(57.9deg);} .f3d-coin.cg5{--jointX:16.5px;transform:translateX(-1375.3px) translateZ(-1205.3px) rotateY(70.7deg);} .f3d-coin.cg6{--jointX:19px;transform:translateX(-1397.2px) translateZ(-1109.3px) rotateY(83.6deg);} /* les 2 portes d'ÉTAGE dans l'angle arrondi — RECENTRÉES visuellement (owner 2026-07-06 : « un tout petit peu déportées vers le mur du fond ») → placées à 48.5° de l'arc (mesuré ≈55% de l'arc à l'écran ; 45° paraissait décalé vers le fond, 51° trop vers le latéral), 5px en avant des lattes */ .f3d-porte-coin{width:170px;height:281px;margin:-140.5px 0 0 -85px;} .f3d-porte-coin.g{transform:translateX(-1285.9px) translateY(39.5px) translateZ(-1348.2px) rotateY(48.5deg);} .f3d-porte-coin.d{transform:translateX(1285.9px) translateY(39.5px) translateZ(-1348.2px) rotateY(-48.5deg);} /* --- PORTES (images SM64 de l'owner, images/Portes/) : 2 en haut des escaliers (mur du fond, posées sur l'étage) + 2 en bas (façade, posées au sol). Destinations pas encore choisies → toc-toc + toast au clic. --- */ .f3d-porte{ position:absolute;transform:translateX(-50%);transform-origin:50% 100%; cursor:pointer;transition:filter .16s ease;z-index:2; } /* survol : la porte ne s'agrandit plus (l'owner trouvait que ça faisait « moins vraie porte ») — elle s'éclaircit juste un peu pour montrer qu'elle est cliquable */ .f3d-porte:hover,.f3d-porte.survol-force{filter:brightness(1.1);} /* ⚠⚠ LA PAROI COURBE DE GAUCHE EST VUE DE DOS (mesuré le 2026-09-15) : `g7` tourne de −82,8°, donc sa normale pointe HORS de la salle — depuis le hall on en voit l'ENVERS (la droite, `d7`, tourne de −97,2° et montre bien sa face). Les briques et les collines sont symétriques : le défaut a vécu là depuis le premier jour sans que rien ne le trahisse. Le CHIFFRE d'une porte à étoiles, lui, le crie — l'owner a vu un « 5 » à l'envers. → on remet la porte à l'endroit, et elle seule. ⚠ l'ordre compte : `translateX(-50%) scaleX(-1)` miroite d'abord AUTOUR DU CENTRE (transform-origin 50% 100%) puis décale — la porte ne bouge pas d'un pixel. L'écrire dans l'autre sens la déplacerait d'une demi-largeur. */ .f3d-murcourbe.g7 .f3d-porte{transform:translateX(-50%) scaleX(-1);} /* ⭐ UNE PORTE À ÉTOILES ENCORE SCELLÉE (owner 2026-09-15, 2ᵉ passe : « j'aime pas l'effet grisé, garde plutôt les couleurs normales ») : elle garde EXACTEMENT ses couleurs. Le sceau n'est pas une teinte — c'est le battant lui-même : tant qu'il porte l'étoile et son chiffre, la salle est fermée ; une fois ouverte, il redevient un bois ordinaire, celui de la boutique de Toad. Rien à éteindre, donc rien à regarder de travers. ⚠ la classe reste (elle porte l'état pour les lecteurs d'écran et pour le banc), mais elle ne peint plus rien, et la porte reste cliquable : c'est le clic qui apprend au visiteur ce qui lui manque. */ /* ⭐ L'ÉCLAT D'UNE PORTE QUI CÈDE : une étoile jaillit du battant, puis il redevient du bois. ⚠ il vit sur (la scène du foyer porte un transform : un `fixed` s'y ancrerait et défilerait avec elle), il est PUREMENT DÉCORATIF — l'état de la porte est déjà posé quand il paraît — et il est retiré par un MINUTEUR, jamais par un `animationend`. */ .porte-etoile-eclat{ position:fixed;width:88px;height:88px;margin:-44px 0 0 -44px; z-index:820;pointer-events:none; animation:porteEclat 1.25s ease-out forwards; } @keyframes porteEclat{ 0% {transform:scale(.2) rotate(-30deg);filter:brightness(2.4);} 30% {transform:scale(1.4) rotate(10deg);filter:brightness(1.4);} 65% {transform:scale(1.05) rotate(0deg);} 100%{transform:scale(2.5) rotate(16deg);opacity:0;} } @media (prefers-reduced-motion: reduce){ .porte-etoile-eclat{display:none;} } /* --- ESCALIER DE VELOURS (rampe centrale vers le tableau) --- */ .f3d-stairs{ width:470px;height:500px;margin:-250px 0 0 -235px;top:50%;left:50%; transform:translateY(352px) translateZ(-930px) rotateX(45deg); background: repeating-linear-gradient(#ff6d80 0 4px, transparent 4px 8px, #c9273a 8px 52px), linear-gradient(#e0384c,#b52235); box-shadow:0 6px 40px rgba(0,0,0,.35); } .f3d-landing{ width:560px;height:210px;margin:0 0 0 -280px;top:50%; transform:translateY(150px) translateZ(-1460px) rotateX(90deg); background:linear-gradient(#c9273a,#a81d2c); } /* --- LE TABLEAU sur le mur du fond --- */ .f3d-halo{ position:absolute;left:50%;top:34%;width:640px;height:640px;transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,247,221,.55), transparent 62%); } .f3d-frame{ position:absolute;left:50%;top:29%;transform:translate(-50%,-50%);z-index:2; width:450px;height:532px;padding:18px;border-radius:14px;cursor:pointer; background:linear-gradient(135deg,#f4f5f8,#c3c7d0 45%,#e9ebf0 62%,#a7abb8); box-shadow:0 0 0 5px #ffd23f, 0 0 0 8px #a8791a, 0 22px 50px rgba(0,0,0,.5); } .f3d-frame img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;background:#2a2540;} .f3d-frame:hover img{filter:url(#ondulation);} .f3d-plaque{ position:absolute;left:50%;top:59%;transform:translateX(-50%);z-index:2; font-family:'Cinzel',serif;font-weight:700;font-size:22px;letter-spacing:1px; color:#ffe9a8;background:#7a5a12;border:3px solid #ffd23f;border-radius:8px; padding:.25rem 1rem;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.4); cursor:pointer;transition:filter .16s ease, box-shadow .16s ease; } /* la plaque réécoute le narrateur : petit halo doré au survol (direct ou simulé par le filet 3D .survol-force) */ .f3d-plaque:hover,.f3d-plaque.survol-force{ filter:brightness(1.1);box-shadow:0 6px 20px rgba(255,210,63,.5); } /* ⭐ LES ÉCRITEAUX RÉSEAUX (reposés le 2026-09-19). ⚠ leurs `left` dataient du mur de 1900 px : sur le mur ÉLARGI à 2800, la même place MONDE (x ±513) vaut 31,7 % / 68,3 % — la règle qui a déjà recalé les entrées Galerie (27/73 → 34,4/65,6). À 23/77 ils tombaient sur un nuage, loin du tableau. ⚠ `top:36%` est MESURÉ : à 33 % l'écriteau gauche mordait de 10 px le bas d'un nuage (cliquable, lui aussi) — le banc exige zéro recouvrement. */ .f3d-social{ position:absolute;top:36%;width:96px;height:92px;padding:0;border:none;background:none; transform:translate(-50%,-50%);cursor:pointer;z-index:2; transition:transform .22s cubic-bezier(.34,1.56,.64,1); } .f3d-social img{width:100%;height:100%;display:block;image-rendering:auto;} .f3d-social:hover,.f3d-social.survol-force{transform:translate(-50%,-50%) scale(1.16) rotate(-4deg);} .f3d-social:focus-visible{outline:3px solid var(--or);outline-offset:4px;border-radius:18px;} #f3dYoutube{left:31.7%;} #f3dDiscord{left:68.3%;} /* … ET DANS LA BARRE DU HAUT, sur toutes les pages (construireReseaux) */ .barre .reseaux{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;} .barre .reseau{ width:28px;height:27px;padding:0;border:none;background:none;cursor:pointer;display:block; transition:transform .22s cubic-bezier(.34,1.56,.64,1); } .barre .reseau img{width:100%;height:100%;display:block;object-fit:contain;} .barre .reseau:hover{transform:scale(1.2) rotate(-5deg);} .barre .reseau:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:8px;} /* ⛔ 2026-09-19 (vu sur capture) : sur 375 px les deux icônes ÉCRASAIENT le fil d'Ariane (il ne restait que « … ▸ L… »). Sur téléphone la barre garde le fil et la progression ; les réseaux y restent au FOYER (leurs écriteaux). */ @media (max-width:560px){ .barre .reseaux{display:none;} } @media (prefers-reduced-motion: reduce){ .f3d-social,.barre .reseau{transition:none;} .f3d-social:hover,.f3d-social.survol-force{transform:translate(-50%,-50%);} .barre .reseau:hover{transform:none;} } .f3d-star{ position:absolute;left:50%;top:11%;transform:translate(-50%,-50%);z-index:2; font-size:70px;color:#ffd23f;text-shadow:0 0 24px rgba(255,210,63,.9),0 3px 0 #c99a1e; cursor:pointer;animation:foyerFlotte 3.4s ease-in-out infinite; } /* --- le tableau du foyer vu en GRAND (lightbox, clic sur l'œuvre) --- */ #tableauZoom{ position:fixed;inset:0;z-index:130;cursor:pointer; display:flex;align-items:center;justify-content:center; background:rgba(10,6,24,.92); } #tableauZoom[hidden]{display:none;} /* pas d'anim d'opacité (règle anti-gel : élément cliquable) — léger zoom d'entrée */ #tableauZoom figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem; animation:tableauZoomIn .3s ease both;} @keyframes tableauZoomIn{from{transform:scale(.92);}to{transform:none;}} #tableauZoom img{ max-width:min(92vw,900px);max-height:76vh;display:block;border-radius:10px; background:#fff;padding:10px; box-shadow:0 0 0 6px #ffd23f, 0 0 0 10px #a8791a, 0 30px 80px rgba(0,0,0,.7); } #tableauZoom figcaption{ font-family:'Cinzel',serif;color:#ffe9a8;text-align:center;font-size:1.05rem; max-width:min(92vw,700px);text-shadow:0 2px 6px rgba(0,0,0,.8);line-height:1.5; } #tableauZoom figcaption span{color:#ffd23f;font-size:.9rem;} /* --- ambiance : vignette + fond de brume --- */ .f3d-vignette{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(20,14,40,.4)), linear-gradient(transparent 70%, rgba(20,14,40,.35)); } @media (prefers-reduced-motion: reduce){ .f3d-cam{transition:none;} .f3d-sun-rayons,.f3d-star{animation:none;} .f3d-sun.f3d-sun-flambe{animation:none;} .nuage-yeux-f3d,.f3d-nuage.nuage-eternue,.f3d-puff{animation:none;} .f3d-nuage-piece{animation:none;} .f3d-frame:hover img{filter:none;} } /* zones cliquables */ .foyer-porte,.foyer-cliquable{cursor:pointer;} .foyer-porte-hit{cursor:pointer;} .foyer-porte use,.foyer-galerie-txt{transition:transform .18s ease, filter .18s ease;transform-box:fill-box;transform-origin:center;} .foyer-porte:hover use{filter:drop-shadow(0 0 14px rgba(255,210,63,.6));} .foyer-porte:hover .foyer-galerie-txt{transform:translateY(-3px) scale(1.05);} /* étoile flottante : léger flottement + halo qui respire */ #fEtoileGroupe{transform-box:fill-box;transform-origin:center;animation:foyerFlotte 3.4s ease-in-out infinite;cursor:pointer;} #fEtoileGroupe circle{animation:foyerHalo 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;} @keyframes foyerFlotte{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} @keyframes foyerHalo{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}} /* le tableau central : l'effet SIGNATURE (ondulation d'eau) au survol */ #fTableauGroupe{cursor:pointer;} #fTableauGroupe:hover #fToile{filter:url(#ondulation);} #fToile{transition:filter .3s ease;} /* emblème PAZ qui tourne doucement au sol */ .foyer-paz-rayons{transform-box:fill-box;transform-origin:center;animation:tourneLent 26s linear infinite;} .foyer-paz-soleil{transform-box:fill-box;transform-origin:center;animation:foyerHalo 3.2s ease-in-out infinite;} @keyframes tourneLent{to{transform:rotate(360deg);}} /* écriteaux réseaux : petit rebond au survol */ .foyer-ecriteau{transition:transform .18s ease;transform-box:fill-box;transform-origin:center;} .foyer-ecriteau:hover{transform:scale(1.12);} /* ---- EASTER EGG : le tapis-soleil magique (2026-07-16) ---- */ #f3dSun{cursor:pointer;pointer-events:auto;} .f3d-sun{transition:filter .3s ease;} /* survol (direct OU simulé par le filet de sécurité 3D .survol-force) : une lueur dorée invite au clic */ #f3dSun:hover .f3d-sun,#f3dSun.survol-force .f3d-sun{ filter:drop-shadow(0 0 22px rgba(255,210,63,.7)) brightness(1.06); } /* l'embrasement bref au clic (relancé par reflow à chaque clic) */ .f3d-sun.f3d-sun-flambe{animation:f3dSunFlambe .7s ease-out;} @keyframes f3dSunFlambe{ 0%{filter:drop-shadow(0 0 0 rgba(255,210,63,0)) brightness(1);transform:scale(1);} 28%{filter:drop-shadow(0 0 42px rgba(255,228,120,.95)) brightness(1.5) saturate(1.3);transform:scale(1.09);} 100%{filter:drop-shadow(0 0 0 rgba(255,210,63,0)) brightness(1);transform:scale(1);} } /* les pièces de la fontaine (posées sur body, physique en JS) */ .f3d-piece-jet{ position:fixed;left:0;top:0;width:26px;height:26px;z-index:638; pointer-events:none;will-change:transform;transition:opacity .2s ease; } /* l'étoile cachée du foyer : posée sur body, fixe à l'écran (comme les étoiles des fiches — une scène en transform:scale piégerait un position:fixed) */ .etoile-foyer-ancre{position:fixed;left:50%;top:33%;width:0;height:0;z-index:642;} .etoile-foyer{ position:absolute;left:-28px;top:-28px;width:56px;height:auto;cursor:pointer; filter:drop-shadow(0 0 13px rgba(255,220,80,.85)); } /* ---- EASTER EGG : les nuages vivants (2026-07-16) ---- */ /* les yeux clignent — chaque nuage a son propre rythme via les variables --clin / --clin-dur, posées en JS ; elles HÉRITENT à travers le jusqu'à ce groupe cloné dans le symbole (astuce custom-property/). ⚠ classe DISTINCTE de .nuage-yeux (les nuages de l'ACCUEIL, keyframe clignote) — on réutilise juste la même animation clignote. */ .nuage-yeux-f3d{ transform-box:fill-box;transform-origin:center; animation:clignote var(--clin-dur,5.5s) var(--clin,0s) infinite; } /* on peut poquer un nuage : curseur + petit éclat au survol */ .f3d-nuage{cursor:pointer;} /* ⚠ AU DOIGT, LES YEUX NE CLIGNENT PLUS (owner 2026-09-19, capture de son téléphone : « on voit le visage mais pas le nuage »). Un descendant ANIMÉ fait composer chaque nuage sur sa propre surface ; sur les murs proches de l'œil elle est énorme (écran ×3) et son GPU la laisse tomber — seuls les yeux, petits, survivaient. Sans animation, le nuage se peint AVEC son mur, qui s'affiche. REMÈDE À L'ESSAI, non vérifiable sans son appareil. */ @media (pointer:coarse){ .nuage-yeux-f3d{animation:none !important;} /* ⚠ sans `#foyer` : le symbole vit dans les , hors de la scène */ #foyer .f3d-nuage.nuage-eternue{animation:none;} } .f3d-nuage.nuage-survol{filter:brightness(1.06);} /* l'éternuement (au clic) : un éclat lumineux — PAS de transform (certains nuages ont un scaleX(-1)/translateX inline qu'on ne doit pas écraser) */ .f3d-nuage.nuage-eternue{animation:nuageEternue .5s ease;} @keyframes nuageEternue{ 0%{filter:brightness(1);} 30%{filter:brightness(1.4) drop-shadow(0 0 9px rgba(255,255,255,.9));} 100%{filter:brightness(1);} } /* le petit nuage de « pouf » émis (posé sur body, fixe) */ .f3d-puff{ position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px; border-radius:50%;pointer-events:none;z-index:637; background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 45%, transparent 70%); animation:poufNuage .9s ease-out forwards; } @keyframes poufNuage{ 0%{transform:scale(.4);opacity:0;} 20%{opacity:.95;} 100%{transform:scale(1.6) translateY(-36px);opacity:0;} } /* la pièce cachée à ramasser d'un nuage qui éternue : elle entre, flotte doucement, cliquable ; s'envole à la prise */ .f3d-nuage-piece{ position:fixed;left:0;top:0;width:32px;height:32px;margin:-16px; pointer-events:auto;cursor:pointer;z-index:642; filter:drop-shadow(0 0 10px rgba(255,210,63,.9)); animation:pieceNuageEntre .5s ease-out both, pieceNuageBob 1.7s ease-in-out .5s infinite; } @keyframes pieceNuageEntre{0%{transform:translateY(-26px) scale(.4);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}} @keyframes pieceNuageBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} .f3d-nuage-piece.prise{animation:pieceNuagePrise .5s ease forwards;pointer-events:none;} @keyframes pieceNuagePrise{0%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(-70px) scale(.4);opacity:0;}} /* bouton retour flottant (coin haut gauche) */ .retour-flottant{ position:absolute;top:14px;left:14px;z-index:20; width:46px;height:46px;padding:0;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:1.3rem; background:rgba(13,9,32,.55);backdrop-filter:blur(4px); border:2px solid var(--or);color:var(--or); transition:background .2s,color .2s,transform .15s; } .retour-flottant:hover{background:var(--or);color:var(--encre);transform:translateX(-3px);} .foyer-consigne{ position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:15; font-family:'Cinzel',serif;font-weight:700;font-size:.9rem;letter-spacing:.03em; color:#fff4e0;text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none; animation:pulse 2.4s ease-in-out infinite;text-align:center;padding:0 1rem; } /* ============================================================ BOÎTE DE DIALOGUE façon Nintendo (narrateur, accueil de Toad…) ============================================================ */ /* La boîte de dialogue est MODALE : son voile couvre TOUT l'écran (au-dessus des boutons de son, z 450) et avale les clics — cliquer n'importe où fait avancer le texte, rien d'autre n'est cliquable tant que quelqu'un parle (demande owner 2026-07-09). */ #dialogue{ position:fixed;inset:0;z-index:500; display:flex;justify-content:center;align-items:flex-end; padding:0 3vw 3vh; pointer-events:auto;cursor:pointer; background:rgba(8,4,16,.14); /* léger voile : « clique pour continuer » */ } #dialogue[hidden]{display:none;} .dialogue-boite{ position:relative;pointer-events:auto;cursor:pointer; width:min(760px,94vw); background:linear-gradient(#241a3d,#150e28); border:4px solid #ffd23f;border-radius:16px; box-shadow:0 0 0 4px #7a5a12, 0 16px 40px rgba(0,0,0,.6); padding:1.1rem 1.4rem 1.5rem; animation:dialogueEntre .28s ease both; } /* ⚠️ pas d'opacité ici : la boîte est CLIQUABLE — si l'anim gèle (panneau de preview) une boîte bloquée à opacity:0 devient un mur invisible posé sur les entrées Galerie (owner bug-report 2026-07-06). Le glissement suffit. */ @keyframes dialogueEntre{from{transform:translateY(24px) scale(.97);}to{transform:none;}} /* ⭐ LES CHOIX D'UNE BOÎTE DE DIALOGUE (2026-08-12) — la porte de la maison de Toad : « Refaire le niveau ? » / « Rentrer aux Bois ? ». ⚠ AUCUNE animation ni transition d'OPACITÉ : ces boutons sont CLIQUABLES, et le panneau de prévisualisation gèle les animations — un bouton figé à opacity:0 deviendrait un mur invisible (règle anti-gel du projet). Le soulèvement au survol ne touche que la transformation. */ .dialogue-choix{ display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center; margin-top:.9rem; } .dlg-choix-btn{ font-family:'Luckiest Guy',cursive;font-size:clamp(.95rem,2.2vw,1.1rem); letter-spacing:.02em;color:var(--encre); background:linear-gradient(#ffe07a,var(--or)); border:3px solid #7a5a12;border-radius:12px; padding:.35rem 1.1rem;cursor:pointer; box-shadow:0 4px 0 #7a5a12; transition:transform .12s ease, box-shadow .12s ease; } .dlg-choix-btn:hover,.dlg-choix-btn:focus-visible{ transform:translateY(-2px);box-shadow:0 6px 0 #7a5a12; } .dlg-choix-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #7a5a12;} @media (prefers-reduced-motion:reduce){ .dlg-choix-btn{transition:none;} .dlg-choix-btn:hover,.dlg-choix-btn:focus-visible{transform:none;} } .dialogue-nom{ position:absolute;top:-16px;left:22px; font-family:'Luckiest Guy',cursive;font-size:1rem;letter-spacing:.03em; color:var(--encre);background:var(--or); border:3px solid #7a5a12;border-radius:8px;padding:.05rem .7rem; } .dialogue-texte{ font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(1rem,2.4vw,1.2rem); line-height:1.55;color:#fff4e0;margin:0;min-height:3em;white-space:pre-wrap; } .dialogue-suite{ position:absolute;right:20px;bottom:12px;color:var(--or);font-size:1.2rem; animation:sautille 1s ease-in-out infinite; } .dialogue-suite[hidden]{display:none;} @keyframes sautille{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(4px);opacity:1;}} @media (prefers-reduced-motion: reduce){ #fEtoileGroupe,#fEtoileGroupe circle,.foyer-paz-rayons,.foyer-paz-soleil, .dialogue-boite,.dialogue-suite,.foyer-consigne{animation:none;} #fTableauGroupe:hover #fToile{filter:none;} } /* ============================================================ BARRE DE NAVIGATION (galerie et suivantes) ============================================================ */ .barre{ position:sticky;top:0;z-index:50; display:flex;align-items:center;gap:1rem; padding:.7rem 1.2rem; /* en-tête TOUJOURS en Nunito : sans ça, une fiche qui redéfinit la police de corps (ex. Acerius = Quadraat) la fait hériter par la barre → fil d'ariane dans la mauvaise police (owner 2026-07-16) */ font-family:'Nunito', sans-serif; background:linear-gradient(rgba(13,9,32,.92), rgba(13,9,32,.75)); backdrop-filter:blur(6px); border-bottom:2px solid rgba(255,210,63,.25); } .barre .retour{ display:inline-flex;align-items:center;gap:.5rem; background:none;border:2px solid var(--or);color:var(--or); border-radius:999px;padding:.35rem .95rem;font-weight:800;font-size:.9rem; transition:background .2s,color .2s,transform .15s; } .barre .retour:hover{background:var(--or);color:var(--encre);transform:translateX(-3px);} .barre .retour{white-space:nowrap;flex:0 0 auto;} @media (max-width:720px){ .barre .retour .retour-mot{display:none;} } /* ⭐ LE FIL SE REPLIE À LA PLACE (2026-09-16) : temple.js pose le chemin entier puis MESURE s'il déborde (scrollWidth > clientWidth). Pour que ce débordement existe, le fil ne passe pas à la ligne (`nowrap`), il a le droit de rétrécir sous son contenu (`min-width:0` — sans lui, un élément flex ne descend jamais sous la largeur de son texte et pousse la barre au lieu de déborder), et ce qui dépasse est rogné (`overflow:hidden`) le temps que le repli s'applique. */ .barre .fil{font-weight:700;color:#bfb3e8;font-size:.95rem; flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* le tout dernier recours : une page au nom trop long */ .barre .fil b{color:var(--creme);} /* la BARRE DE PROGRESSION (pièces, étoiles, futurs collectibles) : les vrais gifs du site (CoinSMW / etoile.gif), un item par collectible, éteint tant qu'on n'a rien trouvé de cette famille */ .progression{ margin-left:auto;display:flex;align-items:center;gap:.9rem; font-family:'Luckiest Guy',cursive;color:var(--or);font-size:1.02rem; white-space:nowrap; } .prog-item{display:flex;align-items:center;gap:.4rem;opacity:.4;transition:opacity .3s;} .prog-item.actif{opacity:1;} .prog-item img{height:20px;width:auto;display:block;image-rendering:pixelated;} /* le fil d'ariane cliquable (façon explorateur de dossiers) */ .fil-lien{ background:none;border:none;padding:0;margin:0; font:inherit;color:inherit;cursor:pointer;opacity:.85; } .fil-lien:hover,.fil-lien:focus-visible{color:var(--or);text-decoration:underline;} .fil-sep{margin:0 .35rem;opacity:.55;} /* ============================================================ SCÈNE 2 — LA GRANDE GALERIE (le couloir des univers) Un vrai couloir de château : murs de briques velours (même famille de motif que le foyer), grand tapis rouge central, alcôves en alternance gauche/droite (plaque-logo · torche · porte qui S'ENTROUVRE au survol). ============================================================ */ /* la police du logo SUPER MARIO 64 (fichier fourni par l'owner) */ @font-face{ font-family:'SuperMario256'; src:url("../fonts/SuperMario256.ttf") format("truetype"); font-display:swap; } /* les polices des FICHES perso (fichiers de l'owner, copiés dans fonts/) : Daydream = titre du perso · Baloo 2 (variable, tous les poids) = texte courant · Super Mario Bros 2 = « SOMMAIRE » + titres de sections (APPARENCE…) · Super Mario 286 = entrées du sommaire. ⚠ SuperMario286 ≠ SuperMario256 : deux polices différentes ! */ @font-face{ font-family:'Daydream'; src:url("../fonts/Daydream.otf") format("opentype"); font-display:swap; } @font-face{ font-family:'Baloo 2'; src:url("../fonts/Baloo2.ttf") format("truetype"); font-weight:400 800; font-display:swap; } @font-face{ font-family:'Super Mario Bros 2'; src:url("../fonts/SuperMarioBros2.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'SuperMario286'; src:url("../fonts/SuperMario286.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'ThaleahFat'; /* l'inventaire des Opera (Nen) */ src:url("../fonts/ThaleahFat.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Abyssinica SIL'; /* texte de la fiche Lexinum (police libre SIL/OFL, téléchargée du dépôt officiel Google Fonts) */ src:url("../fonts/AbyssinicaSIL.ttf") format("truetype"); font-display:swap; } /* les polices de la fiche ACERIUS (fichiers de l'owner, Desktop/Acerius) : Beastform = le nom + « Sommaire » · Alice in Wonderland = titres de sections · En Garde = la voix de la reine sous le dessin d'en-tête. ⚠ le texte courant devrait être Quadraat (la police de BG3) mais elle est COMMERCIALE et absente du poste → substitut serif en attendant (voir --ac-serif plus bas ; owner doit fournir le ttf ou valider Alegreya). */ @font-face{ font-family:'Beastform'; src:url("../fonts/Beastform.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Alice in Wonderland'; src:url("../fonts/AliceInWonderland.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'En Garde'; src:url("../fonts/EnGarde.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Caveat'; /* essai manuscrite « moderne » de l'Histoire (gardée en réserve si l'owner préfère à la plume) */ src:url("../fonts/Caveat.ttf") format("truetype"); font-weight:400 700; font-display:swap; } @font-face{ font-family:'Petit Formal Script'; /* l'HISTOIRE, essai « plume d'époque » : calligraphie au calame (libre OFL, Google Fonts) */ src:url("../fonts/PetitFormalScript.ttf") format("truetype"); font-display:swap; } /* la police de la fiche BREVSHKET : ROBOTO (variable 100-900, libre, dépôt officiel Google Fonts) — corps ET titres (choix owner) */ @font-face{ font-family:'Roboto'; src:url("../fonts/Roboto.ttf") format("truetype"); font-weight:100 900; font-display:swap; } @font-face{ font-family:'Roboto'; src:url("../fonts/Roboto-Italic.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap; } /* jeu de polices « parchemin » à comparer sur l'Histoire (libres OFL) */ @font-face{ font-family:'EB Garamond'; src:url("../fonts/EBGaramond.ttf") format("truetype"); font-weight:400 800; font-display:swap; } @font-face{ font-family:'Cardo'; src:url("../fonts/Cardo.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Uncial Antiqua'; src:url("../fonts/UncialAntiqua.ttf") format("truetype"); font-display:swap; } /* polices de la fiche APÉDION : corps = CAT Walzhari (libre, Peter Wiegel, style onciale rongée) ; titres = 'JJK' (fan-font Jujutsu Kaisen — les accents É/é/è/ê/à/ç/ù/û/î/ô ont été GREFFÉS dans le ttf par fontTools, la fonte d'origine n'en avait aucun ; original sauvegardé en scratchpad) */ @font-face{ font-family:'CAT Walzhari'; src:url("../fonts/CATWalzhari.woff") format("woff"); font-display:swap; } @font-face{ font-family:'JJK'; src:url("../fonts/JujutsuKaisen.ttf?v=2") format("truetype"); font-display:swap; } /* ⚠ ?v=2 : bump ce numéro à chaque re-chirurgie du ttf (le navigateur cache la police indépendamment du css) — v2 = é/è/ê SANS les 3 points */ #galerie{ position:relative; /* ÉCHELLE DU COULOIR : tout le contenu (portes, torches, Toad…) grandit avec l'écran — petit sur téléphone, généreux sur un grand moniteur — tout en laissant toujours des briques visibles de chaque côté du tapis. --porteH pilote portes/torches/halos. */ --porteH: clamp(250px, 21vw, 430px); --toadH: clamp(160px, 13vw, 250px); --plaqueL: clamp(170px, 15vw, 280px); /* murs : velours du hall + briques en quinconce (running bond, même géométrie 96×48 / joints 3px que les murs du foyer) */ background-color:#43102e; background-image: radial-gradient(1000px 380px at 50% -120px, rgba(255,210,63,.09), transparent 70%), repeating-linear-gradient(180deg, rgba(20,5,17,.5) 0 3px, transparent 3px 48px), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(20,5,17,.4) 270deg 360deg), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(20,5,17,.4) 270deg 360deg), linear-gradient(#1d0716, #43102e 420px, #521539); background-size:auto, 96px 48px, 96px 96px, 96px 96px, auto; background-position:0 0, 0 0, 0 3px, 48px 51px, 0 0; } /* le grand tapis rouge qui descend tout le couloir avec le visiteur */ .tapis-galerie{ position:absolute;inset:0;margin:0 auto; width:min(94vw, clamp(700px, 62vw, 1350px)); pointer-events:none;z-index:0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 4px, transparent 4px 56px), linear-gradient(90deg, var(--or-sombre) 0 6px, #6d1120 6px 30px, #a01c2e 30px calc(100% - 30px), #6d1120 calc(100% - 30px) calc(100% - 6px), var(--or-sombre) calc(100% - 6px) 100%); box-shadow:0 0 34px rgba(0,0,0,.45); } .sol{ position:fixed;left:0;right:0;bottom:0;height:130px;pointer-events:none;z-index:0; /* damier pierre de château (crème doré + brun sombre), avec une ombre chaude là où le sol rejoint les murs (haut = fond de la perspective) */ background: linear-gradient(rgba(24,8,14,.5), rgba(24,8,14,.12)), repeating-conic-gradient(#d0b47e 0% 25%, #6f4a29 0% 50%) 0 0 / 72px 72px; transform:perspective(420px) rotateX(48deg); transform-origin:bottom center; } .entete-galerie{text-align:center;padding:2.4rem 1rem .4rem;position:relative;z-index:1;} /* le titre façon SUPER MARIO 64 : les lettres sont coloriées par le JS */ .entete-galerie h1{ font-family:'SuperMario256','Luckiest Guy',cursive; /* ⚠ borné par la largeur du TAPIS (owner 2026-09-19 : en page de bureau sur téléphone, 1100 px, le titre débordait du tapis de 700 px). Mesuré : à 1920 et au-delà la taille ne change pas (64 px). */ font-size:clamp(2rem, min(4.2vw, calc(min(94vw, clamp(700px, 62vw, 1350px)) * .054)), 4rem);color:var(--or); letter-spacing:.06em;text-transform:uppercase; text-shadow:none; /* le relief est porté par chaque lettre */ } /* la belle séparation dorée entre le titre et Toad : double filet (or clair sur or sombre) + ✦ ❖ ✦ qui scintillent */ .separe-titre{ display:flex;align-items:center;gap:1rem; width:min(560px, 58vw);margin:1.4rem auto 0; color:var(--or);font-size:1.05rem;opacity:.9; letter-spacing:.5em;text-indent:.5em;white-space:nowrap; text-shadow:0 0 10px rgba(255,210,63,.5); pointer-events:none;user-select:none; } .separe-titre::before,.separe-titre::after{content:"";flex:1;height:7px;} .separe-titre::before{ background: linear-gradient(90deg, transparent, var(--or)) 0 0/100% 2px no-repeat, linear-gradient(90deg, transparent, var(--or-sombre)) 0 100%/100% 2px no-repeat; } .separe-titre::after{ background: linear-gradient(90deg, var(--or), transparent) 0 0/100% 2px no-repeat, linear-gradient(90deg, var(--or-sombre), transparent) 0 100%/100% 2px no-repeat; } .mot-sm64{display:inline-block;white-space:nowrap;} .lettre-sm64{ display:inline-block; transform:rotate(var(--pench,0deg)); transition:transform .18s ease; /* relief façon logo SM64 (référence : screen Wix de l'owner) : EXTRUSION 3D v3 — la tranche blanche du bloc dépasse PLEIN BAS uniquement (le débord gauche/droite était encore trop prononcé), et l'ombre portée sombre tombe elle aussi droit dessous */ text-shadow: 0 .018em 0 #fff, 0 .036em 0 #fff, 0 .054em 0 #fff, 0 .2em .12em rgba(0,0,0,.5); } .lettre-sm64:hover{transform:translateY(-5px) rotate(var(--pench,0deg)) scale(1.15);} /* Toad t'accueille en dansant sur le tapis. Ses DEUX gifs (danse / parle) n'ont ni la même taille ni les mêmes marges transparentes : chacun reçoit SA hauteur d'affichage pour que Toad garde exactement la même stature quand il passe de l'un à l'autre (mesuré dans les gifs : danse = 96,6 % de son image, parle = 89,6 % et décalé de 5,2 % vers la droite — corrigé par un margin-left négatif). */ .toad-accueil{ display:block;margin:1.7rem auto 0;position:relative; width:calc(var(--toadH)*1.1);height:calc(var(--toadH)*1.13); background:none;border:none;padding:0;cursor:pointer; transition:transform .18s ease; } .toad-accueil img{ position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:auto;display:block; } .toad-accueil img.danse{height:calc(var(--toadH)*1.035);} .toad-accueil img.parle{height:calc(var(--toadH)*1.116);margin-left:calc(var(--toadH)*-0.052);} .toad-accueil::before{ /* son ombre au sol */ content:"";position:absolute;left:50%;bottom:2px; width:calc(var(--toadH)*.6);height:calc(var(--toadH)*.11); transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.38), transparent); } /* le rebond squash-and-stretch ne joue QU'AU CLIC (owner : le grossissement au survol faisait étrange) */ .toad-accueil.bondit{animation:toad-bondit .55s cubic-bezier(.34,1.4,.4,1);} @keyframes toad-bondit{ 0%{transform:scale(1);} 25%{transform:scale(1.15,.82);} 55%{transform:scale(.92,1.12) translateY(-10px);} 80%{transform:scale(1.05,.96);} 100%{transform:scale(1);} } .toad-accueil:focus-visible{outline:3px solid var(--or);outline-offset:4px;border-radius:12px;} /* ---- le couloir : une colonne d'alcôves ---- */ .portes{ position:relative;z-index:1; display:flex;flex-direction:column;align-items:center;gap:.4rem; max-width:min(1440px, 94vw);margin:1.4rem auto 0;padding:0 1rem 11rem; } .porte-univers{ /* TEINTE D'AMBIANCE PAR UNIVERS : la couleur (u.teinte, données) colore la TORCHE et son HALO — comme la galerie secrète. --rot/--sat recolorent la flamme (calculés depuis la teinte, cf. filtreFlamme). */ --teinte:#ffd23f; --rot:0deg; --sat:1; background:none;border:none;color:inherit; width:100%;padding:1.6rem 0; display:flex;align-items:center;justify-content:center; gap:clamp(1.1rem, 4vw, 4.5rem); cursor:default; /* seule la porte est cliquable (gate dans le JS) */ } .porte-univers .cadre-porte{cursor:pointer;} /* une alcôve sur deux est retournée : on longe le couloir en zigzag */ .porte-univers:nth-of-type(even){flex-direction:row-reverse;} .porte-univers:focus-visible{outline:3px solid var(--or);outline-offset:6px;border-radius:18px;} /* la plaque murale de l'univers (image créée par l'owner, logo intégré, cartouche doré en bas où le NOM est gravé en CSS — .plaque-nom est positionné en % de l'image, zone mesurée au pixel dans chaque png : u.plaque.zone dans temple.js) */ .alcove-expo{display:flex;flex-direction:column;align-items:center;gap:.55rem;} .plaque-logo{ display:flex;align-items:center;justify-content:center; position:relative; width:var(--plaqueL); filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition:transform .22s ease; } .plaque-img{display:block;width:100%;height:auto;} .plaque-nom{ position:absolute; display:flex;align-items:center;justify-content:center; font-family:'Cinzel',serif;font-weight:700; font-size:clamp(9px, calc(var(--plaqueL) * .052), 15px); letter-spacing:.02em;white-space:nowrap; color:#5a3a12; /* gravé dans l'or : sombre + reflet clair dessous */ text-shadow:0 1px 0 rgba(255,236,180,.55); pointer-events:none; } /* la plaque « ? » de la porte secrète (ancien style pixel conservé) */ .plaque-mystere{ aspect-ratio:1/1; background:url("../images/Galerie/plaque murale.png") center / contain no-repeat; image-rendering:pixelated; } /* Au survol de LA PORTE (pas de toute la rangée), la plaque se penche VERS la porte : à droite sur les alcôves normales, à gauche sur les alcôves retournées (zigzag). */ .porte-univers:has(.cadre-porte:hover) .plaque-logo, .porte-univers:focus-visible .plaque-logo{ transform:scale(1.05) rotate(2.2deg) translateX(10px); } .porte-univers:nth-of-type(even):has(.cadre-porte:hover) .plaque-logo, .porte-univers:nth-of-type(even):focus-visible .plaque-logo{ transform:scale(1.05) rotate(-2.2deg) translateX(-10px); } .logo-mystere{ font-family:'Luckiest Guy',cursive;font-size:2.6rem;color:#e6d4ff; text-shadow:0 0 18px rgba(190,120,255,.85); } .nb-oeuvres{font-size:clamp(.82rem, .85vw, 1.05rem);font-weight:700;color:#dfc39b;} /* la torche pixel (gif animé) et son halo chaud qui vacille — toutes les tailles suivent --porteH (échelle du couloir) */ .alcove-torche{ position:relative;flex:none;pointer-events:none; width:calc(var(--porteH)*.17);height:calc(var(--porteH)*.45); } .alcove-torche img{ display:block; width:calc(var(--porteH)*.45);height:calc(var(--porteH)*.45); margin-left:calc(var(--porteH)*-.14); image-rendering:pixelated; /* flamme recolorée dans la teinte de l'univers + halo coloré serré autour d'elle (comme la torche violette de la galerie secrète) */ filter:hue-rotate(var(--rot,0deg)) saturate(var(--sat,1)) drop-shadow(0 0 12px color-mix(in srgb, var(--teinte) 55%, transparent)); } .halo-torche{ position:absolute;left:50%;top:calc(var(--porteH)*.13); width:calc(var(--porteH)*.63);height:calc(var(--porteH)*.63); transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--teinte) 30%, transparent), color-mix(in srgb, var(--teinte) 12%, transparent) 45%, transparent 70%); animation:halo-vacille 2.8s ease-in-out infinite; } /* (halo décoratif, non cliquable : l'animation d'opacité est permise) */ @keyframes halo-vacille{ 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);} 40%{opacity:1;transform:translate(-50%,-50%) scale(1.14);} 70%{opacity:.85;transform:translate(-50%,-50%) scale(1.05);} } /* la porte : fermée au repos, ouverte au survol/focus. Chaque univers a sa PAIRE d'images (créées par le propriétaire, ROGNÉES au pixel opaque près à la copie dans le projet — les marges transparentes résiduelles faisaient « glisser » la porte au survol) : l'ouverture se passe DANS le même cadre → les deux images sont simplement CENTRÉES sur le même point, alignées en bas, à la même hauteur (empreintes vérifiées identiques à ±0,3 %). Échange par visibility (JAMAIS d'opacité : anti-gel). */ .cadre-porte{ position:relative;flex:none;display:block; width:calc(var(--porteH)*.72); height:calc(var(--porteH) + 12px); } .cadre-porte img{ position:absolute;left:50%;bottom:6px; transform:translateX(-50%); height:var(--porteH);width:auto;max-width:none; /* petite ombre douce sous la porte (lumière venant d'en haut) */ filter:drop-shadow(0 9px 11px rgba(0,0,0,.38)); } /* (la porte secrète a désormais SA paire d'images + SA plaque murale, créées par l'owner — plus de pancarte, même gabarit que les autres) */ .cadre-porte .porte-ouverte{visibility:hidden;} /* l'ouverture se déclenche en survolant LA PORTE elle-même, pas toute la rangée-bouton (demande owner 2026-07-09) */ .cadre-porte:hover .porte-ouverte, .porte-univers:focus-visible .cadre-porte .porte-ouverte{visibility:visible;} .cadre-porte:hover .porte-fermee, .porte-univers:focus-visible .cadre-porte .porte-fermee{visibility:hidden;} .cadre-porte:hover{ filter:drop-shadow(0 0 18px rgba(255,210,63,.4)); animation:porte-pop .32s ease; } @keyframes porte-pop{45%{transform:scale(1.06,.95);}} /* la plaque gravée sous la porte */ .cadre-porte .pancarte{ position:absolute;left:50%;bottom:0;transform:translateX(-50%); white-space:nowrap; } .pancarte{ font-family:'Cinzel',serif;font-weight:700;letter-spacing:.05em; font-size:clamp(.95rem, 1.05vw, 1.3rem); color:#f7e6c4;background:linear-gradient(#9c6a3d, var(--bois) 55%, #6b4322); border:3px solid var(--bois-sombre);border-radius:8px; padding:.45rem 1rem;min-width:170px; box-shadow:0 4px 0 var(--bois-sombre), 0 8px 14px rgba(0,0,0,.45); text-shadow:0 1px 2px rgba(0,0,0,.5); position:relative; } .pancarte::before,.pancarte::after{ content:"";position:absolute;top:-9px;width:4px;height:10px;background:#2c2138; } .pancarte::before{left:24%;} .pancarte::after{right:24%;} /* l'ornement doré entre deux alcôves */ .separe-alcove{ display:flex;align-items:center;gap:.9rem; width:min(720px, 74vw); color:var(--or);font-size:1rem;opacity:.55; pointer-events:none;user-select:none; } .separe-alcove::before,.separe-alcove::after{content:"";flex:1;height:2px;border-radius:2px;} .separe-alcove::before{background:linear-gradient(90deg, transparent, var(--or-sombre));} .separe-alcove::after{background:linear-gradient(90deg, var(--or-sombre), transparent);} .separe-alcove.secrete{display:none;} .separe-alcove.secrete.revelee{display:flex;} /* Porte secrète : une alcôve fantôme (teinte violette via u.teinte, qui colore torche + halo par le système générique) */ .porte-univers.secrete{display:none;} /* ⚠ pas d'animation sur .revelee tout seul : une anim CSS REDÉMARRE à chaque fois que la galerie repasse display:none→block → la porte « réapparaissait » à chaque retour (owner 2026-07-16). L'apparition ne se joue qu'UNE fois, au moment de la révélation, via la classe éphémère .vient-de-paraitre. */ .porte-univers.secrete.revelee{display:flex;} .porte-univers.secrete.revelee.vient-de-paraitre{animation:apparition 1s ease both;} /* la porte de l'owner est déjà violette : plus de hue-rotate, juste l'ombre douce standard (héritée de .cadre-porte img). Le nom se grave en sombre sur le cartouche ARGENT de sa plaque (les autres cartouches sont dorés → brun ; ici argent → ardoise + reflet froid). */ .porte-univers.secrete .plaque-nom{ color:#232032; text-shadow:0 1px 0 rgba(238,238,248,.55); } /* (torche + halo de la secrète : gérés par le système générique, sa teinte violette vient de u.teinte — plus besoin d'override ici) */ /* (pas d'opacité : élément cliquable, même règle anti-gel que le dialogue) */ @keyframes apparition{from{transform:scale(.6);}to{transform:none;}} /* INDICE de la porte secrète : un mur fissuré discret, calé à GAUCHE (sur les briques, hors du tapis) tout en bas du couloir, d'où suinte une faible lueur violette. cursor:default = pas d'indice au curseur (secret). La lueur seule pulse (élément décoratif interne) — jamais d'opacité animée sur l'élément CLIQUABLE (règle anti-gel du panneau de preview). */ .indice-secret{ align-self:flex-start; /* ancrée au BORD GAUCHE DE L'ÉCRAN (48px), pas au conteneur : .portes est plafonné à 1440px mais le tapis grandit jusqu'à 1350px → sur très grand écran une marge relative au conteneur finissait SUR le tapis (owner 2026-07-10). (min(1440px,94vw)-100vw)/2 annule le centrage de .portes, -1rem son padding → 48px du bord, briques garanties partout */ margin:.4rem 0 0 calc((min(1440px, 94vw) - 100vw)/2 - 1rem + 48px); width:clamp(34px, 3vw, 48px); /* vraiment petit : un détail à repérer */ position:relative;z-index:1;line-height:0; cursor:default; } .indice-secret svg{display:block;width:100%;height:auto;overflow:visible;} /* AVANT le premier clic : rien ne brille (juste les fêlures sombres dans le mur — vraiment cachée, owner 2026-07-10). Le clic ajoute .decouverte : la lueur se met à pulser et le reflet violet des fêlures s'allume. (Opacité animée sur des décorations INTERNES non cliquables : permis — l'élément cliquable, lui, reste toujours opaque.) */ .indice-secret .lueur{ opacity:0; transform-box:fill-box;transform-origin:center; } .indice-secret .reflet{opacity:0;transition:opacity .8s ease;} .indice-secret.decouverte .lueur{animation:suinte-lueur 5.5s ease-in-out infinite;} .indice-secret.decouverte .reflet{opacity:.85;} @keyframes suinte-lueur{ 0%,100%{opacity:.38;} 50%{opacity:.85;} } @media (prefers-reduced-motion:reduce){ .indice-secret.decouverte .lueur{animation:none;opacity:.55;} } /* ============================================================ SCÈNE 3 — HALL D'UN UNIVERS (les tableaux) ============================================================ */ /* Le hall prend l'AMBIANCE de son univers : --teinte (posée par construireHall) teinte les murs — mêmes briques velours en quinconce que la galerie (96×48, joints 3px), mais baignées de la couleur de l'univers. AoT = pierre acier, HxH = verdure sombre, etc. */ #hall{ --teinte:#ffd23f; /* échelle des tableaux : grande et adaptée à l'écran (comme --porteH dans la galerie) — pilote l'œuvre ET la plaque dorée dessous. Agrandie 2026-07-11 (owner) : à la verticale, on peut voir GRAND */ --tabW:clamp(320px, 40vw, 720px); background-color:color-mix(in srgb, var(--teinte) 16%, #1d0f22); background-image: radial-gradient(1000px 380px at 50% -120px, color-mix(in srgb, var(--teinte) 24%, transparent), transparent 70%), repeating-linear-gradient(180deg, rgba(10,5,14,.5) 0 3px, transparent 3px 48px), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(10,5,14,.4) 270deg 360deg), conic-gradient(from 0deg at 3px 45px, transparent 0 270deg, rgba(10,5,14,.4) 270deg 360deg), linear-gradient(color-mix(in srgb, var(--teinte) 7%, #140a18), color-mix(in srgb, var(--teinte) 15%, #22112c) 420px, color-mix(in srgb, var(--teinte) 19%, #2a1535)); background-size:auto, 96px 48px, 96px 96px, 96px 96px, auto; background-position:0 0, 0 0, 0 3px, 48px 51px, 0 0; } /* HALL AoT : les murs deviennent LA MURAILLE de l'animé (réf. images owner) — grands pans de pierre lisse beige-brun (#927059 assombri), joints verticaux marqués, piliers saillants réguliers (arête éclairée à gauche, ombre portée à droite), rares joints horizontaux. Si le visuel ne convainc pas : supprimer ce bloc = retour aux briques. */ #hall[data-univers="attaque-des-titans"]{ background-color:#63483a; /* les PILIERS (couche 3, pilier centré dans la tuile à x283-357) et les fines coutures (couche 4, à ±160 du pilier) sont dessinés dans une TUILE de 640px CENTRÉE (background-position-x:50%) → un pilier tombe PILE au centre de l'écran sur TOUTES les largeurs, derrière la peinture centrée (owner 2026-07-11). Tuile fixe = pas de dérive (cf. diagonales). */ background-image: radial-gradient(1100px 400px at 50% -140px, rgba(255,226,180,.10), transparent 70%), repeating-linear-gradient(180deg, rgba(26,15,8,.20) 0 4px, transparent 4px 440px), linear-gradient(90deg, transparent 0 283px, rgba(255,238,210,.10) 283px 289px, rgba(255,255,255,.055) 289px 347px, rgba(24,13,6,.42) 347px 357px, transparent 357px 640px), linear-gradient(90deg, transparent 0 158px, rgba(24,13,6,.22) 158px 162px, transparent 162px 478px, rgba(24,13,6,.22) 478px 482px, transparent 482px 640px), linear-gradient(180deg, #77594729, transparent 30%), linear-gradient(180deg, #6d5243, #5e4638 46%, #4a3629); background-size:auto, auto, 640px 100%, 640px 100%, auto, auto; background-position:0 0, 0 0, 50% 0, 50% 0, 0 0, 0 0; background-repeat:repeat; } /* HALL HxH : la salle de jeu de Greed Island — vert profond, treillis de losanges (les cartes !) discret, lueur d'aura Nen en haut */ /* ⚠ les diagonales fines en repeating-linear-gradient DÉRIVENT (arrondis accumulés par tuile → lignes « cassées », bug owner) : on dessine le treillis DANS une tuile carrée fixe, positions en % = exactes */ #hall[data-univers="hunter-x-hunter"]{ background-color:#14351d; background-image: radial-gradient(1100px 400px at 50% -140px, rgba(140,220,130,.13), transparent 70%), linear-gradient(45deg, rgba(0,0,0,.16) 0 .65%, transparent .65% 49.35%, rgba(0,0,0,.16) 49.35% 50.65%, transparent 50.65% 99.35%, rgba(0,0,0,.16) 99.35%), linear-gradient(-45deg, rgba(0,0,0,.16) 0 .65%, transparent .65% 49.35%, rgba(0,0,0,.16) 49.35% 50.65%, transparent 50.65% 99.35%, rgba(0,0,0,.16) 99.35%), linear-gradient(180deg, #1b422a, #153823 46%, #0f2b1a); background-size:auto, 108px 108px, 108px 108px, auto; } /* HALL JJK : le voile occulte (帳) — indigo presque noir, plis de rideau verticaux soyeux, lueur d'énergie maudite */ #hall[data-univers="jujutsu-kaisen"]{ background-color:#16112e; background-image: radial-gradient(1100px 420px at 50% -140px, rgba(130,95,230,.17), transparent 70%), repeating-linear-gradient(90deg, rgba(0,0,0,.30), transparent 74px, rgba(255,255,255,.045) 138px, rgba(0,0,0,.30) 262px), linear-gradient(180deg, #1a1436, #140f2b 46%, #0d0a1e); } /* HALL KING'S DAWN ZERO : la salle du trône — velours pourpre profond, treillis de fils d'or, aube dorée en haut */ /* passé du pourpre au BLEU ROYAL (owner 2026-07-11 : le pourpre cassait avec le bleu du cadre et de la porte KDZ) — l'or reste */ #hall[data-univers="kings-dawn-zero"]{ background-color:#14264d; background-image: radial-gradient(1100px 420px at 50% -140px, rgba(255,205,90,.17), transparent 70%), linear-gradient(45deg, rgba(224,177,58,.11) 0 .51%, transparent .51% 49.49%, rgba(224,177,58,.11) 49.49% 50.51%, transparent 50.51% 99.49%, rgba(224,177,58,.11) 99.49%), linear-gradient(-45deg, rgba(224,177,58,.11) 0 .51%, transparent .51% 49.49%, rgba(224,177,58,.11) 49.49% 50.51%, transparent 50.51% 99.49%, rgba(224,177,58,.11) 99.49%), linear-gradient(180deg, #1b3263, #142854 46%, #0d1a3c); background-size:auto, 138px 138px, 138px 138px, auto; } /* HALL MHA : le QG de héros — grands panneaux composites teal, joints nets high-tech, éclairage froid en haut. Plus Ultra ! */ #hall[data-univers="my-hero-academia"]{ background-color:#0f2f2a; background-image: radial-gradient(1100px 400px at 50% -140px, rgba(80,220,190,.14), transparent 70%), repeating-linear-gradient(180deg, rgba(0,0,0,.24) 0 3px, rgba(255,255,255,.035) 3px 6px, transparent 6px 172px), repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, transparent 3px 304px), linear-gradient(180deg, #123a33, #0e302a 46%, #0a241f); } /* HALL NARUTO : Konoha — plâtre chaud orangé, colombages de bois sombre (poutres horizontales + poteaux), lumière de fin d'après-midi */ #hall[data-univers="naruto"]{ background-color:#8a4f26; background-image: radial-gradient(1100px 400px at 50% -140px, rgba(255,190,90,.18), transparent 70%), repeating-linear-gradient(180deg, rgba(60,28,8,.5) 0 10px, rgba(255,230,170,.07) 10px 13px, transparent 13px 332px), repeating-linear-gradient(90deg, rgba(60,28,8,.42) 0 12px, transparent 12px 302px), linear-gradient(180deg, #9a5c2e, #855026 46%, #6b3f1d); } /* HALL ORIGIN : les ruines des origines — pierre grise mégalithique (gros blocs en quinconce, 2× la brique de la galerie), souffle teal d'oasis en haut */ #hall[data-univers="origin"]{ background-color:#3f444c; background-image: radial-gradient(1100px 420px at 50% -140px, rgba(140,200,200,.13), transparent 70%), repeating-linear-gradient(180deg, rgba(10,12,16,.5) 0 4px, transparent 4px 96px), conic-gradient(from 0deg at 4px 92px, transparent 0 270deg, rgba(10,12,16,.42) 270deg 360deg), conic-gradient(from 0deg at 4px 92px, transparent 0 270deg, rgba(10,12,16,.42) 270deg 360deg), linear-gradient(180deg, #4a505a, #40454e 46%, #32363d); background-size:auto, 192px 96px, 192px 192px, 192px 192px, auto; background-position:0 0, 0 0, 0 4px, 96px 100px, 0 0; } .entete-hall{text-align:center;padding:2.4rem 1rem .6rem;} .entete-hall h1{ font-size:clamp(1.8rem,4vw,2.8rem);color:var(--or); text-shadow:0 3px 0 var(--or-sombre), 0 6px 0 rgba(0,0,0,.4); } .entete-hall p{color:#e0c8dd;font-weight:600;margin-top:.5rem;} /* les tableaux se descendent À LA VERTICALE (choix owner 2026-07-11) : on marche le long du mur d'exposition, comme le couloir de la galerie */ .rangée,.rangee{ display:flex;flex-direction:column;align-items:center;gap:3.2rem; padding:2.8rem 2rem 9rem;max-width:1200px;margin:0 auto; } /* l'ornement doré entre deux tableaux (même famille que .separe-alcove de la galerie) — décoratif, jamais cliquable */ .separe-tableau{ display:flex;align-items:center;gap:.9rem; width:min(520px, 56vw); color:var(--or);font-size:1rem;opacity:.55; pointer-events:none;user-select:none; } .separe-tableau::before,.separe-tableau::after{content:"";flex:1;height:2px;border-radius:2px;} .separe-tableau::before{background:linear-gradient(90deg, transparent, var(--or-sombre));} .separe-tableau::after{background:linear-gradient(90deg, var(--or-sombre), transparent);} .tableau{ background:none;border:none;color:inherit; display:flex;flex-direction:column;align-items:center;gap:1rem; transition:transform .3s ease; } /* survol : petit soulèvement + halo doré sur le cadre — SANS grossir (demande owner : pas de zoom au survol, le zoom est réservé au clic) */ .tableau:hover{transform:translateY(-8px);} .tableau:hover .cadre-univers{ filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,210,63,.30)); } .cadre{ --w:230px; width:var(--w);height:calc(var(--w) * 1.28); padding:14px;position:relative; background: linear-gradient(135deg, #f6d465, var(--or-sombre) 30%, #f1c948 50%, #a87c14 75%, #ffe084); border-radius:6px; box-shadow: 0 14px 30px rgba(0,0,0,.55), inset 0 0 0 4px rgba(90,60,0,.55), inset 0 0 0 8px rgba(255,236,170,.5); } .cadre::after{ /* ornement supérieur du cadre */ content:"★";position:absolute;top:-16px;left:50%;transform:translateX(-50%); color:var(--or);font-size:1.3rem;text-shadow:0 2px 3px rgba(0,0,0,.6); } /* CADRE PROPRE À L'UNIVERS (image owner, fenêtre transparente au centre) : .oeuvre superpose la toile (derrière, calée en % dans la fenêtre mesurée) et le cadre png (devant, il laisse passer les clics). La toile seule ondule au survol — le cadre reste net, comme dans Mario 64. */ .oeuvre{ position:relative;display:block;width:var(--tabW, 320px); transform-origin:center;transition:transform .3s ease; } .oeuvre .toile{position:absolute;} .cadre-univers{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;display:block; filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)); } /* .cadre-zone : conteneur NON animé qui enveloppe le cadre + les torches. Il sert de repère de position aux torches (largeur = celle du cadre) sans jamais bouger : ni au survol, ni en parallaxe (celles-ci n'agissent que sur .oeuvre, à l'intérieur). fit-content = colle pile au cadre. */ .cadre-zone{position:relative;width:fit-content;} /* TORCHES DU HALL : une applique de chaque côté du tableau (réutilise le gif + le halo qui vacille de la galerie, mais à l'échelle --tabW et teintée dans la couleur de l'univers via --rot/--sat/--teinte posés sur #hall). Décoratives, non cliquables. SŒURS du cadre dans .cadre-zone (plus dans .oeuvre) → fixes au mur ; rejetées juste à l'extérieur du cadre (right/left:100%). */ .torche-hall{ --torH:calc(var(--tabW, 320px) * .34); position:absolute;top:48%;transform:translateY(-50%); width:calc(var(--torH) * .4);height:var(--torH); pointer-events:none;z-index:2; transition:transform .3s ease; /* pour annuler le soulèvement en douceur */ } .torche-hall.gauche{right:100%;margin-right:calc(var(--tabW, 320px) * .03);} .torche-hall.droite{left:100%;margin-left:calc(var(--tabW, 320px) * .03);} /* le tableau se soulève au survol (transform sur .tableau) → on ANNULE ce déplacement sur les torches (+8px compensent le -8px du parent) pour qu'elles restent parfaitement immobiles, comme des appliques scellées. */ .tableau:hover .torche-hall{transform:translateY(calc(-50% + 8px));} .torche-hall img{ display:block;width:var(--torH);height:var(--torH); margin-left:calc(var(--torH) * -.3); /* centre le gif large sur le support */ image-rendering:pixelated; filter:hue-rotate(var(--rot,0deg)) saturate(var(--sat,1)) drop-shadow(0 0 12px color-mix(in srgb, var(--teinte) 55%, transparent)); } .halo-hall{ position:absolute;left:50%;top:calc(var(--torH) * .3); width:calc(var(--torH) * 1.35);height:calc(var(--torH) * 1.35); transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--teinte) 30%, transparent), color-mix(in srgb, var(--teinte) 12%, transparent) 45%, transparent 70%); animation:halo-vacille 2.8s ease-in-out infinite; } /* EFFET PARALLAXE (TEST sur le hall AoT seulement — classe .parallaxe posée par initParallaxeHall) : la peinture pivote en 3D vers le curseur. La perspective est sur .cadre-zone (le PARENT DIRECT de .oeuvre — indispensable pour le relief 3D), la rotation appliquée à .oeuvre en JS ; transition courte pour un suivi souple. Aucune opacité animée. */ .parallaxe .cadre-zone{perspective:900px;} .parallaxe .oeuvre{transition:transform .16s ease-out;} .toile{ width:100%;height:100%;overflow:hidden;position:relative;border-radius:2px; background:linear-gradient(160deg,#2c2150,#171030); } .toile img{ width:100%;height:100%;object-fit:cover;object-position:top center;display:block; transition:transform .5s ease; } .tableau:hover .toile img{filter:url(#ondulation);} .toile .mystere{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:'Luckiest Guy',cursive;font-size:3.4rem;color:rgba(255,244,224,.35); } .tableau:hover .toile .mystere{filter:url(#ondulation);} .plaque{ font-family:'Cinzel',serif;text-align:center; background:linear-gradient(#f3d976, var(--or-sombre)); color:#3a2a05;border:2px solid #7a5a10;border-radius:5px; padding:.45rem .9rem;min-width:180px;max-width:230px; box-shadow:0 3px 0 #6d500e, 0 6px 12px rgba(0,0,0,.4); } .plaque .nom{font-weight:700;font-size:1rem;letter-spacing:.04em;} .plaque .titres{font-size:.72rem;font-weight:600;opacity:.85;margin-top:.15rem;font-style:italic;} .tableau .indice-saut{ font-size:.8rem;font-weight:800;color:var(--or);opacity:0;transition:opacity .25s; letter-spacing:.05em; } .tableau:hover .indice-saut{opacity:1;} /* LA PLAQUE DORÉE sous chaque tableau (image owner + inscription gravée « Prénom, le Titre » dans la zone d'or plat mesurée au pixel) */ .plaque-tableau{ position:relative;display:block; width:calc(var(--tabW, 320px) * .58); /* ratio de l'image (1008x425) déclaré ici : la hauteur est connue AVANT le chargement du png → la zone d'or a tout de suite sa taille (sans ça, l'ajusteur d'inscription tournait sur une hauteur nulle) */ aspect-ratio:1008/425; } .plaque-tableau img{ position:absolute;inset:0;display:block;width:100%;height:100%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); } .plaque-tableau-nom{ position:absolute; /* DEUX LIGNES (owner) : « Sulyvahn, » puis « Le Thaumaturge » */ display:flex;flex-direction:column;align-items:center;justify-content:center; line-height:1.18; font-family:'Cinzel',serif;font-weight:700; font-size:clamp(9px, calc(var(--tabW, 320px) * .035), 22px); letter-spacing:.02em; color:#5a3a12;text-shadow:0 1px 0 rgba(255,236,180,.55); pointer-events:none; } .plaque-tableau-nom .ligne-nom, .plaque-tableau-nom .ligne-titre{white-space:nowrap;} .plaque-tableau-nom .ligne-titre{font-size:.88em;} /* la plaque ARGENT du hall secret : gravure ardoise + reflet froid (le brun doré jurerait sur l'argent, comme pour sa plaque murale) */ #hall[data-univers="galerie-secrete"] .plaque-tableau-nom{ color:#232032; text-shadow:0 1px 0 rgba(238,238,248,.55); } /* LE PLONGEON (clic) : la caméra zoome sur l'œuvre pendant que la toile ondule fort — puis le voile blanc fait le reste (sauterDansTableau) */ .tableau.plonge{position:relative;z-index:60;} /* LE ZOOM EST PORTÉ PAR LA CAMÉRA (owner) : c'est TOUTE LA SALLE (#hall) qui grossit vers la peinture, centrée à l'écran — comme si le navigateur zoomait — la peinture ne grossit plus elle-même. La caméra s'arrête posée sur la toile et ATTEND la fin du son (sauterDansTableau). */ #hall.camera-plonge{ transition:transform 1.7s cubic-bezier(.4,.08,.5,.96); will-change:transform; } .tableau.plonge .toile img, .tableau.plonge .toile .mystere{filter:url(#ondulation);} /* RONDS DANS L'EAU : anneaux en relief qui naissent sous le curseur (survol) ou du point de clic (le « caillou »). Décoratif, non cliquable — l'animation d'opacité y est permise. */ /* LA VAGUE LIQUIDE au clic : le double de la peinture (cloné en JS, poserOndeLiquide) — déformé par SA turbulence, visible seulement dans l'anneau-masque animé. L'id #hall rend le sélecteur plus fort que « .tableau.plonge .toile img » (sinon le filtre du splash l'écraserait et la vague deviendrait invisible). Sous le rond blanc (z-index 1 < span ajouté après), au-dessus de la toile de base. */ #hall .toile img.onde-liquide{ position:absolute;inset:0;z-index:1; pointer-events:none; filter:url(#ondulation-onde); } .rond-eau{ position:absolute;width:14px;height:14px; margin:-7px 0 0 -7px;border-radius:50%; pointer-events:none;z-index:2; /* au-dessus de la vague liquide (z:1) */ border:2px solid rgba(255,255,255,.55); box-shadow: 0 0 6px rgba(255,255,255,.35), inset 0 0 6px rgba(255,255,255,.3), inset 0 2px 3px rgba(0,0,0,.25); animation:rond-eau 1.4s ease-out forwards; } .rond-eau.fort{ width:20px;height:20px;margin:-10px 0 0 -10px; border-width:3px; animation:rond-eau-fort 1.5s ease-out forwards; } @keyframes rond-eau{ 0%{transform:scale(.4);opacity:.9;} 100%{transform:scale(6);opacity:0;} } @keyframes rond-eau-fort{ 0%{transform:scale(.3);opacity:1;} 100%{transform:scale(13);opacity:0;} } /* ============================================================ SCÈNE 4 — FICHE PERSONNAGE (provisoire : deviendra une vraie page séparée ouverte dans un nouvel onglet) ============================================================ */ #fiche{background:linear-gradient(var(--nuit-2), var(--nuit) 60%);} .fiche-conteneur{max-width:900px;margin:0 auto;padding:2rem 1.4rem 6rem;} /* ============ MOTEUR DE FICHE WIKI (généralisé 2026-07-13) ============ Le gabarit est piloté par DEUX attributs sur #fiche : - [data-gabarit="wiki"] = LA STRUCTURE + la palette PAR DÉFAUT du moteur, partagée par toutes les fiches wiki (sélecteurs ci-dessous). Une nouvelle fiche réutilise tout ça sans rien redéclarer. - [data-perso=""] = la SURCOUCHE esthétique propre au perso : fond de scène, et couleurs re-thémées si le perso veut s'écarter des défauts (override ciblé, ex. #fiche[data-perso="lexinum"] .boite-fiche{border-color…}). La palette par défaut vient de la fiche de TOAD (owner 2026-07-12) : bordure externe #C52525 4px → « espacement de bordure » 5px #FFCD3E → bordure interne #2726DA 2px → intérieur BLANC. Angles 15px dehors, 6px dedans (coins concentriques 15−4−5). ------------------------------------------------ SURCOUCHE TOAD : le FOND à motif (fond-monobook, les « ? » gris clair). */ #fiche[data-perso="toad"]{ background:#f9f9f9 url("../images/Toad Kinopio/fond-monobook.png") repeat top center; } #fiche[data-gabarit="wiki"] .boite-fiche{ background:#FFCD3E; /* remplit l'espacement entre les bordures */ border:4px solid #C52525; /* bordure externe */ border-radius:15px; padding:5px; /* l'espacement de bordure Wix */ } #fiche[data-gabarit="wiki"] .boite-int{ background:#fff; border:2px solid #2726DA; /* bordure interne */ border-radius:6px; padding:1.6rem 1.5rem 3rem; /* lisibilité du provisoire sur fond blanc (le texte crème du thème nuit deviendrait invisible) + la vraie police de texte de la fiche */ color:#22222a; font-family:'Baloo 2','Nunito',sans-serif; } #fiche[data-gabarit="wiki"] .fiche-entete h1{ font-family:'Daydream','Luckiest Guy',cursive; color:#e63946; text-shadow:0 3px 0 rgba(0,0,0,.12); } /* --- L'EN-TÊTE : 5 éléments répartis par space-between → le duo (gauche) et le gif (droite) touchent les BORDS de la barre, le logo est au CENTRE et les écarts sont ÉGAUX. La condition du centrage parfait : duo et gif de MÊME LARGEUR. Le gif est carré (200×200), on lui donne donc la hauteur qui égale sa largeur à celle du duo : duo_w = --duoH × 1.835 (ratio mesuré des 2 images superposées), gif carré → height = --duoH × 1.835. --- */ #fiche[data-gabarit="wiki"] .t-entete{ --duoH:92px; display:flex;align-items:center;justify-content:space-between;gap:.6rem; } #fiche[data-gabarit="wiki"] .t-duo{display:flex;align-items:center;flex:none;} #fiche[data-gabarit="wiki"] .t-duo img{height:var(--duoH);width:auto;} #fiche[data-gabarit="wiki"] .t-duo img:first-child{position:relative;z-index:1;} #fiche[data-gabarit="wiki"] .t-duo img:last-child{margin-left:calc(var(--duoH)*-0.317);} /* superposés, proportionnel */ /* les pièces : de vraies CoinSMW cliquables (ramassées une fois pour toutes) ; déjà prises = fantôme grisé, l'en-tête garde sa symétrie */ #fiche[data-gabarit="wiki"] .t-piece{ background:none;border:none;padding:0;cursor:pointer;line-height:0;flex:none; } #fiche[data-gabarit="wiki"] .t-piece img{ height:52px;width:auto;image-rendering:pixelated; transition:transform .6s ease, opacity .6s ease; /* l'envol du ramassage */ } #fiche[data-gabarit="wiki"] .t-piece:hover img{filter:brightness(1.25);} #fiche[data-gabarit="wiki"] .t-piece.vole img{transform:translateY(-46px);opacity:0;} #fiche[data-gabarit="wiki"] .t-piece.prise{cursor:default;} #fiche[data-gabarit="wiki"] .t-piece.prise img{transform:none;opacity:.25;filter:grayscale(1);} #fiche[data-gabarit="wiki"] .t-logo{height:132px;width:auto;object-fit:contain;flex:none;} /* taille par la HAUTEUR seule : un max-width faussait le centrage */ #fiche[data-gabarit="wiki"] .t-retour{height:calc(var(--duoH)*1.835);width:auto;flex:none;} /* carré → même largeur que le duo */ /* --- la BARRE de séparation : rouge 10px, bord bleu 3px + jaune 2px --- */ #fiche[data-gabarit="wiki"] .t-barre{ height:10px;background:#C52525;border-radius:999px; border:2px solid #FFCD3E; /* bordure interne jaune */ box-shadow:0 0 0 3px #2726DA; /* bordure externe bleue */ margin:1.7rem 3px 1.9rem; /* 3px de marge : l'anneau bleu n'est pas rogné */ } /* --- le TITRE : Daydream 60px, lettres colorées, ombre portée en bas --- */ #fiche[data-gabarit="wiki"] .t-titre{ text-align:center;margin:0 0 1.8rem; font-family:'Daydream','Luckiest Guy',cursive;font-weight:400; font-size:clamp(34px, 6.5vw, 60px);letter-spacing:.05em; color:#e63946;text-shadow:none; } #fiche[data-gabarit="wiki"] .t-mot{display:inline-block;white-space:nowrap;} /* mots insécables (leçon galerie) */ #fiche[data-gabarit="wiki"] .t-lettre{display:inline-block;text-shadow:0 .09em .12em rgba(0,0,0,.35);} /* --- les 2 COLONNES : tableau wiki à gauche, texte + sommaire à droite --- */ #fiche[data-gabarit="wiki"] .t-corps{ display:grid;grid-template-columns:minmax(300px, 370px) 1fr; gap:1.8rem;align-items:start; } /* LE TABLEAU WIKI = 2 GROSSES boîtes empilées (structure Wix exacte, owner 2026-07-12) : la boîte du CARROUSEL et la boîte du CONTENU. Chaque boîte = bordure externe rouge 4px → liseré blanc 5px → bordure interne bleue 2px → intérieur, angles 15px. Dans la boîte contenu, les TITRES (PROFIL/STATUT/ NEN) sont de PETITES boîtes identiques mais à INTÉRIEUR ROUGE. */ /* les 2 grosses boîtes SE TOUCHENT (owner 2026-07-12 : gap 0, petit creux assumé là où les deux angles arrondis se rejoignent) */ #fiche[data-gabarit="wiki"] .t-tableau{display:flex;flex-direction:column;gap:0;} /* la boîte générique : rouge 4 (externe) → blanc 5 (liseré) → bleu 2 (interne) */ #fiche[data-gabarit="wiki"] .t-cadre{ border:4px solid #C52525;border-radius:15px;padding:5px;background:#fff; } #fiche[data-gabarit="wiki"] .t-cadre-int{ border:2px solid #2726DA;border-radius:9px;background:#fff; } /* ombre portée seulement sur les 2 GROSSES boîtes (enfants directs) */ #fiche[data-gabarit="wiki"] .t-tableau > .t-cadre{box-shadow:0 4px 14px rgba(0,0,0,.22);} /* la boîte CONTENU empile identité, titres et rangées. --pad sert à calculer de combien ÉTIRER les bandes-titres (voir .t-bande). PAS d'overflow:hidden ici → les bandes peuvent déborder jusqu'aux bordures de la grosse boîte. */ #fiche[data-gabarit="wiki"] .t-contenu > .t-cadre-int{ --pad:12px;padding:var(--pad);display:flex;flex-direction:column;gap:12px; } #fiche[data-gabarit="wiki"] .t-rangs{display:flex;flex-direction:column;} /* les PETITES boîtes-titres sont ÉTIRÉES à l'horizontale (owner 2026-07-12) : marge négative = tout ce qui les sépare du bord de la grosse boîte (--pad du contenu + bleu 2 + blanc 5 + rouge 4 = --pad + 11) → leurs bordures rouge/blanc/bleu se SUPERPOSENT PILE à celles de la grosse boîte. Le liseré blanc de 5px est hérité de .t-cadre (mêmes couches = superposition exacte des bleus). INTÉRIEUR ROUGE, texte blanc + contour noir 1px. */ #fiche[data-gabarit="wiki"] .t-bande{ margin-left:calc(-1 * (var(--pad) + 11px)); margin-right:calc(-1 * (var(--pad) + 11px)); /* liseré TRANSPARENT (au lieu du blanc de .t-cadre) → la ligne bleue continue de la grosse boîte transparaît aux angles des bandes, au lieu d'être masquée par le blanc (owner 2026-07-12) */ background:transparent; } #fiche[data-gabarit="wiki"] .t-bande > .t-cadre-int{ background:#C52525;color:#fff;text-align:center; font-weight:800;font-size:22px;letter-spacing:.02em;padding:6px 10px; -webkit-text-stroke:1px #000;paint-order:stroke fill; /* contour noir = lisibilité */ } /* la boîte CARROUSEL : intérieur relatif (flèches en absolu) + overflow caché (clippe les images aux angles arrondis) — SEULE boîte à garder l'overflow */ #fiche[data-gabarit="wiki"] .t-carrousel > .t-cadre-int{position:relative;overflow:hidden;} /* les rangées du tableau : étiquette en gras à gauche, valeurs à droite */ #fiche[data-gabarit="wiki"] .t-rang{ display:flex;justify-content:space-between;gap:1rem; font-size:20px;line-height:1.45; } #fiche[data-gabarit="wiki"] .t-rang b{color:#111;font-weight:800;} #fiche[data-gabarit="wiki"] .t-val{ display:flex;flex-direction:column;text-align:right; color:#111;font-weight:700; /* noir (owner 2026-07-12, était bleu) */ } /* --- le CARROUSEL (4 tenues) : flèches + légende jaune au survol --- */ #fiche[data-gabarit="wiki"] .carr-vue{position:relative;height:430px;overflow:hidden;} /* les diapos GLISSENT (transform) au lieu de changer d'un coup — le JS (initCarrouselToad) pose les positions inline et anime ; ici le défaut (parquée à droite) + la transition qui rend le glissement */ #fiche[data-gabarit="wiki"] .carr-diapo{ position:absolute;inset:0;margin:0;padding:12px; transform:translateX(100%); transition:transform .5s ease; /* décoratif : le défilement */ } #fiche[data-gabarit="wiki"] .carr-diapo.active{transform:translateX(0);} #fiche[data-gabarit="wiki"] .carr-diapo img{width:100%;height:100%;object-fit:contain;display:block;} #fiche[data-gabarit="wiki"] .carr-legende{ position:absolute;left:0;right:0;bottom:0; display:flex;justify-content:space-between;align-items:center; padding:.55rem .95rem;background:rgba(255,205,62,.85); color:#222;font-size:18px;opacity:0;transition:opacity .25s ease; } #fiche[data-gabarit="wiki"] .carr-legende b{font-weight:800;} #fiche[data-gabarit="wiki"] .carr-legende span{font-size:14px;opacity:.7;} #fiche[data-gabarit="wiki"] .carr-vue:hover .carr-legende{opacity:1;} /* flèches par VISIBILITY (jamais un cliquable invisible à opacité 0) */ #fiche[data-gabarit="wiki"] .carr-fleche{ position:absolute;top:50%;transform:translateY(-50%); width:38px;height:38px;border-radius:50%;border:none;cursor:pointer; background:rgba(110,110,110,.45);color:#fff;font-size:26px; display:flex;align-items:center;justify-content:center;padding:0 0 4px; visibility:hidden; } #fiche[data-gabarit="wiki"] .carr-vue:hover .carr-fleche{visibility:visible;} #fiche[data-gabarit="wiki"] .carr-fleche:hover{background:rgba(80,80,80,.7);} #fiche[data-gabarit="wiki"] .carr-fleche.g{left:10px;} #fiche[data-gabarit="wiki"] .carr-fleche.d{right:10px;} /* --- le texte de présentation : Baloo 2 20px, justifié --- */ #fiche[data-gabarit="wiki"] .t-intro p{ font-size:20px;font-weight:600;line-height:1.5; text-align:justify;color:#101014;margin:0 0 1.3em; } /* --- la bannière SOMMAIRE : 3 tranches de l'image owner ; le milieu se répète (période du capiton = 192px source, découpe sur 5 périodes) --- */ #fiche[data-gabarit="wiki"] .t-sommaire{margin-top:2.2rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));} #fiche[data-gabarit="wiki"] .som-haut{position:relative;} #fiche[data-gabarit="wiki"] .som-haut img{width:100%;display:block;} #fiche[data-gabarit="wiki"] .som-titre{ position:absolute;top:31%;left:50%;transform:translate(-50%,-50%); font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:clamp(20px, 2.4vw, 30px);letter-spacing:.06em;text-transform:uppercase; color:#FFCD3E;text-shadow:0 3px 0 rgba(90,10,0,.55); } #fiche[data-gabarit="wiki"] .som-milieu{ background:url("../images/Toad Kinopio/sommaire-milieu.png") top center / 100% auto repeat-y; display:flex;flex-direction:column;align-items:center;gap:1.9rem; padding:1.2rem 2rem 1.6rem;margin-top:-1px; /* -1px : pas de fil blanc d'arrondi */ } #fiche[data-gabarit="wiki"] .som-entree{ font-family:'SuperMario286','Luckiest Guy',cursive; font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;text-align:center; color:#fff;text-shadow:0 2px 0 rgba(70,0,0,.6); } /* le sommaire est CLIQUABLE (owner 2026-07-13) : jaune au survol, rouge au clic */ #fiche[data-gabarit="wiki"] .som-entree{cursor:pointer;transition:color .15s ease;} #fiche[data-gabarit="wiki"] .som-entree:hover, #fiche[data-gabarit="wiki"] .som-entree:focus-visible{color:#FFCD3E;outline:none;} #fiche[data-gabarit="wiki"] .som-entree:active{color:#C52525;} #fiche[data-gabarit="wiki"] .som-bas{width:100%;display:block;margin-top:-1px;} /* ============ LES GRANDES SECTIONS (Apparence, Histoire…) ============ Titre Super Mario Bros 2 30px + ombre portée, souligné d'une ligne rouge 5px, puis le texte (Baloo 2 20px justifié) où des IMAGES flottantes dans leur boîte rouge/bleue « coupent » le texte qui s'enroule autour. */ #fiche[data-gabarit="wiki"] .t-sections{margin-top:2rem;} #fiche[data-gabarit="wiki"] .t-section{ margin-top:2.4rem;clear:both; scroll-margin-top:76px; /* le sommaire y descend : marge sous la barre */ } #fiche[data-gabarit="wiki"] .t-section-titre{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:30px;text-transform:uppercase;letter-spacing:.02em;color:#1a1a1a; text-shadow:2px 3px 0 rgba(0,0,0,.22); /* ombre portée */ position:relative; margin:0 0 1rem;padding-bottom:calc(.55rem + 5px); } /* la ligne rouge de séparation : un ::after pilule (et plus un border-bottom) → les BOUTS de toutes les barres sont ARRONDIS (owner 2026-07-12) */ #fiche[data-gabarit="wiki"] .t-section-titre::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:5px; background:#C52525;border-radius:99px; } /* on ALTERNE le côté des gros titres (owner) : 1re section (Apparence) à gauche, 2e (Personnalité) à droite, 3e à gauche… La ligne rouge, elle, reste pleine largeur. */ #fiche[data-gabarit="wiki"] .t-section:nth-of-type(even) .t-section-titre{text-align:right;} /* petit drapeau (checkpoint Toadette) planté par le PIED tout au bout GAUCHE de la barre rouge (owner 2026-07-12 — plus « à gauche du mot ») : absolu, base posée sur le dessus de la pilule de 5px. ⚠ ne convient qu'aux titres alignés à droite (sinon il chevaucherait le texte). */ #fiche[data-gabarit="wiki"] .t-drapeau{ position:absolute;left:2px;bottom:5px;height:58px;width:auto; } /* variante côté DROIT (Toadette des Notes) — pour les titres alignés à gauche */ #fiche[data-gabarit="wiki"] .t-drapeau.droite{left:auto;right:2px;} /* L'ÉPILOGUE des Notes : le merci du générique SM64 (SuperMario286), l'image-souvenir voilée façon rêve/flashback, et sa légende en italique */ /* la section NOTES en LISTE À PUCES (owner 2026-07-13) — puce rouge, même typo que le corps */ #fiche[data-gabarit="wiki"] .t-notes-liste{ margin:0 0 1.2em;padding-left:1.7em;list-style:disc; } #fiche[data-gabarit="wiki"] .t-notes-liste li{ font-size:20px;font-weight:600;line-height:1.5;text-align:justify; color:#101014;margin:0 0 .9em;padding-left:.25em; } #fiche[data-gabarit="wiki"] .t-notes-liste li::marker{color:#C52525;} /* ⚠ « .t-section-corps p » (justify, 20px) est défini PLUS BAS → il faut le sur-spécifier pour centrer le merci et la légende */ #fiche[data-gabarit="wiki"] .t-section-corps p.t-merci{ font-family:'SuperMario286','Luckiest Guy',cursive; font-size:26px;letter-spacing:.06em;color:#1a1a1a;text-align:center; text-shadow:2px 3px 0 rgba(0,0,0,.18); margin:2.6rem auto 1.6rem;clear:both; } #fiche[data-gabarit="wiki"] .t-souvenir{margin:0 auto 1rem;width:min(70%,560px);} /* ⚠ :not(.etoile-fiche) : l'étoile posée sur le souvenir est AUSSI un img dans .t-souvenir — sans l'exclusion elle héritait du width:100% (étoile géante), du sépia et de la respiration (owner bug-report 2026-07-13) */ #fiche[data-gabarit="wiki"] .t-souvenir img:not(.etoile-fiche){ display:block;width:100%;height:auto;border-radius:18px; /* voile sépia + halo doré doux, bords fondus (le rêve) */ filter:sepia(.32) saturate(.9) contrast(.94) brightness(1.04) drop-shadow(0 0 26px rgba(255,205,62,.45)); -webkit-mask-image:radial-gradient(ellipse 92% 90% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 92% 90% at 50% 50%, #000 62%, transparent 100%); animation:souvenir-respire 6s ease-in-out infinite; } @keyframes souvenir-respire{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.014);} } @media (prefers-reduced-motion: reduce){ #fiche[data-gabarit="wiki"] .t-souvenir img:not(.etoile-fiche){animation:none;} } #fiche[data-gabarit="wiki"] .t-section-corps p.t-legende{ font-style:italic;text-align:center;color:#5a4a52; font-size:19px;font-weight:600;margin:0 0 1rem; } /* flow-root : la section CONTIENT ses images flottantes (elles ne débordent pas sur la section suivante) tout en laissant le texte s'enrouler autour */ #fiche[data-gabarit="wiki"] .t-section-corps{display:flow-root;} #fiche[data-gabarit="wiki"] .t-section-corps p{ font-size:20px;font-weight:600;line-height:1.5; text-align:justify;color:#101014;margin:0 0 1.2em; } /* la boîte image : rouge 4 → blanc 5 → bleu 2, arrondi 15 (comme les tableaux). Agrandie (owner 2026-07-12 : les images étaient trop petites) — le texte est un peu plus serré autour, c'est assumé. */ #fiche[data-gabarit="wiki"] .t-illu{ border:4px solid #C52525;border-radius:15px;padding:5px;background:#fff; width:clamp(200px, 40%, 320px);margin:.2rem 0 1rem; } #fiche[data-gabarit="wiki"] .t-illu.gauche{float:left;margin-right:1.3rem;} #fiche[data-gabarit="wiki"] .t-illu.droite{float:right;margin-left:1.3rem;} #fiche[data-gabarit="wiki"] .t-illu-int{ display:block;border:2px solid #2726DA;border-radius:9px;overflow:hidden;background:#fff; } #fiche[data-gabarit="wiki"] .t-illu img{display:block;width:100%;height:auto;} /* CITATION (paragraphe ❝…❞) : centrée, un peu mise en valeur */ #fiche[data-gabarit="wiki"] .t-section-corps p.t-cite{ text-align:center;font-weight:700;color:#2a2340; margin:1.6em auto;max-width:88%; } /* POÈME : centré, italique, interligne serré (owner) */ #fiche[data-gabarit="wiki"] .t-section-corps p.t-poeme{ text-align:center;font-style:italic;line-height:1.32; margin:1.4em auto;color:#141018; } /* LISTE numérotée (questions de l'examen Hunter) 1, 2, 3… */ #fiche[data-gabarit="wiki"] .t-section-corps ol.t-liste{ margin:0 0 1.2em;padding-left:1.8em; } #fiche[data-gabarit="wiki"] .t-section-corps ol.t-liste li{ font-size:20px;font-weight:600;line-height:1.5;color:#101014; margin:.25em 0;padding-left:.2em; } /* SOUS-TITRES internes (Aptitudes & compétences) : police pixel comme les gros titres mais 20px et SANS barre (owner 2026-07-12). Chaque « compétence » = un groupe flow-root qui contient son image flottante (elle ne déborde pas sur la compétence suivante) ; l'image émise avant le titre → hauts alignés. */ #fiche[data-gabarit="wiki"] .t-comp{display:flow-root;margin-top:1.5rem;} #fiche[data-gabarit="wiki"] .t-soustitre{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:20px;letter-spacing:.02em;color:#1a1a1a; text-shadow:1px 2px 0 rgba(0,0,0,.16); margin:0 0 .55rem; } /* TRAITS NOTABLES : chaque trait = un petit tableau de DEUX boîtes COLLÉES (comme l'équipement) — le bandeau-titre (intérieur rouge, SuperMario286 + ombre) a les coins arrondis EN HAUT et plats EN BAS, collé (−4px) à la boîte description (plats en haut, arrondis en bas) → un seul meuble. L'image NUE est centrée VERTICALEMENT sur le côté (flex align-items:center). Séparés par une barre rouge (bien plus longue que la 1re version — owner 2026-07-13). */ #fiche[data-gabarit="wiki"] .t-sep-trait{ clear:both;height:5px;width:min(600px,72%); margin:2.3rem auto;background:#C52525;border-radius:99px; } #fiche[data-gabarit="wiki"] .t-trait{display:flex;align-items:center;gap:1.4rem;} #fiche[data-gabarit="wiki"] .t-trait.droite{flex-direction:row-reverse;} #fiche[data-gabarit="wiki"] .t-trait-img{flex:0 0 auto;width:clamp(150px,24%,230px);margin:0;} #fiche[data-gabarit="wiki"] .t-trait-img img{display:block;width:100%;height:auto;} #fiche[data-gabarit="wiki"] .t-trait-tableau{ flex:1;min-width:0; box-shadow:0 4px 14px rgba(0,0,0,.22);border-radius:15px; /* comme le profil */ } /* boîte-titre : intérieur ROUGE mais liseré BLEU conservé autour du remplissage (owner 2026-07-13), coins arrondis EN HAUT seulement */ #fiche[data-gabarit="wiki"] .t-trait-titre .t-eqbox-int{ background:#C52525;text-align:center;padding:.5em .7em; } #fiche[data-gabarit="wiki"] .t-trait-titre span{ font-family:'SuperMario286','Luckiest Guy',cursive; font-size:19px;letter-spacing:.03em;color:#fff; text-shadow:2px 3px 0 rgba(0,0,0,.32); /* ombre portée */ } /* .t-eqbox (défini plus bas) pose border-radius:0 / margin:0 à MÊME spécificité : on ajoute .t-eqbox au sélecteur pour reprendre la main (ordre-indépendant) */ #fiche[data-gabarit="wiki"] .t-trait-titre.t-eqbox{border-top-left-radius:15px;border-top-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-trait-titre .t-eqbox-int{border-top-left-radius:9px;border-top-right-radius:9px;} /* boîte-description : collée sous le titre (−4px), coins arrondis EN BAS */ #fiche[data-gabarit="wiki"] .t-trait-desc.t-eqbox{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-trait-desc .t-eqbox-int{padding:.55em .95em;} #fiche[data-gabarit="wiki"] .t-trait-desc p{ font-size:19px;font-weight:600;line-height:1.5; text-align:justify;color:#101014;margin:0; } #fiche[data-gabarit="wiki"] .t-trait-desc.t-eqbox{border-bottom-left-radius:15px;border-bottom-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-trait-desc .t-eqbox-int{border-bottom-left-radius:9px;border-bottom-right-radius:9px;} /* NEN : mêmes tableaux de boîtes collées que l'équipement, mais le liseré de 5px est JAUNE (au lieu de blanc) et les remplissages changent : titre = jaune (texte SuperMario286 orangé), type + description = rouge (texte blanc). La boîte type = logo à gauche, « TYPE » + barre jaune + types à droite. */ /* le groupe de tableaux collés porte la marge ET l'ombre (une ombre par tableau baverait sur la jonction) */ #fiche[data-gabarit="wiki"] .t-nen-groupe{ margin-top:2rem;clear:both; box-shadow:0 4px 14px rgba(0,0,0,.22);border-radius:15px; /* comme le profil */ } #fiche[data-gabarit="wiki"] .t-nen{margin-top:0;clear:both;} #fiche[data-gabarit="wiki"] .t-nen .t-eqbox{background:#FFCD3E;} #fiche[data-gabarit="wiki"] .t-nen-titre .t-eqbox-int{ background:#FFCD3E;text-align:center;padding:.5em .7em; } #fiche[data-gabarit="wiki"] .t-nen-titre span{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:22px;letter-spacing:.05em;color:#fff; text-shadow:2px 3px 0 rgba(0,0,0,.32); } #fiche[data-gabarit="wiki"] .t-nen-type.t-eqbox{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-nen-type .t-eqbox-int{ background:#C52525;display:flex;align-items:center;gap:1.2rem; padding:14px 18px; } #fiche[data-gabarit="wiki"] .t-nen-logo{ display:block;max-width:46%;max-height:210px;width:auto;height:auto; flex:0 0 auto; } #fiche[data-gabarit="wiki"] .t-nen-typebloc{flex:1;min-width:0;text-align:right;} /* le bloc interne rétrécit sur son contenu (inline-block) → la barre à 100% fait EXACTEMENT la largeur du mot le plus long (« Matérialisation ») */ #fiche[data-gabarit="wiki"] .t-nen-typeint{display:inline-block;text-align:right;} #fiche[data-gabarit="wiki"] .t-nen-typelabel{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:26px;letter-spacing:.05em;color:#fff;text-transform:uppercase; text-shadow:2px 3px 0 rgba(0,0,0,.3); } #fiche[data-gabarit="wiki"] .t-nen-typebar{ height:4px;width:100%;background:#FFCD3E;border-radius:99px;margin:.35em 0 .5em; } #fiche[data-gabarit="wiki"] .t-nen-types span{ display:block; font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:21px;letter-spacing:.04em;color:#fff;text-transform:uppercase; text-shadow:2px 3px 0 rgba(0,0,0,.3); line-height:1.5; } /* l'étoile de la Grande Évasion : plus petite (owner), toujours à gauche et centrée verticalement */ #fiche[data-gabarit="wiki"] .t-nen-la-grande-evasion .t-nen-logo{ max-width:30%;max-height:150px; } #fiche[data-gabarit="wiki"] .t-nen-desc.t-eqbox{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-nen-desc .t-eqbox-int{ background:#C52525;padding:.9em 1.05em; } #fiche[data-gabarit="wiki"] .t-nen-desc p{ font-size:19px;font-weight:600;line-height:1.5; text-align:justify;color:#fff;margin:0 0 1.1em; } #fiche[data-gabarit="wiki"] .t-nen-desc p:last-of-type{margin-bottom:0;} /* coins extérieurs du tableau nen (haut du titre, bas de la description) */ #fiche[data-gabarit="wiki"] .t-nen-titre.t-eqbox{border-top-left-radius:15px;border-top-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-nen-titre .t-eqbox-int{border-top-left-radius:9px;border-top-right-radius:9px;} #fiche[data-gabarit="wiki"] .t-nen-desc.t-eqbox{border-bottom-left-radius:15px;border-bottom-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-nen-desc .t-eqbox-int{border-bottom-left-radius:9px;border-bottom-right-radius:9px;} /* L'INVENTAIRE des Opera : tranches du png recomposées (méthode du sommaire). Fermé = seulement l'en-tête (jusqu'à la boucle) ; clic = le rouleau se déroule (max-height mesurée en JS — jamais d'opacité sur un cliquable). */ /* l'inventaire RÉDUIT (~moitié de la largeur, owner 2026-07-13) à GAUCHE, la CARTE de description des Opera occupe l'autre moitié à droite */ #fiche[data-gabarit="wiki"] .inv-zone{ display:flex;gap:1.4rem;align-items:flex-start; margin-top:1.6rem; /* écarté du texte au-dessus (owner 2026-07-13) */ } #fiche[data-gabarit="wiki"] .inv-opera{ /* légèrement plus que la moitié (owner 2026-07-13 : le texte des cartes dépassait du bas de l'inventaire) */ flex:0 0 min(54%,380px);width:min(54%,380px);cursor:pointer; container-type:inline-size; } #fiche[data-gabarit="wiki"] .inv-rang1{position:relative;} /* les icônes des Opera, posées au centre mesuré de chaque case */ #fiche[data-gabarit="wiki"] .inv-icone{ position:absolute;top:45%;transform:translate(-50%,-50%); width:9.6%;aspect-ratio:1;padding:0;margin:0; background:transparent;border:2px solid transparent;border-radius:18%; cursor:pointer;display:flex;align-items:center;justify-content:center; } #fiche[data-gabarit="wiki"] .inv-icone img{ display:block;max-width:92%;max-height:92%;width:auto;height:auto; transition:transform .15s ease; } /* la « sélection » : cadre doré + lueur (plus net que l'image de survol Wix) */ #fiche[data-gabarit="wiki"] .inv-icone:hover, #fiche[data-gabarit="wiki"] .inv-icone:focus-visible, #fiche[data-gabarit="wiki"] .inv-icone.actif{ border-color:#FFCD3E; background:rgba(255,205,62,.18); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 10px rgba(255,205,62,.65); outline:none; } #fiche[data-gabarit="wiki"] .inv-icone:hover img{transform:scale(1.1);} /* la carte de droite (visible seulement l'inventaire ouvert) */ #fiche[data-gabarit="wiki"] .inv-carte{flex:1;min-width:0;display:none;} #fiche[data-gabarit="wiki"] .inv-opera.ouvert + .inv-carte{display:block;} /* le paragraphe « mémorial » de l'intro de l'inventaire : en italique */ #fiche[data-gabarit="wiki"] .t-nen-em{font-style:italic;} /* ⚠ la carte vit DANS .t-nen-desc → « .t-nen-desc p » (19px) gagnerait sur une simple classe : on écrit p.carte-* (spécificité égale + plus bas dans le fichier = nos valeurs gagnent) */ #fiche[data-gabarit="wiki"] p.carte-indice{ font-style:italic;color:rgba(255,255,255,.78); font-size:17px;font-weight:600;margin:0; } #fiche[data-gabarit="wiki"] .carte-nom{ font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:19px;letter-spacing:.05em;color:#fff;text-align:center; text-shadow:2px 3px 0 rgba(0,0,0,.32);margin:0 0 .7rem; } #fiche[data-gabarit="wiki"] .carte-img{ display:block;margin:0 auto .6rem;max-width:48%;max-height:140px; width:auto;height:auto; } #fiche[data-gabarit="wiki"] p.carte-ligne{ font-size:17px;font-weight:600;color:#fff;margin:0 0 .3em; } #fiche[data-gabarit="wiki"] .carte-ligne strong{font-weight:800;} #fiche[data-gabarit="wiki"] p.carte-desc{ font-size:17px;font-weight:600;line-height:1.45;text-align:justify; color:#fff;margin:.7em 0 0; } /* la dernière petite phrase de chaque Opus (son origine) : italique */ #fiche[data-gabarit="wiki"] p.carte-desc.carte-em{font-style:italic;} /* les DEUX tableaux nen sont COLLÉS entre eux (un seul grand meuble, owner 2026-07-13) : coins internes de la jonction à plat */ #fiche[data-gabarit="wiki"] .t-nen + .t-nen{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-nen + .t-nen .t-nen-titre.t-eqbox{border-top-left-radius:0;border-top-right-radius:0;} #fiche[data-gabarit="wiki"] .t-nen + .t-nen .t-nen-titre .t-eqbox-int{border-top-left-radius:0;border-top-right-radius:0;} #fiche[data-gabarit="wiki"] .t-nen:has(+ .t-nen) .t-nen-desc.t-eqbox{border-bottom-left-radius:0;border-bottom-right-radius:0;} #fiche[data-gabarit="wiki"] .t-nen:has(+ .t-nen) .t-nen-desc .t-eqbox-int{border-bottom-left-radius:0;border-bottom-right-radius:0;} /* la barre rouge qui sépare le Nen de Toad de celui de SISTA — un poil plus courte que les barres pleines des titres */ #fiche[data-gabarit="wiki"] .t-sep-nen{ clear:both;height:5px;width:88%; margin:2.6rem auto;background:#C52525;border-radius:99px; } #fiche[data-gabarit="wiki"] .t-sep-nen + .t-nen-groupe{margin-top:0;} /* NEN de SISTA : remplissage ROSE #FF81E4 (le rose Wix de l'owner) — le blanc y était illisible (contraste ~2:1) → textes en PRUNE FONCÉ #4A1030 (le velours des halls, contraste ~7:1), relief blanc doux */ #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-type .t-eqbox-int, #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-desc .t-eqbox-int{background:#FF81E4;} #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-typelabel, #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-types span{ color:#4A1030;text-shadow:2px 3px 0 rgba(255,255,255,.35); } #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-typebar{background:#4A1030;} #fiche[data-gabarit="wiki"] .t-nen-rose .t-nen-desc p{color:#4A1030;} /* les bordures rouges des tableaux de SISTA passent au MÊME rose que l'intérieur (owner 2026-07-13) */ #fiche[data-gabarit="wiki"] .t-nen-rose .t-eqbox{border-color:#FF81E4;} /* le sprite pixel de Toadette (32×42) reste NET une fois agrandi, et REMPLIT la hauteur de sa boîte (hauteur explicite : le stretch flex ne transfère pas le ratio d'une image → il l'étirait) */ #fiche[data-gabarit="wiki"] .t-nen-sista .t-nen-logo{ image-rendering:pixelated; height:88px;width:auto;max-height:none; } #fiche[data-gabarit="wiki"] .inv-opera:focus-visible{outline:3px solid #FFCD3E;outline-offset:4px;border-radius:8px;} #fiche[data-gabarit="wiki"] .inv-haut{position:relative;} /* FERMÉ = un léger flottement (transform seul, jamais d'opacité) pour souffler qu'il est cliquable ; au survol, lueur dorée (ouvert ou fermé) */ #fiche[data-gabarit="wiki"] .inv-opera:not(.ouvert) .inv-haut{ animation:inv-flotte 2.4s ease-in-out infinite; } @keyframes inv-flotte{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } #fiche[data-gabarit="wiki"] .inv-opera:hover .inv-haut img{ filter:drop-shadow(0 0 9px rgba(255,205,62,.6)) brightness(1.06); } @media (prefers-reduced-motion: reduce){ #fiche[data-gabarit="wiki"] .inv-opera:not(.ouvert) .inv-haut{animation:none;} } #fiche[data-gabarit="wiki"] .inv-haut img, #fiche[data-gabarit="wiki"] .inv-piece{display:block;width:100%;height:auto;} #fiche[data-gabarit="wiki"] .inv-titre{ position:absolute;left:6%;top:47%;transform:translateY(-50%); font-family:'ThaleahFat','Luckiest Guy',cursive; font-size:9cqw;letter-spacing:.05em;color:#FFCD3E; /* le jaune de la fiche */ text-shadow:3px 3px 0 rgba(0,0,0,.55); /* ombre portée */ pointer-events:none; } #fiche[data-gabarit="wiki"] .inv-rouleau{ overflow:hidden;max-height:0; transition:max-height .6s ease; } /* le milieu = UNE rangée propre répétée : la hauteur (aspect-ratio) doit rester un multiple ENTIER de la tuile (12 × 119 de haut pour 1024 de large) sinon la dernière rangée serait coupée */ #fiche[data-gabarit="wiki"] .inv-milieu{ background:url("../images/Toad Kinopio/inventaire-milieu.png"); background-size:100% auto;background-repeat:repeat-y; aspect-ratio:1024/1428; /* 12 rangées de 119px */ } @media (prefers-reduced-motion: reduce){ #fiche[data-gabarit="wiki"] .inv-rouleau{transition:none;} } /* ÉQUIPEMENT : le grand « tableau » = une pile de rangées [image | nom + description]. Chaque boîte reprend rouge 4 → blanc 5 → bleu 2 ; le NOM a l'intérieur complètement BLEU (texte blanc contour noir, police pixel). Seuls les 4 coins EXTÉRIEURS du tableau sont arrondis — les coins entre deux rangées restent DROITS : un seul meuble (owner 2026-07-12). */ #fiche[data-gabarit="wiki"] .t-equip{ display:flex;flex-direction:column;gap:0;margin-top:1.3rem;clear:both; box-shadow:0 4px 14px rgba(0,0,0,.22);border-radius:15px; /* comme le profil */ } #fiche[data-gabarit="wiki"] .t-equip-item{display:flex;gap:0;align-items:stretch;} /* les boîtes se TOUCHENT : marges négatives de 4px (= l'épaisseur du rouge) → les bordures rouges voisines se SUPERPOSENT PILE, un seul meuble, comme les bandes du tableau de profil (owner 2026-07-12) */ #fiche[data-gabarit="wiki"] .t-equip-item + .t-equip-item{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-equip-txt > .t-equip-desc{margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-eqbox{ border:4px solid #C52525;background:#fff;padding:5px;margin:0;border-radius:0; } #fiche[data-gabarit="wiki"] .t-eqbox-int{ display:block;border:2px solid #2726DA;border-radius:0;background:#fff; } #fiche[data-gabarit="wiki"] .t-equip-img{flex:0 0 clamp(190px,36%,340px);display:flex;} #fiche[data-gabarit="wiki"] .t-equip-img .t-eqbox-int{ flex:1;display:flex;align-items:center;justify-content:center;padding:12px; } #fiche[data-gabarit="wiki"] .t-equip-img img{display:block;max-width:100%;height:auto;} #fiche[data-gabarit="wiki"] .t-equip-txt{ flex:1;display:flex;flex-direction:column;gap:0;min-width:0; margin-left:-4px; /* colle la colonne texte à la boîte image */ } #fiche[data-gabarit="wiki"] .t-equip-nom .t-eqbox-int{ background:#2726DA;border-color:#2726DA;color:#fff;text-align:center; font-family:'Super Mario Bros 2','Luckiest Guy',cursive; font-size:19px;letter-spacing:.04em;text-transform:uppercase; padding:.42em .6em .3em; -webkit-text-stroke:1px #000;paint-order:stroke fill; /* contour = lisibilité */ } #fiche[data-gabarit="wiki"] .t-equip-desc{flex:1;display:flex;} #fiche[data-gabarit="wiki"] .t-equip-desc .t-eqbox-int{flex:1;padding:.55em .95em;} #fiche[data-gabarit="wiki"] .t-equip-desc p{ font-size:19px;font-weight:600;line-height:1.5; text-align:justify;color:#101014;margin:0; } /* coins extérieurs du tableau (externe 15 / interne 9, comme le reste) */ #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-img{border-top-left-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-img .t-eqbox-int{border-top-left-radius:9px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-nom{border-top-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-nom .t-eqbox-int{border-top-right-radius:9px;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-img{border-bottom-left-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-img .t-eqbox-int{border-bottom-left-radius:9px;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-desc{border-bottom-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-desc .t-eqbox-int{border-bottom-right-radius:9px;} .fiche-entete{text-align:center;margin-bottom:2rem;} .fiche-entete h1{ font-size:clamp(2rem,5vw,3.4rem);color:var(--creme); text-shadow:0 3px 0 var(--rouge), 0 6px 0 rgba(0,0,0,.45); } .fiche-entete .sous-titres{ display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem; } .badge{ background:rgba(230,57,70,.16);border:1.5px solid var(--rouge);color:#ffb3ba; font-weight:800;font-size:.8rem;border-radius:999px;padding:.25rem .8rem; } .fiche-corps{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start;} .portrait{ background: linear-gradient(135deg, #f6d465, var(--or-sombre) 30%, #f1c948 50%, #a87c14 75%, #ffe084); padding:12px;border-radius:6px; box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 0 0 4px rgba(90,60,0,.55); } .portrait img{width:100%;display:block;border-radius:2px;background:#241a3d;} .panneau{ background:rgba(255,255,255,.045);border:1.5px solid rgba(255,210,63,.22); border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.4rem; } .panneau h2{ color:var(--or);font-size:1.15rem;letter-spacing:.08em;margin-bottom:.8rem; text-shadow:0 2px 0 rgba(0,0,0,.4); } .table-profil{width:100%;border-collapse:collapse;font-size:.95rem;} .table-profil td{padding:.34rem .2rem;border-bottom:1px dashed rgba(255,244,224,.12);} .table-profil td:first-child{color:#a89ad6;font-weight:800;width:42%;} .panneau p{line-height:1.7;color:#e8e0f7;margin-bottom:.9rem;} .panneau p:last-child{margin-bottom:0;} .sommaire-chips{display:flex;flex-wrap:wrap;gap:.5rem;} .sommaire-chips span{ background:rgba(255,210,63,.1);border:1.5px solid rgba(255,210,63,.4);color:var(--or); font-weight:800;font-size:.78rem;border-radius:999px;padding:.3rem .8rem; } .note-proto{ margin-top:1rem;font-size:.85rem;color:#a89ad6;font-style:italic;text-align:center; } /* ============================================================ TRANSITION « SAUT DANS LE TABLEAU » ============================================================ */ /* Tout en TRANSITIONS (pas de keyframes) : à la sortie, une animation retirée coupait net au lieu de fondre (bug owner « ça coupe direct »). Entrée : l'étoile blanche gonfle → l'écran devient TOTALEMENT blanc (le ::after plein blanc) ; palier ; sortie : fondu doux vers la fiche. Jamais bloquant : pointer-events none en permanence. */ #voile-saut{ position:fixed;inset:0;z-index:200;pointer-events:none; background:radial-gradient(circle at 50% 50%, #fff 0%, #fff 30%, rgba(255,244,224,0) 70%); opacity:0;transform:scale(.12); /* durées de SORTIE (fade-out du blanc qui révèle la fiche) */ transition:opacity .9s ease, transform 0s linear .9s; } #voile-saut.actif{ opacity:1;transform:scale(2.6); /* durées d'ENTRÉE (burst de l'étoile) */ transition:opacity .55s ease-in, transform .7s ease-in; } #voile-saut::after{ content:"";position:absolute;inset:0;background:#fff; opacity:0;transition:opacity .9s ease; /* sortie : le blanc s'évapore */ } #voile-saut.actif::after{ opacity:1;transition:opacity .45s ease .25s; /* entrée : blanc TOTAL */ } /* L'ÉTOILE JAUNE de la transition : elle apparaît UNE FOIS le blanc posé (delay), brillante au centre, puis se fait emporter par le fade-out. z-index 2 : au-dessus du plan blanc ::after (sinon il la couvrait). */ #voile-saut::after{z-index:1;} #voile-saut .etoile-saut{ position:absolute;top:50%;left:50%;z-index:2; font-size:clamp(5rem, 15vw, 8.5rem);color:var(--or); transform:translate(-50%,-50%) scale(.2) rotate(-40deg);opacity:0; text-shadow:0 0 28px rgba(255,210,63,.95), 0 0 80px rgba(255,190,40,.65); /* sortie : emportée par le fondu */ transition:opacity .6s ease, transform .8s ease; } #voile-saut.actif .etoile-saut{ opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg); /* entrée : elle jaillit quand l'écran est déjà blanc */ transition:opacity .45s ease .55s, transform .6s cubic-bezier(.3,1.6,.5,1) .55s; } /* ============================================================ EASTER EGGS ============================================================ */ #boo{ position:fixed;left:0;top:0;z-index:150;pointer-events:none; width:110px;height:110px;opacity:0;transition:opacity .9s ease; will-change:transform; transform:translate(-200px,-200px); /* caché hors écran au départ */ } #boo.visible{opacity:.95;} #boo svg{ width:100%;height:100%;display:block; /* pas de drop-shadow CSS ici : ça a déjà fait planter le rendu ; le halo est dessiné dans le SVG lui-même */ animation:booflotte 3s ease-in-out infinite; } @keyframes booflotte{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}} /* deux visages : l'effronté (normal) et le timide (quand tu le surprends) */ #boo .boo-normal,#boo .boo-timide,#boo .boo-bras{transition:opacity .25s ease;} #boo .boo-timide{opacity:0;} #boo.timide .boo-normal{opacity:0;} #boo.timide .boo-timide{opacity:1;} /* timide, il se couvre les yeux : ses bras ne sont plus sur les côtés */ #boo.timide .boo-bras{opacity:0;} /* ══════════ LE CHAPEAU DE FÊTE DE BOO (quête B, 2026-09-11) ══════════ */ /* le chapeau déborde du dessin (il dépasse au-dessus de la tête) : le SVG doit le laisser sortir */ #boo svg{overflow:visible;} #boo .boo-chapeau{display:none;} #boo.fetard .boo-chapeau{display:inline;} #boo .boo-pompon{display:none;} #boo.tient-pompon .boo-pompon{display:inline;} .boo-pompon image{image-rendering:pixelated;} .boo-chapeau image{image-rendering:pixelated;} /* L'OBJET QUI TOMBE (le pompon de Boo ébloui, la pointe du petit timide) : fixe sur , cliquable dès qu'il existe — la chute (top) et la pulsation sont décoratives */ .objet-tombe{ position:fixed; z-index:160; width:64px; height:64px; padding:4px; border:none; background:none; cursor:pointer; transition:top .6s cubic-bezier(.34,1.56,.64,1); } .objet-tombe img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,210,63,.6)); animation:objetTombeBrille 1.6s ease-in-out infinite; } @keyframes objetTombeBrille{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}} .objet-tombe:focus-visible{outline:3px solid var(--or); outline-offset:3px; border-radius:12px;} /* LE PETIT BOO TIMIDE du hall secret : DERRIÈRE le cadre (l'œuvre passe devant lui), il en dépasse quand il guette, il s'y cache quand on fonce */ .cadre-zone:has(.boo-guetteur) .oeuvre{z-index:1;} .boo-guetteur{ position:absolute; z-index:0; top:1%; right:0; width:calc(var(--tabW, 320px) * .24); aspect-ratio:1; transform:translateX(-6%); transition:transform .45s cubic-bezier(.34,1.4,.64,1); pointer-events:none; } .boo-guetteur.guette{transform:translateX(64%) rotate(8deg); pointer-events:auto; cursor:pointer;} .boo-guetteur svg{width:100%; height:100%; display:block; overflow:visible;} .boo-guetteur .boo-chapeau{display:none;} .boo-guetteur .boo-pompon{display:none;} .boo-guetteur .boo-timide{opacity:0;} .boo-guetteur.attrape .boo-normal{opacity:0;} .boo-guetteur.attrape .boo-timide{opacity:1;} .boo-guetteur .bg-pointe{ position:absolute; width:46%; left:50%; top:44%; transform:rotate(18deg); image-rendering:pixelated; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); } .boo-guetteur.attrape{animation:guetteurFile .7s ease-in forwards;} @keyframes guetteurFile{to{transform:translateX(170%) rotate(24deg) scale(.6); opacity:0;}} /* ⭐ « TU CHAUFFES » (2026-09-19) : Boo s'illumine en trois crans quand une pièce fantôme CACHÉE approche. ⚠ le cran est l'ATTRIBUT `data-chauffe`, posé d'un coup : le halo est un ÉTAT (il se lit animations gelées), le frémissement et la pulsation ne sont que du décor. ⚠ pas de filtre CSS sur #boo (il a déjà fait planter le rendu) : le halo est un cercle DANS le SVG. ⚠ `display:none` par défaut et PARTOUT : le guetteur du hall secret recopie ce SVG, il ne doit jamais l'allumer. */ .boo-halo-chaud{display:none; transform-origin:50px 50px;} #boo[data-chauffe] .boo-halo-chaud{display:inline; animation:booChauffePulse 1.5s ease-in-out infinite;} #boo[data-chauffe="1"] .boo-halo-chaud{opacity:.4;} #boo[data-chauffe="2"] .boo-halo-chaud{opacity:.7; animation-duration:.85s;} #boo[data-chauffe="3"] .boo-halo-chaud{opacity:1; animation-duration:.42s;} @keyframes booChauffePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}} #boo[data-chauffe="2"] svg{animation:booFremit .34s ease-in-out infinite;} #boo[data-chauffe="3"] svg{animation:booFremit .15s ease-in-out infinite;} @keyframes booFremit{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}} @media (prefers-reduced-motion: reduce){ #boo[data-chauffe] .boo-halo-chaud, #boo[data-chauffe] svg{animation:none;} } /* LES PIÈCES FANTÔMES : invisibles ET insaisissables tant que Boo n'est pas tout près — l'état « proche » est posé d'un coup (anti-gel) */ .piece-fantome{ position:absolute; z-index:40; width:21px; height:28px; padding:0; border:none; background:none; cursor:pointer; visibility:hidden; pointer-events:none; } .piece-fantome.proche{visibility:visible; pointer-events:auto;} /* ⭐ L'ÉCLAT DE RÉVÉLATION (2026-09-12) : un anneau qui s'ouvre + un petit rebond de la pièce, pour que l'œil l'attrape du coin de l'œil. ⚠ ANTI-GEL : purement DÉCORATIF — `.proche` a déjà posé la visibilité et le clic d'un coup, et aucune de ces deux animations ne touche l'opacité de ce qu'on clique. Gelées, il reste un anneau fixe (qui ne prend aucun clic) et une pièce un peu plus grosse : rien ne disparaît, rien n'avale un clic. */ .piece-fantome.proche::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; pointer-events:none; border:2px solid rgba(200,230,255,.85); animation:fantomeEclat .75s ease-out 1 both; } @keyframes fantomeEclat{ from{transform:scale(.5); opacity:.95;} to{transform:scale(4.4); opacity:0;} } .piece-fantome.proche img{animation:fantomePop .34s ease-out 1 both;} @keyframes fantomePop{ from{transform:scale(1.55) translateY(-5px);} 60%{transform:scale(.92);} to{transform:scale(1);} } .piece-fantome img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated; opacity:.82; filter:grayscale(1) brightness(1.55) sepia(.3) hue-rotate(185deg) saturate(2.4) drop-shadow(0 0 7px rgba(200,225,255,.95)); } /* dans un hall : à côté de la colonne des tableaux, au-delà des torches */ #hall .piece-fantome.g{left:max(.5rem, calc(50% - var(--tabW, 320px) / 2 - 11rem));} #hall .piece-fantome.d{right:max(.5rem, calc(50% - var(--tabW, 320px) / 2 - 11rem));} /* LA BASE DU CHAPEAU, dans le recoin de l'atelier obscur (sous le noir) */ .atelier-morceau{ position:absolute; left:4%; bottom:5%; width:min(96px, 18vw); padding:0; border:none; background:none; cursor:pointer; transform:rotate(-14deg); } .atelier-morceau img{ width:100%; height:auto; display:block; image-rendering:pixelated; filter:brightness(.7) saturate(.85) drop-shadow(0 6px 8px rgba(0,0,0,.75)); } .atelier-morceau:hover img, .atelier-morceau:focus-visible img{ filter:brightness(.95) drop-shadow(0 0 10px rgba(120,170,255,.55)); } /* un objet DONNÉ, dans la besace : estompé, avec ce qu'il est devenu */ .tr-objet.donne{background:rgba(61,53,96,.22); border-style:dashed; border-color:rgba(255,210,63,.3);} .tr-objet.donne img{opacity:.5; filter:grayscale(.45) drop-shadow(0 3px 6px rgba(0,0,0,.4));} .tr-objet.donne em{font-size:.62rem; color:#b9a9d6; font-style:italic; line-height:1.1; text-align:center;} @media (prefers-reduced-motion: reduce){ .objet-tombe{transition:none;} .objet-tombe img{animation:none;} .boo-guetteur{transition:none;} .boo-guetteur.attrape{animation:none; visibility:hidden;} .piece-fantome.proche::after, .piece-fantome.proche img{animation:none;} .piece-fantome.proche::after{opacity:0;} } /* ══════════ AU BOUT DU COULOIR — LA PAGE MÉTA (2026-09-13) ══════════ Owner : « un écran complètement noir, une musique douce, le texte qui apparaît petit à petit, flottant ». ⚠⚠ ANTI-GEL : ce qui MONTRE une strophe est la classe `dite`, posée d'un coup par un minuteur — et le même minuteur force l'opacité en ligne au bout du fondu. Les deux animations ci-dessous sont DÉCORATIVES : gelées, il reste un texte lisible, immobile. Rien de cliquable ne dépend d'une opacité. */ #meta{background:#000; min-height:100vh;} #meta .barre{background:rgba(4,2,10,.86); border-bottom:1px solid rgba(255,210,63,.10);} #meta .barre .fil{color:#6a6180;} .meta-salle{ min-height:calc(100vh - 4.2rem); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; padding:12vh 7vw 16vh; text-align:center; cursor:default; } .meta-flot{display:flex; flex-direction:column; align-items:center; gap:1.45rem; width:100%;} .meta-strophe{ max-width:34rem; margin:0; visibility:hidden; font-family:"Nunito", system-ui, sans-serif; font-size:1.04rem; line-height:1.95; color:#cfc6e6; letter-spacing:.012em; text-wrap:balance; } /* ⚠ UNE SEULE règle `.dite` (une règle dupliquée n'est plus falsifiable) : elle montre la strophe ET porte ses deux animations décoratives. */ .meta-strophe.dite{ visibility:visible; animation:metaParait 1.5s ease-out both, metaFlotte 9s ease-in-out 1.5s infinite; } /* la voix de l'owner : plus chaude, un ton au-dessus */ .meta-strophe.voix{color:#f3e9d6; font-size:1.1rem;} .meta-strophe.fort{ font-family:"Luckiest Guy", system-ui, sans-serif; font-size:1.9rem; color:#ffd23f; letter-spacing:.03em; text-shadow:0 0 26px rgba(255,210,63,.28); } @keyframes metaParait{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}} /* le FLOTTEMENT : transform seul, jamais l'opacité — décor pur */ @keyframes metaFlotte{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}} .meta-pied{margin-top:2.4rem; display:flex; flex-direction:column; align-items:center; gap:1.6rem; width:100%;} .meta-pied[hidden]{display:none;} /* ⚠ un `display` posé ici écraserait l'attribut : le pied s'ouvrirait avant la dernière strophe */ /* ⭐ LES TROIS PORTES DE LA FIN (2026-09-19) : le Livre d'Or, le Mur, le Tableau d'honneur — la récompense finale, et le seul endroit où les visiteurs se parlent. Elles paraissent AVEC le pied (`hidden`, d'un coup). */ .meta-suite{margin:0; font:500 1rem 'Cinzel', serif; letter-spacing:.14em; text-transform:uppercase; color:#8f84ad; text-align:center;} .meta-portes{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.1rem; width:min(100%, 880px);} .meta-porte{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:1.5rem 1rem 1.3rem; cursor:pointer; border-radius:20px; border:2px solid rgba(255,210,63,.45); color:#fff4e0; text-align:center; overflow:hidden; background:radial-gradient(ellipse at 50% 0%, rgba(255,210,63,.16), transparent 62%), linear-gradient(180deg, #1d1436, #0c0719); box-shadow:0 8px 0 rgba(0,0,0,.55), 0 0 26px rgba(255,210,63,.08); transition:transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .16s ease, border-color .16s ease; } .meta-porte span{font-size:2.7rem; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));} .meta-porte b{font:400 1.35rem 'Luckiest Guy', sans-serif; letter-spacing:.04em; color:#ffd23f;} .meta-porte i{font-style:normal; font-size:.88rem; color:#b9aed6; line-height:1.35;} .meta-porte:hover, .meta-porte:focus-visible{transform:translateY(-6px) scale(1.03); border-color:#ffd23f; outline:none; box-shadow:0 14px 0 rgba(0,0,0,.55), 0 0 40px rgba(255,210,63,.28);} .meta-porte:active{transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.55);} .meta-porte.livre{border-color:rgba(230,57,70,.55);} .meta-porte.scores{border-color:rgba(94,224,208,.5);} @media (prefers-reduced-motion: reduce){ .meta-porte{transition:none;} } /* le bouton du tableau d'honneur, au comptoir de la Salle de Jeux */ .cpt-classement{margin-left:.5rem; padding:.18rem .6rem; border-radius:999px; border:2px solid #c99a1e; background:#2a0a22; color:#ffd23f; font:800 .78rem 'Nunito', sans-serif; cursor:pointer; vertical-align:middle;} .cpt-classement:hover, .cpt-classement:focus-visible{background:#ffd23f; color:#2a0a22; outline:none;} .meta-bouton{ font-family:"Cinzel", serif; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#8d84a8; background:none; border:1px solid rgba(255,210,63,.22); border-radius:999px; padding:.6rem 1.5rem; cursor:pointer; transition:color .25s, border-color .25s, background .25s; } .meta-bouton:hover, .meta-bouton:focus-visible{ color:#ffd23f; border-color:rgba(255,210,63,.55); background:rgba(255,210,63,.05); } .meta-credits{ max-width:40rem; margin:2rem auto 0; padding:1.6rem 1.4rem; border-top:1px solid rgba(255,210,63,.14); border-bottom:1px solid rgba(255,210,63,.14); color:#8d84a8; font-size:.86rem; line-height:1.75; text-align:left; } .meta-credits p{margin:0 0 .8rem;} .meta-credits p:last-child{margin-bottom:0; color:#6a6180; font-style:italic;} @media (max-width:640px){ .meta-strophe{font-size:.99rem;} .meta-strophe.voix{font-size:1.04rem;} .meta-strophe.fort{font-size:1.5rem;} .meta-salle{padding:10vh 6vw 14vh;} } @media (prefers-reduced-motion: reduce){ .meta-strophe.dite{animation:none; opacity:1;} } /* les pièces cachées de la galerie : la vraie pièce SMW qui tourne */ .piece-cachee{ position:absolute;width:21px;height:28px; background:none;border:none;padding:0;cursor:pointer;z-index:40; } .piece-cachee img{ width:100%;height:100%;object-fit:contain;display:block; image-rendering:pixelated; } .piece-cachee:hover img{filter:brightness(1.3);} .piece-cachee.prise{display:none;} /* en Mode Éditeur : glissables, avec un cadre discret */ .piece-cachee.en-edition{ cursor:grab;outline:2px dashed rgba(255,210,63,.55); outline-offset:3px;border-radius:6px;touch-action:none; } .piece-cachee.selectionnee{outline:2px solid var(--or);} /* #toast = le CONTENEUR des annonces : les pilules S'EMPILENT (la plus récente en bas) au lieu de s'écraser — une étoile et un succès simultanés restent lisibles tous les deux (owner 2026-07-21). */ /* ⛔⛔ 2026-09-19 — LA PILULE ÉCRASÉE EN ROND SUR TÉLÉPHONE (vue sur capture, outils/ecran-tel.js) : le conteneur était posé à `left:50%` + translateX(-50%). Or un bloc `fixed` calé à gauche ne dispose, pour sa largeur, que de ce qui reste À DROITE de son `left` — la MOITIÉ de l'écran. Sur 375 px la pilule se repliait donc dans 187 px, sur 7 lignes, et son `border-radius:999px` en faisait un disque. Invisible au bureau (960 px de demi-écran suffisent à une pilule de 640). Le conteneur prend désormais TOUTE la largeur (`left`/`right`) et centre ses pilules par `align-items` : même rendu au bureau, vraie pilule au téléphone. ⚠ il reste `pointer-events:none` : large, il ne barre rien. */ #toast{ position:fixed;bottom:2rem;left:4vw;right:4vw; display:flex;flex-direction:column;align-items:center;gap:.6rem; z-index:300;pointer-events:none; } .toast-pilule{ display:flex;align-items:center;gap:.6em;max-width:min(92vw, 640px); background:var(--encre);border:2px solid var(--or);color:var(--creme); font-weight:800;padding:.7rem 1.4rem;border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:toastPop .38s cubic-bezier(.2,1.4,.4,1); /* ⚠⚠ LA PILULE ATTRAPE LE CLIC, PAS SON CONTENEUR (owner 2026-08-13 : « si on clique sur la pilule on peut cliquer sur le bouton derrière, comme si le clic traversait »). `#toast` reste `pointer-events:none` — sa colonne est haute et large, elle barrerait l'écran pour rien — et seules les pilules, qui occupent exactement ce qu'on voit, le reprennent. */ pointer-events:auto; cursor:pointer; } @keyframes toastPop{from{transform:translateY(18px) scale(.94);}to{transform:none;}} /* ⭐ LES SUCCÈS TOMBENT DU HAUT (owner 2026-08-14 : « mettre les pilules de succès apparaissant depuis le haut de l'écran, pas le bas — pour éviter trop de succession avec les pilules d'étoiles »). Deux colonnes, deux familles : les étoiles et les messages montent d'en bas, les succès descendent d'en haut, et plus rien ne se bouscule. ⚠ MÊME PLAFOND, MÊME BALAYAGE, MÊME anti-gel : c'est le même conteneur à un bord près (`#toast` reste `pointer-events:none`, les pilules le reprennent — sinon le clic traverserait, le bug des Bois Perdus). */ #toastHaut{ position:fixed;top:1.4rem;left:4vw;right:4vw; /* même correctif que #toast : jamais `left:50%` */ display:flex;flex-direction:column;align-items:center;gap:.6rem; z-index:300;pointer-events:none; } #toastHaut .toast-pilule{animation:toastPopHaut .38s cubic-bezier(.2,1.4,.4,1);} @keyframes toastPopHaut{from{transform:translateY(-18px) scale(.94);}to{transform:none;}} /* … et elle repart par où elle est venue */ #toastHaut .toast-pilule.sortie{transform:translateY(-10px);} #toastHaut .toast-pilule.balayee{animation:toastBalaiHaut .4s ease-in forwards;} @keyframes toastBalaiHaut{ 0% {transform:translateY(0) scale(1); opacity:1;} 35% {transform:translateY(-4px) scale(.99); opacity:1;} 100%{transform:translateY(46px) scale(.9); opacity:0;} } /* ⚠⚠ SON reduced-motion VIT DANS LE BLOC COMMUN, PLUS BAS — pas ici. Un second bloc aurait REDIT `.toast-pilule.balayee{animation:none; opacity:0;}` mot pour mot, et *une règle dupliquée n'est plus falsifiable* : le harnais cassait l'originale, ce doublon la remplaçait, et le contrôle restait vert sur un site qui disait le contraire. (Payé à l'instant, une ligne après avoir écrit la règle.) */ .toast-pilule.sortie{ opacity:0;transform:translateY(10px); transition:opacity .5s, transform .5s; } /* ⭐ LE BALAYAGE (clic, ou éviction quand la pile déborde) : elle part VERS LE HAUT et les autres se referment sous elle. ⚠ c'est une animation purement DÉCORATIVE : le retrait de l'élément est fait par un minuteur du JS, et `pointer-events:none` est déjà posé en ligne — gelée, elle ne peut donc ni se recliquer, ni bloquer un bouton. */ .toast-pilule.balayee{ animation:toastBalai .4s ease-in forwards; } @keyframes toastBalai{ 0% {transform:translateY(0) scale(1); opacity:1;} 35% {transform:translateY(4px) scale(.99); opacity:1;} 100%{transform:translateY(-46px) scale(.9); opacity:0;} } /* la pilule DORÉE des étoiles : la vraie étoile SM64 qui tourne en médaille, double liseré d'or, lueur chaude (l'emoji ⭐ du message est retiré en JS) */ .toast-pilule.toast-etoile{ background:linear-gradient(160deg, #34275e, #171030 70%); border:2px solid var(--or);color:#ffe28a; box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 3px rgba(255,210,63,.22), 0 0 26px rgba(255,210,63,.45); text-shadow:0 1px 0 rgba(0,0,0,.5); } .toast-pilule.toast-etoile::before{ content:"";flex:0 0 auto;width:34px;height:34px; /* le halo = un dégradé RADIAL derrière le gif (jamais de drop-shadow : le filtre compositait l'anim par frames et révélait ses bords carrés) */ background:url("../images/Accueil/etoile.gif") center/26px 26px no-repeat, radial-gradient(circle, rgba(255,220,80,.6), rgba(255,220,80,0) 68%); } /* la pilule VELOURS des succès : pourpre profond du hall, trophée en tête, liseré or à l'ancienne — l'habit « haut fait » du temple */ .toast-pilule.toast-succes{ background:linear-gradient(160deg, #5d1a3e, #2a0a1c 75%); border:2px solid #e9b64f;color:#ffe9c4; box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 3px rgba(233,182,79,.2), 0 0 24px rgba(233,182,79,.35); text-shadow:0 1px 0 rgba(0,0,0,.55); } .toast-pilule.toast-succes::before{ content:"🏆";flex:0 0 auto;font-size:1.35em;line-height:1; filter:drop-shadow(0 0 7px rgba(233,182,79,.7)); } @media (prefers-reduced-motion: reduce){ .toast-pilule{animation:none;} /* ⚠ même sans mouvement, une pilule balayée doit S'EFFACER : sinon elle resterait plantée là jusqu'à ce que le minuteur la retire, alors qu'on vient justement de demander à s'en débarrasser. */ .toast-pilule.balayee{animation:none; opacity:0;} /* ⚠ la colonne du HAUT a ses propres animations (plus spécifiques : un id) — il faut donc les couper nommément. L'`opacity:0`, lui, vient de la règle ci-dessus : rien ne le contredit, et on ne le redit pas (une règle dupliquée n'est plus falsifiable). */ #toastHaut .toast-pilule, #toastHaut .toast-pilule.balayee{animation:none;} } /* ---------- LES ÉTOILES (système partagé) ---------- */ /* l'étoile qui VIREVOLTE autour de la page (position posée en JS) */ .etoile-vol{ position:fixed;left:0;top:0;z-index:640;pointer-events:none; filter:drop-shadow(0 0 10px rgba(255,220,80,.85)); } /* l'étoile posée dans la fiche (centre de son conteneur) */ #fiche[data-gabarit="wiki"] .t-nen-type .t-eqbox-int{position:relative;} #fiche[data-gabarit="wiki"] .t-souvenir{position:relative;} /* conteneurs des 4 nouvelles étoiles de Toad (owner 2026-07-14) : chacun doit être position:relative pour accueillir l'étoile-fiche absolue */ #fiche[data-gabarit="wiki"] .t-merci{position:relative;} #fiche[data-gabarit="wiki"] .t-y-secret{position:relative;display:inline-block;} #fiche[data-gabarit="wiki"] .inv-zone{position:relative;} #fiche[data-gabarit="wiki"] .etoile-fiche{ position:absolute;left:calc(50% - 24px);top:calc(50% - 24px); width:48px;height:auto;cursor:pointer;z-index:3; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } /* l'INDICE discret : curseur + lueur dorée au survol des deux images-déclencheurs */ #fiche[data-gabarit="wiki"] .indice-etoile{cursor:pointer;} #fiche[data-gabarit="wiki"] .t-nen-logo.indice-etoile:hover{ filter:drop-shadow(0 0 12px rgba(255,210,63,.8)) brightness(1.07); } #fiche[data-gabarit="wiki"] .t-souvenir img.indice-etoile:hover{ filter:sepia(.32) saturate(.9) contrast(.94) brightness(1.1) drop-shadow(0 0 30px rgba(255,205,62,.8)); } /* l'épilogue « THANK YOU » : une lueur dorée chaude au survol */ #fiche[data-gabarit="wiki"] .t-merci.indice-etoile:hover{ text-shadow:0 0 14px rgba(255,210,63,.85); } /* le « Y » secret : AUCUN indice visuel à part le curseur — il ne se trouve qu'en s'y attardant vraiment (référence perso de l'owner) */ /* l'envolée « clin d'œil » quand on RÉCUPÈRE une étoile (html ET svg) : elle SPIN sur elle-même, s'arrête d'un rebond (le snap, où le js lâche 3 particules dorées), petit temps de pause, puis s'envole et disparaît. ⚠ durée 3.4s = DUREE_PRISE_ETOILE du js (calée sur le son rogné 3,56 s) */ .etoile-prise{ animation:etoilePrise 3.4s ease forwards !important; pointer-events:none; transform-box:fill-box;transform-origin:center; } @keyframes etoilePrise{ 0%{transform:rotateY(0) scale(1);opacity:1;} 30%{transform:rotateY(900deg) scale(1.25);opacity:1;} /* le tour sur elle-même */ 40%{transform:rotateY(900deg) scale(.86);opacity:1;} /* le snap (squash) */ 50%{transform:rotateY(900deg) scale(1.12);opacity:1;} /* le rebond */ 62%{transform:rotateY(900deg) scale(1);opacity:1;} /* le clin d'œil */ 78%{transform:rotateY(900deg) scale(1.05) translateY(-14px);opacity:1;} 100%{transform:rotateY(1260deg) scale(.1) translateY(-140px);opacity:0;} } /* les 3 petites particules dorées du snap */ .etoile-particule{ position:fixed;width:9px;height:9px;border-radius:50%; background:#FFCD3E;box-shadow:0 0 7px rgba(255,210,63,.9); z-index:641;pointer-events:none; animation:particuleEtoile .8s ease-out forwards; } .etoile-particule.p0{--dx:-38px;--dy:-24px;} .etoile-particule.p1{--dx:40px;--dy:-18px;} .etoile-particule.p2{--dx:2px;--dy:-48px;} @keyframes particuleEtoile{ 0%{transform:translate(-50%,-50%) scale(1);opacity:1;} 100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.25);opacity:0;} } @media (prefers-reduced-motion: reduce){ .etoile-prise{animation:none !important;opacity:0;transition:opacity .3s;} .etoile-particule{display:none;} } /* ---------- Divers ---------- */ /* Sur les écrans étroits, le soleil et la lune descendent sous le titre pour ne pas le chevaucher */ @media (max-width:1000px){ .soleil{top:22%;left:7%;} .lune{top:23%;right:9%;} } @media (max-width:720px){ .fiche-corps{grid-template-columns:1fr;} .portrait{max-width:260px;margin:0 auto;} /* fiche Toad sur téléphone : SEULEMENT la boîte (règle Wix de l'owner) — elle colle aux bords de l'écran, le fond à motif n'apparaît plus */ #fiche[data-gabarit="wiki"] .fiche-conteneur{padding:0 0 3rem;} #fiche[data-gabarit="wiki"] .boite-fiche{border-radius:0;} /* la fiche Toad passe en 1 colonne, en-tête compacté */ #fiche[data-gabarit="wiki"] .t-corps{grid-template-columns:1fr;} /* padding de la boîte resserré → l'en-tête a la place de tenir sans déborder */ #fiche[data-gabarit="wiki"] .boite-int{padding:1rem .8rem 2.4rem;} /* --duoH pilote duo ET gif (ils restent de largeur égale = logo centré) ; tailles réduites pour que les 5 éléments tiennent dans la largeur */ #fiche[data-gabarit="wiki"] .t-entete{--duoH:36px;gap:.25rem;} #fiche[data-gabarit="wiki"] .t-logo{height:50px;} #fiche[data-gabarit="wiki"] .t-piece img{height:22px;} #fiche[data-gabarit="wiki"] .carr-vue{height:340px;} /* sections sur téléphone : titre réduit, images flottantes un peu plus larges (sinon la colonne de texte à côté devient trop étroite) */ #fiche[data-gabarit="wiki"] .t-section-titre{font-size:24px;} #fiche[data-gabarit="wiki"] .t-section-corps p{font-size:17px;} #fiche[data-gabarit="wiki"] .t-notes-liste li{font-size:17px;} #fiche[data-gabarit="wiki"] .t-illu{width:46%;} /* tableau d'équipement sur téléphone : l'image passe AU-DESSUS du texte (une colonne trop étroite sinon) ; les coins arrondis suivent */ #fiche[data-gabarit="wiki"] .t-equip-item{flex-direction:column;} #fiche[data-gabarit="wiki"] .t-equip-img{flex-basis:auto;} /* empilé : c'est le HAUT du texte qui se colle à l'image, pas son côté */ #fiche[data-gabarit="wiki"] .t-equip-txt{margin-left:0;margin-top:-4px;} #fiche[data-gabarit="wiki"] .t-equip-img img{max-width:min(62%,240px);} #fiche[data-gabarit="wiki"] .t-equip-nom .t-eqbox-int{font-size:14px;} #fiche[data-gabarit="wiki"] .t-equip-desc p{font-size:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-img{border-top-right-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-img .t-eqbox-int{border-top-right-radius:9px;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-nom{border-top-right-radius:0;} #fiche[data-gabarit="wiki"] .t-equip-item:first-child .t-equip-nom .t-eqbox-int{border-top-right-radius:0;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-img{border-bottom-left-radius:0;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-img .t-eqbox-int{border-bottom-left-radius:0;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-desc{border-bottom-left-radius:15px;} #fiche[data-gabarit="wiki"] .t-equip-item:last-child .t-equip-desc .t-eqbox-int{border-bottom-left-radius:9px;} /* traits notables sur téléphone : l'image passe au-dessus de la boîte (sinon la boîte devient trop étroite à côté) */ #fiche[data-gabarit="wiki"] .t-trait, #fiche[data-gabarit="wiki"] .t-trait.droite{flex-direction:column;align-items:center;} #fiche[data-gabarit="wiki"] .t-trait-tableau{width:100%;} #fiche[data-gabarit="wiki"] .t-trait-img{width:min(52%,170px);margin:.2rem 0 .4rem;} #fiche[data-gabarit="wiki"] .t-trait-titre span{font-size:16px;} #fiche[data-gabarit="wiki"] .t-trait-desc p{font-size:16px;} /* nen sur téléphone : le logo passe au-dessus du bloc type, tout centré */ #fiche[data-gabarit="wiki"] .t-nen-type .t-eqbox-int{flex-direction:column;gap:.8rem;} #fiche[data-gabarit="wiki"] .t-nen-logo{max-width:72%;max-height:150px;} #fiche[data-gabarit="wiki"] .t-nen-typebloc{text-align:center;width:100%;} #fiche[data-gabarit="wiki"] .t-nen-titre span{font-size:17px;letter-spacing:.08em;} #fiche[data-gabarit="wiki"] .t-nen-typelabel{font-size:21px;} #fiche[data-gabarit="wiki"] .t-nen-types span{font-size:16px;} #fiche[data-gabarit="wiki"] .t-nen-desc p{font-size:16px;} /* inventaire sur téléphone : zone en colonne, carte sous l'inventaire */ #fiche[data-gabarit="wiki"] .inv-zone{flex-direction:column;} #fiche[data-gabarit="wiki"] .inv-opera{flex-basis:auto;width:min(100%,340px);} #fiche[data-gabarit="wiki"] .inv-carte{width:100%;} #fiche[data-gabarit="wiki"] p.carte-desc, #fiche[data-gabarit="wiki"] p.carte-ligne{font-size:16px;} .rangee{gap:2rem;} /* HALLS sur téléphone : les torches flanquantes n'ont pas la place de tenir de part et d'autre sans rétrécir le tableau. Choix owner : on les MASQUE sous 720px (elles restent sur tablette/desktop) et on laisse le tableau prendre presque toute la largeur — plus grand et plus lisible (overflow-x:clip global protège de tout débordement). */ #hall{--tabW:min(88vw, 440px);} .torche-hall{display:none;} /* padding latéral resserré : le tableau peut respirer plus large */ .rangée,.rangee{padding-left:1rem;padding-right:1rem;} .lune{width:64px;height:64px;top:26%;right:9%;} .soleil{width:70px;height:70px;top:25%;left:7%;} .titre-entree{top:4%;} /* sur téléphone, la carte postale garde le château lisible (200vw) et le MONDE SE DÉCOUVRE AU DOIGT : .monde devient défilable horizontalement — collines, mare, Chomp et tuyaux redeviennent accessibles (avant, tout ça restait à jamais hors écran). Le JS centre la vue sur le château au chargement. */ /* left:26vw + le spacer ::after = 26vw de marge d'exploration de chaque côté : les collines qui DÉBORDENT du cadre (la plante piranha du paon, les arbres…) sont atteignables au doigt aussi */ .chateau-wrap{width:200vw;left:26vw;transform:none;} .monde{ overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; /* pas de « retour page » accidentel */ scrollbar-width:none; /* le doigt suffit, pas de barre */ } .monde::-webkit-scrollbar{display:none;} .monde::after{ content:"";position:absolute;top:0;height:1px; left:calc(226vw); width:26vw; /* étend la zone de défilement à droite */ } .consigne{font-size:.78rem;} /* plus courte : ne frôle plus les boutons son */ /* sur téléphone la progression rétrécit. ⚠ le FIL, lui, n'a plus de règle à part (2026-09-16) : il se replie À LA PLACE, comme partout (temple.js, ajusterFil). L'ancien « display:none » sur ses liens masquait tout AVANT la mesure — et son pire cas, « … ▸ la page », est justement celui que la mesure donne sur un écran étroit. */ .progression{gap:.55rem;font-size:.88rem;} .prog-item img{height:16px;} /* la Grande Galerie sur téléphone : alcôves resserrées mais on garde la lecture logo · torche · porte de l'ordinateur. (--porteH/--toadH/--plaqueL pilotent portes, torches, plaques, Toad) */ #galerie{--porteH:218px;--toadH:126px;--plaqueL:31vw;} .porte-univers{gap:.7rem;padding:1.2rem 0;} .cadre-porte .pancarte{min-width:0;font-size:.78rem;padding:.4rem .6rem;white-space:normal;max-width:38vw;} /* le nom gravé doit tenir dans son cartouche : la plaque rétrécit plus vite que le plancher de 9px de la police (mesuré : « L'Attaque des Titans » demandait 90px pour 78 dispo) → plancher 7px + chasse serrée */ .plaque-nom{font-size:clamp(6.5px, calc(var(--plaqueL) * .052), 15px);letter-spacing:0;} } /* ⭐ L'ACCUEIL SUR TABLETTE (2026-09-19) — LE TROU mesuré le matin même : au-delà de 720 px de large et sous 1,52:1, la carte est bridée à x 0 → 1200 SANS glissé (23 éléments de décor hors champ — les collines qui débordent, la plante piranha du paon…). Un écran LARGE les voit parce que la carte y est plus étroite que lui ; un téléphone les fait glisser ; la tablette, elle, n'avait ni l'un ni l'autre. Même remède qu'au téléphone, en plus doux (la carte à 140vw au plus, bornée par la hauteur, 18vw de marge d'exploration). ⚠ AU DOIGT SEULEMENT : une souris ne sait pas défiler de côté — dans une fenêtre d'ordinateur étroite, la carte agrandie montrerait MOINS qu'avant, sans recours. ⚠ le js (centrerMonde, indiceGlisse) ne regarde que « ça déborde ? » : rien à y écrire. */ @media (min-width:721px) and (max-aspect-ratio:152/100) and (pointer:coarse){ .chateau-wrap{width:min(140vw, 152vh);left:18vw;transform:none;} .monde{ overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:none; } .monde::-webkit-scrollbar{display:none;} .monde::after{ content:"";position:absolute;top:0;height:1px; left:calc(18vw + min(140vw, 152vh));width:18vw; } } /* sous ~920px, la bande de briques à gauche du tapis devient trop fine (34px à 768, 9px à 375) pour loger la fissure de l'indice secret : on la colle au bord gauche de l'écran, à la jonction mur/tapis */ @media (max-width:920px){ /* -3vw annule le centrage de .portes (max-width 94vw), -1rem son padding. +6px (pas +2) : sur navigateur à barre de défilement CLASSIQUE le vw compte la barre → -3vw surestime de ~7px ; +6 garde la fissure au bord sans rognage dans les deux cas (mobile overlay : left≈6px, pile la jonction mur/tapis) */ .indice-secret{margin-left:calc(-3vw - 1rem + 6px);} } /* au doigt (tactile), les petits boutons sont plus faciles à viser */ @media (pointer:coarse){ .bouton-son{font-size:26px;padding:6px;} /* pas de survol au doigt : flèches et légende du carrousel toujours là */ #fiche[data-gabarit="wiki"] .carr-fleche{visibility:visible;} #fiche[data-gabarit="wiki"] .carr-legende{opacity:1;} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;} .tableau:hover .toile img,.tableau:hover .toile .mystere{filter:none;} .drapeau{animation:none;} /* nuages immobiles, chacun posé à sa place (--pause) dans le ciel */ .nuage{animation:none;transform:translateX(calc(var(--pause,20vw) * var(--monde-r, 1)));} .nuage svg,.nuage-yeux{animation:none;} #lakitu{display:none !important;} /* pas de survol surprise */ } /* ============================================================ PROLOGUE — « LA DESCENTE » (Lexinum). La page EST l'océan : un seul dégradé continu surface→abysses (aucune image de fond, donc aucune coupure visible quel que soit l'écran), rayons de soleil en haut, lettres flottantes, bulles pixel-art, et le Sarcophage qui s'allume tout au fond. ============================================================ */ #prologue{ overflow:hidden;color:#fff; background:linear-gradient(180deg, #c6eff4 0%, #74d4e0 4%, #35b6ce 10%, #1791b4 18%, #0d6f97 27%, #0a527b 37%, #083a60 47%, #062949 57%, #041a33 67%, #030f21 76%, #010714 85%, #000 92%, #000 100%); } /* --- les RAYONS du soleil : une nappe claire + 7 fûts de lumière inclinés qui respirent (opacité + léger balancement). Posés en haut de la page, ils sortent d'eux-mêmes de l'écran à la descente. */ #prologue .plg-rais{position:absolute;top:0;left:0;right:0;height:135vh;overflow:hidden;pointer-events:none;z-index:1;} #prologue .plg-eclat{ position:absolute;top:-32vh;left:50%;transform:translateX(-50%); width:150vw;height:85vh; background:radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0) 72%); } #prologue .plg-rai{ position:absolute;top:-14vh;height:125vh; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 74%); filter:blur(7px);transform-origin:top center; animation:plgRai var(--d,8s) ease-in-out var(--p,0s) infinite alternate; } @keyframes plgRai{ from{opacity:.22;transform:skewX(var(--k,-12deg)) translateX(-16px);} to {opacity:.65;transform:skewX(var(--k,-12deg)) translateX(16px);} } #prologue .plg-rai.r1{left:6%; width:30px; --k:-17deg;--d:9.5s;--p:-3s;} #prologue .plg-rai.r2{left:17%;width:74px; --k:-14deg;--d:7.5s;--p:-1.2s;} #prologue .plg-rai.r3{left:31%;width:44px; --k:-12deg;--d:11s; --p:-6s;} #prologue .plg-rai.r4{left:45%;width:120px;--k:-10deg;--d:8.5s;--p:-4.4s;} #prologue .plg-rai.r5{left:62%;width:56px; --k:-9deg; --d:10s; --p:-2.1s;} #prologue .plg-rai.r6{left:74%;width:96px; --k:-7deg; --d:7s; --p:-5.3s;} #prologue .plg-rai.r7{left:89%;width:38px; --k:-5deg; --d:9s; --p:-.7s;} /* --- la colonne de la descente : un « écran » par texte --- */ #prologue .plg-col{position:relative;z-index:2;display:flex;flex-direction:column;} #prologue .plg-bloc{ min-height:95vh;display:flex;align-items:center;justify-content:center; padding:0 8vw;text-align:center; } #prologue .plg-surface{min-height:96vh;align-items:flex-end;padding-bottom:7vh;} #prologue .plg-indice{ font-size:1.6rem;color:rgba(6,52,68,.75); animation:plgIndice 2.3s ease-in-out infinite; } @keyframes plgIndice{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(12px);opacity:1;}} #prologue .plg-txt{margin:0;} /* la voix de la MÈRE : italique chaleureuse, halo doux */ #prologue .plg-mere .plg-txt{ font-family:Georgia,'Times New Roman',serif;font-style:italic; font-size:clamp(26px, 4.6vw, 46px);color:#fff6e6; text-shadow:0 0 22px rgba(110,200,255,.4), 0 2px 8px rgba(0,10,30,.5); } /* la voix du SYSTÈME : petites capitales espacées, froides */ #prologue .plg-sys .plg-txt{ font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase; letter-spacing:.34em;font-size:clamp(14px, 2.2vw, 21px); color:rgba(175,226,246,.92); } #prologue .plg-sys.sombre .plg-txt{color:#0a3e53;text-shadow:0 1px 0 rgba(255,255,255,.25);} #prologue .plg-sys.rouge .plg-txt{color:#ff5148;text-shadow:0 0 16px rgba(255,60,40,.55);} #prologue .plg-sys.rouge .plg-txt::after{ content:"▮";margin-left:.5em; animation:plgClignote 1.1s steps(2,start) infinite; } #prologue .plg-bloc:not(.visible) .plg-txt::after{opacity:0;} @keyframes plgClignote{to{visibility:hidden;}} /* --- lettres : révélation en cascade (--i) + houle infinie (--dur/--ph). Deux spans imbriqués : le même élément ne peut pas transitionner ET animer transform. Mots insécables (leçon du titre de la galerie). */ #prologue .plg-mot{display:inline-block;white-space:nowrap;} #prologue .plg-lettre{ display:inline-block;opacity:0;transform:translateY(14px); transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i)*.055s); } #prologue .plg-bloc.visible .plg-lettre{opacity:1;transform:none;} #prologue .plg-flot{ display:inline-block; animation:plgFlotte var(--dur,3s) ease-in-out var(--ph,0s) infinite alternate; } @keyframes plgFlotte{ from{transform:translateY(-.13em) rotate(-1.3deg);} to {transform:translateY(.13em) rotate(1.3deg);} } /* l'étoile cachée du prologue (10 bulles) : lueur dorée pulsante, curseur main. Sélecteur SANS #prologue car elle est posée sur (le transform:scale de sceneIn ferait de #prologue un bloc conteneur → une étoile fixed y défilerait comme la page ; sur body elle est vraiment fixe à l'écran, owner 2026-07-14). */ .plg-etoile{ position:fixed;z-index:600;width:52px;height:52px;cursor:pointer; filter:drop-shadow(0 0 12px rgba(255,210,60,.85)); animation:plgEtoilePulse 1.6s ease-in-out infinite; } .plg-etoile:hover,.plg-etoile:focus-visible{ filter:drop-shadow(0 0 18px rgba(255,230,120,1));outline:none; } @keyframes plgEtoilePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}} /* le SYSTÈME ne flotte PAS (owner 2026-07-14) : à la place, un BALAYAGE de gauche à droite en boucle façon chargement — chaque lettre s'allume puis s'éteint, la vague parcourt le texte (délai négatif décalé par lettre : (--i − 40) garde tous les délais négatifs, donc la vague est déjà en route à l'arrivée, et va bien de gauche à droite). */ #prologue .plg-sys .plg-flot{ animation:plgBalaye 3s linear infinite; animation-delay:calc((var(--i) - 40)*.09s); } @keyframes plgBalaye{ 0%{opacity:.16;} 10%{opacity:1;} 28%{opacity:.16;} 100%{opacity:.16;} } /* --- BULLES pixel-art (dessinées en box-shadow : 1em = 1 pixel, la taille du pixel = font-size posée par le JS). Le conteneur 8em sert de zone de clic ; le dessin vit sur ::before. Sélecteurs SANS #prologue depuis 2026-07-14 : la FICHE de Lexinum réutilise le même calque + la même boucle (initBullesPrologue). --- */ .plg-bulles{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;} /* calque DERRIÈRE le texte (fiche Lexinum) : z-index 0 = devant le fond marin (body::before) mais SOUS la boîte (z-index 1) → certaines bulles passent derrière le texte. Légèrement estompées pour la profondeur. */ .plg-bulles-fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .plg-bulles-fond .plg-bulle{opacity:.6;filter:blur(.4px);} .plg-bulle{ position:absolute;left:0;top:0;width:8em;height:8em; pointer-events:auto;cursor:pointer;will-change:transform; } .plg-bulle::before{ content:"";position:absolute;left:0;top:0;width:1em;height:1em;background:transparent; box-shadow: 2em 0 rgba(214,242,255,.8), 3em 0 rgba(214,242,255,.8), 4em 0 rgba(214,242,255,.8), 5em 0 rgba(214,242,255,.8), 1em 1em rgba(214,242,255,.8), 6em 1em rgba(214,242,255,.8), 0 2em rgba(214,242,255,.8), 7em 2em rgba(214,242,255,.8), 0 3em rgba(214,242,255,.8), 7em 3em rgba(214,242,255,.8), 0 4em rgba(214,242,255,.8), 7em 4em rgba(214,242,255,.8), 0 5em rgba(214,242,255,.8), 7em 5em rgba(214,242,255,.8), 1em 6em rgba(214,242,255,.8), 6em 6em rgba(214,242,255,.8), 2em 7em rgba(214,242,255,.8), 3em 7em rgba(214,242,255,.8), 4em 7em rgba(214,242,255,.8), 5em 7em rgba(214,242,255,.8), 2em 2em rgba(255,255,255,.95), 2em 3em rgba(255,255,255,.95); } /* pop : la bulle éclate en 4 éclats aux coins puis disparaît */ .plg-bulle.pop{pointer-events:none;} .plg-bulle.pop::before{ box-shadow: -1em -1em rgba(255,255,255,.95), 8em -1em rgba(255,255,255,.95), -1em 8em rgba(255,255,255,.95), 8em 8em rgba(255,255,255,.95), 3.5em -2em rgba(214,242,255,.8), -2em 3.5em rgba(214,242,255,.8), 9em 3.5em rgba(214,242,255,.8), 3.5em 9em rgba(214,242,255,.8); animation:plgPop .28s ease forwards; } @keyframes plgPop{to{opacity:0;transform:scale(1.35);}} /* --- le FINAL : noir absolu, le Sarcophage couché sur le sable (image LÉGÈREMENT DE BIAIS, owner 2026-07-14) se révèle et s'allume. Le bouton « S'éveiller » est AU-DESSUS de l'image et le fond marin termine (presque) la page : justify-end + petit padding-bas. --- */ #prologue .plg-fin{ min-height:150vh;flex-direction:column;justify-content:flex-end; gap:2.6rem;padding-bottom:3vh; } #prologue .plg-sarco{position:relative;width:min(92vw,780px);margin:0 0 6vh;} #prologue .plg-sarco img{ width:100%;display:block; opacity:0;filter:brightness(.22) saturate(.55); transform:rotate(-4deg) scale(.96); transition:opacity 2.2s ease, filter 2.8s ease, transform 2.8s ease; /* ESTOMPE DES BORDS (owner 2026-07-14) : le noir ajouté à la main autour de l'image formait un rectangle dont une algue lumineuse derrière révélait le bord droit. On fond les ~3,5 % extérieurs vers transparent (contenu réel mesuré à 4-6 % des bords → jamais rogné) : plus aucun bord droit, l'image se dissout dans le noir. Deux dégradés croisés (X et Y) intersectés = un cadre estompé sur les 4 côtés. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-composite:intersect; } #prologue .plg-fin.allume .plg-sarco img{opacity:1;filter:none;transform:rotate(-4deg);} #prologue .plg-fin.allume .plg-sarco{animation:plgTremble .9s ease .35s;} /* --- le FOND MARIN en relief : monticules + rochers + algues (svg inline, silhouettes remplies d'un dégradé « éclairé de rouge par le haut ») — quasi invisibles dans le noir, ils s'ILLUMINENT avec le Sarcophage. L'ordre DOM fait la profondeur : svg fond DERRIÈRE l'image, svg avant DEVANT (la dune couche le Sarcophage dans le sable), lueur par-dessus tout (screen : elle rougit aussi les rochers en pulsant). --- */ #prologue .plg-decor{ position:absolute;left:50%;transform:translateX(-50%); pointer-events:none;opacity:.15;transition:opacity 2.6s ease .5s; } #prologue .plg-decor-fond{bottom:1%;width:138%;} #prologue .plg-decor-avant{bottom:-11%;width:142%;} #prologue .plg-fin.allume .plg-decor{opacity:1;} /* les algues ondulent doucement, chacune à son rythme */ #prologue .plg-algue{ transform-box:fill-box;transform-origin:50% 100%; animation:plgAlgue 5.6s ease-in-out infinite alternate; } #prologue .plg-algue.a2{animation-duration:7.2s;animation-delay:-2s;} #prologue .plg-algue.a3{animation-duration:6.4s;animation-delay:-1s;} #prologue .plg-algue.a4{animation-duration:6.8s;animation-delay:-3s;} #prologue .plg-algue.a5{animation-duration:5.2s;animation-delay:-1.6s;} #prologue .plg-algue.a6{animation-duration:7.8s;animation-delay:-2.6s;} @keyframes plgAlgue{from{transform:rotate(-2.4deg);}to{transform:rotate(2.4deg);}} /* lueur rouge posée PAR-DESSUS en mode screen : le noir de l'image reste noir (bords invisibles), seul le rouge s'ajoute — jamais de halo derrière (il révélerait le rectangle de l'image). Centrée sur le casque (centre-gauche de prologue-sarcophage.jpg). */ #prologue .plg-lueur{ position:absolute;left:45%;top:40%;width:115%;aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(closest-side, rgba(255,58,30,.45), transparent 68%); mix-blend-mode:screen;filter:blur(12px);opacity:0;transition:opacity 2.4s ease .6s; } #prologue .plg-fin.allume .plg-lueur{opacity:1;animation:plgLueur 3.4s ease-in-out 3s infinite alternate;} @keyframes plgLueur{from{opacity:.55;}to{opacity:1;}} @keyframes plgTremble{ 0%,100%{transform:none;} 12%{transform:translate(3px,-2px);} 25%{transform:translate(-3px,2px);} 37%{transform:translate(2px,2px);} 50%{transform:translate(-2px,-3px);} 62%{transform:translate(3px,1px);} 75%{transform:translate(-1px,2px);} 87%{transform:translate(1px,-1px);} } /* le bouton d'éveil apparaît une fois le Sarcophage allumé */ #prologue .plg-eveil{ font-family:'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase; font-size:clamp(14px,1.8vw,18px); background:rgba(22,4,2,.55);color:#ffb4a6; border:1px solid rgba(255,90,60,.55);border-radius:999px; padding:.9em 2.2em;cursor:pointer; opacity:0;visibility:hidden;pointer-events:none; transition:opacity 1.2s ease 1.6s, background .2s ease, color .2s ease; } #prologue .plg-fin.allume .plg-eveil{opacity:1;visibility:visible;pointer-events:auto;} #prologue .plg-eveil:hover,#prologue .plg-eveil:focus-visible{ background:rgba(70,12,5,.75);color:#fff;outline:none; } /* « Passer » : discret, toujours accessible */ #prologue .plg-passer{ position:fixed;top:1rem;right:1.2rem;z-index:6; font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;letter-spacing:.06em; color:rgba(255,255,255,.85);background:rgba(5,20,35,.42); border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.5em 1.1em; cursor:pointer;backdrop-filter:blur(3px); } #prologue .plg-passer:hover,#prologue .plg-passer:focus-visible{background:rgba(5,20,35,.72);outline:none;} @media (max-width:720px){ #prologue .plg-bloc{padding:0 6vw;} #prologue .plg-sys .plg-txt{letter-spacing:.22em;} #prologue .plg-sarco{width:92vw;} #prologue .plg-passer{top:.7rem;right:.7rem;font-size:.8rem;} } @media (prefers-reduced-motion: reduce){ /* textes visibles d'office, houle/rais/secousse coupés (les bulles ne démarrent pas côté JS) */ #prologue .plg-lettre{opacity:1;transform:none;transition:none;} #prologue .plg-flot,#prologue .plg-rai,#prologue .plg-indice{animation:none;} #prologue .plg-fin.allume .plg-sarco{animation:none;} } /* ============================================================ FICHE LEXINUM — mise en scène sur-mesure (data-perso="lexinum", PAS le gabarit wiki). Boîte unique à angles CARRÉS 1px blanc, légèrement transparente sur le fond marin FIXE (fond-page.jpg — via body:has() : un calque fixé dans la scène serait piégé par le transform de sceneIn). Texte Abyssinica SIL blanc cassé justifié ; titres ROUILLE en vrai texte ; équipement interactif. ============================================================ */ /* le fond marin, vraiment FIXE derrière tout (profondeur : la boîte défile par-dessus) + voile sombre pour la lisibilité des marges */ body:has(#fiche.active[data-perso="lexinum"])::before{ content:"";position:fixed;inset:0;z-index:0; background:#04141a url("../images/Lexinum/fond-page.jpg") center/cover no-repeat; } #fiche[data-perso="lexinum"]{ background:transparent; /* laisse voir le calque fixe ci-dessus */ color:#f2efe6; font-family:'Abyssinica SIL', Georgia, serif; /* PAS d'animation d'entrée ici (owner 2026-07-14) : le transform de sceneIn ferait de #fiche un bloc conteneur/contexte d'empilement → le calque de bulles « fond » (body, z-0) ne pourrait plus passer SOUS la boîte. Sans transform, la boîte (z-index:1) s'empile bien dans le contexte du body. */ animation:none; } /* la boîte AU-DESSUS du calque de bulles-fond (z-0) mais SOUS le calque de devant (z-3) → l'effet « certaines bulles derrière le texte » */ #fiche[data-perso="lexinum"] .boite-fiche{position:relative;z-index:1;} #fiche[data-perso="lexinum"] .fiche-conteneur{ position:relative;z-index:1;max-width:1040px; } /* LA boîte : angles carrés, 1px blanc, fond sombre translucide */ #fiche[data-perso="lexinum"] .boite-fiche{ border:1px solid rgba(255,255,255,.85);border-radius:0; background:rgba(3,15,20,.6); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); } #fiche[data-perso="lexinum"] .boite-int{ padding:2.4rem clamp(1rem,4.5vw,3.4rem) 3.2rem; } /* cadres internes (portrait, table, titre du sarcophage, carte) */ #fiche[data-perso="lexinum"] .lx-cadre{ border:1px solid rgba(255,255,255,.8); background:rgba(0,6,9,.38); } /* --- TITRES ROUILLE : Cinzel penché lettre à lettre, texture rouille (background-clip:text), bords rongés (#fRouille), lueur verdâtre, flottement doux (spans imbriqués : penche/texture sur la lettre, houle sur le flot — un élément ne peut pas cumuler les deux). --- */ #fiche[data-perso="lexinum"] .lx-titre{ font-family:'Cinzel','Abyssinica SIL',serif;font-weight:700; text-transform:uppercase;letter-spacing:.16em; text-align:center;margin:0 0 .4rem; filter:url(#fRouille) drop-shadow(0 0 9px rgba(130,255,150,.16)) drop-shadow(3px 5px 4px rgba(0,0,0,.6)); } #fiche[data-perso="lexinum"] h1.lx-titre{font-size:clamp(34px,6vw,58px);margin-bottom:1.1rem;} #fiche[data-perso="lexinum"] h2.lx-titre{font-size:clamp(24px,3.6vw,38px);} #fiche[data-perso="lexinum"] .lx-mot{display:inline-block;white-space:nowrap;} #fiche[data-perso="lexinum"] .lx-lettre{ display:inline-block;transform:rotate(var(--pench,0deg)); } #fiche[data-perso="lexinum"] .lx-flot{ display:inline-block; background: radial-gradient(9px 7px at 30% 30%, rgba(214,120,50,.85), transparent 70%), radial-gradient(7px 9px at 70% 65%, rgba(150,60,25,.9), transparent 70%), radial-gradient(5px 5px at 50% 85%, rgba(90,30,12,.9), transparent 75%), linear-gradient(165deg,#59301a 0%,#7c4420 16%,#3a1e10 34%,#8a4a1e 50%,#2c130a 66%,#6b3517 82%,#40200f 100%); -webkit-background-clip:text;background-clip:text;color:transparent; animation:lxFlotte var(--dur,4s) ease-in-out var(--ph,0s) infinite alternate; } @keyframes lxFlotte{ from{transform:translateY(-.05em);} to {transform:translateY(.05em);} } /* titres de sections alternés gauche/droite (Équipement = à droite, comme sur la capture Wix) ; le grand titre LEXINUM reste centré */ #fiche[data-perso="lexinum"] .lx-section:nth-of-type(odd) .lx-titre{text-align:left;} #fiche[data-perso="lexinum"] .lx-section:nth-of-type(even) .lx-titre{text-align:right;} /* filet blanc sous chaque titre + double filet d'en-tête */ #fiche[data-perso="lexinum"] .lx-filet{ height:1px;background:rgba(255,255,255,.75);margin:0 0 1.4rem; } #fiche[data-perso="lexinum"] .lx-double{ height:6px;border-top:1px solid rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.85); margin:0 0 1.6rem; } /* --- en-tête : portrait + table de profil (cadres collés) --- */ /* les HUBLOTS respirent : un halo chaud pulse doucement autour du portrait (écho de la lueur qui s'échappe du casque), owner 2026-07-14 */ #fiche[data-perso="lexinum"] .lx-portrait{ position:relative;overflow:hidden; animation:lxHublots 3.6s ease-in-out infinite; } #fiche[data-perso="lexinum"] .lx-portrait::after{ content:"";position:absolute;left:50%;top:44%; width:62%;aspect-ratio:1;transform:translate(-50%,-50%); /* couleur pilotée par --hublot (l'easter-egg des hublots la fait varier bleu→vert→rouge→or au clic), défaut = la lueur chaude neutre */ background:radial-gradient(closest-side, var(--hublot, rgba(255,120,40,.28)), transparent 70%); mix-blend-mode:screen;pointer-events:none; animation:lxHublotsCoeur 3.6s ease-in-out infinite; } /* « SISTA » cachée-cliquable dans le texte du Compagnon : discrète, un soupçon de lueur au survol pour qui s'y attarde (easter-egg de l'étoile) */ #fiche[data-perso="lexinum"] .lx-sista{ cursor:pointer;transition:text-shadow .2s ease, color .2s ease; } #fiche[data-perso="lexinum"] .lx-sista:hover, #fiche[data-perso="lexinum"] .lx-sista:focus-visible{ color:#cfe6ff;text-shadow:0 0 10px rgba(150,210,255,.7);outline:none; } @keyframes lxHublots{ 0%,100%{box-shadow:inset 0 0 0 rgba(255,110,35,0);} 50%{box-shadow:inset 0 0 40px rgba(255,110,35,.32);} } @keyframes lxHublotsCoeur{0%,100%{opacity:.45;}50%{opacity:1;}} #fiche[data-perso="lexinum"] .lx-portrait img{width:100%;display:block;position:relative;} #fiche[data-perso="lexinum"] .lx-table{margin-top:-1px;padding:.6rem 0 1rem;} #fiche[data-perso="lexinum"] .lx-table-titre{ text-align:center;font-weight:bold;font-size:1.25rem;letter-spacing:.04em; padding:.5rem 0 .55rem;margin:0 6% .35rem; border-bottom:1px solid rgba(255,255,255,.75); } #fiche[data-perso="lexinum"] .lx-rang{ display:grid;grid-template-columns:1fr 1fr; margin:0 12%;padding:.55rem 0 .6rem; border-bottom:1px solid rgba(255,255,255,.45); } #fiche[data-perso="lexinum"] .lx-rang:last-child{border-bottom:none;} #fiche[data-perso="lexinum"] .lx-rang span{text-align:center;} #fiche[data-perso="lexinum"] .lx-rang span:first-child{font-weight:bold;} /* --- corps de texte --- */ #fiche[data-perso="lexinum"] .lx-intro{margin-top:2rem;} #fiche[data-perso="lexinum"] .lx-section{margin-top:2.6rem;} #fiche[data-perso="lexinum"] .lx-corps{display:flow-root;} #fiche[data-perso="lexinum"] .lx-corps p{ margin:0 0 1.05em;font-size:19px;line-height:1.62; text-align:justify;word-spacing:.12em; color:#f2efe6; } /* le sprite pixel-art de l'équipement, flottant à gauche de l'intro */ #fiche[data-perso="lexinum"] .lx-sprite{ float:left;width:clamp(84px,12vw,120px);margin:0 1.2rem .5rem 0; image-rendering:pixelated; } /* --- ÉQUIPEMENT interactif --- */ #fiche[data-perso="lexinum"] .lx-sarco-titre{ text-align:center;font-weight:bold;font-size:1.3rem;letter-spacing:.03em; padding:.7rem 1rem;margin:1.4rem 0 1.6rem; } #fiche[data-perso="lexinum"] .lx-sarco{ position:relative;width:min(100%,640px);margin:0 auto; } /* SECOUSSE de la valve (owner 2026-07-14) : à chaque clic sur le réservoir la zone tremble, de plus en plus fort (--secousse posée par le JS). */ #fiche[data-perso="lexinum"] .lx-sarco.lx-tremble{animation:lxSecousse .3s ease;} @keyframes lxSecousse{ 0%,100%{transform:translate(0,0);} 15%{transform:translate(calc(var(--secousse,3px)*-1), var(--secousse,3px));} 30%{transform:translate(var(--secousse,3px), calc(var(--secousse,3px)*-.8));} 45%{transform:translate(calc(var(--secousse,3px)*-.7), calc(var(--secousse,3px)*.5));} 60%{transform:translate(calc(var(--secousse,3px)*.6), calc(var(--secousse,3px)*-.4));} 80%{transform:translate(calc(var(--secousse,3px)*-.3), calc(var(--secousse,3px)*.2));} } #fiche[data-perso="lexinum"] .lx-sarco-img{width:100%;display:block;} #fiche[data-perso="lexinum"] .lx-zone{ position:absolute;background:transparent; border:1px solid rgba(255,255,255,.75);border-radius:0; cursor:pointer;padding:0; /* survol INSTANTANÉ (pas de transition) : le panneau de preview fige les transitions, ce qui masquait le fond ambré au survol (owner 2026-07-14) */ } /* survol/sélection : la zone s'illumine en JAUNE CHAUD (la lueur des hublots de Lexinum), owner 2026-07-14 */ #fiche[data-perso="lexinum"] .lx-zone:hover, #fiche[data-perso="lexinum"] .lx-zone:focus-visible, #fiche[data-perso="lexinum"] .lx-zone.actif{ background:rgba(255,190,70,.16); border-color:rgba(255,205,90,.9); box-shadow:0 0 16px rgba(255,175,50,.5), inset 0 0 22px rgba(255,180,60,.18); outline:none; } #fiche[data-perso="lexinum"] .lx-sarco-carte{ margin:1.4rem auto 0;max-width:640px; padding:.9rem 1.2rem 1rem;min-height:7.5em; } #fiche[data-perso="lexinum"] .lx-sarco-carte h3{ margin:0 0 .45rem;font-size:1.15rem;letter-spacing:.03em; font-family:'Abyssinica SIL',Georgia,serif;font-weight:bold; } #fiche[data-perso="lexinum"] .lx-sarco-carte p{ margin:0;font-size:17px;line-height:1.55;text-align:justify; } /* la barre de nav reste lisible sur le fond marin */ /* la barre reste STICKY (héritée de .barre) : elle suit le défilement. z-index au-dessus des bulles (3) et du fond marin fixe (0) — base .barre = 50, largement suffisant ; NE PAS repasser en position:relative (ça figeait la barre en haut de la page, owner 2026-07-14). */ @media (max-width:720px){ #fiche[data-perso="lexinum"] .fiche-conteneur{padding:0 0 3rem;} #fiche[data-perso="lexinum"] .boite-int{padding:1.4rem .9rem 2.4rem;} #fiche[data-perso="lexinum"] .lx-corps p{font-size:17px;} #fiche[data-perso="lexinum"] .lx-rang{margin:0 4%;} #fiche[data-perso="lexinum"] .lx-table-titre{margin:0 2% .35rem;} #fiche[data-perso="lexinum"] .lx-titre{letter-spacing:.1em;} } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="lexinum"] .lx-flot{animation:none;} } /* --- retouches fiche Lexinum (owner 2026-07-14) --- */ /* SOMMAIRE à gauche de l'intro : 2 colonnes (sommaire fixe + texte) */ #fiche[data-perso="lexinum"] .lx-haut{ display:grid;grid-template-columns:minmax(220px,270px) 1fr; gap:clamp(1.2rem,3vw,2.4rem);align-items:start;margin-top:2rem; } #fiche[data-perso="lexinum"] .lx-intro{margin-top:0;} #fiche[data-perso="lexinum"] .lx-sommaire{padding:1rem 1.1rem 1.4rem;} #fiche[data-perso="lexinum"] .lx-sommaire .lx-titre{ font-size:clamp(20px,2.4vw,28px);margin:0 0 1rem;text-align:center; } #fiche[data-perso="lexinum"] .lx-sommaire ul{list-style:none;margin:0;padding:0;} #fiche[data-perso="lexinum"] .lx-sommaire li{text-align:center;margin:.7rem 0;} #fiche[data-perso="lexinum"] .lx-som-lien{ background:none;border:none;padding:.15rem .3rem;cursor:pointer; font-family:'Abyssinica SIL',Georgia,serif;font-size:18px;font-weight:bold; color:#f2efe6;letter-spacing:.02em;transition:color .15s ease, text-shadow .15s ease; } #fiche[data-perso="lexinum"] .lx-som-lien:hover, #fiche[data-perso="lexinum"] .lx-som-lien:focus-visible{ color:#ffd23f;text-shadow:0 0 10px rgba(255,210,60,.5);outline:none; } #fiche[data-perso="lexinum"] .lx-som-lien:active{color:#e0913a;} /* NOTES en liste à PUCES CARRÉES (thème) */ #fiche[data-perso="lexinum"] .lx-liste{ list-style:none;margin:0;padding:0; } #fiche[data-perso="lexinum"] .lx-liste li{ position:relative;padding-left:1.7em;margin:0 0 1.05em; font-size:19px;line-height:1.62;text-align:justify;color:#f2efe6; } #fiche[data-perso="lexinum"] .lx-liste li::before{ content:"";position:absolute;left:.15em;top:.55em; width:.5em;height:.5em;background:#f2efe6; /* puce carrée */ box-shadow:0 0 6px rgba(180,240,255,.4); } /* GIF de l'équipement CENTRÉ VERTICALEMENT avec le texte à droite */ #fiche[data-perso="lexinum"] .lx-corps-equip{ display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.6rem); } #fiche[data-perso="lexinum"] .lx-corps-equip .lx-sprite{ float:none;margin:0;flex:0 0 auto;width:clamp(90px,13vw,130px); } #fiche[data-perso="lexinum"] .lx-corps-txt{flex:1;min-width:0;} #fiche[data-perso="lexinum"] .lx-corps-txt p:last-child{margin-bottom:0;} @media (max-width:720px){ #fiche[data-perso="lexinum"] .lx-haut{grid-template-columns:1fr;} #fiche[data-perso="lexinum"] .lx-corps-equip{flex-direction:column;text-align:center;} #fiche[data-perso="lexinum"] .lx-corps-txt{text-align:justify;} #fiche[data-perso="lexinum"] .lx-liste li{font-size:17px;} } /* ===== PASSAGE SECRET Lexinum → Toad (owner 2026-07-14, 3 déclencheurs à l'essai — en garder un, supprimer les autres après choix owner) ===== */ /* (A) « ça arrive » : posé dans le noir SOUS la boîte, quasi invisible — il ne se devine qu'au survol (lente montée de lueur) */ #fiche[data-perso="lexinum"] .lx-echo{ position:relative;z-index:1;display:block; /* PETIT et poussé à DROITE (dans les algues du fond), peu d'espace en bas */ margin:2.2rem 3vw .5rem auto; background:none;border:none;padding:0;cursor:pointer; width:min(22vw,96px); opacity:.05;filter:brightness(.45) saturate(.6); /* à 5 % (owner) */ transition:opacity .8s ease, filter .8s ease; } #fiche[data-perso="lexinum"] .lx-echo:hover, #fiche[data-perso="lexinum"] .lx-echo:focus-visible{ opacity:.55;filter:brightness(.85);outline:none; } #fiche[data-perso="lexinum"] .lx-echo img{width:100%;display:block;} /* (B) le « Nom : Inconnu » qui ment : frémissement d'une seconde au 3e clic */ #fiche[data-perso="lexinum"] .lx-ment{ display:inline-block;animation:lxMent .7s ease; } @keyframes lxMent{ 0%,100%{transform:none;filter:none;} 20%{transform:translateX(-2px) skewX(-6deg);filter:blur(1px);} 40%{transform:translateX(2px) skewX(5deg);} 60%{transform:translateX(-1px);filter:blur(1.5px);} 80%{transform:translateX(1px) skewX(-3deg);filter:blur(.5px);} } /* (C) extinction des hublots : le portrait s'éteint (noir total, halo coupé) puis DEUX YEUX s'ouvrent dans le noir — ceux de Toad */ #fiche[data-perso="lexinum"] .lx-portrait.lx-noir{animation:none;} #fiche[data-perso="lexinum"] .lx-portrait.lx-noir::after{opacity:0;animation:none;} #fiche[data-perso="lexinum"] .lx-portrait.lx-noir img{ filter:brightness(0);transition:filter 1s ease; } #fiche[data-perso="lexinum"] .lx-yeux{ position:absolute;left:50%;top:42%;width:92px;height:28px; transform:translate(-50%,-50%);pointer-events:none;z-index:2; background: radial-gradient(11px 14px at 26% 50%, #fff 0 42%, rgba(255,255,255,0) 72%), radial-gradient(11px 14px at 74% 50%, #fff 0 42%, rgba(255,255,255,0) 72%); opacity:0;animation:lxYeux .9s ease forwards; } @keyframes lxYeux{ from{opacity:0;transform:translate(-50%,-50%) scaleY(.08);} 60% {opacity:1;transform:translate(-50%,-50%) scaleY(1.06);} to {opacity:1;transform:translate(-50%,-50%) scaleY(1);} } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="lexinum"] .lx-ment{animation:none;} #fiche[data-perso="lexinum"] .lx-yeux{animation:none;opacity:1;} } /* ============================================================ FICHE ACERIUS — façon Baldur's Gate 3, MISE EN PAGE AU PIXEL d'après les mesures Wix de l'owner (zone de travail 980px, valeurs relevées le 2026-07-15). La « PLANCHE » .ac-planche = le canevas 980 : container-type:inline-size et TOUS les blocs posés en ABSOLU en cqw (1cqw = 9.8px à taille pleine → une valeur Wix de X px s'écrit (X/9.8)cqw) → tout se réduit proportionnellement sous 980px ; ≤720px = flux empilé simple (passe responsive fine plus tard, comme les halls). Palette : titre #880808 · voix #AD0A0A · clés #B2907E · valeurs crème #f1e8d4. Texte = Alegreya (substitut Quadraat). ============================================================ */ @font-face{ font-family:'Quadraat'; /* la VRAIE police de BG3, fournie par l'owner (Desktop/Acerius/quadraat.ttf) 2026-07-15 */ src:url("../fonts/Quadraat.ttf") format("truetype"); font-display:swap; } #fiche[data-perso="acerius"]{ --ac-serif:"Quadraat", Georgia, "Times New Roman", serif; --ac-rouge:#880808; --ac-gold:#B2907E; --ac-creme:#f1e8d4; background:#000; font-family:var(--ac-serif); color:#e2d5b8; } body:has(#fiche.active[data-perso="acerius"]){ background:#000; } /* le conteneur générique est bridé à 900px → élargi pour loger la planche (1080 : ses propres paddings mangeaient 2px sur les 980 de la planche) */ #fiche[data-perso="acerius"] .fiche-conteneur{ max-width:1080px; } #fiche[data-perso="acerius"] .boite-fiche{ max-width:1012px; /* 980 + les 2×1rem de padding */ margin:0 auto; padding:0 1rem 4rem; } /* ---- LA PLANCHE (canevas Wix 980px) ---- */ .ac-planche{ position:relative; width:min(980px, 100%); margin:0 auto; container-type:inline-size; aspect-ratio:980/2930; /* le contenu finit à y=2919 */ } .ac-planche > *{ position:absolute; margin:0; } /* TITRE (Wix 190,17 · 600×248 · police 150px) — centré dans sa boîte */ .ac-titre{ left:19.39cqw; top:1.73cqw; width:61.22cqw; height:25.31cqw; display:flex; align-items:center; justify-content:center; font-family:'Beastform', cursive; font-weight:400; color:var(--ac-rouge); font-size:15.31cqw; letter-spacing:.05em; text-shadow:0 0 34px rgba(136,8,8,.5); } /* LE DESSIN QUI MURMURE (Wix 38,277 · 904×543) — le fondu noir des bords est CUIT dans les deux jpg (scratchpad/FondNoir.ps1) */ .ac-slayer{ left:3.88cqw; top:28.27cqw; width:92.24cqw; outline:none; } .ac-slayer img{ display:block; width:100%; height:auto; } .ac-slayer .ac-slayer-voix{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 1.25s ease; } .ac-slayer:hover .ac-slayer-voix, .ac-slayer:focus-visible .ac-slayer-voix{ opacity:1; animation:acVoixRespire 3.4s ease-in-out 1.3s infinite; } @keyframes acVoixRespire{ 0%,100%{opacity:1} 50%{opacity:.84} } /* vignette rouge qui BAT comme un cœur pendant que les voix parlent. ⚠ elle REDESCEND à transparent AVANT le bord (owner 2026-07-15 : c'était ELLE le « fondu qui marchait pas » — en éclaircissant/rougissant jusqu'au bord, elle révélait le rectangle de l'image) → pic à 80 %, transparent à 100 % : le rouge ne touche jamais l'arête. */ .ac-slayer::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 42%, rgba(110,4,8,.5) 80%, transparent 100%); opacity:0; transition:opacity 1.25s ease; } .ac-slayer:hover::after, .ac-slayer:focus-visible::after{ opacity:1; animation:acCoeur 2.4s ease-in-out infinite; } @keyframes acCoeur{ 0%,100%{opacity:.5} 11%{opacity:1} 22%{opacity:.58} 32%{opacity:.92} 52%{opacity:.5} } /* VOIX DE LA REINE (Wix 85,915 · 809 de large · police 50 · interligne 1.4) */ .ac-voix-mere{ left:8.67cqw; top:93.37cqw; width:82.55cqw; font-family:'En Garde', serif; font-weight:700; color:#AD0A0A; font-size:5.10cqw; line-height:1.4; letter-spacing:.1em; text-align:center; text-shadow:2px 2px 1px rgba(206,196,184,.42); } /* ORNEMENT Selected_Decor_Top (Wix 307,1271 · 365×57) — centré au pixel entre la voix et les panneaux (gaps 74/74 au lieu de 76/72, owner) */ .ac-ornement{ left:31.33cqw; top:129.49cqw; width:37.24cqw; } .ac-ornement img{ display:block; width:100%; height:auto; } /* ---- PANNEAU PROFIL (Wix 40,1400 · 445×695) ---- */ .ac-profil{ left:4.08cqw; top:142.86cqw; width:45.41cqw; height:70.92cqw; background:url("../images/Acerius/UI/overPane_appearance.png") center/100% 100% no-repeat; } .ac-profil > *{ position:absolute; margin:0; } /* plaque du nom (Wix 108,1431 · 309×81) — nom en gras */ .ac-plaque-nom{ left:6.94cqw; top:3.16cqw; width:31.53cqw; height:8.27cqw; display:flex; align-items:center; justify-content:center; background:url("../images/Acerius/UI/btn_namegroupBG_01.png") center/100% 100% no-repeat; color:var(--ac-creme); font-weight:700; font-size:2.35cqw; letter-spacing:.06em; } /* boîte des surnoms (Wix 73,1513 · 378×150) = generic_bg.png ÉTIRÉE dans sa boîte, comme sur Wix (confirmé owner 2026-07-15 — plus de border-image). Dedans, positions Wix exactes : label 107,1542 (83×27, 20px CENTRÉ, #B2907E) · texte des surnoms 301,1542 (116 de large, 20px, interligne 1.3, UN SEUL texte) · 2 icônes ico_subtab_d à x277 (17×20), y1546 et y1573 */ .ac-surnoms{ left:3.37cqw; top:11.53cqw; width:38.57cqw; height:15.31cqw; /* generic_bg_trim = generic_bg SANS ses 12px de marge transparente (owner 2026-07-15) → le cadre doré remplit la boîte et ses bords gauche/droit s'alignent VERTICALEMENT avec la boîte race/genre en dessous (même left 3.37cqw, même width 38.57cqw) ; ça aère le texte */ background:url("../images/Acerius/UI/generic_bg_trim.png") center/100% 100% no-repeat; font-size:2.04cqw; } .ac-surnoms .ac-cle{ position:absolute; left:3.47cqw; top:2.96cqw; width:8.47cqw; text-align:center; line-height:2.755cqw; } .ac-surnoms-texte{ position:absolute; left:23.27cqw; top:2.96cqw; width:11.84cqw; color:#fff; font-size:2.04cqw; line-height:1.3; /* aligné à GAUCHE → les 2 surnoms COMMENCENT au même x (parfait pour les icônes ✦), et le bloc est borné à x417 = la zone droite des valeurs du profil (owner 2026-07-15 ; le « les deux bords alignés » exact imposerait un justify qui écarte trop les mots courts) */ text-align:left; } .ac-surnom-ico{ position:absolute; left:20.82cqw; width:1.73cqw; height:2.04cqw; object-fit:contain; } .ac-surnom-ico-1{ top:3.37cqw; } .ac-surnom-ico-2{ top:6.12cqw; } /* têtes « Profil » (Wix y1674) / « Nen » (y1963) + volutes (119/322, centrées verticalement sur le titre) */ .ac-tete{ left:0; right:0; text-align:center; font-family:var(--ac-serif); font-weight:700; color:var(--ac-creme); font-size:2.35cqw; line-height:3.37cqw; letter-spacing:.03em; } .ac-tete-profil{ top:27.96cqw; } .ac-tete-nen{ top:57.45cqw; } .ac-vol{ position:absolute; top:50%; transform:translateY(-50%); width:8.57cqw; height:auto; opacity:.95; } .ac-vol-g{ left:8.06cqw; } .ac-vol-d{ left:28.78cqw; } /* boîte des infos (Wix 73,1731 · 378×208, texte à 107/1742 → padding 34/11 ; 7 rangées sur 186px → interligne 26.6px) — noir 50 %, angles 10px */ .ac-rangs{ left:3.37cqw; top:33.78cqw; width:38.57cqw; height:21.22cqw; padding:1.12cqw 3.47cqw; background:rgba(0,0,0,.5); border-radius:1.02cqw; } .ac-rang{ display:flex; justify-content:space-between; align-items:center; font-size:2.04cqw; line-height:2.71cqw; } /* libellés (Race, Genre, Type, Surnoms…) : 20px GRAS #B2907E (owner) */ .ac-cle{ color:var(--ac-gold); font-weight:700; } /* valeurs (Fourmi-Chimère…) : 20px BLANC, alignées à droite (owner). gap RÉDUIT (owner 2026-07-15 : rapprocher les icônes ♂/poing/étoile de leur texte) */ .ac-val{ color:#fff; display:flex; align-items:center; justify-content:flex-end; gap:.12em; text-align:right; } .ac-ico{ height:1.15em; width:auto; display:inline-block; flex:none; } /* Type/Hatsu (Wix texte 2011, 2 rangées sur 62px → interligne 31px), sans fond */ .ac-rangs-nen{ top:62.35cqw; height:auto; background:none; border-radius:0; padding:0 3.47cqw; } .ac-rangs-nen .ac-rang{ line-height:3.16cqw; } /* ---- PANNEAU APPARENCE (Wix 495,1422 · 445×650) — ÉTENDU vers la gauche (owner 2026-07-15 : bord droit inchangé à 940, on gagne ~13px à gauche pour l'agrandir un peu sans chevaucher le profil qui finit à 485) ---- */ .ac-apparence{ left:49.23cqw; top:145.10cqw; width:46.68cqw; height:66.33cqw; background:url("../images/Acerius/UI/appearanceOptionsPane.png") center/100% 100% no-repeat; } /* la vitrine des dessins (Wix 472,1524 · 489×447 — PLUS LARGE que le panneau : les dessins débordent des deux côtés, c'est voulu) */ .ac-vue{ left:48.16cqw; top:155.51cqw; width:49.90cqw; height:45.61cqw; display:flex; align-items:center; justify-content:center; } /* les dessins gardent leurs PROPORTIONS (owner 2026-07-15 : « je ne veux PAS que les images d'apparence soient écrasées ») — ils tiennent dans la vitrine Wix 489×447, centrés, jamais déformés */ .ac-diapo{ display:none; max-width:100%; max-height:100%; width:auto; height:auto; filter:drop-shadow(0 14px 24px rgba(0,0,0,.7)); } .ac-diapo.active{ display:block; } /* pilule flèches/loupe (Wix 616,2009 · 200×64, contenu centré) */ .ac-controles{ left:62.86cqw; top:205cqw; width:20.41cqw; height:6.53cqw; background:url("../images/Acerius/UI/contentSidePane_toggle_h.png") center/100% 100% no-repeat; display:flex; align-items:center; justify-content:center; gap:1.2cqw; } .ac-fleche, .ac-zoom{ border:none; padding:0; cursor:pointer; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:contain; } /* input_arrow pointe vers la GAUCHE → la flèche droite est retournée */ .ac-fleche{ width:3.88cqw; height:2.04cqw; background-image:url("../images/Acerius/UI/input_arrow_h.png"); } .ac-fleche:hover, .ac-fleche:focus-visible{ background-image:url("../images/Acerius/UI/input_arrow_d.png"); } .ac-fleche.ac-d{ transform:scaleX(-1); } .ac-zoom{ width:3.06cqw; height:3.06cqw; background-image:url("../images/Acerius/UI/ico_zoomIn_h.png"); } .ac-zoom:hover, .ac-zoom:focus-visible{ background-image:url("../images/Acerius/UI/ico_zoomIn_d.png"); } /* la LIGHTBOX du zoom (posée sur , jamais dans la scène) */ .ac-lightbox{ position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.93); display:flex; align-items:center; justify-content:center; cursor:pointer; } .ac-lightbox img{ max-width:92vw; max-height:92vh; } /* SÉPARATEUR header_open_faded (Wix 154,2140 · 671×25) — centré au pixel entre les panneaux et le bas (gaps 43/43 au lieu de 45/41, owner) */ .ac-separateur{ left:15.71cqw; top:218.16cqw; width:68.47cqw; } .ac-separateur img{ display:block; width:100%; height:auto; } /* ---- SOMMAIRE (Wix 40,2210 · 445 de large ; map_sidePane haut 605 + map_legend bas 201 à y2718 → la boîte va jusqu'à y2919) ---- */ .ac-sommaire{ left:4.08cqw; top:225.51cqw; width:45.41cqw; height:72.35cqw; text-align:center; } /* ⚠ les 2 images du sommaire ne sont JAMAIS déformées (owner 2026-07-15 : « que du resize proportionnel ») : ratio conservé (100% auto), sidePane ancrée en HAUT (le bas déborde de la boîte et n'est pas peint), legend ancrée en BAS (Wix : 445×201 à +508). */ .ac-sommaire::before{ content:""; position:absolute; top:0; left:0; right:0; height:61.73cqw; background:url("../images/Acerius/map_sidePane.png") top center/100% auto no-repeat; pointer-events:none; } .ac-sommaire::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:20.51cqw; background:url("../images/Acerius/map_legend.png") bottom center/100% auto no-repeat; pointer-events:none; } /* « Sommaire » (Wix 100,2290 · 326×124 · police 75, centré) — DESCENDU un peu (owner 2026-07-15) pour être à égale distance de l'ornement que les entrées en dessous */ .ac-som-titre{ position:absolute; left:6.12cqw; top:10.3cqw; width:33.27cqw; height:12.65cqw; display:flex; align-items:center; justify-content:center; z-index:1; font-family:'Beastform', cursive; color:#efe9df; font-size:7.65cqw; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.8); } /* les entrées : DESCENDUES un peu (owner : elles étaient trop proches du petit ornement séparateur) */ .ac-sommaire ul{ position:absolute; left:3cqw; right:3cqw; top:29.5cqw; z-index:1; list-style:none; margin:0; padding:0; display:grid; gap:2.3cqw; } .ac-som-lien{ background:none; border:none; cursor:pointer; font-family:'Alice in Wonderland', serif; font-size:2.55cqw; /* 25px (owner) */ color:#B29077; /* couleur des titres de sections (owner) */ letter-spacing:.02em; transition:color .2s ease; } .ac-som-lien:hover, .ac-som-lien:focus-visible{ color:#e0c4a6; } /* INTRO (Wix 529,2263 · 411 de large · police 21, interligne 1.4) — BLANC */ .ac-intro{ left:53.98cqw; top:230.92cqw; width:41.94cqw; color:#fff; font-size:2.14cqw; line-height:1.4; text-align:justify; } .ac-intro p + p{ margin-top:1.3em; } /* ============================================================ SECTIONS de texte (Apparence, Personnalité…) — SOUS la planche, en flux normal (elles s'allongent avec leur texte). Chaque section = séparateur (footer_decors G + titre Alice in Wonderland + footer_decors D) + boîte reactionsPopover_bg (border-image extensible : coins fixes, milieu étiré). ============================================================ */ .ac-sections{ max-width:min(980px, 100%); margin:0 auto; padding-top:2rem; } .ac-sec-sep{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin:2.4rem 0 1.4rem; } .ac-sec-deco{ width:min(330px, 32%); height:auto; } .ac-sec-deco.ac-flip{ transform:scaleX(-1); } .ac-sec-titre{ font-family:'Alice in Wonderland', serif; color:#f1e8d4; font-size:2.5rem; font-weight:400; letter-spacing:.02em; white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,.7); } /* dès que le conteneur (max 980) se resserre : titre qui peut passer à la ligne + ornements plus petits, sinon un titre long (« Aptitudes & compétences ») pousse les footer_decors hors de l'écran (tablette). Le ≤720px affine encore. */ @media (max-width:980px){ .ac-sec-deco{ width:min(210px, 26%); } .ac-sec-titre{ white-space:normal; font-size:clamp(1.7rem, 4.4vw, 2.5rem); text-align:center; } } /* la boîte extensible (reactionsPopover_bg 1412×1632, coins ~50px) : border-image 9 tranches → les coins gardent leur taille, le centre (uni) s'étire à n'importe quelle longueur (owner : « on peut la rallonger autant qu'on veut ») ; le bord 40px sert d'inset au texte */ .ac-sec-boite{ box-sizing:border-box; border:40px solid transparent; border-image:url("../images/Acerius/reactionsPopover_bg.png") 64 fill / 40px stretch; padding:.3rem 1rem 1rem; color:#fff; font-size:20px; line-height:1.6; text-align:justify; } .ac-sec-boite p + p{ margin-top:1.1em; } /* l'image d'Acerius dans la boîte Apparence : flottée à DROITE au début du texte, bordure épaisse à coins arrondis #523C28 (owner 2026-07-15) */ .ac-sec-img{ float:right; width:min(430px, 46%); /* AGRANDIE, presque la moitié de la boîte (owner) */ height:auto; margin:.2rem 0 1rem 1.8rem; border:3px solid #523C28; border-radius:14px; } /* ---- HISTOIRE : boîte PARCHEMIN (scroll_B_bg 1636×1800) en border-image : rouleaux haut/bas + embouts cuivre FIXES aux coins, le parchemin central s'étire à n'importe quelle longueur (owner : « l'étendre manuellement »). Texte SOMBRE (encre) sur le papier crème. ---- */ .ac-sec-scroll{ border-style:solid; border-color:transparent; border-width:96px 118px 104px 118px; border-image:url("../images/Acerius/scroll_B_bg.png") 270 200 300 200 fill / 96px 118px 104px 118px stretch; background:none; /* GROS retrait horizontal : le texte reste bien DANS le papier, loin des bords déchirés du parchemin (owner 2026-07-15 : « resserré davantage ») */ padding:1.4rem 4.6rem 2.4rem; /* police VALIDÉE : Uncial Antiqua (onciale médiévale) — parfaite sur le parchemin (owner 2026-07-15) ; le sélecteur temporaire a été retiré */ font-family:'Uncial Antiqua', cursive; font-size:19px; line-height:1.8; isolation:isolate; /* pour que le multiply se fasse SUR le parchemin */ } /* EFFET ENCRE BUVARD : l'encre s'imprègne du papier. - mix-blend-mode:multiply → le texte se fond dans le grain du parchemin (plus posé dessus) ; la couleur d'encre sépia foncé multiplie le crème ; - filter #encre → bords très légèrement rongés + micro-flou = bavure dans les fibres. Sur les paragraphes uniquement (pas l'éventuelle image). */ .ac-sec-scroll p{ color:#43301c; mix-blend-mode:multiply; filter:url(#encre); } .ac-sec-scroll p + p{ margin-top:.85em; } @media (prefers-reduced-motion: reduce){ .ac-sec-scroll p{ filter:none; } /* garde le buvard mais sans le bruit */ } /* ---- TRAITS NOTABLES : icône (encadrée de footer_center_decors) + panneau texte, en ALTERNANCE gauche/droite (symétrie horizontale) ; traits séparés par c_panel_divider_horiz (le divider vertical déjà pivoté). ---- */ .ac-traits{ display:flex; flex-direction:column; } .ac-trait{ display:flex; align-items:center; gap:2.4rem; margin:1rem 0; } .ac-trait.inverse{ flex-direction:row-reverse; } .ac-trait-icone{ flex:0 0 auto; width:min(290px, 35%); /* icônes AGRANDIES (owner : le panneau prenait trop de place) */ display:flex; flex-direction:column; align-items:center; gap:.7rem; } .ac-trait-orne{ width:86%; height:auto; opacity:.85; } .ac-trait-orne.ac-flip{ transform:scaleY(-1); } /* l'ornement du haut, miroir */ .ac-trait-img{ width:86%; height:auto; filter:drop-shadow(0 0 14px rgba(0,0,0,.55)); } .ac-trait-boite{ flex:1 1 auto; box-sizing:border-box; /* le panneau owner image (1).png, étiré (100% 100%). Chaque boîte s'AJUSTE à son propre texte (pas de hauteur commune → pas de grand vide sur les courtes, owner) ; ajusterTraitsAcerius() réserve juste une petite bande basse (padding-bottom) pour la fioriture du coin, texte posé au-dessus. */ background:url("../images/Acerius/image (1).png") center/100% 100% no-repeat; padding:1.7rem 2.4rem 1.7rem; color:#B2907E; /* couleur du CORPS des traits (owner) ; le titre reste crème */ font-size:18px; /* owner (comme son site) */ line-height:1.5; text-align:justify; display:flex; flex-direction:column; align-items:center; /* un bloc de texte plus étroit reste centré */ justify-content:flex-start; /* texte en HAUT ; la bande basse reste à la fioriture */ } /* le BLOC de texte (titre + paragraphes) : déplaçable / redimensionnable par l'éditeur temporaire (transform translate + width posés inline) */ .ac-trait-texte{ width:100%; } /* la fioriture d'image (1).png est en bas-GAUCHE. On la veut toujours dans le coin EXTÉRIEUR (loin de l'icône) : trait NON inversé = icône à gauche, panneau à droite → on FLIP le panneau (copie miroir) pour l'avoir en bas-droite. */ .ac-trait:not(.inverse) .ac-trait-boite{ background-image:url("../images/Acerius/image-1-flip.png"); } .ac-trait-boite p + p{ margin-top:1.1em; } .ac-trait-titre{ font-family:'Alice in Wonderland', serif; font-weight:400; color:#f1e8d4; font-size:1.8rem; text-align:center; letter-spacing:.02em; margin:0 0 .8rem; text-shadow:0 2px 8px rgba(0,0,0,.65); } .ac-trait-divider{ display:block; width:min(560px, 72%); height:auto; margin:.9rem auto; opacity:.9; } @media (max-width:720px){ /* sur téléphone : icône AU-DESSUS du panneau (une colonne), toujours alternée par symétrie n'a plus de sens → tout centré */ .ac-trait, .ac-trait.inverse{ flex-direction:column; gap:1rem; } .ac-trait-icone{ width:min(180px, 55%); } /* le panneau paysage image (1).png s'étirerait verticalement (fioriture déformée) sur le contenu haut/étroit → boîte thémée propre (comme Notes). La bande-fioriture de l'ajusteur JS est annulée sur mobile (BANDE=0). */ .ac-trait-boite{ background-color:rgba(18,13,10,.92); background-image:none; border:1px solid rgba(201,160,106,.45); border-radius:12px; font-size:16px; justify-content:flex-start; } /* même spécificité que la règle du flip pour bien retirer l'image paysage */ .ac-trait:not(.inverse) .ac-trait-boite{ background-image:none; } .ac-trait-titre{ font-size:1.5rem; } } /* ---- NEN : intro (overPane_appearance) + capacités empilées sur combine_bg. combine_bg (1148×812, mesuré) : bord haut y67, ligne sous le cartouche y155, volutes jusqu'à ~y307, corps UNIFORME (25,19.6,14.6) de y340 à 620, bord bas y655 + fioriture. Découpé en combine-haut (0-330) / -milieu (340-460, étiré) / -bas (620-812, SEULEMENT sur .derniere — Wix owner : bas coupé sauf à la dernière, chaque capacité reprend le haut). Le fond = 3 divs absolus qui suivent la hauteur du bloc ; le contenu vit en flux au-dessus. Placement = valeurs Wix owner (conteneur 900) converties en % de largeur. ---- */ .ac-nen-intro{ width:100%; /* aligné à gauche/droite avec le reste de la section (owner) */ box-sizing:border-box; /* même cadre extensible que les sections (reactionsPopover_bg 9-slice : coins fixes, centre étiré) → pas de déformation, s'allonge autant qu'il faut */ border:40px solid transparent; border-image:url("../images/Acerius/reactionsPopover_bg.png") 64 fill / 40px stretch; padding:.4rem 1.4rem 1rem; color:#f1e8d4; font-size:20px; line-height:1.6; text-align:justify; } .ac-nen-intro p + p{ margin-top:1.1em; } .ac-nen-caps{ width:100%; /* même largeur que l'intro et les autres sections (owner) */ } .ac-nen-cap{ position:relative; padding-bottom:2.2rem; /* le texte reste au-dessus du cartouche suivant */ } /* COLLER les capacités (owner : « un seul panneau », jonction invisible) : la capacité du DESSOUS passe PAR-DESSUS celle du dessus (ordre DOM normal) et remonte de 7 % de la largeur → son bord doré (à 5.84 % dans son image) vient ~11 px AU-DESSUS de la fin coupée de la précédente : le cartouche recouvre la coupure, sa lueur fond le raccord — plus aucun espace noir ni bord flottant. */ .ac-nen-cap + .ac-nen-cap{ margin-top:-7%; } .ac-nen-cap.derniere{ padding-bottom:10%; } /* place pour le bord bas orné (tranche resserrée) */ .ac-nen-fond{ position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; } .ac-nen-fh{ aspect-ratio:1148/330; background:url("../images/Acerius/combine-haut.png") center/100% 100% no-repeat; } .ac-nen-fm{ flex:1 1 auto; margin:-1px 0; background:url("../images/Acerius/combine-milieu.png") center/100% 100% no-repeat; } .ac-nen-fb{ aspect-ratio:1148/125; background:url("../images/Acerius/combine-bas.png") center/100% 100% no-repeat; } .ac-nen-cap > *:not(.ac-nen-fond){ position:relative; z-index:1; } /* cartouche : titre centré entre le bord haut (y67) et la ligne (y155) */ .ac-nen-titre{ box-sizing:border-box; aspect-ratio:1148/155; padding-top:5.84%; /* la lueur au-dessus du bord (67/1148) */ display:flex; align-items:center; justify-content:center; margin:0; font-family:'Alice in Wonderland', serif; font-weight:400; font-size:min(28px, 3.1vw); letter-spacing:.02em; color:#f1e8d4; text-shadow:0 2px 8px rgba(0,0,0,.65); text-align:center; } /* entête : icône à gauche (Wix x55 l189), colonne Type à droite (x537→847) */ .ac-nen-entete{ display:flex; align-items:flex-start; margin-top:3.67%; /* icône à y102 Wix (source 197) − fin de bande haute */ } .ac-nen-icone{ width:20%; height:auto; margin-left:9.5%; /* le cadre doré est à 6,2 % → on rentre à l'intérieur */ filter:drop-shadow(0 0 12px rgba(0,0,0,.5)); } .ac-nen-typecol{ width:32%; margin-left:auto; margin-right:9.5%; padding-top:3.34%; /* « Type » un peu sous le haut de l'icône */ text-align:right; } .ac-nen-soustitre{ font-family:'Alice in Wonderland', serif; font-weight:400; font-size:min(26px, 2.9vw); color:#f1e8d4; text-shadow:0 2px 6px rgba(0,0,0,.6); } .ac-nen-barre{ height:2px; background:linear-gradient(90deg, rgba(122,90,53,0), #7a5a35 14%, #7a5a35 86%, rgba(122,90,53,0)); } .ac-nen-barre.courte{ width:100%; margin:.6rem 0 .6rem auto; } .ac-nen-barre.longue{ margin:1.1rem 9.5% .7rem; } .ac-nen-types{ list-style:none; margin:0 0 1.2em; padding:0; font-size:21px; color:#f1e8d4; } .ac-nen-types li{ display:flex; justify-content:flex-end; align-items:center; gap:.18em; /* icône collée à son texte (owner) */ margin-bottom:.2em; } .ac-nen-types li img{ height:1.15em; width:auto; } .ac-nen-desc{ padding:0 9.5%; color:#f1e8d4; font-size:20px; line-height:1.6; text-align:justify; } .ac-nen-desc p + p{ margin-top:1.1em; } .ac-nen-liste{ margin:.9em 0 0; padding-left:1.6em; } .ac-nen-liste li{ margin-bottom:.55em; } .ac-nen-liste li::marker{ color:#f1e8d4; } /* ---- NOTES : liste à puces dans le panneau inspect_bg_slice_edited (1148×424, bord doré au ras des bords, losange en haut-centre, fioriture en haut-droite). Fond étiré 100% 100% mais aspect-ratio = celui de l'image → pas de déformation (le contenu court tient dans la hauteur naturelle). ---- */ .ac-notes-panneau{ width:100%; box-sizing:border-box; background:url("../images/Acerius/inspect_bg_slice_edited.png") center/100% 100% no-repeat; aspect-ratio:1148 / 424; display:flex; flex-direction:column; justify-content:center; padding:6% 22% 6% 7%; /* gros retrait à DROITE : la fioriture occupe tout le coin haut-droite jusqu'à ~x80 % + tiges le long du bord */ } .ac-notes-liste{ list-style:disc; margin:0; padding-left:1.5em; color:#f1e8d4; font-size:20px; line-height:1.5; text-align:justify; } .ac-notes-liste li{ margin-bottom:1.1em; } .ac-notes-liste li:last-child{ margin-bottom:0; } .ac-notes-liste li::marker{ color:#c9a06a; } /* ---- ÉTOILES CACHÉES de la fiche Acerius (data-perso, pas data-gabarit : le style .etoile-fiche du gabarit wiki ne s'applique pas ici) ---- */ #fiche[data-perso="acerius"] .etoile-fiche{ position:absolute; left:calc(50% - 24px); top:calc(50% - 24px); width:48px; height:auto; cursor:pointer; z-index:6; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } #fiche[data-perso="acerius"] .indice-etoile{ cursor:pointer; } /* conteneur où l'étoile se pose → position:relative pour la centrer. ⚠ SURTOUT PAS .ac-slayer ni .ac-voix-mere : ce sont des enfants ABSOLUS de la planche (left/top cqw) — les passer en relative les fait tomber dans le flux (la voix de la reine s'est retrouvée sous le profil, owner bug-report) ; un élément absolu est déjà un conteneur valide pour l'étoile. */ #fiche[data-perso="acerius"] .ac-apt-detail{ position:relative; } /* « Notes » aligné sur le RYTHME RÉGULIER des autres sections (39 px au-dessus du titre, comme Apparence↔Personnalité…). Le fb du panneau Nen a ~15 px de dégradé transparent SOUS son bord orné → on retire ces 15 px de la marge standard (2.4rem ≈ 39) pour que le gap VISUEL bord orné → « Notes » = 39. */ #fiche[data-perso="acerius"] #ac-sec-notes .ac-sec-sep{ margin-top:24px; } /* la voix de la reine tremble quand on refuse de l'écouter (3 clics rapides) */ #fiche[data-perso="acerius"] .ac-voix-mere{ user-select:none; } .ac-voix-tremble{ animation:acVoixSecoue .38s ease; } @keyframes acVoixSecoue{ 0%{ translate:0 0; } 25%{ translate:-4px 0; } 50%{ translate:4px 0; } 75%{ translate:-2px 0; } 100%{ translate:0 0; } } /* LA FOURMI : minuscule fourmi d'encre qui traverse rarement le parchemin de l'Histoire (référence à l'insecte recueilli) — bouton discret, cliquable */ .ac-fourmi{ position:absolute; width:30px; height:22px; padding:2px; border:none; background:none; cursor:pointer; left:12%; top:46%; z-index:2; } .ac-fourmi svg{ display:block; width:22px; height:auto; margin:0 auto; } /* le sens : via la propriété `scale` (séparée) pour ne pas écraser le dandinement qui, lui, anime `transform` */ .ac-fourmi.inverse svg{ scale:-1 1; } /* dandinement de marche : léger balancement du corps (compose avec scale) */ .ac-fourmi.marche svg{ animation:acFourmiTrotte .24s ease-in-out infinite; } @keyframes acFourmiTrotte{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } } .ac-fourmi-ancre{ position:absolute; width:0; height:0; z-index:2; } #fiche[data-perso="acerius"] .ac-sec-scroll{ position:relative; } @media (prefers-reduced-motion: reduce){ .ac-fourmi.marche svg{ animation:none; } } @media (max-width:720px){ .ac-nen-intro{ padding:1.6rem 1.4rem; font-size:16px; } .ac-nen-titre{ font-size:min(20px, 4vw); } .ac-nen-soustitre{ font-size:18px; } .ac-nen-types{ font-size:16px; } .ac-nen-desc{ font-size:16px; } /* le panneau paysage inspect_bg s'étirerait verticalement (fioriture déformée) sur un contenu haut/étroit → boîte thémée propre (fond sombre + liseré or) */ .ac-notes-panneau{ aspect-ratio:auto; background:rgba(12,8,6,.92); border:1px solid rgba(201,160,106,.5); border-radius:14px; padding:1.5rem 1.4rem; } .ac-notes-liste{ font-size:16px; } } /* ---- APTITUDES : arbre de compétences interactif (2 panneaux BG3) ---- gauche = mainStats_bg (9 icônes) · droite = endTurn_bg (icône choisie dans le rond du haut + description). Survol/clic une icône → le détail change (comme l'équipement de Lexinum / l'inventaire de Toad). ---- */ .ac-apt-zone{ display:grid; grid-template-columns:minmax(280px, 360px) 1fr; gap:2.2rem; align-items:center; /* le panneau gauche centré vert. avec le droit (owner) */ margin-top:1.4rem; } .ac-apt-gauche{ text-align:center; } .ac-apt-consigne{ font-family:'Alice in Wonderland', serif; color:#f1e8d4; font-size:1rem; line-height:1.55; margin:0 auto 1.1rem; max-width:320px; } /* barres déco autour des 9 icônes (map_headerBar au-dessus, footerBar en dessous — leur ombre pointe vers les icônes) ; espacées des icônes (owner) */ .ac-apt-bar{ display:block; width:100%; height:auto; } .ac-apt-bar:first-of-type{ margin:.2rem 0 .6rem; } /* header : ombre vers le bas */ .ac-apt-bar:last-of-type{ margin:.6rem 0 .2rem; } /* footer : ombre vers le haut */ /* le panneau gauche : les 9 icônes posées dans les ronds de mainStats_bg */ .ac-apt-arbre{ position:relative; width:100%; aspect-ratio:408 / 404; background:url("../images/Acerius/mainStats_bg.png") center/100% 100% no-repeat; } .ac-apt-icone{ position:absolute; transform:translate(-50%,-50%); width:16.5%; aspect-ratio:1; padding:0; border:none; background:none; cursor:pointer; } .ac-apt-icone img{ width:100%; height:100%; object-fit:contain; /* recentrage du dessin dans le slot (--cx/--cy par icône, posés inline) ; le grossissement au survol passe par la propriété `scale` SÉPARÉE (jamais mélangée au translate) → retour tout doux, aucun micro-décalage possible */ transform:translate(var(--cx,0), var(--cy,0)); scale:1; filter:brightness(.8) saturate(.92); transition:filter .22s ease, scale .22s ease-out; } .ac-apt-icone:hover img, .ac-apt-icone:focus-visible img, .ac-apt-icone.actif img{ filter:brightness(1.18) drop-shadow(0 0 7px rgba(255,210,63,.85)); scale:1.09; } /* le panneau droit en 3 BANDES (owner : garder les proportions du cadre — le rond du haut ne doit pas s'ovaliser) : haut (rond, aspect fixe) + milieu (cadre plein étiré verticalement, contient le texte) + bas (aspect fixe). Le rond reste ROND car sa bande garde son ratio. */ .ac-apt-detail{ display:flex; flex-direction:column; } .ac-apt-haut{ position:relative; aspect-ratio:724 / 100; /* bande raccourcie → le texte remonte (owner) */ background:url("../images/Acerius/endturn-haut.png") center/100% 100% no-repeat; } .ac-apt-milieu{ flex:1; margin:-1px 0; /* recouvre les coutures haut/bas */ background:url("../images/Acerius/endturn-milieu.png") center/100% 100% no-repeat; padding:.2rem 3.4rem 2.2rem; } .ac-apt-bas{ aspect-ratio:724 / 148; background:url("../images/Acerius/endturn-bas.png") center/100% 100% no-repeat; } /* le rond du haut : centre EXACT de l'anneau doré (mesuré : 49.8 % x, 43 % de la bande raccourcie), l'icône choisie s'y pose recentrée */ .ac-apt-rond{ position:absolute; left:49.8%; top:43%; transform:translate(-50%,-50%); width:5%; aspect-ratio:1; } .ac-apt-rond-img{ width:100%; height:100%; object-fit:contain; transform:translate(var(--cx,0), var(--cy,0)); visibility:hidden; } .ac-apt-carte h3{ font-family:'Alice in Wonderland', serif; color:#e3c98f; font-size:1.7rem; text-align:center; margin:0 0 1rem; text-shadow:0 2px 8px rgba(0,0,0,.6); } .ac-apt-corps{ color:#fff; font-size:20px; line-height:1.6; text-align:justify; } .ac-apt-corps p + p{ margin-top:.8em; } @media (max-width:720px){ .ac-apt-zone{ grid-template-columns:minmax(0, 360px); justify-content:center; } .ac-apt-milieu{ padding:.4rem 1.5rem 1.8rem; } .ac-apt-corps{ font-size:16px; } } /* ---- ≤720px : on quitte la planche absolue → flux empilé simple (la passe responsive fine des fiches viendra plus tard) ---- */ @media (max-width:720px){ .ac-planche{ aspect-ratio:auto; } .ac-planche > *, .ac-profil > *, .ac-surnoms .ac-cle, .ac-surnoms-texte{ position:static; } .ac-planche > *{ width:auto; height:auto; } .ac-titre{ display:block; font-size:clamp(3rem, 15vw, 4.6rem); padding:.6rem 0 .3rem; } .ac-slayer{ width:100%; } .ac-voix-mere{ font-size:clamp(1.25rem, 6vw, 1.9rem); margin:1.2rem .3rem; } .ac-ornement{ width:58%; margin:1.2rem auto; } .ac-profil{ width:100%; padding:1.3rem 1rem 1.6rem; display:grid; gap:.9rem; } .ac-profil > *{ width:auto; height:auto; } .ac-plaque-nom{ display:block; width:min(309px, 88%); margin:0 auto; font-size:20px; padding:.75rem .6rem .95rem; text-align:center; } .ac-surnoms{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; font-size:17px; } .ac-surnoms .ac-cle, .ac-surnoms-texte{ font-size:17px; line-height:1.5; width:auto; } .ac-surnom-ico{ display:none; } /* icônes à coordonnées absolues → cachées */ .ac-tete{ position:static; font-size:20px; line-height:1.4; } .ac-vol{ display:none; } /* volutes à coordonnées absolues → cachées */ .ac-rangs{ padding:.55rem 1rem; border-radius:10px; } .ac-rang{ font-size:17px; line-height:1.6; } .ac-rangs-nen{ padding:0 1rem; } .ac-apparence{ display:none; } /* son cadre passe sur la vitrine */ .ac-vue{ width:100%; min-height:340px; background:url("../images/Acerius/UI/appearanceOptionsPane.png") center/100% 100% no-repeat; padding:1rem .8rem; margin-top:.8rem; } .ac-diapo{ max-width:96%; max-height:52vh; } .ac-controles{ width:198px; height:48px; margin:.7rem auto 0; } .ac-fleche{ width:38px; height:20px; } .ac-zoom{ width:30px; height:30px; } .ac-separateur{ width:94%; margin:1.8rem auto; } .ac-sommaire{ width:auto; height:auto; padding:1rem 0 1.4rem; } .ac-sommaire::before, .ac-sommaire::after{ display:none; } .ac-som-titre{ position:static; font-size:2.3rem; margin-bottom:.7rem; } .ac-sommaire ul{ position:static; display:grid; gap:.65rem; } .ac-som-lien{ font-size:1.25rem; } .ac-intro{ width:auto; font-size:17px; line-height:1.75; margin-top:1.2rem; } } /* ---- ≤720px : les SECTIONS de texte (séparateurs, boîtes, parchemin, images) ---- */ @media (max-width:720px){ .ac-sections{ padding-top:1rem; } /* séparateurs : titre plus petit qui peut passer à la ligne, petits ornements */ .ac-sec-sep{ gap:.5rem; margin:1.8rem 0 1rem; } .ac-sec-deco{ width:min(84px, 22%); } .ac-sec-titre{ font-size:clamp(1.25rem, 6vw, 2rem); white-space:normal; text-align:center; } /* boîtes reactionsPopover : cadre plus fin pour laisser de la place au texte */ .ac-sec-boite{ border-width:28px; border-image-width:28px; padding:.3rem .7rem .8rem; font-size:16px; } .ac-sec-img{ width:min(190px, 44%); margin:.1rem 0 .8rem 1rem; } /* parchemin de l'Histoire : rouleaux/embouts bien plus fins qu'en desktop */ .ac-sec-scroll{ border-width:44px 34px 48px 34px; border-image-width:44px 34px 48px 34px; padding:.8rem 1.2rem 1.4rem; font-size:15px; } /* Nen : intro/capacités/textes déjà réduits ; on resserre encore le titre */ .ac-nen-caps, .ac-nen-intro{ width:100%; } /* Notes : la marge haute compensée (fb) reste valable ; texte lisible */ .ac-notes-liste{ padding-left:1.3em; } } @media (prefers-reduced-motion: reduce){ .ac-slayer:hover .ac-slayer-voix, .ac-slayer:focus-visible .ac-slayer-voix{ animation:none; } .ac-slayer:hover::after, .ac-slayer:focus-visible::after{ animation:none; opacity:.6; } } /* ============================================================ LA SALLE INTERDITE — DOOM E1M1 (easter egg, 2026-07-16) ============================================================ */ /* ⚠ NE PAS mettre display:flex sur #doom directement : un sélecteur #id écrase .scene{display:none} → la scène resterait visible sur TOUTES les pages (owner 2026-07-16). L'agencement flex ne s'applique qu'ACTIVE. */ #doom{ min-height:100vh;background: radial-gradient(120% 90% at 50% 110%, #3a0a08 0%, #1a0505 45%, #0a0203 100%); } #doom.active{display:flex;flex-direction:column;} #doom .barre{background:rgba(10,2,3,.82);} .doom-salle{ flex:1;display:flex;align-items:center;justify-content:center; padding:2.2rem 1rem 3rem; } .doom-cadre{ position:relative;width:min(1080px, 96vw); aspect-ratio:640/400; background:#000;border-radius:6px; /* cadre « pierre du temple » rongé par l'enfer */ box-shadow: 0 0 0 6px #241014, 0 0 0 10px #3d1a12, 0 0 44px rgba(214, 48, 16, .35), 0 18px 60px rgba(0,0,0,.7); } #doomCanvas{ width:100%;height:100%;display:block;border-radius:4px; image-rendering:pixelated;outline:none;background:#000; } /* le voile de lancement / chargement / victoire */ .doom-voile{ position:absolute;inset:0;z-index:3;border-radius:4px; display:flex;align-items:center;justify-content:center;text-align:center; background: radial-gradient(90% 70% at 50% 40%, rgba(70,12,8,.88) 0%, rgba(8,2,2,.96) 75%); } .doom-voile[hidden]{display:none;} .doom-voile-int{padding:1.4rem;max-width:82%;} .doom-titre{ font-family:'Luckiest Guy',cursive;font-size:clamp(1.6rem,4.6vw,3rem); color:#ff5a2a;letter-spacing:.04em;margin:0 0 .5rem; text-shadow:0 0 18px rgba(255,90,26,.55), 0 4px 0 #4a0d05; } .doom-sous{color:#e8c9b0;font-size:clamp(.9rem,2vw,1.1rem);margin:0 0 1.4rem;} .doom-bouton{ font-family:'Luckiest Guy',cursive;font-size:clamp(1rem,2.6vw,1.5rem); color:#fff4e0;background:linear-gradient(#a3170f,#6d0d08); border:3px solid #ff5a2a;border-radius:12px;padding:.7em 1.5em;cursor:pointer; letter-spacing:.05em; box-shadow:0 0 22px rgba(255,90,26,.4), inset 0 2px 0 rgba(255,255,255,.18); transition:transform .15s ease, box-shadow .15s ease; } .doom-bouton:hover,.doom-bouton:focus-visible{ transform:scale(1.05); box-shadow:0 0 34px rgba(255,90,26,.65), inset 0 2px 0 rgba(255,255,255,.18); } .doom-aide{color:#b98f77;font-size:.82rem;margin-top:1.3rem;} /* barre de chargement du WAD */ .doom-charge{width:min(420px,70vw);margin:1rem auto 0;height:14px;border-radius:7px; background:#2a0c08;border:2px solid #6d2415;overflow:hidden;} .doom-charge > div{height:100%;width:0%;background:linear-gradient(#ff7a3c,#c22a10); transition:width .2s ease;} /* la CLÉ gagnée (victoire E1M1) : keycard pixel façon Doom */ .doom-cle{ width:76px;height:auto;margin:0 auto 1rem;display:block; image-rendering:pixelated; filter:drop-shadow(0 0 18px rgba(255,60,60,.85)); animation:doomCleFlotte 2.2s ease-in-out infinite; } @keyframes doomCleFlotte{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}} .doom-boutons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;} .doom-bouton.secondaire{ background:linear-gradient(#3a3550,#241f38);border-color:#8f86c9; box-shadow:0 0 16px rgba(143,134,201,.35), inset 0 2px 0 rgba(255,255,255,.12); } @media (prefers-reduced-motion: reduce){ .doom-cle{animation:none;} .doom-bouton{transition:none;} } @media (max-width:720px){ .doom-salle{padding:1rem .4rem 2rem;} .doom-aide{font-size:.72rem;} } /* ============================================================ GABARIT « FANDOM » — fiches de l'Attaque des Titans (Sulyvahn, Dakaam). Recrée la page du wiki Fandom SNK, en « version améliorée » (owner 2026-07-17) : page entièrement noire, en-tête titan colossal pleine largeur, sommaire repliable, symboles dessinés (plus de png). Thème sondé sur le vrai site : texte #e6e6e6, liens or #f3c263, rouge « page morte », bandeaux rouges dégradé #590302→#bf1111→#590302, police Rubik. ============================================================ */ @font-face{ font-family:'Rubik'; /* la police du wiki Fandom (OFL, dépôt officiel Google Fonts) */ src:url("../fonts/Rubik.ttf") format("truetype"); font-weight:300 900; font-display:swap; } @font-face{ font-family:'Rubik'; src:url("../fonts/Rubik-Italic.ttf") format("truetype"); font-weight:300 900; font-style:italic; font-display:swap; } #fiche[data-gabarit="fandom"]{ background:#000; /* toute la page en noir (owner) */ font-family:'Rubik', helvetica, arial, sans-serif; color:#e6e6e6; } #fiche[data-gabarit="fandom"] .fiche-conteneur{max-width:1080px;padding:0 1rem 5rem;} #fiche[data-gabarit="fandom"] .boite-fiche{background:transparent;border-radius:0;} #fiche[data-gabarit="fandom"] .boite-int{padding:0 10px 34px;} /* ---- en-tête du wiki : le titan colossal PLEINE LARGEUR, fondu au noir en bas (la barre du site reste sticky au-dessus). Le débordement de barre de défilement du 100vw est coupé par html{overflow-x:clip}. ---- */ .fd-banniere{ position:relative; width:100vw;margin-left:calc(50% - 50vw); height:clamp(120px,19vw,235px); background-position:center 30%;background-size:cover;background-repeat:no-repeat; margin-bottom:6px; } .fd-banniere::after{ content:"";position:absolute;inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.30), transparent 32%, transparent 58%, #000); } /* ---- ligne du titre ---- */ .fd-titre-ligne{border-bottom:1px solid #3a3a3a;padding:20px 6px 12px;} h1.fd-titre{margin:0;font-family:'Rubik', helvetica, arial, sans-serif;font-size:clamp(28px,4.8vw,42px);font-weight:500;color:#fff;letter-spacing:.01em;} /* ---- corps de l'article ---- */ .fd-corps{margin-top:18px;font-size:16px;line-height:1.95;} .fd-corps p{margin:0 0 1.1em;} .fd-lien{color:#f3c263;text-decoration:none;} /* lien wiki (page existante) */ a.fd-lien:hover, a.fd-lien:focus-visible{text-decoration:underline;} .fd-lien-rouge{color:#ec5b5e;} /* « page morte » — le clin d'œil Fandom */ /* citation d'ouverture — vrais guillemets typographiques (plus de png), les DEUX centrés verticalement (owner 2026-07-17) */ .fd-quote{display:flex;gap:18px;margin:10px 4px 26px;padding:0;} .fd-quote-marque{font-family:Georgia, 'Times New Roman', serif;font-size:58px;line-height:1;color:#8f8f8f;flex:0 0 auto;user-select:none;align-self:center;} .fd-quote-texte{font-style:italic;color:#dcdcdc;} .fd-quote-texte p{margin:0 0 .35em;} .fd-quote-auteur{margin-top:.5em;font-style:normal;color:#8f8f8f;} /* variante INTERNE : citation au fil d'une section (Histoire…), centrée */ .fd-quote.interne{max-width:660px;margin:1.7em auto;gap:14px;} .fd-quote.interne .fd-quote-marque{font-size:40px;} .fd-quote.interne .fd-quote-texte{color:#d2d2d2;} .fd-intro{text-align:justify;} /* ---- sommaire (repliable, façon MediaWiki améliorée) ---- */ /* ARRONDI UNIFORME de tous les « meubles » du gabarit fandom (owner 2026-07-18 : que ça ait l'air du même template partout — sommaire, infobox, tableaux de capacités Nen, tableaux d'équipement partagent la MÊME valeur ; seules les IMAGES flottantes (histoire/perso…) gardent leur cadre carré). Une seule variable → une seule règle. */ #fiche[data-gabarit="fandom"]{--fd-rad:10px;} .fd-sommaire{ display:inline-block;min-width:min(420px,100%); background:linear-gradient(#0e0e0e,#060606); border:1px solid #3a3a3a;border-radius:var(--fd-rad); padding:14px 26px 16px 20px;margin:12px 0 10px; box-shadow:0 4px 18px rgba(0,0,0,.45); } .fd-som-titre{ display:flex;align-items:center;gap:10px; font-weight:700;font-size:17.5px;color:#fff; padding:2px 0 10px; border-bottom:2px solid transparent; border-image:linear-gradient(to right,#590302,#bf1111,#590302) 1; } .fd-som-ico{width:15px;height:15px;color:#f3c263;flex:0 0 auto;} .fd-som-toggle{ margin-left:auto;background:none;border:0;padding:2px 4px;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:400;color:#f3c263; } .fd-som-toggle:hover .fd-som-mot, .fd-som-toggle:focus-visible .fd-som-mot{color:#ffe2a1;} .fd-som-crochet{color:#8a8a8a;} .fd-sommaire.replie .fd-som-liste{display:none;} .fd-sommaire.replie{min-width:0;padding-bottom:12px;} .fd-sommaire.replie .fd-som-titre{border-image:none;border-bottom:0;padding-bottom:2px;} .fd-som-liste, .fd-som-sous{list-style:none;margin:0;padding:0;} .fd-som-liste{padding-top:10px;} .fd-som-liste > li{margin:.3em 0;} .fd-som-sous{padding-left:1.7em;} /* chaque entrée = une LIGNE cliquable entière (restructuré 2026-07-18 pour le surlignage pleine-ligne du skin HxH ; profite aussi à l'AoT : toute la rangée est cliquable). Pas de transition (règle anti-gel). */ .fd-som-ligne{display:block;cursor:pointer;border-radius:5px;padding:2px 8px;margin:0 -8px;} .fd-som-num{color:#9a9a9a;margin-right:.55em;} .fd-som-lien{color:#f3c263;border-radius:4px;} .fd-som-ligne:hover .fd-som-lien, .fd-som-ligne:focus-visible .fd-som-lien{color:#ffe2a1;} /* ---- infobox (flotte à droite, le texte s'enroule — comme MediaWiki) ---- */ .fd-infobox{float:right;width:min(360px,44%);margin:8px 0 20px 26px;font-size:15.5px;line-height:1.55;border-radius:var(--fd-rad);overflow:hidden;--fd-rad-in:var(--fd-rad);} /* les COINS INTERNES qui touchent les coins du cadre (owner 2026-07-18 : sans ça la bande de titre et la dernière rangée gardaient des angles droits dans le cadre arrondi) : le titre arrondit son HAUT, la dernière rangée son BAS. --fd-rad-in = --fd-rad par défaut (pas de padding) ; le skin HxH a 3px de padding → on retranche 3px pour que l'arrondi interne s'emboîte. */ .fd-ib-titre{border-top-left-radius:var(--fd-rad-in);border-top-right-radius:var(--fd-rad-in);} .fd-infobox > .fd-ib-rang:last-child .fd-ib-cle{border-bottom-left-radius:var(--fd-rad-in);} .fd-infobox > .fd-ib-rang:last-child .fd-ib-val{border-bottom-right-radius:var(--fd-rad-in);} .fd-ib-bandeau{background:linear-gradient(to right,#590302,#bf1111,#590302);color:#fff;text-align:center;font-weight:700;font-size:16px;padding:9px 8px;margin-top:10px;} .fd-ib-titre{font-size:21px;padding:11px 8px;margin-top:0;} .fd-ib-portrait{display:block;width:100%;height:auto;} /* carrousel d'images de l'infobox (échange par display, jamais opacité) */ .fd-ib-carrousel{position:relative;} .fd-ib-carrousel .fd-ib-portrait{display:none;} .fd-ib-carrousel .fd-ib-portrait.active{display:block;} .fd-ib-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 2px;} .fd-ib-fleche{background:none;border:0;color:#f3c263;font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;font-family:inherit;} .fd-ib-fleche:hover{color:#ffe2a1;} .fd-ib-points{display:flex;gap:7px;} .fd-ib-point{width:9px;height:9px;border-radius:50%;border:1px solid #f3c263;background:transparent;cursor:pointer;padding:0;} .fd-ib-point.actif{background:#f3c263;} .fd-ib-rang{display:flex;gap:12px;padding:9px 4px;} .fd-ib-cle{flex:0 0 34%;color:#e6e6e6;font-weight:700;} .fd-ib-val{flex:1;color:#fff;} .fd-ib-val i{color:#cfcfcf;} /* sous-ligne légèrement tabulée dans une valeur (ex. mère/père sous le clan) */ .fd-ib-sous{display:block;padding-left:1.1em;color:#cfcfcf;font-style:italic;font-size:.94em;} /* ---- sections ---- */ .fd-section{scroll-margin-top:90px;} /* overflow:hidden = l'astuce MediaWiki : le titre (et sa ligne) s'arrête au bord de l'infobox flottante au lieu de filer dessous */ /* clear:left (owner 2026-07-18) : un titre de section passe TOUJOURS sous une image flottée à gauche de la section précédente (la tenue occasionnelle empiétait sur « Personnalité »). PAS clear:both : l'infobox flotte à DROITE et descend plus bas que l'Apparence — both creuserait un grand vide. */ .fd-section h2{font-family:inherit;font-size:27px;font-weight:500;color:#efefef;border-bottom:1px solid #3a3a3a;margin:34px 0 16px;padding:0 0 8px;overflow:hidden;clear:left;} /* les « petits titres » (chapitres de l'Histoire, parties des Aptitudes…) = le même or que le sommaire (owner 2026-07-17) */ .fd-section h3{font-size:18.5px;font-weight:700;color:#f3c263;margin:20px 0 12px;scroll-margin-top:90px;overflow:hidden;} .fd-section h4{font-size:16px;font-weight:700;color:#f3c263;margin:16px 0 10px;overflow:hidden;} .fd-section p{text-align:justify;} /* ---- « tableaux » d'équipement : bandeau rouge + image gauche / description droite ; consécutifs = collés (un seul meuble), seuls les 4 coins extérieurs du groupe restent arrondis ---- */ .fd-table{ border:1px solid #3a3a3a;border-radius:0; background:linear-gradient(#0e0e0e,#060606); overflow:hidden;scroll-margin-top:90px;clear:both; position:relative; /* conteneur d'étoile cachée (rasade d'Aldia) */ } .fd-table + .fd-table{margin-top:-1px;} /* bordures voisines fusionnées */ .fd-table:first-child, :not(.fd-table) + .fd-table{border-top-left-radius:var(--fd-rad);border-top-right-radius:var(--fd-rad);} .fd-table:not(:has(+ .fd-table)){border-bottom-left-radius:var(--fd-rad);border-bottom-right-radius:var(--fd-rad);} .fd-table-titre{ background:linear-gradient(to right,#590302,#bf1111,#590302); color:#fff;font-weight:700;font-size:17px;text-align:center;padding:10px 12px; } .fd-table-corps{display:flex;gap:24px;padding:18px 22px;} .fd-table-corps.sans-image{display:block;} .fd-table-img{flex:0 0 min(260px,32%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;} .fd-table-img img{max-width:100%;max-height:340px;height:auto;width:auto;} .fd-table-texte{flex:1;min-width:0;} .fd-table-texte p:last-child{margin-bottom:0;} /* rangée de vignettes légendées (miniatures MediaWiki) */ .fd-imgs{display:flex;justify-content:center;align-items:flex-end;gap:54px;flex-wrap:wrap;margin:30px 0 6px;} .fd-vignette{margin:0;text-align:center;} .fd-vignette img{display:block;height:min(380px,52vw);width:auto;border:1px solid #9a9a9a;} .fd-vignette figcaption{margin-top:9px;font-size:13.5px;color:#b5b5b5;} /* miniature FLOTTANTE légendée : le texte s'enroule autour (Histoire, Personnalité, Équipement) — la vignette wiki classique */ .fd-thumb{width:min(300px,40%);margin:6px 0 14px;text-align:center;position:relative;} /* relative = conteneur des étoiles cachées (Aldia) */ .fd-thumb.droite{float:right;margin-left:26px;} .fd-thumb.gauche{float:left;margin-right:26px;} .fd-thumb img,.fd-thumb video{display:block;width:100%;height:auto;border:1px solid #9a9a9a;} /* ⚠ l'étoile posée DANS une vignette ne doit pas hériter de la bordure des vignettes (sa largeur 48px vient déjà de la règle .etoile-fiche scopée, plus spécifique que .fd-thumb img) */ #fiche[data-gabarit="fandom"] .fd-thumb img.etoile-fiche{border:none;} /* le regard du Démon (étoile aldia-demon) : une emprise rouge sombre qui monte pendant qu'on le soutient — posée d'un coup, jamais de transition (règle anti-gel) */ .fd-thumb.aldia-emprise video{box-shadow:0 0 26px 6px rgba(160,20,30,.55);border-color:#7a1420;} .fd-thumb figcaption{margin-top:8px;font-size:13.5px;color:#b5b5b5;line-height:1.5;} /* liste à puces (Notes) */ .fd-liste{margin:0 0 1.1em;padding-left:1.5em;} .fd-liste li{margin:.5em 0;text-align:justify;} .fd-liste li::marker{color:#bf1111;} /* ---- « ABILITYTABLE » : le tableau de capacité Nen du wiki HxH (sondé sur hunterxhunter.fandom.com 2026-07-18) : bandeau d'en-tête à 50 % de la couleur du type, sous-bandeau « Type | Nom (kanji) » à 35 %, corps à 15 % — la couleur vient de --nen (par TYPE de Nen, en r,g,b) : Spécialisation #1AC78D · Matérialisation (Conjuration) #4291D6 · bête de Nen = violet (couleur maison, les ailes de Freedom). Les « images » sont des mp4 en boucle muette (les gifs de l'owner convertis — 34 Mo de gifs → 3,7 Mo). ---- */ .fd-abilite{ --nen:26,199,141; /* Spécialisation par défaut */ --nen-corps:var(--nen); /* le CORPS peut avoir SA teinte (Aldia) */ border:1px solid #c4c4c4;margin:20px 0;border-radius:0;overflow:hidden; scroll-margin-top:90px;clear:both;position:relative; /* ancre l'étoile cachée sur le tableau */ font-size:15px;line-height:1.75;color:#3a3a3a; background:#f9f9f9; } /* arrondi UNIFORME (comme les tableaux d'équipement) : seuls les 4 coins extérieurs d'un GROUPE de capacités collées restent arrondis */ .fd-abilite:first-child, :not(.fd-abilite) + .fd-abilite{border-top-left-radius:var(--fd-rad);border-top-right-radius:var(--fd-rad);} .fd-abilite:not(:has(+ .fd-abilite)){border-bottom-left-radius:var(--fd-rad);border-bottom-right-radius:var(--fd-rad);} .fd-abilite.materialisation{--nen:66,145,214;} .fd-abilite.bete{--nen:138,95,201;} /* COULEURS PERSO d'Aldia (owner 2026-07-18 : plus les couleurs « officielles » du wiki — des teintes taillées pour le personnage, à décliner aussi pour Deon plus tard) : capacités normales = titres/types DORÉ clair + corps VERT JADE ; techniques du Démon = titres ROUGE rutilant + corps POURPRE. Teintes RENDUES PLUS VIBRANTES (owner 2026-07-18 soir : sa version d'origine était « trop vibrante » — on vise un juste milieu, plus riche que le pastel par défaut mais sans crier sur la page claire) : RGB plus saturés + alpha des bandeaux/corps relevé spécifiquement pour les tables d'Aldia. */ .fd-abilite.aldia{--nen:222,168,32; --nen-corps:26,162,104;} /* démon : titres/types ROUGE #AD0A0A + corps POURPRE #741B47 (valeurs owner) */ .fd-abilite.aldia.demoniaque{--nen:173,10,10; --nen-corps:116,27,71;} /* COULEURS NEN DE DEON (owner 2026-07-18) : identité AÉRIENNE & COSMIQUE — l'Étoile Filante, sa soif de liberté, ses trois « capacités-mondes » nordiques (Ymir/Jörmungandr/Yggdrasil) = titres CYAN STELLAIRE + corps BLEU ARDOISE NUIT ; la Bête « Freedom » garde le VIOLET de ses ailes (sa couleur fétiche) + corps INDIGO. Scopé data-perso (l'ID prime sur les classes .materialisation/.bete → Jörmungandr suit le palette normal). */ #fiche[data-perso="deon"] .fd-abilite{--nen:84,186,220; --nen-corps:70,90,128;} #fiche[data-perso="deon"] .fd-abilite.bete{--nen:150,96,208; --nen-corps:98,72,156;} #fiche[data-perso="deon"] .fd-abilite .fd-ab-entete{background:rgba(var(--nen),.6);} #fiche[data-perso="deon"] .fd-abilite .fd-ab-tete{background:rgba(var(--nen),.46);} #fiche[data-perso="deon"] .fd-abilite .fd-ab-corps{background:rgba(var(--nen-corps),.2);} .fd-abilite.aldia .fd-ab-entete{background:rgba(var(--nen),.6);} .fd-abilite.aldia .fd-ab-tete{background:rgba(var(--nen),.48);} .fd-abilite.aldia .fd-ab-corps{background:rgba(var(--nen-corps),.22);} .fd-abilite.aldia.demoniaque .fd-ab-tete{background:rgba(var(--nen),.42);} /* capacités CONSÉCUTIVES collées « à la chaîne » = un seul gros tableau (owner 2026-07-18). ⚠ méthode SANS :has() (l'edit qui l'utilisait a été annulé par la synchro cloud + :has() peut manquer selon le navigateur) : le précédent garde margin-bottom:20px, le suivant remonte de -21px → collapse 20 + (-21) = -1px = bordures fusionnées, quel que soit le navigateur. Une capacité séparée par du texte (Freedom, après le bloc Bête) n'est pas adjacente → garde sa marge normale. */ .fd-abilite + .fd-abilite{margin-top:-21px;} .fd-ab-entete{background:rgba(var(--nen),.5);font-weight:700;font-size:15.5px;text-align:center;padding:9px 10px;border-bottom:1px solid #c4c4c4;} .fd-ab-tete{display:flex;border-bottom:1px solid #c4c4c4;background:rgba(var(--nen),.35);font-weight:700;text-align:center;} /* ⚠ les DEUX colonnes de gauche (Type / médias) partagent la MÊME largeur totale en border-box → leurs barres verticales sont PILE alignées (owner 2026-07-18 : 3px de décalage avant ; le calc conserve la position historique de la barre du Type : 30 % de contenu + 20px de padding + 1px) */ .fd-ab-type{box-sizing:border-box;flex:0 0 calc(30% + 21px);padding:8px 10px;border-right:1px solid #c4c4c4;display:flex;align-items:center;justify-content:center;} .fd-ab-nom{flex:1;padding:8px 12px;align-self:center;} .fd-ab-kanji{font-weight:400;} .fd-ab-corps{display:flex;background:rgba(var(--nen-corps),.15);} .fd-ab-corps.sans-medias{display:block;} .fd-ab-medias{box-sizing:border-box;flex:0 0 calc(30% + 21px);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:flex-start;padding:14px;border-right:1px solid #c4c4c4;} .fd-ab-media{display:block;width:100%;height:auto;border:1px solid #c4c4c4;background:#000;} .fd-ab-texte{flex:1;min-width:0;padding:14px 18px;} .fd-ab-texte p{margin:0 0 1em;text-align:justify;} .fd-ab-texte p:last-child{margin-bottom:0;} /* ---- le BRAS PROTHÉTIQUE (widget d'inventaire de l'Équipement) ---- */ .fd-bras{display:flex;gap:24px;margin:28px 0 10px;clear:both;} .fd-bras-gauche{flex:0 0 min(300px,38%);display:flex;flex-direction:column;gap:14px;align-items:center;position:relative;} .fd-bras-img{width:min(210px,76%);height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.75));} .fd-bras-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;} .fd-bras-slot{ background:linear-gradient(#111,#050505); border:1px solid #3a3a3a;border-radius:10px; padding:7px;cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .fd-bras-slot img{display:block;width:100%;height:auto;} .fd-bras-slot:hover, .fd-bras-slot:focus-visible{border-color:#f3c263;transform:translateY(-2px);} .fd-bras-slot.actif{ border-color:#f3c263; box-shadow:0 0 14px rgba(243,194,99,.28), inset 0 0 12px rgba(243,194,99,.10); } .fd-bras-consigne{font-style:italic;font-size:13.5px;color:#9a9a9a;text-align:center;margin:0;} .fd-bras-carte{ flex:1;min-width:0;align-self:flex-start; border:1px solid #3a3a3a;border-radius:10px;overflow:hidden; background:linear-gradient(#0e0e0e,#060606); box-shadow:0 4px 18px rgba(0,0,0,.45); } .fd-bras-carte-titre{ background:linear-gradient(to right,#590302,#bf1111,#590302); color:#fff;font-weight:700;font-size:17px;text-align:center;padding:10px 12px; } .fd-bras-carte-corps{padding:16px 22px 18px;} .fd-bras-carte-corps p{margin:0 0 .8em;text-align:justify;} .fd-bras-cite{font-style:italic;color:#cfcfcf;padding-left:14px;border-left:3px solid #bf1111;} /* ---- ÉTOILES CACHÉES de la fiche Sulyvahn (gabarit fandom : le style .etoile-fiche du gabarit wiki ne s'applique pas ici) ---- */ #fiche[data-gabarit="fandom"] .etoile-fiche{ position:absolute;left:calc(50% - 24px);top:calc(50% - 24px); width:48px;height:auto;cursor:pointer;z-index:6; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } #fiche[data-gabarit="fandom"] .indice-etoile{cursor:pointer;} #fiche[data-gabarit="fandom"] .fd-quote{position:relative;} /* 1 — les deux « Chaos » de la citation : seul indice = le curseur « main » au survol (via .indice-etoile posée en JS tant que pas résolu) ; au clic ils s'allument comme des braises sombres et RESTENT rouges (même après F5) */ /* ⚠ PAS de transition ici : le panneau de preview (le nôtre ET celui de l'owner) GÈLE les transitions → une transition color figée resterait bloquée sur la couleur héritée (grise), la persistance rouge après F5 ne se verrait pas. Le rouge s'applique donc D'UN COUP (l'embrasement est net, accompagné du son). */ .fd-chaos.etincelle{color:#ff6a3d;text-shadow:0 0 8px rgba(255,90,40,.9),0 0 18px rgba(140,20,20,.75);} /* 3 — Zead : soulignement pointillé + curseur « ? » = « il y a quelque chose ici », mais UNIQUEMENT tant que l'étoile n'est pas prise (.indice-etoile posée/retirée en JS) — une fois récupérée, le nom redevient du texte normal */ .fd-zead{position:relative;} #fiche[data-gabarit="fandom"] .fd-zead.indice-etoile{cursor:help;border-bottom:1px dotted rgba(243,194,99,.55);} #fiche[data-gabarit="fandom"] .fd-zead.indice-etoile:hover{color:#ffe2a1;border-bottom-color:#ffe2a1;text-shadow:0 0 9px rgba(243,194,99,.7);} /* 4 — l'Ensorceleur : la spirale hypnotique qui naît sur le portrait */ .fd-ib-portrait-wrap{position:relative;line-height:0;} .fd-hypno{ position:absolute;inset:0;pointer-events:none;opacity:0; transition:opacity .5s ease; background:conic-gradient(from 0deg, transparent 0 7%, rgba(10,0,0,.6) 11% 19%, transparent 23% 34%, rgba(150,25,25,.5) 38% 46%, transparent 50% 61%, rgba(10,0,0,.6) 65% 73%, transparent 77% 88%, rgba(150,25,25,.5) 92% 99%, transparent 100%); -webkit-mask:radial-gradient(circle at 50% 45%, #000 26%, transparent 70%); mask:radial-gradient(circle at 50% 45%, #000 26%, transparent 70%); animation:fdHypnoTourne 7s linear infinite; } .fd-ib-portrait-wrap.hypno-actif .fd-hypno{opacity:.4;} .fd-ib-portrait-wrap.hypno-emprise .fd-hypno{opacity:.7;animation-duration:2.4s;} .fd-ib-portrait-wrap.hypno-emprise .fd-ib-portrait{filter:brightness(.82) contrast(1.05);transition:filter .5s ease;} @keyframes fdHypnoTourne{to{transform:rotate(360deg);}} /* ---- étoiles Dakaam ---- */ /* 1 — la chaîne de la Lance : wrap pour poser l'étoile + secousse au clic */ .fd-chaine-wrap{position:relative;display:block;} #fiche[data-gabarit="fandom"] img.indice-etoile:hover{filter:drop-shadow(0 0 10px rgba(243,194,99,.55));} .fd-secoue{animation:fdSecoue .35s ease;} @keyframes fdSecoue{0%,100%{transform:translate(0,0);}20%{transform:translate(-3px,1px);}40%{transform:translate(3px,-1px);}60%{transform:translate(-2px,0);}80%{transform:translate(2px,1px);}} /* 2 — l'instinct : le frisson du portrait quand il te repère */ .fd-frisson{animation:fdFrisson .5s ease;} @keyframes fdFrisson{0%,100%{transform:translate(0,0);}25%{transform:translate(1.5px,-1px);}50%{transform:translate(-1.5px,1px);}75%{transform:translate(1px,1px);}} /* 3 — la seule ligne : la phrase-fêlure (indice = curseur + lueur au survol) */ .fd-ligne{position:relative;} #fiche[data-gabarit="fandom"] .fd-ligne.indice-etoile:hover{color:#ffe2a1;text-shadow:0 0 9px rgba(243,194,99,.6);} /* ---- étoiles Deon ---- */ .deon-portrait-wrap{position:relative;display:block;} /* le halo bleu clair d'Yggdrasil : calque FIXE plein écran sur (jamais dans la scène = piège du conteneur transformé) ; l'intensité + l'ampleur de l'inset box-shadow sont pilotées par le JS à chaque tick (panneau-safe, pas de transition dont on dépend). pointer-events:none, sous la barre (z-50). */ .deon-ygg-halo{position:fixed;inset:0;pointer-events:none;z-index:45;} .deon-ygg-halo-fin{transition:opacity .8s ease;opacity:0;} /* les « marques au contour des yeux » de Freedom : une lueur rouge-violet qui pulse sur le portrait quand la contrainte échoue au 3e essai */ .deon-libre{animation:deonLibre 1.7s ease;} @keyframes deonLibre{ 0%,100%{box-shadow:none;filter:none;} 25%,70%{box-shadow:0 0 22px 5px rgba(190,40,60,.6), inset 0 0 30px rgba(138,95,201,.45);filter:saturate(1.2);} } @media (prefers-reduced-motion: reduce){ .fd-hypno,.fd-secoue,.fd-frisson,.deon-libre{animation:none;} } @media (max-width:720px){ #fiche[data-gabarit="fandom"] .boite-int{padding:0 4px 26px;} .fd-banniere{height:88px;} .fd-titre-ligne{padding-top:12px;} .fd-infobox{float:none;width:100%;margin:6px 0 18px;} .fd-sommaire{min-width:0;width:100%;} .fd-imgs{gap:26px;} .fd-vignette img{height:auto;width:min(74vw,340px);} /* les miniatures flottantes restent flottantes mais plus étroites ; le bras passe en colonne (cases au-dessus, carte dessous) */ .fd-thumb{width:46%;} .fd-thumb.droite{margin-left:14px;} .fd-thumb.gauche{margin-right:14px;} .fd-bras{flex-direction:column;} .fd-bras-gauche{flex:0 0 auto;width:100%;} .fd-quote.interne{margin:1.4em 0;} /* tableaux d'équipement : image au-dessus du texte */ .fd-table-corps{flex-direction:column;align-items:center;gap:14px;} .fd-table-img{flex:0 0 auto;max-width:70%;} .fd-table-texte{width:100%;} /* abilitytable : tout s'empile (type au-dessus du nom, médias au-dessus) */ .fd-ab-tete{flex-direction:column;} .fd-ab-type{flex:0 0 auto;border-right:0;border-bottom:1px solid #c4c4c4;} .fd-ab-corps{flex-direction:column;} .fd-ab-medias{flex:0 0 auto;border-right:0;border-bottom:1px solid #c4c4c4;width:100%;box-sizing:border-box;} .fd-ab-media{max-width:min(86vw,420px);} } /* ============================================================ SKIN « HUNTERPEDIA » du gabarit fandom (data-univers ajouté 2026-07-18 pour Deon, 1er perso fandom d'un autre univers que l'AoT). La STRUCTURE reste celle du gabarit ; ces overrides la peignent aux couleurs du VRAI wiki HxH (sondées sur hunterxhunter.fandom.com) : page CLAIRE #f2f2f2 posée sur l'artwork « Continent Sombre » du wiki, texte #3a3a3a, liens verts #337800, accents #519c51, police Rubik (déjà chargée). Sulyvahn/Dakaam (sans data-univers HxH) ne changent PAS. ============================================================ */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"]{ /* fond transparent : l'illustration est un calque FIXE sur (voir ci-dessous). ⚠ un background:…fixed posé ICI est PIÉGÉ par le transform de sceneIn → il se dimensionne sur la scène (immense) au lieu du viewport = zoomé sur un coin (bug owner 2026-07-18) ; même piège/solution que Lexinum. */ background:transparent; color:#3a3a3a; } /* le fond « Continent Sombre » de l'owner (Gemini) : calque plein écran FIXE sur , immobile au scroll, dimensionné sur le viewport (center/cover) — pas sur la scène. Remplace l'artwork du wiki dont le centre noir donnait un fond « noir » derrière la feuille. */ /* le fond est devenu un asset d'UNIVERS (docx Aldia : « le placer dans le dossier Hunter x Hunter pour être cohérent ») — Deon ET Aldia le partagent ; la copie images/Deon/fiche-fond.jpg reste en secours, inutilisée */ body:has(#fiche.active[data-perso="deon"])::before, body:has(#fiche.active[data-perso="aldia"])::before{ content:"";position:fixed;inset:0;z-index:0; background:#0a0a12 url("../images/Hunter x Hunter/fiche-fond.jpg") center/cover no-repeat; } /* la « page » wiki : feuille claire arrondie en haut, ombrée sur le fond */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .boite-fiche{ background:#f2f2f2;border-radius:12px;margin-top:16px; box-shadow:0 0 36px rgba(0,0,0,.6); } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .boite-int{padding:0 28px 44px;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-titre-ligne{border-bottom-color:#c4c4c4;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] h1.fd-titre{color:#000;} /* liens wiki : vert Hunterpedia ; « page morte » = rouge MediaWiki clair */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-lien{color:#337800;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-lien-rouge{color:#ba0000;} /* citation d'ouverture façon Fandom (owner 2026-07-18, réf. screen Gon) : barre ÉPAISSE de la couleur FÉTICHE du perso (--fq, posée en inline) à gauche + fond en DÉGRADÉ de cette couleur (gauche) vers blanc (droite) ; les GROS guillemets typographiques reviennent (on garde display:flex du gabarit — un conteneur flex n'empiète JAMAIS sur l'infobox flottante, contrairement au display:block que j'avais mis = c'était ça le chevauchement). .interne (citations de section) non touchée. */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-quote:not(.interne){ border-left:5px solid rgb(var(--fq,81,156,81));border-radius:0 6px 6px 0; /* dégradé étiré vers la droite (le côté clair n'arrive qu'à ~85 % de la boîte, pour Aldia ET Deon) ; le côté clair = la couleur crème de la FEUILLE (#f2f2f2, owner 2026-07-18) au lieu du blanc, pour que la citation se fonde dans la page au lieu de trancher dessus */ background:linear-gradient(to right, rgba(var(--fq,81,156,81),.18), #f2f2f2 85%); padding:13px 22px;margin:16px 4px 26px; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-quote-marque{color:rgb(var(--fq,81,156,81));} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-quote-texte, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-quote.interne .fd-quote-texte{color:#3a3a3a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-quote-auteur{color:#54595d;} /* sommaire : boîte blanche, filet vert dégradé (écho des bandeaux) */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-sommaire{ background:#fff;border-color:#c4c4c4;box-shadow:0 3px 14px rgba(0,0,0,.12); } /* sommaire façon « Contents » Fandom (owner 2026-07-18, réf. screen) : titre noir à filet gris fin, entrées SOMBRES au repos ; au survol la LIGNE ENTIÈRE se surligne en vert pâle et le texte passe au vert */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-titre{ color:#000;border-image:none;border-bottom:1px solid #c4c4c4; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ico{color:#3a3a3a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-toggle{color:#337800;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-toggle:hover .fd-som-mot, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-toggle:focus-visible .fd-som-mot{color:#519c51;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-crochet{color:#969696;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-num{color:#3a3a3a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-lien{color:#3a3a3a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:hover, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:focus-visible{background:rgba(81,156,81,.16);} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:hover .fd-som-lien, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:hover .fd-som-num, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:focus-visible .fd-som-lien, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-som-ligne:focus-visible .fd-som-num{color:#337800;} /* le symbole ♂ de l'infobox */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-symb{color:#337800;font-weight:400;} /* infobox : le portable-infobox du wiki — bord vert 2px, bandeaux verts à texte NOIR, colonne des clés teintée (rgba(81,156,81,.3), mesuré) */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-infobox{ background:#fdfdfd;border:2px solid #519c51;padding:3px; --fd-rad-in:calc(var(--fd-rad) - 3px); /* emboîte l'arrondi interne sous le padding */ } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-bandeau{ background:rgba(81,156,81,.85);color:#000;margin-top:3px; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-titre{margin-top:0;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-rang{gap:0;padding:0;margin-top:3px;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-cle{ background:rgba(81,156,81,.3);color:#3a3a3a;padding:7px 9px; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-val{ background:rgba(81,156,81,.08);color:#3a3a3a;padding:7px 10px; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-val i{color:#6a6a6a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-sous{color:#6a6a6a;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-fleche{color:#337800;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-fleche:hover{color:#519c51;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-point{border-color:#337800;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-ib-point.actif{background:#337800;} /* sections : titres noirs à filet gris clair ; petits titres VERTS (l'équivalent HxH de l'or du skin AoT) */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-section h2{color:#000;border-bottom-color:#c4c4c4;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-section h3, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-section h4{color:#337800;} /* vignettes/miniatures : la miniature MediaWiki claire (cadre + coussin) */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-vignette img, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-thumb img, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-thumb video{ /* padding 0 (owner 2026-07-18) : plus de « coussin » blanc entre la bordure et l'image des vignettes */ border:1px solid #c8ccd1;background:#fff;padding:0;box-sizing:border-box; } /* …mais pas l'étoile cachée posée dans une vignette */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-thumb img.etoile-fiche{ border:none;background:none;padding:0; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-vignette figcaption, #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-thumb figcaption{color:#54595d;} /* liste à puces : puces vertes */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-liste li::marker{color:#519c51;} /* TABLEAUX D'ÉQUIPEMENT du skin HxH (owner 2026-07-18) : même composition que les fiches SNK (bandeau-titre, image | texte) mais aux couleurs de la fiche claire — bandeau DORÉ (l'or des ornements, écho de la citation et des titres Nen), corps papier à léger voile jade. Sulyvahn/Dakaam gardent leur tableau sombre à bandeau rouge. */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-table{ border:1px solid #c4c4c4;background:#f9f9f9; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-table-titre{ background:linear-gradient(to right, rgba(216,184,78,.16), rgba(216,184,78,.55), rgba(216,184,78,.16)); color:#3a3a3a;border-bottom:1px solid #c4c4c4; } #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .fd-table-corps{ background:rgba(76,169,124,.08); } /* les VRAIS liens externes (Wikipédia…) : la petite flèche MediaWiki */ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] a.fd-lien[href^="http"]::after{ content:"\2197";font-size:.72em;vertical-align:super;margin-left:1px; } @media (max-width:720px){ #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .boite-int{padding:0 10px 30px;} #fiche[data-gabarit="fandom"][data-univers="hunter-x-hunter"] .boite-fiche{margin-top:8px;border-radius:8px;} } /* ============================================================ FICHE APÉDION — mise en scène sur-mesure (data-perso="apedion", PAS un gabarit) : thème Bloodborne « Orphan of Kos » + foudre. Page ENTIÈREMENT NOIRE. PLUIE dessinée en canvas sur (2 calques FIXES : .apd-pluie z-0 tombe DERRIÈRE la boîte de texte (z-1), .apd-pluie-avant z-3 DEVANT — même sandwich que les bulles de Lexinum ; tout position:fixed lié à la scène vit sur ). Prologue en Georgia avec ABERRATION CHROMATIQUE rouge/bleu (text-shadow décalé) ; titres police 'JJK' ; corps CAT Walzhari. ============================================================ */ body:has(#fiche.active[data-perso="apedion"]){background:#000;} #fiche[data-perso="apedion"]{ background:#000; /* corps = blanc cassé chaud (owner « check ce qui passe mieux » entre blanc et la couleur crème) : un bone-white légèrement plus clair que l'ancien crème, cohérent avec les vers du prologue — plus lisible à 24px que du blanc pur sur le noir, sans virer clinique. */ color:#ECE7DC; font-family:'CAT Walzhari', Georgia, serif; /* PAS d'animation d'entrée (même règle que Lexinum) : le transform de sceneIn ferait de #fiche un bloc conteneur/contexte d'empilement → le calque de pluie « fond » (body, z-0) ne passerait plus SOUS la boîte (z-1) et les calques fixes seraient piégés par la scène. */ animation:none; } #fiche[data-perso="apedion"] .fiche-conteneur{ position:relative;z-index:1;max-width:1000px; } /* boîte neutre et transparente : le noir de la page EST le décor */ #fiche[data-perso="apedion"] .boite-fiche{ position:relative;z-index:1; background:transparent;border:none;box-shadow:none; } /* ---- les 2 calques de pluie (canvas, remplis par temple.js) ---- */ .apd-pluie,.apd-pluie-avant{ position:fixed;inset:0;width:100vw;height:100vh; pointer-events:none; } .apd-pluie{z-index:0;} .apd-pluie-avant{z-index:3;} /* sous la barre sticky (z-50) et les boutons son */ /* ---- PROLOGUE : zigzag images/vers (composition du Wix owner, canevas 980 : centrées pleine largeur, latérales ~78 %, couplets alternés) ---- */ #fiche[data-perso="apedion"] .apd-prologue{ display:flex;flex-direction:column; gap:3.2rem; padding:4rem 0 6rem; } #fiche[data-perso="apedion"] .apd-plg-img{margin:0;} #fiche[data-perso="apedion"] .apd-plg-img img{display:block;width:100%;height:auto;} #fiche[data-perso="apedion"] .apd-plg-img.centre{width:100%;} #fiche[data-perso="apedion"] .apd-plg-img.gauche{width:min(78%,760px);align-self:flex-start;} #fiche[data-perso="apedion"] .apd-plg-img.droite{width:min(78%,760px);align-self:flex-end;} /* l'image finale : le titre (Apdion.png trimmé) incrusté entre le personnage et sa lune (position relevée sur le Wix : ~29 % du haut) */ #fiche[data-perso="apedion"] .apd-final{position:relative;} /* ⚠ img.apd-titre-img (avec le type) : sans lui, la règle générique .apd-plg-img img{width:100%} gagne en spécificité et étale le titre. top 36 % = ÉQUIDISTANT entre le bas de la lune (30,2 %) et le haut du personnage (48,1 %), mesuré dans prologue-9-final.jpg (owner). */ #fiche[data-perso="apedion"] .apd-plg-img img.apd-titre-img{ position:absolute;top:36%;left:50%;transform:translateX(-50%); width:61%;height:auto; } #fiche[data-perso="apedion"] .apd-couplet{ margin:0;display:flex;flex-direction:column;gap:.55rem; } #fiche[data-perso="apedion"] .apd-couplet.gauche{align-self:flex-start;text-align:left;} #fiche[data-perso="apedion"] .apd-couplet.droite{align-self:flex-end;text-align:right;} #fiche[data-perso="apedion"] .apd-vers{ display:block; font-family:Georgia,'Times New Roman',serif; font-size:clamp(20px,2.6vw,30px); letter-spacing:.04em; line-height:1.45; color:#ece7dc; /* l'effet « rouge et bleu » (screen owner) = aberration chromatique : ROUGE décalé vers le HAUT-GAUCHE, BLEU vers le BAS-DROITE. Un très léger battement anime l'écart ; le texte reste lisible si l'anim gèle (règle anti-gel : jamais de visibilité dépendante d'une animation). */ text-shadow:-2px -2px rgba(255,25,64,.72), 2px 2px rgba(0,162,255,.72); animation:apdAberration 3.4s ease-in-out infinite; } @keyframes apdAberration{ 0%,100%{text-shadow:-2px -2px rgba(255,25,64,.72), 2px 2px rgba(0,162,255,.72);} 50% {text-shadow:-3px -3px rgba(255,25,64,.8), 3px 3px rgba(0,162,255,.8);} } /* ---- TITRES (police JJK, crème, même aberration rouge↖/bleu↘) ---- */ #fiche[data-perso="apedion"] .apd-titre-page{ font-family:'JJK', Georgia, serif;font-weight:400; font-size:clamp(56px,9vw,104px); text-align:right; padding-right:6%; color:#f0e9c0;letter-spacing:.04em; margin:1.4rem 0 2rem; text-shadow:-3px -2px rgba(190,35,35,.85), 3px 2px rgba(14,110,125,.8); } #fiche[data-perso="apedion"] .apd-titre{ font-family:'JJK', Georgia, serif;font-weight:400; font-size:clamp(34px,4.6vw,50px); color:#ece4b8;letter-spacing:.04em; margin:3rem 0 1.4rem; text-shadow:-2px -1px rgba(190,35,35,.7), 2px 1px rgba(14,110,125,.65); } /* ---- corps de texte (CAT Walzhari, 24px — le Wix est à 25) ---- */ #fiche[data-perso="apedion"] .apd-texte p{ font-size:24px;line-height:1.75;text-align:justify; margin:0 0 1.15rem; } /* mots colorés en GRAS (owner : les noms de sorts — gras synthétique, CAT Walzhari n'a qu'une graisse) */ #fiche[data-perso="apedion"] .apd-mot{color:#F4F0B0;font-weight:700;} /* ---- HAUT DE FICHE : intro + sommaire à gauche, profil à droite ---- */ #fiche[data-perso="apedion"] .apd-haut{ display:grid;grid-template-columns:1.15fr .95fr;gap:3rem; align-items:start; margin:1.5rem 0 1rem; } /* profil : texte ET bordures en #C7FAE4 (owner) */ #fiche[data-perso="apedion"] .apd-profil{ border:2px solid rgba(199,250,228,.9); border-radius:26px; padding:1.8rem 2.1rem; position:relative; } #fiche[data-perso="apedion"] .apd-profil::before{ content:"";position:absolute;inset:7px; border:1px solid rgba(199,250,228,.55);border-radius:19px; pointer-events:none; } #fiche[data-perso="apedion"] .apd-prof-rang{ font-family:'JJK', Georgia, serif; font-size:clamp(22px,2.4vw,29px); color:#C7FAE4; margin:.55rem 0; } #fiche[data-perso="apedion"] .apd-prof-val{color:#C7FAE4;} #fiche[data-perso="apedion"] .apd-som-titre{ font-family:'JJK', Georgia, serif;font-weight:400; font-size:clamp(30px,3.4vw,40px); color:#d9b95c;text-align:center; width:min(100%,440px); margin:2.4rem auto .9rem; text-shadow:-2px -1px rgba(190,35,35,.55), 2px 1px rgba(14,110,125,.5); } #fiche[data-perso="apedion"] .apd-sommaire{ border:2px solid rgba(222,209,140,.85); border-radius:22px; padding:1.2rem 1.8rem; position:relative; width:min(100%,440px); margin:0 auto; } #fiche[data-perso="apedion"] .apd-sommaire::before{ content:"";position:absolute;inset:6px; border:1px solid rgba(222,209,140,.5);border-radius:16px; pointer-events:none; } #fiche[data-perso="apedion"] .apd-sommaire ul{list-style:none;margin:0;padding:0;} #fiche[data-perso="apedion"] .apd-som-lien{ font-family:'JJK', Georgia, serif; font-size:clamp(22px,2.3vw,28px); color:#efe6bb; background:none;border:none;cursor:pointer; display:block;text-align:left; padding:.4rem 0; } #fiche[data-perso="apedion"] .apd-som-lien:hover, #fiche[data-perso="apedion"] .apd-som-lien:focus-visible{color:#C7FAE4;} #fiche[data-perso="apedion"] .apd-som-lien:active{color:#F4F0B0;} /* ---- APPARENCE ---- */ #fiche[data-perso="apedion"] .apd-flow{display:flow-root;} /* cadre « relief » : l'image (fond transparent) déborde PAR-DESSUS la bordure gauche ET la bordure haute du cadre. La tête dépasse en haut : l'image est remontée de la hauteur de la ligne de coupe de la cape (80px natifs = 8 % de la largeur de l'image, mesuré dans le png) pour que la bordure haute se cale PILE sur la coupe droite de la cape — le padding-bottom compense pour que la bordure basse reste au bas de l'image. Remonté de 260px (le titre « Apparence » arrive à peu près au centre vertical de l'image, comme sur le Wix) ; marge gauche 4.2rem pour que le débord de 46px ne chevauche pas le texte. */ #fiche[data-perso="apedion"] .apd-cadre-relief{ float:right; width:min(33%,320px); /* remonté à -258 : l'image monte → sa BASE remonte (le paragraphe 1 dégage 2-3 lignes pleines EN DESSOUS) ET le titre « Apparence » se recentre sur l'image (l'owner accepte qu'il dépasse en vertical). */ margin:-258px 0 .35rem 4.2rem; border:2px solid rgba(232,226,200,.9); border-radius:6px; /* PAS de padding-bottom : le margin-top négatif de l'img réduit la hauteur du cadre d'autant → la bordure basse reste d'elle-même au bas de l'image (vérifié par mesure — une « compensation » recréait un bandeau vide sous l'image). */ } #fiche[data-perso="apedion"] .apd-cadre-relief img{ display:block; width:calc(100% + 46px);max-width:none; margin-left:-46px; /* -12.5% : la bordure HAUTE se cale au niveau où le CÔTÉ DROIT (la volute de l'aile) commence — mesuré à 7,6 % de la hauteur du png. En dessous de cette ligne l'image remplit toute la largeur → plus aucun trou noir dans le coin haut-droit ; seule la TÊTE (bien plus haute) passe par-dessus la bordure = l'effet relief voulu. */ margin-top:-12.5%; } /* l'image des ailes : le texte LONGE son contour droit (polygone calculé depuis l'alpha du png — %s relatifs à la boîte de l'image, marges nulles pour que le polygone reste exact ; l'écart vient de shape-margin) */ #fiche[data-perso="apedion"] .apd-ailes{ float:left; width:min(46%,420px);height:auto; /* ⚠ marge DROITE = le VRAI levier pour écarter le texte de l'aile en HAUT (owner ×3 « aucun changement ») : shape-outside est PLAFONNÉ au bord de l'image, et comme l'aile bombe JUSQU'AU bord (mesuré : écart 1px ligne 2), ni un polygone >100 % ni shape-margin ne peuvent pousser le texte plus à droite. La marge droite élargit la BOÎTE-marge (le texte s'y arrête), donc décale bien le texte (mesuré 607→639). Le polygone continue d'épouser l'aile plus bas (paragraphes suivants). */ margin:0 32px 0 0; /* polygone 30 bandes = le VRAI contour opaque de l'aile (plus de creux forcé en haut : c'est lui qui ramenait le texte SUR l'aile aux lignes 2-4). Le texte épouse maintenant la vraie silhouette. */ /* haut du polygone poussé de +2,5 % (~10px) : les lignes 2-4 (« en une paire d'ailes… », « combat, », « d'un ballet macabre ») frôlaient le renflement de l'aile (owner) — un x >100 % est permis et pousse le texte un peu plus à droite que le bord réel */ shape-outside:polygon(0% 0%, 99% 1.7%, 102.2% 5%, 102.4% 8.3%, 101.7% 11.7%, 101.4% 15%, 101.4% 18.3%, 98.7% 21.7%, 91.4% 25%, 84.7% 28.3%, 80.8% 31.7%, 86.8% 35%, 90.2% 38.3%, 90.6% 41.7%, 90.4% 45%, 88.8% 48.3%, 86.1% 51.7%, 79.6% 55%, 71.4% 58.3%, 59.1% 61.7%, 59.1% 65%, 55.8% 68.3%, 52.2% 71.7%, 62.7% 75%, 68.8% 78.3%, 75.3% 81.7%, 86.1% 85%, 85.9% 88.3%, 73.6% 91.7%, 92.1% 95%, 57.5% 98.3%, 0% 100%); shape-margin:30px; } /* ---- alternance des titres de sections (Exorcisme = centré, screens) ---- */ #fiche[data-perso="apedion"] .apd-section.droite .apd-titre{text-align:right;} #fiche[data-perso="apedion"] .apd-section.centre .apd-titre{text-align:center;} /* ---- images flottantes simples (Personnalité, Aptitudes) ---- */ #fiche[data-perso="apedion"] .apd-flot{ width:min(40%,380px);height:auto; } #fiche[data-perso="apedion"] .apd-flot.droite{float:right;margin:0 0 1.2rem 2.4rem;} #fiche[data-perso="apedion"] .apd-flot.gauche{float:left;margin:0 2.4rem 1.2rem 0;} /* ---- TABLEAUX (Arme = rouge, Exorcisme = menthe — screens owner) ---- bandeau-titre arrondi + double liseré (bordure 2px + filet interne 1px) ; rangée = image à gauche 36 % | texte à droite, séparés d'un double filet vertical ; .inverse = texte à gauche / image à droite (capacités). */ #fiche[data-perso="apedion"] .apd-table{ margin:1.7rem 0; border:2px solid var(--tb); border-radius:14px; position:relative; overflow:hidden; /* le bandeau épouse les angles arrondis */ } #fiche[data-perso="apedion"] .apd-table::after{ content:"";position:absolute;inset:5px; border:1px solid var(--tb);border-radius:9px; pointer-events:none;opacity:.75; } #fiche[data-perso="apedion"] .apd-table.rouge{--tb:#B5391B;} #fiche[data-perso="apedion"] .apd-table.menthe{--tb:#C7FAE4;} #fiche[data-perso="apedion"] .apd-t-tete{ font-family:'CAT Walzhari', Georgia, serif; font-size:clamp(22px,2.6vw,30px); text-align:center; padding:.55rem 1rem .6rem; margin:5px 5px 0; /* laisse passer le filet interne */ border-radius:9px 9px 0 0; } #fiche[data-perso="apedion"] .apd-table.rouge .apd-t-tete{ background:linear-gradient(180deg,#c2511f,#8e2410); color:#fff2df; } #fiche[data-perso="apedion"] .apd-table.menthe .apd-t-tete{ background:linear-gradient(180deg,#defbee,#aeeed2); color:#5c1a12; } #fiche[data-perso="apedion"] .apd-t-rang{ display:grid;grid-template-columns:36% 1fr; align-items:center; position:relative; } #fiche[data-perso="apedion"] .apd-t-rang.inverse{grid-template-columns:1fr 36%;} /* DOUBLE FILET VERTICAL entre les 2 colonnes = 2 pseudo-lignes PLEINE HAUTEUR posées sur la rangée (les bordures de cellule s'arrêtaient à la hauteur du contenu → « ligne incomplète », owner). Elles s'arrêtent au filet interne du tableau (top/bottom 5px) ; sous un bandeau-titre, la ligne monte jusqu'à lui (top 0). */ #fiche[data-perso="apedion"] .apd-t-rang::before, #fiche[data-perso="apedion"] .apd-t-rang::after{ content:"";position:absolute;top:5px;bottom:5px;width:1px; background:var(--tb);pointer-events:none; } #fiche[data-perso="apedion"] .apd-t-rang::before{left:36%;} #fiche[data-perso="apedion"] .apd-t-rang::after{left:calc(36% + 6px);} #fiche[data-perso="apedion"] .apd-t-rang.inverse::before{left:auto;right:36%;} #fiche[data-perso="apedion"] .apd-t-rang.inverse::after{left:auto;right:calc(36% + 6px);} #fiche[data-perso="apedion"] .apd-t-tete + .apd-t-rang::before, #fiche[data-perso="apedion"] .apd-t-tete + .apd-t-rang::after{top:0;} #fiche[data-perso="apedion"] .apd-t-img{ align-self:stretch;display:flex;flex-direction:column;justify-content:center; gap:14px;padding:1.1rem; } #fiche[data-perso="apedion"] .apd-t-img img{display:block;width:100%;height:auto;} #fiche[data-perso="apedion"] .apd-t-texte{ padding:1.4rem 1.6rem; } #fiche[data-perso="apedion"] .apd-t-texte p:last-child{margin-bottom:0;} /* les tableaux MENTHE se COLLENT en un seul grand tableau (owner — même recette que l'équipement de Toad) : bordures superposées (-2px), angles arrondis seulement aux 4 coins extérieurs du groupe, filets internes et bandeaux mis à plat aux jonctions. */ #fiche[data-perso="apedion"] .apd-table.menthe + .apd-table.menthe{ margin-top:calc(-1.7rem - 2px); border-top-left-radius:0;border-top-right-radius:0; } #fiche[data-perso="apedion"] .apd-table.menthe:has(+ .apd-table.menthe){ border-bottom-left-radius:0;border-bottom-right-radius:0; } #fiche[data-perso="apedion"] .apd-table.menthe + .apd-table.menthe::after{ border-top-left-radius:0;border-top-right-radius:0; } #fiche[data-perso="apedion"] .apd-table.menthe:has(+ .apd-table.menthe)::after{ border-bottom-left-radius:0;border-bottom-right-radius:0; } #fiche[data-perso="apedion"] .apd-table.menthe + .apd-table.menthe .apd-t-tete{ border-radius:0; } /* rangée pleine largeur (Extension du Territoire) : bannière-titre image au tout début, illustration centrée SOUS le texte */ #fiche[data-perso="apedion"] .apd-t-plein{padding:1.5rem 1.8rem 1.8rem;} #fiche[data-perso="apedion"] .apd-t-banniere{ display:block;width:min(92%,820px);height:auto; margin:.4rem auto 1.6rem; } #fiche[data-perso="apedion"] .apd-t-illustration{ /* même largeur que le texte au-dessus (owner) = toute la largeur intérieure de la rangée pleine */ display:block;width:100%;height:auto; margin:1.4rem auto .2rem; } /* mots-clés verts (noms de sorts — screens : Communion Éthérée…) */ #fiche[data-perso="apedion"] .apd-mot-vert{color:#C7FAE4;font-weight:700;} /* ---- le § d'AMBIANCE du Territoire : « vous y êtes » — Georgia italique centré, écho du prologue (même aberration rouge↖/bleu↘, adoucie) ---- */ /* ⚠ p.apd-ambiance AVEC le type + placé APRÈS .apd-texte p dans le fichier : à spécificité égale c'est la DERNIÈRE règle qui gagne */ #fiche[data-perso="apedion"] p.apd-ambiance{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:21px;line-height:1.95; text-align:center; max-width:680px; margin:2.4rem auto 1.2rem; color:#e6e2d5; text-shadow:-1.5px -1.5px rgba(255,25,64,.5), 1.5px 1.5px rgba(0,162,255,.5); } /* ---- L'ÉTOILE DE LA FOUDRE (bannière du Territoire) ---- */ #fiche[data-perso="apedion"] .indice-etoile{cursor:pointer;} #fiche[data-perso="apedion"] .apd-t-banniere.indice-etoile:hover{ filter:drop-shadow(0 0 12px rgba(199,250,228,.55)); } #fiche[data-perso="apedion"] .apd-t-plein{position:relative;} /* les conteneurs des étoiles cachées doivent être position:relative (l'étoile s'y pose en absolu au centre) */ #fiche[data-perso="apedion"] .apd-ambiance{position:relative;} #fiche[data-perso="apedion"] .etoile-fiche{ position:absolute;left:calc(50% - 26px);top:calc(50% - 26px); width:52px;height:auto;cursor:pointer;z-index:6; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } /* l'étoile de la foudre : posée au point d'impact (left/top en JS) → recentrée sur ce point, elle ignore le centrage par défaut ci-dessus */ #fiche[data-perso="apedion"] .apd-etoile-foudre{ left:auto;top:auto;transform:translate(-50%,-50%); } /* l'étoile de la CURIOSITÉ : FIXE au centre de l'écran (vit sur , hors #fiche → styles autonomes) pour rester visible après le défilement */ .apd-etoile-ecran{ position:fixed;left:calc(50% - 30px);top:36vh; width:60px;height:auto;cursor:pointer;z-index:120; filter:drop-shadow(0 0 14px rgba(255,220,80,.9)); } /* ② BERCEUSE : « respiration » TRÈS douce du § d'ambiance (indice, pas de halo — juste un léger scale) */ @keyframes apdRespire{0%,100%{transform:scale(1);}50%{transform:scale(1.014);}} #fiche[data-perso="apedion"] .apd-respire{ animation:apdRespire 4.6s ease-in-out infinite;transform-origin:center; } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="apedion"] .apd-respire{animation:none;} } /* ③ NODULES : les 3 images de l'Arme deviennent cliquables (indice = curseur) */ #fiche[data-perso="apedion"] .apd-cliquable{cursor:pointer;} #fiche[data-perso="apedion"] .apd-secoue{animation:apdSecoue .4s ease;} @keyframes apdSecoue{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-4px) rotate(-1deg);} 50%{transform:translateX(5px) rotate(1deg);} 80%{transform:translateX(-3px);} } /* le FLASH de l'éclair (plein écran, décoratif — pointer-events none, retiré par timer : rien ne dépend de son animation, règle anti-gel) */ .apd-flash{ position:fixed;inset:0;z-index:60;pointer-events:none; background:radial-gradient(ellipse at 50% 18%, rgba(214,228,255,.92), rgba(148,175,255,.35) 45%, rgba(0,0,20,0) 78%); animation:apdFlash .7s ease-out forwards; } @keyframes apdFlash{ 0%{opacity:0;} 6%{opacity:1;} 18%{opacity:.25;} 26%{opacity:.85;} 100%{opacity:0;} } .apd-eclair{ position:fixed;inset:0;width:100vw;height:100vh;z-index:61;pointer-events:none; animation:apdEclair .62s steps(1) forwards; } @keyframes apdEclair{ 0%{opacity:1;} 55%{opacity:.35;} 70%{opacity:.9;} 100%{opacity:0;} } /* ---- NOTES : liste à puces ---- */ #fiche[data-perso="apedion"] .apd-liste{ margin:0;padding-left:1.5em; font-size:24px;line-height:1.75; } #fiche[data-perso="apedion"] .apd-liste li{margin:.5rem 0;} #fiche[data-perso="apedion"] .apd-liste li::marker{color:#F4F0B0;} @media (max-width:720px){ #fiche[data-perso="apedion"] .apd-prologue{gap:2.2rem;padding:2.5rem 0 4rem;} #fiche[data-perso="apedion"] .apd-plg-img.gauche, #fiche[data-perso="apedion"] .apd-plg-img.droite{width:92%;} #fiche[data-perso="apedion"] .apd-titre-page{text-align:center;padding-right:0;} #fiche[data-perso="apedion"] .apd-haut{grid-template-columns:1fr;gap:2rem;} #fiche[data-perso="apedion"] .apd-texte p{font-size:20px;} /* plus de place pour les flottantes : elles passent en blocs centrés (et le cadre-relief redescend dans le flux) */ #fiche[data-perso="apedion"] .apd-cadre-relief{ float:none;width:82%;margin:0 auto 1.4rem 46px; } #fiche[data-perso="apedion"] .apd-ailes{ float:none;width:80%;margin:0 auto 1.4rem;display:block; shape-outside:none; } #fiche[data-perso="apedion"] .apd-flot, #fiche[data-perso="apedion"] .apd-flot.gauche, #fiche[data-perso="apedion"] .apd-flot.droite{ float:none;width:78%;margin:0 auto 1.3rem;display:block; } /* tableaux en 1 colonne : image au-dessus du texte (les doubles filets verticaux n'ont plus de sens → cachés, un filet sous l'image suffit) */ #fiche[data-perso="apedion"] .apd-t-rang, #fiche[data-perso="apedion"] .apd-t-rang.inverse{grid-template-columns:1fr;} #fiche[data-perso="apedion"] .apd-t-rang::before, #fiche[data-perso="apedion"] .apd-t-rang::after{display:none;} #fiche[data-perso="apedion"] .apd-t-rang.inverse .apd-t-texte{order:2;} #fiche[data-perso="apedion"] .apd-t-rang.inverse .apd-t-img{order:1;} #fiche[data-perso="apedion"] .apd-t-img, #fiche[data-perso="apedion"] .apd-t-rang.inverse .apd-t-img{ border:none;border-bottom:1px solid var(--tb); max-width:78%;margin:0 auto; } #fiche[data-perso="apedion"] .apd-t-texte, #fiche[data-perso="apedion"] .apd-t-rang.inverse .apd-t-texte{ border:none;margin:0;padding:1.1rem 1.2rem; } #fiche[data-perso="apedion"] .apd-liste{font-size:20px;} } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="apedion"] .apd-vers{animation:none;} } /* ============================================================ BREVSHKET — PROLOGUE (scène #prologue réutilisée, surcouche data-perso : le noir total écrase l'océan de Lexinum). 1. .bvk-cinema = la vidéo d'intro plein écran (regardée en entier → la suite se révèle) ; 2. .bvk-suite = les 5 visuels qui émergent du noir au défilement ; 3. le bouton d'entrée. ============================================================ */ #prologue[data-perso="brevshket"]{background:#000;} #prologue[data-perso="brevshket"] .bvk-cinema{ position:relative;min-height:100vh;box-sizing:border-box; display:flex;align-items:center;justify-content:center; padding:5vh 4vw 7vh; } #prologue[data-perso="brevshket"] .bvk-cinema video{ display:block;width:auto;height:auto; max-width:min(1500px,96vw);max-height:82vh; background:#000; box-shadow:0 0 90px rgba(89,18,124,.35); } /* le ▶ de secours (autoplay sonore refusé par le navigateur) */ #prologue[data-perso="brevshket"] .bvk-lancer{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem; letter-spacing:.3em;text-transform:uppercase;color:#fff; background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.85); padding:1rem 2.2rem;cursor:pointer; } #prologue[data-perso="brevshket"] .bvk-lancer:hover, #prologue[data-perso="brevshket"] .bvk-lancer:focus-visible{ background:rgba(89,18,124,.45);box-shadow:0 0 28px rgba(137,45,183,.5);outline:none; } /* le ▼ s'allume sous la vidéo une fois qu'elle est finie */ #prologue[data-perso="brevshket"] .bvk-indice{ position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%); color:#cf9df5;font-size:1.3rem;opacity:0;pointer-events:none; transition:opacity 1.2s ease .4s; } #prologue[data-perso="brevshket"] .bvk-cinema.finie .bvk-indice{ opacity:.9;animation:bvkIndice 2.2s ease-in-out infinite; } @keyframes bvkIndice{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(9px);} } /* le « Passer ▸ » (dès la 2e visite) : recoloré laboratoire */ #prologue[data-perso="brevshket"] .plg-passer{ background:rgba(18,4,28,.55);border-color:rgba(255,255,255,.35); } #prologue[data-perso="brevshket"] .plg-passer:hover, #prologue[data-perso="brevshket"] .plg-passer:focus-visible{ background:rgba(89,18,124,.55); } /* la suite n'existe qu'une fois la vidéo terminée */ #prologue[data-perso="brevshket"] .bvk-suite{display:flex;flex-direction:column;} #prologue[data-perso="brevshket"] .bvk-suite[hidden]{display:none;} #prologue[data-perso="brevshket"] .bvk-plg-bloc{ min-height:150vh;box-sizing:border-box; display:flex;align-items:center;justify-content:center; padding:0 4vw; } #prologue[data-perso="brevshket"] .bvk-plg-visu{ display:block;width:min(92vw,980px);height:auto; box-shadow:0 0 80px rgba(89,18,124,.3); opacity:0;transform:translateY(38px) scale(.985); transition:opacity 1.3s ease, transform 1.3s ease; } #prologue[data-perso="brevshket"] .bvk-plg-bloc.visible .bvk-plg-visu{ opacity:1;transform:none; } #prologue[data-perso="brevshket"] .bvk-plg-fin{min-height:120vh;} /* le bouton d'entrée : JAMAIS de fondu d'opacité (règle anti-gel, un bouton figé invisible avalerait les clics) */ #prologue[data-perso="brevshket"] .bvk-entrer{ font-family:'Roboto',sans-serif;font-weight:300;font-size:1.02rem; letter-spacing:.32em;text-transform:uppercase;color:#fff; background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.85); padding:1.15rem 2.8rem;cursor:pointer; transition:background .25s ease, box-shadow .25s ease; } #prologue[data-perso="brevshket"] .bvk-entrer:hover, #prologue[data-perso="brevshket"] .bvk-entrer:focus-visible{ background:rgba(89,18,124,.4);box-shadow:0 0 34px rgba(137,45,183,.55); outline:none; } @media (prefers-reduced-motion: reduce){ #prologue[data-perso="brevshket"] .bvk-plg-visu{opacity:1;transform:none;transition:none;} #prologue[data-perso="brevshket"] .bvk-cinema.finie .bvk-indice{animation:none;} } /* ============================================================ FICHE BREVSHKET — sur-mesure (data-perso="brevshket") : page entièrement NOIRE, tout en ROBOTO, accent VIOLET #59127C (le violet du tableau de profil Wix), bordures blanches 1px. ============================================================ */ body:has(#fiche.active[data-perso="brevshket"]){background:#000;} #fiche[data-perso="brevshket"]{ background:#000;color:#e9e6ee; font-family:'Roboto',sans-serif; animation:none; /* même règle que Lexinum/Apédion (calques/contextes) */ } #fiche[data-perso="brevshket"] .fiche-conteneur{max-width:1060px;} #fiche[data-perso="brevshket"] .boite-fiche{ background:transparent;border:none;box-shadow:none; } /* ---- en-tête : titre géant, portraits, tableau de profil ---- */ #fiche[data-perso="brevshket"] .bvk-entete{ display:flex;flex-direction:column;align-items:center; gap:2.4rem;padding:3.2rem 0 1.2rem; } #fiche[data-perso="brevshket"] .bvk-nom{ position:relative; font-family:'Roboto',sans-serif;font-weight:900; font-size:clamp(3rem,9vw,5.6rem);letter-spacing:.12em; color:#fff;text-align:center;margin:0 0 -1.2rem; text-shadow:0 0 38px rgba(137,45,183,.45); /* GLITCH robotique (owner « plus agressif ») : (a) le texte de base flash en aberration chromatique (text-shadow, jamais de transform/opacité sur l'élément — règle anti-gel + révélation .bvk-rev) ; (b) DEUX calques jumeaux ::before/::after (data-texte) en mode « screen » se décalent et se tranchent en bandes (clip-path) → vrai effet écran qui décroche. Figé = texte blanc net, toujours lisible. */ animation:bvkGlitchNom 3.8s step-end infinite; } #fiche[data-perso="brevshket"] .bvk-nom::before, #fiche[data-perso="brevshket"] .bvk-nom::after, #fiche[data-perso="brevshket"] .bvk-titre-txt::before, #fiche[data-perso="brevshket"] .bvk-titre-txt::after{ content:attr(data-texte); position:absolute;left:0;top:0;width:100%;height:100%; text-align:inherit;letter-spacing:inherit;text-transform:inherit; pointer-events:none;text-shadow:none; mix-blend-mode:screen; /* aligné = invisible ; décalé = frange colorée */ } #fiche[data-perso="brevshket"] .bvk-nom::before{color:#ff2d5a;animation:bvkTrancheA 3.8s step-end infinite;} #fiche[data-perso="brevshket"] .bvk-nom::after {color:#12e9ff;animation:bvkTrancheB 3.8s step-end infinite;} #fiche[data-perso="brevshket"] .bvk-titre-txt{position:relative;display:inline-block;} #fiche[data-perso="brevshket"] .bvk-titre-txt::before{color:#ff2d5a;animation:bvkTrancheA 4.6s step-end infinite;} #fiche[data-perso="brevshket"] .bvk-titre-txt::after {color:#12e9ff;animation:bvkTrancheB 4.6s step-end infinite;} #fiche[data-perso="brevshket"] .bvk-sous-nom{ margin:0;color:#b9a6c9;font-weight:300;letter-spacing:.34em; text-transform:uppercase;font-size:clamp(.68rem,1.6vw,.92rem); text-align:center; } /* le PANNEAU d'en-tête : portraits + tableau de profil COLLÉS (owner : plus d'espace entre les deux — bordures superposées -1px) */ #fiche[data-perso="brevshket"] .bvk-panneau{ width:min(100%,720px);display:flex;flex-direction:column; } /* ---- carrousel (portraits + sceptre) : échange par DISPLAY. Habillage DISCRET (owner) : légende et flèches invisibles tant qu'on ne survole pas le carrousel ; au doigt, tout reste visible. ---- */ #fiche[data-perso="brevshket"] .bvk-carrousel{position:relative;width:min(100%,720px);} /* ⚠ classe SCOPÉE bvk-portrait (pas « portrait » nu — le site a une règle globale .portrait{padding:12px;border-radius:6px} qui créait un cadre noir de 13px + coins arrondis autour de l'image, owner). L'image remplit toute la boîte ; coins arrondis SEULEMENT en HAUT (le bas se colle au profil) */ #fiche[data-perso="brevshket"] .bvk-carrousel.bvk-portrait{ border:1px solid #fff;background:#000;width:100%; border-radius:7px 7px 0 0;overflow:hidden; } #fiche[data-perso="brevshket"] .bvk-diapo{display:none;margin:0;position:relative;} #fiche[data-perso="brevshket"] .bvk-diapo.actif{display:block;} #fiche[data-perso="brevshket"] .bvk-diapo img{display:block;width:100%;height:auto;} /* légende / flèches / points : révélés au survol du carrousel. ⚠ PAS de transition d'opacité (le panneau de preview la GÈLE → les flèches restaient bloquées à 0 « survol sans effet », owner) : bascule INSTANTANÉE par état :hover, jamais gelable. */ #fiche[data-perso="brevshket"] .bvk-diapo figcaption{ position:absolute;left:0;right:0;bottom:0; background:rgba(89,18,124,.8);color:#fff; font-size:15px;font-weight:500;text-align:center;padding:.38rem .5rem; opacity:0; } /* flèches nues (plus de cercle noir) : invisibles au repos, à demi révélées au survol du carrousel, pleines au survol direct */ #fiche[data-perso="brevshket"] .bvk-fleche{ position:absolute;top:50%;transform:translateY(-50%); background:none;border:none;padding:.2rem .6rem; color:#fff;font-size:2.8rem;line-height:1;cursor:pointer; text-shadow:0 0 12px rgba(0,0,0,.9); opacity:0; } #fiche[data-perso="brevshket"] .bvk-fleche.g{left:.35rem;} #fiche[data-perso="brevshket"] .bvk-fleche.d{right:.35rem;} #fiche[data-perso="brevshket"] .bvk-points{ position:absolute;top:.65rem;right:.85rem;display:flex;gap:6px; opacity:0; } #fiche[data-perso="brevshket"] .bvk-points i{ width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35); } #fiche[data-perso="brevshket"] .bvk-points i.actif{background:#fff;} #fiche[data-perso="brevshket"] .bvk-carrousel:hover .bvk-diapo figcaption, #fiche[data-perso="brevshket"] .bvk-carrousel:focus-within .bvk-diapo figcaption, #fiche[data-perso="brevshket"] .bvk-carrousel:hover .bvk-points, #fiche[data-perso="brevshket"] .bvk-carrousel:focus-within .bvk-points{opacity:1;} #fiche[data-perso="brevshket"] .bvk-carrousel:hover .bvk-fleche, #fiche[data-perso="brevshket"] .bvk-carrousel:focus-within .bvk-fleche{opacity:.45;} /* ⚠ le survol DIRECT d'une flèche doit reprendre le dessus sur la règle « carrousel survolé » (qui a une spécificité plus forte, .45 gagnait, owner : « aucun changement en pointant la flèche ») → on requalifie avec le carrousel ET la flèche survolés = spécificité supérieure */ #fiche[data-perso="brevshket"] .bvk-carrousel:hover .bvk-fleche:hover, #fiche[data-perso="brevshket"] .bvk-carrousel:focus-within .bvk-fleche:focus-visible{opacity:1;outline:none;} /* au doigt (pas de survol possible) : tout reste visible */ @media (pointer:coarse){ #fiche[data-perso="brevshket"] .bvk-diapo figcaption, #fiche[data-perso="brevshket"] .bvk-points{opacity:1;} #fiche[data-perso="brevshket"] .bvk-fleche{opacity:.55;} } /* ---- le tableau de profil (l'accent violet du Wix), collé sous le carrousel (bordures blanches superposées) ---- */ #fiche[data-perso="brevshket"] .bvk-profil{ width:100%;border:1px solid #fff;margin-top:-1px;box-sizing:border-box; display:flex;flex-direction:column;background:rgba(10,4,16,.35); /* coins arrondis SEULEMENT en BAS → avec le carrousel (arrondi en haut) et la couture -1px, l'ensemble forme UN SEUL grand tableau (owner) */ border-radius:0 0 7px 7px;overflow:hidden; } #fiche[data-perso="brevshket"] .bvk-prof-tete{ background:#59127C;color:#fff;font-weight:700; font-size:clamp(1.1rem,2.6vw,1.42rem);letter-spacing:.06em; text-align:center;padding:.55rem .5rem; } /* même fine séparation horizontale que les rangées au-dessus des bandeaux « Statut général » / « Vitalité » (pas le 1er, « Profil », en haut du tableau). ⚠ le trait est le MÊME que celui des rangées (1px rgba blanc .15) mais il est TRANSLUCIDE : sur une rangée il laisse voir le fond sombre (→ gris clair), sur un bandeau il laissait voir le VIOLET du bandeau (→ violet pâle, autre teinte, owner). background-clip:padding-box empêche le violet de se peindre SOUS le trait → il laisse voir le même fond sombre que les rangées = rendu identique. */ #fiche[data-perso="brevshket"] .bvk-prof-tete:not(:first-child){ border-top:1px solid rgba(255,255,255,.15); background-clip:padding-box; } #fiche[data-perso="brevshket"] .bvk-prof-rang{ display:flex;align-items:stretch;border-top:1px solid rgba(255,255,255,.15); } #fiche[data-perso="brevshket"] .bvk-prof-cle{ flex:0 0 min(178px,38%);background:#59127C;color:#fff; font-weight:700;font-size:15.5px;padding:.5rem .75rem; display:flex;align-items:center; } #fiche[data-perso="brevshket"] .bvk-prof-val{ flex:1;font-weight:300;font-size:15.5px;color:#f2eef6; padding:.5rem .85rem;display:flex;align-items:center;flex-wrap:wrap;gap:.1rem; } /* symboles de genre en texte (♂ / ⚲), collés à leur mot */ #fiche[data-perso="brevshket"] .bvk-symb{ color:#cf9df5;font-size:1.15em;line-height:1;margin-right:.14em; } /* la jauge d'Exploitation (50 %) : se remplit à l'arrivée à l'écran */ #fiche[data-perso="brevshket"] .bvk-jauge{ display:flex;align-items:center;gap:.75rem;width:100%; } #fiche[data-perso="brevshket"] .bvk-jauge i{ display:block;flex:1;height:10px;border-radius:6px; border:1px solid rgba(255,255,255,.35);overflow:hidden;position:relative; } #fiche[data-perso="brevshket"] .bvk-jauge i::before{ content:"";position:absolute;top:0;left:0;bottom:0;width:0; background:linear-gradient(90deg,#59127C,#a63ce8); transition:width 1.4s ease .25s; } #fiche[data-perso="brevshket"] .bvk-profil.rempli .bvk-jauge i::before{width:var(--pc);} #fiche[data-perso="brevshket"] .bvk-jauge b{font-weight:700;font-size:14px;} /* ---- sections ---- */ #fiche[data-perso="brevshket"] .bvk-section{padding:2.7rem 0 0;} #fiche[data-perso="brevshket"] .bvk-titre{ font-family:'Roboto',sans-serif;font-weight:700; font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:.04em;color:#fff; margin:0 0 1.4rem;display:flex;align-items:center;gap:.85rem; animation:bvkGlitchTitre 4.6s step-end infinite; } /* désynchroniser les bouffées d'une section à l'autre (h2 + ses tranches) */ #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(2n) .bvk-titre, #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(2n) .bvk-titre-txt::before, #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(2n) .bvk-titre-txt::after{animation-delay:-1.7s;} #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(3n) .bvk-titre, #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(3n) .bvk-titre-txt::before, #fiche[data-perso="brevshket"] .bvk-section:nth-of-type(3n) .bvk-titre-txt::after{animation-delay:-3.1s;} /* le flash d'aberration du texte de base (couche 1) — plus fréquent/fort */ @keyframes bvkGlitchNom{ 0%,55%,100%{text-shadow:0 0 38px rgba(137,45,183,.45);} 56%{text-shadow:-6px 0 rgba(255,45,90,.9), 6px 0 rgba(18,233,255,.85), 0 0 38px rgba(137,45,183,.55);} 58%{text-shadow:7px 0 rgba(255,45,90,.8), -7px 0 rgba(18,233,255,.75), 0 0 40px rgba(137,45,183,.6);} 60%{text-shadow:-3px 0 rgba(255,45,90,.7), 3px 0 rgba(18,233,255,.6), 0 0 38px rgba(137,45,183,.45);} 62%{text-shadow:0 0 38px rgba(137,45,183,.45);} 84%{text-shadow:0 0 38px rgba(137,45,183,.45);} 85%{text-shadow:5px 0 rgba(255,45,90,.8), -5px 0 rgba(18,233,255,.7), 0 0 38px rgba(137,45,183,.5);} 87%{text-shadow:-6px 0 rgba(255,45,90,.7), 6px 0 rgba(18,233,255,.65), 0 0 38px rgba(137,45,183,.45);} 89%{text-shadow:0 0 38px rgba(137,45,183,.45);} } @keyframes bvkGlitchTitre{ 0%,60%,100%{text-shadow:none;} 61%{text-shadow:-5px 0 rgba(255,45,90,.85), 5px 0 rgba(18,233,255,.75);} 63%{text-shadow:5px 0 rgba(255,45,90,.7), -5px 0 rgba(18,233,255,.6);} 65%{text-shadow:-2px 0 rgba(255,45,90,.6), 2px 0 rgba(18,233,255,.5);} 66%{text-shadow:none;} 88%{text-shadow:none;} 89%{text-shadow:4px 0 rgba(255,45,90,.6), -4px 0 rgba(18,233,255,.5);} 91%{text-shadow:-4px 0 rgba(255,45,90,.5), 4px 0 rgba(18,233,255,.45);} 92%{text-shadow:none;} } /* les DEUX tranches jumelles (couche 2) : décalage + découpe en bandes. Aligné (0/100 %) = invisible sous le texte blanc ; bursts = écran qui décroche. Rouge et cyan partent en sens opposés. */ @keyframes bvkTrancheA{ 0%,55%,63%,84%,89%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);} 56%{transform:translate(-8px,-2px);clip-path:inset(0 0 64% 0);} 58%{transform:translate(7px,1px);clip-path:inset(42% 0 24% 0);} 60%{transform:translate(-9px,2px);clip-path:inset(74% 0 0 0);} 85%{transform:translate(6px,1px);clip-path:inset(16% 0 50% 0);} 87%{transform:translate(-7px,-1px);clip-path:inset(56% 0 12% 0);} } @keyframes bvkTrancheB{ 0%,55%,63%,84%,89%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);} 56%{transform:translate(8px,2px);clip-path:inset(0 0 56% 0);} 58%{transform:translate(-7px,-1px);clip-path:inset(38% 0 30% 0);} 60%{transform:translate(9px,-2px);clip-path:inset(70% 0 0 0);} 85%{transform:translate(-6px,-1px);clip-path:inset(12% 0 54% 0);} 87%{transform:translate(7px,1px);clip-path:inset(52% 0 16% 0);} } #fiche[data-perso="brevshket"] .bvk-titre::before{ content:"";flex:0 0 auto;width:9px;height:1em;border-radius:3px; background:linear-gradient(180deg,#a63ce8,#59127C); } #fiche[data-perso="brevshket"] .bvk-texte p, #fiche[data-perso="brevshket"] .bvk-equip-txt p, #fiche[data-perso="brevshket"] .bvk-capa-txt p{ margin:0 0 1.15em;font-size:19px;line-height:1.65; text-align:justify;font-weight:400;color:#e6e2ea; } #fiche[data-perso="brevshket"] .bvk-mot{color:#cf9df5;font-weight:700;} #fiche[data-perso="brevshket"] .bvk-liste{margin:.2em 0 1.2em;padding-left:1.4em;} #fiche[data-perso="brevshket"] .bvk-liste li{ margin:.5em 0;font-size:19px;line-height:1.6;text-align:justify;color:#e6e2ea; } #fiche[data-perso="brevshket"] .bvk-liste li::marker{color:#a63ce8;} /* révélation douce au défilement (classe posée par minuterie — anti-gel) */ #fiche[data-perso="brevshket"] .bvk-rev{ opacity:0;transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; } #fiche[data-perso="brevshket"] .bvk-rev.visible{opacity:1;transform:none;} /* ---- Compagnon : le Protocole LYA ---- Le gif a un fond NOIR PUR (vérifié pixel par pixel) : en mode de fusion « screen » sur la page noire, son carré DISPARAÎT — seul l'hologramme reste, et le halo (::before) passe à travers lui au lieu de dessiner un rectangle (owner : « le halo doit suivre les contours du gif »). */ #fiche[data-perso="brevshket"] .bvk-lya{ position:relative;margin:1.4rem auto 0;width:min(92%,455px); } #fiche[data-perso="brevshket"] .bvk-lya::before{ content:"";position:absolute;inset:-12%; background:radial-gradient(closest-side, rgba(137,45,183,.34), rgba(137,45,183,.1) 55%, transparent 78%); pointer-events:none; } #fiche[data-perso="brevshket"] .bvk-lya img{ position:relative;display:block;width:100%;height:auto; mix-blend-mode:screen; } /* ---- Équipement : image à gauche / titre + texte à droite ---- */ #fiche[data-perso="brevshket"] .bvk-equip{ display:flex;gap:2.4rem;align-items:center;margin:0 0 2.8rem; } #fiche[data-perso="brevshket"] .bvk-equip-img{flex:0 0 min(38%,300px);} #fiche[data-perso="brevshket"] .bvk-equip-img .bvk-carrousel{width:100%;} #fiche[data-perso="brevshket"] .bvk-carrousel.petit{ border:1px solid rgba(255,255,255,.85);background:rgba(10,4,16,.35); } #fiche[data-perso="brevshket"] .bvk-carrousel.petit .bvk-fleche{font-size:2rem;} #fiche[data-perso="brevshket"] .bvk-equip-txt{flex:1;} #fiche[data-perso="brevshket"] .bvk-equip-txt h3{ font-family:'Roboto',sans-serif;font-weight:300; font-size:clamp(1.3rem,2.6vw,1.6rem);letter-spacing:.12em; color:#fff;text-align:center;margin:0 0 1.1rem; } /* ---- Capacité : la Transcendance eidétique — le NOM centré au-dessus, puis image + texte centrés l'un sur l'autre (owner) ---- */ #fiche[data-perso="brevshket"] .bvk-capa{margin-top:.4rem;} #fiche[data-perso="brevshket"] .bvk-capa-titre{ font-family:'Roboto',sans-serif;font-weight:700; font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:.1em; color:#fff;text-align:center;margin:0 0 1.4rem; } #fiche[data-perso="brevshket"] .bvk-capa-corps{ display:flex;gap:2.4rem;align-items:center; } #fiche[data-perso="brevshket"] .bvk-capa-img{flex:0 0 min(30%,256px);} #fiche[data-perso="brevshket"] .bvk-capa-img img{ display:block;width:100%;height:auto; filter:drop-shadow(0 0 24px rgba(137,45,183,.4)); } #fiche[data-perso="brevshket"] .bvk-capa-txt{flex:1;} /* ============ ÉTOILES CACHÉES (le scope wiki/fandom ne s'applique pas ici) ==== */ #fiche[data-perso="brevshket"] .indice-etoile{cursor:pointer;} /* ⚠ l'étoile est un posé DANS des conteneurs qui ont chacun une règle « img{width:100%} » (.bvk-capa-img img, .bvk-lya img…) de spécificité (1,2,1) qui écrasait sa largeur 52px → étoile géante (owner). Le sélecteur passe par .boite-int (spécificité (1,3,0) > (1,2,1)) pour reprendre le dessus partout, + mix-blend-mode:normal (sinon elle hériterait du « screen » de .bvk-lya img). */ #fiche[data-perso="brevshket"] .boite-int .etoile-fiche{ position:absolute;left:calc(50% - 26px);top:calc(50% - 26px); width:52px;height:auto;cursor:pointer;z-index:6; mix-blend-mode:normal; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } /* conteneurs des étoiles = position:relative (l'étoile s'y pose en absolu). ⚠ la jauge est DANS le profil (overflow:hidden) → son étoile se pose sur le PANNEAU (sans overflow) pour ne pas être rognée. */ #fiche[data-perso="brevshket"] .bvk-capa-img{position:relative;} #fiche[data-perso="brevshket"] .bvk-panneau{position:relative;} /* ① Transcendance : l'image « évolue » — glow violet croissant (instantané, pas de transition → jamais gelable) */ #fiche[data-perso="brevshket"] .bvk-capa-img img.indice-etoile:hover{ filter:drop-shadow(0 0 30px rgba(166,60,232,.75)) brightness(1.08); } #fiche[data-perso="brevshket"] .bvk-capa-img img.bvk-transc-1{filter:drop-shadow(0 0 26px rgba(166,60,232,.7)) brightness(1.12) saturate(1.2);} #fiche[data-perso="brevshket"] .bvk-capa-img img.bvk-transc-2{filter:drop-shadow(0 0 42px rgba(190,90,255,.85)) brightness(1.28) saturate(1.5) hue-rotate(12deg);} #fiche[data-perso="brevshket"] .bvk-capa-img img.bvk-transc-3{filter:drop-shadow(0 0 64px rgba(220,150,255,1)) brightness(1.7) saturate(1.9);} #fiche[data-perso="brevshket"] .bvk-transc-etape{ position:absolute;left:50%;bottom:-1.5rem;transform:translateX(-50%); white-space:nowrap;color:#cf9df5;font-size:14px;font-style:italic; text-shadow:0 0 10px rgba(166,60,232,.8);pointer-events:none; } /* ② Lya : lueur renforcée pendant qu'on la fixe */ #fiche[data-perso="brevshket"] .bvk-lya.indice-etoile{cursor:help;} #fiche[data-perso="brevshket"] .bvk-lya.bvk-lya-eveil img{ filter:brightness(1.35) drop-shadow(0 0 22px rgba(166,60,232,.9)); } /* ③ jauge : tremblement croissant (amplitude --secousse posée en JS) */ #fiche[data-perso="brevshket"] .bvk-jauge.bvk-force i{animation:bvkForce .32s ease;} @keyframes bvkForce{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(calc(var(--secousse,2px) * -1));} 50%{transform:translateX(var(--secousse,2px));} 80%{transform:translateX(calc(var(--secousse,2px) * -.6));} } /* ---- responsive ---- */ @media (max-width:720px){ #fiche[data-perso="brevshket"] .bvk-texte p, #fiche[data-perso="brevshket"] .bvk-equip-txt p, #fiche[data-perso="brevshket"] .bvk-capa-txt p, #fiche[data-perso="brevshket"] .bvk-liste li{font-size:17px;} #fiche[data-perso="brevshket"] .bvk-equip, #fiche[data-perso="brevshket"] .bvk-capa-corps{ flex-direction:column;align-items:center;gap:1.4rem; } #fiche[data-perso="brevshket"] .bvk-equip-img{flex:0 0 auto;width:min(78%,300px);} #fiche[data-perso="brevshket"] .bvk-capa-img{flex:0 0 auto;width:min(52%,220px);} #fiche[data-perso="brevshket"] .bvk-prof-cle{flex-basis:36%;font-size:14px;} #fiche[data-perso="brevshket"] .bvk-prof-val{font-size:14px;} #prologue[data-perso="brevshket"] .bvk-plg-bloc{min-height:120vh;} } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="brevshket"] .bvk-rev{opacity:1;transform:none;transition:none;} #fiche[data-perso="brevshket"] .bvk-jauge i::before{transition:none;} #fiche[data-perso="brevshket"] .bvk-nom, #fiche[data-perso="brevshket"] .bvk-titre, #fiche[data-perso="brevshket"] .bvk-nom::before, #fiche[data-perso="brevshket"] .bvk-nom::after, #fiche[data-perso="brevshket"] .bvk-titre-txt::before, #fiche[data-perso="brevshket"] .bvk-titre-txt::after{animation:none;} } /* ============================================================ FICHE KHROM — sur-mesure DOOM / FFXVI Titan (or sur noir) Les 5 polices viennent du Wix de l'owner (ufonts wixstatic → fonts/) : DOOM 2016 en 3 variantes (Left = 1re lettre, Text = corps, Right = dernière — les bords biseautés du logo DOOM), Eternal (logo) pour le nom + profil, Eternal UI pour le corps. ============================================================ */ @font-face{ font-family:'Doom 2016 Left'; src:url("../fonts/DoomLeft.woff2") format("woff2"), url("../fonts/DoomLeft.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Doom 2016 Text'; src:url("../fonts/DoomText.woff2") format("woff2"), url("../fonts/DoomText.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Doom 2016 Right'; src:url("../fonts/DoomRight.woff2") format("woff2"), url("../fonts/DoomRight.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Eternal'; src:url("../fonts/Eternal.woff2") format("woff2"), url("../fonts/Eternal.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Eternal UI'; src:url("../fonts/EternalUI.woff2") format("woff2"), url("../fonts/EternalUI.ttf") format("truetype"); font-display:swap; } /* page noire + FOND FIXE = l'artwork Titan doré (9nva1iL) très assombri, sur un calque (jamais background:fixed sur #fiche — piégé par le transform de sceneIn, motif Deon/Lexinum) */ body:has(#fiche.active[data-perso="khrom"]){background:#000;} body:has(#fiche.active[data-perso="khrom"])::before{ content:"";position:fixed;inset:0;z-index:0; background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.82)), #000 url("../images/Khrom/entete-fond.jpg") center/cover no-repeat; } #fiche[data-perso="khrom"]{ background:transparent; position:relative; /* se peint AU-DESSUS du calque z-0 */ color:#f0ece0; animation:none; font-family:'Eternal UI','Nunito',sans-serif; } #fiche[data-perso="khrom"] .fiche-conteneur{max-width:1020px;padding:0 1rem 0;} #fiche[data-perso="khrom"] .boite-fiche, #fiche[data-perso="khrom"] .boite-int{background:transparent;border:none;padding:0;} /* ---- les 3 variantes DOOM d'un titre (helper titreDoom) ---- */ #fiche[data-perso="khrom"] .kh-doom .kh-dg{font-family:'Doom 2016 Left',sans-serif;} #fiche[data-perso="khrom"] .kh-doom .kh-dm{font-family:'Doom 2016 Text',sans-serif;} #fiche[data-perso="khrom"] .kh-doom .kh-dd{font-family:'Doom 2016 Right',sans-serif;} /* ---- en-tête : ornements + KhroM (le fond, lui, est le calque fixe) ---- */ .kh-hero{ display:flex;flex-direction:column;align-items:center; padding:2.8rem 0 0; } .kh-ornement{display:flex;align-items:center;justify-content:center;gap:1.2rem;width:100%;} .kh-ornement .kh-barre{width:min(30%,300px);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));} .kh-ornement .kh-barre.miroir{transform:scaleX(-1);} .kh-embleme{ width:clamp(110px,16vw,168px);border-radius:50%; box-shadow:0 0 0 3px rgba(212,175,55,.75), 0 0 34px rgba(212,175,55,.35), 0 8px 26px rgba(0,0,0,.7); } .kh-titre-jeu{ margin:1.2rem 0 .4rem;line-height:1; font-size:clamp(4.2rem,15vw,10.5rem); color:#fff;font-weight:400; text-shadow:0 0 30px rgba(212,175,55,.5), 0 6px 22px rgba(0,0,0,.85); } /* ---- la vidéo Titan sous le titre (coins droits, comme tout ici) ---- */ .kh-video{display:flex;justify-content:center;margin:1.4rem 0 0;} .kh-video video{ max-width:100%;max-height:74vh; border:2px solid rgba(212,175,55,.55); box-shadow:0 0 36px rgba(212,175,55,.16), 0 10px 30px rgba(0,0,0,.6); } /* le second ornement sous la vidéo : l'emblème de l'Égide (vaisseau fantôme, png détouré) entre les deux barres grecques */ .kh-orn-egide{margin-top:2rem;} .kh-embleme-egide{ width:clamp(96px,13vw,140px);height:auto; filter:drop-shadow(0 0 16px rgba(212,175,55,.25)) drop-shadow(0 6px 16px rgba(0,0,0,.8)); } /* le double filet doré sous les titres (une barre + une plus fine) */ .kh-filet{ height:9px;margin:.5rem 0 1.6rem; border-top:4px solid #D4AF37; border-bottom:2px solid #D4AF37; } /* ---- KHROM + intro + sommaire | infobox à cadre doré ---- */ .kh-haut{ display:grid;grid-template-columns:1fr 350px;gap:2.4rem; align-items:start;margin-top:2.8rem; } .kh-nom{ font-family:'Eternal',sans-serif;font-weight:400; font-size:clamp(3rem,7vw,4.4rem);line-height:1.05; color:#fff;letter-spacing:.04em;margin:0; text-shadow:0 0 22px rgba(212,175,55,.4); } .kh-pres .kh-filet{margin-top:.7rem;margin-bottom:.9rem;} .kh-sous-nom{ font-family:'Eternal',sans-serif;color:#D4AF37; font-size:1.35rem;letter-spacing:.14em;margin:.4rem 0 1.3rem; } #fiche[data-perso="khrom"] p{ font-size:21px;line-height:1.66;text-align:justify;margin:0 0 1.15rem; } /* les couleurs du texte (relevées sur le Wix) */ #fiche[data-perso="khrom"] .kh-t-or{color:#D4AF37;} #fiche[data-perso="khrom"] .kh-t-vif{color:#FFD700;} #fiche[data-perso="khrom"] .kh-t-rge{color:#c81f1f;} #fiche[data-perso="khrom"] .kh-lance{color:#c93030;} #fiche[data-perso="khrom"] .kh-midas{color:#b5bcf0;} #fiche[data-perso="khrom"] .kh-neil{color:#6a76e8;} #fiche[data-perso="khrom"] .kh-ayham{color:#F99B17;} #fiche[data-perso="khrom"] .kh-egide{color:#b5bdf0;} /* sommaire : titre DOOM doré + entrées Eternal */ .kh-sommaire{margin-top:2.1rem;} .kh-som-titre{ font-size:clamp(2rem,5vw,2.9rem);color:#D4AF37;font-weight:400; margin:0 0 .7rem;text-shadow:0 0 18px rgba(212,175,55,.35); } .kh-sommaire ul{list-style:none;margin:0;padding:0;} .kh-sommaire li{margin:0;} .kh-som-lien{ display:block;width:100%;text-align:left; background:none;border:none;cursor:pointer; font-family:'Eternal',sans-serif;font-size:1.28rem;letter-spacing:.08em; color:#e8e2d0;padding:.32rem .5rem;border-left:3px solid rgba(212,175,55,.35); } .kh-som-lien:hover,.kh-som-lien:focus-visible{ color:#FFD700;border-left-color:#FFD700; background:linear-gradient(90deg, rgba(212,175,55,.14), transparent 70%); } .kh-som-lien:active{color:#fff;} /* infobox : le portrait est POSÉ SUR le bas du cadre grec et DÉPASSE par le haut (relief, comme le cadre de la tête d'Apédion) ; il change au survol (échange par VISIBILITY, jamais d'opacité — anti-gel) et le cadre s'ILLUMINE (filtre posé d'un coup, pas de transition). Bande grecque mesurée : ~0,7 → 5,1 % du bord → bas intérieur à 5,2 %. */ .kh-cadre{ position:relative;aspect-ratio:1/1;width:100%; margin-top:16%; /* la place du relief qui dépasse */ cursor:pointer;outline:none; } .kh-cadre .kh-cadre-or{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;} .kh-cadre:hover .kh-cadre-or, .kh-cadre:focus-visible .kh-cadre-or{ filter:brightness(1.65) drop-shadow(0 0 14px rgba(255,215,0,.55)); } .kh-cadre .kh-vue{ position:absolute;bottom:5.2%;left:7%;width:86%;height:116%; object-fit:contain;object-position:bottom center; z-index:2; filter:drop-shadow(0 10px 22px rgba(0,0,0,.7)); } /* la vue du survol (le Don, image paysage) est ZOOMÉE (cover) et posée DEVANT le cadre grec (z-index:2 hérité > cadre z-index:1). Ses bords gauche/droite/ bas sont calés PILE sur le bord INTERNE du liseré (mesuré au pixel sur deco-cadre-or.png : ouverture 5,18 %→94,73 %) = effet « tableau encadré » propre, sans montrer l'image à travers le motif grec (owner). Le HAUT déborde au-dessus du cadre (height 115 % → top ≈ −20 %) = le relief. */ .kh-cadre .kh-vue.deux{ visibility:hidden;object-fit:cover; left:5.18%;width:89.55%;bottom:5.27%;height:115%; } .kh-cadre:hover .kh-vue.un, .kh-cadre:focus-visible .kh-vue.un{visibility:hidden;} .kh-cadre:hover .kh-vue.deux, .kh-cadre:focus-visible .kh-vue.deux{visibility:visible;} .kh-profil{ margin-top:1.4rem;font-family:'Eternal',sans-serif; display:grid;gap:.55rem; border:1px solid rgba(212,175,55,.4); background:rgba(20,16,6,.55);padding:1.1rem 1.2rem; } /* clés en colonne FIXE (owner : toutes les valeurs commencent à la même verticale, comme Irakuna). ⚠ « Affiliation : » ET « Charpentier » ne tiennent pas côte à côte dans les 350px de l'infobox à la taille d'origine → police + interlettrage + gap réduits pour que la valeur la plus longue rentre sans déborder (owner : « Charpentier dépassait du cadre »). */ .kh-prof-rang{display:grid;grid-template-columns:142px 1fr;gap:.7rem;align-items:baseline;} .kh-prof-cle{color:#FFD700;font-size:.95rem;letter-spacing:.02em;white-space:nowrap;} .kh-prof-val{color:#D4AF37;font-size:.95rem;letter-spacing:.02em;line-height:1.4;} .kh-prof-val .kh-egide{color:#b5bdf0;} /* ---- sections : titres alternés gauche/droite, variante DOOM assortie (Left à gauche · Right à droite · Text au centre, owner) ---- */ .kh-section{margin-top:3.6rem;display:flow-root;} .kh-titre{ font-size:clamp(2.5rem,6.5vw,3.7rem);color:#fff;font-weight:400; margin:0;line-height:1.1; text-shadow:0 0 22px rgba(212,175,55,.35), 0 4px 14px rgba(0,0,0,.7); } .kh-titre.kh-al-g{text-align:left;font-family:'Doom 2016 Left',sans-serif;} .kh-titre.kh-al-d{text-align:right;font-family:'Doom 2016 Right',sans-serif;} .kh-titre.kh-al-c{text-align:center;font-family:'Doom 2016 Text',sans-serif;} .kh-h3{ font-family:'Eternal',sans-serif;font-weight:400; color:#FFD700;font-size:1.55rem;letter-spacing:.06em; margin:1.9rem 0 .8rem;clear:both; text-shadow:0 0 14px rgba(212,175,55,.3); } .kh-h3.kh-al-d{text-align:right;} /* vignettes flottantes (images + vidéos) : DOUBLE CADRE doré — bordure interne 1 px #D4AF37 (border), ESPACE de 9 px, bordure externe 3 px #FFD700 (outline décalée : outline-offset), coins DROITS (owner). L'anneau externe déborde de 12 px → les marges du flottant l'absorbent. .cl = repart sous le flottant précédent (Ahri/îlot) */ .kh-flot{width:min(46%,420px);margin:0;} .kh-flot.droite{float:right;margin:14px 12px 1.5rem 2rem;} .kh-flot.gauche{float:left;margin:14px 2rem 1.5rem 12px;} .kh-flot.cl{clear:both;} .kh-flot.petite{width:min(26%,210px);} .kh-flot img,.kh-flot video{ width:100%;display:block; border:1px solid #D4AF37; outline:3px solid #FFD700; outline-offset:9px; box-shadow:0 10px 26px rgba(0,0,0,.65); } .kh-flot.nu img{border:none;outline:none;box-shadow:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.65));} /* ---- Arts : bandeau doré + tableaux de capacités COLLÉS, coins droits ---- */ .kh-art-banniere{ font-family:'Eternal',sans-serif;font-weight:400; font-size:clamp(1.6rem,4vw,2.15rem);letter-spacing:.08em;color:#181205; background:linear-gradient(180deg,#f7dc85,#D4AF37 55%,#a57d1e); text-align:center;padding:.5rem 1rem; box-shadow:0 0 26px rgba(212,175,55,.28), 0 4px 12px rgba(0,0,0,.5); margin:0 0 1.4rem; } .kh-cap{ clear:both; border:2px solid rgba(212,175,55,.55); background:rgba(18,14,5,.62); margin:1.8rem 0 0;overflow:hidden; } /* tableaux voisins COLLÉS : les bordures se superposent (owner) */ .kh-cap + .kh-cap{margin-top:-2px;} .kh-cap-titre{ font-family:'Eternal',sans-serif;font-weight:400;color:#fff; font-size:1.5rem;letter-spacing:.08em;text-align:center; padding:.5rem .9rem; background:linear-gradient(90deg, rgba(212,175,55,.1), rgba(212,175,55,.32) 50%, rgba(212,175,55,.1)); border-bottom:1px solid rgba(212,175,55,.5); text-shadow:0 0 12px rgba(212,175,55,.4); } .kh-cap-corps{display:flex;gap:1.4rem;padding:1.25rem;} .kh-cap-imgs{flex:0 0 36%;display:flex;flex-direction:column;gap:.9rem;align-self:center;} .kh-cap-imgs img{ width:100%;display:block; border:1px solid rgba(212,175,55,.45); box-shadow:0 5px 16px rgba(0,0,0,.5); } .kh-cap-imgs img.nu{border:none;box-shadow:none; filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));} .kh-cap-txt{flex:1;min-width:0;} .kh-cap-txt p:last-child{margin-bottom:0;} .kh-cap-corps.plein{display:block;} /* ---- notes : liste à puces CARRÉES (owner) ---- */ .kh-liste{ list-style:square;margin:0;padding-left:1.5em; } .kh-liste li{ font-size:21px;line-height:1.66;text-align:justify; margin:0 0 1.05rem; } .kh-liste li::marker{color:#D4AF37;} /* ---- les 3 ÉTOILES CACHÉES (DOOM / Titan) ---- */ #fiche[data-perso="khrom"] .indice-etoile{cursor:pointer;} #fiche[data-perso="khrom"] .boite-int .etoile-fiche{ position:absolute;left:calc(50% - 26px);top:calc(50% - 26px); width:52px;height:auto;cursor:pointer;z-index:8; border:none;padding:0;background:none;box-shadow:none; filter:drop-shadow(0 0 9px rgba(255,210,63,.85)); } /* conteneurs qui accueillent une étoile → position:relative */ #fiche[data-perso="khrom"] .kh-video, #fiche[data-perso="khrom"] .kh-cap.kh-cap-etoile, #fiche[data-perso="khrom"] .kh-sous-nom.kh-renegat{position:relative;} /* 1 — le Titan qui s'éveille pendant qu'on soutient son regard */ #fiche[data-perso="khrom"] .kh-video.kh-titan-eveil{ animation:khTitanEveil 3.8s ease forwards; } @keyframes khTitanEveil{ from{filter:none;} to{filter:brightness(1.12) drop-shadow(0 0 26px rgba(226,60,30,.6));} } /* 2 — le Butoir qui TOURNOIE et s'envole hors de la page avant de revenir (clone fixé sur , échappe aux overflow des ancêtres) */ .kh-butoir-vol{ animation:khButoirVol 1.05s cubic-bezier(.34,.62,.4,1) forwards; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)); } @keyframes khButoirVol{ 0%{transform:translate(0,0) rotate(0deg) scale(1);} 16%{transform:translate(6%,3%) rotate(-45deg) scale(1.06);} /* armé */ 50%{transform:translate(122vw,-14vh) rotate(760deg) scale(.55);} /* lancé hors-page, tournoie */ 62%{transform:translate(122vw,-14vh) rotate(980deg) scale(.55);} /* hors champ */ 100%{transform:translate(0,0) rotate(1440deg) scale(1);} /* revient à sa place */ } /* 3 — le sous-nom « Le Renégat » : lueur d'or au survol (indice discret) */ #fiche[data-perso="khrom"] .kh-sous-nom.kh-renegat.indice-etoile:hover{ color:#ffe08a;text-shadow:0 0 12px rgba(255,210,63,.65); } @media (prefers-reduced-motion: reduce){ #fiche[data-perso="khrom"] .kh-video.kh-titan-eveil{animation:none;} } /* ---- responsive ---- */ @media (max-width:900px){ .kh-haut{grid-template-columns:1fr;} .kh-infobox{max-width:400px;margin:0 auto;width:100%;} } @media (max-width:720px){ #fiche[data-perso="khrom"] p, .kh-liste li{font-size:18px;line-height:1.62;} .kh-ornement .kh-barre{width:26%;} .kh-flot.droite,.kh-flot.gauche{ float:none;width:min(calc(100% - 26px),340px);margin:14px auto 1.4rem; } .kh-flot.petite{width:min(52%,210px);} .kh-cap-corps{flex-direction:column;} .kh-cap-imgs{flex:none;width:100%;max-width:340px;margin:0 auto;} } /* ============================================================ FICHE IRAKUNA — « encre & braise » (Naruto) Page charbon, fond Mangekyō fixe, kakemono, sceaux hanko, jutsu par nature. Polices : Shojumaru (titres, accents FR ok) + Shippori Mincho (corps, SUBSET latin + kanji ~126 Ko). ============================================================ */ @font-face{ font-family:'Shojumaru'; src:url("../fonts/Shojumaru.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Shippori Mincho'; src:url("../fonts/ShipporiMincho.ttf") format("truetype"); font-weight:400; font-display:swap; } @font-face{ font-family:'Shippori Mincho'; src:url("../fonts/ShipporiMincho-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; } /* page charbon + FOND FIXE = le wallpaper Mangekyō très assombri, sur un calque (jamais background:fixed sur #fiche — piégé par le transform de sceneIn, motif Deon/Lexinum/Khrom) */ body:has(#fiche.active[data-perso="irakuna"]){background:#0a0709;} body:has(#fiche.active[data-perso="irakuna"])::before{ content:"";position:fixed;inset:0;z-index:0; background: radial-gradient(ellipse at 50% 34%, rgba(10,7,9,.58), rgba(10,7,9,.95) 72%), #0a0709 url("../images/Irakuna/fond-mangekyo.jpg") center 34%/cover no-repeat; } #fiche[data-perso="irakuna"]{ background:transparent; position:relative; /* se peint AU-DESSUS du calque z-0 */ color:#e9e2d4; animation:none; font-family:'Shippori Mincho',Georgia,serif; } /* padding-bas CONTENU (owner : un petit espace vide sous les ornements) — il stoppe aussi la fuite de la margin-bottom de .ir-fin hors de la boîte */ #fiche[data-perso="irakuna"] .fiche-conteneur{max-width:1060px;padding:0 1rem 2.2rem;} #fiche[data-perso="irakuna"] .boite-fiche, #fiche[data-perso="irakuna"] .boite-int{background:transparent;border:none;padding:0;} #fiche[data-perso="irakuna"] p{ font-size:20px;line-height:1.72;text-align:justify;margin:0 0 1.1rem; } /* ---- le sceau HANKO (cachet rouge japonais) — motif signature ---- */ .ir-hanko{ display:inline-grid;place-items:center;flex:none; width:1.35em;height:1.35em; font-family:'Shippori Mincho',serif;font-weight:700;font-size:.7em;line-height:1; color:#f6efe2; background:linear-gradient(160deg,#d0202c,#8e0d16 78%); border-radius:14% 10% 16% 10%; box-shadow:inset 0 0 0 1px rgba(246,239,226,.32), inset 0 0 8px rgba(60,0,0,.5), 0 2px 8px rgba(0,0,0,.55); transform:rotate(-4deg); } /* ---- en-tête : surtitre, nom Shojumaru, alias, colonne de kana ---- */ .ir-hero{position:relative;text-align:center;padding:2.6rem 0 0;} .ir-surtitre{ display:flex;align-items:center;justify-content:center;gap:.7em; font-size:.92rem;letter-spacing:.32em;text-transform:uppercase; color:#b9b2a4;margin:0 0 1.05rem; } .ir-nom{ font-family:'Shojumaru',sans-serif;font-weight:400; font-size:clamp(2.9rem,9vw,5.4rem);line-height:1.04;color:#f2ead9;margin:0; text-shadow:0 0 34px rgba(230,57,46,.5), 0 6px 22px rgba(0,0,0,.85); } .ir-nom-clan{color:#e6392e;text-shadow:0 0 30px rgba(230,57,46,.65), 0 6px 22px rgba(0,0,0,.85);} .ir-alias{ font-size:clamp(1.02rem,2.6vw,1.22rem);color:#cdc5b4; letter-spacing:.06em;margin:.9rem 0 0; } /* ⚠ centrage EXPLICITE avec le type + l'ancêtre : la règle générale « #fiche[…] p » justifie tous les

→ l'alias paraissait à gauche (owner) ; même piège que p.apd-ambiance chez Apédion */ #fiche[data-perso="irakuna"] p.ir-alias{text-align:center;} .ir-pt{color:#c1121f;margin:0 .3em;} /* うちはイラクナ à la verticale, posé au bord du kakemono comme une inscription de rouleau (dans la marge latérale de la page) */ .ir-kana{ position:absolute;top:26px;right:-116px; display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:.5; } .ir-kana-txt{ writing-mode:vertical-rl; font-size:1.22rem;letter-spacing:.34em;color:#cdc5b4; } .ir-kana-hanko{font-size:1.15rem;} /* ---- le KAKEMONO : l'artwork suspendu comme un rouleau japonais ---- */ .ir-kakemono{width:min(520px,92vw);margin:2.4rem auto 0;position:relative;} .ir-tige{ display:block;height:15px;width:calc(100% + 36px);margin-left:-18px; border-radius:9px;position:relative; background:linear-gradient(#453740,#171115 62%,#241b20); box-shadow:0 4px 10px rgba(0,0,0,.6); } .ir-tige.bas{height:12px;} .ir-tige::before,.ir-tige::after{ content:"";position:absolute;top:50%;width:14px;height:14px; transform:translateY(-50%);border-radius:50%; background:radial-gradient(circle at 35% 35%, #a03038, #4a1216 72%); } .ir-tige::before{left:-6px;} .ir-tige::after{right:-6px;} .ir-toile{ position:relative;margin:0 6px;padding:11px; background:linear-gradient(#1d151b,#110c10); border:1px solid rgba(233,226,212,.15); box-shadow:0 18px 44px rgba(0,0,0,.65); } .ir-toile > img{width:100%;display:block;} /* la fente oculaire : deux lueurs rouges qui « perçoivent » le curseur (opacité pilotée en direct par le JS — aucune transition, jamais gelable) */ .ir-oeil{ position:absolute;width:4.6%;aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle, rgba(255,92,66,.95), rgba(255,42,28,.4) 52%, rgba(255,42,28,0) 74%); mix-blend-mode:screen;filter:blur(1px); opacity:.25;pointer-events:none; } /* ---- FEUX FOLLETS (hitodama) dissimulés dans la page ---- */ .ir-follet{ position:absolute;width:24px;height:32px;z-index:6; background:none;border:none;padding:0;cursor:pointer; } .ir-follet::before{ content:"";position:absolute;inset:0; border-radius:50% 50% 46% 54%/62% 62% 38% 38%; background:radial-gradient(ellipse 60% 68% at 50% 62%, rgba(214,255,242,.9), rgba(124,212,192,.55) 46%, rgba(124,212,192,0) 74%); filter:blur(.6px) drop-shadow(0 0 6px rgba(124,212,192,.5)); opacity:.34; animation:irFollet 2.8s ease-in-out infinite; } .ir-follet.allume{cursor:default;} .ir-follet.allume::before{ opacity:1; filter:blur(.4px) drop-shadow(0 0 12px rgba(124,212,192,.95)) drop-shadow(0 0 26px rgba(124,212,192,.5)); } @keyframes irFollet{ 0%,100%{transform:translateY(0) scale(1);} 30%{transform:translateY(-3px) scale(1.06,1.1);} 60%{transform:translateY(-1px) scale(.96,1);} } /* le Genjutsu des trois flammes : NOIR TOTAL instantané plein écran (au-dessus de TOUT, en-tête compris), puis le Mangekyō y tourne, puis fondu de révélation — pointer-events:none et retrait par MINUTERIE (jamais bloquant, règle anti-gel) */ .ir-noir{ position:fixed;inset:0;z-index:700;pointer-events:none; background:#000; display:grid;place-items:center; } .ir-noir.ir-noir-fin{animation:irNoirFin 1s ease forwards;} @keyframes irNoirFin{from{opacity:1;}to{opacity:0;}} .ir-noir-mangekyo{ width:min(200px,42vw); animation:irNoirMangekyo 2.6s cubic-bezier(.16,.84,.3,1) forwards; filter:drop-shadow(0 0 34px rgba(255,50,36,.85)) drop-shadow(0 0 90px rgba(220,30,20,.5)); } @keyframes irNoirMangekyo{ 0%{transform:scale(.12) rotate(-540deg);opacity:0;} 16%{opacity:1;} 100%{transform:scale(1) rotate(120deg);opacity:1;} } /* ---- titres de section : hanko + Shojumaru + trait de pinceau ---- */ .ir-section{margin-top:3.4rem;display:flow-root;position:relative;} .ir-titre{ display:flex;align-items:center;gap:.55em;margin:0; font-family:'Shojumaru',sans-serif;font-weight:400; font-size:clamp(2rem,5.4vw,2.9rem);color:#f2ead9;line-height:1.15; text-shadow:0 0 24px rgba(230,57,46,.35), 0 4px 16px rgba(0,0,0,.8); } .ir-titre.ir-petit{font-size:clamp(1.45rem,3.6vw,1.9rem);} .ir-titre.ir-al-d{justify-content:flex-end;} .ir-titre.ir-al-c{justify-content:center;} /* le trait de pinceau : une ligne d'encre rouge aux bords irréguliers */ .ir-pinceau{ height:7px;margin:.55rem 0 1.5rem; background:linear-gradient(90deg, rgba(193,18,31,0), #c1121f 5%, #7c0d15 45%, #a51420 72%, rgba(193,18,31,0) 98%); clip-path:polygon(0 38%, 4% 8%, 30% 0, 70% 18%, 96% 4%, 100% 46%, 97% 88%, 62% 100%, 24% 84%, 3% 96%, 0 62%); opacity:.92; } .ir-h3{ clear:both;margin:2rem 0 .8rem; font-family:'Shojumaru',sans-serif;font-weight:400; font-size:1.45rem;color:#f0a58e; text-shadow:0 3px 10px rgba(0,0,0,.75); } .ir-h3::before{ content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5em; background:#c1121f;border-radius:15% 35% 20% 40%;transform:rotate(-6deg); } .ir-h3.ir-al-d{text-align:right;} /* ---- le haut : présentation + sommaire | panneau de profil ---- */ .ir-haut{display:grid;grid-template-columns:1fr 360px;gap:2.6rem;align-items:start;margin-top:3rem;} .ir-profil{ position:relative; border:1px solid rgba(233,226,212,.16);border-top:3px solid #c1121f; background:rgba(18,13,16,.72);padding:1.15rem 1.25rem 1.3rem; } .ir-prof-tete{ display:flex;align-items:center;justify-content:center;gap:.7em; margin-bottom:.55rem; font-family:'Shojumaru',sans-serif;font-size:1.5rem;color:#f2ead9; text-shadow:0 0 16px rgba(230,57,46,.35); } .ir-prof-tete img{width:24px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));} /* colonne des clés FIXE (owner : toutes les valeurs commencent à la même verticale) — 148px = « Nature de Chakra », la plus longue, mesurée +marge */ .ir-prof-rang{ display:grid;grid-template-columns:148px 1fr;gap:.85rem; padding:.44rem 0;border-top:1px solid rgba(233,226,212,.1); align-items:baseline; } .ir-prof-cle{ font-weight:700;color:#cf6f5f;font-size:.96rem; letter-spacing:.03em;white-space:nowrap; } .ir-prof-val{font-size:1rem;line-height:1.5;} .ir-att{color:#9a9285;font-size:.9em;} /* le Sharingan animé de la rangée Kekkei Genkai (déclencheur d'étoile ①) */ .ir-sharingan{ float:right;margin:0 0 .3rem .7rem; width:34px;height:34px;background:none;border:none;padding:0;cursor:default; } .ir-sharingan img{width:100%;display:block;filter:drop-shadow(0 0 5px rgba(230,57,46,.45));} .ir-sharingan.indice-etoile{cursor:pointer;} .ir-sharingan.indice-etoile:hover img{filter:drop-shadow(0 0 10px rgba(255,80,60,.85));} .ir-sharingan.ir-sh-1 img{filter:drop-shadow(0 0 10px rgba(255,80,60,.9)) brightness(1.15) saturate(1.3);} .ir-sharingan.ir-sh-2 img{filter:drop-shadow(0 0 16px rgba(255,80,60,1)) brightness(1.3) saturate(1.6);} .ir-sharingan.ir-sh-mangekyo img{ filter:drop-shadow(0 0 22px rgba(255,60,40,1)) brightness(1.45) saturate(1.7); animation:irMangekyo .8s cubic-bezier(.2,1.6,.4,1); } .ir-sharingan.ir-sh-mort{cursor:default;} .ir-sharingan.ir-sh-mort img{filter:grayscale(1) brightness(.6);animation:none;} @keyframes irMangekyo{0%{transform:scale(.55) rotate(-110deg);}100%{transform:scale(1) rotate(0);}} .ir-secoue{animation:irSecousse .3s linear;} @keyframes irSecousse{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(-3px,1px);} 50%{transform:translate(3px,-1px);} 75%{transform:translate(-2px,-1px);} } /* ---- pastilles de nature de chakra (octogone du wiki + nom) ---- */ .ir-chips{display:inline-flex;flex-wrap:wrap;gap:.45em;align-items:center;} .ir-chip{ display:inline-flex;align-items:center;gap:.38em; padding:.14em .6em .14em .4em; font-weight:700;font-size:.85rem;letter-spacing:.04em; border:1px solid rgba(233,226,212,.2);border-radius:3px; background:rgba(10,7,9,.55); } .ir-chip img{width:17px;height:17px;} .ir-chip.katon{color:#f08662;border-color:rgba(230,83,46,.5);} .ir-chip.raiton{color:#ecd06a;border-color:rgba(224,184,60,.5);} .ir-chip.inton{color:#9fe2d3;border-color:rgba(124,212,192,.45);} .ir-chip.autre{color:#b9b2a4;padding:.14em .6em;} /* pastilles à EMBLÈME (Konoha/Anbu/Uchiwa dans l'infobox) : les symboles blancs ont des ratios très variés (l'Anbu est une volute haute) → boîte fixe + contain */ .ir-chip.embleme{color:#e9e2d4;} .ir-chip.embleme img{width:18px;height:18px;object-fit:contain;} /* ---- sommaire : kanji rouge + entrée Mincho, liseré à gauche ---- */ .ir-sommaire{margin-top:2.4rem;} .ir-sommaire .ir-pinceau{margin-bottom:1rem;} .ir-sommaire ul{list-style:none;margin:0;padding:0;} .ir-som-lien{ display:flex;align-items:center;gap:.7em;width:100%;text-align:left; background:none;border:none;border-left:3px solid rgba(193,18,31,.4); cursor:pointer; font-family:'Shippori Mincho',serif;font-size:1.12rem;color:#e9e2d4; padding:.42rem .7rem; } .ir-som-k{font-weight:700;color:#e0554a;font-size:1.02em;} .ir-som-lien:hover,.ir-som-lien:focus-visible{ color:#f5b7a3;border-left-color:#e6392e; background:linear-gradient(90deg, rgba(193,18,31,.18), transparent 70%); } .ir-som-lien:active{color:#fff;} /* ---- vignettes flottantes : monture washi + petit cachet en coin ---- */ .ir-flot{width:min(46%,430px);margin:0;position:relative;} .ir-flot.droite{float:right;margin:6px 0 1.3rem 2rem;} .ir-flot.gauche{float:left;margin:6px 2rem 1.3rem 0;} .ir-flot img{ width:100%;display:block;padding:7px; border:1px solid rgba(233,226,212,.22); background:rgba(233,226,212,.05); box-shadow:0 10px 26px rgba(0,0,0,.6); } .ir-flot::after{ content:"印"; position:absolute;right:-8px;bottom:-8px;width:22px;height:22px; display:grid;place-items:center; font-family:'Shippori Mincho',serif;font-weight:700;font-size:12px;color:#f6efe2; background:linear-gradient(160deg,#d0202c,#8e0d16); border-radius:15% 10% 16% 10%;transform:rotate(-6deg); box-shadow:inset 0 0 0 1px rgba(246,239,226,.3), 0 2px 6px rgba(0,0,0,.5); } .ir-flot.nu img{ border:none;padding:0;background:none;box-shadow:none; filter:drop-shadow(0 0 26px rgba(230,57,46,.3)) drop-shadow(0 8px 18px rgba(0,0,0,.7)); } /* pas de cachet en coin sur un rendu détouré (il flotterait dans le vide) */ .ir-flot.nu::after{display:none;} /* ---- cartes d'équipement (bandeau rouge, image | texte, collées) ---- */ .ir-carte{ clear:both;margin:1.6rem 0 0; border:1px solid rgba(233,226,212,.16); background:rgba(16,12,14,.7); } .ir-carte + .ir-carte{margin-top:-1px;} .ir-carte-tete{ padding:.55rem 1rem;text-align:center; background:linear-gradient(90deg, transparent, rgba(193,18,31,.3) 50%, transparent); border-bottom:1px solid rgba(193,18,31,.4); } .ir-carte-tete h3{ margin:0;font-family:'Shojumaru',sans-serif;font-weight:400; font-size:1.3rem;color:#f2ead9;text-shadow:0 2px 8px rgba(0,0,0,.7); } .ir-carte-corps{display:flex;gap:1.5rem;padding:1.2rem;} .ir-carte-corps.plein{display:block;} .ir-carte-img{flex:0 0 32%;margin:0;position:relative;align-self:center;overflow:hidden;} .ir-carte-img img{ width:100%;display:block; border:1px solid rgba(233,226,212,.18); box-shadow:0 8px 20px rgba(0,0,0,.55); } .ir-carte-txt{flex:1;min-width:0;} .ir-carte-txt p:last-child{margin-bottom:0;} /* la forge (étoile ③) : lueur au survol + gerbe d'étincelles au clic */ #fiche[data-perso="irakuna"] .ir-carte-img img.indice-etoile:hover{ filter:drop-shadow(0 0 18px rgba(255,140,60,.55)) brightness(1.08); } .ir-etincelle{ position:absolute;width:5px;height:5px;border-radius:50%; pointer-events:none;z-index:5; background:radial-gradient(circle,#ffe9a8,#ff8c3a 60%,rgba(255,110,40,0)); animation:irEtincelle .7s ease-out forwards; } @keyframes irEtincelle{ 0%{transform:translate(0,0) scale(1);opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0;} } /* ---- la section Jutsu : un groupe par nature de chakra ---- */ .ir-natgroupe{position:relative;margin-top:2.7rem;} /* ⚠ PAS d'overflow:hidden : il découpait le halo ROND du text-shadow du filigrane kanji en RECTANGLE (owner). Le kanji est bridé côté droit par sa position, il n'a pas besoin d'être clippé. */ .ir-nat-tete{ position:relative;display:flex;align-items:center;gap:.9rem; padding:.45rem .2rem; } .ir-natgroupe.katon .ir-nat-tete{border-bottom:2px solid rgba(230,83,46,.45);} .ir-natgroupe.raiton .ir-nat-tete{border-bottom:2px solid rgba(224,184,60,.45);} .ir-natgroupe.inton .ir-nat-tete{border-bottom:2px solid rgba(124,212,192,.4);} .ir-nat-tete img{width:46px;height:46px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));} .ir-nat-nom{ font-family:'Shojumaru',sans-serif;font-size:2rem;color:#f2ead9; text-shadow:0 3px 12px rgba(0,0,0,.7); } /* le filigrane 火遁 / 雷遁 / 陰遁 (le vrai nom de la nature) : ILLUMINÉ — halo dans sa couleur (text-shadow sans couleur = currentColor) + lente respiration lumineuse (décorative, coupée reduced-motion) */ .ir-nat-kanji{ position:absolute;right:.3rem;top:52%; transform:translateY(-50%) rotate(-3deg); font-weight:700;font-size:4.2rem;line-height:1; opacity:.3;pointer-events:none; text-shadow:0 0 16px, 0 0 42px; animation:irKanjiLueur 4.5s ease-in-out infinite alternate; } @keyframes irKanjiLueur{from{opacity:.22;}to{opacity:.4;}} .ir-natgroupe.katon .ir-nat-kanji{color:#e6532e;} .ir-natgroupe.raiton .ir-nat-kanji{color:#e0b83c;} .ir-natgroupe.inton .ir-nat-kanji{color:#7cd4c0;} .ir-nat-intro{margin-top:1rem;} .ir-jutsu{ position:relative;clear:both;margin:1.4rem 0 0; padding:1rem 1.2rem 1.1rem; background:rgba(16,12,14,.72); border:1px solid rgba(233,226,212,.13);border-left-width:3px; } .ir-jutsu[data-nat="katon"]{border-left-color:#e6532e;} .ir-jutsu[data-nat="raiton"]{border-left-color:#e0b83c;} .ir-jutsu[data-nat="inton"]{border-left-color:#7cd4c0;} .ir-jutsu-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:.5rem;} .ir-jutsu-nom{ margin:0;font-family:'Shojumaru',sans-serif;font-weight:400; font-size:1.32rem;text-shadow:0 2px 8px rgba(0,0,0,.7); } .ir-jutsu[data-nat="katon"] .ir-jutsu-nom{color:#f7a488;} .ir-jutsu[data-nat="raiton"] .ir-jutsu-nom{color:#eed387;} .ir-jutsu[data-nat="inton"] .ir-jutsu-nom{color:#a8e8d9;} .ir-jutsu-txt p:last-child{margin-bottom:0;} /* la chaîne de mudrâs : 印 + sceaux du zodiaque reliés par des flèches */ .ir-mudra{ display:flex;flex-wrap:wrap;align-items:center;gap:.5em; margin:.4rem 0 .95rem;padding:.55rem .7rem; background:rgba(10,7,9,.5); border:1px dashed rgba(233,226,212,.18); } .ir-mudra-lbl{ display:grid;place-items:center;width:24px;height:24px;flex:none; font-family:'Shippori Mincho',serif;font-weight:700;font-size:13px;color:#f6efe2; background:linear-gradient(160deg,#d0202c,#8e0d16); border-radius:15% 10% 16% 10%;transform:rotate(-4deg); box-shadow:inset 0 0 0 1px rgba(246,239,226,.3), 0 2px 6px rgba(0,0,0,.5); margin-right:.3em; } .ir-sceau{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;} .ir-sceau b{font-weight:700;font-size:1.25rem;line-height:1.15;color:#e9e2d4;} .ir-sceau i{font-style:normal;font-size:.66rem;letter-spacing:.06em;color:#9a9285;text-transform:uppercase;} .ir-fleche{color:#cf6f5f;font-size:1rem;} .ir-geste{font-style:italic;color:#cdc5b4;font-size:.96rem;} /* ---- notes : liste à puces carrées, marqueur rouge ---- */ .ir-liste{list-style:square;margin:0;padding-left:1.5em;} .ir-liste li{font-size:20px;line-height:1.7;text-align:justify;margin:0 0 1rem;} .ir-liste li::marker{color:#c1121f;} /* la fin de page : l'éventail du clan entre deux traits d'encre. ⚠ margin-top RÉDUIT (owner) pour que la liste des Notes soit à ÉGALE distance du trait de pinceau au-dessus (24px) et de l'éventail en dessous : la dernière puce a déjà 16px de margin-bottom → 8px ici = 24px de gap. */ .ir-fin{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin:.5rem 0 0;} .ir-fin img{width:32px;opacity:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));} .ir-fin-trait{ height:1px;flex:0 1 180px; background:linear-gradient(90deg, rgba(193,18,31,0), rgba(193,18,31,.6), rgba(193,18,31,0)); } /* ---- le MONDE SPECTRAL (après l'étoile des feux follets) : le Genjutsu reste entrouvert — filigranes plus lumineux, aura spectrale sur la carte de la Frénésie, feux follets décoratifs (non cliquables) ---- */ /* les filigranes kanji BRÛLENT plus fort après l'étoile : glow triplé + respiration plus ample */ #fiche[data-perso="irakuna"].ir-spectral .ir-nat-kanji{ opacity:.6; text-shadow:0 0 20px, 0 0 46px, 0 0 78px; animation-name:irKanjiLueurSpectral; } @keyframes irKanjiLueurSpectral{from{opacity:.42;}to{opacity:.78;}} /* la carte Frénésie s'embrase d'une aura spectrale bien plus marquée + pulsation lente (le Genjutsu qui palpite) */ #fiche[data-perso="irakuna"].ir-spectral .ir-jutsu[data-nat="inton"]{ border-color:rgba(124,212,192,.75); box-shadow:0 0 30px rgba(124,212,192,.16), inset 0 0 26px rgba(124,212,192,.05); animation:irAuraFrenesie 3.4s ease-in-out infinite alternate; } /* respiration DOUCE : le point bas reste bien lumineux (owner : le halo semblait s'éteindre puis se rallumer — l'écart from→to était trop grand) */ @keyframes irAuraFrenesie{ from{box-shadow:0 0 46px rgba(124,212,192,.42), 0 0 88px rgba(124,212,192,.16), inset 0 0 38px rgba(124,212,192,.13); border-color:rgba(140,226,208,.8);} to{box-shadow:0 0 64px rgba(124,212,192,.55), 0 0 120px rgba(124,212,192,.26), inset 0 0 46px rgba(124,212,192,.17); border-color:rgba(160,240,222,.95);} } #fiche[data-perso="irakuna"].ir-spectral .ir-jutsu[data-nat="inton"] .ir-jutsu-nom{ text-shadow:0 0 18px rgba(124,212,192,.7), 0 2px 8px rgba(0,0,0,.7); } .ir-follet-deco{pointer-events:none;} /* ---- ÉTOILES CACHÉES (le scope wiki/fandom ne s'applique pas ici) ---- ⚠ .boite-int dans le sélecteur : spécificité (1,3,0) — l'étoile est un posé dans des conteneurs à règle « img{…} » (leçon Brevshket) */ #fiche[data-perso="irakuna"] .indice-etoile{cursor:pointer;} #fiche[data-perso="irakuna"] .boite-int .etoile-fiche{ position:absolute;left:calc(50% - 26px);top:calc(50% - 26px); width:52px;height:auto;cursor:pointer;z-index:8; border:none;padding:0;background:none;box-shadow:none; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } /* ---- reduced-motion : flammes et secousses immobiles, lueurs fixes ---- */ @media (prefers-reduced-motion: reduce){ .ir-follet::before, .ir-sharingan.ir-sh-mangekyo img, .ir-nat-kanji, .ir-secoue{animation:none !important;} .ir-oeil{opacity:.32;} } /* ---- responsive ---- */ @media (max-width:980px){ .ir-kana{display:none;} } @media (max-width:900px){ .ir-haut{grid-template-columns:1fr;} .ir-profil{max-width:430px;margin:0 auto;width:100%;} } @media (max-width:720px){ #fiche[data-perso="irakuna"] p, .ir-liste li{font-size:17px;line-height:1.66;} .ir-flot.droite,.ir-flot.gauche{ float:none;width:min(100%,360px);margin:6px auto 1.3rem; } .ir-carte-corps{flex-direction:column;} .ir-carte-img{flex:none;width:100%;max-width:300px;margin:0 auto;} .ir-nat-kanji{font-size:3rem;} .ir-jutsu{padding:.85rem .8rem 1rem;} .ir-kakemono{width:min(440px,92vw);} /* les embouts des tiges dépassaient de l'écran (rognés par overflow-x:clip) */ .ir-tige{width:calc(100% + 20px);margin-left:-10px;} .ir-surtitre{letter-spacing:.16em;font-size:.8rem;} } /* ============================================================ FICHE ELIAS — « Mémosphère » (My Hero Academia) Le dossier confidentiel d'un détective : nuit d'encre, or ambré (ses yeux), touche teal (le registre des Alters), photos d'archive, scellés, console de sphères. Sphères de mémoire flottantes sur . Polices : Playfair Display (titres) + Special Elite (machine à écrire) + EB Garamond (corps, déjà déclarée) + Caveat (manuscrit). ============================================================ */ @font-face{ font-family:'Playfair Display'; /* titres old money britanniques (police libre OFL, téléchargée du dépôt officiel Google Fonts) */ src:url("../fonts/PlayfairDisplay.ttf") format("truetype"); font-weight:400 900; font-display:swap; } @font-face{ font-family:'Playfair Display'; src:url("../fonts/PlayfairDisplay-Italic.ttf") format("truetype"); font-weight:400 900; font-style:italic; font-display:swap; } @font-face{ font-family:'Special Elite'; /* la machine à écrire du dossier (police libre Apache, dépôt officiel Google Fonts) */ src:url("../fonts/SpecialElite.ttf") format("truetype"); font-display:swap; } /* le FOND DE NUIT (fixe, sur — jamais en background:fixed sur #fiche, piégé par le transform de sceneIn) : encre bleu-noir + halo ambré en haut à droite (ses yeux) + nappe teal en bas à gauche (la Commission) + deux semis de bokeh doré très discrets (les lumières de Tokyo, au loin) */ body:has(#fiche.active[data-perso="elias"])::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle 2px at 24% 18%, rgba(240,197,104,.16), transparent 3px), radial-gradient(circle 1.5px at 71% 64%, rgba(240,197,104,.12), transparent 3px), radial-gradient(ellipse 60% 45% at 80% 8%, rgba(217,164,65,.12), transparent 70%), radial-gradient(ellipse 55% 42% at 12% 92%, rgba(31,122,102,.14), transparent 70%), radial-gradient(ellipse 90% 70% at 50% 38%, #171d24, #0a0d11 82%); background-size:420px 340px, 300px 260px, 100% 100%, 100% 100%, 100% 100%; } /* ⚠ animation:none : sans ça le transform figé de sceneIn ferait de la scène un contexte d'empilement qui piégerait la boîte SOUS les calques de sphères (même sandwich que les bulles de Lexinum) */ #fiche[data-perso="elias"]{animation:none; background:transparent;} #fiche[data-perso="elias"] .boite-fiche{ position:relative; z-index:1; background:rgba(13,16,21,.72); border:1px solid rgba(217,164,65,.26); border-radius:0; /* un dossier a des angles nets */ backdrop-filter:blur(2px); box-shadow:0 18px 60px rgba(0,0,0,.55); } #fiche[data-perso="elias"] .fiche-conteneur{max-width:1100px;} #fiche[data-perso="elias"] .boite-int{padding:2.6rem 3rem 3rem;} #fiche[data-perso="elias"]{ --el-or:#d9a441; --el-or-vif:#f0c568; --el-teal:#43b494; --el-encre:#e9e3d3; --el-sourd:#a89f8a; --el-filet:rgba(217,164,65,.32); font-family:'EB Garamond',Georgia,serif; color:var(--el-encre); } #fiche[data-perso="elias"] p{ font-size:20px; line-height:1.72; text-align:justify; margin:0 0 1.05em; color:var(--el-encre); } #fiche[data-perso="elias"] .el-or{color:var(--el-or-vif); font-weight:600;} #fiche[data-perso="elias"] .el-mot{color:var(--el-or-vif); font-weight:700;} #fiche[data-perso="elias"] .el-att{color:var(--el-sourd); font-style:italic; font-size:.86em;} #fiche[data-perso="elias"] .el-symb{color:var(--el-teal); font-size:.95em;} /* ---- HERO : le haut du dossier ---- */ .el-hero{ position:relative; display:grid; grid-template-columns:1fr minmax(280px,370px); gap:2.6rem; align-items:start; margin-bottom:2.4rem; } .el-surtitre{ font-family:'Special Elite',monospace; font-size:.8rem !important; letter-spacing:.24em; text-transform:uppercase; color:var(--el-teal); text-align:left !important; margin-bottom:.5em !important; } .el-dossier{ font-family:'Special Elite',monospace; font-size:.85rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--el-sourd); text-align:left !important; margin-bottom:1.1em !important; } .el-nom{ font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:clamp(3rem, 6.4vw, 4.9rem); line-height:1.02; color:#f4edda; letter-spacing:.01em; margin:0 0 .12em; } .el-nom-fam{color:var(--el-or-vif);} .el-alias{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:clamp(1.15rem, 2.2vw, 1.5rem) !important; color:var(--el-sourd); text-align:left !important; margin-bottom:1em !important; } .el-alias .el-pt{color:var(--el-or); margin:0 .35em;} .el-filet{ height:1px; margin:0 0 1.3rem; background:linear-gradient(90deg, var(--el-or), rgba(217,164,65,.05)); position:relative; } .el-filet::before{ content:""; position:absolute; left:0; top:-2.5px; width:6px; height:6px; transform:rotate(45deg); background:var(--el-or); } .el-intro{font-size:20.5px !important;} /* le tampon CONFIDENTIEL (décoratif, jamais bloquant) */ .el-tampon{ position:absolute; top:-14px; right:-6px; z-index:2; transform:rotate(-9deg); font-family:'Special Elite',monospace; text-transform:uppercase; font-size:1.05rem; letter-spacing:.3em; text-indent:.3em; color:rgba(196,74,58,.85); border:3px double rgba(196,74,58,.7); border-radius:6px; padding:.32em .5em .28em .8em; pointer-events:none; } /* ---- les PHOTOS D'ARCHIVE (cadre blanc + légende machine à écrire) ---- */ .el-photo{ background:#f0ebdd; padding:11px 11px 0; box-shadow:0 12px 30px rgba(0,0,0,.55); transform:rotate(var(--pench, 0deg)); margin:0; } .el-photo img{display:block; width:100%; height:auto;} .el-photo figcaption{ font-family:'Special Elite',monospace; font-size:.76rem; letter-spacing:.05em; line-height:1.45; color:#4d4638; text-align:center; padding:.7em .3em .8em; } .el-photo-hero{margin-top:1.2rem;} .el-photo.droite{float:right; width:min(42%, 310px); margin:.35rem 0 1.1rem 2rem;} .el-photo.gauche{float:left; width:min(42%, 310px); margin:.35rem 2rem 1.1rem 0;} /* ---- le HAUT en 2 colonnes : sommaire + note | signalement ---- */ .el-haut{ display:grid; grid-template-columns:1fr minmax(320px,410px); gap:2.6rem; align-items:start; margin-bottom:3.4rem; } .el-panneau-titre{ font-family:'Special Elite',monospace; text-transform:uppercase; font-size:.82rem !important; letter-spacing:.26em; text-indent:.26em; color:var(--el-or); text-align:left !important; border-bottom:1px solid var(--el-filet); padding-bottom:.7em; margin-bottom:.9em !important; } .el-sommaire ul{list-style:none; margin:0; padding:0;} .el-som-lien{ display:flex; align-items:baseline; gap:.8em; width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:'EB Garamond',Georgia,serif; font-size:19px; color:var(--el-encre); padding:.42em 0; } .el-som-no{ font-family:'Special Elite',monospace; font-size:.8rem; color:var(--el-sourd); flex:0 0 auto; } .el-som-lbl{flex:0 1 auto;} .el-som-pts{flex:1 1 24px; border-bottom:1px dotted rgba(217,164,65,.35); translate:0 -4px;} .el-som-lien:hover .el-som-lbl, .el-som-lien:focus-visible .el-som-lbl{color:var(--el-or-vif);} .el-som-lien:hover .el-som-no, .el-som-lien:focus-visible .el-som-no{color:var(--el-or);} /* la note manuscrite épinglée au dossier (texte reformulable par l'owner) */ .el-postit{ margin-top:2rem; padding:1.1rem 1.3rem .9rem; border:1px dashed rgba(217,164,65,.3); transform:rotate(-.7deg); background:rgba(217,164,65,.05); max-width:340px; } .el-postit-txt{ font-family:'Caveat',cursive; font-size:1.55rem !important; line-height:1.3; color:var(--el-or-vif); text-align:left !important; margin-bottom:.35em !important; } .el-postit-sign{ font-family:'Caveat',cursive; font-size:1.15rem !important; color:var(--el-sourd); text-align:right !important; margin:0 !important; } /* le signalement (fiche d'identité) */ .el-carte{ border:1px solid rgba(217,164,65,.22); background:rgba(10,13,17,.55); padding:1.2rem 1.4rem 1rem; margin-bottom:1.4rem; } .el-prof-rang{ display:grid; grid-template-columns:138px 1fr; gap:.9em; padding:.34em 0; border-bottom:1px solid rgba(217,164,65,.1); font-size:17.5px; line-height:1.5; } .el-prof-rang:last-child{border-bottom:0;} .el-prof-cle{ font-family:'Special Elite',monospace; font-size:.76rem; letter-spacing:.06em; color:var(--el-sourd); text-transform:uppercase; padding-top:.28em; } .el-prof-val{color:var(--el-encre);} .el-rang-alter{border-top:1px solid var(--el-filet); margin-top:.4em; padding-top:.6em;} .el-val-alter{color:var(--el-teal); font-weight:700; letter-spacing:.03em;} .el-mini-sphere{ display:inline-block; width:13px; height:13px; border-radius:50%; margin-right:.45em; vertical-align:-1px; background:radial-gradient(circle at 32% 30%, rgba(255,246,220,.95), rgba(240,197,104,.6) 40%, rgba(217,164,65,.15) 70%); box-shadow:0 0 8px rgba(240,197,104,.5); } /* ---- SECTIONS : « Pièce nº » + titre Playfair + règle dorée ---- */ .el-section{margin-bottom:3.6rem; clear:both;} .el-sec-tete{margin-bottom:1.5rem;} .el-piece{ font-family:'Special Elite',monospace; text-transform:uppercase; font-size:.8rem !important; letter-spacing:.3em; color:var(--el-or); margin-bottom:.35em !important; } .el-sec-tete h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1.1; color:#f4edda; margin:0 0 .35em; } .el-regle{ height:1px; background:linear-gradient(90deg, var(--el-or), rgba(217,164,65,.04)); position:relative; } .el-regle::before{ content:""; position:absolute; left:0; top:-2.5px; width:6px; height:6px; transform:rotate(45deg); background:var(--el-or); } /* alternance : gauche (défaut) / droite / centré */ .el-sec-tete.el-al-d{text-align:right;} .el-sec-tete.el-al-d .el-piece{text-align:right !important;} .el-sec-tete.el-al-d .el-regle{background:linear-gradient(270deg, var(--el-or), rgba(217,164,65,.04));} .el-sec-tete.el-al-d .el-regle::before{left:auto; right:0;} .el-sec-tete.el-al-c{text-align:center;} .el-sec-tete.el-al-c .el-piece{text-align:center !important;} .el-sec-tete.el-al-c .el-regle{ background:linear-gradient(90deg, rgba(217,164,65,.04), var(--el-or), rgba(217,164,65,.04)); } .el-sec-tete.el-al-c .el-regle::before{left:calc(50% - 3px);} .el-h3{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.45rem; color:var(--el-or-vif); margin:1.9rem 0 .8rem; clear:both; } .el-section h3:first-child{margin-top:0;} /* Valeurs : un bloc resserré, encadré de deux filets (section centrée) */ .el-valeurs{ max-width:760px; margin:0 auto; padding:1.5rem 1.7rem .5rem; border-top:1px solid var(--el-filet); border-bottom:1px solid var(--el-filet); } /* ---- ÉQUIPEMENT : les scellés de la trousse ---- */ .el-scelles{margin:1.4rem 0 .6rem;} .el-scelle{ display:flex; gap:1.6rem; align-items:flex-start; padding:1rem 0; border-bottom:1px dashed rgba(217,164,65,.18); } .el-scelle:last-child{border-bottom:0;} .el-scelle p{margin:0 !important; font-size:19px !important;} .el-scelle-eti{ flex:0 0 168px; font-family:'Special Elite',monospace; font-size:.85rem; line-height:1.3; color:#383020; text-align:center; background:linear-gradient(160deg, #ddc38f, #c6a86e); border-radius:4px; padding:.7em .6em .6em 1.6em; position:relative; transform:rotate(-1.6deg); box-shadow:0 4px 10px rgba(0,0,0,.45); } .el-scelle:nth-child(even) .el-scelle-eti{transform:rotate(1.3deg);} .el-scelle-trou{ position:absolute; left:.55em; top:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:#10141a; box-shadow:inset 0 0 0 2px #a08a58; } /* ---- ALTER : le registre + la console de sphères ---- */ .el-alter-cadre{ border:1px solid rgba(67,180,148,.35); background:rgba(16,24,26,.5); padding:1.6rem 1.8rem 1.7rem; } .el-alter-tete{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; font-family:'Special Elite',monospace; text-transform:uppercase; font-size:.82rem; letter-spacing:.2em; color:var(--el-teal); border-bottom:1px solid rgba(67,180,148,.3); padding-bottom:.8em; margin-bottom:1.2em; } .el-alter-tete b{color:#7fd6bd; font-weight:700;} .el-alter-classe{color:var(--el-sourd); letter-spacing:.14em;} .el-console{position:relative; margin:1.8rem 0 1.6rem;} .el-console-consigne{ font-family:'Special Elite',monospace; font-size:.78rem !important; letter-spacing:.1em; color:var(--el-sourd); text-transform:uppercase; text-align:center !important; margin-bottom:1.2em !important; } .el-orbes{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; margin-bottom:1.3rem; } .el-orbe{ display:flex; flex-direction:column; align-items:center; gap:.5em; background:none; border:0; cursor:pointer; width:104px; padding:.4em .2em; } .el-orbe-bulle{ width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(255,246,220,.95), rgba(240,197,104,.55) 38%, rgba(217,164,65,.16) 66%, rgba(217,164,65,.04) 78%); border:1px solid rgba(240,197,104,.35); box-shadow:0 0 14px rgba(240,197,104,.22), inset 0 0 8px rgba(255,240,200,.3); } .el-orbe-nom{ font-family:'Special Elite',monospace; font-size:.68rem; letter-spacing:.05em; line-height:1.3; text-transform:uppercase; color:var(--el-sourd); text-align:center; } .el-orbe:hover .el-orbe-bulle, .el-orbe:focus-visible .el-orbe-bulle{ box-shadow:0 0 20px rgba(240,197,104,.55), inset 0 0 8px rgba(255,240,200,.4); } .el-orbe:hover .el-orbe-nom, .el-orbe:focus-visible .el-orbe-nom{color:var(--el-or-vif);} .el-orbe.actif .el-orbe-bulle{ outline:2px solid rgba(67,180,148,.75); outline-offset:3px; box-shadow:0 0 22px rgba(103,216,182,.5), inset 0 0 8px rgba(255,240,200,.4); } .el-orbe.actif .el-orbe-nom{color:#7fd6bd;} .el-lecture{ border:1px solid rgba(67,180,148,.3); background:rgba(10,14,16,.55); padding:1.1rem 1.4rem 1rem; } .el-lecture-lbl{ font-family:'Special Elite',monospace; font-size:.82rem !important; letter-spacing:.16em; text-transform:uppercase; color:var(--el-teal); text-align:left !important; margin-bottom:.7em !important; } .el-lecture-lbl i{color:var(--el-sourd); text-transform:none; letter-spacing:.04em;} .el-lecture-txt{margin-bottom:.6em !important;} .el-lecture-cout{ font-size:16.5px !important; color:var(--el-sourd) !important; border-top:1px dashed rgba(217,164,65,.2); padding-top:.6em; margin-bottom:0 !important; } .el-lecture-cout b{color:var(--el-or); font-weight:700;} /* les limites : le feuillet qu'on ne montre pas aux clients */ .el-limites{ border:1px solid rgba(196,74,58,.35); background:rgba(26,15,13,.42); padding:1.2rem 1.5rem 1.1rem; margin-top:1.7rem; } .el-limites-titre{ font-family:'Special Elite',monospace; text-transform:uppercase; font-size:.8rem !important; letter-spacing:.22em; color:#d98b7a; text-align:left !important; border-bottom:1px solid rgba(196,74,58,.3); padding-bottom:.7em; margin-bottom:.9em !important; } .el-limites ul{list-style:none; margin:0; padding:0;} .el-limites li{ font-size:19px; line-height:1.66; text-align:justify; padding:.5em 0 .5em 1.4em; position:relative; border-bottom:1px dashed rgba(196,74,58,.14); } .el-limites li:last-child{border-bottom:0;} .el-limites li::before{ content:""; position:absolute; left:.15em; top:1.05em; width:7px; height:7px; transform:rotate(45deg); background:rgba(196,74,58,.65); } .el-lim-lbl{color:#d98b7a; font-weight:700;} /* ---- NOTES : chaque note = une sphère fixée ---- */ .el-notes{list-style:none; margin:0; padding:0;} .el-notes li{ font-size:19.5px; line-height:1.7; text-align:justify; padding:.6em 0 .6em 1.7em; position:relative; border-bottom:1px dashed rgba(217,164,65,.14); } .el-notes li:last-child{border-bottom:0;} .el-notes li::before{ content:""; position:absolute; left:0; top:1em; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 32% 30%, rgba(255,246,220,.9), rgba(240,197,104,.5) 42%, rgba(217,164,65,.1) 72%); box-shadow:0 0 7px rgba(240,197,104,.4); } .el-note-lbl{color:var(--el-or-vif); font-weight:700;} /* ---- SIGNATURE : E. Drow + la couronne (étoile ③) ---- */ .el-signature{ display:flex; align-items:center; gap:1.6rem; margin-top:3.2rem; } .el-sign-ligne{flex:1; height:1px; background:rgba(217,164,65,.22);} .el-sign-bloc{ display:flex; align-items:center; gap:1.1rem; position:relative; /* conteneur de l'étoile-fiche */ } .el-sign-nom{ font-family:'Caveat',cursive; font-size:2.2rem; color:var(--el-encre); transform:rotate(-3deg); } .el-couronne{ background:none; border:0; padding:4px; cursor:default; color:var(--el-or); opacity:.55; } .el-couronne.indice-etoile{cursor:pointer;} .el-couronne.indice-etoile:hover svg, .el-couronne.indice-etoile:focus-visible svg{ filter:drop-shadow(0 0 7px rgba(240,197,104,.85)); } .el-couronne-or{ opacity:1; color:var(--el-or-vif); } .el-couronne-or svg{filter:drop-shadow(0 0 9px rgba(240,197,104,.9));} /* ---- les SPHÈRES DE MÉMOIRE flottantes (calques fixes sur ) ---- */ .el-spheres, .el-spheres-fond{ position:fixed; inset:0; overflow:hidden; pointer-events:none; /* seules les sphères sont cliquables */ } .el-spheres{z-index:3;} .el-spheres-fond{z-index:0;} .el-sphere{ position:absolute; border-radius:50%; border:1px solid rgba(240,197,104,.3); padding:0; background:radial-gradient(circle at 32% 30%, rgba(255,246,220,.9), rgba(240,197,104,.5) 38%, rgba(217,164,65,.14) 64%, rgba(217,164,65,0) 76%); box-shadow:0 0 12px rgba(240,197,104,.24), inset 0 0 6px rgba(255,240,200,.3); animation:elDerive var(--dur, 12s) ease-in-out infinite alternate; } .el-spheres .el-sphere{pointer-events:auto; cursor:pointer;} .el-spheres-fond .el-sphere{opacity:.5; filter:blur(.6px);} @keyframes elDerive{ from{transform:translate(0, 0);} to{transform:translate(var(--dx, 24px), calc(var(--dy, 34px) * -1));} } /* une sphère FIXÉE (clic) : elle s'immobilise et brille — état posé d'un coup, aucune transition (règle anti-gel) ; la dissipation = timer JS */ .el-sphere.fixee{ animation-play-state:paused; outline:2px solid rgba(240,197,104,.7); outline-offset:3px; box-shadow:0 0 24px rgba(240,197,104,.85), inset 0 0 8px rgba(255,246,214,.6); } /* ---- les ÉTOILES CACHÉES d'Elias (scope ≥ (1,3,0) : leçon Brevshket, bat un éventuel « img{width:100%} » local) ---- */ #fiche[data-perso="elias"] .boite-int .etoile-fiche{ position:absolute; left:calc(50% - 24px); top:calc(50% - 24px); width:48px; height:auto; cursor:pointer; z-index:6; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } #fiche[data-perso="elias"] .indice-etoile{cursor:pointer;} #fiche[data-perso="elias"] .el-console{position:relative;} /* ---- responsive ---- */ @media (max-width:940px){ .el-hero{grid-template-columns:1fr;} .el-photo-hero{width:min(340px, 86%); margin:0 auto;} .el-haut{grid-template-columns:1fr;} .el-profil{max-width:460px; width:100%; margin:0 auto;} .el-tampon{top:-8px; right:2px; font-size:.9rem;} } @media (max-width:720px){ #fiche[data-perso="elias"] .boite-int{padding:1.6rem 1.1rem 2rem;} #fiche[data-perso="elias"] p, .el-limites li, .el-notes li{font-size:17px; line-height:1.66;} .el-photo.droite, .el-photo.gauche{ float:none; width:min(100%, 300px); margin:.6rem auto 1.2rem; } .el-scelle{flex-direction:column; gap:.7rem;} .el-scelle-eti{flex:none; align-self:flex-start;} .el-prof-rang{grid-template-columns:112px 1fr; font-size:16px;} .el-alter-cadre{padding:1.1rem .9rem 1.2rem;} .el-orbe{width:84px;} .el-orbe-bulle{width:38px; height:38px;} .el-valeurs{padding:1.2rem .6rem .3rem;} .el-surtitre{letter-spacing:.14em;} .el-tampon{position:static; display:inline-block; margin-bottom:1rem; transform:rotate(-4deg);} .el-hero{gap:1.6rem;} } /* reduced-motion : plus de dérive (les sphères restent posées, cliquables) */ @media (prefers-reduced-motion: reduce){ .el-sphere{animation:none;} } /* ============================================================ FICHE MADA — « la Sentence » (My Hero Academia) DOSSIER NOIR & ZONE MORTE : le dossier interne de l'Argus Null Division sur son opérateur effacé. Noir charbon, ROUGE « prédateur » (seule couleur vive), acier froid, bande de classification, passages caviardés, No Man's Land déployable (disque fixe sur ). Polices : Black Ops One (pochoir) + Saira Condensed (HUD) + Archivo (corps) — libres OFL, dépôt officiel Google Fonts. ============================================================ */ @font-face{ font-family:'Black Ops One'; /* le pochoir militaire des titres (police libre OFL, téléchargée du dépôt officiel Google Fonts) */ src:url("../fonts/BlackOpsOne-Regular.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Saira Condensed'; /* les étiquettes HUD (OFL) */ src:url("../fonts/SairaCondensed-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; } @font-face{ font-family:'Saira Condensed'; src:url("../fonts/SairaCondensed-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; } @font-face{ font-family:'Archivo'; /* le corps utilitaire (OFL, variable) */ src:url("../fonts/Archivo.ttf") format("truetype"); font-weight:100 900; font-display:swap; } /* le FOND DE NUIT TACTIQUE (fixe, sur — jamais en background:fixed sur #fiche, piégé par sceneIn) : charbon + braise rouge sourde en bas + ANNEAUX DE PORTÉE concentriques très discrets (la carte de tir de No Man's Land) + trame de grille fine */ body:has(#fiche.active[data-perso="mada"])::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: repeating-radial-gradient(circle at 50% 44%, transparent 0 88px, rgba(232,35,46,.03) 88px 89px), repeating-linear-gradient(0deg, transparent 0 55px, rgba(255,255,255,.014) 55px 56px), repeating-linear-gradient(90deg, transparent 0 55px, rgba(255,255,255,.014) 55px 56px), radial-gradient(ellipse 70% 42% at 50% 108%, rgba(140,16,24,.2), transparent 70%), radial-gradient(ellipse 90% 70% at 50% 34%, #131417, #08090b 84%); } /* ⚠ animation:none : le transform figé de sceneIn ferait de la scène un contexte d'empilement qui piégerait la boîte sous la zone morte */ #fiche[data-perso="mada"]{animation:none; background:transparent;} #fiche[data-perso="mada"] .boite-fiche{ position:relative; z-index:1; background:rgba(12,13,16,.78); border:1px solid rgba(120,132,144,.22); border-radius:0; /* un dossier militaire, angles nets */ box-shadow:0 18px 60px rgba(0,0,0,.6); } #fiche[data-perso="mada"] .fiche-conteneur{max-width:1100px;} #fiche[data-perso="mada"] .boite-int{padding:0 3rem 3rem;} #fiche[data-perso="mada"]{ --md-rouge:#e8232e; --md-rouge-vif:#ff3b45; --md-rouge-sourd:#b3121b; --md-acier:#9fb3c4; --md-encre:#e6e3dc; --md-sourd:#8e939b; --md-filet:rgba(232,35,46,.34); font-family:'Archivo',system-ui,sans-serif; color:var(--md-encre); } #fiche[data-perso="mada"] p{ font-size:20px; line-height:1.7; text-align:justify; margin:0 0 1.05em; color:var(--md-encre); } #fiche[data-perso="mada"] .md-rouge{color:var(--md-rouge-vif); font-weight:600;} #fiche[data-perso="mada"] .md-acier{color:var(--md-acier); font-weight:600; letter-spacing:.015em;} #fiche[data-perso="mada"] .md-mot{color:var(--md-rouge-vif); font-weight:700;} #fiche[data-perso="mada"] .md-mot-rouge{ color:#fff; background:rgba(179,18,27,.82); padding:.04em .45em .08em; letter-spacing:.03em; } #fiche[data-perso="mada"] .md-symb{color:var(--md-acier); font-size:.95em;} /* la BANDE DE CLASSIFICATION rayée, pleine largeur en tête de boîte */ .md-bande{ height:11px; margin:0 -3rem 2.4rem; background:repeating-linear-gradient(-45deg, rgba(179,18,27,.75) 0 12px, rgba(16,17,20,.95) 12px 24px); border-bottom:1px solid rgba(232,35,46,.3); } /* ---- HERO : le haut du dossier ---- */ .md-hero{ position:relative; display:grid; grid-template-columns:1fr minmax(280px,380px); gap:2.8rem; align-items:start; margin-bottom:2.6rem; } .md-surtitre, .md-dossier, .md-panneau-titre, .md-sec-code{ font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; } .md-surtitre{ font-size:.92rem !important; letter-spacing:.3em; color:var(--md-rouge-vif); text-align:left !important; margin-bottom:.55em !important; } .md-dossier{ font-size:.9rem !important; letter-spacing:.18em; color:var(--md-sourd); text-align:left !important; margin-bottom:1.2em !important; } .md-nom{ font-family:'Black Ops One',system-ui; font-weight:400; font-size:clamp(2.5rem, 5.4vw, 4rem); line-height:1.04; color:#f2efe8; letter-spacing:.01em; margin:0 0 .16em; text-transform:uppercase; } .md-nom-fam{color:var(--md-rouge-vif); text-shadow:0 0 22px rgba(232,35,46,.35);} .md-alias{ font-size:clamp(1.05rem, 2vw, 1.3rem) !important; font-style:italic; color:var(--md-sourd); text-align:left !important; margin-bottom:1.1em !important; } .md-filet{ height:1px; margin:0 0 1.3rem; background:linear-gradient(90deg, var(--md-rouge), rgba(232,35,46,.04)); position:relative; } .md-filet::before{ content:""; position:absolute; left:0; top:-2.5px; width:6px; height:6px; transform:rotate(45deg); background:var(--md-rouge); } .md-intro{font-size:20.5px !important;} .md-chips-hero{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem;} .md-chip{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; border:1px solid rgba(159,179,196,.4); color:var(--md-acier); padding:.3em .75em .22em; } .md-chip.rouge{border-color:rgba(255,59,69,.55); color:var(--md-rouge-vif);} /* le tampon (décoratif, jamais bloquant) */ .md-tampon{ position:absolute; top:4px; right:-6px; z-index:2; transform:rotate(7deg); font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:1rem; letter-spacing:.3em; text-indent:.3em; color:rgba(232,35,46,.8); border:3px double rgba(232,35,46,.6); border-radius:4px; padding:.34em .5em .28em .8em; pointer-events:none; } /* la vitrine Cenotaph : anneau de portée au sol + signature + crâne */ .md-figure{position:relative; margin:0; text-align:center;} .md-figure > img{ position:relative; z-index:1; display:block; width:min(100%, 340px); height:auto; margin:0 auto; filter:drop-shadow(0 22px 30px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(232,35,46,.14)); } .md-cercle{ position:absolute; left:50%; bottom:66px; z-index:0; width:84%; height:60px; transform:translateX(-50%); border-radius:50%; border:1px dashed rgba(255,59,69,.42); box-shadow:inset 0 0 30px rgba(232,35,46,.14); } .md-figure figcaption{ font-family:'Saira Condensed',sans-serif; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--md-sourd); margin-top:.4rem; } /* le crâne-emblème (maintenir = éteindre la signature — étoile ②) */ .md-crane{ display:block; margin:.7rem auto 0; padding:2px; background:none; border:0; cursor:pointer; width:54px; touch-action:none; } .md-crane svg{display:block; width:100%; height:auto;} .md-crane-os{fill:#14161a; stroke:#6b7683; stroke-width:2; stroke-linejoin:round;} .md-crane-oeil, .md-crane-fente{ fill:var(--md-rouge-vif); filter:drop-shadow(0 0 4px rgba(255,59,69,.9)); } .md-crane-nez{fill:#0c0d10; stroke:#6b7683; stroke-width:1.2;} .md-crane:hover svg, .md-crane:focus-visible svg{ filter:drop-shadow(0 0 8px rgba(255,59,69,.55)); } .md-crane-rouge .md-crane-os{stroke:#a94b52;} /* l'OMBRE (maintien du crâne) : toute la signature rouge du dossier meurt — états posés d'un coup, AUCUNE transition (règle anti-gel) */ #fiche[data-perso="mada"].md-ombre .md-figure > img{filter:brightness(.15) saturate(.2);} #fiche[data-perso="mada"].md-ombre .md-rouge, #fiche[data-perso="mada"].md-ombre .md-mot, #fiche[data-perso="mada"].md-ombre .md-nom-fam{color:#565a61; text-shadow:none;} #fiche[data-perso="mada"].md-ombre .md-crane-oeil, #fiche[data-perso="mada"].md-ombre .md-crane-fente{fill:#3c4046; filter:none;} #fiche[data-perso="mada"].md-ombre .md-cercle{border-color:rgba(120,128,138,.3); box-shadow:none;} #fiche[data-perso="mada"].md-ombre .md-chip.rouge{border-color:#3c4046; color:#565a61;} #fiche[data-perso="mada"].md-ombre .md-signal{ background:radial-gradient(circle at 35% 32%, #4a4e55, #26282c 70%); box-shadow:none; animation:none; } /* ---- les SIGNATURES D'ALTER (balises rouges — proies de la zone morte) ---- */ .md-signal{ position:absolute; z-index:3; width:15px; height:15px; border-radius:50%; border:0; padding:0; cursor:pointer; background:radial-gradient(circle at 35% 32%, #ffb3b6, var(--md-rouge-vif, #ff3b45) 55%, #7c0d13 90%); box-shadow:0 0 12px rgba(255,59,69,.85), 0 0 26px rgba(232,35,46,.4); animation:mdSignalPulse 2.1s ease-in-out infinite; } @keyframes mdSignalPulse{ 0%,100%{box-shadow:0 0 10px rgba(255,59,69,.75), 0 0 22px rgba(232,35,46,.3);} 50%{box-shadow:0 0 16px rgba(255,59,69,1), 0 0 34px rgba(232,35,46,.55);} } .md-signal.md-eteinte{ background:radial-gradient(circle at 35% 32%, #4a4e55, #26282c 70%); box-shadow:none; animation:none; cursor:default; } /* la ZONE MORTE déployée (disque fixe sur , suit le curseur) : backdrop grayscale = les couleurs meurent à l'intérieur */ #mdZone{ position:fixed; left:0; top:0; z-index:80; border-radius:50%; pointer-events:none; border:1px dashed rgba(255,59,69,.55); box-shadow:inset 0 0 44px rgba(0,0,0,.38); backdrop-filter:grayscale(1) brightness(.82) saturate(.25); -webkit-backdrop-filter:grayscale(1) brightness(.82) saturate(.25); } #mdZone::after{ content:""; position:absolute; left:calc(50% - 3px); top:calc(50% - 3px); width:6px; height:6px; transform:rotate(45deg); background:rgba(255,59,69,.7); } /* ---- le HAUT en 2 colonnes : table + avertissement | signalement ---- */ .md-haut{ display:grid; grid-template-columns:1fr minmax(320px,400px); gap:2.8rem; align-items:start; margin-bottom:3.6rem; } .md-panneau-titre{ font-size:.88rem !important; letter-spacing:.28em; text-indent:.28em; color:var(--md-rouge-vif); text-align:left !important; border-bottom:1px solid var(--md-filet); padding-bottom:.7em; margin-bottom:.9em !important; } .md-sommaire ul{list-style:none; margin:0; padding:0;} .md-som-lien{ display:flex; align-items:baseline; gap:.85em; width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:'Archivo',system-ui,sans-serif; font-size:18.5px; color:var(--md-encre); padding:.44em 0; } .md-som-no{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.85rem; color:var(--md-rouge); flex:0 0 auto; letter-spacing:.08em; } .md-som-lbl{flex:0 1 auto;} .md-som-pts{flex:1 1 24px; border-bottom:1px dotted rgba(159,179,196,.3); translate:0 -4px;} .md-som-lien:hover .md-som-lbl, .md-som-lien:focus-visible .md-som-lbl{color:var(--md-rouge-vif);} /* l'avertissement de la cellule d'évaluation (texte reformulable owner) */ .md-avert{ margin-top:2rem; padding:1.15rem 1.3rem 1rem; border:1px solid rgba(232,35,46,.4); background:rgba(179,18,27,.07); max-width:380px; } .md-avert-titre{ font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.3em; text-indent:.3em; font-size:.85rem !important; color:var(--md-rouge-vif); text-align:left !important; margin-bottom:.6em !important; } .md-avert-txt{font-size:17.5px !important; line-height:1.6; margin-bottom:.5em !important;} .md-avert-sign{ font-family:'Saira Condensed',sans-serif; font-size:.85rem !important; letter-spacing:.08em; color:var(--md-sourd); text-align:right !important; margin:0 !important; } /* le signalement */ .md-carte{ border:1px solid rgba(120,132,144,.26); background:rgba(9,10,13,.6); padding:1.2rem 1.4rem 1rem; margin-bottom:1.4rem; } .md-carte-photo{margin:0 0 1rem;} .md-carte-photo img{ display:block; width:100%; height:auto; border:1px solid rgba(120,132,144,.3); } .md-carte-photo figcaption{ font-family:'Saira Condensed',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--md-sourd); text-align:center; padding-top:.5em; } .md-prof-rang{ display:grid; grid-template-columns:142px 1fr; gap:.9em; padding:.34em 0; border-bottom:1px solid rgba(120,132,144,.12); font-size:17.5px; line-height:1.5; } .md-prof-rang:last-child{border-bottom:0;} .md-prof-cle{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.1em; color:var(--md-sourd); text-transform:uppercase; padding-top:.3em; } .md-prof-val{color:var(--md-encre);} .md-rang-alter{border-top:1px solid var(--md-filet); margin-top:.4em; padding-top:.6em;} .md-val-alter{color:var(--md-rouge-vif); font-weight:700; letter-spacing:.02em;} .md-mini-zone{ display:inline-block; width:13px; height:13px; border-radius:50%; margin-right:.45em; vertical-align:-1px; border:1.5px dashed rgba(255,59,69,.8); background:radial-gradient(circle, rgba(255,59,69,.65) 0 3px, transparent 3.5px); box-shadow:0 0 8px rgba(255,59,69,.45); } /* ---- SECTIONS : « Section NN // intitulé » + pochoir + règle rouge ---- */ .md-section{margin-bottom:3.8rem; clear:both;} .md-sec-tete{margin-bottom:1.5rem;} .md-sec-code{ font-size:.85rem !important; letter-spacing:.26em; color:var(--md-rouge-vif); margin-bottom:.4em !important; } .md-sec-code span{color:var(--md-sourd);} .md-sec-tete h2{ font-family:'Black Ops One',system-ui; font-weight:400; font-size:clamp(1.65rem, 3.1vw, 2.35rem); line-height:1.12; color:#f2efe8; margin:0 0 .4em; text-transform:uppercase; letter-spacing:.02em; } .md-regle{ height:1px; background:linear-gradient(90deg, var(--md-rouge), rgba(232,35,46,.04)); position:relative; } .md-regle::before{ content:""; position:absolute; left:0; top:-2.5px; width:6px; height:6px; transform:rotate(45deg); background:var(--md-rouge); } .md-sec-tete.md-al-d{text-align:right;} .md-sec-tete.md-al-d .md-sec-code{text-align:right !important;} .md-sec-tete.md-al-d .md-regle{background:linear-gradient(270deg, var(--md-rouge), rgba(232,35,46,.04));} .md-sec-tete.md-al-d .md-regle::before{left:auto; right:0;} .md-sec-tete.md-al-c{text-align:center;} .md-sec-tete.md-al-c .md-sec-code{text-align:center !important;} .md-sec-tete.md-al-c .md-regle{ background:linear-gradient(90deg, rgba(232,35,46,.04), var(--md-rouge), rgba(232,35,46,.04)); } .md-sec-tete.md-al-c .md-regle::before{left:calc(50% - 3px);} .md-h3{ font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:1.12rem; color:var(--md-rouge-vif); margin:1.9rem 0 .8rem; clear:both; } .md-section h3:first-child{margin-top:0;} /* les lignes de frappe (les sentences du dossier) */ #fiche[data-perso="mada"] p.md-frappe{ text-align:center; font-size:22.5px; font-weight:600; letter-spacing:.02em; color:#f2efe8; margin:1.5em auto 1.5em; max-width:640px; line-height:1.55; } /* Valeurs : bloc resserré entre deux filets (section centrée) */ .md-valeurs{ max-width:760px; margin:0 auto; padding:1.5rem 1.7rem .5rem; border-top:1px solid var(--md-filet); border-bottom:1px solid var(--md-filet); } /* ---- les PIÈCES JOINTES (cadre sombre, coins rouges, légende HUD) ---- */ .md-piece{ background:#0e1013; padding:10px 10px 0; border:1px solid rgba(120,132,144,.3); box-shadow:0 12px 30px rgba(0,0,0,.55); position:relative; margin:0; } .md-piece img{display:block; width:100%; height:auto;} .md-piece figcaption{ font-family:'Saira Condensed',sans-serif; font-size:.8rem; letter-spacing:.08em; line-height:1.45; color:var(--md-sourd); text-align:center; padding:.7em .3em .8em; text-transform:uppercase; } .md-piece-coin{position:absolute; width:16px; height:16px; pointer-events:none;} .md-piece-coin.a{left:-1px; top:-1px; border-left:2px solid var(--md-rouge); border-top:2px solid var(--md-rouge);} .md-piece-coin.b{right:-1px; bottom:-1px; border-right:2px solid var(--md-rouge); border-bottom:2px solid var(--md-rouge);} .md-piece.droite{float:right; width:min(42%, 320px); margin:.35rem 0 1.1rem 2rem;} .md-piece.gauche{float:left; width:min(42%, 320px); margin:.35rem 2rem 1.1rem 0;} /* ---- le PSYCHOGRAMME ---- */ .md-psycho{ clear:both; margin-top:2rem; border:1px solid rgba(120,132,144,.26); background:rgba(9,10,13,.6); padding:1.2rem 1.4rem 1.1rem; } .md-psy-rang{ display:grid; grid-template-columns:110px 1fr; gap:1em; padding:.55em 0; border-bottom:1px solid rgba(120,132,144,.12); align-items:baseline; } .md-psy-rang:last-child{border-bottom:0;} .md-psy-cle{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--md-sourd); } .md-psy-val{display:flex; flex-wrap:wrap; gap:.45rem;} .md-psy-val .md-chip{ font-family:'Archivo',system-ui,sans-serif; font-weight:500; text-transform:none; letter-spacing:.02em; font-size:.9rem; padding:.22em .65em; } .md-phobie{ display:inline-block; font-family:'Black Ops One',system-ui; text-transform:uppercase; font-size:1rem; letter-spacing:.12em; color:var(--md-rouge-vif); border:2px double rgba(232,35,46,.65); padding:.3em .7em .24em; transform:rotate(-1.6deg); } /* ---- le PASSAGE CLASSIFIÉ + les CAVIARDÉS (étoile ③) ---- */ .md-classifie{ position:relative; clear:both; border:1px dashed rgba(232,35,46,.45); background:rgba(179,18,27,.05); padding:1.5rem 1.7rem .6rem; margin:1.8rem 0; } .md-classifie-titre{ font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:.82rem !important; color:var(--md-rouge-vif); text-align:center !important; margin-bottom:1.2em !important; } /* une barre de caviardage : le texte est là, mais noir sur noir — le clic déclassifie (révélation INSTANTANÉE, règle anti-gel) */ .md-caviarde{ background:#17191d; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(120,132,144,.22); padding:0 .22em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .md-caviarde .md-cav-txt{color:transparent; user-select:none;} .md-caviarde:hover, .md-caviarde:focus-visible{ box-shadow:inset 0 0 0 1px rgba(255,59,69,.6); } .md-caviarde.revele{ background:rgba(232,35,46,.1); cursor:default; box-shadow:none; } .md-caviarde.revele .md-cav-txt{color:#f4d7d7; user-select:auto;} /* ---- LIENS : les dossiers croisés ---- */ .md-liens{display:flex; flex-direction:column; gap:1.6rem;} .md-lien{ position:relative; border:1px solid rgba(120,132,144,.24); border-left:3px solid var(--md-rouge); background:rgba(9,10,13,.55); padding:1.3rem 1.6rem .5rem; } .md-lien-tete{margin-bottom:1rem; padding-right:8.5rem;} .md-lien .md-h3{margin:0 0 .2em; font-family:'Black Ops One',system-ui; font-weight:400; letter-spacing:.03em; font-size:1.2rem; color:#f2efe8;} .md-lien-tag{ font-family:'Saira Condensed',sans-serif; font-size:.88rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--md-sourd); text-align:left !important; margin:0 !important; } .md-lien-statut{ position:absolute; top:1.2rem; right:1.3rem; font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--md-rouge-vif); border:1px solid rgba(255,59,69,.5); padding:.3em .65em .22em; } /* ---- ÉQUIPEMENT : l'inventaire estimé ---- */ .md-equips{display:flex; flex-direction:column; gap:1.4rem; margin-top:1.4rem;} .md-equip{ border:1px solid rgba(120,132,144,.24); background:rgba(9,10,13,.55); padding:1.2rem 1.5rem .5rem; } .md-equip-tete{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; border-bottom:1px solid rgba(120,132,144,.16); padding-bottom:.7em; margin-bottom:.9em; } .md-equip-code{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.18em; color:var(--md-rouge-vif); border:1px solid rgba(255,59,69,.5); padding:.26em .6em .2em; } .md-equip .md-h3{margin:0; font-family:'Black Ops One',system-ui; font-weight:400; letter-spacing:.03em; font-size:1.15rem; color:#f2efe8; text-transform:none;} .md-equip-tag{ font-family:'Saira Condensed',sans-serif; font-size:.85rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--md-sourd); text-align:left !important; margin:0 !important; flex:1 1 auto; } /* ---- ALTER : le codex + le simulateur tactique ---- */ .md-codex{ border:1px solid rgba(232,35,46,.35); background:rgba(12,10,11,.55); padding:1.6rem 1.8rem 1.7rem; } .md-codex-tete{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:.9rem; letter-spacing:.2em; color:var(--md-rouge-vif); border-bottom:1px solid rgba(232,35,46,.3); padding-bottom:.8em; margin-bottom:1.2em; } .md-codex-tete b{color:#ff707a; font-weight:600;} .md-codex-classe{color:var(--md-sourd); letter-spacing:.14em;} .md-codex-rangs{margin-bottom:1.6rem;} .md-codex-rang{ display:grid; grid-template-columns:120px 1fr; gap:1em; padding:.4em 0; border-bottom:1px solid rgba(120,132,144,.12); } .md-codex-rang:last-child{border-bottom:0;} .md-codex-rang span{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--md-sourd); padding-top:.3em; } .md-codex-rang p{margin:0 !important; font-size:18.5px !important; text-align:left !important;} /* le simulateur */ .md-tactique{ margin:1.9rem 0 1.6rem; border:1px solid rgba(120,132,144,.22); background:rgba(6,7,9,.65); padding:1.2rem 1.4rem 1.3rem; } .md-consigne{ font-family:'Saira Condensed',sans-serif; font-size:.82rem !important; letter-spacing:.14em; color:var(--md-sourd); text-transform:uppercase; text-align:center !important; margin-bottom:.9em !important; } #mdDiagramme{display:block; width:100%; height:auto; margin-bottom:1rem;} .md-d-axe{stroke:rgba(255,255,255,.06); stroke-width:1;} .md-d-ref{fill:none; stroke:rgba(159,179,196,.28); stroke-width:1; stroke-dasharray:3 6;} .md-d-lbl{fill:var(--md-sourd, #8e939b); font-family:'Saira Condensed',sans-serif; font-size:11px; letter-spacing:.08em;} .md-d-champ{ fill:rgba(232,35,46,.09); stroke:#ff3b45; stroke-width:1.6; stroke-dasharray:7 4; } .md-d-champ.verrou{stroke-dasharray:none; stroke-width:3;} .md-d-cone{fill:rgba(232,35,46,.09); stroke:#ff3b45; stroke-width:1.6; stroke-dasharray:7 4;} .md-d-cible{fill:#f2efe8; stroke:#ff3b45; stroke-width:2;} .md-d-mada{fill:#f2efe8;} .md-d-nom{ fill:var(--md-sourd, #8e939b); font-family:'Saira Condensed',sans-serif; font-size:10px; letter-spacing:.22em; text-anchor:middle; } .md-d-portee{ fill:#ff3b45; font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; } .md-modes{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.1rem; } .md-mode{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.14em; background:none; border:1px solid rgba(159,179,196,.35); color:var(--md-acier); cursor:pointer; padding:.5em .95em .42em; } .md-mode:hover, .md-mode:focus-visible{border-color:rgba(255,59,69,.55); color:var(--md-rouge-vif);} .md-mode.actif{ border-color:var(--md-rouge); color:var(--md-rouge-vif); background:rgba(232,35,46,.12); } .md-lecture{ border:1px solid rgba(120,132,144,.2); background:rgba(10,11,14,.6); padding:1.05rem 1.3rem 1rem; } .md-lecture-lbl{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.9rem !important; letter-spacing:.2em; text-transform:uppercase; color:var(--md-rouge-vif); text-align:left !important; margin-bottom:.6em !important; } .md-lecture-lbl i{color:var(--md-sourd); text-transform:none; letter-spacing:.05em;} .md-lecture-txt{margin-bottom:.7em !important; font-size:19px !important;} .md-lecture-chips{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; border-top:1px dashed rgba(232,35,46,.25); padding-top:.65em; margin:0 !important; font-size:16px !important; color:var(--md-sourd) !important; text-align:left !important; } .md-lecture-chips b{color:var(--md-rouge-vif); font-weight:600; font-family:'Saira Condensed',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem;} /* le bouton de déploiement (étoile ①) */ .md-deployer{ display:flex; align-items:center; justify-content:center; gap:.8em; width:100%; margin:0 0 1.9rem; font-family:'Black Ops One',system-ui; font-weight:400; font-size:.98rem; text-transform:uppercase; letter-spacing:.16em; color:var(--md-rouge-vif); cursor:pointer; background:rgba(232,35,46,.07); border:1px solid rgba(232,35,46,.5); padding:.95em 1em .85em; } .md-deployer:hover, .md-deployer:focus-visible{background:rgba(232,35,46,.15);} .md-deployer.actif{ background:rgba(179,18,27,.85); color:#fff; border-color:var(--md-rouge-vif); } .md-deployer-pt{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--md-rouge-vif); box-shadow:0 0 9px rgba(255,59,69,.9); animation:mdSignalPulse 1.8s ease-in-out infinite; } /* règle de neutralisation : les deux verdicts */ .md-regles{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.2rem 0 .4rem; } .md-regle-carte{padding:1.05rem 1.2rem .4rem; background:rgba(9,10,13,.55);} .md-regle-carte.neutralise{border:1px solid rgba(232,35,46,.45);} .md-regle-carte.traverse{border:1px solid rgba(159,179,196,.35);} .md-regle-tete{ font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.85rem !important; letter-spacing:.16em; text-transform:uppercase; text-align:left !important; margin-bottom:.65em !important; } .md-regle-carte.neutralise .md-regle-tete{color:var(--md-rouge-vif);} .md-regle-carte.traverse .md-regle-tete{color:var(--md-acier);} .md-regle-carte p:last-child{font-size:18px !important;} /* cas particuliers */ .md-cas{list-style:none; margin:0 0 .6rem; padding:0;} .md-cas li{ font-size:19px; line-height:1.62; text-align:justify; padding:.5em 0 .5em 1.4em; position:relative; border-bottom:1px dashed rgba(120,132,144,.16); } .md-cas li:last-child{border-bottom:0;} .md-cas li::before{ content:""; position:absolute; left:.15em; top:1.02em; width:7px; height:7px; transform:rotate(45deg); background:rgba(159,179,196,.6); } /* vulnérabilités */ .md-limites{ border:1px solid rgba(232,35,46,.4); background:rgba(26,12,13,.45); padding:1.2rem 1.5rem 1.1rem; margin-top:1.7rem; } .md-limites-titre{ font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:.85rem !important; letter-spacing:.24em; color:var(--md-rouge-vif); text-align:left !important; border-bottom:1px solid rgba(232,35,46,.3); padding-bottom:.7em; margin-bottom:.9em !important; } .md-limites ul{list-style:none; margin:0; padding:0;} .md-limites li{ font-size:19px; line-height:1.64; text-align:justify; padding:.5em 0 .5em 1.4em; position:relative; border-bottom:1px dashed rgba(232,35,46,.14); } .md-limites li:last-child{border-bottom:0;} .md-limites li::before{ content:""; position:absolute; left:.15em; top:1.02em; width:7px; height:7px; transform:rotate(45deg); background:rgba(232,35,46,.65); } /* ---- NOTES ---- */ .md-notes{list-style:none; margin:0; padding:0;} .md-notes li{ font-size:19.5px; line-height:1.68; text-align:justify; padding:.6em 0 .6em 1.6em; position:relative; border-bottom:1px dashed rgba(120,132,144,.16); } .md-notes li:last-child{border-bottom:0;} .md-notes li::before{ content:""; position:absolute; left:.1em; top:1.05em; width:8px; height:8px; background:rgba(232,35,46,.7); } .md-note-lbl{color:var(--md-rouge-vif); font-weight:700;} /* ---- FIN DU DOSSIER : le tampon SENTENCE ---- */ .md-fin{ display:flex; align-items:center; gap:1.8rem; margin-top:3.4rem; } .md-fin-ligne{flex:1; height:1px; background:rgba(232,35,46,.25);} .md-fin-bloc{position:relative; text-align:center;} .md-fin-tampon{ display:inline-block; font-family:'Black Ops One',system-ui; text-transform:uppercase; font-size:1.7rem; letter-spacing:.28em; text-indent:.28em; color:rgba(232,35,46,.85); border:3px double rgba(232,35,46,.6); border-radius:4px; padding:.32em .5em .24em .8em; transform:rotate(-5deg); margin-bottom:.7rem; } .md-fin-txt{ font-family:'Saira Condensed',sans-serif; font-size:.9rem !important; letter-spacing:.16em; text-transform:uppercase; color:var(--md-sourd); text-align:center !important; line-height:1.7; margin:0 !important; } /* ---- les ÉTOILES CACHÉES de Mada (scope ≥ (1,3,0), leçon Brevshket) ---- */ #fiche[data-perso="mada"] .boite-int .etoile-fiche{ position:absolute; left:calc(50% - 24px); top:calc(50% - 24px); width:48px; height:auto; cursor:pointer; z-index:6; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } #fiche[data-perso="mada"] .indice-etoile{cursor:pointer;} /* ---- responsive ---- */ @media (max-width:940px){ .md-hero{grid-template-columns:1fr;} .md-figure{max-width:360px; margin:0 auto;} .md-haut{grid-template-columns:1fr;} .md-profil{max-width:460px; width:100%; margin:0 auto;} .md-tampon{top:-4px; right:2px; font-size:.85rem;} } @media (max-width:720px){ #fiche[data-perso="mada"] .boite-int{padding:0 1.1rem 2rem;} .md-bande{margin:0 -1.1rem 1.6rem;} #fiche[data-perso="mada"] p, .md-cas li, .md-limites li, .md-notes li{font-size:17px; line-height:1.64;} #fiche[data-perso="mada"] p.md-frappe{font-size:19px;} .md-piece.droite, .md-piece.gauche{ float:none; width:min(100%, 300px); margin:.6rem auto 1.2rem; } .md-prof-rang{grid-template-columns:114px 1fr; font-size:16px;} .md-psy-rang{grid-template-columns:1fr; gap:.3em;} .md-codex{padding:1.1rem .9rem 1.2rem;} .md-codex-rang{grid-template-columns:96px 1fr;} .md-regles{grid-template-columns:1fr;} .md-lien{padding:1.1rem 1rem .4rem;} .md-lien-tete{padding-right:0;} .md-lien-statut{position:static; display:inline-block; margin-top:.5rem;} .md-valeurs{padding:1.2rem .6rem .3rem;} .md-classifie{padding:1.1rem .9rem .4rem;} .md-fin{gap:1rem;} .md-fin-tampon{font-size:1.25rem;} .md-tampon{position:static; display:inline-block; margin:1rem 0 0; transform:rotate(-3deg);} .md-hero{gap:1.6rem;} } /* reduced-motion : plus de pulsation (les balises restent visibles et cliquables ; la zone morte est pilotée au curseur, jamais animée) */ @media (prefers-reduced-motion: reduce){ .md-signal, .md-deployer-pt{animation:none;} } /* ============================================================ FICHE NISKA — « LE CONCERT » (Hunter × Hunter) La mascotte : rappeur superstar × assassin Zoldyck. Noir de scène + OR bling + néons de projecteurs ; setlist, pass backstage, vinyle d'or, crédits d'album, jauge de larsen, place vide du premier rang, mode A Cappella (le silence). Polices : Bungee (affiche street) + Montserrat (corps) + Permanent Marker (tags/punchlines) — dépôt officiel google/fonts (OFL/Apache), accents FR vérifiés. ============================================================ */ @font-face{ font-family:'Bungee'; /* l'affiche street / signalétique */ src:url("../fonts/Bungee.ttf") format("truetype"); font-display:swap; } @font-face{ font-family:'Montserrat'; /* le corps (variable 100-900) */ src:url("../fonts/Montserrat.ttf") format("truetype"); font-weight:100 900; font-display:swap; } @font-face{ font-family:'Montserrat'; src:url("../fonts/Montserrat-Italic.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap; } @font-face{ font-family:'Permanent Marker'; /* les tags / punchlines */ src:url("../fonts/PermanentMarker.ttf") format("truetype"); font-display:swap; } /* le FOND DE SCÈNE (fixe, sur — jamais en background:fixed sur #fiche, piégé par le transform de sceneIn) : noir de salle + deux faisceaux de projecteurs depuis les coins hauts (violet + or) + un semis de lumières dorées en bas — les téléphones de la fosse, briquets levés */ body:has(#fiche.active[data-perso="niska"])::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle 2px at 22% 88%, rgba(255,215,94,.2), transparent 3px), radial-gradient(circle 1.5px at 67% 93%, rgba(255,215,94,.15), transparent 3px), conic-gradient(from 158deg at 6% -6%, transparent 0 26deg, rgba(215,107,233,.11) 34deg, transparent 46deg), conic-gradient(from 168deg at 94% -6%, transparent 0 24deg, rgba(242,193,78,.1) 33deg, transparent 45deg), radial-gradient(ellipse 90% 70% at 50% 30%, #140e1c, #080610 85%); background-size:360px 300px, 280px 250px, 100% 100%, 100% 100%, 100% 100%; } /* le mode SILENCE éteint aussi les projecteurs du fond */ body:has(#fiche.active[data-perso="niska"].ns-silence)::before{ filter:grayscale(1) brightness(.55); } /* ⚠ animation:none : des éléments FIXES vivent sur (reflet de lame, onde de choc, étoile-écran) — la scène ne doit pas devenir bloc conteneur */ #fiche[data-perso="niska"]{animation:none; background:transparent;} #fiche[data-perso="niska"]{ --ns-or:#f2c14e; --ns-or-vif:#ffd75e; --ns-or-sombre:#c8922a; --ns-creme:#f3ede1; --ns-sourd:#a99f8d; --ns-rouge:#ff5257; --ns-magenta:#d76be9; --ns-teal:#3fd0c9; --ns-argent:#c9d4df; --ns-carte:rgba(22,17,29,.85); --ns-filet:rgba(242,193,78,.32); font-family:'Montserrat', 'Nunito', sans-serif; color:var(--ns-creme); } #fiche[data-perso="niska"] .boite-fiche{ position:relative; z-index:1; background:rgba(16,12,22,.78); border:1px solid rgba(242,193,78,.28); border-radius:18px; backdrop-filter:blur(2px); box-shadow:0 18px 60px rgba(0,0,0,.55); } #fiche[data-perso="niska"] .fiche-conteneur{max-width:1140px;} #fiche[data-perso="niska"] .boite-int{padding:2.6rem 3rem 3rem;} #fiche[data-perso="niska"] p{ font-size:19px; line-height:1.7; text-align:justify; margin:0 0 1.05em; color:var(--ns-creme); } /* le mode silence : le concert s'éteint (classe posée d'un coup, anti-gel) */ #fiche[data-perso="niska"].ns-silence .boite-fiche{ filter:grayscale(1) brightness(.72) contrast(1.05); } #fiche[data-perso="niska"].ns-silence .ns-eq i{animation-play-state:paused;} #fiche[data-perso="niska"].ns-silence .ns-taire-pt{background:#555; box-shadow:none; animation:none;} /* les termes colorés */ #fiche[data-perso="niska"] .ns-t-bendo{color:var(--ns-rouge); font-weight:800;} #fiche[data-perso="niska"] .ns-t-rang{color:var(--ns-magenta); font-weight:800;} #fiche[data-perso="niska"] .ns-t-sound{color:var(--ns-teal); font-weight:800;} #fiche[data-perso="niska"] .ns-t-acap{color:var(--ns-argent); font-weight:800;} #fiche[data-perso="niska"] .ns-t-larsen{color:var(--ns-or-vif); font-weight:800;} #fiche[data-perso="niska"] .ns-t-or{color:var(--ns-or-vif); font-weight:700;} #fiche[data-perso="niska"] .ns-t-skaodi{color:#dbe6f4; font-weight:700;} #fiche[data-perso="niska"] .ns-symb{color:var(--ns-teal);} /* ---- l'ÉGALISEUR (motif signature ; gelé = barres statiques, très bien) ---- */ .ns-eq{ display:inline-flex; align-items:flex-end; gap:4px; height:34px; margin:.4rem 0 1.1rem; } .ns-eq i{ width:6px; height:var(--h, 60%); border-radius:3px 3px 0 0; background:linear-gradient(to top, var(--ns-or-sombre), var(--ns-or-vif) 62%, #ff9d5c); transform-origin:bottom; animation:nsEq 1.05s ease-in-out var(--d, 0s) infinite alternate; } .ns-eq.mini{height:18px; gap:3px; margin:0;} .ns-eq.mini i{width:4px;} /* la grande barre du hero : pleine largeur du texte (les barres se répartissent — on voit d'autant mieux qu'elle suit le morceau) */ .ns-eq.large{ display:flex; width:100%; justify-content:space-between; gap:0; height:38px; } .ns-eq.large i{width:7px;} @keyframes nsEq{from{transform:scaleY(.32);}to{transform:scaleY(1);}} /* ---- HERO : l'affiche du concert ---- */ .ns-hero{ display:grid; grid-template-columns:1fr minmax(300px, 400px); gap:2.8rem; align-items:start; margin-bottom:2.6rem; } #fiche[data-perso="niska"] .ns-surtitre{ font-size:.8rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ns-magenta); text-align:left; margin-bottom:.8em; } .ns-nom{ font-family:'Bungee', sans-serif; font-weight:400; font-size:clamp(3.1rem, 7.4vw, 5.3rem); line-height:1; /* ⚠ le grand Bungee a un jambage gauche de 0.069em (mesuré fontTools) → son encre démarre à droite du bord de colonne alors que le surtitre et les textes du dessous (polices normales) y collent. On tire tout le bloc-titre à gauche de ce jambage → N aligné verticalement sur le reste (em = s'adapte à la taille du titre). Le -.069em sort la marge basse. */ margin:0 0 .12em -.069em; background:linear-gradient(180deg, #ffe9a8, #f2c14e 55%, #c8922a); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(242,193,78,.22)); } .ns-nom-clan{ display:block; margin-top:-.34em; /* Bungee laisse beaucoup d'air au-dessus des lettres → on remonte la 2ᵉ ligne (owner : « réduire l'espace ») */ /* ⚠ le « Z » de Bungee a un jambage gauche plus court que le « N » (encre à 0.046em vs 0.069em, mesuré fontTools) + son contour text-stroke déborde de ~0.75px → Zoldyck paraît décalé à gauche même si les blocs sont alignés. On le rentre d'autant (em = échelle du glyphe, +0.75px fixe = le contour). */ margin-left:calc(.09em + .75px); font-size:.5em; letter-spacing:.05em; background:none; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px var(--ns-or); } #fiche[data-perso="niska"] .ns-etatcivil{ font-size:.95rem; color:var(--ns-sourd); text-align:left; margin-bottom:1em; } #fiche[data-perso="niska"] .ns-etatcivil s{ opacity:.6; text-decoration-color:var(--ns-rouge); text-decoration-thickness:2px; } .ns-kanji{display:block; font-size:.8rem; opacity:.75; margin-top:.2em;} .ns-alias{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem;} .ns-passe{ font-size:.82rem; color:var(--ns-or-vif); border:1px solid var(--ns-filet); border-radius:999px; padding:.26em .8em; background:rgba(242,193,78,.08); letter-spacing:.03em; white-space:nowrap; } #fiche[data-perso="niska"] .ns-intro{font-size:20px;} /* la POCHETTE D'ALBUM (la peinture du hall) posée sur un VINYLE D'OR */ .ns-album{position:relative; width:min(400px, 100%); margin:0; justify-self:end;} .ns-vinyle{ position:absolute; top:6%; right:-17%; width:84%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, #c8922a 0 16%, #8a6a1f 16.5% 19%, transparent 19.5%), conic-gradient(from 40deg, transparent 0 34deg, rgba(255,235,180,.09) 52deg, transparent 70deg, transparent 208deg, rgba(255,235,180,.06) 226deg, transparent 244deg), repeating-radial-gradient(circle, #0d0c11 0 2px, #191720 2px 4px); box-shadow:0 10px 30px rgba(0,0,0,.6); } /* pendant que l'OST joue (.ns-live) : le vinyle TOURNE (33 tours ≈ 1,8 s) — le reflet conique rend la rotation visible */ #fiche[data-perso="niska"].ns-live .ns-vinyle{animation:nsVinyle 1.8s linear infinite;} /* ⭐ LE DISQUE (2026-09-14) : pendant que ça tourne, il se prend. Le CURSEUR est le seul indice — pas d'anneau doré : *on ne vend pas un secret*. */ #fiche[data-perso="niska"].ns-live .ns-vinyle{cursor:pointer;} @keyframes nsVinyle{to{transform:rotate(360deg);}} /* .ns-live : le JS pilote les barres en direct → l'anim CSS décorative est coupée (une animation active gagnerait sur le style inline) */ #fiche[data-perso="niska"].ns-live .ns-eq i{animation:none;} .ns-pochette{ position:relative; display:block; border:3px solid var(--ns-or); border-radius:8px; overflow:hidden; transform:rotate(-1.4deg); box-shadow:0 16px 44px rgba(0,0,0,.65); } .ns-pochette img{display:block; width:100%;} .ns-sticker{ position:absolute; top:10px; right:10px; font-family:'Permanent Marker', cursive; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:#e6394a; border-radius:999px; padding:.35em .8em; transform:rotate(7deg); box-shadow:0 3px 10px rgba(0,0,0,.45); } .ns-album figcaption{ font-size:.85rem; font-style:italic; color:var(--ns-sourd); margin-top:.7em; text-align:center; } /* ---- LE HAUT : setlist + pass backstage ---- */ .ns-haut{ display:grid; grid-template-columns:minmax(300px, 1fr) minmax(320px, 420px); gap:2rem; align-items:start; margin:0 0 2.6rem; } /* ⚠ préfixe #fiche[…] requis : la règle générale des

(justify) est à (1,1,1) et écraserait le centrage (même piège que p.apd-ambiance) */ #fiche[data-perso="niska"] .ns-panneau-titre{ font-family:'Bungee', sans-serif; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ns-or-vif); margin:0 0 .9rem; text-align:center; } .ns-setlist{ background:var(--ns-carte); border:1px solid var(--ns-filet); border-radius:14px; padding:1.3rem 1.4rem 1rem; } .ns-setlist ul{list-style:none; margin:0; padding:0;} .ns-track{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline; gap:.7rem; width:100%; background:none; border:0; cursor:pointer; font:inherit; color:var(--ns-creme); text-align:left; padding:.42em .5em; border-radius:8px; } .ns-track:hover, .ns-track:focus-visible{background:rgba(242,193,78,.1);} .ns-track:hover .ns-track-lbl, .ns-track:focus-visible .ns-track-lbl{color:var(--ns-or-vif);} .ns-track-no{ font-family:'Bungee', sans-serif; font-size:.78rem; color:var(--ns-or-sombre); } .ns-track-lbl{font-weight:600; font-size:16.5px;} .ns-track-feat{ display:block; font-size:.74rem; font-style:italic; font-weight:400; color:var(--ns-sourd); } .ns-track-pts{ align-self:center; border-bottom:2px dotted rgba(255,255,255,.16); min-width:22px; height:0; transform:translateY(-.2em); } .ns-track-dur{ font-size:.82rem; color:var(--ns-sourd); font-variant-numeric:tabular-nums; } #fiche[data-perso="niska"] .ns-setlist-note{ font-size:.8rem; font-style:italic; color:var(--ns-sourd); text-align:center; margin:.7em 0 0; } .ns-gauche, .ns-cartes{display:flex; flex-direction:column; gap:1.3rem;} /* ---- LE LECTEUR D'ALBUM « Mon Frère » (sous le sommaire) ---- */ .ns-lecteur{ background:var(--ns-carte); border:1px solid var(--ns-filet); border-radius:14px; padding:1.3rem 1.4rem 1.2rem; } /* ⚠ list-style:none SUR LE BON SÉLECTEUR (ns-lpistes) → plus de numéros décimaux blancs à gauche ; seuls les numéros or .ns-lpiste-no restent */ .ns-lpistes{list-style:none; margin:0 0 1rem; padding:0;} /* 3 colonnes (nº · titre 1fr · durée) → la durée est TOUJOURS à droite, alignée verticalement quelle que soit la longueur du titre (le voyant « en écoute » vit DANS le titre, il ne décale plus la grille — bug owner où seule la ligne active avait sa durée au bord) */ .ns-lpiste{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.55rem; width:100%; background:none; border:0; cursor:pointer; font:inherit; color:var(--ns-creme); text-align:left; padding:.3em .5em; border-radius:8px; } .ns-lpiste:hover, .ns-lpiste:focus-visible{background:rgba(242,193,78,.1);} .ns-lpiste:hover .ns-lpiste-titre, .ns-lpiste:focus-visible .ns-lpiste-titre{color:var(--ns-or-vif);} .ns-lpiste-no{font-family:'Bungee', sans-serif; font-size:.72rem; color:var(--ns-or-sombre);} .ns-lpiste-titre{font-weight:600; font-size:15.5px; line-height:1.3;} .ns-lpiste-feat{ display:block; font-size:.72rem; font-style:italic; font-weight:400; color:var(--ns-sourd); } .ns-lpiste-dur{font-size:.8rem; color:var(--ns-sourd); font-variant-numeric:tabular-nums;} .ns-lpiste.actif{background:rgba(242,193,78,.13);} .ns-lpiste.actif .ns-lpiste-titre, .ns-lpiste.actif .ns-lpiste-no{color:var(--ns-or-vif);} /* le petit voyant « en écoute » : 3 barres qui dansent, INLINE avant le titre (figées si la musique ne joue pas — .ns-live absent → animation en pause) */ .ns-lpiste-vu{display:none;} .ns-lpiste.actif .ns-lpiste-vu{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; vertical-align:middle; margin-right:.45em; } .ns-lpiste-vu i{ width:3px; height:45%; border-radius:1px; background:var(--ns-or-vif); transform-origin:bottom; animation:nsEq .9s ease-in-out infinite alternate; } .ns-lpiste-vu i:nth-child(2){height:95%; animation-delay:.22s;} .ns-lpiste-vu i:nth-child(3){height:65%; animation-delay:.45s;} #fiche[data-perso="niska"]:not(.ns-live) .ns-lpiste-vu i{animation-play-state:paused;} .ns-transport{border-top:1px solid rgba(255,255,255,.08); padding-top:1rem;} .ns-prog{ position:relative; height:9px; overflow:hidden; cursor:pointer; border:1px solid rgba(255,215,94,.35); border-radius:999px; background:#0b0910; } .ns-prog i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #f2c14e, #ffd75e); } .ns-transport-bas{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.65rem; flex-wrap:wrap; } .ns-compteur{ font-size:.84rem; color:var(--ns-sourd); font-variant-numeric:tabular-nums; } .ns-transport-btns{display:flex; align-items:center; gap:.4rem;} .ns-tbtn{ display:inline-flex; align-items:center; justify-content:center; font:inherit; line-height:1; background:none; border:1px solid var(--ns-filet); color:var(--ns-creme); border-radius:999px; padding:.4em; cursor:pointer; } .ns-tbtn svg{width:17px; height:17px; display:block; fill:currentColor;} .ns-tbtn svg.ns-ic-stroke{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ns-tbtn:hover, .ns-tbtn:focus-visible{border-color:var(--ns-or-vif); color:var(--ns-or-vif);} .ns-tbtn.actif{ /* aléatoire / repeat enclenchés */ background:linear-gradient(90deg, #c8922a, #ffd75e); border-color:transparent; color:#241703; } /* le bouton central play/pause = le primaire (pastille dorée) */ .ns-tbtn-play{ background:linear-gradient(90deg, #c8922a, #ffd75e); border-color:transparent; color:#241703; padding:.44em; } .ns-tbtn-play svg{width:19px; height:19px;} .ns-tbtn-play:hover, .ns-tbtn-play:focus-visible{color:#241703; filter:brightness(1.08);} .ns-tbtn-play .ns-ic-pause{display:none;} .ns-tbtn-play.joue .ns-ic-play{display:none;} .ns-tbtn-play.joue .ns-ic-pause{display:inline-flex;} .ns-carte{ background:var(--ns-carte); border:1px solid var(--ns-filet); border-radius:14px; padding:1.3rem 1.4rem 1rem; } .ns-pass{position:relative; padding-top:2.7rem;} .ns-pass-trou{ position:absolute; top:.6rem; left:50%; transform:translateX(-50%); width:44px; height:10px; border-radius:6px; background:#070509; box-shadow:inset 0 1px 3px #000, 0 0 0 2px rgba(242,193,78,.25); } #fiche[data-perso="niska"] .ns-pass-bande{ font-family:'Bungee', sans-serif; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; text-align:center; color:#241703; background:linear-gradient(90deg, #c8922a, #ffd75e, #c8922a); border-radius:6px; padding:.4em .5em; margin:0 0 .9rem; } .ns-rang{ display:grid; grid-template-columns:142px 1fr; gap:.2rem .8rem; padding:.5em 0; border-top:1px solid rgba(255,255,255,.07); font-size:16.5px; /* agrandie (owner) : équilibre la colonne de droite avec le lecteur d'album ajouté à gauche */ } .ns-rang:first-of-type{border-top:0;} .ns-cle{ font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ns-or); align-self:baseline; padding-top:.25em; } .ns-val{color:var(--ns-creme); line-height:1.45;} .ns-val s{opacity:.6; text-decoration-color:var(--ns-rouge); text-decoration-thickness:2px;} /* ---- SECTIONS (les pistes) ---- */ .ns-section{margin:3.2rem 0; display:flow-root;} .ns-sec-tete{margin-bottom:1.4rem;} .ns-sec-tete.ns-al-d{text-align:right;} .ns-sec-tete.ns-al-c{text-align:center;} #fiche[data-perso="niska"] .ns-piste{ font-family:'Bungee', sans-serif; font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ns-magenta); margin:0 0 .25em; text-align:inherit; } .ns-sec-tete h2{ font-family:'Bungee', sans-serif; font-weight:400; font-size:clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.1; color:var(--ns-creme); margin:0; text-shadow:0 3px 0 rgba(0,0,0,.5); } .ns-sec-ligne{display:flex; align-items:center; gap:.8rem; margin-top:.5rem;} .ns-sec-ligne::after{ content:""; flex:1; height:2px; border-radius:1px; background:linear-gradient(90deg, rgba(242,193,78,.5), transparent); } .ns-al-d .ns-sec-ligne{flex-direction:row-reverse;} .ns-al-d .ns-sec-ligne::after{background:linear-gradient(270deg, rgba(242,193,78,.5), transparent);} .ns-al-c .ns-sec-ligne::before{ content:""; flex:1; height:2px; border-radius:1px; background:linear-gradient(270deg, rgba(242,193,78,.5), transparent); } .ns-h3{ font-family:'Bungee', sans-serif; font-weight:400; font-size:1.12rem; color:var(--ns-or-vif); margin:1.6rem 0 .7rem; } /* ---- photos (traitement DUOTONE or — jamais de photo brute plein cadre) ---- */ .ns-photo{margin:0;} .ns-photo.droite{float:right; width:min(44%, 370px); margin:.3rem 0 1rem 1.8rem;} .ns-photo.gauche{float:left; width:min(44%, 370px); margin:.3rem 1.8rem 1rem 0;} .ns-photo.large{width:min(720px, 100%); margin:1.4rem auto 1.6rem;} .ns-duo{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--ns-filet); background:linear-gradient(160deg, #f2c14e, #7a4de0 135%); } .ns-duo img{ display:block; width:100%; filter:grayscale(1) contrast(1.06) brightness(.95); mix-blend-mode:luminosity; } .ns-photo figcaption{ font-size:.84rem; font-style:italic; color:var(--ns-sourd); margin-top:.5em; text-align:center; /* légendes centrées sous les photos (owner) */ } /* la punchline taguée au marqueur */ #fiche[data-perso="niska"] .ns-punch{ font-family:'Permanent Marker', cursive; font-size:clamp(1.45rem, 3vw, 1.9rem); line-height:1.3; color:var(--ns-or-vif); text-align:center; max-width:640px; margin:1.8rem auto; transform:rotate(-2deg); text-shadow:0 0 22px rgba(242,193,78,.3); } /* ---- Histoire : les chapitres (celui de Skaodi en sourdine) ---- */ .ns-chapitre{margin:0 0 1.5rem;} .ns-chapitre.sombre{ background:rgba(9,7,13,.62); border-left:3px solid rgba(201,212,223,.35); border-radius:0 12px 12px 0; padding:1rem 1.3rem .1rem; margin:1.8rem 0; } .ns-chapitre.sombre .ns-h3{color:var(--ns-argent); margin-top:.2rem;} /* ---- Relations : les crédits de l'album ---- */ /* flex centré (plus de grid) : la dernière rangée incomplète — Rako et Madrane — se CENTRE au lieu de rester collée à gauche (owner) */ .ns-crew{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:1rem 0 1.6rem; } .ns-crew .ns-membre{flex:1 1 250px; max-width:360px;} .ns-crew.un .ns-membre{flex:0 1 520px; max-width:520px;} .ns-membre{ background:var(--ns-carte); border:1px solid var(--ns-filet); border-top:3px solid var(--ns-or); border-radius:12px; padding:1rem 1.1rem .2rem; } .ns-membre header{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.55rem; } .ns-membre h4{ font-family:'Bungee', sans-serif; font-weight:400; font-size:.98rem; color:var(--ns-or-vif); margin:0; } .ns-role{font-size:.78rem; font-style:italic; color:var(--ns-sourd);} #fiche[data-perso="niska"] .ns-membre p{font-size:16.5px; line-height:1.6;} .ns-membre.froide{border-top-color:var(--ns-argent);} .ns-membre.froide h4{color:var(--ns-argent);} .ns-membre.rose{border-top-color:#ef6ab8;} .ns-membre.rose h4{color:#f48cc9;} /* le mémorial de Skaodi + la place vide du premier rang */ .ns-memorial{ background:rgba(9,7,13,.72); border:1px solid rgba(201,212,223,.18); border-radius:14px; padding:1.4rem 1.5rem 1rem; margin:2rem 0; } .ns-memorial .ns-h3{color:var(--ns-argent); margin-top:0;} .ns-rangee{position:relative; margin-top:1.3rem;} .ns-sieges{display:flex; justify-content:center; gap:.55rem; margin-bottom:.6rem;} .ns-siege{ position:relative; width:46px; height:52px; border:0; cursor:pointer; padding:0; background:linear-gradient(180deg, #64183c, #4a1030); border-radius:10px 10px 4px 4px; box-shadow:inset 0 -14px 0 rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.5); } .ns-siege:hover{filter:brightness(1.15);} .ns-siege.libre{ background:linear-gradient(180deg, #2a2333, #1a1523); box-shadow:inset 0 -14px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(242,193,78,.55), 0 3px 8px rgba(0,0,0,.5); } /* le projecteur du recueillement (bascule par display : jamais gelable) */ .ns-lueur-siege{ display:none; position:absolute; left:50%; bottom:96%; width:76px; height:90px; transform:translateX(-50%); pointer-events:none; background:linear-gradient(180deg, rgba(255,215,94,.02), rgba(255,215,94,.32)); clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%); } .ns-siege.recueille .ns-lueur-siege, .ns-siege.honore .ns-lueur-siege{display:block;} .ns-siege.honore{box-shadow:inset 0 -14px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,215,94,.85), 0 0 18px rgba(255,215,94,.35), 0 3px 8px rgba(0,0,0,.5);} #fiche[data-perso="niska"] .ns-rangee-lbl{ font-size:.84rem; font-style:italic; color:var(--ns-sourd); text-align:center; margin:0; } /* ---- Équipement : les trois pièces ---- */ .ns-equips{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.2rem; margin-top:1.2rem; } .ns-equip{ background:var(--ns-carte); border:1px solid var(--ns-filet); border-radius:14px; padding:1.2rem 1.2rem .3rem; text-align:center; } .ns-equip-cadre{ display:flex; align-items:center; justify-content:center; height:150px; margin-bottom:.7rem; } .ns-equip-cadre img{ max-height:140px; max-width:82%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); } .ns-equip header{display:block;} .ns-equip .ns-h3{margin:.1rem 0 .2rem;} .ns-equip-tag{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#241703; background:linear-gradient(90deg, #c8922a, #ffd75e); border-radius:999px; padding:.24em .8em; margin:.1em 0 .8em; } #fiche[data-perso="niska"] .ns-equip p{font-size:16.5px; line-height:1.6;} /* ---- Nen : la divination + les 5 tracks ---- */ .ns-divination{ background:rgba(63,208,201,.07); border:1px solid rgba(63,208,201,.3); border-radius:12px; padding:1.1rem 1.3rem .2rem; max-width:720px; margin:1.4rem auto; } #fiche[data-perso="niska"] .ns-divination-titre{ font-family:'Bungee', sans-serif; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ns-teal); margin:0 0 .6em; text-align:center; } #fiche[data-perso="niska"] .ns-divination p{font-size:17.5px;} .ns-caps{display:grid; gap:1.4rem; margin-top:1.6rem; text-align:left;} .ns-cap{ position:relative; background:var(--ns-carte); border:1px solid var(--ns-filet); border-left:4px solid var(--cap, var(--ns-or)); border-radius:14px; padding:1.4rem 1.5rem .5rem; } .ns-cap.bendo{--cap:#ff5257;} .ns-cap.rang{--cap:#d76be9;} .ns-cap.sound{--cap:#3fd0c9;} .ns-cap.larsen{--cap:#ffd75e;} .ns-cap.acap{ --cap:#8b95a3; background:linear-gradient(180deg, #0b0a10, #08070c); border-color:rgba(139,149,163,.4); border-left-color:#8b95a3; } #fiche[data-perso="niska"] .ns-cap.acap p{color:#c3cad2;} .ns-cap-tete{ display:grid; grid-template-columns:1fr auto; gap:.15rem .9rem; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:.7rem; margin-bottom:1rem; } .ns-cap-nom{ font-family:'Bungee', sans-serif; font-weight:400; font-size:1.3rem; color:var(--cap); margin:0; grid-column:1; } #fiche[data-perso="niska"] .ns-cap-sst{ font-style:italic; font-size:1rem; color:var(--ns-sourd); margin:0; text-align:left; grid-column:1; } .ns-cap-type{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cap); border:1px solid; border-radius:999px; padding:.32em .85em; white-space:nowrap; } .ns-cap .ns-lbl{color:var(--cap);} /* ---- la JAUGE DE FEEDBACK (l'ampli à cogner) ---- */ .ns-ampli{ background:rgba(10,8,14,.55); border:1px dashed rgba(255,215,94,.35); border-radius:12px; padding:1.1rem 1.3rem; margin:0 0 1.1rem; } #fiche[data-perso="niska"] .ns-ampli-titre{ font-size:.95rem; color:var(--ns-or-vif); font-weight:700; margin:0 0 .9em; text-align:left; } .ns-ampli-corps{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;} .ns-enceinte{ position:relative; flex:0 0 auto; width:120px; height:150px; padding:0; cursor:pointer; border:2px solid #2c2434; border-radius:10px; background:linear-gradient(180deg, #191420, #0e0b14); box-shadow:0 6px 14px rgba(0,0,0,.5); } .ns-woofer{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:78px; height:78px; border-radius:50%; background:radial-gradient(circle at 50% 45%, #3a3146 0 18%, #14101c 19% 55%, #241d31 56% 70%, #0d0a13 71%); box-shadow:inset 0 0 0 3px #33293f; } .ns-tweeter{ position:absolute; left:50%; top:12px; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; background:radial-gradient(circle, #33293f 0 30%, #120e1a 62%); box-shadow:inset 0 0 0 2px #33293f; } .ns-tape{ position:absolute; right:-16px; top:-14px; font-family:'Permanent Marker', cursive; font-size:.8rem; color:#fff; background:#e6394a; padding:.22em .6em; border-radius:6px; transform:rotate(7deg); box-shadow:0 3px 8px rgba(0,0,0,.4); } .ns-enceinte.ns-boum{animation:nsBoum .22s ease-out;} @keyframes nsBoum{0%{transform:scale(1);}35%{transform:scale(1.08);}100%{transform:scale(1);}} .ns-jauge-zone{flex:1; min-width:220px;} .ns-jauge{ position:relative; height:22px; overflow:hidden; border:1px solid rgba(255,215,94,.4); border-radius:999px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 8px, rgba(255,255,255,0) 8px 12px), #0b0910; } .ns-jauge i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #f2c14e, #ffd75e 60%, #ff9d5c); } .ns-jauge i.chaud{background:linear-gradient(90deg, #ffd75e, #ff7847, #ff4d5a);} #fiche[data-perso="niska"] .ns-jauge-lbl{ font-size:.85rem; color:var(--ns-sourd); margin:.55em 0 0; text-align:left; } #nsJaugePct{color:var(--ns-or-vif); font-weight:800;} /* le bouton A Cappella (« on air » qui s'éteint) */ .ns-taire{ display:inline-flex; align-items:center; gap:.6em; font-family:'Bungee', sans-serif; font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; color:#c3cad2; background:#0b0a10; border:1px solid rgba(139,149,163,.5); border-radius:999px; padding:.65em 1.4em; cursor:pointer; margin:.2rem 0 1rem; } .ns-taire:hover, .ns-taire:focus-visible{border-color:#c3cad2; color:#fff;} .ns-taire-pt{ width:10px; height:10px; border-radius:50%; background:#e6394a; box-shadow:0 0 8px #e6394a; animation:nsPulse 1.6s ease-in-out infinite; } @keyframes nsPulse{0%,100%{opacity:1;}50%{opacity:.45;}} /* le REFLET DE LAME (fixe sur , pendant le silence) */ #nsGlint{ position:fixed; z-index:640; width:46px; height:46px; padding:0; border:0; background:transparent; cursor:pointer; } #nsGlint::before{ content:""; position:absolute; left:50%; top:50%; width:3px; height:40px; transform:translate(-50%, -50%) rotate(38deg); border-radius:2px; background:linear-gradient(180deg, transparent, #eef4ff 45%, transparent); box-shadow:0 0 14px rgba(220,235,255,.8); } #nsGlint::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(224,238,255,.28), transparent 65%); animation:nsGlint 1.1s ease-in-out infinite alternate; } @keyframes nsGlint{from{opacity:.35;}to{opacity:1;}} /* l'ONDE DE CHOC du BENDO (fixe sur , retirée par timer) */ .ns-onde{ position:fixed; z-index:630; width:10px; height:10px; pointer-events:none; transform:translate(-50%, -50%); } .ns-onde::before, .ns-onde::after{ content:""; position:absolute; inset:0; border-radius:50%; border:3px solid rgba(255,215,94,.8); animation:nsOnde 1s ease-out forwards; } .ns-onde::after{animation-delay:.16s; border-color:rgba(255,82,87,.7);} @keyframes nsOnde{from{transform:scale(1); opacity:1;}to{transform:scale(140); opacity:0;}} .boite-fiche.ns-secousse{animation:nsSecousse .55s ease-out;} @keyframes nsSecousse{ 0%{transform:translate(0,0);} 18%{transform:translate(-7px,4px);} 36%{transform:translate(6px,-5px);} 54%{transform:translate(-5px,-3px);} 72%{transform:translate(4px,3px);} 100%{transform:translate(0,0);} } /* ---- Aptitudes : la console de mix ---- */ .ns-apts{ position:relative; /* l'étoile ④ se pose au centre de la console */ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.2rem; } .ns-apt{ position:relative; background:var(--ns-carte); border:1px solid var(--ns-filet); border-radius:12px; padding:1.1rem 1.2rem .2rem 2.6rem; } .ns-apt .ns-h3{margin-top:0;} .ns-fader{ position:absolute; left:1.05rem; top:1.2rem; bottom:1.1rem; width:6px; border-radius:3px; background:rgba(255,255,255,.09); /* le rail se MANIPULE (étoile ④) : zone de prise élargie à 24px SANS perdre le trait visible. ⚠ box-sizing:content-box explicite (le projet a border-box global → sinon le padding 18px mangeait les 6px et le trait disparaissait, owner bug-report) : content-box garde les 6px de background + ajoute 9px de prise de chaque côté, clippés au contenu. */ box-sizing:content-box; padding:0 9px; margin-left:-9px; background-clip:content-box; cursor:grab; } .ns-fader:active{cursor:grabbing;} .ns-fader i{ position:absolute; left:50%; top:22%; transform:translateX(-50%); width:18px; height:10px; border-radius:3px; background:linear-gradient(180deg, #ffd75e, #c8922a); box-shadow:0 2px 5px rgba(0,0,0,.5); } .ns-apt:nth-child(2) .ns-fader i{top:10%;} .ns-apt:nth-child(3) .ns-fader i{top:36%;} #fiche[data-perso="niska"] .ns-apt p{font-size:16.5px; line-height:1.6;} /* ---- Notes ---- */ .ns-notes{list-style:none; margin:0; padding:0; max-width:880px;} #fiche[data-perso="niska"] .ns-notes li{ position:relative; padding-left:2rem; margin-bottom:.9em; font-size:17.5px; line-height:1.62; text-align:justify; color:var(--ns-creme); } .ns-notes li::before{ content:"♪"; position:absolute; left:.35rem; top:0; color:var(--ns-or-vif); font-size:1.05em; } .ns-notes li:nth-child(even)::before{content:"♫";} /* ---- la fin : mic drop ---- */ .ns-fin{ display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:3.4rem 0 .6rem; } .ns-micdrop{ width:72px; transform:rotate(104deg); filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)); margin-top:.5rem; } #fiche[data-perso="niska"] .ns-fin-txt{ font-family:'Permanent Marker', cursive; font-size:1.1rem; color:var(--ns-sourd); text-align:center; margin:0; } /* ---- étoiles (spécificité ≥ (1,3,0), leçon Brevshket) ---- */ #fiche[data-perso="niska"] .boite-int .etoile-fiche{ position:absolute; left:calc(50% - 24px); top:calc(50% - 24px); width:48px; height:auto; cursor:pointer; z-index:6; mix-blend-mode:normal; filter:drop-shadow(0 0 9px rgba(255,220,80,.8)); } #fiche[data-perso="niska"] .indice-etoile{cursor:pointer;} /* ---- responsive ---- */ @media (max-width:960px){ .ns-hero{grid-template-columns:1fr; gap:2rem;} .ns-album{justify-self:center; margin-right:8%;} .ns-haut{grid-template-columns:1fr;} .ns-cartes{max-width:520px; width:100%; margin:0 auto;} } @media (max-width:720px){ #fiche[data-perso="niska"] .boite-int{padding:1.6rem 1.1rem 2rem;} #fiche[data-perso="niska"] p, #fiche[data-perso="niska"] .ns-notes li{font-size:17px; line-height:1.62;} #fiche[data-perso="niska"] .ns-intro{font-size:18px;} .ns-photo.droite, .ns-photo.gauche{ float:none; width:min(100%, 340px); margin:.6rem auto 1.2rem; } .ns-album{width:min(320px, 88%); margin:0 auto;} .ns-vinyle{right:-10%;} .ns-rang{grid-template-columns:112px 1fr; font-size:15px;} .ns-sieges{gap:.4rem;} .ns-siege{width:38px; height:46px;} .ns-cap{padding:1.1rem 1rem .3rem;} .ns-cap-tete{grid-template-columns:1fr;} .ns-cap-type{grid-column:1; grid-row:auto; justify-self:start;} .ns-ampli-corps{gap:1.1rem;} .ns-chapitre.sombre{padding:.9rem 1rem .1rem;} } /* reduced-motion : l'égaliseur, le voyant et le reflet restent visibles mais figés ; l'onde de choc et la secousse sont coupées */ @media (prefers-reduced-motion: reduce){ .ns-eq i, .ns-taire-pt, #nsGlint::after{animation:none;} .ns-onde{display:none;} .boite-fiche.ns-secousse, .ns-enceinte.ns-boum{animation:none;} #fiche[data-perso="niska"].ns-live .ns-vinyle{animation:none;} } /* ============================================================ SALLE DES TROPHÉES — l'observatoire du temple (2026-07-21) Derrière la porte étoilée du foyer : le mur des 50 étoiles, le trésor et les succès. Charte du site (nuit/pierre/or, Luckiest Guy + Nunito), ciel étoilé en fond. ============================================================ */ #trophees{ position:relative; background: radial-gradient(circle 1.6px at 12% 22%, rgba(255,210,63,.5), transparent 2.4px), radial-gradient(circle 1.2px at 78% 14%, rgba(255,244,224,.4), transparent 2px), radial-gradient(circle 1.4px at 32% 64%, rgba(255,210,63,.32), transparent 2.2px), radial-gradient(circle 1px at 88% 52%, rgba(255,244,224,.35), transparent 1.8px), radial-gradient(circle 1.3px at 55% 36%, rgba(255,210,63,.28), transparent 2px), radial-gradient(circle 1px at 22% 82%, rgba(200,214,255,.3), transparent 1.7px), radial-gradient(circle .9px at 66% 74%, rgba(255,244,224,.28), transparent 1.6px), /* la NÉBULEUSE de l'observatoire : voiles violets et or, très doux */ radial-gradient(ellipse 46% 30% at 76% 18%, rgba(122,77,224,.14), transparent 70%), radial-gradient(ellipse 52% 34% at 18% 58%, rgba(255,210,63,.06), transparent 72%), radial-gradient(ellipse 40% 26% at 62% 86%, rgba(90,140,255,.08), transparent 70%), /* le halo de lune, tout en haut au centre */ radial-gradient(ellipse 34% 18% at 50% -4%, rgba(255,244,224,.12), transparent 75%), radial-gradient(ellipse 120% 90% at 50% -10%, #241b4a, #120c26 68%); background-size: 520px 460px, 430px 380px, 620px 540px, 360px 320px, 480px 420px, 390px 350px, 560px 500px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; min-height:100vh; } /* le SCINTILLEMENT : une poignée d'étoiles plus vives respirent par-dessus (décoratif — gelé = simple voile étoilé fixe) */ #trophees::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle 1.8px at 26% 30%, rgba(255,244,224,.8), transparent 2.6px), radial-gradient(circle 1.5px at 71% 44%, rgba(255,210,63,.7), transparent 2.3px), radial-gradient(circle 1.6px at 48% 70%, rgba(220,230,255,.7), transparent 2.4px), radial-gradient(circle 1.4px at 85% 78%, rgba(255,244,224,.65), transparent 2.2px); background-size:700px 620px, 540px 480px, 660px 580px, 460px 420px; animation:trScintille 3.6s ease-in-out infinite alternate; } @keyframes trScintille{from{opacity:.15;}to{opacity:.85;}} #tropheesContenu{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:2.2rem 1.4rem 4rem; } /* l'étoile filante de l'observatoire (élément fixe sur , posé en JS) */ .tr-filante{ position:fixed; z-index:250; pointer-events:none; width:150px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(255,244,224,0), #fff4e0 82%, #ffd23f); transform:rotate(24deg); animation:trFile 1.4s ease-out forwards; } .tr-filante::after{ content:""; position:absolute; right:-2px; top:-2px; width:6px; height:6px; border-radius:50%; background:#fff4e0; box-shadow:0 0 10px 2px rgba(255,220,120,.85); } @keyframes trFile{ from{opacity:0; translate:0 0;} 12%{opacity:1;} to{opacity:0; translate:38vw 17vw;} } @media (prefers-reduced-motion: reduce){ #trophees::before{animation:none; opacity:.5;} .tr-filante{display:none;} } .tr-entete{text-align:center; margin-bottom:2.2rem;} .tr-entete h1{ font-family:'Luckiest Guy', cursive; font-size:clamp(2.2rem, 5vw, 3.4rem); color:#ffd23f; letter-spacing:.02em; margin:0 0 .15em; text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 28px rgba(255,210,63,.25); } .tr-sous{color:#cfc6ec; font-style:italic; margin:0 0 1.2rem;} .tr-stats{display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap;} .tr-stat{ display:inline-flex; align-items:center; gap:.5em; background:rgba(61,53,96,.65); border:1px solid rgba(255,210,63,.35); border-radius:999px; padding:.45em 1.1em; font-weight:800; color:#fff4e0; font-size:1.05rem; } .tr-stat img{height:22px; width:auto;} .tr-panneau{ background:linear-gradient(175deg, rgba(36,27,74,.66), rgba(20,13,40,.78) 55%); border:1px solid rgba(255,210,63,.32); border-radius:18px; padding:1.6rem 1.8rem 1.8rem; margin-bottom:1.8rem; box-shadow:0 14px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,210,63,.08), inset 0 1px 0 rgba(255,244,224,.07); } .tr-panneau h2{ font-family:'Luckiest Guy', cursive; font-size:1.5rem; color:#fff4e0; margin:0 0 .5rem; text-shadow:0 3px 0 rgba(0,0,0,.4); text-align:center; } /* une étoile dorée DE CHAQUE CÔTÉ du gros titre (owner) */ .tr-panneau h2::before, .tr-panneau h2::after{ color:#ffd23f; text-shadow:0 0 12px rgba(255,210,63,.6); } .tr-panneau h2::before{content:"✦ ";} .tr-panneau h2::after{content:" ✦";} .tr-consigne{color:#b9aed9; font-size:.95rem; margin:0 0 1.1rem; text-align:center;} /* ---- le mur des étoiles ---- */ .tr-detail{ background:rgba(61,53,96,.5); border:1px dashed rgba(255,210,63,.4); border-radius:12px; padding:.85rem 1.1rem; margin-bottom:1.4rem; min-height:64px; } .tr-detail-vide{color:#8f84b8; font-style:italic; margin:0; text-align:center; line-height:2.2;} .tr-detail-nom{font-weight:900; color:#ffd23f; margin:0 0 .25em; font-size:1.05rem;} .tr-detail-ou{font-weight:600; color:#b9aed9; font-size:.85rem;} .tr-detail-indice{color:#fff4e0; margin:0; font-size:.98rem;} .tr-groupe{margin-bottom:.9rem;} .tr-groupe h3{ font-family:'Cinzel', serif; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:#b9aed9; margin:0 0 .4rem; } .tr-slots{display:flex; flex-wrap:wrap; gap:.5rem;} .tr-slot{ width:52px; height:52px; padding:6px; background:rgba(61,53,96,.45); border:1px solid rgba(255,255,255,.12); border-radius:12px; cursor:pointer; transition:transform .15s ease, border-color .15s ease; } .tr-slot:hover{transform:translateY(-2px);} .tr-slot.eue{box-shadow:0 0 12px rgba(255,210,63,.3), inset 0 0 8px rgba(255,210,63,.15);} .tr-slot img{ width:100%; height:100%; object-fit:contain; /* silhouette grise tant que l'étoile n'est pas obtenue (façon SM64) */ filter:grayscale(1) brightness(.45) opacity(.6); } .tr-slot.eue{border-color:rgba(255,210,63,.55); background:rgba(255,210,63,.12);} .tr-slot.eue img{filter:none;} .tr-slot:hover, .tr-slot:focus-visible{border-color:#ffd23f;} .tr-slot.choisie{ border-color:#ffd23f; box-shadow:0 0 0 2px rgba(255,210,63,.45), 0 0 14px rgba(255,210,63,.3); } /* étoile d'un lieu ENCORE SECRET : point d'interrogation énigmatique, ni nom ni indice (owner : ne pas spoiler l'Observatoire / la galerie secrète). Le groupe entier prend un titre « ??? ». */ .tr-slot-cache{ display:grid; place-items:center; background:rgba(30,24,54,.6); border-style:dashed; border-color:rgba(255,255,255,.18); } .tr-slot-cache span{ font-family:'Luckiest Guy',cursive; font-size:1.5rem; color:rgba(200,190,230,.55); } .tr-slot-cache:hover span{color:rgba(255,210,63,.7);} .tr-mystere{ font-family:'Luckiest Guy',cursive; letter-spacing:.15em; color:rgba(200,190,230,.6); } .tr-groupe-cache h3{color:rgba(200,190,230,.55);} /* ---- le trésor ---- */ .tr-tresor{text-align:center;} .tr-piece{height:56px; margin:.4rem 0 .2rem;} .tr-tresor-nb{ font-family:'Luckiest Guy', cursive; font-size:2.2rem; color:#ffd23f; margin:0 0 .6rem; text-shadow:0 3px 0 rgba(0,0,0,.4); } .tr-tresor-nb span{font-size:.55em; color:#cfc6ec;} .tr-tresor .tr-consigne{max-width:560px; margin:0 auto;} /* ---- les succès ---- */ /* ⭐ TROIS COLONNES, FIXES (owner 2026-09-16 : « l'idée est d'avoir les lignes de 3 succès, et Perfection tout en bas au milieu »). ⚠ plus d'`auto-fit` : le nombre de colonnes variait avec la largeur, donc « au milieu » ne voulait rien dire. Deux colonnes sur tablette, une sur téléphone — et le banc exige un nombre de succès (Perfection à part) multiple de 3, ce qui remplit AUSSI les lignes de deux et d'une. */ .tr-liste-succes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.9rem; margin-top:1rem; } @media (max-width:1100px){ .tr-liste-succes{grid-template-columns:repeat(2, minmax(0, 1fr));} } /* ⭐⭐ LE CADRE DES SUCCÈS CACHÉS (owner 2026-09-17, la clé rouge : « donne lui un cadre exprès pour ce type de succès si jamais on les ajoute plus tard »). Ils n'existent au mur qu'une fois GAGNÉS — ce cadre ne se voit donc jamais vide : il annonce une trouvaille, pas un objectif. ⚠ il prend la colonne du MILIEU, comme Perfection, et suit les mêmes bascules d'écran : la grille garde ses lignes de trois quoi qu'il arrive. ⚠ ANTI-GEL : le liseré et le sceau sont PEINTS ; seule la lueur de l'icône respire, et sa pire image reste parfaitement lisible. */ .tr-succ-cachee{ grid-column:2; position:relative; margin-top:.9rem; flex-direction:column; text-align:center; gap:.5rem; padding:1.15rem 1.1rem 1rem; border:2px dashed rgba(190,170,255,.55); border-radius:18px; background:radial-gradient(120% 140% at 50% 0%, rgba(120,90,200,.22), rgba(13,9,32,.72) 66%); box-shadow:0 0 0 4px rgba(23,16,48,.5), 0 8px 24px rgba(0,0,0,.4); } .tr-succ-cachee::before{ content:"Succès caché · trouvé sans indice"; position:absolute; top:-.72rem; left:50%; transform:translateX(-50%); font-family:'Cinzel', serif; font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase; color:#d9ccff; white-space:nowrap; background:#171030; border:1px solid rgba(190,170,255,.5); border-radius:999px; padding:.12rem .6rem; } .tr-succ-cachee .tr-succ-ico{ width:64px; height:64px; font-size:2rem; border:2px solid rgba(190,170,255,.5); animation:trCacheeLueur 3.6s ease-in-out infinite; } .tr-succ-cachee .tr-succ-txt h3{ font-family:'Luckiest Guy', cursive; font-weight:400; font-size:1.4rem; letter-spacing:.5px; color:#d9ccff; } @keyframes trCacheeLueur{ 0%,100%{box-shadow:0 0 10px rgba(150,120,255,.35);} 50% {box-shadow:0 0 22px rgba(190,170,255,.65);} } @media (max-width:1100px){ .tr-succ-cachee{grid-column:1 / -1; justify-self:center; width:min(100%, 460px);} } @media (prefers-reduced-motion: reduce){ .tr-succ-cachee .tr-succ-ico{animation:none;} } /* ═══ PERFECTION — le couronnement, seul sur sa ligne, au MILIEU ═══ C'est le succès `hors` décompte (le 100 %) : le renderer lui pose la classe d'après ce drapeau, jamais d'après son identifiant. ⚠ ANTI-GEL : le reflet qui passe est du DÉCOR pur (::after, aucun état n'en dépend) ; gelé, la carte reste identique et lisible. */ .tr-succ-perfection{ grid-column:2; position:relative; overflow:hidden; margin-top:.9rem; flex-direction:column; text-align:center; gap:.55rem; padding:1.4rem 1.2rem 1.3rem; border:2px solid rgba(255,210,63,.4); border-radius:18px; background:radial-gradient(130% 150% at 50% 0%, rgba(255,210,63,.16), rgba(61,53,96,.55) 62%); box-shadow:0 0 0 4px rgba(23,16,48,.5), 0 8px 24px rgba(0,0,0,.35); } .tr-succ-perfection .tr-succ-ico{width:74px; height:74px; font-size:2.4rem; border:2px solid rgba(255,210,63,.45);} .tr-succ-perfection .tr-succ-txt h3{ font-family:'Luckiest Guy', cursive; font-weight:400; font-size:1.75rem; letter-spacing:1px; color:#ffd23f; margin-bottom:.25em; } .tr-succ-perfection.ok{ border-color:#ffd23f; background:radial-gradient(130% 150% at 50% 0%, rgba(255,210,63,.34), rgba(90,60,20,.45) 60%, rgba(61,53,96,.5)); box-shadow:0 0 0 4px rgba(23,16,48,.5), 0 0 26px rgba(255,210,63,.5), inset 0 0 22px rgba(255,210,63,.22); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .tr-succ-perfection.ok .tr-succ-txt h3{ background:linear-gradient(90deg, #ffd23f, #fff4e0 50%, #ffd23f); -webkit-background-clip:text; background-clip:text; color:transparent; } } .tr-succ-perfection::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:38%; transform:rotate(18deg); pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,244,224,.20), transparent); animation:trPerfReflet 5.5s ease-in-out infinite; } @keyframes trPerfReflet{ 0%, 55%{left:-60%;} 100%{left:130%;} } @media (max-width:1100px){ .tr-succ-perfection{grid-column:1 / -1; justify-self:center; width:min(100%, 460px);} } @media (prefers-reduced-motion: reduce){ .tr-succ-perfection::after{animation:none; display:none;} } .tr-succ{ display:flex; align-items:center; gap:.9rem; background:rgba(61,53,96,.4); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:.85rem 1rem; } .tr-succ-ico{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; border-radius:50%; background:rgba(23,16,48,.7); border:1px solid rgba(255,255,255,.12); } .tr-succ.ok{border-color:rgba(255,210,63,.5); background:rgba(255,210,63,.09);} .tr-succ.ok .tr-succ-ico{border-color:rgba(255,210,63,.6); background:rgba(255,210,63,.15);} .tr-succ-txt h3{ font-family:'Nunito', sans-serif; font-weight:900; font-size:1.02rem; color:#fff4e0; margin:0 0 .15em; } .tr-succ.ok .tr-succ-txt h3{color:#ffd23f;} .tr-succ-txt p{margin:0; font-size:.88rem; color:#cfc6ec; line-height:1.4;} .tr-succ:not(.ok) .tr-succ-txt p{color:#9c91c4;} /* ⭐ LE SUCCÈS SECRET (owner 2026-08-14, façon Steam) : son NOM se lit — c'est lui qui donne envie — mais sa description reste scellée jusqu'à ce qu'on l'ait gagné. Un liseré froid et un point d'interrogation le distinguent du simple cadenas : ce n'est pas « pas encore fait », c'est « on ne te dira pas quoi faire ». ⚠ une fois gagné, il redevient un succès comme un autre (la classe ne vaut que sur les non-obtenus). */ .tr-succ-secret{border-style:dashed; border-color:rgba(120,180,220,.34);} .tr-succ-secret .tr-succ-ico{ border-color:rgba(120,180,220,.42); background:rgba(120,180,220,.10); } .tr-succ-secret .tr-succ-txt h3{color:#a9c6e0;} .tr-succ-mystere{color:#7e93b5; font-style:italic;} /* le badge de progression du bandeau est devenu cliquable */ nav.barre .progression{cursor:pointer;} nav.barre .progression:hover .prog-item, nav.barre .progression:focus-visible .prog-item{opacity:1;} /* ---- responsive ---- */ @media (max-width:720px){ #tropheesContenu{padding:1.4rem .9rem 3rem;} .tr-panneau{padding:1.2rem 1rem 1.3rem;} .tr-slot{width:44px; height:44px; padding:5px;} .tr-stats{gap:.6rem;} .tr-stat{font-size:.92rem; padding:.4em .8em;} .tr-liste-succes{grid-template-columns:1fr;} .tr-succ-perfection{grid-column:auto; width:auto; justify-self:stretch;} .tr-succ-cachee{grid-column:auto; width:auto; justify-self:stretch;} .tr-succ-perfection .tr-succ-txt h3{font-size:1.45rem;} } /* ============================================================ LA GLISSADE SECRÈTE (2026-07-21) — la rosace sautable de la Salle des Trophées, le toboggan de verre en canvas, et la révélation d'objet façon « item get » (la Besace). ============================================================ */ /* --- la rosace dans l'observatoire --- */ /* ⚠ AUCUN indice qu'elle est sautable (owner v2) : pas de survol, pas d'ondulation, pas de curseur main — un pur élément de décor. Seul le CLIC déclenche le plongeon. Le secret parfait, comme dans SM64. */ .tr-vitrail-zone{text-align:center; margin:0 0 2.4rem;} .tr-vitrail{ display:inline-block; padding:0; border:0; background:none; cursor:default; border-radius:14px; line-height:0; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)); } .tr-vitrail img{ width:min(330px, 74vw); border-radius:14px; display:block; box-shadow:0 0 34px rgba(255,210,63,.16), inset 0 0 18px rgba(0,0,0,.3); } /* le plongeon : l'ondulation ne paraît QU'AU clic, la rosace aspire le visiteur */ .tr-vitrail.plonge-vitrail img{filter:url(#ondulation) brightness(1.2);} .tr-vitrail.plonge-vitrail{transform:scale(1.12); transition:transform 1.4s ease-in;} @media (prefers-reduced-motion: reduce){ .tr-vitrail.plonge-vitrail{transition:none; transform:none;} } /* --- la scène du toboggan --- */ #glissade{background:#0a0d2a;} #glissade .barre{position:sticky; top:0; z-index:20;} .gl-cadre{ position:relative; width:100%; height:calc(100vh - 61px); height:calc(100dvh - 61px); overflow:hidden; } /* ⚠ LES DEUX GLISSADES : cette règle est ce qui ÉTIRE le canvas sur toute la scène. Sans elle il garde ses 960×540 d'attribut et s'affiche en petit dans le coin (bug owner 2026-08-02 sur la Glissade Enneigée : la coquille .gl-cadre était bien partagée, mais celle-ci était scopée sur #glCanvas seul). Toute nouvelle glissade doit s'ajouter ICI. */ #glCanvas, #ngCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; } .gl-hud{ position:absolute; top:14px; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:flex-start; padding:0 18px; pointer-events:none; } .gl-chrono{ font-family:'Luckiest Guy',cursive; font-size:clamp(1.4rem,3.4vw,2.2rem); color:#fff4e0; letter-spacing:.04em; text-shadow:0 3px 0 rgba(23,16,48,.85), 0 0 18px rgba(255,210,63,.35); } .gl-compte-pieces{ display:flex; align-items:center; gap:.45em; font-family:'Luckiest Guy',cursive; font-size:clamp(1.1rem,2.6vw,1.6rem); color:#ffd23f; text-shadow:0 2px 0 rgba(23,16,48,.85); } .gl-compte-pieces img{width:1.2em; image-rendering:pixelated;} /* --- le voile (intro, compte à rebours, résultats) --- */ .gl-voile{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:1rem; pointer-events:none; } .gl-voile[hidden]{display:none;} .gl-carte{ pointer-events:auto; max-width:520px; width:min(92%, 520px); text-align:center; background:linear-gradient(rgba(23,16,48,.94), rgba(30,20,60,.94)); border:2px solid rgba(255,210,63,.5); border-radius:18px; padding:1.6rem 1.6rem 1.5rem; box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,244,224,.08); color:#fff4e0; } .gl-carte h2{ font-family:'Luckiest Guy',cursive; font-size:clamp(1.6rem,4vw,2.3rem); color:#ffd23f; margin:0 0 .6rem; letter-spacing:.03em; text-shadow:0 3px 0 rgba(0,0,0,.35); } .gl-lore{font-style:italic; color:#d9cfff; margin:.2rem 0 .9rem; line-height:1.5;} .gl-aide{font-size:.95rem; color:#fff4e0; opacity:.92; margin:.4rem 0 .9rem; line-height:1.5;} .gl-infos{font-size:.95rem; color:#d9cfff; margin:.35rem 0;} .gl-infos b{color:#ffd23f;} .gl-mini-piece{width:1.05em; vertical-align:-.15em; image-rendering:pixelated;} .gl-temps{ font-family:'Luckiest Guy',cursive; font-size:clamp(1.8rem,4.4vw,2.6rem); color:#fff4e0; margin:.2rem 0 .4rem; } .gl-record{ display:inline-block; margin-left:.4em; font-size:.55em; vertical-align:.35em; color:#171030; background:#ffd23f; border-radius:999px; padding:.15em .7em; letter-spacing:.05em; } .gl-bouton{ font-family:'Luckiest Guy',cursive; font-size:clamp(1rem,2.6vw,1.4rem); color:#171030; background:linear-gradient(#ffe27a,#ffd23f); border:3px solid #c99a1e; border-radius:12px; padding:.6em 1.4em; cursor:pointer; letter-spacing:.04em; margin-top:.8rem; box-shadow:0 0 22px rgba(255,210,63,.35), inset 0 2px 0 rgba(255,255,255,.5); transition:transform .15s ease, box-shadow .15s ease; } .gl-bouton:hover, .gl-bouton:focus-visible{ transform:scale(1.05); box-shadow:0 0 34px rgba(255,210,63,.6), inset 0 2px 0 rgba(255,255,255,.5); } .gl-bouton.sobre{ color:#fff4e0; background:linear-gradient(rgba(61,53,96,.9), rgba(43,36,74,.9)); border-color:rgba(255,244,224,.35); box-shadow:none; } .gl-boutons{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap;} .gl-compte{ pointer-events:none; font-family:'Luckiest Guy',cursive; font-size:clamp(4rem,16vw,9rem); color:#ffd23f; text-shadow:0 6px 0 rgba(23,16,48,.8), 0 0 44px rgba(255,210,63,.5); animation:glComptePop .8s ease infinite; } .gl-compte.go{color:#7cd47c; animation:none; transform:scale(1.15);} @keyframes glComptePop{ 0%{transform:scale(1.25);} 30%{transform:scale(1);} 100%{transform:scale(1);} } /* les emplacements d'étoiles des résultats (façon SM64) : silhouette tant qu'elle manque, DORÉ + étoile posée une fois obtenue (mode complété, comme les slots de la Salle des Trophées) */ .gl-etoiles{display:flex; gap:1.4rem; justify-content:center; margin:.7rem 0 .2rem;} .gl-slot-groupe{display:flex; flex-direction:column; align-items:center; gap:.35rem;} .gl-slot{ position:relative; width:58px; height:58px; border-radius:50%; background:rgba(255,244,224,.06); box-shadow:inset 0 0 0 2px rgba(255,210,63,.25); } .gl-slot:empty::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,244,224,.18); font-size:1.6rem; } .gl-slot.eue{ background:rgba(255,210,63,.14); box-shadow:inset 0 0 0 2px rgba(255,210,63,.6), 0 0 16px rgba(255,210,63,.35); } .gl-slot-nom{font-size:.78rem; color:rgba(255,244,224,.6); letter-spacing:.02em;} .gl-etoile-eue{ position:absolute; left:50%; top:50%; width:40px; height:40px; transform:translate(-50%,-50%); filter:drop-shadow(0 0 8px rgba(255,210,63,.5)); } .gl-etoile{ position:absolute; left:50%; top:50%; width:46px; height:46px; transform:translate(-50%,-50%); cursor:pointer; filter:drop-shadow(0 0 10px rgba(255,210,63,.6)); } /* ⭐ LES CARTES DES DEUX GLISSADES SUR UN ÉCRAN BAS (2026-09-19, téléphone couché) — vu sur capture à 812×375 : la carte d'intro de la Glissade Enneigée, centrée, dépassait EN HAUT ET EN BAS (titre sous la barre, bouton « Dévaler » coupé — on ne pouvait pas partir). ① la garantie : une carte ne dépasse JAMAIS son voile, elle défile dedans ; ② le confort : sur un écran bas elle s'élargit et se resserre, pour tenir sans défiler. ⚠ placé APRÈS les règles générales de la carte (sinon elles l'écrasent). */ .gl-carte{max-height:100%; overflow-y:auto; overscroll-behavior:contain;} @media (max-height:520px){ .gl-voile{padding:.4rem;} .gl-carte{max-width:760px; width:min(96%, 760px); padding:.7rem 1.2rem .8rem;} .gl-carte h2{font-size:1.35rem; margin:0 0 .25rem;} .gl-lore{margin:.1rem 0 .35rem; line-height:1.3; font-size:.88rem;} .gl-aide{font-size:.84rem; line-height:1.32; margin:.2rem 0 .35rem;} .gl-infos{font-size:.84rem; margin:.15rem 0;} .gl-temps{font-size:1.5rem; margin:.1rem 0 .2rem;} .gl-etoiles{margin:.3rem 0 .1rem; gap:1rem;} .gl-slot{width:44px; height:44px;} .gl-bouton{margin-top:.35rem; padding:.4em 1.2em; font-size:1rem;} } /* --- le petit coffre de la toute première arrivée --- */ .gl-coffre{ position:relative; display:inline-block; margin:.6rem auto .1rem; width:104px; height:88px; padding:0; border:0; background:none; cursor:pointer; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); } .gl-coffre svg{position:relative; width:100%; height:100%; z-index:1;} .gl-coffre:hover, .gl-coffre:focus-visible{filter:drop-shadow(0 6px 16px rgba(255,210,63,.4));} .coffre-couvercle{ transform-box:fill-box; transform-origin:6% 90%; transition:transform .55s cubic-bezier(.3,1.4,.5,1); } .gl-coffre.ouvre .coffre-couvercle{transform:rotate(-46deg) translateY(-4px);} .gl-coffre.ouvre{cursor:default;} .gl-coffre.secoue{animation:coffreSecoue .32s ease;} @keyframes coffreSecoue{ 0%,100%{transform:none;} 25%{transform:translateX(-4px) rotate(-2deg);} 55%{transform:translateX(4px) rotate(2deg);} 80%{transform:translateX(-2px);} } /* la lumière qui jaillit du coffre ouvert */ .coffre-lueur{ position:absolute; left:50%; top:46%; width:150px; height:150px; z-index:0; transform:translate(-50%,-50%) scale(0); pointer-events:none; background:radial-gradient(circle, rgba(255,244,190,.95), rgba(255,210,63,.5) 40%, rgba(255,210,63,0) 70%); transition:transform .7s ease-out; } .gl-coffre.ouvre .coffre-lueur{transform:translate(-50%,-50%) scale(2.1);} @media (prefers-reduced-motion: reduce){ .gl-coffre.secoue{animation:none;} .coffre-couvercle, .coffre-lueur{transition:none;} } @media (prefers-reduced-motion: reduce){ .gl-compte{animation:none;} .gl-bouton{transition:none;} } @media (max-width:720px){ .gl-cadre{height:calc(100vh - 82px); height:calc(100dvh - 82px);} .gl-carte{padding:1.2rem 1rem 1.1rem;} .gl-aide{font-size:.88rem;} } /* --- la RÉVÉLATION D'OBJET (« item get ») --- */ .objet-voile{ position:fixed; inset:0; z-index:620; display:flex; align-items:center; justify-content:center; background:rgba(5,3,15,.82); padding:1rem; } /* la PILULE de révélation (owner v2) : une vraie carte centrée, velours nuit + double liseré d'or — les objets .rare auront une version encore plus habillée quand la Besace sera bâtie */ .objet-carte{ position:relative; text-align:center; color:#fff4e0; max-width:440px; width:min(92vw, 440px); background:linear-gradient(165deg, rgba(42,16,64,.97), rgba(23,16,48,.97)); border:2px solid #ffd23f; border-radius:24px; padding:2rem 1.8rem 1.3rem; box-shadow:0 0 0 5px rgba(23,16,48,.95), 0 0 0 7px #c99a1e, 0 18px 60px rgba(0,0,0,.65), inset 0 0 26px rgba(255,210,63,.08); } .objet-carte::before{ content:"✦ ❖ ✦"; display:block; margin-bottom:1rem; color:#ffd23f; font-size:.9rem; letter-spacing:.6em; text-indent:.6em; opacity:.85; } .objet-carte img{ /* ⚠ borner AUSSI la HAUTEUR : un objet au format PORTRAIT (ex. le Manche, 80×493) débordait la pilule en largeur:190px → hauteur ~1170px, on ne voyait plus le haut/bas de la carte. max-width + max-height + contain = l'objet tient toujours dans la pilule, quel que soit son ratio. */ max-width:min(190px, 44vw); max-height:min(300px, 44vh); width:auto; height:auto; object-fit:contain; image-rendering:pixelated; /* l'apparition lente sur la fanfare — décorative : figée à mi-course, l'objet reste VISIBLE (jamais d'opacité à zéro, règle anti-gel) */ animation:objetParait 2.2s cubic-bezier(.2,.9,.3,1.15) both; filter:drop-shadow(0 0 34px rgba(255,210,63,.55)); } @keyframes objetParait{ from{transform:scale(.55) translateY(26px); filter:drop-shadow(0 0 8px rgba(255,210,63,.2)) brightness(2.4);} to{transform:none; filter:drop-shadow(0 0 34px rgba(255,210,63,.55)) brightness(1);} } .objet-carte h3{ font-family:'Luckiest Guy',cursive; font-size:clamp(1.5rem,4.4vw,2.2rem); color:#ffd23f; margin:1rem 0 .4rem; letter-spacing:.04em; text-shadow:0 3px 0 rgba(0,0,0,.4); } .objet-carte p{margin:.2rem 0 .9rem; color:#d9cfff; font-style:italic; line-height:1.5;} .objet-fermer{display:block; font-size:.85rem; color:rgba(255,244,224,.55); visibility:hidden;} .objet-voile.prete{cursor:pointer;} .objet-voile.prete .objet-fermer{visibility:visible;} @media (prefers-reduced-motion: reduce){ .objet-carte img{animation:none;} } /* ============================================================ LA BOUTIQUE DE TOAD (2026-07-21) — échoppe chaleureuse derrière la porte verrouillée du foyer. Décor dessiné en CSS (bois + velours), Toad marchand derrière son comptoir, bourse et rayons d'articles. ============================================================ */ /* le mur de l'échoppe : le background-image COMPLET (voile chaud + TEXTURE DE BOIS tuilable + repli) est posé en style INLINE par appliquerBois() — PAS via une variable CSS (une url() relative dans une var utilisée depuis ce fichier se résoudrait relativement à css/ → 404). Ici : juste le repli si le JS n'a pas encore tourné, + le rendu pixel des blocs. */ #boutique{ image-rendering:pixelated; background:linear-gradient(180deg, #3a2418 0%, #2a1810 55%, #1c0f0a 100%); } #boutique .barre{position:sticky; top:0; z-index:20; image-rendering:auto;} #boutique .bt-boutique{image-rendering:auto;} /* le contenu reste net/lissé */ .bt-boutique{ max-width:1080px; margin:0 auto; padding:1.6rem 1.2rem 3rem; } /* l'enseigne suspendue */ .bt-enseigne{ text-align:center; margin:.4rem auto 1.8rem; position:relative; width:fit-content; } .bt-enseigne span{ display:inline-block; font-family:'Luckiest Guy', cursive; font-size:clamp(1.7rem,4.6vw,2.8rem); color:#fff4e0; letter-spacing:.03em; padding:.4em 1.2em; background:linear-gradient(#7a4c28, #5c3a1e); border:4px solid #ffd23f; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,244,224,.15); text-shadow:0 3px 0 rgba(0,0,0,.45); } /* les deux chaînes de suspension */ .bt-enseigne::before, .bt-enseigne::after{ content:""; position:absolute; top:-14px; width:4px; height:16px; background:repeating-linear-gradient(#c99a1e 0 4px, #8a6a12 4px 7px); } .bt-enseigne::before{left:26%;} .bt-enseigne::after{right:26%;} /* la devanture : Toad marchand + la bourse */ .bt-devanture{ display:flex; gap:1.4rem; align-items:flex-end; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; } /* ⚠ LA BULLE NE POUSSE PLUS RIEN (owner 2026-08-06 : « le petit décalage quand un message de Toad fait plus de 3 lignes ») : EN FLUX, une réplique plus longue rallongeait la colonne du marchand et TOUTE la boutique descendait d'autant à chaque clic sur Toad. Elle est donc SORTIE DU FLUX, calée par son BAS juste au-dessus de lui : elle grandit vers le haut, dans la place déjà réservée par le padding — les rayons ne bougent plus d'un pixel. ⚠ --bulle-place = 100px : mesuré (outils de session, police MAJORANTE plus large que Nunito 600), la plus longue des 23 répliques fait 3 lignes = 85 px. Une réplique plus longue ne décalerait toujours rien : elle empiéterait simplement sur la marge de l'enseigne. */ .bt-marchand{ --bulle-place:100px; position:relative; display:flex; flex-direction:column; align-items:center; min-width:230px; padding-top:var(--bulle-place); } .bt-bulle{ position:absolute; left:50%; top:calc(var(--bulle-place) - .6rem); transform:translate(-50%,-100%); transform-origin:50% 100%; width:280px; max-width:86vw; background:#fff4e0; color:#3a2418; border-radius:14px; padding:.7em 1em; font-size:.95rem; line-height:1.4; font-weight:600; box-shadow:0 6px 16px rgba(0,0,0,.4); } .bt-bulle::after{ content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-top-color:#fff4e0; border-bottom:0; } /* petit rebond quand Toad lâche une réplique ⚠ le translate du centrage vit DANS les keyframes : une animation de transform écrase la règle de base (même piège que les nuages des Jardins) */ .bt-bulle-pop{animation:btBullePop .32s ease;} @keyframes btBullePop{ 0%{transform:translate(-50%,-100%) scale(.86);} 55%{transform:translate(-50%,-100%) scale(1.05);} 100%{transform:translate(-50%,-100%) scale(1);} } .bt-toad{ width:132px; height:auto; image-rendering:pixelated; filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)); position:relative; z-index:2; margin-bottom:-14px; cursor:pointer; transition:transform .12s ease; } .bt-toad:hover{transform:translateY(-3px) scale(1.03);} .bt-toad:active{transform:translateY(1px) scale(.98);} .bt-comptoir{ width:240px; height:46px; border-radius:8px 8px 4px 4px; background:linear-gradient(#9a6a3a, #6e4526); border:3px solid #4a2c16; box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,244,224,.18); } .bt-comptoir::before{ content:""; display:block; height:8px; margin:6px 8px 0; border-radius:4px; background:rgba(74,44,22,.5); } /* la bourse */ .bt-bourse{ display:flex; flex-direction:column; align-items:center; gap:.15rem; background:linear-gradient(160deg, rgba(74,16,48,.85), rgba(40,10,28,.9)); border:2px solid #ffd23f; border-radius:16px; padding:1rem 1.6rem; box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,244,224,.08); } .bt-bourse-lbl{font-family:'Cinzel',serif; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:#e7c98a;} .bt-bourse-nb{display:flex; align-items:center; gap:.35em; font-family:'Luckiest Guy',cursive; font-size:2rem; color:#ffd23f; text-shadow:0 3px 0 rgba(0,0,0,.4);} .bt-bourse-nb img{width:1.1em; image-rendering:pixelated;} .bt-bourse-note{font-size:.78rem; color:#b9aed9;} /* les rayons : la grille d'articles */ .bt-rayons{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:1.1rem; } .bt-carte{ display:flex; flex-direction:column; text-align:center; background:linear-gradient(175deg, rgba(58,36,24,.9), rgba(38,22,14,.92)); border:2px solid #c99a1e; border-radius:16px; padding:1rem .9rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,244,224,.06); } .bt-vitrine{ height:130px; display:grid; place-items:center; margin-bottom:.6rem; background:radial-gradient(circle at 50% 40%, rgba(255,210,63,.16), transparent 68%); border-radius:12px; } .bt-vitrine img{ max-width:88%; max-height:118px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); } .bt-carte h3{ font-family:'Luckiest Guy',cursive; font-size:1.15rem; color:#fff4e0; margin:0 0 .3rem; text-shadow:0 2px 0 rgba(0,0,0,.4); } .bt-desc{font-size:.85rem; color:#d6c3ab; line-height:1.4; margin:0 0 .8rem; flex:1;} /* la mention des objets que Toad NE VEND PAS (ils se trouvent ailleurs, mais il les rachète) : une note discrète, jamais un bouton — cf. OBJETS.vendu */ .bt-ailleurs{ font-size:.74rem; font-style:italic; color:#c99a1e; line-height:1.35; margin:-.5rem 0 .7rem; border-left:2px solid rgba(201,154,30,.5); padding-left:.5rem; } .bt-bas{display:flex; flex-direction:column; align-items:center; gap:.5rem;} .bt-prix{ display:inline-flex; align-items:center; gap:.3em; font-family:'Luckiest Guy',cursive; font-size:1.25rem; color:#ffd23f; text-shadow:0 2px 0 rgba(0,0,0,.4); } .bt-prix img{width:1.05em; image-rendering:pixelated;} .bt-acheter{ font-family:'Luckiest Guy',cursive; font-size:1rem; letter-spacing:.03em; color:#3a2418; background:linear-gradient(#ffe27a, #ffd23f); border:3px solid #c99a1e; border-radius:11px; padding:.4em 1.3em; cursor:pointer; box-shadow:0 4px 0 #a8791a, inset 0 1px 0 rgba(255,255,255,.5); transition:transform .12s ease, box-shadow .12s ease; } .bt-acheter:hover, .bt-acheter:focus-visible{ transform:translateY(-2px); box-shadow:0 6px 0 #a8791a, inset 0 1px 0 rgba(255,255,255,.5); } .bt-acheter:active{transform:translateY(2px); box-shadow:0 2px 0 #a8791a;} .bt-possede{ font-family:'Cinzel',serif; font-weight:700; color:#7cd47c; font-size:.9rem; letter-spacing:.03em; } .bt-trop-cher{color:#b98f77; font-size:.82rem; font-style:italic;} /* le RACHAT (anti-blocage) : petit bouton discret sous « Dans ta besace ✓ » ; armé = il demande confirmation (2 clics contre les missclics) */ .bt-revendre{ font-family:'Nunito',sans-serif; font-weight:700; font-size:.78rem; color:#e6c46a; background:none; border:1px solid rgba(230,196,106,.45); border-radius:9px; padding:.22em .9em; cursor:pointer; letter-spacing:.02em; } .bt-revendre:hover, .bt-revendre:focus-visible{ color:#3a2418; background:#e6c46a; border-color:#e6c46a; } .bt-revendre.arme{ color:#ffe9b0; border-color:#e63946; background:rgba(230,57,70,.22); } .bt-carte.possede{opacity:.85; border-color:rgba(124,212,124,.5);} .bt-carte.possede .bt-vitrine img{filter:drop-shadow(0 0 10px rgba(124,212,124,.35));} .bt-carte.inabordable{opacity:.7;} .bt-carte.inabordable .bt-vitrine img{filter:grayscale(.5) brightness(.85);} @media (prefers-reduced-motion: reduce){ .bt-acheter, .bt-toad{transition:none;} .bt-bulle-pop{animation:none;} } @media (max-width:720px){ .bt-devanture{flex-direction:column; align-items:center;} .bt-rayons{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.8rem;} .bt-vitrine{height:100px;} .bt-vitrine img{max-height:92px;} } /* --- LA BESACE (dans la Salle des Trophées) : les objets amassés --- */ /* ⭐ DES LIGNES PLEINES, OU UNE DERNIÈRE LIGNE CENTRÉE (owner 2026-09-16 : « un agencement propre et symétrique, pour éviter d'avoir un vide sur la droite »). ⚠ plus de grille `auto-fill` : son nombre de colonnes venait de la LARGEUR, jamais du nombre d'objets — 21 cases dans 9 colonnes laissaient six trous à droite. Le nombre de colonnes est désormais DÉRIVÉ du compte de cases par temple.js (`besaceColonnes` : 21 → 7, 27 → 9) et posé en variable ; le flex CENTRE la dernière ligne quand aucun diviseur ne tombe juste. ⚠ trois plages : large · moyen (≤ 1000 px) · petit (≤ 560 px). */ .tr-besace{ --cols:9; --cols-moyen:6; --cols-petit:4; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.4rem; } .tr-besace > .tr-objet{ flex:0 0 calc((100% - (var(--cols) - 1) * .7rem) / var(--cols)); min-width:0; } @media (max-width:1000px){ .tr-besace > .tr-objet{flex-basis:calc((100% - (var(--cols-moyen) - 1) * .7rem) / var(--cols-moyen));} } @media (max-width:560px){ .tr-besace > .tr-objet{flex-basis:calc((100% - (var(--cols-petit) - 1) * .7rem) / var(--cols-petit));} } .tr-objet{ display:flex; flex-direction:column; align-items:center; gap:.35rem; background:rgba(61,53,96,.4); border:1px solid rgba(255,210,63,.18); border-radius:12px; padding:.7rem .4rem; min-height:104px; justify-content:center; } .tr-objet.eu{ background:rgba(255,210,63,.1); border-color:rgba(255,210,63,.5); box-shadow:inset 0 0 10px rgba(255,210,63,.12); } .tr-objet img{ width:56px; height:56px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); } .tr-objet span{font-size:.72rem; color:#e7c98a; text-align:center; line-height:1.15;} .tr-objet-q{ font-family:'Luckiest Guy',cursive; font-size:2rem; color:rgba(200,190,230,.4); } /* ============================================================ LA CHAÎNE BERCEUSE (2026-07-22) — le ♪ du diapason, les nénuphars-notes du duo de la grenouille, la boîte à musique du Chomp, ses ♪ flottantes, le vitrail qui chantonne la nuit, et la note de livret de l'Outro (fiche Niska). ============================================================ */ /* la note de livret sous l'Outro : le « souffle discret » */ .ns-lpiste-note{ display:block; font-style:italic; font-weight:400; font-size:.68rem; opacity:.5; letter-spacing:.02em; margin-top:.14em; } /* le petit MÉDAILLON doré près de la grenouille (diapason en poche) : disque cliquable généreux + ♪ dedans (le glyphe nu ratait tous les clics) */ .simon-note{ cursor:pointer; transform-box:fill-box; animation:simonNoteFlotte 2.6s ease-in-out infinite; } .simon-note .sn-halo{ fill:rgba(255,210,63,.16); stroke:#ffd23f; stroke-width:1.4; filter:drop-shadow(0 0 3px rgba(255,210,63,.6)); } .simon-note:hover .sn-halo, .simon-note:focus .sn-halo{fill:rgba(255,210,63,.32);} .simon-note:focus{outline:none;} .simon-note .sn-glyphe{ font-size:13px; font-weight:700; fill:#7a5a10; text-anchor:middle; paint-order:stroke; pointer-events:none; } @keyframes simonNoteFlotte{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} } /* les nénuphars-notes : main seulement quand c'est à toi de jouer. ⚠ pointer-events:auto OBLIGATOIRE — #calqueVie est en pointer-events:none (pour ne pas bloquer le décor) ; sans ça les nénuphars ignorent le clic */ .simon-pad{cursor:default; pointer-events:auto;} .simon-pads.a-toi .simon-pad{cursor:pointer;} .simon-pads.rate{animation:simonRate .5s ease;} @keyframes simonRate{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-2.5px);} 75%{transform:translateX(2.5px);} } /* la petite boîte à musique posée près du Chomp : lueur d'invite. ⚠ transform-box:fill-box — sans lui, la rotation CSS pivote autour du (0,0) du GRAND svg de la carte postale : la boîte partirait en orbite */ .boite-berceuse{ cursor:pointer; transform-box:fill-box; transform-origin:50% 90%; pointer-events:auto; /* ⚠ #calqueChomp est en pointer-events:none */ filter:drop-shadow(0 0 4px rgba(255,210,63,.65)); animation:boiteLueur 2.8s ease-in-out infinite; } .boite-berceuse.joue{animation:boiteJoue .9s ease-in-out infinite;} @keyframes boiteLueur{ 0%,100%{filter:drop-shadow(0 0 3px rgba(255,210,63,.4));} 50%{filter:drop-shadow(0 0 7px rgba(255,210,63,.85));} } @keyframes boiteJoue{ 0%,100%{transform:rotate(0deg);} 30%{transform:rotate(-2.2deg);} 70%{transform:rotate(2.2deg);} } /* les ♪ qui montent de la boîte vers le Chomp (retirées par timer) */ .berceuse-note-flotte{ font-size:9px; fill:#fff4e0; stroke:#171030; stroke-width:.5px; paint-order:stroke; pointer-events:none; animation:berceuseNoteMonte 2.5s ease-out forwards; } @keyframes berceuseNoteMonte{ 0%{opacity:0; transform:translate(0,0);} 18%{opacity:.9;} 100%{opacity:0; transform:translate(16px,-30px);} /* dérive vers le Chomp (à droite) */ } /* le vitrail chantonne la berceuse la nuit : sa lueur respire */ body.nuit #vitrail.vitrail-chante .vitrail-allume{ animation:vitrailChante 3.9s ease-in-out infinite; } @keyframes vitrailChante{ 0%,100%{opacity:.55;} 50%{opacity:1;} } @media (prefers-reduced-motion: reduce){ .simon-note, .simon-pads.rate, .boite-berceuse, .boite-berceuse.joue, .berceuse-note-flotte, body.nuit #vitrail.vitrail-chante .vitrail-allume{animation:none;} } /* ============================================================ PILULES v2 (owner 2026-07-22) — le POP du diapason (BENDO !), la révélation RARE façon BOTW (grosse → focus + halo à rayons tournants), le bouton « réécouter la berceuse », et la Besace cliquable (revoir les pilules). ============================================================ */ /* le diapason qui pop et rebondit sur la fiche de Niska */ #diapasonPop{ position:fixed; z-index:610; width:58px; height:auto; transform:translate(-50%,-100%); /* ancré par sa BASE (le bas touche le sol) */ image-rendering:pixelated; pointer-events:none; filter:drop-shadow(0 0 10px rgba(255,210,63,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); } #diapasonPop.recuperable{ pointer-events:auto; cursor:pointer; animation:diapasonBrille 1.6s ease-in-out infinite; } @keyframes diapasonBrille{ 0%,100%{filter:drop-shadow(0 0 8px rgba(255,210,63,.5)) drop-shadow(0 6px 10px rgba(0,0,0,.5));} 50%{filter:drop-shadow(0 0 18px rgba(255,210,63,.95)) drop-shadow(0 6px 10px rgba(0,0,0,.5));} } /* la révélation RARE « façon BOTW » : la carte commence GROSSE puis rapetisse en se focusant, au rythme de la fanfare (transform/filter seulement — jamais d'opacité, règle anti-gel) */ .objet-voile.objet-rare .objet-carte{ animation:objetRareFocus 3.4s cubic-bezier(.19,.8,.24,1) both; } @keyframes objetRareFocus{ 0%{transform:scale(1.55); filter:blur(5px) brightness(1.9);} 45%{filter:blur(1.6px) brightness(1.35);} 100%{transform:scale(1); filter:blur(0) brightness(1);} } /* le halo doré brillant : nappe radiale + rayons coniques qui tournent lentement derrière la pilule */ .objet-halo{ position:absolute; left:50%; top:50%; width:190%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; border-radius:50%; background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.16) 0deg 9deg, rgba(255,210,63,0) 9deg 24deg), radial-gradient(circle, rgba(255,210,63,.4) 0%, rgba(255,210,63,.12) 38%, rgba(255,210,63,0) 68%); animation:haloTourne 14s linear infinite; -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 72%); mask-image:radial-gradient(circle, #000 30%, transparent 72%); } @keyframes haloTourne{ to{transform:translate(-50%,-50%) rotate(360deg);} } /* le bouton « réécouter » de la boîte à musique */ .objet-rejouer{ display:inline-block; margin:.1rem 0 .9rem; font-family:'Nunito',sans-serif; font-weight:800; font-size:.92rem; color:#171030; background:linear-gradient(180deg,#ffd23f,#e8b62a); border:none; border-radius:999px; padding:.5em 1.2em; cursor:pointer; box-shadow:0 3px 0 #c99a1e, 0 6px 14px rgba(0,0,0,.35); } .objet-rejouer:hover{filter:brightness(1.08);} .objet-rejouer:active{transform:translateY(2px); box-shadow:0 1px 0 #c99a1e;} /* la Besace cliquable : les .tr-objet possédés sont devenus des