:root {
    --bg-main: #f5f0e7;
    --bg-aurora: radial-gradient(1200px 700px at 10% -10%, rgba(73, 150, 187, 0.25), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(208, 162, 85, 0.28), transparent 58%), linear-gradient(180deg, #f6f2e9 0%, #ece5d8 100%);
    --surface-1: rgba(255, 251, 244, 0.88);
    --surface-2: #f0e8da;
    --text-main: #2f313f;
    --text-muted: #6d7288;
    --accent-gold: #d7ab59;
    --accent-gold-2: #be8a38;
    --stroke-soft: rgba(113, 90, 61, 0.22);
    --nav-bg: rgba(246, 242, 235, 0.86);
    --footer-bg: #1f273b;
    --shadow-soft: 0 12px 32px rgba(32, 28, 50, 0.10);
    --region-mondstadt: #4ea79f;
    --region-liyue: #dd9b2f;
    --region-inazuma: #8f72c8;
    --region-sumeru: #6aa047;
    --region-fontaine: #4d86be;
    --region-natlan: #d05f3c;
    --region-nordkrai: #8ca6c8;
    --card-hover-shadow: 0 20px 38px rgba(26, 21, 40, 0.18);
}

html[data-theme='dark'] {
    --bg-main: #0f1423;
    --bg-aurora: radial-gradient(1000px 700px at 15% -10%, rgba(67, 132, 191, 0.22), transparent 62%), radial-gradient(900px 600px at 90% 0%, rgba(198, 146, 62, 0.22), transparent 60%), linear-gradient(180deg, #0f1424 0%, #141a2f 100%);
    --surface-1: rgba(26, 34, 57, 0.86);
    --surface-2: #1d2742;
    --text-main: #edf2ff;
    --text-muted: #a7b2d0;
    --accent-gold: #e0b968;
    --accent-gold-2: #c9974a;
    --stroke-soft: rgba(224, 185, 104, 0.25);
    --nav-bg: rgba(18, 24, 42, 0.84);
    --footer-bg: #0a0f1b;
    --shadow-soft: 0 16px 36px rgba(3, 5, 10, 0.48);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-aurora);
    color: var(--text-main);
    font-family: 'Nunito Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.25s ease;
    position: relative;
}

h1,
h2,
h3,
.navbar-brand {
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.02em;
}

.site-header {
    background: var(--nav-bg);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: blur(14px);
}

.main-nav-links .nav-link {
    white-space: nowrap;
}

.header-search-form {
    width: 100%;
}

.header-actions {
    flex-wrap: wrap;
}

.header-account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.header-account-link span {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar .nav-link {
    color: var(--text-main);
    font-weight: 700;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--accent-gold);
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--stroke-soft);
    background: var(--surface-1);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.theme-panel {
    background: var(--surface-1);
    color: var(--text-main);
}

.theme-panel .offcanvas-title {
    font-family: 'Cinzel', Georgia, serif;
}

.preference-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-1);
    border: 1px solid var(--stroke-soft);
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
}

.preference-group-panel {
    border-radius: 14px;
    padding: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.preference-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.preference-select {
    min-width: 105px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-weight: 700;
    box-shadow: none !important;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

.preference-group-panel .preference-select {
    width: 100%;
}

.region-preview {
    text-align: left;
    font-weight: 700;
}

.region-preview.active-pack {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1e2437 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 8px 16px rgba(255, 255, 255, 0.22);
}

html[data-theme='light'] .region-preview.active-pack {
    background: #ffffff !important;
    color: #1e2437 !important;
}

.preference-select:focus {
    outline: none;
}

.hero-section {
    background: linear-gradient(120deg, rgba(19, 30, 52, 0.78), rgba(35, 58, 97, 0.42)), url('https://cdn2.unrealengine.com/egs-genshinimpact-mihoyo-s1-2560x1440-80472f3d242b.jpg') no-repeat center center / cover;
    color: #fff;
    padding: 110px 0;
    border-bottom: 2px solid var(--accent-gold);
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: auto -25% -120px -25%;
    height: 190px;
    background: radial-gradient(closest-side, rgba(255, 231, 181, 0.35), transparent 78%);
    pointer-events: none;
}

.hero-section .container {
    animation: fadeRise 0.8s ease both;
}

.product-card {
    animation: cardReveal 0.55s ease both;
}

.row .col-sm-6:nth-child(2) .product-card,
.row .col-lg-3:nth-child(2) .product-card {
    animation-delay: 0.08s;
}

.row .col-sm-6:nth-child(3) .product-card,
.row .col-lg-3:nth-child(3) .product-card {
    animation-delay: 0.16s;
}

.row .col-sm-6:nth-child(4) .product-card,
.row .col-lg-3:nth-child(4) .product-card {
    animation-delay: 0.24s;
}

.text-primary {
    color: var(--accent-gold) !important;
}

.text-dark {
    color: var(--text-main) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.bg-light,
.bg-white {
    background-color: var(--surface-1) !important;
}

.card {
    background: var(--surface-1);
    border: 1px solid var(--stroke-soft) !important;
    color: var(--text-main);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card {
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold) !important;
    box-shadow: var(--card-hover-shadow);
}

.product-card-compact .card-img-top {
    height: 120px;
    object-fit: contain;
    padding: 0.75rem !important;
}

.product-card-compact .card-body {
    padding: 0.75rem;
}

.product-card-compact .planet-badge,
.product-card-compact .region-badge {
    font-size: 0.62rem;
    padding: 2px 7px;
    margin-bottom: 0.4rem !important;
}

.product-card-compact .card-title {
    font-size: 0.92rem;
    line-height: 1.22;
    min-height: 2.25em;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-compact .card-body > .small.text-muted {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    min-height: 2.4em;
    margin-bottom: 0.5rem !important;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-compact .price-text {
    font-size: 1rem !important;
    margin-bottom: 0.3rem;
}

.product-card-compact .btn {
    padding: 0.36rem 0.55rem;
    font-size: 0.78rem;
}

.price-text {
    color: var(--accent-gold-2) !important;
}

.planet-badge,
.region-badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 4px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
    display: inline-block;
    background: rgba(215, 171, 89, 0.13);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
}

.btn {
    border-radius: 999px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--accent-gold);
    color: #fff;
    border: 1px solid var(--accent-gold);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-gold-2);
    border-color: var(--accent-gold-2);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}

.form-control, .form-select {
    background-color: var(--surface-1);
    color: var(--text-main);
    border-color: var(--stroke-soft);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface-1);
    color: var(--text-main);
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 0.2rem rgba(210, 163, 78, 0.24);
}

.form-select option {
    background-color: var(--surface-1);
    color: var(--text-main);
}

.site-header input[type='search'] {
    color: var(--text-main);
    background: var(--surface-1);
}

.site-header input[type='search']::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.genshin-footer {
    background: linear-gradient(180deg, rgba(31, 39, 59, 0.96), var(--footer-bg));
}

html[data-nation='mondstadt'] {
    --accent-gold: #4ea79f;
    --accent-gold-2: #3a8f88;
    --bg-aurora: radial-gradient(1300px 700px at 8% -8%, rgba(95, 195, 183, 0.30), transparent 62%), radial-gradient(1000px 720px at 90% 4%, rgba(108, 145, 215, 0.22), transparent 58%), linear-gradient(180deg, #eef8f7 0%, #dceeed 100%);
    --card-hover-shadow: 0 20px 38px rgba(38, 108, 110, 0.24);
}

html[data-nation='liyue'] {
    --accent-gold: #d89a3b;
    --accent-gold-2: #b87726;
    --bg-aurora: radial-gradient(1300px 720px at 15% -8%, rgba(220, 154, 61, 0.32), transparent 60%), radial-gradient(950px 660px at 88% 3%, rgba(180, 91, 57, 0.20), transparent 57%), linear-gradient(180deg, #f9f1df 0%, #efdfc3 100%);
    --card-hover-shadow: 0 20px 38px rgba(153, 93, 30, 0.26);
}

html[data-nation='inazuma'] {
    --accent-gold: #8f72c8;
    --accent-gold-2: #7355ac;
    --bg-aurora: radial-gradient(1300px 720px at 10% -5%, rgba(154, 128, 214, 0.32), transparent 60%), radial-gradient(980px 640px at 90% 5%, rgba(96, 76, 171, 0.24), transparent 58%), linear-gradient(180deg, #f1ecfd 0%, #e3dbf7 100%);
    --card-hover-shadow: 0 20px 38px rgba(93, 69, 160, 0.28);
}

html[data-nation='sumeru'] {
    --accent-gold: #6aa047;
    --accent-gold-2: #4f8530;
    --bg-aurora: radial-gradient(1300px 720px at 10% -5%, rgba(122, 186, 89, 0.32), transparent 60%), radial-gradient(980px 640px at 90% 5%, rgba(77, 141, 89, 0.24), transparent 58%), linear-gradient(180deg, #edf7e8 0%, #dbecd2 100%);
    --card-hover-shadow: 0 20px 38px rgba(59, 118, 51, 0.26);
}

html[data-nation='fontaine'] {
    --accent-gold: #4d86be;
    --accent-gold-2: #35689c;
    --bg-aurora: radial-gradient(1300px 720px at 10% -5%, rgba(89, 147, 214, 0.30), transparent 60%), radial-gradient(980px 640px at 90% 5%, rgba(92, 116, 212, 0.24), transparent 58%), linear-gradient(180deg, #eaf2fd 0%, #dce9fb 100%);
    --card-hover-shadow: 0 20px 38px rgba(47, 89, 143, 0.28);
}

html[data-theme='dark'][data-nation='mondstadt'] {
    --bg-aurora: radial-gradient(1200px 700px at 10% -8%, rgba(72, 172, 162, 0.30), transparent 62%), radial-gradient(960px 620px at 90% 4%, rgba(64, 111, 171, 0.30), transparent 60%), linear-gradient(180deg, #0f1d26 0%, #12212e 100%);
    --card-hover-shadow: 0 20px 42px rgba(38, 108, 110, 0.35);
}

html[data-theme='dark'][data-nation='liyue'] {
    --bg-aurora: radial-gradient(1200px 700px at 10% -8%, rgba(184, 126, 49, 0.30), transparent 62%), radial-gradient(960px 620px at 90% 4%, rgba(118, 63, 43, 0.30), transparent 60%), linear-gradient(180deg, #261b12 0%, #2c2018 100%);
    --card-hover-shadow: 0 20px 42px rgba(153, 93, 30, 0.36);
}

html[data-theme='dark'][data-nation='inazuma'] {
    --bg-aurora: radial-gradient(1200px 700px at 10% -8%, rgba(121, 101, 183, 0.34), transparent 62%), radial-gradient(960px 620px at 90% 4%, rgba(76, 58, 145, 0.31), transparent 60%), linear-gradient(180deg, #19162a 0%, #1e1b33 100%);
    --card-hover-shadow: 0 20px 42px rgba(93, 69, 160, 0.38);
}

html[data-theme='dark'][data-nation='sumeru'] {
    --bg-aurora: radial-gradient(1200px 700px at 10% -8%, rgba(95, 158, 68, 0.34), transparent 62%), radial-gradient(960px 620px at 90% 4%, rgba(52, 113, 72, 0.31), transparent 60%), linear-gradient(180deg, #152118 0%, #18261d 100%);
    --card-hover-shadow: 0 20px 42px rgba(59, 118, 51, 0.38);
}

html[data-theme='dark'][data-nation='fontaine'] {
    --bg-aurora: radial-gradient(1200px 700px at 10% -8%, rgba(65, 124, 189, 0.34), transparent 62%), radial-gradient(960px 620px at 90% 4%, rgba(72, 92, 171, 0.31), transparent 60%), linear-gradient(180deg, #131e30 0%, #17243a 100%);
    --card-hover-shadow: 0 20px 42px rgba(47, 89, 143, 0.40);
}

.genshin-footer .text-muted,
.genshin-footer a.text-muted {
    color: #c9d0e2 !important;
}

.footer-title {
    color: #f6d79a;
    font-family: 'Cinzel', Georgia, serif;
}

.region-mondstadt {
    border-color: color-mix(in srgb, var(--region-mondstadt) 80%, #fff 20%) !important;
    background-color: color-mix(in srgb, var(--region-mondstadt) 10%, transparent);
}

.region-mondstadt .region-badge,
.region-mondstadt .planet-badge {
    color: var(--region-mondstadt);
    border-color: var(--region-mondstadt);
    background: color-mix(in srgb, var(--region-mondstadt) 16%, transparent);
}

.region-mondstadt .price-text,
.region-mondstadt .btn-outline-primary {
    color: var(--region-mondstadt) !important;
    border-color: var(--region-mondstadt);
}

.region-mondstadt .btn-primary,
.region-mondstadt .btn-outline-primary:hover {
    background-color: var(--region-mondstadt);
    border-color: var(--region-mondstadt);
    color: #fff !important;
}

/* ---------------------------------------------------
   AMELIORATIONS D'INTERFACE GLOBALES (TABLEAUX & CARTES)
   --------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--stroke-soft);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text-main);
    color: var(--text-main);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-2) !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 0 0 9999px var(--surface-2);
}

.table thead th {
    border-bottom: 2px solid var(--accent-gold);
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--stroke-soft);
    padding: 1rem 0.75rem;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--stroke-soft) !important;
    color: var(--text-main) !important;
}

.form-select.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text-main) !important;
}

.region-liyue {
    border-color: color-mix(in srgb, var(--region-liyue) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-liyue) 10%, transparent);
}

.region-liyue .region-badge,
.region-liyue .planet-badge {
    color: var(--region-liyue);
    border-color: var(--region-liyue);
    background: color-mix(in srgb, var(--region-liyue) 16%, transparent);
}

.region-liyue .price-text,
.region-liyue .btn-outline-primary {
    color: var(--region-liyue) !important;
    border-color: var(--region-liyue);
}

.region-liyue .btn-primary,
.region-liyue .btn-outline-primary:hover {
    background-color: var(--region-liyue);
    border-color: var(--region-liyue);
    color: #fff !important;
}

.region-inazuma {
    border-color: color-mix(in srgb, var(--region-inazuma) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-inazuma) 10%, transparent);
}

.region-inazuma .region-badge,
.region-inazuma .planet-badge {
    color: var(--region-inazuma);
    border-color: var(--region-inazuma);
    background: color-mix(in srgb, var(--region-inazuma) 16%, transparent);
}

.region-inazuma .price-text,
.region-inazuma .btn-outline-primary {
    color: var(--region-inazuma) !important;
    border-color: var(--region-inazuma);
}

.region-inazuma .btn-primary,
.region-inazuma .btn-outline-primary:hover {
    background-color: var(--region-inazuma);
    border-color: var(--region-inazuma);
    color: #fff !important;
}

.region-sumeru {
    border-color: color-mix(in srgb, var(--region-sumeru) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-sumeru) 10%, transparent);
}

.region-sumeru .region-badge,
.region-sumeru .planet-badge {
    color: var(--region-sumeru);
    border-color: var(--region-sumeru);
    background: color-mix(in srgb, var(--region-sumeru) 16%, transparent);
}

.region-sumeru .price-text,
.region-sumeru .btn-outline-primary {
    color: var(--region-sumeru) !important;
    border-color: var(--region-sumeru);
}

.region-sumeru .btn-primary,
.region-sumeru .btn-outline-primary:hover {
    background-color: var(--region-sumeru);
    border-color: var(--region-sumeru);
    color: #fff !important;
}

.region-fontaine {
    border-color: color-mix(in srgb, var(--region-fontaine) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-fontaine) 10%, transparent);
}

.region-fontaine .region-badge,
.region-fontaine .planet-badge {
    color: var(--region-fontaine);
    border-color: var(--region-fontaine);
    background: color-mix(in srgb, var(--region-fontaine) 16%, transparent);
}

.region-fontaine .price-text,
.region-fontaine .btn-outline-primary {
    color: var(--region-fontaine) !important;
    border-color: var(--region-fontaine);
}

.region-fontaine .btn-primary,
.region-fontaine .btn-outline-primary:hover {
    background-color: var(--region-fontaine);
    border-color: var(--region-fontaine);
    color: #fff !important;
}

.region-natlan {
    border-color: color-mix(in srgb, var(--region-natlan) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-natlan) 10%, transparent);
}
.region-natlan .region-badge,
.region-natlan .planet-badge {
    color: var(--region-natlan);
    border-color: var(--region-natlan);
    background: color-mix(in srgb, var(--region-natlan) 16%, transparent);
}
.region-natlan .price-text,
.region-natlan .btn-outline-primary {
    color: var(--region-natlan) !important;
    border-color: var(--region-natlan);
}
.region-natlan .btn-primary,
.region-natlan .btn-outline-primary:hover {
    background-color: var(--region-natlan);
    border-color: var(--region-natlan);
    color: #fff !important;
}


.region-nodkrai {
    border-color: color-mix(in srgb, var(--region-nordkrai) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-nordkrai) 10%, transparent);
}
.region-nodkrai .region-badge,
.region-nodkrai .planet-badge {
    color: var(--region-nordkrai);
    border-color: var(--region-nordkrai);
    background: color-mix(in srgb, var(--region-nordkrai) 16%, transparent);
}
.region-nodkrai .price-text,
.region-nodkrai .btn-outline-primary {
    color: var(--region-nordkrai) !important;
    border-color: var(--region-nordkrai);
}
.region-nodkrai .btn-primary,
.region-nodkrai .btn-outline-primary:hover {
    background-color: var(--region-nordkrai);
    border-color: var(--region-nordkrai);
    color: #fff !important;
}

.region-snezhnaya {
    border-color: color-mix(in srgb, var(--region-nordkrai) 82%, #fff 18%) !important;
    background-color: color-mix(in srgb, var(--region-nordkrai) 10%, transparent);
}
.region-snezhnaya .region-badge,
.region-snezhnaya .planet-badge {
    color: var(--region-nordkrai);
    border-color: var(--region-nordkrai);
    background: color-mix(in srgb, var(--region-nordkrai) 16%, transparent);
}
.region-snezhnaya .price-text,
.region-snezhnaya .btn-outline-primary {
    color: var(--region-nordkrai) !important;
    border-color: var(--region-nordkrai);
}
.region-snezhnaya .btn-primary,
.region-snezhnaya .btn-outline-primary:hover {
    background-color: var(--region-nordkrai);
    border-color: var(--region-nordkrai);
    color: #fff !important;
}


html[data-theme='dark'] .card,
html[data-theme='dark'] .product-card {
    box-shadow: 0 18px 36px rgba(2, 5, 12, 0.45);
}

html[data-theme='dark'] .btn-primary {
    color: #132034;
    font-weight: 800;
}

html[data-theme='dark'] .btn-outline-primary:hover {
    color: #132034;
}

@media (max-width: 991.98px) {
    .hero-section {
        padding: 90px 0;
    }

    .site-header .navbar-collapse {
        padding-top: 0.65rem;
    }

    .header-search-form {
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .theme-panel {
        width: min(90vw, 380px);
    }
}

@media (min-width: 992px) {
    .site-header .navbar {
        gap: 0.8rem;
    }

    .main-nav-links {
        gap: 0.12rem;
    }

    .main-nav-links .nav-link {
        font-size: 1.02rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .header-search-form {
        flex: 0 1 320px;
        min-width: 260px;
        margin-left: 0.65rem;
        margin-right: 0.65rem;
    }

    .header-actions {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding: 72px 0;
    }

    .theme-toggle {
        width: 38px;
        height: 38px;
    }

    .theme-panel {
        width: 100vw;
    }
}

@keyframes fadeRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .container,
    .product-card,
    .card,
    .btn,
    body {
        animation: none !important;
        transition: none !important;
    }
}

/* Cart Page */
.cart-page-head {
    padding: 0.5rem 0;
}

.cart-head-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--stroke-soft);
    background: var(--surface-1);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.92rem;
}

.cart-empty {
    border: 1px dashed var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-1);
}

.cart-empty-icon-wrap {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.cart-list-card,
.cart-summary-card {
    overflow: hidden;
}

/* Recettes Epiques */
.epic-recipe-card .card-img-top {
    height: 120px;
    object-fit: cover;
}

.epic-recipe-card .region-badge {
    width: fit-content;
}

.epic-recipe-card .card-body {
    padding: 1rem;
}

.cart-line {
    padding: 1rem 0;
    border-top: 1px solid var(--stroke-soft);
}

.cart-line:first-of-type {
    border-top: 0;
}

.cart-line-image {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--stroke-soft);
}

.cart-line-price,
.cart-line-qty,
.cart-line-total {
    min-width: 130px;
}

.cart-qty-control {
    border: 1px solid var(--stroke-soft);
    border-radius: 999px;
    padding: 0.15rem;
    background: var(--surface-1);
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}

.cart-qty-value {
    width: 46px;
    text-align: center;
    font-weight: 800;
    color: var(--text-main);
}

.cart-qty-input {
    width: 64px;
    text-align: center;
    font-weight: 700;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
    box-shadow: none !important;
}

.cart-qty-submit {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    font-weight: 700;
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.cart-trust {
    background: color-mix(in srgb, var(--accent-gold) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
    font-size: 0.9rem;
}

@media (max-width: 1199.98px) {
    .cart-summary-card {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    .cart-line {
        gap: 0.75rem;
    }

    .cart-line-price,
    .cart-line-qty,
    .cart-line-total {
        width: 100%;
        min-width: 0;
        text-align: left !important;
    }

    .cart-page .display-5 {
        font-size: 2rem;
    }
}

/* Pagination Theme Customization */
.pagination .page-link {
    background-color: var(--surface-1) !important;
    border: 1px solid var(--stroke-soft) !important;
    color: var(--text-main) !important;
    transition: all 0.3s ease;
    margin: 0 3px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    background-color: var(--surface-2) !important;
    color: var(--accent-gold) !important;
    box-shadow: border-box !important;
    outline: none !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent-gold) !important;
    color: #1e2437 !important;
    font-weight: 700;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* =========================================================================
   GENSHIN IMPACT UI OVERHAUL
   ========================================================================= */

/* Typography Overrides */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Nunito+Sans:wght@300;400;600;700&display=swap');

:root {
    --genshin-border-radius: 4px;
    --genshin-blur: blur(8px);
    --genshin-border-light: rgba(255, 255, 255, 0.4);
    --genshin-border-gold: rgba(215, 171, 89, 0.8);
    --genshin-bg-transparent: rgba(18, 24, 42, 0.65);
    
    /* Exact Region Background Colors */
    --region-mondstadt-bg: #82d8d5;
    --region-liyue-bg: #e3a642;
    --region-inazuma-bg: #8c6ab9;
    --region-sumeru-bg: #619a4a;
    --region-fontaine-bg: #4f7ead;
    --region-natlan-bg: #cf5e38;
    --region-nordkrai-bg: #bacbdc;
}

html[data-theme='light'] :root {
    --genshin-bg-transparent: rgba(246, 242, 235, 0.65);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .font-cinzel {
    font-family: 'Cinzel', serif !important;
}

body {
    font-family: 'Nunito Sans', sans-serif !important;
}

/* UI Genshin Elements */
.card-genshin, .modal-content, .card {
    background: var(--genshin-bg-transparent) !important;
    backdrop-filter: var(--genshin-blur) !important;
    border: 1px solid var(--genshin-border-gold) !important;
    border-radius: var(--genshin-border-radius) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-genshin, .btn-primary {
    background: rgba(215, 171, 89, 0.8) !important; /* Gold */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: var(--genshin-blur);
    border-radius: 20px !important;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-genshin:hover, .btn-primary:hover {
    background: rgba(215, 171, 89, 1) !important;
    box-shadow: 0 0 10px rgba(215, 171, 89, 0.6);
    transform: scale(1.02);
}

/* Region Layout Rules */
.card.region-mondstadt, .product-card.region-mondstadt {
    background: linear-gradient(135deg, rgba(130, 216, 213, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-mondstadt) !important;
}

.card.region-liyue, .product-card.region-liyue {
    background: linear-gradient(135deg, rgba(227, 166, 66, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-liyue) !important;
}

.card.region-inazuma, .product-card.region-inazuma {
    background: linear-gradient(135deg, rgba(140, 106, 185, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-inazuma) !important;
}

.card.region-sumeru, .product-card.region-sumeru {
    background: linear-gradient(135deg, rgba(97, 154, 74, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-sumeru) !important;
}

.card.region-fontaine, .product-card.region-fontaine {
    background: linear-gradient(135deg, rgba(79, 126, 173, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-fontaine) !important;
}

.card.region-natlan, .product-card.region-natlan {
    background: linear-gradient(135deg, rgba(207, 94, 56, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-natlan) !important;
}

.card.region-nodkrai, .card.region-snezhnaya, .product-card.region-nodkrai, .product-card.region-snezhnaya {
    background: linear-gradient(135deg, rgba(186, 203, 220, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-top: 3px solid var(--region-nordkrai) !important;
}

.card.region-non-specifie, .product-card.region-non-specifie {
    background: rgba(128, 128, 128, 0.05) !important;
    border-top: 3px solid gray !important;
}

/* Badge Region Styling Override */
.region-badge.region-mondstadt { background-color: var(--region-mondstadt-bg) !important; color: #fff !important; }
.region-badge.region-liyue { background-color: var(--region-liyue-bg) !important; color: #fff !important; }
.region-badge.region-inazuma { background-color: var(--region-inazuma-bg) !important; color: #fff !important; }
.region-badge.region-sumeru { background-color: var(--region-sumeru-bg) !important; color: #fff !important; }
.region-badge.region-fontaine { background-color: var(--region-fontaine-bg) !important; color: #fff !important; }
.region-badge.region-natlan { background-color: var(--region-natlan-bg) !important; color: #fff !important; }
.region-badge.region-nodkrai, .region-badge.region-snezhnaya { background-color: var(--region-nordkrai-bg) !important; color: #1e2437 !important; }

/* Stars for Epics */
.epic-stars {
    color: #e3a642; /* Gold */
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Legal Pages STRICT Isolation */
main.legal-page-container {
    background: #f4f6f8 !important; /* Force light clear background regardless of theme */
    min-height: 100vh;
}

html[data-theme='dark'] main.legal-page-container {
    background: #121212 !important; /* Professional Dark Mode */
}

main.legal-page-container .container, 
main.legal-page-container .legal-content {
    background: #ffffff !important;
    color: #333333 !important;
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
}

html[data-theme='dark'] main.legal-page-container .container,
html[data-theme='dark'] main.legal-page-container .legal-content {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

main.legal-page-container h1, 
main.legal-page-container h2, 
main.legal-page-container h3, 
main.legal-page-container h4 {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    color: #111111 !important;
    border: none !important;
}

html[data-theme='dark'] main.legal-page-container h1, 
html[data-theme='dark'] main.legal-page-container h2, 
html[data-theme='dark'] main.legal-page-container h3, 
html[data-theme='dark'] main.legal-page-container h4 {
    color: #ffffff !important;
}


.btn-outline-primary {
    background: transparent !important;
    color: var(--accent-gold) !important;
    border: 1px solid var(--accent-gold) !important;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: rgba(215, 171, 89, 0.1) !important;
    color: var(--accent-gold) !important;
    box-shadow: 0 0 10px rgba(215, 171, 89, 0.3);
}

/* =========================================================================
   FIX INPUTS — couleur texte dark/light mode
   ========================================================================= */

.form-control,
.form-select {
    color: var(--text-main) !important;
    background-color: var(--surface-1) !important;
    border-color: var(--stroke-soft) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--text-main) !important;
    background-color: var(--surface-1) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(210, 163, 78, 0.24) !important;
}

html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select {
    color: var(--text-main) !important;
    background-color: var(--surface-1) !important;
    border-color: var(--stroke-soft) !important;
}

html[data-theme='dark'] select option {
    background-color: #1d2742;
    color: #edf2ff;
}

/* =========================================================================
   INFO PAGES — refonte UI
   ========================================================================= */

.info-page {
    min-height: 60vh;
}

.info-page-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.info-page-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent-gold);
    flex-shrink: 0;
}

.info-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-alert-card {
    border-left: 4px solid var(--accent-gold) !important;
}

.info-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.info-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.info-contact-list li i {
    font-size: 1.2rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Accordion info pages */
.info-accordion .accordion-item {
    background: var(--surface-1);
    border-color: var(--stroke-soft);
}

.info-accordion .accordion-button {
    background: var(--surface-1);
    color: var(--text-main);
    font-weight: 600;
    box-shadow: none;
}

.info-accordion .accordion-button:not(.collapsed) {
    color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--surface-1));
}

.info-accordion .accordion-button::after {
    filter: none;
}

html[data-theme='dark'] .info-accordion .accordion-button::after {
    filter: invert(1);
}

/* Legal sections */
.legal-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legal-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--stroke-soft);
}

.legal-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Tabs theming */
.nav-tabs {
    border-color: var(--stroke-soft);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--accent-gold);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--accent-gold);
    background: var(--surface-1);
    border-color: var(--stroke-soft) var(--stroke-soft) var(--surface-1);
}

/* =========================================================================
   ACCORDION dark mode fix
   ========================================================================= */

html[data-theme='dark'] .accordion-button:not(.collapsed)::after {
    filter: invert(1);
}

/* =========================================================================
   TABLE dark mode
   ========================================================================= */

html[data-theme='dark'] .table {
    color: var(--text-main);
}

html[data-theme='dark'] .table-dark {
    --bs-table-bg: #1a2240;
}

html[data-theme='dark'] .table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}