html,
body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    scrollbar-gutter: stable;
    font-size: 100%;
}

.atlas-app-loader {
    align-items: center;
    background: var(--rz-body-background-color, #eef1f6);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 1;
    position: fixed;
    transition: opacity 180ms ease;
    z-index: 10000;
}

html[data-atlas-theme="dark"] .atlas-app-loader {
    background: #121212;
}

html[data-atlas-theme="light"] .atlas-app-loader {
    background: #eef1f6;
}

.atlas-app-loader-hidden {
    opacity: 0;
    pointer-events: none;
}

.atlas-app-loader-logo {
    block-size: 5rem;
    inline-size: 5rem;
}

/* Le logo animé porte ses propres animations SMIL, qu'aucune règle CSS ne peut suspendre. Les deux
   images sont donc présentes et c'est l'affichage qui bascule sur la version fixe quand le système
   demande moins de mouvement. */
.atlas-logo-static {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .atlas-logo-motion {
        display: none;
    }

    .atlas-logo-static {
        display: block;
    }
}

.atlas-header-logo {
    block-size: 1.75rem;
    display: block;
    inline-size: 1.75rem;
}

/* Le chargeur applicatif : même logo que la marque, aux tailles utilisées par les pages et les
   fragments de page. */
.atlas-loader {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.atlas-loader-centered {
    display: flex;
    inline-size: 100%;
}

.atlas-loader-extrasmall .atlas-loader-logo { block-size: 1.25rem; inline-size: 1.25rem; }
.atlas-loader-small .atlas-loader-logo { block-size: 2rem; inline-size: 2rem; }
.atlas-loader-medium .atlas-loader-logo { block-size: 3rem; inline-size: 3rem; }
.atlas-loader-large .atlas-loader-logo { block-size: 5rem; inline-size: 5rem; }

.atlas-loader-label {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

:root {
    --atlas-appearance-control-scale: 1;
    --atlas-density-spacing-adjustment: 0rem;
    --atlas-density-control-adjustment: 0rem;
    /* L'ajustement vertical se cumule d'une ligne à l'autre, donc quelques dixièmes de rem se
       voient. Horizontalement il ne s'applique qu'une fois de chaque côté et se perdait dans la
       largeur de la page : la gouttière a besoin de sa propre amplitude, bien plus large. */
    --atlas-density-inline-adjustment: 0rem;
    --rz-card-padding: max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    --rz-dialog-content-padding: max(0rem, calc(1.5rem + var(--atlas-density-spacing-adjustment)));
    --rz-dropdown-item-padding: max(0rem, calc(0.75rem + var(--atlas-density-spacing-adjustment))) max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    --rz-grid-cell-padding: max(0rem, calc(0.25rem + var(--atlas-density-spacing-adjustment))) max(0.25rem, calc(0.5rem + var(--atlas-density-spacing-adjustment) * 3));
    --rz-grid-header-cell-padding: max(0rem, calc(0.25rem + var(--atlas-density-spacing-adjustment))) 0;
    --rz-input-padding-block-md: max(0rem, calc(0.4375rem + var(--atlas-density-spacing-adjustment)));
    --rz-input-padding-inline-md: max(0rem, calc(0.9375rem + var(--atlas-density-spacing-adjustment)));
    --rz-input-size-md: max(1.75rem, calc(2.5rem + var(--atlas-density-control-adjustment)));
    --rz-panel-menu-item-padding-block: max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    --rz-panel-menu-item-padding-inline: max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    --rz-tabs-padding: max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    --rz-tabs-tab-padding-block: max(0rem, calc(0.25rem + var(--atlas-density-spacing-adjustment)));
    /* Le titre d'onglet garde un plancher : à densité 1 l'ancienne base de 0.5rem tombait à
       0.3rem et le libellé touchait le bord de son bouton. */
    --rz-tabs-tab-padding-inline: max(0.75rem, calc(1rem + var(--atlas-density-spacing-adjustment) * 2));
    /* La bulle bleu vif de Radzen (--rz-info) tranche trop avec le reste de l'interface ; on la
       remplace par la surface des cartes, déjà adaptée aux deux thèmes, avec une bordure fine pour
       la détacher du fond. */
    --rz-tooltip-background-color: var(--rz-card-background-color);
    --rz-tooltip-color: var(--rz-text-color);
}

.rz-tooltip-content {
    border: 0.0625rem solid var(--rz-base-300);
}

/* Radzen draws a rotated square as an arrow, pinned 12px from the bubble's leading edge because it
   assumes the bubble is centred on its target. Atlas opens the tooltip at the pointer instead, so
   that arrow points at nothing, and the border above ran straight through it. The margins Radzen
   pairs with it only existed to leave room for it. */
.rz-tooltip-content:after {
    display: none;
}

.rz-top-tooltip-content {
    margin-bottom: 0;
}

.rz-bottom-tooltip-content {
    margin-top: 0;
}

.rz-left-tooltip-content {
    margin-right: 0;
}

.rz-right-tooltip-content {
    margin-left: 0;
}

/* Compact densities let the content span the window; airy ones keep a readable column. Without
   this the max-width cap froze the outer margin and the slider looked like it did nothing to the
   space around the content. */
html[data-atlas-density="1"] { --atlas-content-max-width: 100%; }
html[data-atlas-density="2"] { --atlas-content-max-width: 132rem; }
html[data-atlas-density="3"] { --atlas-content-max-width: 120rem; }
html[data-atlas-density="4"] { --atlas-content-max-width: 108rem; }
html[data-atlas-density="5"] { --atlas-content-max-width: 96rem; }
html[data-atlas-density="6"] { --atlas-content-max-width: 94rem; }
html[data-atlas-density="7"] { --atlas-content-max-width: 92rem; }
html[data-atlas-density="8"] { --atlas-content-max-width: 90rem; }
html[data-atlas-density="9"] { --atlas-content-max-width: 88rem; }
html[data-atlas-density="10"] { --atlas-content-max-width: 86rem; }

html[data-atlas-density="1"] { --atlas-density-spacing-adjustment: -0.2rem; --atlas-density-control-adjustment: -0.5rem; --atlas-density-inline-adjustment: -0.5rem; }
html[data-atlas-density="2"] { --atlas-density-spacing-adjustment: -0.15rem; --atlas-density-control-adjustment: -0.375rem; --atlas-density-inline-adjustment: -0.375rem; }
html[data-atlas-density="3"] { --atlas-density-spacing-adjustment: -0.1rem; --atlas-density-control-adjustment: -0.25rem; --atlas-density-inline-adjustment: -0.25rem; }
html[data-atlas-density="4"] { --atlas-density-spacing-adjustment: -0.05rem; --atlas-density-control-adjustment: -0.125rem; --atlas-density-inline-adjustment: -0.125rem; }
html[data-atlas-density="5"] { --atlas-density-spacing-adjustment: 0rem; --atlas-density-control-adjustment: 0rem; --atlas-density-inline-adjustment: 0rem; }
html[data-atlas-density="6"] { --atlas-density-spacing-adjustment: 0.05rem; --atlas-density-control-adjustment: 0.125rem; --atlas-density-inline-adjustment: 0.5rem; }
html[data-atlas-density="7"] { --atlas-density-spacing-adjustment: 0.1rem; --atlas-density-control-adjustment: 0.25rem; --atlas-density-inline-adjustment: 1rem; }
html[data-atlas-density="8"] { --atlas-density-spacing-adjustment: 0.15rem; --atlas-density-control-adjustment: 0.375rem; --atlas-density-inline-adjustment: 1.5rem; }
html[data-atlas-density="9"] { --atlas-density-spacing-adjustment: 0.2rem; --atlas-density-control-adjustment: 0.5rem; --atlas-density-inline-adjustment: 2rem; }
html[data-atlas-density="10"] { --atlas-density-spacing-adjustment: 0.25rem; --atlas-density-control-adjustment: 0.625rem; --atlas-density-inline-adjustment: 2.5rem; }

html[data-atlas-text-size="1"] { --atlas-appearance-control-scale: 1.333333; --rz-root-font-size: 75%; font-size: 75%; }
html[data-atlas-text-size="2"] { --atlas-appearance-control-scale: 1.230769; --rz-root-font-size: 81.25%; font-size: 81.25%; }
html[data-atlas-text-size="3"] { --atlas-appearance-control-scale: 1.142857; --rz-root-font-size: 87.5%; font-size: 87.5%; }
html[data-atlas-text-size="4"] { --atlas-appearance-control-scale: 1.066667; --rz-root-font-size: 93.75%; font-size: 93.75%; }
html[data-atlas-text-size="5"] { --atlas-appearance-control-scale: 1; --rz-root-font-size: 100%; font-size: 100%; }
html[data-atlas-text-size="6"] { --atlas-appearance-control-scale: 0.941176; --rz-root-font-size: 106.25%; font-size: 106.25%; }
html[data-atlas-text-size="7"] { --atlas-appearance-control-scale: 0.888889; --rz-root-font-size: 112.5%; font-size: 112.5%; }
html[data-atlas-text-size="8"] { --atlas-appearance-control-scale: 0.842105; --rz-root-font-size: 118.75%; font-size: 118.75%; }
html[data-atlas-text-size="9"] { --atlas-appearance-control-scale: 0.8; --rz-root-font-size: 125%; font-size: 125%; }
html[data-atlas-text-size="10"] { --atlas-appearance-control-scale: 0.761905; --rz-root-font-size: 131.25%; font-size: 131.25%; }

.rz-body {
    scrollbar-gutter: stable;
    /* Radzen fixe --rz-layout-body-padding à 1rem sur les quatre côtés, non relié à la densité : à
       densité minimale la gouttière gauche/droite restait donc pleine malgré .page-content réduit
       à côté. */
    padding-block: max(0rem, calc(1rem + var(--atlas-density-spacing-adjustment)));
    padding-inline: max(0.25rem, calc(1rem + var(--atlas-density-inline-adjustment)));
}

.rz-stack {
    gap: max(0rem, calc(var(--rz-gap) + var(--atlas-density-spacing-adjustment)));
}

.layout-root {
    min-height: 100vh;
}

html[data-atlas-theme="light"] body,
html[data-atlas-theme="light"] .layout-root,
html[data-atlas-theme="light"] .rz-body {
    background: #eef1f6;
}

html[data-atlas-theme="light"] .atlas-header {
    background: #ffffff;
}

/* Radzen paints the "light" button shade near-white so it reads on a dark surface. In the light
   theme that same shade lands on a white background and the control disappears: the appearance
   button in the header and "Ouvrir l'administration" in its menu both measured a 1.16 contrast
   ratio, which is invisible. Only the text and flat-transparent variants are corrected; the filled
   ones carry their own background and already contrast. */
html[data-atlas-theme="light"] .rz-button.rz-variant-text.rz-light,
html[data-atlas-theme="light"] .rz-button.rz-variant-text.rz-light .rz-button-text,
html[data-atlas-theme="light"] .rz-button.rz-variant-text.rz-light .rzi {
    color: var(--rz-text-color);
}

/* The sidebar icons sat at a 2.61 ratio against white, below the 3:1 floor for non-text glyphs. */
html[data-atlas-theme="light"] .rz-navigation-item-icon {
    color: var(--rz-text-secondary-color, #5a6472);
}

/* A filled alert paints its own on-colour, but a RadzenText nested inside it re-applies the body
   colour and wins. On the danger alert that put dark grey on saturated red (2.73 ratio) in the
   light theme. Inheriting keeps whatever the alert decided for its own surface. */
.rz-alert .rz-text-body1,
.rz-alert .rz-text-body2,
.rz-alert .rz-text-h5,
.rz-alert .rz-text-h6 {
    color: inherit;
}

html[data-atlas-theme="light"] .atlas-header .rz-sidebar-toggle {
    color: var(--rz-text-color);
}

html[data-atlas-theme="light"] .atlas-sidebar {
    background: #f8f9fc;
}

html[data-atlas-theme="light"] .rz-card,
html[data-atlas-theme="light"] .rz-data-grid,
html[data-atlas-theme="light"] .rz-fieldset {
    background: #ffffff;
}

html[data-atlas-theme="light"] .rz-data-grid {
    border-color: #d9dee8;
    box-shadow: 0 0.25rem 1rem rgba(40, 53, 82, 0.06);
}

html[data-atlas-theme="light"] .rz-grid-table > thead > tr > th,
html[data-atlas-theme="light"] .rz-grid-table > tfoot > tr > td {
    background: #f5f7fb;
}

html[data-atlas-theme="light"] .destination-details {
    background: #f4f6fa;
}

.atlas-header {
    border-bottom: 0.0625rem solid var(--rz-base-300);
    background: var(--rz-base-background-color);
}

.header-stack {
    min-height: calc(3.25rem + var(--atlas-density-control-adjustment));
    padding: 0 max(0rem, calc(0.625rem + var(--atlas-density-spacing-adjustment)));
}

.brand-link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 0.5rem;
    text-decoration: none;
}

.brand-title {
    margin: 0;
}

.appearance-menu-version {
    color: var(--rz-text-secondary-color);
}

.country-flag {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
    white-space: nowrap;
}

.country-flag-image {
    border: 0.0625rem solid color-mix(in srgb, var(--rz-text-color) 18%, transparent);
    border-radius: 0.125rem;
    display: block;
    height: 0.9rem;
    object-fit: cover;
    width: 1.2rem;
}

.country-flag-code {
    font-size: 0.75rem;
}

.airport-name-with-code,
.airport-option-name {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}

.airport-iata-code {
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    border: 0.0625rem solid color-mix(in srgb, var(--rz-primary) 38%, transparent);
    border-radius: 0.35rem;
    color: var(--rz-primary);
    display: inline-block;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 0.28rem 0.4rem;
}

.administration-upload {
    max-width: 28rem;
}

.destination-json {
    font-family: "Cascadia Code", Consolas, monospace;
}

.destination-warning {
    color: var(--rz-warning);
}

.destination-resolved {
    color: var(--rz-success);
}

.header-spacer {
    flex: 1 1 auto;
}

.atlas-sidebar {
    border-right: 0.0625rem solid var(--rz-base-300);
    transition: width 180ms ease;
}

.atlas-sidebar-backdrop {
    display: none;
}

.sidebar-expanded {
    width: 15rem;
}

/* Collapsed hides the sidebar outright instead of leaving a 4rem icon rail. Two of the entries are
   module logos rather than glyphs, so a rail showed pictures with no way to tell them apart, and it
   made "closed" mean two different things depending on the width. */
.sidebar-collapsed {
    border-right: 0;
    overflow: hidden;
    width: 0;
}

.page-content {
    /* The readable-width cap is what actually decides the gutter on a wide screen: measured at
       1900px, the content stayed 1536px wide with a ~180px margin on each side at BOTH density 1
       and density 10, because only the inner padding was density-aware and it ate into the content
       instead of reclaiming the margin. The cap therefore has to follow the density too. */
    max-width: var(--atlas-content-max-width, 96rem);
    margin: 0 auto;
    padding-block: max(0rem, calc(0.625rem + var(--atlas-density-spacing-adjustment)));
    padding-inline: max(0.25rem, calc(0.625rem + var(--atlas-density-inline-adjustment)));
}

.rz-card {
    padding: max(0rem, calc(0.625rem + var(--atlas-density-spacing-adjustment)));
}

.rz-fieldset-content {
    padding: max(0rem, calc(0.5rem + var(--atlas-density-spacing-adjustment)));
}

.page-content:has(.travel-grid-page) {
    block-size: calc(100dvh - 4.5rem);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.travel-grid-page {
    block-size: 100%;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
}

.travel-data-grid {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-block-size: 0;
}

.travel-data-grid .rz-data-grid-data {
    flex: 1 1 0;
    min-block-size: 0;
    overflow: auto;
}

.destination-grouped-grid .rz-group-header {
    display: none;
}

.destination-grouped-grid .destination-group-title {
    font-weight: 600;
}

.atlas-tabs .rz-tabview-panels,
.atlas-tabs .rz-tabview-panel {
    padding-inline: 0;
}

/* Règle de site, reprise d'Aetheus : un rail d'onglets est une ligne unique et stable. Quand les
   libellés ne tiennent plus, il défile au clavier et au doigt, jamais derrière une barre de
   défilement visible : une barre dessinée change la hauteur du rail entre deux rendus et fait
   sauter la mise en page. Le masquage vaut pour tous les onglets du site, à toutes les tailles
   d'écran, et aucune règle plus loin dans cette feuille ne doit la redessiner. */
.rz-tabview-nav,
.atlas-tabs .rz-tabview-nav {
    flex-wrap: nowrap;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.rz-tabview-nav::-webkit-scrollbar,
.atlas-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.atlas-tabs .rz-tabview-nav > li {
    flex: 0 0 auto;
    min-inline-size: max-content;
}

.atlas-tabs .rz-tabview-nav > li > button,
.atlas-tabs .rz-tabview-nav .rz-tabview-title {
    white-space: nowrap;
}

.travel-view-tabs {
    flex: 0 0 auto;
    min-block-size: 0;
}

.travel-view-tabs .rz-tabview-panels {
    display: none;
}

.page-content:has(.magic-catalog-tab-content) {
    block-size: calc(100dvh - 5.5rem);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.page-content:has(.magic-catalog-tab-content) .magic-survival-page {
    block-size: 100%;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
}

.page-content:has(.magic-catalog-tab-content) .magic-survival-tabs {
    flex: 1 1 0;
    min-block-size: 0;
    overflow: hidden;
}

.page-content:has(.magic-catalog-tab-content) .magic-survival-tabs .rz-tabview-panels {
    flex: 1 1 0;
    min-block-size: 0;
    overflow: hidden;
}

.page-content:has(.magic-catalog-tab-content) .magic-survival-tabs .rz-tabview-panel {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    padding-block: 0;
}

.home-module-card,
.travel-stat-card {
    height: 100%;
}

.home-hero-card {
    background:
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--rz-primary) 22%, transparent), transparent 35%),
        linear-gradient(125deg, color-mix(in srgb, var(--rz-primary) 10%, var(--rz-base-background-color)), var(--rz-base-background-color));
    border: 0.0625rem solid color-mix(in srgb, var(--rz-primary) 24%, var(--rz-base-300));
    overflow: hidden;
}

.home-hero-content {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-block-size: 5rem;
}

.home-hero-logo {
    block-size: 4.25rem;
    flex: 0 0 auto;
    inline-size: 4.25rem;
}

.home-hero-title,
.home-module-title {
    margin: 0;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-inline-start: auto;
}

.home-modules-grid {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 60rem) {
    .home-modules-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Menu tiles: a distinct low-opacity diagonal gradient per module, saturated on hover, never a
   lift or a shadow. The gradient tints the card, it never replaces its surface, and the module
   icon carries no background plate of its own so the gradient reads through it. */
.home-module-tile {
    align-items: center;
    background: var(--rz-base-background-color);
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 0.5rem);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    min-block-size: 11rem;
    padding: 1.5rem;
    position: relative;
    text-decoration: none;
}

.home-module-tile::before {
    background: var(--home-module-tile-gradient);
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
    transition: background 180ms ease;
}

.home-module-tile-icon,
.home-module-tile-title {
    position: relative;
}

.home-module-tile-wrapper {
    display: flex;
    position: relative;
}

.home-module-tile-wrapper > .home-module-tile {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.home-module-tile-voyages { --home-module-tile-gradient: linear-gradient(135deg, #2FC8D822 0%, #1A6FC222 100%); }
.home-module-tile-magic-survival { --home-module-tile-gradient: linear-gradient(135deg, #9B6BFF22 0%, #6A3DE822 100%); }
.home-module-tile-path-of-exile { --home-module-tile-gradient: linear-gradient(135deg, #FFB03B22 0%, #EE6A1222 100%); }

.home-module-tile-voyages:hover::before,
.home-module-tile-voyages:focus-visible::before { background: linear-gradient(135deg, #2FC8D888 0%, #1A6FC288 100%); }
.home-module-tile-magic-survival:hover::before,
.home-module-tile-magic-survival:focus-visible::before { background: linear-gradient(135deg, #9B6BFF88 0%, #6A3DE888 100%); }
.home-module-tile-path-of-exile:hover::before,
.home-module-tile-path-of-exile:focus-visible::before { background: linear-gradient(135deg, #FFB03B88 0%, #EE6A1288 100%); }

/* Saturated hover washes the pale icon out on the dark theme (measured ~11:1 down to ~3.5:1), so
   the dark theme uses a lighter wash that keeps every tile above 7:1. */
html[data-atlas-theme="dark"] .home-module-tile-voyages:hover::before,
html[data-atlas-theme="dark"] .home-module-tile-voyages:focus-visible::before { background: linear-gradient(135deg, #2FC8D847 0%, #1A6FC247 100%); }
html[data-atlas-theme="dark"] .home-module-tile-magic-survival:hover::before,
html[data-atlas-theme="dark"] .home-module-tile-magic-survival:focus-visible::before { background: linear-gradient(135deg, #9B6BFF47 0%, #6A3DE847 100%); }
html[data-atlas-theme="dark"] .home-module-tile-path-of-exile:hover::before,
html[data-atlas-theme="dark"] .home-module-tile-path-of-exile:focus-visible::before { background: linear-gradient(135deg, #FFB03B47 0%, #EE6A1247 100%); }

.home-module-tile-icon {
    align-items: center;
    color: var(--rz-primary);
    display: inline-flex;
    font-size: 2.5rem;
    height: 4rem;
    justify-content: center;
}

.home-module-tile-icon-image img {
    height: 2.5rem;
    object-fit: contain;
    width: 2.5rem;
}

.home-module-tile-title {
    font-size: clamp(0.8rem, 6cqw, 1.1rem);
    margin: 0;
    text-align: center;
}

.home-module-tile-favorite {
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    display: inline-flex;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    padding: 0.25rem;
    position: absolute;
}

.home-module-tile-favorite:hover,
.home-module-tile-favorite:focus-visible {
    color: #f5b301;
}

.home-module-tile-favorite-active {
    color: #f5b301;
}

/* Material Symbols is a variable font that renders every glyph outlined at its default FILL axis
   of 0, "star" included: the icon name alone never produces a solid star, only this axis does. */
.home-module-tile-favorite-active .rzi {
    font-variation-settings: "FILL" 1;
}

.home-module-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-card-icon {
    align-items: center;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-radius: 0.75rem;
    color: var(--rz-primary);
    display: inline-flex;
    font-size: 2rem;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.module-page-title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1.1;
    margin-block: 0;
}

.page-header {
    min-inline-size: 0;
}

.page-header-icon {
    color: var(--rz-primary);
    font-size: 1.5rem;
}

/* Same footprint as the glyph it replaces, so a module with a logo and one with an icon line their
   titles up. contain, not cover: a logo is not a thumbnail and must not be cropped. */
.page-header-logo {
    block-size: 1.75rem;
    flex: 0 0 auto;
    inline-size: 1.75rem;
    object-fit: contain;
}

.page-header-spacer {
    flex: 1 1 auto;
}

.page-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.form-control-width {
    width: 100%;
}

.operating-days {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    max-width: 18rem;
}

.rz-button .rz-button-text,
.rz-tabview-nav .rz-tabview-title {
    text-transform: none;
}

.rz-button {
    flex: 0 0 auto;
    inline-size: fit-content;
    max-inline-size: max-content;
    min-inline-size: 2.25rem;
}

.atlas-data-grid .rz-data-row,
.atlas-data-grid .rz-data-row > td {
    block-size: 2.75rem;
}

.atlas-data-grid .rz-data-row > td {
    vertical-align: middle;
}

.rz-column-title,
.rz-column-title-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atlas-data-grid .rz-grid-table > tfoot > tr,
.atlas-data-grid .rz-grid-table > tfoot > tr > td {
    block-size: 2.75rem;
}

.atlas-data-grid .rz-grid-table {
    display: flex;
    flex-direction: column;
}

.atlas-data-grid .rz-grid-table > colgroup {
    display: none;
}

.atlas-data-grid .rz-grid-table > thead,
.atlas-data-grid .rz-grid-table > tbody,
.atlas-data-grid .rz-grid-table > tfoot {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.atlas-data-grid .rz-grid-table > thead {
    order: 0;
}

.atlas-data-grid .rz-grid-table > tfoot {
    order: 1;
}

.atlas-data-grid .rz-grid-table > tbody {
    order: 2;
}

.atlas-data-grid .rz-grid-table > tfoot > tr > td {
    max-block-size: 2.75rem;
    overflow: hidden;
    vertical-align: middle;
}

.operating-days-inline {
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

.operating-days-inline label {
    align-items: center;
    display: inline-flex;
    font-size: 0.75rem;
    gap: 0.125rem;
}

.session-origin-selector {
    inline-size: min(20rem, 70vw);
}

.destination-toolbar-card {
    border: 0.0625rem solid var(--rz-base-300);
}

.destination-toolbar-origin {
    flex: 0 1 20rem;
}

.destination-toolbar-filter {
    flex: 1 1 22rem;
    min-inline-size: min(20rem, 100%);
}

.destination-country-filter {
    inline-size: 100%;
    min-inline-size: min(20rem, 60vw);
}

.destination-filter-option,
.destination-filter-continent-option {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.destination-filter-continent-option {
    color: var(--rz-primary);
    font-weight: 700;
    padding-block-start: 0.35rem;
}

.flight-selector-separator {
    border-top: 0.0625rem solid var(--rz-base-300);
    margin-block-start: 0.3rem;
    opacity: 1 !important;
    pointer-events: none;
}

.flight-selector-separator-content {
    color: var(--rz-text-secondary-color);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-block-start: 0.35rem;
    text-transform: uppercase;
}

.destination-import-button {
    margin-block-end: 0.05rem;
}

.selector-filter-highlight {
    background-color: var(--rz-warning-lighter, #fff3cd);
    border-radius: 0.125rem;
    color: inherit;
    font-weight: 700;
    padding-inline: 0.0625rem;
}

.destination-details {
    padding: 0.75rem;
}

.destination-detail-address {
    max-width: 42rem;
}

.destination-detail-grid {
    margin-top: 0.5rem;
}

.destination-hotel-editor {
    background: var(--rz-panel-background-color);
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: 0.75rem;
    overflow: hidden;
}

.destination-hotel-header {
    background: color-mix(in srgb, var(--rz-primary) 10%, var(--rz-panel-background-color));
    border-bottom: 0.0625rem solid var(--rz-base-300);
    padding: 0.65rem 0.75rem;
}

.destination-hotel-icon {
    align-items: center;
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    border-radius: 0.65rem;
    color: var(--rz-primary);
    display: inline-flex;
    font-size: 1.35rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.destination-hotel-fields {
    padding: 0.75rem;
}

.destination-field-label {
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}

.destination-hotel-results {
    border-top: 0.0625rem solid var(--rz-base-300);
    padding: 0.5rem 0.75rem 0;
}

.destination-detail-actions {
    border-top: 0.0625rem solid var(--rz-base-300);
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
}

.atlas-confirm-dialog .rz-dialog-content {
    max-inline-size: 30rem;
}

.atlas-confirm:focus,
.atlas-confirm:focus-visible {
    outline: none;
}

/* Hosts the Ctrl+Enter handler of the inline forms without taking part in the layout: a Radzen
   component does not forward an event handler to its root element, so the listener needs an element
   of our own, and display:contents keeps the page geometry exactly as it was. */
.inline-form-keys {
    display: contents;
}

.duration-editor {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.atlas-form-dialog .rz-dialog-content {
    max-inline-size: 34rem;
}

.atlas-dialog-form:focus,
.atlas-dialog-form:focus-visible {
    outline: none;
}

.atlas-dialog-actions {
    margin-block-start: 1rem;
}

.duration-editor-field {
    inline-size: 4.25rem;
}

.duration-editor-unit {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.airport-with-flag {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.magic-survival-tabs .rz-tabview-panels {
    background: transparent;
    min-inline-size: 0;
}

.magic-survival-page,
.magic-survival-tabs {
    min-inline-size: 0;
}

/* Fusions et Tier lists n'ont pas de grille pour défiler à leur place, et n'en ont pas besoin : le
   verrou de hauteur ne s'applique qu'aux onglets catalogue, donc ces deux onglets prennent leur
   hauteur de contenu et défilent avec le corps de page Radzen. */
.magic-survival-tab-content {
    padding-block: 0.75rem;
}

.magic-toolbar-card {
    border: 0.0625rem solid var(--rz-base-300);
}

/* Import outcome, reported in place under the button. A per-entry list cannot live in a toast:
   it floats away on a timer and can be neither scrolled nor re-read. */
.magic-config-report {
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: 0.375rem;
    margin-block-start: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.magic-config-report-success .magic-config-report-icon {
    color: var(--rz-success);
}

.magic-config-report-warning .magic-config-report-icon {
    color: var(--rz-warning);
}

.magic-config-report-error .magic-config-report-icon {
    color: var(--rz-danger);
}

.magic-config-report-title {
    margin: 0;
}

.magic-config-report-spacer {
    flex: 1 1 auto;
}

/* Capped and scrollable: a malformed file can reject hundreds of entries, and pushing the rest of
   the tab off screen would be its own readability problem. */
.magic-config-report-list {
    margin: 0;
    max-block-size: 18rem;
    overflow-y: auto;
    padding-inline-start: 1.25rem;
}

.magic-config-report-list li {
    margin-block: 0.125rem;
}

.magic-config-report-loading {
    margin-block-start: 0.5rem;
}

.magic-global-search-card {
    margin-block-end: 0.25rem;
}

.magic-global-search-input {
    flex: 1 1 20rem;
    min-inline-size: min(20rem, 100%);
}

.magic-search-counter {
    font-variant-numeric: tabular-nums;
    min-inline-size: 3rem;
    text-align: center;
}

.magic-search-highlight {
    background: color-mix(in srgb, var(--rz-warning) 55%, transparent);
    border-radius: 0.15rem;
    color: inherit;
    padding-inline: 0.05rem;
}

/* Match currently pointed to by prev/next or F3/Shift+F3, distinct enough from the plain highlight
   that the eye finds it immediately in a page full of <mark> spans. */
.magic-search-current {
    outline: 2px solid var(--rz-warning);
    outline-offset: 2px;
    border-radius: 0.3rem;
}

.magic-survivor-result {
    font-size: 0.9rem;
    margin-inline-start: auto;
    padding: 0.55rem 0.8rem;
}

.magic-fusion-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-block-start: 0.75rem;
}

/* A data-search-index anchor for the global search (item 5). Deliberately NOT display:contents: that
   would give it no box at all, and scrollIntoView/the .magic-search-current outline both need a real
   one. A plain block behaves the same as the card did as a direct flex item of .magic-fusion-grid. */
.magic-fusion-grid-item {
    display: block;
}

.magic-fusion-card {
    border: 0.0625rem solid var(--rz-base-300);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.magic-fusion-card:hover,
.magic-fusion-card:focus-visible {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--rz-primary) 25%, transparent);
    outline: none;
}

.magic-fusion-card-favorite {
    border-color: var(--rz-warning);
}

.magic-fusion-row {
    align-items: center;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    min-height: 5rem;
}

.magic-fusion-image {
    background: #080908;
    display: block;
    height: 5rem;
    object-fit: cover;
    width: 5rem;
}

.magic-fusion-content {
    min-width: 0;
    padding: 0.35rem 0.75rem;
}

.magic-fusion-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.magic-fusion-rank {
    font-size: 0.82rem;
    line-height: 1.15;
}

.magic-fusion-primary-skill,
.magic-fusion-secondary-skill {
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.magic-fusion-primary-skill {
    color: var(--rz-success);
}

.magic-fusion-secondary-skill {
    color: var(--rz-danger);
}

.magic-fusion-actions {
    margin-inline-end: 0.75rem;
}

.magic-fusion-actions .rz-button {
    justify-content: flex-start;
}

.magic-catalog-search {
    block-size: 2.25rem;
    inline-size: min(28rem, 100%);
}

/* Les onglets catalogue verrouillent au contraire la page à la hauteur de la fenêtre et délèguent
   le défilement à la zone de données de leur grille. */
.magic-catalog-tab-content {
    block-size: 100%;
    box-sizing: border-box;
    min-block-size: 0;
    overflow: hidden;
    padding-block: 0.75rem 0;
}

/* The three catalogue grids render every row (no virtualization: Radzen sizes its virtualized
   window from the measured container height, and inside this fixed-height flex chain that
   measurement came back as zero, so the grids showed no rows at all). The body therefore has to be
   the scrolling area itself, which needs this container to be a real flex column. */
.magic-catalog-grid {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
}

.magic-catalog-grid .rz-data-grid-data {
    block-size: auto;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    scrollbar-color: var(--rz-base-500) var(--rz-base-200);
    scrollbar-width: thin;
}

.magic-catalog-grid .rz-data-grid-data::-webkit-scrollbar {
    block-size: 0.55rem;
    inline-size: 0.55rem;
}

.magic-catalog-grid .rz-data-grid-data::-webkit-scrollbar-track {
    background: var(--rz-base-200);
}

.magic-catalog-grid .rz-data-grid-data::-webkit-scrollbar-thumb {
    background: var(--rz-base-500);
    border-radius: 999rem;
}

/* Une cellule de catalogue montre son contenu en entier. Radzen pose lui-même un
   `rz-text-truncate` (nowrap + ellipsis) sur chaque cellule et fige la table en `table-layout:
   fixed`, ce qui coupait un nom dès que sa colonne était plus étroite que lui. En layout `auto`
   chaque colonne se dimensionne sur son contenu, et le plancher en rem laisse à la dernière
   colonne (celle sans largeur déclarée) de quoi tenir sur une ligne au lieu d'être réduite à son
   mot le plus large. 72rem est la plus petite valeur qui y parvienne sur les trois grilles : en
   dessous, l'effet d'une synergie tombe à une soixantaine de pixels, la colonne « Objets requis »
   déclarée à 48% absorbant tout le reste. La table déborde alors du conteneur, qui défile
   horizontalement, barre visible comprise : rien n'est rogné ni masqué. Seule exception,
   `.magic-cell-clamped` plus bas.
   Un plancher en `max-content` serait plus juste mais dégénère ici : la contribution `max-content`
   d'une cellule à liens ignore le `max-inline-size` de son conteneur flex et somme tous les liens
   sur une ligne, ce qui étirait la table à un million de pixels. */
/* La grille des synergies porte cinq sous-colonnes d'objets sur une seule ligne, soit 42rem à elle
   seule. Sans un plancher plus haut, la colonne Effet tombait à 150px et son texte disparaissait
   sous l'ellipsis dès le premier mot. La table déborde et défile horizontalement, ce qui est le
   compromis assumé pour garder les cinq objets alignés. */
.magic-catalog-grid.magic-synergy-grid .rz-grid-table {
    min-inline-size: 92rem;
}

.magic-catalog-grid .rz-grid-table {
    min-inline-size: 72rem;
    table-layout: auto;
}

.magic-catalog-grid .rz-data-row > td,
.magic-catalog-grid .rz-data-row > td .rz-cell-data {
    max-block-size: none;
    overflow: visible;
    text-overflow: clip;
}

/* Les deux colonnes Effet (ascensions, synergies) portent une phrase entière : les laisser dicter
   la largeur de la table repousserait toutes les autres colonnes hors de l'écran. Elles sont donc
   les seules à rester bornées, avec l'ellipsis qui annonce la coupe ; l'infobulle porte le texte
   complet. */
.magic-catalog-grid .rz-data-row > td.magic-cell-clamped .rz-cell-data {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La colonne Effet ne déclare aucune largeur : c'est la seule dans ce cas, elle récupère donc tout
   ce que les autres n'ont pas réservé. Lui donner 100 % la ferait gagner contre le contenu des
   autres et les réduirait à zéro, images comprises : le plancher `min-inline-size` d'une cellule de
   tableau est ignoré par l'algorithme de mise en page, il ne les protège pas. */
.magic-catalog-grid .rz-data-row > td.magic-cell-clamped {
    overflow: hidden;
}

/* La colonne Effet prend tout ce que les autres n'utilisent pas, et les autres se réduisent à leur
   contenu. `inline-size: 1%` est la façon habituelle de le demander en `table-layout: auto` : une
   largeur déclarée plus petite que le contenu ramène la colonne à sa largeur minimale sans jamais
   l'écraser, là où un `100 %` sur la seule colonne Effet réduisait toutes les autres à zéro et
   faisait disparaître les images qu'elles portaient. */
.magic-catalog-grid th.magic-cell-tight,
.magic-catalog-grid .rz-data-row > td.magic-cell-tight {
    min-inline-size: max-content;
    white-space: nowrap;
}

/* Le contenu garde sa largeur lui aussi : les cellules du tableau sont en `overflow: visible`, si
   bien qu'un contenu trop large déborde au lieu de pousser sa colonne. Une largeur déclarée sur la
   cellule est alors prise au pied de la lettre et la colonne s'effondre à son seul remplissage,
   images comprises. C'est le contenu qui doit porter le plancher. */
.magic-catalog-grid .rz-data-row > td.magic-cell-tight .magic-catalog-name,
.magic-catalog-grid .rz-data-row > td.magic-cell-tight .magic-catalog-links {
    min-inline-size: max-content;
}

.magic-catalog-name {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-inline-size: 0;
}

.magic-cell-with-icon {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    max-inline-size: 100%;
    min-inline-size: 0;
}

.magic-cell-with-icon > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.magic-cell-icon {
    color: var(--rz-primary);
    flex: 0 0 auto;
    font-size: 1.2rem;
}

.magic-catalog-link {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    max-inline-size: 100%;
}

.magic-catalog-link img,
.magic-tier-entry-link img {
    background: #080908;
    border-radius: 0.3rem;
    flex: 0 0 auto;
    object-fit: cover;
}

.magic-catalog-link img {
    block-size: 2rem;
    inline-size: 2rem;
}

/* Un nom (ascension, objet, synergie, classe) tient sur une ligne mais n'est jamais coupé : la
   colonne s'élargit à sa mesure, la table déborde et le conteneur défile. */
.magic-catalog-name > span {
    white-space: nowrap;
}

.magic-catalog-icon,
.magic-catalog-icon-fallback {
    block-size: 2.5rem;
    border-radius: 0.4rem;
    flex: 0 0 2.5rem;
    inline-size: 2.5rem;
}

.magic-catalog-icon {
    background: #080908;
    object-fit: cover;
}

/* Les ascensions portent une illustration entière et non une icône : la recadrer la rendrait
   illisible à cette taille. */
.magic-ascension-image {
    object-fit: contain;
}

/* contain, not cover: these are full portraits, not square thumbnails, so cropping them to a square
   cut the head off most of them. The box keeps its footprint, the picture fits inside it. */
.magic-class-image {
    block-size: 2.5rem;
    border-radius: 0.4rem;
    flex: 0 0 2.5rem;
    inline-size: 2.5rem;
    object-fit: contain;
}

/* Les icônes de classe sont des silhouettes blanches sur fond transparent : mesurées, elles sont
   transparentes à 80 % et le reste est presque blanc. Elles disparaissaient donc entièrement sur le
   fond clair. Un médaillon sombre les rend au thème sombre pour lequel elles ont été dessinées,
   sans les modifier ni toucher au thème sombre, où le fond de la page suffit déjà. Les icônes de
   sujet ne sont pas concernées : elles sont colorées, pas monochromes. */
html[data-atlas-theme="light"] .magic-class-image {
    background: var(--rz-base-900, #1b1b1f);
    padding: 0.1rem;
}

/* La cellule Subject/Class affiche désormais 4 éléments (nom de classe, icône de classe, nom de
   sujet, icône de sujet) au lieu des 3 d'origine. Le calage en grille à 3 colonnes qui existait ici
   les faisait déborder sur une ligne implicite mal alignée avec le reste du tableau ; hériter du
   flex de .magic-catalog-name les aligne comme les autres colonnes iconographiées. */
.magic-class-name > span {
    flex: 0 1 auto;
}

.magic-subject-image {
    block-size: 2.5rem;
    border-radius: 0.4rem;
    flex: 0 0 2.5rem;
    inline-size: 2.5rem;
    object-fit: contain;
}

.magic-artifact-rarity-normal {
    color: var(--rz-text-color);
}

.magic-artifact-rarity-rare {
    color: #1ba9e3;
}

.magic-artifact-rarity-epic {
    color: #cd50ff;
}

.magic-artifact-rarity-special {
    color: #ff3c64;
}

.magic-artifact-rarity-legendary {
    color: #e3851b;
}

.magic-catalog-icon-fallback {
    align-items: center;
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    color: var(--rz-primary);
    display: inline-flex;
    font-size: 1.4rem;
    justify-content: center;
}

.magic-tier-entries {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

/* Les synergies d'un objet se rangent en grille de deux colonnes de largeur fixe. Empilées, elles
   dépassaient en hauteur pour rien ; enroulées, chaque ligne du tableau plaçait ses entrées à un
   endroit différent. Une grille de colonnes égales les fait tomber au même x d'une ligne à l'autre,
   comme des sous-colonnes. La troisième repart à gauche sous la première. */
.magic-catalog-links {
    display: grid;
    gap: 0.2rem 0.5rem;
    grid-template-columns: repeat(2, 12rem);
    justify-items: start;
}

/* Les objets d'une synergie tiennent sur une seule ligne, jusqu'à cinq (Magnum Opus et Gilgamesh en
   demandent cinq). Cinq colonnes de largeur égale, donc les entrées d'une ligne du tableau tombent
   exactement sous celles de la ligne précédente, comme des sous-colonnes ; une synergie qui n'en
   demande que trois laisse les deux dernières vides plutôt que de décaler les autres. */
/* Largeur fixe et non fractionnaire : une piste en `1fr` se mesure sur le contenu de sa propre
   ligne, si bien que la deuxième entrée tombait à un x différent à chaque ligne du tableau. Une
   largeur constante est ce qui en fait des sous-colonnes. */
.atlas-data-grid .magic-required-items {
    display: grid;
    gap: 0.2rem 0.5rem;
    grid-template-columns: repeat(3, 12.5rem);
    justify-items: start;
    max-inline-size: none;
}

.magic-required-items .magic-catalog-link,
.magic-required-items > span {
    block-size: 2rem;
    font-size: 0.85rem;
    gap: 0.35rem;
    line-height: 1.1rem;
}

.magic-required-items .magic-catalog-link img {
    block-size: 2rem;
    inline-size: 2rem;
}

.magic-catalog-links > span,
.magic-catalog-links > a,
.magic-tier-entries > a {
    white-space: nowrap;
}

.magic-tier-list-card,
.magic-fusion-details-card {
    border: 0.0625rem solid var(--rz-base-300);
    overflow: hidden;
}

.magic-tier-list-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.magic-tier-list-card {
    inline-size: 100%;
}

.magic-tier-list-icon {
    color: var(--rz-primary);
    font-size: 1.5rem;
}

.magic-tier-rows {
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: 0.5rem;
    overflow: hidden;
}

.magic-tier-row {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: 0.7rem;
}

.magic-tier-row + .magic-tier-row {
    border-top: 0.0625rem solid var(--rz-base-300);
}

/* Radzen rend le badge en inline-block : justify-content n'y faisait rien, la lettre restait
   collée au padding gauche et la hauteur minimale s'ajoutait sous la ligne de texte. En flex avec
   line-height 1, la lettre est centrée sur les deux axes quelle que soit la densité. */
.magic-tier-rank {
    align-items: center;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-block-size: 2rem;
    min-inline-size: 2.75rem;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    text-align: center;
}

.magic-tier-entry-link {
    align-items: center;
    background: color-mix(in srgb, var(--rz-base-200) 82%, transparent);
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: 999rem;
    color: var(--rz-text-color);
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    text-decoration: none;
}

.magic-tier-entry-link img {
    block-size: 1.5rem;
    inline-size: 1.5rem;
}

.magic-tier-entry-link .rzi,
.magic-tier-entry-link .material-symbols-outlined {
    font-size: 1.15rem;
}

.magic-tier-entry-link.magic-artifact-rarity-normal {
    color: var(--rz-text-color);
}

.magic-tier-entry-link.magic-artifact-rarity-rare {
    color: #1ba9e3;
}

.magic-tier-entry-link.magic-artifact-rarity-epic {
    color: #cd50ff;
}

.magic-tier-entry-link.magic-artifact-rarity-special {
    color: #ff3c64;
}

.magic-tier-entry-link.magic-artifact-rarity-legendary {
    color: #e3851b;
}

.magic-tier-entry-link:hover,
.magic-tier-entry-link:focus-visible {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.magic-tier-row-s {
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
}

.magic-tier-row-a {
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
}

/* La couleur suit le rang lui-même et non la ligne qui le porte, pour que le badge se comporte
   pareil dans les tier lists et dans la colonne Rang des trois tableaux. Les deux classes sont
   nécessaires : Radzen pose sa propre couleur via .rz-badge-primary, qu'un sélecteur à une seule
   classe ne bat pas. */
.magic-tier-rank.magic-tier-rank-s {
    background: var(--rz-warning);
    color: var(--rz-on-warning);
}

.magic-tier-rank.magic-tier-rank-a {
    background: var(--rz-success);
    color: var(--rz-on-success);
}

.magic-tier-rank.magic-tier-rank-b {
    background: var(--rz-info);
    color: var(--rz-on-info);
}

.magic-tier-rank.magic-tier-rank-c {
    background: var(--rz-base-500);
    color: var(--rz-base-50);
}

.magic-tier-rank.magic-tier-rank-d {
    background: var(--rz-base-400);
    color: var(--rz-base-50);
}

/* Un rang déduit d'une donnée du jeu se lit au premier coup d'œil comme n'étant pas un classement
   communautaire : la lettre garde sa couleur, le remplissage devient un contour. */
.magic-tier-rank.magic-tier-rank-derived {
    background: transparent;
    border: 0.125rem solid currentColor;
}

.magic-tier-rank.magic-tier-rank-derived.magic-tier-rank-s {
    color: var(--rz-warning);
}

.magic-tier-rank.magic-tier-rank-derived.magic-tier-rank-a {
    color: var(--rz-success);
}

.magic-tier-rank.magic-tier-rank-derived.magic-tier-rank-b {
    color: var(--rz-info);
}

.magic-tier-rank.magic-tier-rank-derived.magic-tier-rank-c,
.magic-tier-rank.magic-tier-rank-derived.magic-tier-rank-d {
    color: var(--rz-text-secondary-color);
}

.magic-fusion-details-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr);
}

.magic-fusion-details-image {
    background: #080908;
    display: block;
    inline-size: 100%;
    max-width: 100%;
    object-fit: cover;
}

.magic-fusion-details-content {
    min-width: 0;
}

.magic-fusion-description {
    line-height: 1.65;
}

.magic-offline-status {
    white-space: nowrap;
}

.appearance-menu-container {
    position: relative;
}

.appearance-menu-backdrop {
    background: transparent;
    border: 0;
    inset: 0;
    min-height: 0;
    min-width: 0;
    padding: 0;
    position: fixed;
    z-index: 999;
}

.appearance-menu-card {
    --atlas-density-control-adjustment: 0rem;
    --atlas-density-spacing-adjustment: 0rem;
    inline-size: min(24rem, calc(100vw - 1rem));
    padding: max(0rem, calc(0.75rem + var(--atlas-density-spacing-adjustment)));
    position: fixed;
    right: 0.5rem;
    top: 5.25rem;
    transform-origin: top right;
    zoom: var(--atlas-appearance-control-scale);
    z-index: 1000;
}

.appearance-menu-title {
    margin: 0;
}

.appearance-menu-title-icon,
.appearance-setting-icon,
.admin-section-icon {
    color: var(--rz-primary);
    font-size: 1.25rem;
}

.appearance-settings {
    --atlas-density-control-adjustment: 0rem;
    --atlas-density-spacing-adjustment: 0rem;
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: 0.5rem;
    padding: max(0rem, calc(0.5rem + var(--atlas-density-spacing-adjustment)));
    transform-origin: top left;
    zoom: var(--atlas-appearance-control-scale);
}

.appearance-menu-card .appearance-settings {
    zoom: 1;
}

.appearance-settings-compact {
    padding: max(0rem, calc(0.5rem + var(--atlas-density-spacing-adjustment)));
}

.appearance-setting-label {
    flex: 1 1 8rem;
    margin: 0;
}

.appearance-setting-row {
    align-items: center;
    display: grid !important;
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.appearance-setting-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: max(0rem, calc(0.375rem + var(--atlas-density-spacing-adjustment)));
    grid-column: 2;
    justify-content: flex-end;
}

.appearance-size-label {
    min-inline-size: 4.5rem;
    text-align: center;
}

.appearance-size-slider {
    flex: 1 1 12rem;
    grid-column: 2;
    inline-size: 100%;
    min-inline-size: min(12rem, 100%);
}

.administration-tabs .rz-tabview-panel {
    padding: 0.5rem 0;
}

/* ===== Écrans de réglage =====
   Onglets qui remplissent la page et dont c'est le contenu, et non la page entière, qui défile :
   un onglet plus haut que la fenêtre se coupait en bas. Les réglages sont ensuite posés dans des
   cartes de surface, chacune ouverte par un titre et une phrase d'explication, et les réglages
   unitaires dans des tuiles portant leur pictogramme. */
.page-content:has(.atlas-settings-shell) {
    block-size: calc(100dvh - 5.5rem);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.atlas-settings-page {
    block-size: 100%;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
}

.atlas-tabs-fill {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-block-size: 0;
}

.atlas-tabs-fill .rz-tabview-panels {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-block-size: 0;
}

.atlas-tabs-fill .rz-tabview-panel {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-block-size: 0;
}

.atlas-settings-shell {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 1rem;
    min-block-size: 0;
    overflow-y: auto;
    padding-inline-end: 0.25rem;
    scrollbar-color: var(--rz-base-500) var(--rz-base-200);
    scrollbar-width: thin;
}

/* Qualifié par .rz-card.rz-variant-filled : la feuille de thème Radzen est injectée après app.css,
   donc à spécificité égale c'est elle qui gagne. Il faut une classe de plus pour reprendre la main
   sur le fond et la bordure des cartes. */
.rz-card.rz-variant-filled.atlas-settings-card {
    border: 0.0625rem solid var(--rz-base-300);
    flex: 0 0 auto;
    inline-size: 100%;
}

.atlas-settings-content {
    inline-size: 100%;
}

.atlas-settings-hint {
    color: var(--rz-text-secondary-color);
    margin: 0;
}

/* La tuile se distingue de la carte qui la porte sans réintroduire une ombre : bordure discrète
   et fond très légèrement teinté. Le voile est tiré de la couleur du texte et non d'une nuance de
   base, sinon il vaut blanc sur blanc en thème clair et la tuile disparaît. */
.rz-card.rz-variant-filled.atlas-settings-tile {
    background: color-mix(in srgb, var(--rz-text-color) 5%, var(--rz-card-background-color, transparent));
    border: 0.0625rem solid var(--rz-base-300);
    box-shadow: none;
}

.atlas-settings-tile-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.atlas-settings-tile-icon {
    align-items: center;
    block-size: 2.75rem;
    border-radius: 0.875rem;
    display: flex;
    flex: 0 0 2.75rem;
    font-size: 1.25rem;
    inline-size: 2.75rem;
    justify-content: center;
}

.atlas-settings-tile-icon-primary {
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    color: var(--rz-primary);
}

.atlas-settings-tile-icon-secondary {
    background: color-mix(in srgb, var(--rz-info) 16%, transparent);
    color: var(--rz-info);
}

.atlas-settings-tile-text {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.atlas-settings-tile-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-inline-start: auto;
}

.atlas-settings-tile-slider {
    margin-block-start: 0.75rem;
}

/* Colonne : sans cette règle un bouton enfant s'étirerait sur toute la largeur du groupe. */
.atlas-settings-action-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.atlas-settings-action-group > .rz-button,
.atlas-settings-action-group > .administration-upload-button {
    align-self: flex-start;
}

.atlas-settings-action-group-divider {
    border-block-start: 0.0625rem solid var(--rz-base-300);
    padding-block-start: 1rem;
}

.administration-upload-button {
    align-items: center;
    background: var(--rz-light);
    border: 0.0625rem solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-color);
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    position: relative;
}

.administration-upload-button:focus-within,
.administration-upload-button:hover {
    border-color: var(--rz-primary);
}

.administration-upload {
    block-size: 100%;
    cursor: pointer;
    inset: 0;
    max-width: none;
    opacity: 0;
    position: absolute;
    width: 100%;
}

@media (max-width: 47.99rem) {
    .page-content {
        padding: 0.5rem;
    }

    .home-hero-content {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .home-hero-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-inline-start: 0;
    }

    .page-content:has(.travel-grid-page) {
        block-size: calc(100dvh - 4.25rem);
    }

    .page-content:has(.magic-catalog-tab-content) {
        block-size: calc(100dvh - 4.75rem);
    }

    .page-content:has(.magic-catalog-tab-content) .magic-survival-page {
        --rz-gap: 0.75rem;
    }

    .magic-survival-page .module-page-title {
        font-size: 1.75rem;
    }

    .magic-survival-tabs .rz-tabview-nav > li > button {
        padding-inline: 0.75rem;
    }

    .atlas-header {
        position: relative;
        z-index: 103;
    }

    .rz-sidebar.atlas-sidebar {
        bottom: 0;
        box-shadow: var(--rz-shadow-8);
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 3.5625rem;
        transition: transform 180ms ease;
        width: min(18rem, calc(100vw - 3rem));
        z-index: 102;
    }

    .rz-sidebar.atlas-sidebar.sidebar-expanded {
        transform: translateX(0);
        width: min(18rem, calc(100vw - 3rem));
    }

    .rz-sidebar.atlas-sidebar.sidebar-collapsed {
        transform: translateX(-100%);
        width: min(18rem, calc(100vw - 3rem));
    }

    .atlas-sidebar-backdrop {
        background: rgb(0 0 0 / 58%);
        border: 0;
        bottom: 0;
        cursor: pointer;
        display: block;
        left: min(18rem, calc(100vw - 3rem));
        margin: 0;
        min-height: 0;
        min-width: 0;
        padding: 0;
        position: fixed;
        right: 0;
        top: 3.5625rem;
        width: auto;
        z-index: 101;
    }

    .brand-title {
        display: none;
    }

    .destination-toolbar-filter,
    .destination-country-filter {
        min-inline-size: 100%;
    }

    .magic-fusion-row {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }

    .magic-fusion-image {
        height: 4.5rem;
        width: 4.5rem;
    }

    .magic-fusion-actions {
        margin-inline-end: 0.35rem;
    }

    .magic-fusion-actions .rz-button-text {
        display: none;
    }

    .magic-fusion-details-layout {
        grid-template-columns: 1fr;
    }

    .magic-tier-list-layout {
        grid-template-columns: 1fr;
    }

    .magic-survivor-result {
        margin-inline-start: 0;
    }

}
.atlas-offline-indicator {
    display: none;
}

.atlas-reconnect-modal {
    display: none !important;
}

:root[data-atlas-online="false"] .atlas-offline-indicator {
    color: var(--rz-danger);
    display: inline-flex;
    font-weight: 700;
}

:root[data-atlas-online="false"] .requires-online-navigation {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.42;
}


/* Path of Exile. The module runs offline, so nothing here depends on a font or an image loaded
   from elsewhere; the currency icons and the card illustrations are served by the front itself. */
.poe-page {
    width: 100%;
}

.poe-quick-calc-input {
    max-width: 22rem;
    width: 100%;
}

.poe-quick-calc-equals {
    font-weight: 700;
    margin: 0;
}

/* Two columns where there is room, one below: each section is a self-contained calculation and
   they never have to line up with one another. */
.poe-calculator-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.poe-calculator-section {
    height: 100%;
}

.poe-field {
    max-width: 11rem;
    width: 100%;
}

.poe-expression-field {
    width: 100%;
}

.poe-currency-icon {
    height: 1.5rem;
    width: 1.5rem;
}

.poe-result-label {
    font-weight: 600;
    margin: 0;
}

.poe-result-unit {
    margin: 0;
    opacity: 0.75;
}

.poe-copyable-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.poe-sync-badge {
    white-space: nowrap;
}

.poe-card-thumbnail {
    border-radius: 0.25rem;
    height: 1.75rem;
    object-fit: cover;
    width: 1.75rem;
}

.poe-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The patterns are pasted into the game verbatim, so they are shown in a fixed pitch face and
   never wrapped: a line break the user cannot see would be copied along with the rest. */
.poe-pattern-text {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.85em;
    white-space: nowrap;
}

.poe-card-illustration-image {
    border-radius: 0.5rem;
    max-width: 100%;
}

.poe-card-reward {
    margin: 0;
    text-align: center;
}

/* Destination detail panel, expanded from its grid row: an icon + label + value grid,
   matching the "essentials" layout used for equipment detail pages. */
.essentials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 2rem;
}

@media (max-width: 768px) {
    .essentials-grid {
        grid-template-columns: 1fr;
    }
}

.essential-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid var(--rz-base-300);
}

.essential-icon {
    font-size: 1.1rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.essential-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.essential-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.essential-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rz-text-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    word-break: break-word;
}

.destination-import-url {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.8rem;
    word-break: break-all;
    color: var(--rz-text-secondary-color);
}