/* =====================================================================
   Chocolat de Café — Feuille de style principale
   Luxe, mode sombre, or métallique, Made in France
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Tokens ---------- */
:root {
    /* Marrons très profonds */
    --ink-000: #060403;
    --ink-100: #0a0705;
    --ink-200: #120b07;
    --ink-300: #1a100a;
    --ink-400: #22160e;
    --ink-500: #2c1d12;

    /* Or métallique (dégradé type logo) */
    --gold-100: #f8e9b8;
    --gold-200: #ecd48b;
    --gold-300: #d8b65f;
    --gold-400: #c9a84c;
    --gold-500: #b18a31;
    --gold-600: #8b6914;
    --gold-deep: #5c4508;

    /* Beiges ivoire */
    --cream-50:  #fbf4e6;
    --cream-100: #f5eadd;
    --cream-200: #e8d9c1;
    --cream-300: #c9b89a;

    /* Accents discrets Made in France */
    --france-blue: #1a3a6b;
    --france-red:  #7e1c1e;

    /* Système */
    --success: #2d6a4f;
    --error:   #9b2226;
    --warning: #e09f3e;

    /* Typo */
    --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-serif:   'Playfair Display', Georgia, serif;
    --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Rythme */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 18px;
    --radius-xl: 32px;

    --shadow-soft: 0 2px 20px rgba(0,0,0,.35);
    --shadow-deep: 0 40px 80px -20px rgba(0,0,0,.75);
    --shadow-gold: 0 10px 40px -10px rgba(201,168,76,.35);

    --header-h: 132px;

    /* Dégradés or métallique ————— le vrai signe de luxe */
    --gradient-gold-metal: linear-gradient(
        135deg,
        #5c4508 0%,
        #8b6914 12%,
        #c9a84c 26%,
        #f8e9b8 38%,
        #ecd48b 50%,
        #c9a84c 62%,
        #8b6914 78%,
        #5c4508 92%,
        #8b6914 100%
    );
    --gradient-gold-soft: linear-gradient(180deg, #f8e9b8 0%, #c9a84c 60%, #8b6914 100%);
    --gradient-cream: linear-gradient(180deg, #fbf4e6 0%, #e8d9c1 100%);
    --gradient-ink: linear-gradient(180deg, #0a0705 0%, #1a100a 40%, #0a0705 100%);
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--cream-100);
    background: var(--ink-100);
    background-image:
        radial-gradient(ellipse 1200px 800px at 80% -10%, rgba(201,168,76,.08), transparent 60%),
        radial-gradient(ellipse 900px 600px at 10% 110%, rgba(139,105,20,.06), transparent 60%),
        linear-gradient(180deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Grain overlay — la signature "film argentique" */
body::before {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .7  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; display: block; }
a { color: var(--gold-300); text-decoration: none; transition: color .25s; }
a:hover { color: var(--gold-200); }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

/* ---------- Typographie d'affichage ---------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--cream-50);
}
h1 { font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }

.display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
}

/* Texte doré métallique (avec fallback) */
.gold-text {
    background: var(--gradient-gold-metal);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gold-shine 6s ease-in-out infinite;
}
@keyframes gold-shine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.eyebrow {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold-300);
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
.eyebrow::before {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--gradient-gold-metal);
}

p { max-width: 62ch; }
.lead {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--cream-200);
    font-style: italic;
}

/* ---------- Layout ---------- */
.container {
    width: min(100% - 3rem, 1280px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
.container-narrow {
    width: min(100% - 3rem, 880px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
section { position: relative; z-index: 2; }

.section-pad { padding: clamp(4rem, 8vw, 9rem) 0; }
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
    opacity: .35;
    margin: 0 auto;
    max-width: 880px;
}

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 1000;
    display: flex;
    align-items: center;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: linear-gradient(180deg, rgba(10,7,5,.92) 0%, rgba(10,7,5,.7) 100%);
    border-bottom: 1px solid rgba(201,168,76,.18);
    transition: transform .4s ease, background .4s ease;
}

.site-header.scrolled {
    background: rgba(6,4,3,.95);
    border-bottom-color: rgba(201,168,76,.35);
    height: 92px;
}
.site-header.scrolled .brand img {
    height: 74px;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: min(100% - 3rem, 1440px);
}

.brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: var(--cream-50);
    font-family: var(--font-serif);
    font-size: 1.3rem;
    letter-spacing: .01em;
    flex-shrink: 0;
    position: relative;
    padding: .4rem 0;
}
/* Halo doré derrière le logo pour renforcer la présence sur le bandeau sombre */
.brand::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(201,168,76,.25) 0%, rgba(201,168,76,.08) 40%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
    transition: opacity .5s;
}
.brand img {
    height: 104px;
    width: auto;
    filter:
        drop-shadow(0 6px 28px rgba(201,168,76,.55))
        drop-shadow(0 0 12px rgba(201,168,76,.35))
        drop-shadow(0 2px 6px rgba(0,0,0,.65));
    transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s, height .4s ease;
}
.brand:hover img {
    transform: scale(1.05);
    filter:
        drop-shadow(0 8px 34px rgba(201,168,76,.75))
        drop-shadow(0 0 16px rgba(201,168,76,.5))
        drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.brand:hover::before {
    opacity: 1.3;
}

.main-nav {
    display: flex;
    gap: 2.2rem;
    align-items: center;
}
.main-nav a {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cream-100);
    position: relative;
    padding-bottom: 4px;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gradient-gold-metal);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s cubic-bezier(.77,0,.18,1);
}
.main-nav a:hover::after,
.main-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}
.main-nav a.is-active { color: var(--gold-200); }

.header-actions { display: flex; align-items: center; gap: 1.2rem; }

/* Icône compte (personnage + "se connecter") */
.account-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    color: var(--cream-100);
    cursor: pointer;
    min-width: 70px;
    transition: transform .3s;
}
.account-widget:hover { transform: translateY(-2px); }
.account-widget svg {
    width: 36px;
    height: 36px;
    stroke: var(--gold-300);
    fill: none;
    stroke-width: 1.4;
}
.account-widget span {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Burger mobile */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
}
.nav-toggle span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1.5px;
    background: var(--gold-200);
    transition: transform .3s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }

/* ---------- Boutons luxe ---------- */
.btn {
    --bg: var(--ink-300);
    --fg: var(--cream-50);
    --border: rgba(201,168,76,.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 1.05rem 2.2rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.77,0,.18,1), color .35s;
    isolation: isolate;
    text-decoration: none;
    white-space: nowrap;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-gold-metal);
    background-size: 200% 100%;
    transform: translateX(-100%);
    transition: transform .6s cubic-bezier(.77,0,.18,1);
    z-index: -1;
}
.btn:hover { color: var(--ink-100); border-color: var(--gold-200); }
.btn:hover::before { transform: translateX(0); }
.btn:active { transform: scale(.98); }

/* Bouton or plein (CTA primaire) */
.btn-gold {
    --bg: transparent;
    --fg: var(--ink-100);
    border: none;
    background: var(--gradient-gold-metal);
    background-size: 200% 200%;
    color: var(--ink-100);
    animation: gold-shine 6s ease-in-out infinite;
    box-shadow: var(--shadow-gold);
}
.btn-gold::before { display: none; }
.btn-gold:hover {
    color: var(--ink-000);
    transform: translateY(-2px);
    box-shadow: 0 14px 50px -10px rgba(201,168,76,.55);
}

/* Bouton marron profond */
.btn-dark {
    --bg: var(--ink-400);
    --fg: var(--cream-50);
    border-color: rgba(201,168,76,.5);
}

/* Bouton ghost */
.btn-ghost {
    --bg: transparent;
    --fg: var(--cream-100);
    border-color: rgba(245,234,221,.25);
}
.btn-ghost::before {
    background: rgba(245,234,221,.08);
}
.btn-ghost:hover { color: var(--cream-50); }

.btn-small { padding: .7rem 1.4rem; font-size: .68rem; }
.btn-block { display: flex; width: 100%; }

/* Prix mis en avant à l'intérieur d'un bouton (ex. CTA "Offre découverte 39 €") */
.btn .btn-price {
    margin-left: .5em;
    font-size: 1.55em;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--gold-300, #d4b878);
    line-height: 1;
    vertical-align: -0.08em;
}

/* ---------- Cartes luxe ---------- */
.card {
    background: linear-gradient(180deg, rgba(26,16,10,.92) 0%, rgba(10,7,5,.92) 100%);
    border: 1px solid rgba(201,168,76,.2);
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    position: relative;
    transition: transform .5s cubic-bezier(.77,0,.18,1), border-color .4s, box-shadow .4s;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-gold-metal);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
}
.card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-deep), var(--shadow-gold);
}
.card:hover::before { opacity: 1; }

/* ---------- Ligne ornementale ---------- */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--gold-400);
    font-size: 1.2rem;
    margin-block: 1rem;
}
.ornament::before, .ornament::after {
    content: "";
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400));
}
.ornament::after {
    background: linear-gradient(90deg, var(--gold-400), transparent);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .22s; }
.reveal[data-delay="3"] { transition-delay: .34s; }
.reveal[data-delay="4"] { transition-delay: .46s; }
.reveal[data-delay="5"] { transition-delay: .58s; }

/* ---------- Flash messages ---------- */
.flashes {
    position: fixed;
    top: calc(var(--header-h) + 20px);
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 420px;
}
.flash {
    background: var(--ink-400);
    border: 1px solid var(--gold-400);
    border-left-width: 4px;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: .9rem;
    animation: slide-in .5s cubic-bezier(.77,0,.18,1);
    box-shadow: var(--shadow-deep);
}
.flash.success { border-left-color: var(--success); }
.flash.error   { border-left-color: var(--error); }
.flash.info    { border-left-color: var(--gold-400); }
@keyframes slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ink-000);
    border-top: 1px solid rgba(201,168,76,.15);
    margin-top: 6rem;
    padding: 5rem 0 2.5rem;
    color: var(--cream-300);
    font-size: .88rem;
    position: relative;
    z-index: 2;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.site-footer h4 {
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold-300);
    margin-bottom: 1.2rem;
    font-weight: 600;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.site-footer a { color: var(--cream-200); }
.site-footer a:hover { color: var(--gold-200); }
.footer-brand {
    align-self: start;
    margin-top: -2.2rem;
}
.footer-brand p { margin: .4rem 0 0; max-width: 32ch; line-height: 1.7; }
.footer-brand img {
    height: 150px;
    width: auto;
    margin: 0 0 -.5rem -1rem;
    filter: drop-shadow(0 4px 18px rgba(201,168,76,.35));
}
.footer-bottom {
    border-top: 1px solid rgba(201,168,76,.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--cream-300);
}
.made-in-france {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}
.made-in-france .tricolor {
    display: inline-flex;
    height: 12px;
    border-radius: 1px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(255,255,255,.15);
}
.tricolor span { width: 7px; height: 100%; }
.tricolor span:nth-child(1) { background: var(--france-blue); }
.tricolor span:nth-child(2) { background: #f5eadd; }
.tricolor span:nth-child(3) { background: var(--france-red); }

/* ---------- Forms ---------- */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }

/* Cases / radios "carte" — même modèle que les cases de validation de la
   maquette du configurateur (.cfg2-final-check). Réutilisable partout :
   choix de livraison, VIP, CGV… */
.shipping-choice { margin-bottom: 1.3rem; }
.choice-card {
    background: rgba(18,11,7,.8);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: 12px;
    padding: 1.05rem 1.25rem;
    margin-bottom: .7rem;
    transition: all .2s;
}
.choice-card:has(input:checked) {
    border-color: var(--gold-300);
    background: rgba(201,168,76,.08);
    box-shadow: 0 0 0 1px rgba(201,168,76,.25);
}
.choice-card label { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; margin: 0; }
.choice-card input[type=radio],
.choice-card input[type=checkbox] {
    flex-shrink: 0; width: 22px; height: 22px;
    appearance: none; -webkit-appearance: none;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: 5px;            /* carré, comme le configurateur */
    cursor: pointer; position: relative; margin-top: 1px; transition: all .2s;
}
.choice-card input:checked { background: var(--gradient-gold-metal); border-color: var(--gold-200); }
.choice-card input:checked::after {
    content: ""; position: absolute; left: 6px; top: 1px;
    width: 7px; height: 12px;
    border: solid var(--ink-100); border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.choice-card span { font-size: .92rem; line-height: 1.55; color: var(--cream-100); font-weight: 600; }
.choice-card span strong { color: var(--gold-200); font-weight: 600; }
.choice-card span a { color: var(--gold-200); }
/* Aligne les champs côte à côte d'une même ligne, même quand un intitulé
   passe sur 2 lignes : le champ est poussé en bas de la cellule (sans effet
   sur les lignes dont les intitulés ont déjà la même hauteur). On exclut la
   grille "établissement" (texte d'aide sous le champ). */
.form-grid:not(.form-grid-establishment) .field > input,
.form-grid:not(.form-grid-establishment) .field > select,
.form-grid:not(.form-grid-establishment) .field > textarea {
    margin-top: auto;
}
.field label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.field input, .field textarea, .field select {
    background: var(--ink-400);
    border: 1px solid rgba(201,168,76,.25);
    border-radius: var(--radius-sm);
    padding: .95rem 1rem;
    color: var(--cream-50);
    font-size: .95rem;
    transition: border-color .3s, background .3s;
    font-family: var(--font-body);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--gold-300);
    background: var(--ink-500);
    box-shadow: 0 0 0 4px rgba(201,168,76,.08);
}
.field textarea { min-height: 140px; resize: vertical; }
.field .help { font-size: .78rem; color: var(--cream-300); font-style: italic; }
.field.required label::after { content: " *"; color: var(--gold-300); }

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.2rem;
    background: rgba(44,29,18,.4);
    border: 1px solid rgba(201,168,76,.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .25s, background .25s;
}
.checkbox:hover { border-color: var(--gold-400); }
.checkbox input { width: 18px; height: 18px; accent-color: var(--gold-400); margin-top: 2px; }
.checkbox .label { font-size: .9rem; color: var(--cream-100); line-height: 1.5; }
.checkbox .label strong { color: var(--gold-200); }

/* ---------- Utilitaires ---------- */
.text-center { text-align: center; }
.text-gold { color: var(--gold-300); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: var(--gradient-gold-metal);
    color: var(--ink-100);
}
.badge-outline {
    background: transparent;
    border: 1px solid var(--gold-400);
    color: var(--gold-200);
}
.badge-vip::before { content: "★"; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    :root { --header-h: 104px; }
    .brand img { height: 78px; }
    .site-header.scrolled { height: 78px; }
    .site-header.scrolled .brand img { height: 58px; }
    .main-nav { gap: 1.4rem; }
    .main-nav a { font-size: .72rem; letter-spacing: .14em; }
}
@media (max-width: 768px) {
    :root { --header-h: 82px; }
    .brand img { height: 62px; }
    .site-header.scrolled { height: 70px; }
    .site-header.scrolled .brand img { height: 52px; }
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        background: var(--ink-100);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        transform: translateY(-120%);
        transition: transform .4s;
        border-bottom: 1px solid var(--gold-400);
    }
    .main-nav.is-open { transform: translateY(0); }
    .nav-toggle { display: block; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer { padding: 3rem 0 2rem; }
    .account-widget span { display: none; }
}