/* Sanctuaire Riftbound : « Faille Riftbound » (DA validée par Alexandre le 8 novembre 2026). La nef aux branches, aux couleurs de Riftbound : bleu marine profond, arches bleu pétrole, et au fond le tourbillon de la Faille au cœur orange. Fleurs, pétales et lucioles orange, filets dorés doubles qui se croisent aux coins (comme les affiches officielles). L'orange (variable --hextech, nom gardé) pour les chiffres, les courbes et les actions, l'orange clair (--petale) pour ce qui est « chaud ». Titres en Taviraj Black, en capitales, texte et chiffres en Spectral. Emblème Riftbound au-dessus du Hall (usage privé autorisé par Alexandre). */ :root { --nuit: #151d2c; --nuit-2: #19223a; --pierre: #1c2638; --pierre-2: #24324a; --verre: rgba(24, 33, 50, .38); /* Pas de grain sur les panneaux : il formait un voile blanc (Alexandre les veut transparents). */ --grain: none; --trait: rgba(201, 162, 74, .12); --trait-fort: rgba(201, 162, 74, .28); --or: #c9a24a; --or-vif: #e2c270; --creme: #ffffff; --texte: #eef2f6; --texte-2: #a9b9c9; --texte-3: #6f8296; --petale: #f6a04a; --petale-doux: rgba(246, 160, 74, .14); --hextech: #ef7d00; --hextech-clair: #f9a64e; --hextech-doux: rgba(239, 125, 0, .14); --lueur: 0 0 14px rgba(239, 125, 0, .4); --lueur-texte: 0 0 10px rgba(239, 125, 0, .45); --luciole: rgba(255, 160, 60, .7); --jade: #8fe0b0; --corail: #ff9a8a; --ambre: #f6b04a; --rayon: 18px; --feuille: 4px; /* coins presque droits, comme les cadres dorés des affiches */ --rayon-carte: 10px; --gouttiere: 16px; --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px); --onglets: 64px; --titre: "Taviraj", "Iowan Old Style", Georgia, serif; --corps: "Spectral", Georgia, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { background: var(--nuit); } body { margin: 0; min-height: 100dvh; overflow-x: hidden; background: transparent; color: var(--texte); /* le fond est sur html, pour laisser voir le ciel (z-index -1) */ font: 15px/1.5 var(--corps); letter-spacing: .005em; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--hextech); outline-offset: 2px; border-radius: 8px; } code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hextech-clair); } /* --- Ciel : la nef de la Faille (nef.svg, scripts/nef_svg.py), pétales et lucioles ------------ */ .ciel { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--nuit); } .nef-plan { position: absolute; inset: 0; will-change: transform; } .brume { position: absolute; inset: 0; background: url("nef.svg") 50% 0 / auto 100% no-repeat; } .lucioles b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe2b0; box-shadow: 0 0 10px 3px var(--luciole); opacity: .15; animation: flotte 7s ease-in-out infinite; } @keyframes flotte { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .15; } 50% { transform: translate3d(9px, -20px, 0); opacity: 1; } } .petales i { position: absolute; top: -20px; width: 10px; height: 8px; opacity: 0; background: linear-gradient(135deg, #ffd08a, #ef7d00); border-radius: 80% 0 80% 0; animation: chute linear infinite; } @keyframes chute { 0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; } 10% { opacity: .45; } 90% { opacity: .3; } 100% { transform: translate3d(-70px, 105vh, 0) rotate(560deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .petales { display: none; } .lucioles b { animation: none; opacity: .5; } } /* --- En-tête ------------------------------------------------------------------------------ */ .entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; padding: calc(var(--haut) + 10px) var(--gouttiere) 12px; background: rgba(21, 29, 44, .78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 125, 0, .55) 30%, rgba(246, 160, 74, .45) 70%, transparent); box-shadow: 0 0 8px rgba(239, 125, 0, .35); } .entete-titre { flex: 1; min-width: 0; } .entete-sur { display: block; font: 600 10.5px/1 var(--corps); letter-spacing: .24em; text-transform: uppercase; color: var(--hextech); text-shadow: var(--lueur-texte); } .entete h1 { margin: 5px 0 0; font: 700 clamp(20px, 6vw, 25px)/1.1 var(--titre); color: var(--creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entete-bouton, .entete-retour { width: 38px; height: 38px; display: grid; place-items: center; flex: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: var(--grain), var(--verre); color: var(--or); } .entete-bouton svg, .entete-retour svg { width: 19px; height: 19px; } main { padding: 18px var(--gouttiere) calc(var(--onglets) + var(--bas) + 28px); max-width: 760px; margin: 0 auto; outline: none; } /* --- Onglets du bas ---------------------------------------------------------------------- */ .onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(var(--bas) + 6px); background: rgba(21, 29, 44, .84); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, .06); } .onglets a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; padding: 6px 0 2px; text-decoration: none; color: var(--texte-3); font: 600 10.5px/1 var(--corps); letter-spacing: .02em; } .onglets svg { width: 23px; height: 23px; } .onglets a[aria-current="page"] { color: var(--creme); } .onglets a[aria-current="page"] svg { color: var(--hextech); filter: drop-shadow(0 0 6px rgba(239, 125, 0, .6)); } .onglets a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; width: 22px; height: 2px; border-radius: 2px; background: var(--hextech); box-shadow: var(--lueur); } /* --- Typo commune ------------------------------------------------------------------------ */ .lore { margin: 0; font: italic 500 16.5px/1.4 var(--titre); color: var(--texte-2); } .section-titre { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; font: 600 11px/1.2 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--petale); } .section-titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(246, 160, 74, .3), transparent); } .section-titre .lien-section { order: 2; font: 600 12.5px var(--corps); letter-spacing: 0; text-transform: none; color: var(--hextech); text-decoration: none; } .discret { color: var(--texte-2); font-size: 13px; } .tres-discret { color: var(--texte-3); font-size: 12px; } .chiffre { font-variant-numeric: tabular-nums; } .vide { padding: 28px 18px; text-align: center; color: var(--texte-2); border: 1px dashed rgba(246, 160, 74, .22); border-radius: var(--feuille); background: rgba(24, 33, 50, .4); } .vide .lore { margin-bottom: 6px; color: var(--creme); } /* --- Hall --------------------------------------------------------------------------------- */ .fronton { text-align: center; padding: 8px 0 2px; } .fronton-sceau { width: 66px; height: 66px; margin: 0 auto 10px; color: var(--or); filter: drop-shadow(0 0 12px var(--luciole)); } .fronton h2 { margin: 0; font: 700 42px/1.05 var(--titre); color: var(--creme); text-shadow: 0 1px 3px rgba(5, 10, 20, .7), 0 2px 22px rgba(5, 10, 20, .7); } .fronton .lore { color: var(--creme); text-shadow: 0 1px 3px rgba(5, 10, 20, .9), 0 0 14px rgba(5, 10, 20, .8); } .fronton .lore { margin-top: 6px; } .fronton .maj { margin-top: 10px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; } .stat { position: relative; overflow: hidden; padding: 14px 8px 12px; text-align: center; text-decoration: none; background: var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--feuille); } .stat::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: var(--hextech); box-shadow: var(--lueur); opacity: .7; } .stat b { display: block; font: 700 21px/1.15 var(--corps); letter-spacing: -.01em; color: var(--creme); font-variant-numeric: tabular-nums; } .stat b small { font-size: 13px; color: var(--texte-3); font-weight: 600; } .stat span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.25; color: var(--texte-2); } .relique { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; margin-top: 14px; padding: 14px; background: radial-gradient(120% 120% at 0% 50%, var(--petale-doux), transparent 60%), var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--feuille); cursor: pointer; } .relique h3 { margin: 4px 0; font: 700 21px/1.15 var(--titre); color: var(--creme); } .etiquette { display: inline-block; font: 700 10px/1 var(--corps); letter-spacing: .18em; text-transform: uppercase; color: var(--hextech); text-shadow: var(--lueur-texte); } .signaux { display: grid; gap: 8px; } .signal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; background: var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--feuille); } .signal-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--hextech-doux); color: var(--hextech); border: 1px solid rgba(239, 125, 0, .28); } .signal-icone svg { width: 18px; height: 18px; } .signal.chaud .signal-icone { background: var(--petale-doux); color: var(--petale); border-color: rgba(246, 160, 74, .35); } .signal b { display: block; font-weight: 600; font-size: 14.5px; } .signal span { font-size: 12.5px; color: var(--texte-2); } .signal .fleche { margin-left: auto; width: 18px; height: 18px; flex: none; color: var(--texte-3); } .defile { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere) 8px; } .defile::-webkit-scrollbar { display: none; } .defile > * { scroll-snap-align: start; } /* --- Cartes exposées ---------------------------------------------------------------------- */ .galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } @media (min-width: 560px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .piece { min-width: 0; cursor: pointer; text-align: left; outline-offset: 4px; } .vitrine { --halo: rgba(246, 160, 74, .3); position: relative; overflow: hidden; aspect-ratio: 744 / 1039; border-radius: var(--rayon-carte); background: linear-gradient(160deg, #24324a, #141c2b); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 24px rgba(5, 10, 20, .6), 0 0 26px -8px var(--halo); } .vitrine.paysage { aspect-ratio: 1; } .vitrine img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; } .vitrine.scelle img { object-fit: contain; padding: 7%; background: radial-gradient(circle at 50% 40%, #22304a, #141c2b); } .vitrine img.chargee { opacity: 1; } .vitrine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .13) 0%, transparent 26%, transparent 72%, rgba(239, 125, 0, .10) 100%); } .vitrine .marque { position: absolute; top: 5px; left: 5px; z-index: 2; padding: 3px 6px; border-radius: 6px; font: 700 9.5px/1 var(--corps); letter-spacing: .06em; color: var(--creme); background: rgba(21, 29, 44, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vitrine .quantite { position: absolute; top: 5px; right: 5px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; font: 700 11px/1 var(--corps); background: var(--hextech); color: #1a1206; box-shadow: var(--lueur); } .souhait { position: absolute; right: 5px; bottom: 5px; z-index: 3; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--texte); background: rgba(21, 29, 44, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .souhait svg { width: 15px; height: 15px; } .souhait[aria-pressed="true"] { color: var(--petale); border-color: rgba(246, 160, 74, .55); box-shadow: 0 0 12px rgba(246, 160, 74, .45); } .souhait.attente { animation: pulse 1s ease-in-out infinite; } .absente .vitrine { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 18px rgba(5, 10, 20, .55); } .absente .vitrine img { filter: grayscale(.8) brightness(.45) contrast(.95); } .absente .vitrine::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(21, 29, 44, .7)); } /* Relief tactile (relief.js) : inclinaison, reflet doré qui suit le doigt, holo des rares. */ .vitrine .relief { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; } .vitrine .relief i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; } .vitrine .reflet { opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(circle at 50% 50%, rgba(255, 236, 190, .5) 0%, rgba(201, 162, 74, .28) 9%, rgba(201, 162, 74, .06) 20%, transparent 30%); } .vitrine .holo { opacity: .35; mix-blend-mode: color-dodge; background: repeating-linear-gradient(115deg, transparent 0%, rgba(239, 125, 0, .10) 4%, rgba(201, 162, 74, .14) 7%, rgba(64, 150, 165, .12) 10%, rgba(244, 233, 210, .10) 13%, transparent 17%); } .absente .vitrine .holo { display: none; } .vitrine.en-relief { will-change: transform; } .vitrine.en-relief .relief i { will-change: transform, opacity; } .socle .vitrine { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } @media (prefers-reduced-motion: reduce) { .vitrine .relief { display: none; } .socle .vitrine { touch-action: auto; } } .piece-nom { margin: 8px 0 0; font-weight: 600; font-size: 12.5px; line-height: 1.25; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .absente .piece-nom { color: var(--texte-2); } .cours { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-top: 3px; } .cours b { font-size: 12.5px; font-weight: 700; color: var(--creme); font-variant-numeric: tabular-nums; } .cours span { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .mini-courbe { display: block; width: 100%; height: 22px; margin-top: 3px; overflow: visible; } .mini-courbe.vide-courbe { opacity: .5; } /* --- Outils : puces, segments, champs ---------------------------------------------------- */ .outils { display: grid; gap: 10px; margin-bottom: 16px; } .puces { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere); } .puces::-webkit-scrollbar { display: none; } .puce { flex: none; min-height: 36px; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .08); background: var(--grain), var(--verre); color: var(--texte-2); font: 600 13px/1 var(--corps); } .puce[aria-pressed="true"] { color: var(--creme); background: var(--hextech-doux); border-color: rgba(239, 125, 0, .55); box-shadow: 0 0 12px -2px rgba(239, 125, 0, .5); } .puce small { margin-left: 4px; opacity: .7; font-weight: 500; } .segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: rgba(23, 20, 39, .8); border: 1px solid rgba(255, 255, 255, .07); border-radius: 15px; } .segments button { min-height: 40px; padding: 8px 6px; border: 0; border-radius: 11px; background: none; cursor: pointer; color: var(--texte-2); font: 600 13.5px/1.15 var(--corps); } .segments button small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--texte-3); } .segments button[aria-pressed="true"] { color: var(--creme); background: linear-gradient(180deg, var(--pierre-2), var(--pierre)); box-shadow: inset 0 0 0 1px rgba(239, 125, 0, .35), 0 0 14px -4px rgba(239, 125, 0, .55); } .segments button[aria-pressed="true"] small { color: var(--hextech-clair); } .champ-recherche { position: relative; } .champ-recherche svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--texte-3); } input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: var(--nuit-2); color: var(--texte); font: 16px/1.3 var(--corps); } .champ-recherche input { padding-left: 40px; } input::placeholder { color: var(--texte-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--hextech); box-shadow: 0 0 0 3px rgba(239, 125, 0, .16), var(--lueur); } label.champ { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--texte-2); } .ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .case { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texte); } .case input { width: 20px; height: 20px; accent-color: var(--hextech); } .tri { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tri select { width: auto; padding: 8px 12px; font-size: 14px; } /* --- Bandeau chiffré ---------------------------------------------------------------------- */ .bandeau { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; background: var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--feuille); } .bandeau div { padding: 12px 8px; text-align: center; } .bandeau div + div { border-left: 1px solid rgba(255, 255, 255, .06); } .bandeau b { display: block; font: 700 17px/1.2 var(--corps); color: var(--creme); font-variant-numeric: tabular-nums; } .bandeau span { font-size: 11.5px; color: var(--texte-2); } .positif { color: var(--jade) !important; } .negatif { color: var(--corail) !important; } /* --- Panthéon : ailes ---------------------------------------------------------------------- */ .aile { position: relative; overflow: hidden; margin-bottom: 16px; padding: 16px; background: radial-gradient(120% 90% at 100% 0%, rgba(239, 125, 0, .12), transparent 55%), radial-gradient(90% 90% at 0% 100%, var(--petale-doux), transparent 60%), var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--feuille); } .aile-tete { display: flex; align-items: center; gap: 14px; } .anneau { position: relative; flex: none; width: 66px; height: 66px; } .anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); } .anneau circle { stroke-width: 5; } .anneau .fond { stroke: rgba(255, 255, 255, .08); } .anneau .plein { stroke: url(#degrade-anneau); filter: drop-shadow(0 0 4px rgba(239, 125, 0, .6)); transition: stroke-dashoffset .8s ease; } .anneau b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--corps); color: var(--creme); } .aile h3 { margin: 0; font: 700 23px/1.15 var(--titre); color: var(--creme); } .aile .discret b { color: var(--texte); font-weight: 600; } .aile-complete { border-color: rgba(239, 125, 0, .45); box-shadow: 0 0 30px -12px var(--hextech); } /* --- Listes ------------------------------------------------------------------------------- */ .liste { display: grid; gap: 10px; } .article { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px; cursor: pointer; background: var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--feuille); } .article.chaud { border-color: rgba(246, 160, 74, .45); background: radial-gradient(120% 120% at 0% 0%, var(--petale-doux), transparent 60%), var(--grain), var(--verre); } .article .vitrine { border-radius: 6px; } .article h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; } .article .sous { margin-top: 1px; font-size: 12px; color: var(--texte-2); } .article-chiffres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .article-chiffres .grand { font: 700 18px/1 var(--corps); letter-spacing: -.01em; color: var(--creme); font-variant-numeric: tabular-nums; } .variation { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .article-bas { grid-column: 1 / -1; display: grid; gap: 8px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.35 var(--corps); letter-spacing: .05em; text-transform: uppercase; color: var(--or-vif); background: rgba(201, 162, 74, .10); border: 1px solid rgba(201, 162, 74, .2); } .badge.ok { color: var(--jade); background: rgba(111, 220, 174, .1); border-color: rgba(111, 220, 174, .35); } .badge.chaud { color: var(--petale); background: var(--petale-doux); border-color: rgba(246, 160, 74, .4); } .badge.hex { color: var(--hextech-clair); background: var(--hextech-doux); border-color: rgba(239, 125, 0, .35); } .badge.gris { color: var(--texte-2); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); } .jauge { position: relative; height: 26px; margin-top: 2px; } .jauge-rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); } .jauge-zone { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--jade), var(--hextech)); } .jauge-point { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--creme); box-shadow: 0 0 0 3px rgba(21, 29, 44, .9), var(--lueur); } .jauge-legende { display: flex; justify-content: space-between; font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; } .offre { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; text-decoration: none; font-size: 13px; background: var(--hextech-doux); border: 1px solid rgba(239, 125, 0, .25); } .offre svg { width: 18px; height: 18px; flex: none; color: var(--hextech); } .offre b { color: var(--hextech-clair); font-variant-numeric: tabular-nums; text-shadow: var(--lueur-texte); } .offre.sous-cible { background: rgba(111, 220, 174, .08); border-color: rgba(111, 220, 174, .4); } .offre.sous-cible b, .offre.sous-cible svg { color: var(--jade); text-shadow: none; } .liens { display: flex; flex-wrap: wrap; gap: 6px; } .lien { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px; border-radius: 12px; text-decoration: none; border: 1px solid rgba(255, 255, 255, .08); background: rgba(23, 20, 39, .8); color: var(--texte); font: 600 13px/1 var(--corps); } .lien svg { width: 14px; height: 14px; color: var(--texte-3); } .avis { padding: 12px 14px; border-radius: var(--feuille); font-size: 13px; line-height: 1.5; color: var(--texte-2); background: rgba(24, 33, 50, .55); border: 1px solid rgba(255, 255, 255, .06); } .avis b { color: var(--texte); } .grille-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .grille-chiffres div { padding: 8px; border-radius: 12px; text-align: center; background: rgba(21, 29, 44, .6); } .grille-chiffres span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); } .grille-chiffres b { display: block; margin-top: 3px; font-size: 14px; font-variant-numeric: tabular-nums; } /* --- Chroniques ---------------------------------------------------------------------------- */ .chronique { position: relative; overflow: hidden; padding: 16px 16px 16px 18px; background: var(--grain), var(--verre); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--feuille); } .chronique::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--cat, var(--or)); box-shadow: 0 0 10px var(--cat, var(--or)); } .chronique[data-cat="promo"] { --cat: var(--petale); } .chronique[data-cat="scelle"] { --cat: var(--hextech); } .chronique[data-cat="set"] { --cat: var(--or); } .chronique-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .chronique h3 { margin: 10px 0 6px; font: 700 21px/1.2 var(--titre); color: var(--creme); } .chronique p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texte-2); } .chronique-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .compte { padding: 5px 9px; border-radius: 9px; font: 600 12px/1 var(--corps); color: var(--hextech-clair); background: var(--hextech-doux); font-variant-numeric: tabular-nums; } .chronique-produit { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; margin-top: 12px; cursor: pointer; } /* --- Feuille ------------------------------------------------------------------------------- */ .voile { position: fixed; inset: 0; z-index: 40; opacity: 0; transition: opacity .25s ease; background: rgba(8, 6, 16, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .voile.ouvert { opacity: 1; } .feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; max-width: 760px; max-height: calc(100dvh - var(--haut) - 18px); margin: 0 auto; background: linear-gradient(180deg, #1d2a40, #131b2a 45%); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgba(5, 10, 20, .7), inset 0 1px 0 rgba(239, 125, 0, .35); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); } .feuille.ouverte { transform: translateY(0); } .feuille-poignee { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .2); } .feuille-fermer { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; color: var(--texte-2); background: rgba(21, 29, 44, .7); border: 1px solid rgba(255, 255, 255, .1); } .feuille-fermer svg { width: 16px; height: 16px; } .feuille-contenu { overflow-y: auto; overscroll-behavior: contain; padding: 14px var(--gouttiere) calc(var(--bas) + 24px); } .feuille h2 { margin: 0 0 4px; padding-right: 40px; font: 700 28px/1.15 var(--titre); color: var(--creme); } .socle { position: relative; display: grid; place-items: center; padding: 8px 0 28px; } .socle::before { content: ""; position: absolute; left: 50%; bottom: 8px; width: 78%; height: 30px; transform: translateX(-50%); filter: blur(8px); background: radial-gradient(50% 50% at 50% 50%, var(--halo-socle, rgba(239, 125, 0, .4)), transparent 70%); } .socle .vitrine { width: min(62vw, 280px); cursor: zoom-in; } .cartel { margin-top: 4px; padding: 14px; border-radius: var(--feuille); background: rgba(24, 33, 50, .6); border: 1px solid rgba(255, 255, 255, .06); } .cartel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; } .cartel dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); } .cartel dd { margin: 2px 0 0; font-size: 13.5px; color: var(--texte); } .bloc { margin-top: 20px; } .bloc h4 { margin: 0 0 10px; font: 600 11px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--petale); } .prix-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .prix-principal b { font: 700 32px/1 var(--corps); letter-spacing: -.02em; color: var(--creme); font-variant-numeric: tabular-nums; } .periodes { display: flex; gap: 4px; margin: 14px 0 6px; padding: 3px; border-radius: 12px; background: rgba(21, 29, 44, .7); border: 1px solid rgba(255, 255, 255, .06); width: max-content; } .periodes button { min-width: 48px; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--texte-3); font: 600 12.5px/1 var(--corps); } .periodes button[aria-pressed="true"] { color: var(--creme); background: var(--hextech-doux); box-shadow: inset 0 0 0 1px rgba(239, 125, 0, .45); } .periodes button:disabled { opacity: .35; cursor: default; } .graphique { position: relative; } .courbe { display: block; width: 100%; height: 170px; touch-action: pan-y; } .courbe text { fill: var(--texte-3); stroke: none; font: 500 11px var(--corps); font-variant-numeric: tabular-nums; } .infobulle { position: absolute; top: 0; z-index: 2; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 5px 9px; border-radius: 9px; font: 600 12px/1.3 var(--corps); text-align: center; color: var(--creme); background: rgba(21, 29, 44, .92); border: 1px solid rgba(239, 125, 0, .5); box-shadow: var(--lueur); } .infobulle small { display: block; font-weight: 500; color: var(--texte-2); } .resume-periode { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--texte-3); } .resume-periode b { color: var(--texte); font-variant-numeric: tabular-nums; } .tableau-prix { display: grid; gap: 1px; margin-top: 14px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06); } .tableau-prix div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 13.5px; background: rgba(21, 29, 44, .6); } .tableau-prix span { color: var(--texte-2); } .tableau-prix b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .tableau-prix .info b, .tableau-prix .info span { color: var(--texte-3); } .actions { display: grid; gap: 8px; margin-top: 18px; } .actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bouton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 16px; cursor: pointer; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .1); background: var(--pierre-2); color: var(--creme); font: 600 15px/1.2 var(--corps); text-decoration: none; } .bouton svg { width: 18px; height: 18px; } .bouton.principal { color: #1a1206; border-color: rgba(249, 166, 78, .7); background: linear-gradient(180deg, #f9a64e, var(--hextech)); box-shadow: 0 8px 24px -8px rgba(239, 125, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .4); } .bouton.hex { color: var(--petale); border-color: rgba(246, 160, 74, .45); background: var(--petale-doux); } .bouton.danger { color: #ffb3ad; border-color: rgba(255, 138, 128, .4); background: rgba(255, 138, 128, .08); } .bouton:disabled { opacity: .55; cursor: progress; } .ajout-flottant { position: fixed; right: var(--gouttiere); bottom: calc(var(--onglets) + var(--bas) + 14px); z-index: 22; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; cursor: pointer; color: #1a1206; border: 1px solid rgba(249, 166, 78, .8); background: linear-gradient(180deg, #f9a64e, var(--hextech)); box-shadow: 0 10px 26px rgba(5, 10, 20, .6), 0 0 22px -2px rgba(239, 125, 0, .7); } .ajout-flottant svg { width: 24px; height: 24px; stroke-width: 2.2; } .resultats { display: grid; gap: 6px; margin-top: 12px; } .resultat { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px 10px; cursor: pointer; text-align: left; border-radius: 14px; background: rgba(21, 29, 44, .6); border: 1px solid transparent; } .resultat:active { border-color: rgba(239, 125, 0, .4); } .resultat .vitrine { border-radius: 4px; } .resultat b { display: block; font-size: 14px; font-weight: 600; } .resultat span { font-size: 12px; color: var(--texte-2); } .resultat .chiffre { font-size: 13px; color: var(--creme); } .loupe { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(var(--haut) + 20px) 18px calc(var(--bas) + 20px); background: rgba(8, 6, 16, .95); } .loupe img { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 0 60px rgba(239, 125, 0, .3); } .toast { position: fixed; left: 50%; bottom: calc(var(--onglets) + var(--bas) + 18px); z-index: 70; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 14px; font-size: 14px; color: var(--creme); pointer-events: none; opacity: 0; transform: translate(-50%, 20px); transition: all .25s ease; background: #24324a; border: 1px solid rgba(239, 125, 0, .45); box-shadow: 0 10px 30px rgba(5, 10, 20, .6), var(--lueur); } .toast.visible { opacity: 1; transform: translate(-50%, 0); } .toast.erreur { border-color: rgba(255, 138, 128, .6); box-shadow: 0 10px 30px rgba(5, 10, 20, .6); } .etapes { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--texte-2); } .etapes b { color: var(--texte); } .etat-connexion { display: flex; align-items: center; gap: 8px; font-size: 13px; } .point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); } .point.ok { background: var(--jade); box-shadow: 0 0 8px var(--jade); } @keyframes pulse { 50% { opacity: .45; } } .apparition { animation: apparait .4s ease both; } @keyframes apparait { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .apparition, .feuille, .voile, .vitrine img { animation: none; transition: none; } } /* --- Entrée cérémonielle (entree.js) : portes coulissantes, puis le hall et ses 5 alcôves ------ Animations en transform et opacity seulement. Durée des portes : 2,5 s. */ .entree { display: none; } html.entree-active, html.entree-active body { overflow: hidden; } html.entree-active .entree { position: fixed; inset: 0; z-index: 100; display: block; overflow: hidden; background: linear-gradient(180deg, rgba(21, 29, 44, .15), rgba(21, 29, 44, .55)), url("nef.svg") 50% 0 / auto 100% no-repeat, var(--nuit); } .entree.sortie { animation: entree-sortie .36s ease both; } @keyframes entree-sortie { to { opacity: 0; transform: scale(1.03); } } .entree-passer { position: absolute; z-index: 5; top: calc(var(--haut) + 12px); right: var(--gouttiere); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait-fort); background: rgba(21, 29, 44, .55); color: var(--texte-2); font: 600 12px/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Les portes : bois prune sculpté de branches en fleurs ; un médaillon de fleur coupé en deux par la fente. */ .porte { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .07) 9px 10px, transparent 10px 23px, rgba(201, 162, 74, .03) 23px 24px), radial-gradient(80% 50% at 100% 50%, rgba(239, 125, 0, .10), transparent 70%), linear-gradient(180deg, #24364f, #1a2740 55%, #121a29); will-change: transform; } .porte-gauche { left: 0; box-shadow: inset -2px 0 0 rgba(201, 162, 74, .4), inset -14px 0 28px rgba(0, 0, 0, .35); } .porte-droite { right: 0; box-shadow: inset 2px 0 0 rgba(201, 162, 74, .4), inset 14px 0 28px rgba(0, 0, 0, .35); } .porte-droite .porte-motif { transform: scaleX(-1); } .porte-motif { width: 100%; height: 100%; } .porte-motif .cadre { stroke: var(--or); stroke-opacity: .45; stroke-width: 1; } .porte-motif .branche { stroke: #2f86b4; stroke-width: 2.4; } .porte-motif .branche.fine { stroke-width: 1.2; stroke-opacity: .8; } .porte-motif .fleur { fill: #f6a04a; fill-opacity: .7; stroke: none; } .porte-motif .lueur { stroke: var(--hextech); stroke-opacity: .7; stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(239, 125, 0, .7)); } .porte-motif .lueur.plein { fill: #ffd08a; stroke: none; } .entree-fente { position: absolute; z-index: 4; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--hextech-clair) 30%, #fff 50%, var(--hextech-clair) 70%, transparent); box-shadow: 0 0 18px 4px rgba(239, 125, 0, .55); opacity: 0; transform: scaleY(0); } .entree.joue .entree-fente { animation: fente 2.1s cubic-bezier(.3, 0, .2, 1) both; } .entree.joue .porte-gauche { animation: porte-g 2.15s cubic-bezier(.7, 0, .2, 1) .35s both; } .entree.joue .porte-droite { animation: porte-d 2.15s cubic-bezier(.7, 0, .2, 1) .35s both; } @keyframes fente { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 55% { opacity: 1; transform: scaleY(1) scaleX(3); } 100% { opacity: 0; transform: scaleY(1) scaleX(12); } } @keyframes porte-g { to { transform: translateX(-101%); } } @keyframes porte-d { to { transform: translateX(101%); } } /* Le hall derrière les portes. */ .entree-salle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--haut) + 56px) var(--gouttiere) calc(var(--bas) + 40px); } .entree.joue .entree-salle { animation: salle 1.3s ease 1.5s both; } @keyframes salle { from { opacity: 0; transform: scale(.94); } } .entree-fronton { text-align: center; margin-bottom: 30px; } .entree-sur { margin: 0 0 6px; font: 700 10px/1 var(--corps); letter-spacing: .3em; text-transform: uppercase; color: var(--hextech); text-shadow: var(--lueur-texte); } .entree-fronton h2 { margin: 0; font: 700 38px/1.05 var(--titre); color: var(--creme); } .entree-fronton .lore { margin-top: 6px; } /* Les alcôves : le Hall au fond, les quatre salles en arc devant. */ .alcoves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; width: 100%; max-width: 420px; } .alcove { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--texte); } .alcove-hall { grid-column: 1 / -1; justify-self: center; width: 38%; } .alcove-collection, .alcove-chroniques { transform: translateY(18px); } .entree.joue .alcove { animation: alcove .7s cubic-bezier(.2, .7, .2, 1) calc(2.15s + var(--i) * .1s) both; } .entree.joue .alcove-collection, .entree.joue .alcove-chroniques { animation-name: alcove-bas; } @keyframes alcove { from { opacity: 0; transform: translateY(14px); } } @keyframes alcove-bas { from { opacity: 0; transform: translateY(32px); } to { transform: translateY(18px); } } .alcove-arche { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4.4; border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; overflow: hidden; /* ogive, comme les arches de la nef */ background: linear-gradient(180deg, #1f2c44, #121a28); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .38), inset 0 0 0 4px rgba(21, 29, 44, .9), inset 0 0 0 5px rgba(201, 162, 74, .14), 0 10px 24px rgba(0, 0, 0, .35); } .alcove-hall .alcove-arche { aspect-ratio: 3 / 4; } .alcove-arche::after { /* une branche en fleurs dans la clé de l'arche */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 34% 14%, rgba(246, 160, 74, .75) 0 3px, transparent 3.5px), radial-gradient(circle at 42% 9%, rgba(246, 160, 74, .6) 0 2.5px, transparent 3px), radial-gradient(circle at 63% 12%, rgba(246, 160, 74, .7) 0 2.6px, transparent 3.2px), radial-gradient(circle at 70% 18%, rgba(246, 160, 74, .5) 0 2px, transparent 2.5px); } .alcove-lueur { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 100%, rgba(239, 125, 0, .8), transparent 75%), radial-gradient(45% 35% at 50% 45%, rgba(239, 125, 0, .4), transparent 80%); opacity: calc(.12 + var(--eclat, 0) * .88); transition: opacity 1.4s ease .3s; } .alcove.vive .alcove-lueur { animation: lueur-vive 3.2s ease-in-out 3.4s infinite; } @keyframes lueur-vive { 50% { opacity: .7; } } .alcove-icone { position: relative; width: 44%; color: var(--or-vif); filter: drop-shadow(0 0 6px rgba(239, 125, 0, .6)); } .alcove-icone svg { width: 100%; height: auto; display: block; } .alcove-nom { margin-top: 8px; font: 700 15.5px/1.1 var(--titre); color: var(--creme); } .alcove-hall .alcove-nom { font-size: 16px; } .alcove-mesure { font: 500 10.5px/1.2 var(--corps); color: var(--hextech-clair); white-space: nowrap; font-variant-numeric: tabular-nums; } .alcove:active .alcove-arche { transform: scale(.96); } .alcove:focus-visible { outline: none; } .alcove:focus-visible .alcove-arche { box-shadow: inset 0 0 0 2px var(--hextech), 0 0 0 2px var(--hextech); } .entree-dalle { /* reflet de lumière sur le dallage */ position: absolute; left: 10%; right: 10%; bottom: 0; height: 22%; pointer-events: none; background: radial-gradient(50% 60% at 50% 100%, rgba(239, 125, 0, .12), transparent 70%); } /* Retour au menu depuis l'en-tête : le hall seul, sans les portes, en fondu court. */ .entree.menu .porte, .entree.menu .entree-fente { display: none; } .entree.menu.joue .entree-salle { animation: salle .35s ease both; } .entree.menu.joue .alcove { animation-duration: .4s; animation-delay: calc(var(--i) * .04s); } .entree.menu .alcove-lueur { transition: none; } .entree.menu .entree-passer { font-size: 0; padding: 9px; } .entree.menu .entree-passer::after { content: "Fermer"; font-size: 12px; } @media (prefers-reduced-motion: reduce) { .entree, .entree * { animation: none !important; transition: none !important; } } /* --- Ornements Riftbound : typo des affiches et filets dorés ------------------------------------- Titres en Taviraj Black, capitales blanches légèrement biseautées ; libellés en Spectral, capitales dorées. Filets doubles qui se croisent aux coins, pointes en losange, séparateurs à décrochement. */ .entete h1, .fronton h2, .relique h3, .aile h3, .chronique h3, .feuille h2, .entree-fronton h2, .alcove-nom, .section-titre { font-family: var(--titre); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--creme); } .entete h1 { font-size: clamp(15px, 4.4vw, 19px); line-height: 1.2; } .entete-sur, .etiquette, .bloc h4, .stat span, .badge { font-family: var(--corps); text-transform: uppercase; letter-spacing: .1em; } .entete-sur { color: var(--or-vif); text-shadow: none; font-weight: 600; } .etiquette, .bloc h4 { color: var(--or-vif); } .entete::after { height: 9px; bottom: -4px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22375%22%20height%3D%229%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%23c9a24a%22%3E%3Cpath%20d%3D%22M14%204.5H361M24%201.5H351%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M8%204.5L12%201L16%204.5L12%208Z%20M359%204.5L363%201L367%204.5L363%208Z%20M187.5%20.5L191.5%204.5L187.5%208.5L183.5%204.5Z%22%20fill%3D%22%23c9a24a%22%20stroke%3D%22none%22/%3E%3C/svg%3E") center / 100% 9px no-repeat; box-shadow: none; } .fronton-sceau { display: block; width: 48px; height: 48px; margin: 0 auto 12px; filter: drop-shadow(0 0 14px rgba(239, 125, 0, .55)) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); } .fronton h2 { font-size: 40px; line-height: 1.05; text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 1.5px 0 #0f1726, 0 2px 14px rgba(5, 10, 20, .9); } .fronton .lore { display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; font: 600 11px/1.3 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--or-vif); text-shadow: 0 0 3px #0f1726, 0 1px 8px #0f1726; } .fronton .lore::before, .fronton .lore::after { content: ""; flex: none; width: 34px; height: 9px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2234%22%20height%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23c9a24a%22%3E%3Cpath%20d%3D%22M5%204.5H34%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0%204.5L4%201L8%204.5L4%208Z%22%20fill%3D%22%23c9a24a%22%20stroke%3D%22none%22/%3E%3C/svg%3E") no-repeat; } .fronton .lore::after { transform: scaleX(-1); } .lore { font-family: var(--corps); } .relique h3 { font-size: 17px; line-height: 1.15; } .aile h3 { font-size: 18px; } .chronique h3 { font-size: 17px; line-height: 1.25; } .feuille h2 { font-size: 22px; line-height: 1.15; } .entree-fronton h2 { font-size: 32px; text-shadow: 0 -1px 0 rgba(255, 255, 255, .3), 0 1.5px 0 #0f1726; } .alcove-nom { font-size: 12px; } .alcove-hall .alcove-nom { font-size: 13px; } .section-titre { font-size: 16px; letter-spacing: .03em; } .section-titre::after { height: 14px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%2214%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%23c9a24a%22%3E%3Cpath%20d%3D%22M0%207H150L156%203H186L192%207H196%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M196%207L199%204.5V9.5Z%22%20fill%3D%22%23c9a24a%22/%3E%3C/svg%3E") 0 50% / 100% 14px no-repeat; } .stat b, .prix-principal b, .relique .chiffre { font-family: var(--corps) !important; font-weight: 600; letter-spacing: 0; } .stat::before { display: none; } .stat, .relique, .signal, .cartel, .aile, .article { position: relative; border-color: transparent; border-radius: 0; } .stat::after, .relique::after, .signal::after, .cartel::after, .aile::after, .article::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23c9a24a%22%3E%3Cpath%20d%3D%22M0%204.5H60M4.5%200V60%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M9%209.5H60M9.5%209V60%22%20stroke-width%3D%22.8%22%20stroke-opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M14%201.5L16%204.5L14%207.5L12%204.5Z%20M1.5%2014L4.5%2012L7.5%2014L4.5%2016Z%22%20fill%3D%22%23c9a24a%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M4.5%204.5L9.5%209.5%22%20stroke-width%3D%22.8%22/%3E%3C/svg%3E") 20 / 12px stretch; } .bouton.principal { color: #1a1206; border-color: rgba(249, 166, 78, .7); background: linear-gradient(180deg, #f9a64e, #ef7d00); } /* --- Session 3 : « Faille vivante » (matières et ambiance, choisie par Alexandre le 8 novembre 2026) --- Verre transparent (voile marine à .38, sans flou ni grain) sur les panneaux, lueur du tourbillon qui respire (~10 s), parallaxe douce de la nef au défilement (ambiance.js), éclat unique sur les filets dorés quand un panneau apparaît. Transform et opacity seulement ; tout est coupé si « Réduire les animations ». */ .faille { position: absolute; left: 50%; top: 34.2%; width: 46vh; height: 46vh; margin: -23vh 0 0 -23vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 176, 74, .42), rgba(239, 125, 0, .2) 38%, rgba(239, 125, 0, .06) 68%, transparent); opacity: .5; will-change: transform, opacity; animation: respire 10s ease-in-out infinite; } @keyframes respire { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.06); } } .lucioles { position: absolute; inset: 0; will-change: transform; } /* Pas de flou derrière les panneaux : Alexandre les veut transparents. */ .stat::before, .relique::before, .signal::before, .cartel::before, .aile::before, .article::before { content: ""; display: block; position: absolute; inset: 0; left: 0; right: 0; top: 0; height: auto; pointer-events: none; background: none; box-shadow: none; border: 12px solid transparent; opacity: 0; border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23ffe6a8%22%3E%3Cpath%20d%3D%22M0%204.5H60M4.5%200V60%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M9%209.5H60M9.5%209V60%22%20stroke-width%3D%22.9%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%201.5L16%204.5L14%207.5L12%204.5Z%20M1.5%2014L4.5%2012L7.5%2014L4.5%2016Z%22%20fill%3D%22%23ffe6a8%22%20stroke%3D%22none%22/%3E%3C/svg%3E") 20 / 12px stretch; filter: drop-shadow(0 0 3px rgba(226, 194, 112, .7)); animation: eclat 1.9s .3s ease-out both; } @keyframes eclat { 0% { opacity: 0; } 30% { opacity: .85; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .faille { animation: none; opacity: .5; transform: none; } .nef-plan, .lucioles { transform: none !important; } .stat::before, .relique::before, .signal::before, .cartel::before, .aile::before, .article::before { animation: none; display: none; } } /* --- Session 4 : salle des trophées (choisie par Alexandre le 9 novembre 2026) -------------------------- Plaques en verre (voile marine), médailles en losange à double filet doré. Gagnée : or et orange ; à venir : contour pâle et jauge. La première fois, la médaille se pose puis le titre se grave lettre à lettre derrière un burin doré. Transform et opacity seulement ; rien si « Réduire les animations ». */ .segments:has([data-salle="trophees"]) button { padding-left: 2px; padding-right: 2px; font-size: 12.5px; } .plaques { display: grid; gap: 8px; margin-bottom: 6px; } .plaque { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 12px 14px; background: var(--verre); border: 1px solid rgba(201, 162, 74, .16); border-radius: var(--feuille); } .plaque.gagnee { border-color: rgba(201, 162, 74, .42); background: radial-gradient(90% 140% at 0% 50%, var(--petale-doux), transparent 55%), var(--verre); } .medaille { position: relative; display: block; width: 52px; height: 52px; } .medaille-svg { display: block; width: 100%; height: 100%; overflow: visible; } .m-fond { fill: rgba(21, 29, 44, .7); } .m-filet { fill: none; stroke: var(--texte-3); stroke-width: 1.4; stroke-opacity: .55; } .m-filet2 { fill: none; stroke: var(--texte-3); stroke-width: .8; stroke-opacity: .35; } .m-glyphe { fill: none; stroke: var(--texte-3); stroke-opacity: .6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gagnee .m-fond { fill: #1c2638; } .gagnee .m-filet { stroke: var(--or); stroke-opacity: 1; } .gagnee .m-filet2 { stroke: var(--or-vif); stroke-opacity: .6; } .gagnee .m-glyphe { stroke: var(--hextech-clair); stroke-opacity: 1; } .gagnee .medaille-svg { filter: drop-shadow(0 0 8px rgba(239, 125, 0, .35)); } .plaque-titre { position: relative; display: inline-block; margin: 0; font: 900 14px/1.2 var(--titre); letter-spacing: .03em; text-transform: uppercase; color: var(--texte-2); } .gagnee .plaque-titre { color: var(--creme); } .plaque-titre span { display: inline-block; } .plaque-trait { display: block; height: 1px; margin: 5px 0 4px; width: 64px; background: linear-gradient(90deg, var(--or), transparent); opacity: .35; transform-origin: 0 50%; } .gagnee .plaque-trait { opacity: .9; } .plaque p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--texte-2); } .plaque .plaque-date { margin-top: 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--or-vif); } .plaque .plaque-date.avenir { color: var(--texte-3); font-variant-numeric: tabular-nums; } .jauge { height: 3px; margin-top: 7px; background: rgba(255, 255, 255, .07); overflow: hidden; } .jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--hextech)); opacity: .75; transform-origin: 0 50%; } .signal-trophees .signal-icone { background: none; border: 0; } .signal-trophees .signal-icone svg { width: 30px; height: 30px; } .signal-trophees .m-filet { stroke: var(--or); stroke-opacity: 1; } .signal-trophees .m-filet2 { stroke: var(--or-vif); stroke-opacity: .5; } .signal-trophees .m-glyphe { stroke: var(--hextech-clair); stroke-opacity: 1; stroke-width: 2.6; } /* Première fois : la médaille descend, se pose (léger rebond), une onde dorée s'étend ; puis le burin grave le titre. */ .nouvelle .medaille-svg { animation: pose .9s var(--d, 0s) cubic-bezier(.3, .7, .3, 1) both; } .nouvelle .medaille::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--or-vif); transform: rotate(45deg) scale(.9); opacity: 0; animation: onde .9s calc(var(--d, 0s) + .55s) ease-out both; } .nouvelle .plaque-titre span { animation: grave .35s calc(var(--d, 0s) + .8s + var(--l) * 45ms) ease-out both; } .burin { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: burin calc(var(--lettres) * 45ms + .2s) calc(var(--d, 0s) + .8s) linear both; } .burin::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #ffe6a8; box-shadow: 0 0 8px 2px rgba(255, 200, 110, .8); } .nouvelle .plaque-trait { animation: trait .7s calc(var(--d, 0s) + .8s + var(--lettres) * 45ms) ease-out both; } .nouvelle .plaque-texte p { animation: grave .5s calc(var(--d, 0s) + 1s + var(--lettres) * 45ms) ease-out both; } @keyframes pose { 0% { opacity: 0; transform: translateY(-34px) scale(1.18); } 55% { opacity: 1; transform: translateY(2px) scale(.96); } 75% { transform: translateY(-1px) scale(1.01); } 100% { opacity: 1; transform: none; } } @keyframes onde { 0% { opacity: .7; transform: rotate(45deg) scale(.95); } 100% { opacity: 0; transform: rotate(45deg) scale(1.55); } } @keyframes grave { 0% { opacity: 0; transform: translateY(2px); } 100% { opacity: 1; transform: none; } } @keyframes burin { 0% { opacity: 1; transform: translateX(-100%); } 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes trait { 0% { transform: scaleX(0); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .nouvelle .medaille-svg, .nouvelle .medaille::after, .nouvelle .plaque-titre span, .burin, .nouvelle .plaque-trait, .nouvelle .plaque-texte p { animation: none; } .burin, .nouvelle .medaille::after { display: none; } } /* --- Mode Visite (visite.js, phase 6) : rotonde de baies en 3D CSS, vue subjective -------------- Seulement si html.visite (bascule dans les réglages) ; le mode rapide n'est pas touché. html.visite-scene : le Hall (ou la chapelle de l'Autel) est montré en 3D à la place de #vue. Matières (retour d'Alexandre : plus moderne, plus palpable) : pierre marine marbrée, or métallique en dégradé, sol poli qui reflète la lumière des baies, poussière en suspension. La texture ne concerne que l'architecture 3D : les panneaux de l'interface restent sans grain. */ :root { --pierre-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='270'%3E%3Cfilter id='d' x='-2%25' y='-2%25' width='104%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='8' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .62 0 0 0 0 .36 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .02 .08 .16 .2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='10' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.07 .03 0 0 0 .02 .06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 .13 -.02'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18' numOctaves='2' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.6 .4 .12 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .005' numOctaves='3' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .02 0 0 0 0 .03 0 0 0 -2.2 1.05'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Crect x='0' y='0' width='55.7' height='60' fill='%23fff' fill-opacity='0.055'/%3E%3Crect x='3.0' y='3' width='49.7' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='6' width='43.7' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='55.7' y='0' width='126.8' height='60' fill='%23000' fill-opacity='0.093'/%3E%3Crect x='58.7' y='3' width='120.8' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='61.7' y='6' width='114.8' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='182.5' y='0' width='53.5' height='60' fill='%23000' fill-opacity='0.052'/%3E%3Crect x='185.5' y='3' width='47.5' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='188.5' y='6' width='41.5' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='0' y='60' width='24.4' height='30' fill='%23000' fill-opacity='0.059'/%3E%3Crect x='3.0' y='63' width='18.4' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='66' width='12.4' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='24.4' y='60' width='80.7' height='30' fill='%23fff' fill-opacity='0.042'/%3E%3Crect x='27.4' y='63' width='74.7' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='30.4' y='66' width='68.7' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='105.1' y='60' width='78.5' height='30' fill='%23fff' fill-opacity='0.038'/%3E%3Crect x='108.1' y='63' width='72.5' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='111.1' y='66' width='66.5' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='183.6' y='60' width='52.4' height='30' fill='%23000' fill-opacity='0.076'/%3E%3Crect x='186.6' y='63' width='46.4' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='189.6' y='66' width='40.4' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='0' y='90' width='123.5' height='60' fill='%23000' fill-opacity='0.052'/%3E%3Crect x='3.0' y='93' width='117.5' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='96' width='111.5' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='123.5' y='90' width='112.5' height='60' fill='%23000' fill-opacity='0.032'/%3E%3Crect x='126.5' y='93' width='106.5' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='129.5' y='96' width='100.5' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='0' y='150' width='46.8' height='30' fill='%23000' fill-opacity='0.060'/%3E%3Crect x='3.0' y='153' width='40.8' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='156' width='34.8' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='46.8' y='150' width='88.0' height='30' fill='%23000' fill-opacity='0.034'/%3E%3Crect x='49.8' y='153' width='82.0' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='52.8' y='156' width='76.0' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='134.8' y='150' width='78.2' height='30' fill='%23000' fill-opacity='0.050'/%3E%3Crect x='137.8' y='153' width='72.2' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='140.8' y='156' width='66.2' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='213.0' y='150' width='23.0' height='30' fill='%23fff' fill-opacity='0.035'/%3E%3Crect x='216.0' y='153' width='17.0' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='219.0' y='156' width='11.0' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='0' y='180' width='92.5' height='60' fill='%23000' fill-opacity='0.099'/%3E%3Crect x='3.0' y='183' width='86.5' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='186' width='80.5' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='92.5' y='180' width='112.0' height='60' fill='%23fff' fill-opacity='0.042'/%3E%3Crect x='95.5' y='183' width='106.0' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='98.5' y='186' width='100.0' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='204.5' y='180' width='31.5' height='60' fill='%23000' fill-opacity='0.031'/%3E%3Crect x='207.5' y='183' width='25.5' height='54' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='210.5' y='186' width='19.5' height='48' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='0' y='240' width='12.2' height='30' fill='%23000' fill-opacity='0.087'/%3E%3Crect x='3.0' y='243' width='6.2' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='6.0' y='246' width='0.2' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='12.2' y='240' width='74.2' height='30' fill='%23fff' fill-opacity='0.059'/%3E%3Crect x='15.2' y='243' width='68.2' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='18.2' y='246' width='62.2' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='86.4' y='240' width='86.6' height='30' fill='%23fff' fill-opacity='0.056'/%3E%3Crect x='89.4' y='243' width='80.6' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='92.4' y='246' width='74.6' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3Crect x='173.0' y='240' width='63.0' height='30' fill='%23fff' fill-opacity='0.021'/%3E%3Crect x='176.0' y='243' width='57.0' height='24' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='5'/%3E%3Crect x='179.0' y='246' width='51.0' height='18' fill='none' stroke='%23000' stroke-opacity='.1' stroke-width='.8'/%3E%3C/g%3E%3Crect width='236' height='270' filter='url(%23p)'/%3E%3Crect width='236' height='270' filter='url(%23m)'/%3E%3Crect width='236' height='270' filter='url(%23c)'/%3E%3Crect width='236' height='270' filter='url(%23g)'/%3E%3Crect width='236' height='270' filter='url(%23e)'/%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M2.5 1.6H18.4' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M24.2 1.6H49.6' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M54.7 1.0L44.4 1.0L51.2 4.4L54.7 7.8Z' fill='%23000' fill-opacity='0.37'/%3E%3Cpath d='M44.4 1.0L51.2 4.4' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M45.0 1.2Q46.2 2.6 47.5 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M48.1 1.2Q50.3 2.8 52.6 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M32.8 1.2Q35.2 3.0 37.6 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M61.2 1.6H74.6' stroke='%23fff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpath d='M89.9 1.6H111.6' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M126.9 1.6H150.8' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M165.3 1.6H179.5' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M186.6 1.6H212.1' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M223.2 1.6H233.0' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M200.9 58.8Q202.5 57.4 204.1 58.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M5.9 61.6H18.7' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M6.8 61.2Q9.3 62.7 11.8 61.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M27.8 61.6H47.6' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M56.1 61.6H80.2' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M84.4 61.6H96.5' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M104.1 61.0L94.4 61.0L99.8 65.0L104.1 68.5Z' fill='%23000' fill-opacity='0.26'/%3E%3Cpath d='M94.4 61.0L99.8 65.0' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M52.3 88.8Q53.5 87.3 54.7 88.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M111.0 61.6H133.0' stroke='%23fff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpath d='M144.0 61.6H175.2' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M182.6 61.0L176.2 61.0L180.3 63.0L182.6 68.0Z' fill='%23000' fill-opacity='0.29'/%3E%3Cpath d='M176.2 61.0L180.3 63.0' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M106.1 61.0L115.8 61.0L109.3 62.8L106.1 70.5Z' fill='%23000' fill-opacity='0.37'/%3E%3Cpath d='M115.8 61.0L109.3 62.8' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M142.5 61.2Q145.3 63.1 148.2 61.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M164.9 61.2Q166.0 62.3 167.1 61.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M116.7 61.2Q117.7 63.2 118.7 61.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M190.6 61.6H213.2' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M226.0 61.6H233.0' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M235.0 61.0L227.3 61.0L230.9 62.5L235.0 70.2Z' fill='%23000' fill-opacity='0.35'/%3E%3Cpath d='M227.3 61.0L230.9 62.5' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M235.0 89.0L224.6 89.0L230.0 85.0L235.0 79.8Z' fill='%23000' fill-opacity='0.29'/%3E%3Cpath d='M224.6 89.0L230.0 85.0' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M227.1 61.2Q230.0 63.6 232.9 61.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M207.6 88.8Q210.5 86.5 213.4 88.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M199.8 88.8Q201.1 87.2 202.5 88.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M3.7 91.6H28.5' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M40.4 91.6H72.8' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M86.5 91.6H111.0' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M1.0 91.0L6.9 91.0L5.3 93.2L1.0 95.5Z' fill='%23000' fill-opacity='0.32'/%3E%3Cpath d='M6.9 91.0L5.3 93.2' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M95.8 91.0L98.0 95.2L96.4 100.2L95.8 106.7L99.0 111.2L100.8 117.3L103.0 121.3L105.3 123.6' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='.8'/%3E%3Cpath d='M60.1 91.2Q61.4 92.3 62.6 91.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M22.5 91.2Q24.4 92.3 26.2 91.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M126.6 91.6H143.0' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M152.0 91.6H178.0' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M188.4 91.6H201.4' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M217.2 91.6H228.8' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M229.0 91.2Q230.5 92.3 231.9 91.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M207.0 91.2Q209.5 93.7 212.0 91.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M2.9 151.6H34.4' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M6.3 178.8Q8.0 177.5 9.7 178.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M53.5 151.6H67.8' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M79.1 151.6H96.2' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M105.7 151.6H118.4' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M122.4 151.6H131.8' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M59.9 151.2Q62.3 152.9 64.7 151.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M141.7 151.6H162.2' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M174.7 151.6H193.7' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M205.9 151.6H210.0' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M195.1 178.8Q196.6 176.8 198.2 178.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M172.3 178.8Q174.3 176.5 176.4 178.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M177.3 151.2Q178.6 153.0 179.8 151.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M215.2 151.6H233.0' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M214.0 151.0L222.4 151.0L218.2 152.7L214.0 156.0Z' fill='%23000' fill-opacity='0.28'/%3E%3Cpath d='M222.4 151.0L218.2 152.7' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M225.9 178.8Q228.0 176.9 230.1 178.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M6.3 181.6H25.1' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M29.5 181.6H47.2' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M61.2 181.6H86.7' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M91.5 239.0L84.9 239.0L89.4 237.1L91.5 230.6Z' fill='%23000' fill-opacity='0.37'/%3E%3Cpath d='M84.9 239.0L89.4 237.1' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M8.0 238.8Q10.0 237.0 12.0 238.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M43.0 181.2Q44.3 182.6 45.5 181.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M96.2 181.6H122.7' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M129.5 181.6H149.2' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M160.7 181.6H172.9' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M181.6 181.6H194.8' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M203.5 239.0L196.2 239.0L199.8 235.7L203.5 232.3Z' fill='%23000' fill-opacity='0.28'/%3E%3Cpath d='M196.2 239.0L199.8 235.7' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M203.5 181.0L198.5 181.0L201.3 184.5L203.5 190.8Z' fill='%23000' fill-opacity='0.38'/%3E%3Cpath d='M198.5 181.0L201.3 184.5' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M122.0 238.8Q123.3 237.6 124.7 238.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M99.8 238.8Q101.2 237.3 102.7 238.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M194.7 238.8Q197.2 236.9 199.6 238.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M211.4 181.6H229.3' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M4.5 241.6H9.2' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M11.2 269.0L2.6 269.0L7.0 267.0L11.2 263.2Z' fill='%23000' fill-opacity='0.25'/%3E%3Cpath d='M2.6 269.0L7.0 267.0' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M4.6 241.2Q5.7 243.5 6.8 241.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M4.1 241.2Q5.7 242.2 7.2 241.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M4.4 268.8Q6.7 267.5 9.1 268.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M20.1 241.6H52.6' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M57.6 241.6H83.4' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M13.2 269.0L23.5 269.0L16.9 266.3L13.2 259.2Z' fill='%23000' fill-opacity='0.33'/%3E%3Cpath d='M23.5 269.0L16.9 266.3' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M54.9 268.8Q56.8 267.4 58.8 268.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M67.0 268.8Q68.3 267.4 69.7 268.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M92.0 241.6H106.8' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M117.1 241.6H133.5' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M149.4 241.6H162.8' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M117.4 241.2Q118.6 243.3 119.9 241.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M160.4 268.8Q162.2 267.8 164.1 268.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M114.6 268.8Q117.3 266.3 120.0 268.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M179.2 241.6H205.7' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M217.9 241.6H233.0' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M180.8 241.2Q182.3 243.7 183.8 241.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M178.8 241.2Q181.2 243.7 183.6 241.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M0 0H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 1.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M55.7 0V60' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M56.7 0V60' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M182.5 0V60' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M183.5 0V60' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 60H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 61.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M24.4 60V90' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M25.4 60V90' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M105.1 60V90' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M106.1 60V90' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M183.6 60V90' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M184.6 60V90' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 90H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 91.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M123.5 90V150' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M124.5 90V150' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 150H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 151.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M46.8 150V180' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M47.8 150V180' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M134.8 150V180' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M135.8 150V180' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M213.0 150V180' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M214.0 150V180' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 180H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 181.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M92.5 180V240' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M93.5 180V240' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M204.5 180V240' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M205.5 180V240' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 240H236' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 241.1H236' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M12.2 240V270' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M13.2 240V270' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M86.4 240V270' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M87.4 240V270' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M173.0 240V270' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M174.0 240V270' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E"); --sol-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='288'%3E%3Cfilter id='d' x='-2%25' y='-2%25' width='104%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='13' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='4' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .62 0 0 0 0 .36 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .02 .08 .16 .2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.07 .03 0 0 0 .02 .06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='16' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 .13 -.02'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .02 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.6 .4 .12 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Crect x='0' y='0' width='67.1' height='96' fill='%23000' fill-opacity='0.089'/%3E%3Crect x='67.1' y='0' width='155.1' height='96' fill='%23fff' fill-opacity='0.062'/%3E%3Crect x='222.2' y='0' width='17.8' height='96' fill='%23000' fill-opacity='0.048'/%3E%3Crect x='0' y='96' width='153.6' height='96' fill='%23fff' fill-opacity='0.063'/%3E%3Crect x='153.6' y='96' width='86.4' height='96' fill='%23fff' fill-opacity='0.042'/%3E%3Crect x='0' y='192' width='112.9' height='96' fill='%23fff' fill-opacity='0.054'/%3E%3Crect x='112.9' y='192' width='127.1' height='96' fill='%23000' fill-opacity='0.083'/%3E%3C/g%3E%3Crect width='240' height='288' filter='url(%23p)'/%3E%3Crect width='240' height='288' filter='url(%23m)'/%3E%3Crect width='240' height='288' filter='url(%23g)'/%3E%3Crect width='240' height='288' filter='url(%23e)'/%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M3.1 1.6H18.6' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M24.6 1.6H52.2' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M72.8 1.6H83.1' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M88.0 1.6H118.9' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M132.4 1.6H162.2' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M177.6 1.6H206.6' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M221.2 95.0L212.5 95.0L217.2 91.9L221.2 84.8Z' fill='%23000' fill-opacity='0.31'/%3E%3Cpath d='M212.5 95.0L217.2 91.9' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M169.9 1.2Q172.4 2.4 174.8 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M169.0 1.2Q170.3 2.5 171.7 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M227.0 1.6H237.0' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M239.0 1.0L231.0 1.0L234.8 2.8L239.0 11.2Z' fill='%23000' fill-opacity='0.32'/%3E%3Cpath d='M231.0 1.0L234.8 2.8' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M227.4 94.8Q230.2 93.7 233.1 94.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M225.6 94.8Q228.3 92.8 231.0 94.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M225.7 1.2Q228.4 3.6 231.2 1.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M4.2 97.6H31.4' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M47.1 97.6H71.6' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M77.3 97.6H102.1' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M112.8 97.6H131.4' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M138.9 97.6H150.6' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M12.8 190.8Q14.9 188.9 17.0 190.8Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M157.7 97.6H169.9' stroke='%23fff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpath d='M185.9 97.6H198.8' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M205.3 97.6H229.6' stroke='%23fff' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Cpath d='M154.6 97.0L158.6 97.0L158.2 100.9L154.6 103.3Z' fill='%23000' fill-opacity='0.34'/%3E%3Cpath d='M158.6 97.0L158.2 100.9' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M179.3 97.2Q181.3 99.7 183.3 97.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M7.1 193.6H23.3' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M30.9 193.6H46.8' stroke='%23fff' stroke-opacity='0.08' stroke-width='1.1'/%3E%3Cpath d='M52.4 193.6H70.9' stroke='%23fff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpath d='M79.0 193.6H91.1' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M101.9 193.6H109.9' stroke='%23fff' stroke-opacity='0.11' stroke-width='1.1'/%3E%3Cpath d='M111.9 287.0L105.6 287.0L108.5 285.2L111.9 281.0Z' fill='%23000' fill-opacity='0.40'/%3E%3Cpath d='M105.6 287.0L108.5 285.2' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3Cpath d='M86.5 193.0L85.7 197.2L83.1 200.3L82.7 204.8L86.1 211.3L86.4 214.5L88.5 218.0L91.3 222.3L88.6 227.5L86.9 230.5L84.4 237.0L83.5 241.9L85.6 242.8' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='.8'/%3E%3Cpath d='M7.2 193.2Q9.8 194.6 12.5 193.2Z' fill='%23000' fill-opacity='.32'/%3E%3Cpath d='M116.1 193.6H135.5' stroke='%23fff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpath d='M145.6 193.6H156.9' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M172.1 193.6H200.4' stroke='%23fff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3Cpath d='M208.5 193.6H222.1' stroke='%23fff' stroke-opacity='0.10' stroke-width='1.1'/%3E%3Cpath d='M228.5 193.6H237.0' stroke='%23fff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpath d='M199.6 193.0L201.8 200.0L202.6 204.7L204.1 211.0L206.0 215.2L204.6 218.6L204.4 225.6L206.4 229.7L202.9 234.5L201.3 237.6L204.3 241.9L206.8 245.9L206.2 252.3L208.0 259.3L206.3 264.2L209.2 269.1L207.0 274.2L206.8 278.7L207.4 279.4' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='.8'/%3E%3Cpath d='M0 0H240' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 1.1H240' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M67.1 0V96' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M68.1 0V96' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M222.2 0V96' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M223.2 0V96' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 96H240' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 97.1H240' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M153.6 96V192' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M154.6 96V192' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M0 192H240' stroke='%23000' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M0 193.1H240' stroke='%23fff' stroke-opacity='.08' stroke-width='.7'/%3E%3Cpath d='M112.9 192V288' stroke='%23000' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M113.9 192V288' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E"); --or-metal: linear-gradient(180deg, #f6e3a8, #c9a24a 30%, #7a5a26 55%, #e2c270 78%, #8a6a2c); /* Piqueté du ciseau sur l'autel et dans les lettres gravées : grains clairs et sombres. */ --grain-pierre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .88 0 0 0 0 .78 1.7 0 0 0 -1'/%3E%3C/filter%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .02 0 0 0 0 .05 -1.8 0 0 0 .75'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E"); } .visite-3d, .visite-retour { display: none; } html.visite .onglets { display: none; } html.visite main { padding-bottom: calc(var(--bas) + 96px); } html.visite-scene, html.visite-scene body { overflow: hidden; } html.visite-scene #vue { visibility: hidden; } html.visite-scene .visite-3d { display: block; position: fixed; inset: 0; z-index: 15; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse 120% 60% at 50% 100%, #070b13 30%, transparent 70%); } .visite-oeil { position: absolute; inset: 0; perspective: var(--p); perspective-origin: 50% 47%; } .visite-camera { position: absolute; left: 50%; top: 47%; width: 0; height: 0; transform-style: preserve-3d; } .monde { position: absolute; left: 0; top: 0; transform-style: preserve-3d; } /* display (et non visibility) : poser() rend visibles les baies une à une, ce qui percerait un parent masqué. */ .visite-3d:not([data-monde="hall"]) .monde-hall, .visite-3d:not([data-monde="autel"]) .monde-autel, .visite-3d:not([data-monde="collection"]) .monde-collection { display: none; } /* Une baie : repère local 236 × 460, le bas (y = 460) posé au sol, à R px de l'œil. */ .baie { position: absolute; left: -118px; top: -260px; width: 236px; height: 460px; transform: rotateY(var(--a)) translateZ(calc(-1 * var(--r))); transform-style: preserve-3d; } .baie > * { position: absolute; opacity: var(--o, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .baie-mur { inset: 0; -webkit-mask: var(--masque-baie) center / 100% 100% no-repeat; mask: var(--masque-baie) center / 100% 100% no-repeat; } .baie-mur, .chap-mur { background: /* Corniche : deux filets dorés, frise de méandres grecs gravée, filet de base. */ linear-gradient(180deg, transparent 0 13px, rgba(226, 194, 112, .55) 13px 14px, transparent 14px 18px, rgba(201, 162, 74, .28) 18px 19px, transparent 19px 37px, rgba(201, 162, 74, .32) 37px 38px, transparent 38px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 12.5H19V1.5H5V9H13V5.5H9M19 12.5H24' fill='none' stroke='%23d8b45e' stroke-opacity='.62' stroke-width='1.2' stroke-linecap='square'/%3E%3C/svg%3E") 0 21px / 24px 14px repeat-x, linear-gradient(180deg, transparent 0 19px, rgba(0, 0, 0, .28) 19px 37px, transparent 37px), /* Pilastres cannelés aux angles, sous la frise. */ repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 1px, rgba(255, 255, 255, .07) 1px 2px, transparent 2px 5px) left 3px top 40px / 15px calc(100% - 40px) no-repeat, repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 1px, rgba(255, 255, 255, .07) 1px 2px, transparent 2px 5px) right 3px top 40px / 15px calc(100% - 40px) no-repeat, linear-gradient(90deg, rgba(0, 0, 0, .55) 0 2px, rgba(226, 194, 112, .32) 2px 3px, transparent 3px calc(100% - 3px), rgba(226, 194, 112, .32) calc(100% - 3px) calc(100% - 2px), rgba(0, 0, 0, .55) calc(100% - 2px)), linear-gradient(180deg, rgba(3, 6, 12, .55), transparent 20%, transparent 84%, rgba(3, 6, 12, .5)), var(--pierre-texture), /* Marbre pâle, bleui par la nuit du Sanctuaire. */ linear-gradient(180deg, #252f3d, #334050 55%, #273241); } /* Lumière de la baie sur le mur : discrète, plus forte pour la baie qu'on regarde. */ .baie-mur::after { content: ""; position: absolute; inset: 0; opacity: .35; transition: opacity .6s ease; background: radial-gradient(ellipse 58% 40% at 50% 74%, rgba(255, 150, 50, .32), transparent 72%); } .face .baie-mur::after, .baie.chaud.face .baie-mur::after { opacity: 1; } .baie.chaud .baie-mur::after { opacity: .7; } /* Le couloir derrière l'arche : 320 px de profondeur (murs, voûte, sol), éclairé depuis le fond. */ .baie-couloir { top: 90px; width: 320px; height: 370px; background: linear-gradient(90deg, rgba(3, 6, 12, .45), rgba(3, 6, 12, .78) 45%, rgba(3, 6, 12, .5) 85%, rgba(255, 160, 80, .14)), linear-gradient(180deg, rgba(3, 6, 12, .5), transparent 30%, transparent 85%, rgba(3, 6, 12, .5)), var(--pierre-texture), linear-gradient(180deg, #1c2531, #283441); } .baie-couloir.gauche { left: -130px; transform: translateZ(-160px) rotateY(90deg); } .baie-couloir.droit { left: 46px; transform: translateZ(-160px) rotateY(-90deg); background: linear-gradient(270deg, rgba(3, 6, 12, .45), rgba(3, 6, 12, .78) 45%, rgba(3, 6, 12, .5) 85%, rgba(255, 160, 80, .14)), linear-gradient(180deg, rgba(3, 6, 12, .5), transparent 30%, transparent 85%, rgba(3, 6, 12, .5)), var(--pierre-texture), linear-gradient(180deg, #1c2531, #283441); } .baie-voute { left: 30px; top: -70px; width: 176px; height: 320px; transform: translateZ(-160px) rotateX(-90deg); background: linear-gradient(180deg, rgba(3, 6, 12, .85), rgba(3, 6, 12, .6) 70%, rgba(255, 160, 80, .1)), var(--pierre-texture), #18202b; } .baie-seuil { left: 30px; top: 300px; width: 176px; height: 320px; transform: translateZ(-160px) rotateX(90deg); background: linear-gradient(0deg, rgba(226, 194, 112, .6) 0 1.5px, transparent 1.5px), linear-gradient(180deg, rgba(255, 160, 80, .2), rgba(3, 6, 12, .55) 40%, rgba(3, 6, 12, .35)), var(--sol-texture), #131c27; } /* Le fond du couloir : l'aperçu de la salle, sous un voile de brume. */ .baie-fond { left: 30px; top: 90px; width: 176px; height: 370px; transform: translateZ(-320px); overflow: hidden; background: radial-gradient(ellipse 70% 45% at 50% 45%, rgba(255, 170, 90, .16), transparent 70%), linear-gradient(180deg, #0b1622, #183246 60%, #10202e); } .baie-fond::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease; background: linear-gradient(180deg, rgba(14, 30, 46, .6), rgba(14, 30, 46, .22) 45%, rgba(14, 30, 46, .45)); } .face .baie-fond::after { opacity: .6; } .baie-rayon { position: absolute; z-index: 1; left: 50%; top: 0; width: 110px; height: 100%; margin-left: -55px; opacity: .4; transition: opacity .6s ease; background: linear-gradient(180deg, rgba(255, 220, 170, .26), rgba(255, 220, 170, .08) 60%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); } .face .baie-rayon { opacity: 1; } .baie-brume { left: 30px; top: 90px; width: 176px; height: 370px; transform: translateZ(-200px); pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 55%, transparent 40%, rgba(12, 26, 40, .45) 100%), linear-gradient(180deg, transparent 55%, rgba(20, 40, 58, .35)); } /* L'emblème Riftbound en lueur, suspendu dans la pointe de l'ogive à l'entrée du couloir, pour laisser voir la salle au fond (exception validée par Alexandre). */ .baie-coeur { left: 58px; top: 100px; width: 120px; height: 120px; transform: translateZ(-40px); pointer-events: none; } .baie-coeur::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .5; transition: opacity .6s ease; background: radial-gradient(circle, rgba(255, 170, 80, .34), rgba(239, 125, 0, .1) 38%, transparent 66%); } .baie-coeur::after { content: ""; position: absolute; inset: 31px; opacity: .55; transition: opacity .6s ease; background: url("icons/riftbound-degrade.svg") center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(255, 170, 80, .75)) drop-shadow(0 0 12px rgba(239, 125, 0, .4)); } .face .baie-coeur::after { opacity: 1; } .face .baie-coeur::before { opacity: 1; animation: baie-souffle 7s ease-in-out infinite; } @keyframes baie-souffle { 50% { opacity: .55; } } /* Aperçus des salles : silhouettes et vraies illustrations, en tout petit au bout du couloir. */ .apercu { position: absolute; inset: 0; } .apercu > * { position: absolute; display: block; } .apercu img { display: block; width: 100%; height: 100%; object-fit: cover; } .ap-cadre, .ap-niche { box-shadow: 0 0 0 1.5px #b8893a, 0 6px 12px rgba(0, 0, 0, .55); background: #0b131d; overflow: hidden; } .ap-galerie { left: 14px; right: 14px; top: 118px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; } .ap-galerie .ap-cadre { position: relative; aspect-ratio: 5 / 7; } .ap-galerie::before { content: ""; position: absolute; left: -14px; right: -14px; top: -40px; height: 60px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 220, 170, .3), transparent); } .ap-socle { left: 52px; width: 72px; top: 300px; height: 70px; background: linear-gradient(180deg, rgba(200, 225, 240, .2), rgba(200, 225, 240, .05) 40%, #0e1824 41%, #0a121b); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .6); } .ap-frise { left: 6px; right: 6px; top: 110px; height: 3px; background: var(--or-metal); opacity: .7; } .ap-niches { left: 8px; right: 8px; top: 130px; display: flex; justify-content: space-between; align-items: flex-end; height: 160px; } .ap-niche { position: relative; width: 46px; height: 130px; border-radius: 23px 23px 0 0; display: grid; place-items: end center; padding: 0 5px 14px; background: radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 150, 60, .5), transparent 70%), #0a121b; } .ap-niche:nth-child(2) { height: 150px; } .ap-niche img { height: auto; aspect-ratio: 5 / 7; box-shadow: 0 0 0 1px #b8893a; } .ap-lampe { left: 70px; top: 40px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 190, .9) 0 12%, rgba(255, 160, 70, .4) 30%, transparent 70%); } .ap-chevalets { left: 16px; right: 16px; top: 150px; display: flex; justify-content: space-between; } .ap-chevalets .ap-cadre { position: relative; width: 38px; aspect-ratio: 5 / 7; } .ap-comptoir { left: 8px; right: 8px; top: 280px; height: 90px; display: grid; place-items: start center; padding-top: 6px; color: #e2c270; background: linear-gradient(180deg, #e2c270 0 2px, #3a2a16 2px 5px, #1b1410 5px, #0d0a08); } .ap-comptoir svg { width: 34px; height: 34px; margin-top: -38px; filter: drop-shadow(0 0 6px rgba(255, 170, 80, .6)); } .ap-rayon { left: 6px; right: 6px; height: 64px; border-bottom: 3px solid #4a3519; background: repeating-linear-gradient(90deg, #5a2f22 0 7px, #1d2c3a 7px 8px, #2e4a52 8px 14px, #1d2c3a 14px 15px, #6b5a2c 15px 20px, #1d2c3a 20px 21px, #3b2a45 21px 28px, #1d2c3a 28px 30px); -webkit-mask: linear-gradient(180deg, transparent 0 14%, #000 14%); mask: linear-gradient(180deg, transparent 0 14%, #000 14%); } .ap-rayon.r1 { top: 70px; } .ap-rayon.r2 { top: 145px; background-position: 11px 0; } .ap-rayon.r3 { top: 220px; background-position: 23px 0; } .ap-pupitre { left: 62px; width: 52px; top: 300px; height: 70px; background: radial-gradient(ellipse 70% 40% at 50% 10%, rgba(255, 225, 170, .8), transparent 70%), linear-gradient(180deg, transparent 0 18px, #3a2716 18px 24px, #1a120c 24px); } .ap-halo { left: 28px; top: 150px; width: 120px; height: 180px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 170, 90, .4), transparent 70%); } .ap-relique { left: 66px; top: 218px; width: 44px; aspect-ratio: 5 / 7; } .ap-autel { left: 44px; width: 88px; top: 282px; height: 88px; background: linear-gradient(180deg, #e2c270 0 2px, #3b4758 2px, #252f3d 60%, #151c26); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); } .baie-cadre { inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(2px); pointer-events: none; } .baie-cadre path { fill: none; stroke-linejoin: miter; } .baie-cadre .ombre { stroke: rgba(0, 0, 0, .6); stroke-width: 13; transform: translateY(3px); } .baie-cadre .moulure { stroke: url(#or-metal); stroke-width: 8; } .baie-cadre .reflet { stroke: rgba(255, 243, 206, .55); stroke-width: .9; } .baie-cadre .filet { stroke: rgba(201, 162, 74, .55); stroke-width: 1; } .baie-cadre .socle-g, .baie-cadre .socle-d, .baie-cadre .cle { fill: url(#or-metal); stroke: rgba(0, 0, 0, .55); stroke-width: 1; } .baie-cadre .gemme { fill: url(#gemme-faille); stroke: none; opacity: .55; transition: opacity .6s ease; } .face .baie-cadre .gemme, .chaud .baie-cadre .gemme { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 150, 50, .9)); } /* Lueur de progression : la lumière monte dans la moulure depuis les deux socles (--lueur, de 0 à 1). */ .baie-cadre .lueur { stroke: #ffa13a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--lueur, 0) 1; opacity: .5; transition: opacity .6s ease; filter: drop-shadow(0 0 3px rgba(255, 170, 80, .9)); } .face .baie-cadre .lueur { opacity: .9; } /* Plaque du nom, au-dessus de l'arche : métal en biseau, lettres dorées. */ .baie-plaque { left: 43px; top: 18px; width: 150px; height: 50px; display: grid; place-items: center; align-content: center; gap: 5px; transform: translateZ(3px); background: linear-gradient(180deg, #16222f, #0a121c); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); border: 1px solid transparent; border-image: linear-gradient(180deg, #f0d48a, #7a5a26 60%, #b8893a) 1; } .baie-plaque span { font: 900 13px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; background: linear-gradient(180deg, #fff6dc, #e2c270 55%, #a8843e); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ligne gravée sous le nom : l'état de la salle (orange quand il y a quelque chose à saisir). */ .baie-ligne { font: 600 10.5px/1 var(--corps); letter-spacing: .05em; white-space: nowrap; color: #cdb98e; } .baie-ligne:empty { display: none; } .chaud .baie-ligne { color: #ffb35c; } /* Secteur de sol poli au pied de la baie, de la base du mur jusqu'à 120 px de l'œil. */ .baie-sol { left: 0; top: 350px; width: 236px; height: 220px; transform: translateZ(110px) rotateX(90deg); clip-path: polygon(0 0, 100% 0, calc(50% + 42px) 100%, calc(50% - 42px) 100%); background: linear-gradient(180deg, rgba(226, 194, 112, .7) 0 1.5px, transparent 1.5px 9px, rgba(201, 162, 74, .3) 9px 10px, transparent 10px), linear-gradient(180deg, transparent 58%, rgba(201, 162, 74, .35) 58% calc(58% + 1px), transparent calc(58% + 1px)), linear-gradient(90deg, transparent 38%, rgba(255, 190, 120, .16) 46%, rgba(255, 210, 160, .26) 50%, rgba(255, 190, 120, .16) 54%, transparent 62%), radial-gradient(ellipse 24% 70% at 50% 0%, rgba(255, 170, 80, .35), transparent 70%), radial-gradient(ellipse 60% 45% at 50% 0%, rgba(239, 125, 0, .16), transparent 75%), var(--sol-texture), linear-gradient(180deg, #1f2a37, #0b1119); } .porte3d { left: 30px; top: 90px; width: 176px; height: 370px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateZ(4px); } .porte3d:focus-visible { outline: 1px solid var(--or-vif); outline-offset: 4px; } /* Poussière en suspension dans la lumière, vignette et voile du seuil (2D, au-dessus de la scène). */ .visite-poussiere { position: absolute; inset: 0; pointer-events: none; } .visite-poussiere b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 214, 160, .75); box-shadow: 0 0 6px rgba(255, 170, 80, .8); opacity: 0; transform: scale(var(--s)); animation: poussiere var(--t) linear var(--d) infinite; } @keyframes poussiere { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)); } 20%, 70% { opacity: .55; } 100% { opacity: 0; transform: translate3d(14px, -90px, 0) scale(var(--s)); } } .visite-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 44%, transparent 50%, rgba(3, 6, 12, .72) 100%), linear-gradient(180deg, transparent 62%, rgba(4, 7, 13, .85) 100%); } .visite-seuil { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 56%, #fff1d6 0%, #ffa13a 12%, #b34f00 30%, #0d2433 62%, #070b13 100%); } /* Cartouche du bas : sur-titre orange, nom en or, losanges entre deux filets. */ .visite-hud { position: absolute; left: 0; right: 0; bottom: calc(var(--bas) + 22px); text-align: center; pointer-events: none; } .visite-hud p { margin: 0; } .visite-hud-sur { font: 600 10.5px/1 var(--corps); letter-spacing: .3em; text-transform: uppercase; color: var(--hextech-clair); } .visite-hud-nom { margin-top: 7px !important; font: 900 27px/1.05 var(--titre); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #fffaf0 10%, #f0d48a 60%, #b8893a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); } .visite-points { display: flex; justify-content: center; align-items: center; gap: 11px; margin: 13px 0 11px; } .visite-points .trait { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .7)); } .visite-points .trait:last-child { transform: scaleX(-1); } .visite-points i { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid rgba(201, 162, 74, .7); transition: background-color .3s, box-shadow .3s; } .visite-points i.actif { background: var(--or-metal); border-color: #f0d48a; box-shadow: 0 0 8px rgba(240, 212, 138, .7); } .visite-hud-signal { margin: -3px 24px 9px !important; font: 500 13px/1.35 var(--corps); color: var(--texte-2); } .visite-hud-signal:empty { display: none; } .visite-hud-signal b { font-weight: 600; color: #ffb35c; } .visite-aide { font-size: 12px; letter-spacing: .02em; color: var(--texte-3); } .visite-3d:not([data-monde="hall"]) .visite-hud { display: none; } /* Chapelle de l'Autel (session 1) : une pièce fermée de 4 murs (le 4e est dans notre dos), 380 × 460 px, sol à y = 200 (l'œil est à 200 px du sol), voûte à y = -260. L'autel est au centre, éclairé d'en haut. */ .chap { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .chap-fond { left: -190px; top: -260px; width: 380px; height: 460px; transform: translateZ(-460px); } .chap-gauche, .chap-droit { left: -230px; top: -260px; width: 460px; height: 460px; } .chap-gauche { transform: translateX(-190px) translateZ(-230px) rotateY(90deg); } .chap-droit { transform: translateX(190px) translateZ(-230px) rotateY(-90deg); } .chap-mur::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 88%, rgba(255, 150, 50, .2), transparent 72%), linear-gradient(180deg, rgba(3, 6, 12, .55), transparent 35%, transparent 80%, rgba(3, 6, 12, .4)); } .chap-gauche::after, .chap-droit::after { background: radial-gradient(ellipse 45% 50% at 50% 85%, rgba(255, 150, 50, .14), transparent 72%), linear-gradient(180deg, rgba(3, 6, 12, .7), rgba(3, 6, 12, .35) 40%, rgba(3, 6, 12, .55)); } .chap-sol { left: -190px; top: -30px; width: 380px; height: 460px; transform: translateZ(-230px) rotateX(90deg); background: radial-gradient(ellipse 42% 30% at 50% 46%, rgba(255, 160, 70, .26), transparent 72%), linear-gradient(180deg, rgba(3, 6, 12, .3), transparent 30%, rgba(3, 6, 12, .55)), var(--sol-texture), linear-gradient(180deg, #1f2a37, #0b1119); } .chap-voute { left: -190px; top: -490px; width: 380px; height: 460px; transform: translateZ(-230px) rotateX(-90deg); background: repeating-linear-gradient(90deg, transparent 0 94px, rgba(201, 162, 74, .22) 94px 95px, transparent 95px), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255, 170, 90, .12), transparent 70%), linear-gradient(rgba(3, 6, 12, .6), rgba(3, 6, 12, .6)), var(--pierre-texture), #121a24; } /* L'autel : un bloc de marbre (190 × 100 × 100) plus clair que les murs, piqueté au ciseau, éclairé d'en haut. */ .autel { position: absolute; left: 0; top: 0; transform-style: preserve-3d; } .autel > * { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .autel-face, .autel-dessus { background: var(--grain-pierre), linear-gradient(180deg, rgba(255, 220, 170, .1), rgba(3, 6, 12, .35)), var(--sol-texture) center / 300px, linear-gradient(180deg, #3b4758, #2b3545); } .autel-face { left: -95px; top: 100px; width: 190px; height: 100px; transform: translateZ(-200px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 6px 12px; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .45), inset 0 -18px 22px rgba(3, 6, 12, .45); } .autel-dessus { left: -95px; top: 50px; width: 190px; height: 100px; transform: translateZ(-250px) rotateX(90deg); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 200, 140, .3), transparent 75%), var(--grain-pierre), var(--sol-texture) center / 300px, #3e4a5b; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); } .autel-corniche { left: -99px; top: 97px; width: 198px; height: 7px; transform: translateZ(-197px); background: var(--or-metal); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); } .autel-plinthe { left: -104px; top: 188px; width: 208px; height: 12px; transform: translateZ(-193px); background: linear-gradient(180deg, #c9a24a 0 1px, #1c2531 1px, #0e141c); } .autel-filet { width: 70px; height: 1px; margin: 1px 0 3px; background: linear-gradient(90deg, transparent, #c9a24a, transparent); } .autel-rayon { left: -75px; top: -260px; width: 150px; height: 360px; transform: translateZ(-252px); pointer-events: none; background: linear-gradient(180deg, rgba(255, 220, 170, .2), rgba(255, 200, 140, .08) 70%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); } .autel-flaque { left: -150px; top: 49px; width: 300px; height: 300px; transform: translateZ(-250px) rotateX(90deg); pointer-events: none; background: radial-gradient(circle, rgba(255, 170, 80, .22), transparent 65%); } /* Les cartes : la pièce maîtresse debout sur l'autel, les dernières acquisitions en éventail au sol. */ .autel-carte { cursor: pointer; outline-offset: 3px; } .autel-carte .vitrine { box-shadow: 0 0 0 1px #c9a24a, 0 8px 18px rgba(0, 0, 0, .65); } .autel-relique { left: -38px; top: -8px; width: 76px; transform: translateZ(-250px); } .autel-relique .vitrine { box-shadow: 0 0 0 1.5px #e2c270, 0 10px 24px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 150, 50, .4); } .autel-offrande { left: -15px; top: 178px; width: 30px; transform: rotateY(var(--a)) translateZ(-168px) rotateX(90deg); } /* Le médaillon de la salle des trophées, au mur du fond. */ .autel-trophees { left: -80px; top: -174px; width: 160px; transform: translateZ(-458px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; } .autel-medaille { width: 72px; height: 72px; } .autel-medaille .medaille-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255, 160, 60, .75)) brightness(1.25); } .autel-trophees .grave { font-size: 12px; } .autel-trophees .grave.dore { font: 900 14px/1.1 var(--titre); letter-spacing: .1em; text-transform: uppercase; } /* Inscriptions gravées dans la pierre : lettres en creux qui laissent voir le grain, arête basse éclairée, arête haute dans l'ombre. Les signaux chauds sont dorés à la feuille. */ .grave { display: block; margin: 0; font: 600 9px/1.3 var(--corps); letter-spacing: .02em; text-align: center; text-decoration: none; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, rgba(3, 6, 12, .85), rgba(3, 6, 12, .62)), var(--grain-pierre), var(--pierre-texture); filter: drop-shadow(0 .7px 0 rgba(255, 236, 205, .3)) drop-shadow(0 -.6px 0 rgba(0, 0, 0, .6)); } .grave.dore { background-image: linear-gradient(180deg, #f6e3a8, #c9a24a 45%, #7a5a26 72%, #e2c270), var(--grain-pierre); filter: drop-shadow(0 .7px 0 rgba(255, 236, 205, .25)) drop-shadow(0 -.6px 0 rgba(0, 0, 0, .75)) drop-shadow(0 0 3px rgba(255, 170, 80, .3)); } .autel-titre { font: 900 10px/1.15 var(--titre); letter-spacing: .1em; text-transform: uppercase; } /* Salle de la Collection (session 2) : une galerie en enfilade, couloir de 320 px de large (sol à y = 200, voûte à y = -260). Chaque halte (.halte, placée à --z par visite.js) est un tronçon de couloir de 190 px et sa paire de vitrines, une de chaque côté, à 90 px du milieu, inclinées de 38° vers lui. Le tronçon s'étend de 150 px devant la paire à 40 px derrière (--dz = son milieu). Fondu par --o, jamais d'opacity sur .halte (elle est en preserve-3d). */ .haltes { position: absolute; left: 0; top: 0; transform-style: preserve-3d; } .halte { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translateZ(var(--z)); } .halte > * { position: absolute; opacity: var(--o, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; --dz: 55px; } .halte > .suite { --dz: -135px; } .halte-mur { left: -95px; top: -260px; width: 190px; height: 460px; } .halte-mur.gauche { transform: translateX(-160px) translateZ(var(--dz)) rotateY(90deg); } .halte-mur.droit { transform: translateX(160px) translateZ(var(--dz)) rotateY(-90deg); } .halte-sol { left: -160px; top: -95px; width: 320px; height: 190px; transform: translateY(200px) translateZ(var(--dz)) rotateX(90deg); background: linear-gradient(90deg, rgba(3, 6, 12, .55), transparent 25%, transparent 75%, rgba(3, 6, 12, .55)), linear-gradient(90deg, transparent 49.6%, rgba(201, 162, 74, .28) 49.6% 50.4%, transparent 50.4%), var(--sol-texture), linear-gradient(#1f2a37, #0b1119); } .halte-voute { left: -160px; top: -95px; width: 320px; height: 190px; transform: translateY(-260px) translateZ(var(--dz)) rotateX(-90deg); background: linear-gradient(180deg, transparent 0 94px, rgba(201, 162, 74, .3) 94px 96px, transparent 96px), linear-gradient(rgba(3, 6, 12, .65), rgba(3, 6, 12, .65)), var(--pierre-texture), #121a24; } .halte-fond { left: -160px; top: -260px; width: 320px; height: 460px; transform: translateZ(-230px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-bottom: 60px; } .halte-fond .grave { position: relative; z-index: 1; font-size: 12px; } .halte-fond .grave.dore { font: 900 16px/1.1 var(--titre); letter-spacing: .12em; text-transform: uppercase; } /* Une vitrine : la carte sous verre avec son cartel, sur une colonne, sous un rai de lumière. */ .halte .gauche { --cote: -1; } .halte .droite { --cote: 1; } .halte-carte, .halte-colonne, .halte-spot { transform: translateX(calc(var(--cote) * 90px)) rotateY(calc(var(--cote) * -38deg)); } .halte-carte { left: -42px; top: -82px; width: 84px; cursor: pointer; outline-offset: 3px; } .halte-carte .vitrine { box-shadow: 0 0 0 1px #c9a24a, 0 8px 18px rgba(0, 0, 0, .7); } .halte-carte .vitrine .quantite { transform: scale(.8); transform-origin: top right; } .halte-verre { position: absolute; inset: -6px -6px -22px; pointer-events: none; border: 1px solid rgba(226, 194, 112, .5); background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 35%, transparent 70%, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 18px rgba(255, 170, 90, .12), 0 14px 22px rgba(0, 0, 0, .5); } .halte-cartel { position: absolute; left: -5px; right: -5px; bottom: -19px; margin: 0; text-align: center; font: 600 7.5px/1.25 var(--corps); letter-spacing: .02em; color: #e8d6ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .halte-cartel b { color: #ffb35c; font-weight: 700; } .halte-colonne { left: -34px; top: 62px; width: 68px; height: 138px; background: linear-gradient(180deg, #e2c270 0 2px, #6e5222 2px 4px, transparent 4px), linear-gradient(90deg, rgba(3, 6, 12, .55), transparent 30%, transparent 70%, rgba(3, 6, 12, .6)), var(--grain-pierre), linear-gradient(180deg, #3b4758, #1c2531); box-shadow: 0 0 0 1px rgba(201, 162, 74, .25); } .halte-spot { left: -64px; top: -260px; width: 128px; height: 330px; pointer-events: none; background: radial-gradient(ellipse 45% 75% at 50% 0%, rgba(255, 215, 160, .16), transparent 70%); } .halte.face .halte-spot { background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(255, 215, 160, .26), transparent 72%); } /* Au bout de ce qui est dessiné, le couloir se perd dans le noir (et non dans le ciel de la page). */ html.visite-scene .visite-3d[data-monde="collection"] { background: radial-gradient(ellipse 30% 25% at 50% 45%, #0b121c, #04070c 70%); } /* Filtres et tri en 2D, sous l'en-tête (mêmes boutons que le mode rapide), et le numéro des vitrines en bas. */ .coll-outils, .coll-pied { display: none; } .visite-3d[data-monde="collection"] .coll-outils { display: grid; gap: 8px; position: absolute; left: 0; right: 0; top: var(--haut-coll, 64px); z-index: 2; padding: 8px var(--gouttiere) 14px; background: linear-gradient(180deg, rgba(7, 11, 19, .92), rgba(7, 11, 19, .7) 70%, transparent); } .coll-outils .puces { touch-action: pan-x; } .coll-outils .tri { font-size: 13px; } .visite-3d[data-monde="collection"] .coll-pied { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--bas) + 76px); z-index: 2; margin: 0; text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--texte-3); pointer-events: none; } /* Bouton « Hall » : retour au carrefour depuis une salle (remplace les onglets en mode Visite). */ html.visite .visite-retour:not([hidden]) { position: fixed; left: 50%; bottom: calc(var(--bas) + 16px); z-index: 24; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 11px 20px 11px 16px; cursor: pointer; color: #f0d48a; background: linear-gradient(180deg, #1a2a37, #0b131d); border: 1.5px solid transparent; border-image: linear-gradient(180deg, #f6e3a8, #8a6a2c 55%, #c9a24a) 1; box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); } .visite-retour svg { width: 19px; height: 19px; } .visite-retour span { font: 900 13px/1 var(--titre); letter-spacing: .18em; text-transform: uppercase; color: #f6ead0; } html.visite #vue.visite-arrivee { animation: visite-arrive .55s cubic-bezier(.2, .7, .2, 1) backwards; } html.visite #vue.visite-depart { animation: visite-part .26s ease-in forwards; } @keyframes visite-arrive { from { opacity: 0; transform: scale(1.06); } } @keyframes visite-part { to { opacity: 0; transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { html.visite #vue.visite-arrivee, html.visite #vue.visite-depart, .baie-coeur::before { animation: none; } .visite-poussiere { display: none; } }