@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); :root { --neon-bg: #0a0118; --neon-surface: #1a0b2e; --neon-surface-alt: #2d1b4e; --neon-surface-strong: rgba(26, 11, 46, 0.96); --neon-text: #e0e7ff; --neon-muted: #94a3b8; --neon-accent: #06b6d4; --neon-accent-strong: #8b5cf6; --neon-glow: #a855f7; --neon-border: #3730a3; --neon-panel-border: rgba(139, 92, 246, 0.15); --neon-panel-shadow: 0 0 15px rgba(6, 182, 212, 0.4), 0 8px 32px rgba(139, 92, 246, 0.3); --neon-panel-bg: linear-gradient(150deg, #1e1b4b 0%, #1a0b2e 48%, #2d1b4e 100%); --neon-card-bg: linear-gradient(150deg, #312e81 0%, #2d1b4e 100%); --blazor-page-content-max-width: 1490px; } html { min-height: 100%; overflow-x: hidden; } body { min-height: 100dvh; } /* Le document est l'unique scroller des pages standard. Le contenu et le footer appartiennent ainsi au même flux vertical réel. */ html:has(.page[data-lang]) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; } body:has(.page[data-lang]) { height: auto; min-height: 100dvh; overflow: visible; } /* Bootstrap place le backdrop directement sous . Pendant l'ouverture d'une modale, retirer le contexte d'empilement cree par le shell fixe permet au dialogue (z-index 1055) de rester au-dessus du backdrop (z-index 1050). */ body.modal-open .page { position: absolute; } html, body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; background: radial-gradient(circle at 15% 15%, rgba(168, 85, 247, 0.18), transparent 24%), radial-gradient(circle at 85% 10%, rgba(6, 182, 212, 0.15), transparent 22%), radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.14), transparent 28%), linear-gradient(180deg, #130326 0%, var(--neon-bg) 58%, #070012 100%); color: var(--neon-text); } /* Les hosts iframe SPA restent verrouillés sur le viewport et masquent le footer du layout. */ html:has(.ro-full-bleed):not(:has(.tool-native-page)) .main-content { padding: 0; display: flex; flex-direction: column; min-height: 0; } html:has(.ro-full-bleed):not(:has(.tool-native-page)) .content { padding-top: 0; flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 0; } html:has(.ro-full-bleed):not(:has(.tool-native-page)) .shell { max-width: none; width: 100%; margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; } html:has(.ro-full-bleed):not(:has(.tool-native-page)) .site-footer { display: none; } html:has(.ro-full-bleed):not(:has(.tool-native-page)) .page-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } html:has(.ro-full-bleed):not(:has(.tool-native-page)) .page { height: 100vh; min-height: 100vh; overflow: hidden; } html:has(.ro-full-bleed):not(:has(.tool-native-page)), body:has(.ro-full-bleed):not(:has(.tool-native-page)) { height: 100%; overflow: hidden; } /* Outils Blazor natifs : battre max-width/padding du .shell MainLayout (CSS isolation) sans créer de second viewport vertical. */ html:has(.tool-native-page) .main-content { padding: 0; width: 100%; display: flex; flex-direction: column; flex: 1 0 auto; height: auto; min-height: 0; overflow: visible; } html:has(.tool-native-page) .main-content > .content.shell, html:has(.tool-native-page) .content, html:has(.tool-native-page) .shell { width: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 0 auto; height: auto; min-height: 0; overflow: visible; } html:has(.tool-native-page) .ro-full-bleed, html:has(.tool-native-page) .tool-native-page { width: 100%; flex: 1 0 auto; height: auto !important; max-height: none !important; min-width: 0; overflow: visible !important; } /* L'optimiseur conserve un tableau virtualise avec son propre scroller. Quand l'espace de travail est affiche, verrouiller le layout sur le viewport evite que #optimizer-table-shell ajoute aussi un scroll au document. L'ecran d'accueil, ou le tableau est hidden, reste une page Blazor standard. */ html:has(#optimizer-table-shell:not([hidden])), body:has(#optimizer-table-shell:not([hidden])) { height: 100%; overflow: hidden; } html:has(#optimizer-table-shell:not([hidden])) .page { height: 100dvh; min-height: 0; overflow: hidden; } html:has(#optimizer-table-shell:not([hidden])) .page-body, html:has(#optimizer-table-shell:not([hidden])) .main-content, html:has(#optimizer-table-shell:not([hidden])) .main-content > .content.shell { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; } html:has(#optimizer-table-shell:not([hidden])) .site-footer { display: none; } html:has(#optimizer-table-shell:not([hidden])) .rune-optimizer-blazor-page { display: flex; flex: 1 1 auto; flex-direction: column; height: auto !important; min-height: 0; overflow: hidden !important; } html:has(#optimizer-table-shell:not([hidden])) #optimizer-view, html:has(#optimizer-table-shell:not([hidden])) #optimizer-view > main, html:has(#optimizer-table-shell:not([hidden])) #optimizer-table-shell { display: flex; flex: 1 1 auto; flex-direction: column; height: auto; min-height: 0; overflow: hidden; } html:has(#optimizer-table-shell:not([hidden])) #optimizer-view > .topbar, html:has(#optimizer-table-shell:not([hidden])) #filter-menu, html:has(#optimizer-table-shell:not([hidden])) .counter-row, html:has(#optimizer-table-shell:not([hidden])) #table-top-scroll { flex: 0 0 auto; } html:has(#optimizer-table-shell:not([hidden])) #table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; } html:has(.account-report-blazor-page), body:has(.account-report-blazor-page), html:has(.account-report-blazor-page) .page { background: var(--neon-bg, #0a0118); } html:has(.siege-planner-blazor-page), body:has(.siege-planner-blazor-page), html:has(.siege-planner-blazor-page) .page { background: var(--neon-bg, #0a0118); } html:has(.guild-account-report-blazor), body:has(.guild-account-report-blazor), html:has(.guild-account-report-blazor) .page { background: var(--neon-bg, #0a0118); } html:has(.guild-account-report-blazor) .guild-account-report-blazor, html:has(.guild-account-report-blazor) .guild-account-report-shell, html:has(.guild-account-report-blazor) .guild-report-content { overflow: visible; max-height: none; height: auto; } html:has(.rune-optimizer-blazor-page), body:has(.rune-optimizer-blazor-page), html:has(.rune-optimizer-blazor-page) .page { background: var(--neon-bg, #0a0118); } /* Optimiseur B2 : la feuille SPA est chargée après les styles isolés du composant. Ces sélecteurs globaux et explicitement prioritaires empêchent ses chips de filtre de revenir au graphite. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-menu, html:has(.rune-optimizer-blazor-page) #optimizer-view .counter-row { border-color: rgba(139, 92, 246, .34) !important; background: linear-gradient(145deg, rgba(45, 27, 78, .68), rgba(26, 11, 46, .88)) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-chip, html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-chip-combo .filter-chip { border-color: rgba(139, 92, 246, .42) !important; background: rgba(26, 11, 46, .78) !important; color: #e9e6ff !important; } /* Le sélecteur de colonnes conserve son format de filtre compact, mais adopte l'accent bleu de Graphs - Stats afin d'être identifiable immédiatement. */ html:has(.rune-optimizer-blazor-page) #optimizer-view #columns-display-button.filter-chip { border-color: rgba(96, 165, 250, .65) !important; background: linear-gradient(135deg, rgba(37, 99, 235, .3), rgba(26, 11, 46, .76)) !important; color: #e9e6ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view #columns-display-button.filter-chip:hover:not(:disabled) { border-color: #bfdbfe !important; background: linear-gradient(135deg, rgba(37, 99, 235, .52), rgba(25, 50, 111, .82)) !important; color: #fff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-chip:hover, html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-chip.is-active { border-color: #59e2f2 !important; background: linear-gradient(135deg, rgba(6, 182, 212, .22), rgba(139, 92, 246, .32)) !important; color: #fff !important; } /* Les raccourcis sont des catégories métier : leur palette d'origine reste distincte des fonds de surface Blazor, y compris lorsqu'ils sont actifs. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--premium { border-color: rgba(240, 184, 75, .62) !important; background: #2a2418 !important; color: #f1d18a !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--preset { border-color: rgba(196, 142, 255, .56) !important; background: #251d31 !important; color: #dfc7ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--objective { border-color: rgba(174, 198, 10, .6) !important; background: #252a14 !important; color: #d8ea6a !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--speed { border-color: rgba(124, 204, 204, .5) !important; background: #1a2929 !important; color: #b6e1e1 !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .rune-viewer-button { border-color: rgba(240, 184, 75, .38) !important; background: linear-gradient(135deg, rgba(240, 184, 75, .18), rgba(96, 63, 14, .32)) !important; color: #f5d38d !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--premium.is-active { border-color: #f0b84b !important; box-shadow: 0 0 0 2px rgba(240, 184, 75, .2), 0 0 14px rgba(240, 184, 75, .18) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--preset.is-active { border-color: #b984ff !important; box-shadow: 0 0 0 2px rgba(185, 132, 255, .18), 0 0 14px rgba(185, 132, 255, .14) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--objective.is-active { border-color: #aec60a !important; box-shadow: 0 0 0 2px rgba(174, 198, 10, .18), 0 0 14px rgba(174, 198, 10, .14) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stat-pill--speed.is-active { border-color: #7ccccc !important; box-shadow: 0 0 0 2px rgba(124, 204, 204, .18), 0 0 14px rgba(124, 204, 204, .14) !important; } /* Les fenêtres "Set & Slot" et "Top set / substat" utilisent encore des surfaces de la feuille SPA, chargée après le CSS isolé. On remplace les seuls fonds neutres ici ; les cellules porteuses d'un état métier restent intactes (comparaison, gemme, efficacité, score, etc.). */ html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-popover, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-modal { border-color: rgba(139, 92, 246, .55) !important; background: linear-gradient(145deg, #211040, #120521) !important; color: #eef2ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-popover-head, html:has(.rune-optimizer-blazor-page) #optimizer-view .filter-popover-actions { border-color: rgba(139, 92, 246, .24) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .grouped-filter-section, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-set-panel, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table-wrap:not(.sub-rank-table-wrap--current), html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-row, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-current { border-color: rgba(139, 92, 246, .3) !important; background: rgba(10, 1, 24, .7) !important; color: #e9e6ff !important; } /* Les trois plages du filtre Efficience sont des cartes propres, distinctes du popover : elles ne doivent pas réintroduire le graphite de la SPA. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .efficiency-range-row { border-color: rgba(139, 92, 246, .3) !important; background: rgba(10, 1, 24, .7) !important; } /* Bornes de meules et gemmes : l'en-tête comme les colonnes descriptives héritaient des bandes gris graphite de la table SPA. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid-wrap { border-color: rgba(139, 92, 246, .38) !important; background: rgba(10, 1, 24, .72) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid thead th { border-color: rgba(139, 92, 246, .26) !important; background: rgba(49, 46, 129, .72) !important; color: #f3f1ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid tbody tr, html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid tbody tr:nth-child(odd) { background: rgba(26, 11, 46, .68) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid tbody tr:nth-child(even) { background: rgba(49, 46, 129, .32) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .bounds-grid :is(th, td) { border-color: rgba(139, 92, 246, .18) !important; } /* Barre des pages du Conseil de vente : conserver l'accent or de la page active, mais remplacer sa large bande graphite par la surface Blazor. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .rune-sales-tabs { background: linear-gradient(180deg, rgba(45, 27, 78, .96), rgba(18, 5, 37, .9)) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .rune-sales-settings-modal .rune-sales-tabs { background: linear-gradient(180deg, rgba(45, 27, 78, .96), rgba(18, 5, 37, .9)) !important; } /* Graphs - Stats : le canevas SVG remplace le canvas SPA, avec les mêmes données, mais doit appartenir visuellement au thème Blazor. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .graph-canvas-wrap { border-color: rgba(139, 92, 246, .4) !important; background: linear-gradient(145deg, rgba(19, 5, 40, .96), rgba(10, 1, 24, .98)) !important; } /* La hauteur fixe historique coupait le bas du graphique. Le SVG s'adapte à l'espace vertical restant et, sur une petite fenêtre, la modal défile sans jamais masquer une partie de ses courbes. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .graphs-modal { width: min(1120px, calc(100vw - 24px)); /* Le corps est flex: 1 : une hauteur auto le replie à 0. Le dialogue garde donc un gabarit comparable à celui du relevé de compte. */ height: min(820px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; } /* Canevas de référence des pages Blazor natives : même largeur que le Relevé de compte, sans conserver une contrainte héritée du shell. */ .blazor-page-content-width { width: min(var(--blazor-page-content-max-width), 100%); height: auto !important; max-height: none !important; margin-inline: auto; overflow: visible !important; } /* Analyse des artéfacts : poste de travail fixe comme l'optimiseur de runes. Seul le tableau conserve son propre défilement pour que les filtres restent disponibles et que sa ligne d'en-tête ne disparaisse pas. */ @media (min-width: 901px) and (min-height: 641px) { html:has(.artifact-inventory-page), body:has(.artifact-inventory-page) { height: 100%; overflow: hidden; } html:has(.artifact-inventory-page) .page { height: 100dvh; min-height: 0; overflow: hidden; } html:has(.artifact-inventory-page) .page-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } html:has(.artifact-inventory-page) .main-content, html:has(.artifact-inventory-page) .main-content > .content.shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } html:has(.artifact-inventory-page) .site-footer { display: none; } } /* === /admin — accueil =================================================== */ .admin-home { display: grid; gap: 2rem; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 3rem; } .admin-home__section h2 { color: var(--neon-text); } .admin-home__section { display: grid; gap: 0.85rem; } .admin-home__section h2 { margin: 0; font-size: 1.25rem; } .admin-home__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 0.9rem; } .admin-home-tile { display: flex; align-items: center; gap: 0.9rem; min-height: 7.5rem; padding: 1rem; border: 1px solid var(--neon-panel-border); border-radius: 16px; background: linear-gradient(150deg, rgba(49, 46, 129, 0.4), rgba(26, 11, 46, 0.82)); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.07); color: inherit; text-decoration: none; transition: border-color .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.16, 1, .3, 1); } .admin-home-tile:hover { border-color: rgba(6, 182, 212, 0.35); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.12), 0 0 18px rgba(6, 182, 212, 0.12); color: inherit; transform: translateY(-2px); } .admin-home-tile:focus-visible { outline: 2px solid var(--neon-accent); outline-offset: 2px; } .admin-home-tile__icon { display: grid; flex: 0 0 2.85rem; width: 2.85rem; height: 2.85rem; place-items: center; border: 1px solid rgba(6, 182, 212, 0.28); border-radius: 12px; background: rgba(6, 182, 212, 0.09); color: var(--neon-accent); font-size: 1.35rem; } .admin-home-tile__content { display: grid; gap: 0.25rem; min-width: 0; } .admin-home-tile__title { color: var(--neon-text); font-weight: 700; } .admin-home-tile__description { color: var(--neon-muted); font-size: 0.875rem; line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .admin-home-tile { transition: none; } .admin-home-tile:hover { transform: none; } } /* Les extraits de mémos et retours restent des boutons accessibles, sans le rendu natif clair du navigateur : ils se fondent dans leur ligne de tableau. */ .my-siege-report-table__excerpt, .siege-review-excerpt { appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; color: var(--neon-text); font: inherit; text-align: left; } /* Le texte complet reste près de sa ligne : il ne déclenche pas de modale et garde une hauteur compacte avec son propre défilement si nécessaire. */ .my-siege-report-table__text-popover, .siege-review-text-popover { display: block; width: min(22rem, 100%); max-height: 11rem; margin-top: .45rem; overflow: auto; padding: .55rem .65rem; border: 1px solid var(--neon-panel-border); border-radius: 8px; background: var(--neon-surface-alt); color: var(--neon-text); font-size: .78rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--neon-panel-shadow); } /* Snapshot d'offense : les lignes de statistiques sont rendues dynamiquement. Ces règles globales leur donnent exactement le tableau utilisé dans Decks. */ .decks-native-stat-table, .siege-build-monster__stats { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(139, 92, 246, .28); border-radius: 10px; background: rgba(10, 1, 24, .36); color: #e7e7e7; font-size: 12px; overflow: hidden; } .decks-native-stat-table th, .decks-native-stat-table td, .siege-build-monster__stats th, .siege-build-monster__stats td { padding: 8px 9px; border-right: 1px solid rgba(139, 92, 246, .18); border-bottom: 1px solid rgba(139, 92, 246, .18); text-align: right; } .decks-native-stat-table th:first-child, .siege-build-monster__stats th:first-child { text-align: left; color: #f3f3f3; } .decks-native-stat-table td:nth-child(3), .siege-build-monster__stats td:nth-child(3) { color: #7ed49c; font-weight: 800; } .decks-native-stat-table td:last-child, .siege-build-monster__stats td:last-child { color: #8ec5e8; font-weight: 900; border-right: 0; } .decks-native-stat-table tr:last-child th, .decks-native-stat-table tr:last-child td, .siege-build-monster__stats tr:last-child th, .siege-build-monster__stats tr:last-child td { border-bottom: 0; } .decks-native-stat-table thead th, .siege-build-monster__stats thead th { color: #c8c0b5; font-size: 10px; } html:has(.blazor-page-content-width) .main-content, html:has(.blazor-page-content-width) .main-content > .content.shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Le rapport de siège conserve un unique scroll sous le header afin que ses onglets sticky restent ancrés dans cette zone. */ html:has(.siege-report-page), body:has(.siege-report-page) { height: 100%; overflow: hidden; } html:has(.siege-report-page) .page, html:has(.siege-report-page) .main-content, html:has(.siege-report-page) .main-content > .content.shell { height: auto; max-height: none; overflow: visible !important; } html:has(.siege-report-page) .page { height: 100dvh; min-height: 0; overflow: hidden !important; } html:has(.siege-report-page) .page-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } html:has(.siege-report-page) .main-content { scrollbar-width: none; } html:has(.siege-report-page), body:has(.siege-report-page), html:has(.siege-report-page) .main-content { -ms-overflow-style: none; scrollbar-width: none; } html:has(.siege-report-page)::-webkit-scrollbar, body:has(.siege-report-page)::-webkit-scrollbar, html:has(.siege-report-page) .main-content::-webkit-scrollbar { width: 0; height: 0; display: none; } html:has(.siege-report-page) .site-footer { display: none; } body:has(.siege-offenses-page) .modal-backdrop.show { opacity: 1; background: color-mix(in srgb, var(--neon-bg) 32%, transparent); -webkit-backdrop-filter: blur(8px) saturate(.8); backdrop-filter: blur(8px) saturate(.8); } @media (max-height: 930px) { html:has(.rune-optimizer-blazor-page) #optimizer-view .graphs-modal { width: min(960px, calc(100vw - 24px)); } } @media (max-height: 720px) { html:has(.rune-optimizer-blazor-page) #optimizer-view .graphs-modal { width: min(760px, calc(100vw - 20px)); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); } } html:has(.rune-optimizer-blazor-page) #optimizer-view .graphs-modal .modal-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; } html:has(.rune-optimizer-blazor-page) #optimizer-view #efficiency-graph { /* La SPA utilise un canvas de 520 px. À hauteur identique, le SVG est lisible et le scroll de la modal permet de voir sa totalité. */ height: 520px; min-height: 520px; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip { z-index: 20; min-width: 210px; width: min(430px, calc(100% - 16px)); max-width: min(430px, calc(100% - 16px)); padding: 6px; border-color: rgba(243, 208, 139, .34); background: rgba(22, 20, 18, .94); color: var(--text); box-shadow: 0 14px 32px rgba(0, 0, 0, .32); font-size: 12px; line-height: 1.35; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip > strong { margin-bottom: 5px; color: var(--gold); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series { display: grid; gap: 2px; margin-top: 5px; padding: 5px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series-heading { display: grid; grid-template-columns: 18px minmax(0, 1fr) max-content; align-items: center; gap: 6px; color: var(--muted); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series-heading i { width: 18px; height: 3px; border-radius: 999px; background: var(--legend-color); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series-heading b, html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series > span b { color: var(--text); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-tooltip .graph-tooltip-series > span { white-space: normal; color: var(--muted); } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.ro2-graph-frame, .ro2-graph-grid, .ro2-graph-axis) { stroke: rgba(255, 255, 255, .09); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-grid.is-target { stroke: rgba(132, 214, 167, .36); } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.ro2-graph-label, .ro2-graph-x-label) { fill: var(--muted); font: 12px Inter, sans-serif; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-series { stroke-width: 1.35; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-hover-zone { fill: transparent; stroke: transparent; pointer-events: all; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-hover-line { opacity: 0; stroke: rgba(243, 208, 139, .75); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-hover-line.is-visible { opacity: 1; } html:has(.rune-optimizer-blazor-page) #optimizer-view .ro2-graph-hover-point { fill: var(--graph-color); stroke: #f8f2e8; stroke-width: 1.4; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); } /* Farm ? : les recommandations et les manques par set gardent leurs barres, compteurs et accents or ; seuls leurs panneaux graphite deviennent natifs. */ html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.farm-row, .farm-empty, .farm-set-detail) { border-color: rgba(139, 92, 246, .34) !important; background: linear-gradient(145deg, rgba(45, 27, 78, .7), rgba(18, 5, 37, .88)) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .farm-bar { background: rgba(10, 1, 24, .84) !important; } /* Stock gemmes / meules : le tableau emploie la même base SPA que les bornes, mais conserve l'alternance native du thème Blazor. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid-wrap { border-color: rgba(139, 92, 246, .38) !important; background: rgba(10, 1, 24, .72) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid thead th { border-color: rgba(139, 92, 246, .26) !important; background: rgba(49, 46, 129, .72) !important; color: #f3f1ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid tbody tr, html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid tbody tr:nth-child(odd) { background: rgba(26, 11, 46, .68) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid tbody tr:nth-child(even) { background: rgba(49, 46, 129, .32) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .stock-grid :is(th, td) { border-color: rgba(139, 92, 246, .18) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.sub-rank-set-grid label, .sub-rank-option, .sub-rank-grind-toggle, .sub-rank-stats span) { border-color: rgba(139, 92, 246, .34) !important; background: rgba(26, 11, 46, .78) !important; color: #e9e6ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table th { border-color: rgba(139, 92, 246, .24) !important; background: rgba(49, 46, 129, .72) !important; color: #f3f1ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table tbody tr, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table tbody tr:nth-child(odd) { background: rgba(26, 11, 46, .68) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table tbody tr:nth-child(even) { background: rgba(49, 46, 129, .32) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table tbody tr:hover { background: rgba(6, 182, 212, .14) !important; } /* La section de la rune actuellement comparée conserve son repère bleu. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table-wrap--current .sub-rank-table tbody tr, html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table-wrap--current .sub-rank-table tbody tr:hover { background: rgba(142, 197, 232, .07) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .sub-rank-table :is(th, td) { border-color: rgba(139, 92, 246, .17) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.filter-popover-close, .sub-rank-modal .icon-button) { border-color: rgba(6, 182, 212, .52) !important; background: rgba(10, 1, 24, .58) !important; color: #f5f7ff !important; } /* Stocks de gemmes/meules et avertissement d'utilisation dans un preset. */ html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.grind-stock-popover, .deck-usage-popover) { border-color: rgba(139, 92, 246, .55) !important; background: linear-gradient(145deg, #211040, #120521) !important; color: #eef2ff !important; } /* Les utilisations Arena/Siege/RTA s'ouvrent depuis la vue rune par rune, dont le backdrop est à 5000 : elles doivent donc passer au-dessus. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .deck-usage-popover { z-index: 5100 !important; } /* Comparaison Top slot ouverte depuis la vue rune par rune. */ html:has(.rune-optimizer-blazor-page) #optimizer-view #sub-rank-modal.is-over-rune-viewer { z-index: 5100 !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .grind-stock-row.stock-choice-row:not(.is-advised-gem), html:has(.rune-optimizer-blazor-page) #optimizer-view .deck-usage-row { border-color: rgba(139, 92, 246, .3) !important; background: rgba(26, 11, 46, .78) !important; } /* L'état "gemme conseillée" reste volontairement vert. */ html:has(.rune-optimizer-blazor-page) #optimizer-view .gem-stock-row.is-advised-gem { border-color: #72d58a !important; background: rgba(38, 76, 47, .34) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .deck-usage-row.is-pvp { border-color: rgba(224, 143, 153, .55) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .deck-usage-row.is-rta { border-color: rgba(142, 197, 232, .55) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view .deck-usage-row.is-pve { border-color: rgba(129, 201, 149, .45) !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.stock-count-input, .stock-apply-button) { border-color: rgba(139, 92, 246, .42) !important; background: rgba(10, 1, 24, .76) !important; color: #f1f4ff !important; } html:has(.rune-optimizer-blazor-page) #optimizer-view :is(.grind-stock-close, .deck-usage-popover .grind-stock-close):hover { border-color: #59e2f2 !important; background: rgba(6, 182, 212, .18) !important; color: #fff !important; } html:has(.decks-native-page) .content { width: 100%; padding-top: 1rem; } html:has(.decks-native-page) .shell { max-width: none; width: 100%; margin: 0; } a, .btn-link { color: var(--neon-accent); text-decoration-color: rgba(6, 182, 212, 0.35); } .btn-primary { color: #f8fbff; background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-strong)); border: 1px solid rgba(6, 182, 212, 0.28); box-shadow: 0 0 12px rgba(6, 182, 212, 0.28); } .btn-primary:focus, .btn-primary:active { color: #f8fbff; text-shadow: none; background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-strong)); border-color: rgba(6, 182, 212, 0.28); } .btn-primary:hover { color: #0b1220; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.55); background: linear-gradient(90deg, #10cbe3, #9f6cff); } .btn-outline-light { border-color: rgba(139, 92, 246, 0.34); color: var(--neon-text); background: rgba(45, 27, 78, 0.3); } .btn-outline-light:hover, .btn-outline-light:focus { color: #fff; border-color: rgba(6, 182, 212, 0.45); background: rgba(49, 46, 129, 0.52); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.15rem rgba(6, 182, 212, 0.24), 0 0 16px rgba(168, 85, 247, 0.18); } .content { padding-top: 1.25rem; } h1:focus { outline: none; } .hero-card, .feature-card { background: var(--neon-panel-bg); border: 1px solid var(--neon-panel-border); border-radius: 20px; padding: 1.5rem; box-shadow: var(--neon-panel-shadow); } .hero-card h1 { margin-top: 0.35rem; color: #f2f5ff; text-shadow: 0 0 22px rgba(168, 85, 247, 0.18); } .hero-card h2, .feature-card h2, .feature-card h3 { color: #f0f4ff; } .feature-card h4 { color: #f0f4ff; font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; } .hero-panel { position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 1rem; align-items: start; } .hero-panel::after { content: ""; position: absolute; inset: auto -4rem -4rem auto; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.24), transparent 70%); pointer-events: none; } .hero-panel::before { content: ""; position: absolute; inset: -2rem auto auto -3rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, rgba(6, 182, 212, 0.18), transparent 72%); pointer-events: none; } .eyebrow { color: var(--neon-accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; } .hero-actions { display: flex; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; } .hero-caption { margin-top: 0.8rem; color: var(--neon-muted); font-size: 0.9rem; } .homepage-section { margin-top: 1rem; } .home-orbit { position: relative; isolation: isolate; min-height: 18.5rem; border-radius: 20px; border: 1px solid var(--neon-panel-border); background: radial-gradient(circle at 50% 48%, rgba(6, 182, 212, 0.14), transparent 38%), radial-gradient(circle at 50% 52%, rgba(139, 92, 246, 0.18), transparent 64%), rgba(10, 1, 24, 0.62); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.06), var(--neon-panel-shadow); overflow: hidden; } .home-orbit--compact { min-height: 14rem; } .home-orbit__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 76%); pointer-events: none; } .home-orbit__ring { position: absolute; inset: 17%; border-radius: 50%; border: 1px dashed rgba(6, 182, 212, 0.38); box-shadow: 0 0 24px rgba(139, 92, 246, 0.12); animation: home-orbit-spin 32s linear infinite; pointer-events: none; } .home-orbit__ring:not(.home-orbit__ring--discord)::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(139, 92, 246, 0.22); } .home-orbit__ring--discord { inset: 29%; border-color: rgba(139, 92, 246, 0.34); animation-duration: 46s; animation-direction: reverse; box-shadow: 0 0 18px rgba(6, 182, 212, 0.12); } .home-orbit__core { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid rgba(6, 182, 212, 0.45); background: rgba(10, 1, 24, 0.82); color: var(--neon-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .home-orbit__node { position: absolute; z-index: 2; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 14px; border: 1px solid rgba(6, 182, 212, 0.32); background: linear-gradient(155deg, rgba(49, 46, 129, 0.78), rgba(26, 11, 46, 0.92)); box-shadow: 0 0 16px rgba(6, 182, 212, 0.18); } .home-orbit__node img { width: 1.55rem; height: 1.55rem; object-fit: contain; } .home-orbit__node--1 { top: 9%; left: 50%; transform: translateX(-50%); } .home-orbit__node--2 { top: 24%; right: 9%; } .home-orbit__node--3 { bottom: 18%; right: 12%; } .home-orbit__node--4 { bottom: 8%; left: 50%; transform: translateX(-50%); } .home-orbit__node--5 { bottom: 18%; left: 12%; } .home-orbit__node--6 { top: 24%; left: 9%; } .home-orbit__node--discord { left: 50%; top: 50%; z-index: 3; width: 3.35rem; height: 3.35rem; transform: translate(-50%, -50%); border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 0 22px rgba(6, 182, 212, 0.28); animation: home-discord-pulse 5.2s ease-in-out infinite; } .home-orbit__node--discord i { font-size: 1.45rem; color: var(--neon-accent); line-height: 1; } .home-tools-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.9rem; margin-top: 0.85rem; } .home-tool-card { position: relative; grid-column: span 4; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.2rem 1.2rem 1.1rem; border-radius: 18px; border: 1px solid var(--neon-panel-border); background: linear-gradient(155deg, rgba(49, 46, 129, 0.42) 0%, rgba(26, 11, 46, 0.88) 100%); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08); overflow: hidden; animation: neon-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--home-tool-delay, 0s); } .home-tool-card--featured { grid-column: span 6; background: var(--neon-panel-bg); box-shadow: var(--neon-panel-shadow); } .home-tool-card--featured::after { content: ""; position: absolute; inset: auto -18% -45% auto; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgba(6, 182, 212, 0.16), transparent 70%); pointer-events: none; } .home-tool-card--soon { border-style: dashed; border-color: rgba(139, 92, 246, 0.38); } .home-tool-card__index { position: absolute; top: 0.9rem; right: 1rem; color: var(--neon-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; } .home-tool-card__heading { display: flex; align-items: center; gap: 0.75rem; padding-right: 2rem; } .home-tool-card__icon { width: 2.45rem; height: 2.45rem; object-fit: contain; flex: 0 0 auto; } .home-tool-card--featured .home-tool-card__icon { width: 3.05rem; height: 3.05rem; } .home-tool-card__title { margin: 0; color: var(--neon-text); font-size: 1.05rem; font-weight: 700; line-height: 1.25; } .home-tool-card--featured .home-tool-card__title { font-size: 1.32rem; } .home-tool-card__desc { margin: 0; max-width: 38rem; color: var(--neon-muted); font-size: 0.93rem; line-height: 1.45; } .home-tool-card__soon { align-self: flex-start; padding: 0.22rem 0.7rem; border-radius: 999px; background: linear-gradient(90deg, var(--neon-accent-strong), var(--neon-glow)); color: #0b1220; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-tool-gallery { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: auto; } .home-tool-card--featured .home-tool-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-tool-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px dashed rgba(6, 182, 212, 0.32); background: rgba(10, 1, 24, 0.45); } .home-tool-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-tool-shot__label { position: absolute; right: 0.4rem; bottom: 0.35rem; padding: 0.12rem 0.45rem; border-radius: 999px; background: rgba(10, 1, 24, 0.78); color: var(--neon-muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-discord-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; } .home-discord-card { padding: 1.2rem 1.25rem; border-radius: 18px; border: 1px solid var(--neon-panel-border); background: linear-gradient(155deg, rgba(49, 46, 129, 0.4), rgba(26, 11, 46, 0.88)); } .home-discord-card h3 { margin: 0.55rem 0 0.4rem; font-size: 1.12rem; color: var(--neon-text); } .home-discord-card p { margin: 0; color: var(--neon-muted); line-height: 1.5; } .home-discord-card__icon { font-size: 1.45rem; color: var(--neon-accent); } .pricing-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.2rem; align-items: stretch; } .pricing-trio .pricing-card { width: 100%; } .pricing-card--soon { border-style: dashed; border-color: rgba(139, 92, 246, 0.4); background: linear-gradient(150deg, rgba(26, 11, 46, 0.7) 0%, rgba(30, 27, 75, 0.5) 100%); opacity: 0.92; } .home-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .home-sky__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 30%, #000 14%, transparent 74%); animation: home-sky-drift 90s linear infinite; } .home-sky__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(6, 182, 212, 0.16); animation: home-orbit-spin 80s linear infinite; } .home-sky__ring--a { width: 42vw; height: 42vw; left: -8vw; top: 12vh; animation-duration: 96s; } .home-sky__ring--b { width: 28vw; height: 28vw; right: -6vw; top: 38vh; border-color: rgba(139, 92, 246, 0.18); animation-duration: 70s; animation-direction: reverse; } .home-sky__ring--c { width: 18vw; height: 18vw; left: 58vw; bottom: 8vh; border-style: solid; border-color: rgba(6, 182, 212, 0.1); animation-duration: 54s; } .home-sky__ring--d { width: 62vw; height: 62vw; left: 22vw; top: 46vh; border-color: rgba(139, 92, 246, 0.1); animation-duration: 118s; } .home-sky__star { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: var(--neon-accent); box-shadow: 0 0 10px rgba(6, 182, 212, 0.65); opacity: 0.45; animation: home-sky-twinkle 6s ease-in-out infinite; animation-delay: var(--delay, 0s); } .home-sky__star--dim { width: 3px; height: 3px; background: var(--neon-glow); box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); opacity: 0.32; } @keyframes home-sky-twinkle { 0%, 100% { opacity: 0.22; transform: scale(0.85); } 50% { opacity: 0.7; transform: scale(1.15); } } @keyframes home-sky-drift { to { background-position: 44px 44px; } } @keyframes home-sky-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes home-discord-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(6, 182, 212, 0.2); } 50% { box-shadow: 0 0 28px rgba(6, 182, 212, 0.48); } } html:has(.home-page) .page::before { content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 16% 18%, rgba(6, 182, 212, 0.08), transparent 30%), radial-gradient(circle at 86% 72%, rgba(139, 92, 246, 0.09), transparent 34%); animation: home-sky-glow 22s ease-in-out infinite; } html:has(.home-page) .site-footer { display: grid !important; visibility: visible !important; opacity: 1; position: relative; z-index: 2; flex-shrink: 0; margin-top: auto; } html:has(.home-page) .page-body { position: relative; z-index: 1; } html:has(.home-page) .home-page { position: relative; z-index: 1; } @media (max-width: 1100px) { .pricing-trio, .home-discord-grid { grid-template-columns: 1fr; } .home-tool-card--featured .home-tool-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @keyframes home-orbit-spin { to { transform: rotate(360deg); } } @media (max-width: 1100px) { .home-tool-card, .home-tool-card--featured { grid-column: span 6; } } @media (max-width: 700px) { .home-orbit { min-height: 16rem; } .home-tool-card, .home-tool-card--featured { grid-column: span 12; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .home-sky__grid, .home-sky__ring, .home-sky__star, .home-orbit__ring, .home-orbit__node--discord, .home-tool-card, html:has(.home-page) .page::before { animation: none; } } [data-ab-slot] { display: none; } [data-ab-slot].ab-active { display: inline; } div[data-ab-slot].ab-active { display: block; } .hero-proof-card { border-radius: 16px; padding: 1rem; border: 1px solid rgba(6, 182, 212, 0.2); background: linear-gradient(150deg, rgba(49, 46, 129, 0.6) 0%, rgba(26, 11, 46, 0.82) 100%); } .hero-proof-card h2 { font-size: 1.1rem; margin-bottom: 0.75rem; } .proof-list { margin: 0 0 1rem 0; padding-left: 1.1rem; } .proof-list li { margin-bottom: 0.45rem; color: var(--neon-muted); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .feature-card p { color: var(--neon-muted); } .member-tools-hub { margin-top: 0.75rem; } .member-tools-context { margin-bottom: 0.25rem; } .member-tools-context__stats { margin-top: 0; } .member-tools-section { display: grid; gap: 0.85rem; } .member-tools-section__header h2 { margin: 0.2rem 0 0.35rem; font-size: 1.25rem; color: var(--neon-text); } .member-tools-section__header .hero-caption { margin: 0; max-width: 42rem; } .member-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .member-tool-card { position: relative; display: flex; flex-direction: column; gap: 0.55rem; height: 8.5rem; overflow: hidden; padding: 1.1rem 1.15rem 1rem; border-radius: 16px; border: 1px solid var(--neon-panel-border); background: linear-gradient(150deg, rgba(49, 46, 129, 0.45) 0%, rgba(26, 11, 46, 0.85) 100%); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); animation: neon-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } a.member-tool-card:focus-visible, button.member-tool-card:focus-visible { outline: 2px solid var(--neon-accent); outline-offset: 2px; } button.member-tool-card { width: 100%; appearance: none; -webkit-appearance: none; } .member-tools-grid .member-tool-card:nth-child(2) { animation-delay: 0.05s; } .member-tools-grid .member-tool-card:nth-child(3) { animation-delay: 0.1s; } .member-tools-grid .member-tool-card:nth-child(4) { animation-delay: 0.15s; } .member-tools-grid .member-tool-card:nth-child(5) { animation-delay: 0.2s; } .member-tool-card:hover { border-color: rgba(6, 182, 212, 0.35); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.12), 0 0 18px rgba(6, 182, 212, 0.12); transform: translateY(-2px); } .member-tool-card.is-disabled { opacity: 0.62; cursor: not-allowed; pointer-events: none; } .member-tool-card.is-busy { cursor: wait; } .member-tool-card.is-in-development { padding-bottom: 2.35rem; border-color: rgba(148, 163, 184, 0.28); background: linear-gradient(150deg, rgba(30, 41, 59, 0.32) 0%, rgba(14, 8, 27, 0.94) 100%); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.05); filter: grayscale(0.72); opacity: 0.72; cursor: pointer; } .member-tool-card.is-in-development:hover { border-color: rgba(148, 163, 184, 0.38); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08), 0 0 18px rgba(148, 163, 184, 0.12); transform: translateY(-2px); } .member-tool-card.is-in-development::after { position: absolute; right: 0; bottom: 0; left: 0; padding: 0.45rem 0.8rem; border-top: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0 0 15px 15px; background: rgba(71, 85, 105, 0.25); color: #cbd5e1; content: "En développement"; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; pointer-events: none; text-align: center; text-transform: uppercase; } .member-tool-card.is-in-development .member-tool-card__desc { -webkit-line-clamp: 1; } .member-tool-card.is-disabled:hover { transform: none; border-color: var(--neon-panel-border); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08); } .member-tool-card__top { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; min-height: 1.4rem; } .member-tool-card__cat { color: var(--neon-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .member-tool-card__badge { flex-shrink: 0; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; border: 1px solid rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.12); color: var(--neon-accent); } .member-tool-card__badge--ready { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); color: #86efac; } .member-tool-card__badge--live { border-color: rgba(6, 182, 212, 0.55); background: rgba(6, 182, 212, 0.16); color: #a5f3fc; } .member-tool-card__badge--warn { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.12); color: #fde68a; } .member-tool-card__badge--muted { border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.1); color: var(--neon-muted); } .member-tool-card__title { margin: 0; color: var(--neon-text); font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .member-tool-card__heading { display: flex; align-items: center; gap: 0.7rem; } .member-tool-card__icon { width: 2.7rem; height: 2.7rem; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 0.45rem rgba(6, 182, 212, 0.2)); } .member-tool-card__quick-action:focus-visible { outline: 2px solid var(--neon-accent); outline-offset: -2px; } .member-tool-card__top-quick-action { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1; display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 50%; background: rgba(6, 182, 212, 0.1); color: var(--neon-accent); font-size: 1.05rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .member-tool-card__top-quick-action:hover { border-color: color-mix(in srgb, var(--neon-accent) 45%, transparent); background: color-mix(in srgb, var(--neon-accent) 12%, transparent); transform: scale(1.08); } .member-tool-card__top-quick-action:focus-visible { outline: 2px solid var(--neon-accent); outline-offset: -2px; } .member-tool-card-wrapper { position: relative; } .member-tool-card__quick-action { position: absolute; right: 0.45rem; bottom: 0.35rem; top: auto; z-index: 1; display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 50%; background: rgba(6, 182, 212, 0.1); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .member-tool-card__quick-action img { width: 2.25rem; height: 2.25rem; object-fit: contain; } .member-tool-card__quick-action--guild-report { width: 2.35rem; height: 2.35rem; } .member-tool-card__quick-action--guild-report img { width: 1.7rem; height: 1.7rem; } .member-tool-card__quick-action:hover { border-color: var(--neon-accent); background: rgba(6, 182, 212, 0.2); transform: scale(1.06); } .member-tool-card__desc { margin: 0; flex: 1 1 auto; color: var(--neon-muted); font-size: 0.86rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .member-tool-card__status { display: grid; gap: 0.65rem; } .member-tool-card__footer { display: flex; align-items: center; justify-content: flex-start; margin-top: auto; padding-top: 0.35rem; } @media (prefers-reduced-motion: reduce) { .member-tool-card { animation: none; transition: none; } .member-tool-card:hover { transform: none; } } /* === /tools — version épurée ============================================ */ .tools-page { display: grid; gap: 1rem; padding-top: 0.5rem; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; } .tool-tile { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-height: 7.5rem; padding: 0.95rem 1rem 0.9rem; border-radius: 14px; border: 1px solid var(--neon-panel-border); background: linear-gradient(150deg, rgba(49, 46, 129, 0.4) 0%, rgba(26, 11, 46, 0.82) 100%); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.07); transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); animation: neon-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .tools-grid .tool-tile:nth-child(2) { animation-delay: 0.04s; } .tools-grid .tool-tile:nth-child(3) { animation-delay: 0.08s; } .tools-grid .tool-tile:nth-child(4) { animation-delay: 0.12s; } .tools-grid .tool-tile:nth-child(5) { animation-delay: 0.16s; } .tools-grid .tool-tile:nth-child(6) { animation-delay: 0.2s; } .tool-tile:hover { border-color: rgba(6, 182, 212, 0.32); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.12), 0 0 16px rgba(6, 182, 212, 0.1); transform: translateY(-2px); } .tool-tile.is-disabled { opacity: 0.55; } .tool-tile.is-disabled:hover { transform: none; border-color: var(--neon-panel-border); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.07); } .tool-tile__dot { position: absolute; top: 0.85rem; right: 0.95rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--neon-muted); box-shadow: 0 0 6px currentColor; } .tool-tile__dot--ready { background: #22c55e; color: rgba(34, 197, 94, 0.6); } .tool-tile__dot--live { background: #06b6d4; color: rgba(6, 182, 212, 0.7); } .tool-tile__dot--warn { background: #fbbf24; color: rgba(251, 191, 36, 0.6); } .tool-tile__dot--muted { background: var(--neon-muted); color: transparent; box-shadow: none; } .tool-tile__title { margin: 0; color: #eaf2ff; font-size: 1rem; font-weight: 700; line-height: 1.3; } .tool-tile__status { display: grid; gap: 0.5rem; } .tool-tile__footer { display: flex; align-items: center; margin-top: auto; padding-top: 0.25rem; } @media (prefers-reduced-motion: reduce) { .tool-tile { animation: none; transition: none; } .tool-tile:hover { transform: none; } } /* Profil membre */ .tools-profile { display: grid; gap: 1rem; } .tools-profile__meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--neon-muted); font-size: 0.85rem; } .tools-profile__share { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .tools-profile__sharing-card { display: grid; gap: 0.7rem; padding: 1rem; border: 1px solid var(--neon-panel-border); border-radius: 0.75rem; background: var(--neon-panel-bg); box-shadow: var(--neon-panel-shadow); } .tools-profile__sharing-card-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .tools-profile__sharing-card-head h2 { margin: 0; color: var(--neon-text); } .tools-profile__sharing-card-head p { margin: 0.3rem 0 0; color: var(--neon-muted); font-size: 0.9rem; } .tools-profile__sharing-locked { margin: 0; padding: 0.7rem 0.85rem; color: var(--neon-muted); border-left: 3px solid var(--neon-accent); background: var(--neon-surface-alt); } .tools-profile__sharing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .tools-profile__sharing-toolbar > span { margin-right: auto; color: var(--neon-muted); font-size: 0.85rem; font-weight: 600; } .tools-profile__sharing-scroll { overflow-x: auto; padding-bottom: 0.2rem; } .tools-profile__sharing { display: grid; grid-template-columns: repeat(5, minmax(11rem, 1fr)); gap: 0.5rem; min-width: 57rem; } .tools-profile__sharing-field { display: grid; gap: 0.25rem; } .tools-profile__sharing-field > label { font-size: 0.8rem; font-weight: 600; white-space: nowrap; } @media (max-width: 680px) { .tools-profile__sharing-card { padding: 0.8rem; } .tools-profile__sharing-card-head { align-items: stretch; } .tools-profile__sharing-toolbar > span { width: 100%; } } .tools-profile__history { display: grid; gap: 0.6rem; } .conversion-benefit-card h2 { font-size: 1.2rem; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-top: 0.75rem; } .step-card { border-radius: 16px; padding: 1rem; border: 1px solid rgba(6, 182, 212, 0.2); background: rgba(26, 11, 46, 0.72); } .step-index { margin: 0; font-weight: 700; color: var(--neon-accent); } .step-card h3 { margin-top: 0.35rem; font-size: 1.05rem; } .step-card p { margin-bottom: 0; color: var(--neon-muted); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; } .proof-mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; } .testimonial-card { border-radius: 14px; padding: 0.95rem; border: 1px solid rgba(139, 92, 246, 0.28); background: rgba(26, 11, 46, 0.7); } .testimonial-quote { margin: 0; color: #eef4ff; } .testimonial-author { margin: 0.55rem 0 0; color: var(--neon-muted); font-size: 0.9rem; } .trust-badges { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.95rem; } .trust-badge { padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid rgba(6, 182, 212, 0.3); background: rgba(49, 46, 129, 0.4); color: #e8f6ff; font-size: 0.85rem; } .faq-list { margin-top: 0.8rem; display: grid; gap: 0.6rem; } .faq-list details { border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.26); background: rgba(30, 27, 75, 0.4); padding: 0.75rem 0.85rem; } .faq-list summary { cursor: pointer; font-weight: 600; } .faq-list p { margin: 0.65rem 0 0; color: var(--neon-muted); } .lead-form { margin-top: 0.85rem; display: grid; gap: 0.75rem; max-width: 34rem; } .stats-section { margin-top: 1rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; } .stat-card { padding: 0.9rem; border-radius: 14px; border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(26, 11, 46, 0.65); } .stat-value { margin: 0; font-size: 1.35rem; font-weight: 700; color: #eff4ff; } .stat-label { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--neon-muted); } .hero-support-copy { max-width: 55rem; color: var(--neon-muted); } .bootstrap-callout, .helper-card code { display: block; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(150deg, rgba(30, 27, 75, 0.92) 0%, rgba(26, 11, 46, 0.96) 100%); border: 1px solid rgba(6, 182, 212, 0.18); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.1); color: #e9f8ff; white-space: pre-wrap; overflow-wrap: anywhere; } .bootstrap-label { display: inline-block; margin-bottom: 0.65rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neon-accent); } .helper-card { margin-top: 1rem; } .form-control { background: rgba(45, 27, 78, 0.52); color: var(--neon-text); border-color: rgba(139, 92, 246, 0.3); } .form-control:focus { background: rgba(49, 46, 129, 0.65); color: var(--neon-text); border-color: rgba(6, 182, 212, 0.4); } .form-control.app-date-input { color-scheme: dark; } .form-control.app-date-input::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(1) brightness(1.25); opacity: 0.85; } .form-control:disabled, .form-control:read-only, .form-control.app-readonly-text-input { background: rgba(45, 27, 78, 0.52); color: var(--neon-text); border-color: rgba(139, 92, 246, 0.3); opacity: 1; } .form-control.app-readonly-text-input { cursor: text; } .app-readonly-input-group .app-readonly-copy-btn { white-space: nowrap; } .app-password-input .app-password-toggle { min-width: 3rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.75rem; } .app-password-input .app-password-icon { width: 1rem; height: 1rem; display: block; flex: 0 0 auto; } .form-label { color: #dfe7ff; } .feature-grid .feature-card:nth-child(2n) { background: var(--neon-card-bg); } .feature-grid .feature-card:nth-child(3n) { background: linear-gradient(150deg, #24123f 0%, #1a0b2e 100%); } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #ff7b7b; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .lead-form .btn { width: 100%; } } /* Homepage refonte - vitrine conversion */ .screenshot-placeholder { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; border-radius: 16px; border: 2px dashed #ef4444; background: repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.14) 0, rgba(239, 68, 68, 0.14) 12px, rgba(239, 68, 68, 0.04) 12px, rgba(239, 68, 68, 0.04) 24px); color: #1a0303; overflow: hidden; } .screenshot-placeholder__tag { padding: 0.35rem 0.8rem; border-radius: 999px; background: #7f1d1d; color: #ffffff; font-weight: 700; font-size: 0.85rem; text-align: center; } .screenshot-placeholder__caption { position: absolute; bottom: 0.6rem; left: 0; right: 0; text-align: center; font-size: 0.72rem; color: #ffffff; background: rgba(127, 29, 29, 0.85); padding: 0.2rem 0.5rem; border-radius: 6px; } .hero-shot { align-self: center; } .hero-proof-strip { display: flex; flex-wrap: wrap; gap: 0.75rem 1.6rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--neon-panel-border); } .hero-proof-strip span { position: relative; padding-left: 1.25rem; color: var(--neon-muted); font-size: 0.9rem; } .hero-proof-strip span::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--neon-accent); box-shadow: 0 0 8px rgba(6, 182, 212, 0.6); } .compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .compare-card { border-radius: 16px; padding: 1.1rem; border: 1px solid rgba(139, 92, 246, 0.22); background: rgba(26, 11, 46, 0.6); } .compare-card h3 { margin-top: 0; font-size: 1.05rem; } .compare-card ul { margin: 0.6rem 0 0; padding-left: 1.1rem; } .compare-card li { margin-bottom: 0.45rem; color: var(--neon-muted); } .compare-card--before { border-color: rgba(239, 68, 68, 0.3); } .compare-card--before h3 { color: #fda4af; } .compare-card--after { border-color: rgba(6, 182, 212, 0.35); } .compare-card--after h3 { color: var(--neon-accent); } .showcase-intro { margin-bottom: 1rem; } .showcase-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 1rem; padding: 1.5rem; border-radius: 20px; border: 1px solid var(--neon-panel-border); background: var(--neon-panel-bg); box-shadow: var(--neon-panel-shadow); } .showcase-row--reverse .showcase-copy { order: 2; } .showcase-row--reverse .showcase-media { order: 1; } .showcase-copy h3 { margin: 0.35rem 0 0.6rem; color: #f0f4ff; font-size: 1.3rem; } .showcase-points { margin: 1rem 0 0; padding-left: 0; list-style: none; } .showcase-points li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--neon-muted); } .showcase-points li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--neon-accent); font-weight: 700; } .proof-subtitle { margin-top: 1.4rem; font-size: 1.1rem; color: #f0f4ff; } .testimonial-card--placeholder { border-style: dashed; border-color: rgba(239, 68, 68, 0.4); } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; align-items: stretch; } .pricing-single { display: flex; flex-direction: column; align-items: center; max-width: 420px; margin: 1rem auto 0; } .pricing-single .pricing-card { width: 100%; } .pricing-single-cta { justify-content: center; margin-top: 1rem; } .payment-single-hero { margin-bottom: 1rem; } .activation-wizard-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.5rem; margin-top: 1rem; } .activation-wizard-steps { display: flex; flex-direction: column; gap: 0.75rem; } .activation-wizard-content { min-width: 0; } .activation-bot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .activation-checklist { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--neon-muted); } .step-card--active { border-color: var(--neon-accent); box-shadow: 0 0 12px var(--neon-glow); } .step-card--recommended { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 0 16px rgba(245, 158, 11, 0.22); } .activation-preset-badge { display: inline-block; margin-bottom: 0.65rem; } .step-card--done { opacity: 0.75; } .step-card--nav { display: block; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .step-card--nav:hover:not(.step-card--active) { border-color: rgba(6, 182, 212, 0.45); } .step-card--nav:focus-visible { outline: 2px solid var(--neon-accent); outline-offset: 2px; } @media (max-width: 768px) { .activation-wizard-grid { grid-template-columns: 1fr; } } .pricing-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; padding: 1.4rem; border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(26, 11, 46, 0.7); } .pricing-card--featured { border-color: rgba(6, 182, 212, 0.55); box-shadow: 0 0 18px rgba(6, 182, 212, 0.35); background: var(--neon-card-bg); } .pricing-card__badge { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.8rem; border-radius: 999px; background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-strong)); color: #0b1220; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .pricing-card__name { margin: 0; font-size: 1.3rem; color: #f0f4ff; } .pricing-card__tagline { margin: 0.3rem 0 0; color: var(--neon-muted); font-size: 0.9rem; } .pricing-card__price { margin: 1rem 0; display: flex; align-items: baseline; gap: 0.35rem; } .pricing-card__amount { font-size: 1.8rem; font-weight: 700; color: #fff; } .pricing-card__period { color: var(--neon-muted); font-size: 0.9rem; } .pricing-card__features { list-style: none; padding: 0; margin: 0 0 1.2rem; flex: 1; } .pricing-card__features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--neon-text); font-size: 0.92rem; } .pricing-card__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--neon-accent); font-weight: 700; } .pricing-card__cta { width: 100%; } .pricing-note { margin-top: 1rem; text-align: center; } .final-cta { text-align: center; } .final-cta .hero-actions { justify-content: center; } @media (max-width: 768px) { .showcase-row { grid-template-columns: 1fr; } .showcase-row--reverse .showcase-copy, .showcase-row--reverse .showcase-media { order: initial; } } /* Homepage refonte 2026 - landing vendeuse */ .pricing-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; align-items: stretch; } .pricing-duo .pricing-card { width: 100%; } .pricing-duo .pricing-card--featured { transform: translateY(-0.25rem); } @media (max-width: 768px) { .pricing-duo .pricing-card--featured { transform: none; } } .commands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; } .command-card { position: relative; border-radius: 16px; padding: 1.1rem 1.1rem 0.9rem; border: 1px solid var(--neon-panel-border); background: linear-gradient(150deg, rgba(49, 46, 129, 0.45) 0%, rgba(26, 11, 46, 0.85) 100%); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08); display: flex; flex-direction: column; gap: 0.55rem; } .command-card__cat { color: var(--neon-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .command-card__label { margin: 0; color: #eaf2ff; font-size: 0.95rem; line-height: 1.4; } .command-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; } .command-badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; border: 1px solid rgba(6, 182, 212, 0.45); background: #0a2a33; color: #bdeff5; } .command-badge--pro { border-color: rgba(139, 92, 246, 0.55); background: #1c1340; color: #e7dcff; } .roadmap-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 1rem; padding: 1.5rem; border-radius: 20px; border: 1px dashed rgba(139, 92, 246, 0.4); background: linear-gradient(150deg, rgba(26, 11, 46, 0.7) 0%, rgba(30, 27, 75, 0.55) 100%), repeating-linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0, rgba(139, 92, 246, 0.05) 14px, rgba(6, 182, 212, 0.04) 14px, rgba(6, 182, 212, 0.04) 28px); box-shadow: 0 0 24px rgba(139, 92, 246, 0.18); } .roadmap-card__badge { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; background: linear-gradient(90deg, var(--neon-accent-strong), var(--neon-glow)); color: #0b1220; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; } .roadmap-card h3 { margin: 0 0 0.5rem; color: #f0f4ff; font-size: 1.25rem; } .roadmap-card p { margin: 0; color: var(--neon-muted); max-width: 38rem; } .roadmap-card__visual { border-radius: 16px; border: 1px dashed rgba(139, 92, 246, 0.35); background: repeating-linear-gradient(45deg, rgba(139, 92, 246, 0.1) 0, rgba(139, 92, 246, 0.1) 12px, rgba(139, 92, 246, 0.03) 12px, rgba(139, 92, 246, 0.03) 24px); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; color: #7c3aed; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 768px) { .roadmap-card { grid-template-columns: 1fr; } } .stats-strip { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--neon-panel-border); background: rgba(26, 11, 46, 0.6); justify-content: center; } .stats-strip__item { display: flex; flex-direction: column; align-items: center; min-width: 7rem; } .stats-strip__value { font-size: 1.5rem; font-weight: 700; color: #eff4ff; line-height: 1.1; } .stats-strip__label { margin-top: 0.25rem; font-size: 0.8rem; color: var(--neon-muted); text-align: center; } /* Motion - stagger reveals, respect reduced motion */ @keyframes neon-rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } } .homepage-section, .showcase-row, .command-card, .member-tool-card, .pricing-duo .pricing-card, .roadmap-card { animation: neon-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .showcase-row:nth-child(2) { animation-delay: 0.05s; } .showcase-row:nth-child(3) { animation-delay: 0.1s; } .showcase-row:nth-child(4) { animation-delay: 0.15s; } .showcase-row:nth-child(5) { animation-delay: 0.2s; } .command-card:nth-child(2) { animation-delay: 0.05s; } .command-card:nth-child(3) { animation-delay: 0.1s; } .command-card:nth-child(4) { animation-delay: 0.15s; } .command-card:nth-child(5) { animation-delay: 0.2s; } .command-card:nth-child(6) { animation-delay: 0.25s; } @media (prefers-reduced-motion: reduce) { .homepage-section, .showcase-row, .command-card, .member-tool-card, .pricing-duo .pricing-card, .roadmap-card { animation: none; } } /* Player siege review — global fallback for the current Blazor host. */ .siege-review-page{display:grid;gap:1rem;padding-block:1rem 2rem}.siege-review-hero,.siege-review-controls,.siege-review-player{border:1px solid var(--neon-panel-border);border-radius:16px;background:var(--neon-panel-bg);box-shadow:var(--neon-panel-shadow)}.siege-review-hero{padding:clamp(1rem,2vw,1.5rem)}.siege-review-hero p,.siege-review-player__header p{margin:0;color:var(--neon-accent);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.siege-review-hero h1,.siege-review-player__header h2{margin:.25rem 0;color:var(--neon-text)}.siege-review-hero span{color:var(--neon-muted)}.siege-review-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.8rem;padding:.8rem}.siege-review-controls label{display:grid;gap:.3rem;color:var(--neon-muted);font-size:.75rem;font-weight:700}.siege-review-controls select{min-width:15rem;border:1px solid var(--neon-panel-border);border-radius:8px;padding:.5rem;background:var(--neon-surface-alt);color:var(--neon-text)}.siege-review-mode{display:flex;overflow:hidden;border:1px solid var(--neon-panel-border);border-radius:8px}.siege-review-mode button{border:0;padding:.5rem .7rem;background:var(--neon-surface-alt);color:var(--neon-muted)}.siege-review-mode button.is-active{background:color-mix(in srgb,var(--neon-accent) 22%,var(--neon-surface));color:var(--neon-text)} .siege-review-player{overflow:hidden}.siege-review-player__header{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--neon-panel-border)}.siege-review-player__header>div:last-child{display:grid;align-content:center;justify-items:end}.siege-review-player__header strong{color:var(--neon-text);font-size:1.25rem}.siege-review-player__header small{color:var(--neon-muted)}.siege-review-table-scroll{overflow-x:auto;overflow-y:hidden}.siege-review-table{width:100%;min-width:100%;border-collapse:collapse;table-layout:auto}.siege-review-col-index{width:2.5rem}.siege-review-col-attack,.siege-review-col-defense{width:12rem}.siege-review-col-info{width:5.5rem}.siege-review-col-duration{width:6.5rem}.siege-review-col-memo{width:clamp(10rem,14vw,17rem)}.siege-review-col-verdict{width:8.4rem}.siege-review-col-feedback{width:100%}.siege-review-table th,.siege-review-table td{padding:.45rem .5rem;border-bottom:1px solid color-mix(in srgb,var(--neon-panel-border) 70%,transparent);vertical-align:middle;text-align:left}.siege-review-table th{color:var(--neon-muted);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.siege-review-table th:not(:last-child),.siege-review-table td:not(:last-child){text-align:center}.siege-review-table td:not(:last-child) .siege-review-team,.siege-review-table td:not(:last-child) .siege-review-excerpt{text-align:center}.siege-review-table tr.is-empty{background:color-mix(in srgb,var(--neon-surface-alt) 55%,transparent)}.siege-review-not-played,.siege-review-sent{color:var(--neon-muted);font-style:italic}.siege-review-runage{color:var(--neon-text);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap} .siege-review-team,.siege-review-excerpt{border:0;padding:0;background:transparent;color:var(--neon-text);font:inherit;text-align:left}.siege-review-team{cursor:pointer}.siege-review-team:hover{filter:brightness(1.15)}.siege-review-monster-grid{display:grid;grid-template-columns:repeat(3,3.6rem);width:max-content;max-width:100%;gap:.08rem;min-width:0}.siege-review-monster-tile{display:grid;grid-template-rows:1rem 3.1rem 1fr;align-content:start;justify-items:center;gap:.14rem;box-sizing:border-box;min-width:0;min-height:5.6rem;padding:.15rem .25rem;border:1px solid color-mix(in srgb,var(--neon-panel-border) 72%,transparent);border-radius:7px;background:color-mix(in srgb,var(--neon-surface-alt) 74%,transparent);text-align:center}.siege-review-attack,.siege-review-defense{vertical-align:top!important}.siege-review-attack .siege-review-monster-tile{border-color:color-mix(in srgb,#47d16c 32%,var(--neon-panel-border));background:color-mix(in srgb,#47d16c 8%,var(--neon-surface-alt))}.siege-review-defense .siege-review-monster-tile{border-color:color-mix(in srgb,#ff6b7a 32%,var(--neon-panel-border));background:color-mix(in srgb,#c7254e 8%,var(--neon-surface-alt))}.siege-review-monster-portrait{position:relative;display:block;grid-row:2;width:3.1rem;height:3.1rem}.siege-review-monster-portrait>img{display:block;width:100%;height:100%;border-radius:6px;object-fit:cover;box-shadow:0 2px 8px color-mix(in srgb,#000 45%,transparent)}.siege-review-atb-tick{position:absolute;right:-.16rem;bottom:-.16rem;z-index:2;display:grid;width:1.55rem;height:1.55rem;place-items:center;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--siege-review-tick-color,var(--neon-accent)) 78%,var(--neon-panel-border));border-radius:999px;background:linear-gradient(145deg,color-mix(in srgb,var(--siege-review-tick-color,var(--neon-accent)) 70%,var(--neon-surface-alt)),color-mix(in srgb,var(--siege-review-tick-color,var(--neon-accent)) 42%,var(--neon-surface)));box-shadow:0 .12rem .42rem color-mix(in srgb,var(--siege-review-tick-color,var(--neon-accent)) 36%,transparent);color:var(--siege-review-tick-text,#dff9ff);font-size:.59rem;font-weight:900;line-height:1;text-shadow:0 1px 2px color-mix(in srgb,var(--neon-bg) 76%,transparent)}.siege-review-defense-grid{margin-top:1.14rem}.siege-review-defense-grid .siege-review-monster-tile{grid-template-rows:3.1rem;min-height:0;padding-block:.15rem}.siege-review-defense-grid .siege-review-monster-portrait{grid-row:1}.siege-review-equipment-state{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;min-width:0;align-items:center;gap:.12rem;box-sizing:border-box}.siege-review-equipment-state b{display:grid;min-width:0;height:1rem;place-items:center;border:1px solid var(--neon-panel-border);border-radius:3px;font-size:.52rem;font-weight:900;line-height:1}.siege-review-equipment-state .is-equipped{border-color:#47d16c;background:color-mix(in srgb,#47d16c 18%,var(--neon-surface));color:#84e89c}.siege-review-equipment-state .is-unrolled{border-color:#ff6b7a}.siege-review-equipment-state .is-missing{border-color:#ff6b7a;background:color-mix(in srgb,#c7254e 20%,var(--neon-surface));color:#ff9ba8}.siege-review-attack-unavailable{color:var(--neon-muted);font-size:.58rem;font-style:italic;line-height:1.1}.siege-review-attack-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;min-width:0;height:auto;align-items:center;gap:.12rem;box-sizing:border-box}.siege-review-attack-skill{position:relative;display:inline-flex;width:100%;min-width:0;aspect-ratio:1;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--neon-panel-border);border-radius:4px;background:var(--neon-surface-alt)}.siege-review-attack-skill img{display:block;width:100%;height:100%;object-fit:cover}.siege-review-attack-skill small{position:absolute;right:0;bottom:0;left:0;display:grid;width:100%;min-height:.55rem;place-items:center;padding:0;border-radius:0 0 3px 3px;background:color-mix(in srgb,var(--neon-surface) 76%,transparent);color:var(--neon-text);font-size:.42rem;font-weight:900;line-height:.55rem;white-space:nowrap}.siege-review-attack-skills.is-four-skills{grid-template-columns:repeat(4,minmax(0,1fr));gap:.1rem}.siege-review-attack-skills.is-four-skills .siege-review-attack-skill small{min-height:.47rem;font-size:.34rem;line-height:.47rem} .siege-review-excerpt{max-width:100%;overflow:hidden;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}.siege-review-excerpt:hover{color:var(--neon-accent);text-decoration:underline}.siege-review-final{display:grid;gap:.18rem;min-width:20rem}.siege-review-final .siege-review-sent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.siege-review-excerpt-wrap{display:block}.siege-review-text-popover{display:block;width:min(22rem,100%);max-height:11rem;margin-top:.45rem;overflow:auto;padding:.55rem .65rem;border:1px solid var(--neon-panel-border);border-radius:8px;background:var(--neon-surface-alt);color:var(--neon-text);font-size:.78rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--neon-panel-shadow)}.siege-review-player-memo{min-width:10rem;height:6.15rem;color:var(--neon-text);font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}.siege-review-player-memo:not(.is-empty) .siege-review-excerpt-wrap{height:100%}.siege-review-player-memo .siege-review-excerpt{display:-webkit-box;height:100%;white-space:normal;text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow-wrap:anywhere}.siege-review-player-memo.is-empty{place-items:center;color:var(--neon-muted);font-style:italic;text-align:center}.siege-review-verdict-cell{padding-block:.15rem!important}.siege-review-verdicts{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));width:100%;height:6.2rem;gap:.12rem}.siege-review-verdicts button{width:100%;min-height:0;box-sizing:border-box;border:1px solid var(--neon-panel-border);border-radius:5px;padding:.14rem .25rem;background:var(--neon-surface-alt);color:var(--neon-muted);font-size:.76rem;font-weight:750;line-height:1;white-space:nowrap}.siege-review-verdicts button:nth-child(1){color:var(--neon-accent)}.siege-review-verdicts button:nth-child(2){color:#47d16c}.siege-review-verdicts button:nth-child(3){color:#ffc857}.siege-review-verdicts button:nth-child(4){color:#ff8796}.siege-review-verdicts sup{margin-left:.02em;font-size:.62em;line-height:0;vertical-align:super}.siege-review-verdicts button.is-selected.is-safe{border-color:var(--neon-accent);background:color-mix(in srgb,var(--neon-accent) 20%,var(--neon-surface));color:var(--neon-accent)}.siege-review-verdicts button.is-selected.is-ok{border-color:#47d16c;background:color-mix(in srgb,#47d16c 20%,var(--neon-surface));color:#47d16c}.siege-review-verdicts button.is-selected.is-gamble{border-color:#ffc857;background:color-mix(in srgb,#ffc857 20%,var(--neon-surface));color:#ffc857}.siege-review-verdicts button.is-selected.is-forbidden{border-color:#c7254e;background:color-mix(in srgb,#c7254e 28%,var(--neon-surface));color:#ff8796}.siege-review-feedback{display:flex;min-width:22rem;width:100%;height:6.15rem}.siege-review-feedback textarea{width:100%;height:100%;min-width:0;resize:none;border:1px solid var(--neon-panel-border);border-radius:7px 0 0 7px;padding:.45rem .55rem;background:var(--neon-surface-alt);color:var(--neon-text);font:inherit;line-height:1.35}.siege-review-feedback button{border:1px solid var(--neon-panel-border);border-left:0;border-radius:0 7px 7px 0;background:var(--neon-surface);color:var(--neon-accent)}.siege-review-player__footer{display:flex;justify-content:flex-end;padding:.7rem 1rem}.siege-review-loading{display:flex;justify-content:center;padding:2rem}@media(max-width:680px){.siege-review-player__header{flex-direction:column}.siege-review-player__header>div:last-child{justify-items:start}.siege-review-controls select{min-width:unset;width:100%}.siege-review-controls label{flex:1 1 100%}.siege-review-table{min-width:74rem}} /* Monster portrait baseline. These rules deliberately live in the host stylesheet as well as in the component styles. A portrait must remain inside the size supplied by its consumer while a scoped stylesheet is refreshed by the development host. */ .app-monster-portrait { display:block; inline-size:100%; block-size:100%; max-inline-size:100%; max-block-size:100%; object-fit:cover; } .app-monster-portrait--collaboration { position:relative; overflow:hidden; border-radius:inherit; background:var(--neon-surface,#0a101a); } .app-monster-portrait--collaboration img { position:absolute; inset:0; display:block; inline-size:100%; block-size:100%; max-inline-size:100%; max-block-size:100%; border:0; border-radius:0; object-fit:cover; } .app-monster-team { --app-monster-team-portrait-size:2.75rem; display:inline-flex; align-items:center; gap:.3rem; min-width:0; } .app-monster-team__member { display:grid; flex:0 0 var(--app-monster-team-portrait-size); inline-size:var(--app-monster-team-portrait-size); block-size:var(--app-monster-team-portrait-size); min-inline-size:0; min-block-size:0; overflow:hidden; place-items:center; border:1px solid color-mix(in srgb,var(--neon-accent) 38%,var(--neon-surface)); border-radius:.5rem; background:var(--neon-surface); box-shadow:0 0 12px color-mix(in srgb,var(--neon-accent) 12%,transparent); } .app-monster-team--small { --app-monster-team-portrait-size:2.1rem; } .app-monster-team--large { --app-monster-team-portrait-size:3.5rem; } /* Portrait consumers that have a fixed tile, including the member tools. */ .siege-monster-row img { inline-size:43px; block-size:43px; max-inline-size:43px; max-block-size:43px; border:1px solid var(--neon-panel-border); border-radius:7px; object-fit:cover; } .opti-offense-monster { inline-size:50px; block-size:50px; max-inline-size:50px; max-block-size:50px; object-fit:contain; } .personal-tier-lists__monster { position:relative; display:grid; inline-size:3.1rem; block-size:3.1rem; padding:0; overflow:visible; } .personal-tier-lists__tier .personal-tier-lists__monster { inline-size:3.875rem; block-size:3.875rem; } .personal-tier-lists__monster .app-monster-portrait { overflow:hidden; border-radius:inherit; } .siege-tierlist-monster { inline-size:4.5rem; flex:0 0 4.5rem; min-inline-size:0; } .siege-tierlist-monster-portrait { position:relative; display:block; inline-size:100%; aspect-ratio:1; overflow:hidden; } .siege-tierlist-monster-art { position:absolute; inset:0; } .siege-tierlist-monster-popover-portrait { inline-size:2.9rem; block-size:2.9rem; overflow:hidden; } .siege-tierlist-summon-portrait { position:relative; display:block; inline-size:4.35rem; block-size:4.35rem; overflow:hidden; } /* Live offense suggestions retain their compact three-portrait rows. */ .opti-offense-table-scroll { overflow-x:auto; } .opti-offense-table { inline-size:100%; min-inline-size:920px; border-collapse:separate; border-spacing:0; table-layout:fixed; } .opti-offense-table th, .opti-offense-table td { min-inline-size:180px; padding:10px; vertical-align:top; } .opti-offense-defense { display:grid; block-size:88px; place-items:center; gap:7px; padding:6px; } .opti-offense-monsters { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; } .opti-offense-suggestion { display:grid; place-items:center; gap:7px; inline-size:100%; min-inline-size:0; block-size:88px; padding:6px; } .opti-offense-stats { white-space:nowrap; }