/* ═══════════════════════════════════════════════════════════════════════════
   L'ATELIER DU BOULISTE - Design System & Styles
   Southern Soul: Hot sand, pine trees, craftsmanship
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (Design Tokens)
───────────────────────────────────────────────────────────────────────── */
:root {
    /* Colors */
    --rust: #593c29;
    --rust-light: #7a5a42;
    --rust-dark: #3d2a1c;
    --gold: #fedc57;
    --gold-dark: #e5c64e;
    --cream: #F9F7F2;
    --cream-dark: #EDE9E0;
    --dark: #2C241E;
    --dark-light: #4a3f35;
    --olive: #808c5c;
    --olive-dark: #4b5320;
    --olive-glow: rgba(128, 140, 92, 0.4);

    /* Typography */
    --font-stencil: 'Stardos Stencil', cursive;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-2xl: 8rem;

    /* Transitions */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 0.2s var(--ease-out);
    --transition-base: 0.3s var(--ease-out);
    --transition-slow: 0.5s var(--ease-in-out);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(44, 36, 30, 0.08);
    --shadow-md: 0 4px 24px rgba(44, 36, 30, 0.12);
    --shadow-lg: 0 8px 48px rgba(44, 36, 30, 0.16);
    --shadow-gold: 0 0 30px rgba(254, 220, 87, 0.3);

    /* Layout */
    --container-max: 1400px;
    --container-narrow: 800px;
    --nav-height: 80px;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Custom Cursor Management - Follower Mode (Default cursor is visible) */
@media (hover: hover) and (pointer: fine) {
    /* No longer hiding standard cursor */
}

.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: var(--cream);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--cream);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.section-header__eyebrow {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    /* Increased from 1rem */
    font-weight: 600;
    /* Added for visibility */
    color: var(--rust);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.05em;
}

.section-header__title {
    font-family: var(--font-stencil);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--dark);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-header__subtitle {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--dark-light);
    max-width: 600px;
    margin: 0 auto;
}

.totems-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3em;
    line-height: 1;
}

.totems-subtitle__creations {
    color: #45322E;
    font-weight: 700;
}

.totems-subtitle__personnalites {
    color: #C9940A;
    font-weight: 700;
}

.totems-subtitle__acier-img {
    height: 2.8em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0.1em;
}

.section-header--light .section-header__eyebrow,
.section-header--light .section-header__title,
.section-header--light .section-header__subtitle {
    color: var(--cream);
}

.section-header--light .section-header__eyebrow {
    color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    z-index: 1000;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.nav--open {
    z-index: 2000 !important;
}

.nav__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 900;
    /* Lower than nav */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.nav--open+.nav__overlay {
    opacity: 1;
    visibility: visible;
}

.nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    order: 3;
    padding: 0;
}

.nav__toggle-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: opacity var(--transition-base), transform var(--transition-base);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) brightness(1.1);
}

/* Close (×) icon - always hidden, we use rotation instead */
.nav__toggle-close {
    display: none;
}

/* Toggle Open State - rotate the burger icon 90° */
.nav--open .nav__toggle-burger {
    transform: rotate(90deg);
}

.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.nav.scrolled::before {
    opacity: 0;
}

.nav:not(.scrolled) .nav__logo,
.nav:not(.scrolled) .nav__links a,
.nav:not(.scrolled) .nav__cart {
    /* Increased shadow opacity for stronger contrast */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.nav.scrolled {
    background-color: rgba(237, 233, 224, 0.95);
    /* #EDE9E0 (Cream Dark) */
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.nav__logo {
    font-family: var(--font-stencil);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    position: relative;
    padding: var(--space-xs) 0;

    /* Revert to standard text styling */
    color: var(--cream);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
    /* Strong shadow from previous step */
}

/* Character Highlights (Requested by User) */
.highlight-sun-char {
    /* Exploding Sun Texture for 'A' */
    background: radial-gradient(circle at center, #ffffcc 0%, #fff700 30%, #ffaa00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.highlight-steel-char {
    /* Polished Silver/Steel - Using high-key tones for visibility on white */
    background: linear-gradient(135deg,
            #c0c0c0 0%,
            #ffffff 20%,
            #dcdcdc 40%,
            #ffffff 50%,
            #d0d0d0 70%,
            #f8f8f8 85%,
            #bfbfbf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    /* Clean, defining shadow that doesn't muddy the silver */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav__cart::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    /* Sun Glow for underline */
    box-shadow: 0 0 8px var(--gold), 0 0 15px #ffaa00;
    transition: width var(--transition-base);
}

.nav__cart:hover::after {
    width: 100%;
}

.nav.scrolled .nav__logo {
    /* Text becomes rust on scroll, but highlighted chars keep their own texture */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--rust);
}

/* Logo Container */
.nav__logo-container {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Logo Image */
.nav__logo {
    display: inline-block;
    position: relative;
    /* transition: transform 0.3s ease; Removed here, applied to inner text */
}

/* Lien entourant la boule */
.nav__logo-ball-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.nav__logo-ball-link:hover {
    transform: scale(1.1);
}

.nav__logo-img {
    height: 75px;
    width: auto;
    transition: filter var(--transition-base);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Ball rotation animation */
.nav__logo-ball {
    animation: spin-slow 20s linear infinite;
}

/* Text logo next to ball */
.nav__logo-text {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: filter var(--transition-base), transform 0.3s ease;
    display: block;
}

.nav__logo:hover .nav__logo-text {
    transform: scale(1.05);
}

/* Yellow underline under text logo */
.nav__logo::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    box-shadow: 0 0 8px var(--gold), 0 0 15px #ffaa00;
    transition: width var(--transition-base);
}

.nav__logo:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    .nav {
        height: 60px;
    }

    .nav__logo-text {
        display: none;
    }

    .nav__logo-img {
        height: 40px;
    }

    .nav.scrolled {
        padding-top: 15px;
        padding-bottom: 5px;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.nav.scrolled .nav__logo-img {
    filter: none;
}

.nav.scrolled .nav__logo-text {
    /* Maintain or enhance shadow on white background for visibility */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.nav__links {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    margin-left: 180px;
    /* Shift links to the right (décalé de 60px vers la gauche) */
}

.nav__radio-mobile {
    display: none;
}

.nav__links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cream);
    letter-spacing: 0.02em;
    position: relative;
    padding: var(--space-xs) 0;
    transition: color var(--transition-base);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
    white-space: nowrap;
}

.nav.scrolled .nav__links a {
    color: var(--dark);
}

@media (max-width: 768px) {
    .nav.scrolled .nav__links a {
        color: var(--gold);
    }
}

.nav__links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    /* Sun Yellow */
    /* Sun Pop/Glow for underline */
    box-shadow: 0 0 8px var(--gold), 0 0 12px #ffaa00;
    transition: width var(--transition-base);
}

.nav__links a:hover::after {
    width: 100%;
}

/* Dedicated Admin Button Styling */
.nav__btn-admin {
    background-color: var(--dark) !important;
    color: var(--gold) !important;
    font-family: var(--font-stencil) !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transition: all 0.3s !important;
    display: inline-block;
    margin-left: -40px; /* Décalage vers la gauche pour gagner de la place */
    margin-right: 15px; 
}

.nav__btn-admin:hover {
    background-color: var(--gold) !important;
    color: var(--dark) !important;
}

/* Remove the yellow underline effect specifically for the admin button */
.nav__links a.nav__btn-admin::after {
    display: none !important;
}

.nav__cart {
    position: relative;
    color: var(--cream);
    /* Back to original text color */
    padding: var(--space-xs);
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-stencil);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: none;
    border: none;
}

.nav__cart-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.nav__cart:hover .nav__cart-icon {
    transform: scale(1.1);
}

/* Ensure cart count matches gold theme */
.nav__cart-count {
    /* ... existing styles are good (gold bg, dark text) */
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background-color: var(--gold);
    color: var(--dark);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav.scrolled .nav__cart {
    color: var(--dark);
    /* Dark text on scroll */
}

.nav__cart:hover {
    color: var(--gold);
    /* Gold text on hover */
}

.nav__cart-count.show {
    opacity: 1;
    transform: scale(1);
}

/* Mobile Nav */
@media (max-width: 768px) {
    .nav__logo-long {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    /* Mobile Radio - Disable on Mobile */
    #headerRadioControls,
    .radio-header-premium {
        display: none !important;
    }

    /* Hide text on mobile */
    .radio-btn-text {
        display: none;
    }

    /* Show Mobile Radio Link in Menu */
    .nav__radio-mobile {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: var(--space-xs);
        padding-top: var(--space-xs);
    }

    .nav__radio-mobile a {
        color: var(--gold) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .radio-panel {
        width: 100%;
        right: -100%;
    }

    .radio-panel--active,
    .radio-panel.active {
        right: 0;
    }

    .nav__links {
        position: fixed;
        top: calc(var(--nav-height) + 12px);
        right: 12px;
        width: 240px;
        max-width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md) var(--space-sm);
        background-color: var(--dark);
        transform: translateX(calc(100% + 20px));
        transition: transform var(--transition-base);
        z-index: 1050;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: auto;
        list-style: none;
    }

    /* Ensure clickability */


    .nav--open .nav__links {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .nav__links li {
        width: 100%;
        text-align: center;
    }

    .nav__links a {
        display: block;
        padding: 10px 0;
        font-size: 1.1rem;
        color: var(--gold);
        font-family: var(--font-stencil);
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nav__btn-admin {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nav__cart-label {
        display: none;
    }

    .nav__cart {
        margin-left: auto;
        margin-right: var(--space-md);
    }

    .nav__cart-icon {
        width: 44px;
        height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('assets/header.webp') center center / cover no-repeat;
    background-color: var(--rust-dark);
    padding-top: var(--nav-height);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(44, 36, 30, 0.9) 0%,
            rgba(44, 36, 30, 0.6) 30%,
            rgba(44, 36, 30, 0.2) 60%,
            transparent 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-md);
    max-width: 900px;
    height: calc(100vh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero__title {
    font-family: var(--font-stencil);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.1;
    /* 
       COMPLEX "STEEL vs SUN" SPLIT BACKGROUND
       - Top: Metallic Steel Gradient
       - Bottom: Sun Yellow
       - Seam: Randomized/Jagged wave to vary per letter
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='steel' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23cccccc'/%3E%3Cstop offset='40%25' stop-color='%23eeeeee'/%3E%3Cstop offset='100%25' stop-color='%23999999'/%3E%3C/linearGradient%3E%3ClinearGradient id='sun' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fedc57'/%3E%3Cstop offset='100%25' stop-color='%23ffbf00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Top Half (Steel) as background --%3E%3Crect width='200' height='20' fill='url(%23steel)'/%3E%3C!-- Bottom Half (Sun) with Jagged Path --%3E%3Cpath d='M0 12 L 10 9 L 20 13 L 30 10 L 40 14 L 50 11 L 60 13 L 70 9 L 80 12 L 90 10 L 100 13 L 110 9 L 120 12 L 130 10 L 140 13 L 150 10 L 160 14 L 170 10 L 180 13 L 190 9 L 200 12 V 20 H 0 Z' fill='url(%23sun)'/%3E%3C/svg%3E");

    background-size: 200px 1.1em;
    /* Repeats every 200px */
    background-repeat: repeat;
    /* FIX: Repeat vertically to cover all lines */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

/* Hero Title Image */
.hero__title-img {
    max-width: 90%;
    width: clamp(320px, 60vw, 750px);
    height: auto;
    margin: 0 auto -8.5rem;
    /* Reduced gap approx 4x more */
    filter: none;
}

@media (max-width: 768px) {
    .hero__content {
        justify-content: flex-start;
        padding-top: 12vh;
    }

    .hero__title-group {
        flex: 0;
        justify-content: flex-start;
        margin-bottom: auto;
    }

    .hero__title-img {
        margin-bottom: -3rem;
    }
}

/* Hero Tagline Image */
.hero__tagline-img {
    max-width: 85%;
    width: clamp(200px, 35vw, 450px);
    /* Smaller than title */
    height: auto;
    margin: 0 auto;
    filter: none;
}

.hero__cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 2px solid var(--gold);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    background-color: transparent;
    transition: all var(--transition-base);
    margin-bottom: var(--space-lg);
}

.hero__cta:hover {
    background-color: var(--gold);
    color: var(--dark);
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────
   MANIFESTO SECTION
───────────────────────────────────────────────────────────────────────── */
.manifesto {
    position: relative;
    padding: var(--space-lg) 0;
    overflow: hidden;
    /* Contain blur */
}

/* Background Image Layer with Blur */
.manifesto::before {
    content: '';
    position: absolute;
    inset: -20px;
    /* Extend slightly to avoid white edges from blur */
    background: url('assets/bg-manifesto.webp') center center / cover no-repeat;
    filter: blur(8px);
    /* Strong blur as requested */
    z-index: 0;
}

/* Overlay Layer for Blending and Readability */
.manifesto::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Softer gradient: Darker at very top for blend, then light cream wash */
    background: linear-gradient(to bottom,
            rgba(44, 36, 30, 0.8) 0%,
            /* Matches Hero bottom */
            rgba(255, 248, 240, 0.6) 20%,
            /* Transition to transparent cream */
            rgba(255, 248, 240, 0.7) 100%
            /* Consistent light wash */
        );
    z-index: 1;
}

.manifesto__text {
    position: relative;
    z-index: 2;
    /* Text on top of everything */
    max-width: var(--container-narrow);
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.9;
    color: var(--dark);
    text-align: center;
}

.manifesto__text em {
    color: var(--rust);
    font-style: italic;
}

.manifesto__opening,
.manifesto__closing {
    font-size: 4rem;
    color: var(--gold);
    line-height: 0;
    vertical-align: middle;
}

.manifesto__closing {
    margin-left: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   TOTEM COLLECTION
───────────────────────────────────────────────────────────────────────── */
.totems {
    padding: 3rem 0 4rem;
    background-color: var(--cream-dark);
    position: relative;
    overflow: hidden;
}

.totems .section-header {
    margin-bottom: 2rem;
}

#totems::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/bg-boutique.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    filter: sepia(0.2) contrast(1.1);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    z-index: 0;
    pointer-events: none;
}

#totems .container {
    position: relative;
    z-index: 1;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-width: 1600px;
}

.totems__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: start;
    max-width: 100%;
}

@media (max-width: 900px) {
    .totems__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Reset explicit grid positions on mobile */
    .totem-card[data-product="olympique"],
    .totem-card--configurator[data-product="barbecue"] {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Totem Card */
.totem-card {
    background-color: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    min-width: 0; /* Prevent model-viewer from overflowing grid column */
    max-width: 100%; /* Ensure card never exceeds its grid column */
}

.totem-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}



.totem-card__badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background-color: var(--gold);
    color: var(--dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    z-index: 2;
}

.totem-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.totem-card__badge--inline {
    position: static;
    flex-shrink: 0;
    align-self: center;
    font-size: 0.55rem;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    line-height: 1.4;
}

/* Product status banner styles are consolidated in the TOTEM section below */

.btn-status-rupture {
    background-color: #d32f2f !important;
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-status-coming-soon {
    background-color: #1976D2 !important;
    opacity: 0.8;
    cursor: not-allowed;
}

.totem-card__image {
    position: relative;
    height: 180px;
    background-color: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.totem-card__image img {
    height: 90%;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-base);
}

.totem-card:hover .totem-card__image img {
    transform: scale(1.15);
    /* Pronounced zoom */
}

/* Product Status Banner (En Rupture / Bientôt Disponible) */
/* Small, clean horizontal label in top-left corner */
.product-status-banner {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #D32F2F;
    color: white;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

/* Coming Soon variant (blue) */
.product-status-banner[style*="background-color:#1976D2"],
.product-status-banner[style*="background-color: #1976D2"] {
    background-color: #1976D2 !important;
}


.totem-card__intro {
    padding: var(--space-sm) var(--space-sm) 0;
}

.totem-card__content {
    padding: var(--space-sm);
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.totem-card__name {
    font-family: var(--font-stencil);
    font-size: 1.4rem;
    color: var(--rust);
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.totem-card__desc {
    font-size: 0.85rem;
    color: var(--dark-light);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.totem-card__features {
    list-style: none;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.7rem;
    background-color: rgba(237, 233, 224, 0.5);
    border-radius: 6px;
    font-size: 0.72rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 6px;
}

.totem-card__features li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0;
    color: var(--dark-light);
    line-height: 1.5;
}

.totem-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--rust);
    font-weight: 700;
}

.totem-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--cream-dark);
    margin-top: auto;
}

.totem-card__price {
    font-family: var(--font-stencil);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rust);
    border: 1.5px solid rgba(180,130,0,0.38);
    border-radius: 5px;
    padding: 3px 14px;
    letter-spacing: 0.04em;
    display: inline-block;
}

.totem-card__btn {
    padding: 10px 20px;
    background: var(--gold);
    color: var(--dark);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 10px rgba(254, 220, 87, 0.45);
}

.totem-card__btn:hover {
    background: var(--gold-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(254, 220, 87, 0.55);
}

.totem-card__btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(254, 220, 87, 0.35);
}

.totem-card__btn:hover {
    background-color: var(--rust-dark);
    transform: scale(1.02);
}


/* Totem Options Section */
.totem-options {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.totem-options__title {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rust);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.02em;
}

.totem-options__group {
    margin-bottom: var(--space-sm);
}

.totem-options__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.totem-options__price-hint {
    font-size: 0.7rem;
    color: var(--dark-light);
    font-weight: 400;
}

.totem-options__info {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: var(--rust);
    color: var(--cream);
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: help;
    margin-left: 4px;
}

.totem-options__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--cream-dark);
    border-radius: 4px;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.totem-options__checkbox:hover {
    background-color: rgba(237, 233, 224, 0.8);
}

.totem-options__checkbox--color {
    cursor: default;
}


.totem-options__checkbox--included {
    opacity: 0.7;
}

/* Barbecue Configurator Styles */
.size-selector {
    display: flex;
    gap: 10px;
}

.size-option {
    cursor: pointer;
}

.size-option input {
    display: none;
}

.size-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 16px;
    border: 1.5px solid rgba(140, 100, 60, 0.3);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-stencil);
    letter-spacing: 0.06em;
    color: var(--dark-light);
    background: var(--cream);
    transition: all 0.18s;
    cursor: pointer;
    white-space: nowrap;
}

.size-btn__dim {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--dark-light);
    opacity: 0.7;
    margin-top: 1px;
}

.size-option:hover .size-btn {
    border-color: var(--rust);
    color: var(--rust);
    background: rgba(180, 90, 60, 0.06);
}

.size-option input:checked + .size-btn {
    background: var(--rust);
    color: var(--cream);
    border-color: var(--rust);
    box-shadow: 0 2px 8px rgba(140, 60, 30, 0.25), 0 0 0 2px rgba(254,220,87,0.75);
}

.size-option input:checked + .size-btn .size-btn__dim {
    color: rgba(249, 247, 242, 0.75);
    opacity: 1;
}

.included-label {
    color: var(--rust);
    font-size: 0.75rem;
}

/* Totem Call Message */
.totem-card__call-msg {
    font-size: 0.75rem;
    color: var(--dark-light);
    background-color: rgba(254, 220, 87, 0.1);
    padding: 0.6rem;
    border-radius: 4px;
    border-left: 3px solid var(--gold);
    margin-top: var(--space-sm);
    line-height: 1.4;
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}

.color-swatch {
    position: relative;
    cursor: pointer;
}

.color-swatch input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch .swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-swatch input[type="radio"]:checked+.swatch {
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89, 60, 41, 0.2);
    transform: scale(1.1);
}

.color-swatch:hover .swatch {
    transform: scale(1.05);
}

.swatch-inline {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #45322E;
    border: 2px solid var(--rust);
    vertical-align: middle;
}

.color-name-summary {
    font-size: 0.8rem;
    color: var(--dark);
}

/* Engraving Input */
.engraving-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    transition: border-color var(--transition-fast);
}

.engraving-input:focus {
    outline: none;
    border-color: var(--rust);
}

.engraving-input.hidden {
    display: none;
}

/* Barbecue Customization Elements */
.barbecue-name-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    transition: border-color var(--transition-fast);
}

.barbecue-name-input:focus {
    outline: none;
    border-color: var(--rust);
}

.handle-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.handle-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--cream-dark);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.handle-option:hover {
    background-color: rgba(237, 233, 224, 0.8);
}

.handle-option input[type="radio"] {
    margin: 0;
}

.handle-option__label {
    font-size: 0.8rem;
    color: var(--dark);
}

.special-handle-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.special-handle-input:focus {
    outline: none;
    border-color: var(--rust);
}

.special-handle-input.hidden {
    display: none;
}

/* Featured Card */
.totem-card--featured {
    border: 2px solid var(--gold);
}

/* Force Olympique and Barbecue on the same row */
.totem-card[data-product="olympique"] {
    grid-column: 1;
    grid-row: 2;
}

.totem-card--configurator[data-product="barbecue"] {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    /* Fix layout: Force vertical stacking */
    display: flex;
    flex-direction: column;
}

/* MOBILE FIX: Reset grid positions on mobile (must come AFTER fixed positions) */
@media (max-width: 900px) {
    .totem-card[data-product="olympique"] {
        grid-column: auto;
        grid-row: auto;
    }

    .totem-card--configurator[data-product="barbecue"] {
        grid-column: auto;
        grid-row: auto;
    }
}

.totem-card--configurator[data-product="barbecue"] .totem-card__image {
    width: 100%;
    height: auto;
    min-height: 260px;
    flex: none;
}

/* Compact overrides for barbecue card */
.totem-card--configurator[data-product="barbecue"] .totem-card__intro {
    padding: 0.65rem 0.85rem 0;
}
.totem-card--configurator[data-product="barbecue"] .totem-card__desc {
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-card__content {
    padding: 0.6rem 0.85rem 0.85rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-card__features {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.7rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-options {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-options__title {
    margin-bottom: 0.35rem;
    font-size: 0.84rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-options__group {
    margin-bottom: 0.5rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-options__label {
    margin-bottom: 0.25rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-card__call-msg {
    font-size: 0.73rem;
    padding: 0.35rem 0.6rem;
    margin-top: 0.3rem;
}
.totem-card--configurator[data-product="barbecue"] .totem-card__footer {
    padding-top: 0.6rem;
    margin-top: 0.3rem;
}

/* ─── Boutons taille barbecue ─── */
.size-selector {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.size-option {
    flex: 1;
}
.size-btn {
    width: 100%;
    justify-content: center;
}

/* Configurator Card */
.totem-card--configurator .totem-card__content {
    padding-bottom: var(--space-sm);
}

.configurator {
    margin-bottom: var(--space-sm);
}

.configurator__base {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background-color: var(--rust);
    color: var(--cream);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.85rem;
}

.configurator__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.configurator__option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.6rem;
    background-color: var(--cream-dark);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.configurator__option:hover {
    background-color: var(--cream);
}

.configurator__option input {
    display: none;
}

.configurator__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--rust);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.configurator__checkbox::after {
    content: '✓';
    color: var(--cream);
    font-size: 0.8rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-fast);
}

.configurator__option input:checked+.configurator__checkbox {
    background-color: var(--rust);
}

.configurator__option input:checked+.configurator__checkbox::after {
    opacity: 1;
    transform: scale(1);
}

.configurator__label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark);
}

.configurator__add {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rust);
}

/* ─────────────────────────────────────────────────────────────────────────
   TOTEM CAROUSEL
───────────────────────────────────────────────────────────────────────── */
.totem-carousel {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.totem-carousel__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-out;
}

.totem-carousel__img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    padding: 0;
}

.totem-carousel__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.totem-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.3s;
}

.totem-carousel__dot.active {
    background: var(--rust);
}

.totem-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--rust);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s;
}

.totem-carousel:hover .totem-carousel__btn {
    opacity: 1;
}

.totem-carousel__btn--prev {
    left: 10px;
}

.totem-carousel__btn--next {
    right: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LA BOUTIQUE
───────────────────────────────────────────────────────────────────────── */
.boutique {
    padding: var(--space-xl) 0 var(--space-2xl);
    background-color: var(--cream);
}

.boutique__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1200px) {
    .boutique__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .boutique__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.boutique-card {
    position: relative;
    background-color: var(--cream-dark);
    border-radius: 8px;
    padding: var(--space-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.boutique-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.boutique-card__image {
    position: relative;
    height: 120px;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.boutique-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    transition: transform var(--transition-base);
}

.boutique-card:hover .boutique-card__image img {
    transform: scale(1.05);
}

.boutique-card__placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--rust);
    opacity: 0.15;
}

.boutique-card__placeholder--beret {
    border-radius: 50% 50% 40% 40%;
}

.boutique-card__placeholder--sacoche {
    border-radius: 8px;
    width: 90px;
    height: 70px;
}

.boutique-card__placeholder--couteau {
    width: 100px;
    height: 30px;
    border-radius: 4px;
}

.boutique-card__placeholder--cercle {
    border: 4px solid var(--rust);
    background: transparent;
    opacity: 0.4;
}

.boutique-card__placeholder--cochonnet {
    width: 40px;
    height: 40px;
}

.boutique-card__name {
    font-family: var(--font-stencil);
    font-size: 1.1rem;
    color: var(--rust);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.02em;
}

.boutique-card__desc {
    font-size: 0.8rem;
    color: var(--dark-light);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.boutique-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.boutique-card__price {
    font-family: var(--font-stencil);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rust);
    border: 1.5px solid rgba(180,130,0,0.38);
    border-radius: 5px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
    display: inline-block;
}

.boutique-card__btn {
    padding: 0.8rem 1.6rem;
    background-color: var(--rust);
    color: var(--cream);
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-base);
}

.boutique-card__btn:hover {
    background-color: var(--gold);
    color: var(--dark);
    transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────
   L'ALMANACH
───────────────────────────────────────────────────────────────────────── */
.almanach {
    padding: var(--space-xl) 0 var(--space-2xl);
    background-color: var(--rust);
}

.almanach__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1000px) {
    .almanach__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ─── Lumière rotative générique ─── */
/* Titre fondateurs */
.founders-title-wrap {
    position: relative;
    display: inline-block;
    border-radius: 6px;
    overflow: hidden;
    padding: 2px;
    margin-bottom: var(--space-lg);
}

.founders-title-wrap::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(180, 130, 0, 0.75) 28deg,
        transparent 56deg
    );
    animation: almanach-glow-spin 8s linear infinite;
    will-change: transform;
}

.founders-title-wrap .founders__title {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    padding: 8px 20px;
    background: var(--cream-dark);
    border-radius: 5px;
}

/* Signature Lancelot — plus subtile */
.founders-sig-wrap {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    padding: 2px;
}

.founders-sig-wrap::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(180, 130, 0, 0.4) 22deg,
        transparent 44deg
    );
    animation: almanach-glow-spin 10s linear infinite;
    animation-delay: -3s;
    will-change: transform;
}

.founders-sig-wrap .founders__signature {
    position: relative;
    z-index: 1;
    padding: 4px 14px;
    background: var(--cream-dark);
    border-radius: 3px;
}

/* Lumière rotative autour du titre */
.almanach-title-wrap {
    position: relative;
    display: inline-block;
    border-radius: 6px;
    overflow: hidden;
    padding: 2px;
    margin-bottom: var(--space-sm);
}

.almanach-title-wrap::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(254, 220, 87, 0.95) 30deg,
        transparent 60deg
    );
    animation: almanach-glow-spin 7s linear infinite;
    will-change: transform;
}

.almanach-title-wrap .section-header__title {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 8px 24px;
    background: var(--rust);
    border-radius: 5px;
}

/* Wrapper pour la lumière rotative */
.almanach-card-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    padding: 2px;
}

.almanach-card-wrap::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(254, 220, 87, 0.0) 0deg,
        rgba(254, 220, 87, 0.95) 35deg,
        rgba(254, 220, 87, 0.0) 70deg,
        transparent 70deg
    );
    animation: almanach-glow-spin 5s linear infinite;
    will-change: transform;
}

.almanach-card-wrap:nth-child(2)::before { animation-delay: -1.25s; }
.almanach-card-wrap:nth-child(3)::before { animation-delay: -2.5s; }
.almanach-card-wrap:nth-child(4)::before { animation-delay: -3.75s; }

@keyframes almanach-glow-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.almanach-card {
    position: relative;
    height: 350px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.almanach-card:hover {
    transform: scale(1.02);
}

.almanach-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.almanach-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(44, 36, 30, 0.95) 0%,
            rgba(44, 36, 30, 0.6) 50%,
            rgba(44, 36, 30, 0.3) 100%);
}

.almanach-card[data-modal="naissance"] .almanach-card__bg {
    background-image: url('assets/almanach/naissance.webp');
}

.almanach-card[data-modal="apero"] .almanach-card__bg {
    background-image: url('assets/almanach/apero.webp');
}

.almanach-card[data-modal="parler"] .almanach-card__bg {
    background-image: url('assets/almanach/parler.webp');
}

.almanach-card[data-modal="regles"] .almanach-card__bg {
    background-image: url('assets/almanach/regles.webp');
}

.almanach-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    color: var(--cream);
}

.almanach-card__year {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold);
    display: block;
    margin-bottom: var(--space-xs);
}

.almanach-card__title {
    font-family: var(--font-stencil);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.almanach-card__hint {
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.almanach-card:hover .almanach-card__hint {
    opacity: 0.8;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOUNDERS SECTION
───────────────────────────────────────────────────────────────────────── */
.founders {
    position: relative;
    padding: var(--space-2xl) 0;
    background-color: var(--cream-dark);
    overflow: hidden;
}

.founders__bg {
    position: absolute;
    inset: 0;
    background: url('assets/founders-bg.webp') center top / cover no-repeat;
    opacity: 0.28;
    filter: sepia(15%) saturate(0.9);
}

.founders .container {
    position: relative;
    z-index: 1;
}

.founders__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.founders__title {
    font-family: var(--font-stencil);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    color: var(--rust);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.founders__text {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.8;
    color: #110d0a;
    margin-bottom: var(--space-md);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.founders__text em {
    font-style: italic;
    color: var(--rust);
}

.founders__text strong {
    color: var(--rust);
}

.founders__signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 600;
    color: #110d0a;
    margin-top: var(--space-lg);
    text-align: right;
    width: 100%;
    display: block;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────────────── */
.footer {
    background-color: var(--dark);
    color: var(--cream);
    padding: var(--space-md) 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
    .footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.footer__logo {
    font-family: var(--font-stencil);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: var(--space-sm);
}

.footer__tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: rgba(249, 247, 242, 0.7);
}

.footer__links h4,
.footer__contact h4 {
    font-family: var(--font-stencil);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: var(--space-sm);
}

.footer__links a,
.footer__contact p {
    display: block;
    font-size: 0.9rem;
    color: rgba(249, 247, 242, 0.7);
    margin-bottom: var(--space-xs);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--gold);
}

.footer__contact-form h4 {
    font-family: var(--font-stencil);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: var(--space-sm);
}

.footer__contact-input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(249, 247, 242, 0.2);
    border-radius: 4px;
    background: rgba(249, 247, 242, 0.08);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    transition: border-color 0.2s;
}

.footer__contact-input::placeholder {
    color: rgba(249, 247, 242, 0.4);
}

.footer__contact-input:focus {
    outline: none;
    border-color: var(--gold);
}

.footer__contact-textarea {
    resize: vertical;
    min-height: 60px;
}

.footer__contact-btn {
    background: var(--gold);
    color: var(--dark);
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.footer__contact-btn:hover {
    background: var(--gold-dark);
}

.footer__contact-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.footer__seo {
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(249, 247, 242, 0.1);
}

.footer__seo p {
    font-size: 0.75rem;
    color: rgba(249, 247, 242, 0.4);
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.footer__bottom {
    border-top: 1px solid rgba(249, 247, 242, 0.1);
    padding-top: var(--space-md);
    text-align: center;
}

.footer__bottom p {
    font-size: 0.85rem;
    color: rgba(249, 247, 242, 0.5);
}

.footer__legal-links {
    margin-top: var(--space-xs);
}

.footer__legal-links a {
    color: rgba(249, 247, 242, 0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__legal-links a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.footer__separator {
    margin: 0 0.5rem;
    color: rgba(249, 247, 242, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   COOKIE CONSENT BANNER
───────────────────────────────────────────────────────────────────────── */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, var(--dark), var(--rust-dark));
    padding: var(--space-md);
    z-index: 9999;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-out);
    border-top: 2px solid var(--gold);
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-consent__content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cookie-consent__icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.cookie-consent__text {
    flex: 1;
    min-width: 250px;
}

.cookie-consent__title {
    font-family: var(--font-stencil);
    font-size: 1.1rem;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.cookie-consent__desc {
    font-size: 0.9rem;
    color: var(--cream);
    line-height: 1.5;
}

.cookie-consent__desc a {
    color: var(--gold);
    text-decoration: underline;
    transition: opacity var(--transition-fast);
}

.cookie-consent__desc a:hover {
    opacity: 0.8;
}

.cookie-consent__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.cookie-consent__btn {
    padding: 0.75rem 1.5rem;
    font-family: var(--font-stencil);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.cookie-consent__btn--accept {
    background-color: var(--gold);
    color: var(--dark);
    border: 2px solid var(--gold);
}

.cookie-consent__btn--accept:hover {
    background-color: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 220, 87, 0.3);
}

.cookie-consent__btn--refuse {
    background-color: transparent;
    color: var(--cream);
    border: 2px solid rgba(249, 247, 242, 0.3);
}

.cookie-consent__btn--refuse:hover {
    border-color: var(--cream);
    background-color: rgba(249, 247, 242, 0.1);
}

/* Mobile responsiveness for cookie banner */
@media (max-width: 768px) {
    .cookie-consent {
        padding: var(--space-sm);
    }

    .cookie-consent__content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .cookie-consent__icon {
        font-size: 2rem;
    }

    .cookie-consent__text {
        min-width: auto;
    }

    .cookie-consent__actions {
        width: 100%;
        justify-content: center;
    }

    .cookie-consent__btn {
        flex: 1;
        padding: 0.6rem 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   CART SIDEBAR
───────────────────────────────────────────────────────────────────────── */
.cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    height: 100vh;
    background-color: var(--cream);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-slow), width var(--transition-slow), max-width var(--transition-slow);
}

.cart--expanded {
    max-width: 650px;
    /* Expanded width for checkout */
}

@media (max-width: 700px) {
    .cart--expanded {
        max-width: 100%;
    }
}

.cart.open {
    transform: translateX(0);
}

.cart__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(44, 36, 30, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.cart__overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--cream-dark);
}

.cart__title {
    font-family: var(--font-stencil);
    font-size: 1.2rem;
    color: var(--rust);
    letter-spacing: 0.1em;
}

.cart__close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.cart__close:hover {
    background-color: var(--cream-dark);
}

.cart__items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.cart__empty {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--dark-light);
}

.cart__empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    opacity: 0.3;
}

.cart__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--cream-dark);
    border-radius: 6px;
    margin-bottom: var(--space-sm);
}

.cart__item-info {
    flex: 1;
}

.cart__item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
    margin-bottom: 2px;
}

.cart__item-options {
    font-size: 0.75rem;
    color: var(--dark-light);
}

.cart__item-price {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--rust);
}

.cart__item-remove {
    width: 28px;
    height: 28px;
    font-size: 1rem;
    color: var(--dark-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.cart__item-remove:hover {
    background-color: var(--rust);
    color: var(--cream);
}

.cart__item-qty {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart__item-qty span {
    min-width: 18px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
}

.cart__qty-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(69,50,46,0.25);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    transition: all var(--transition-fast);
}

.cart__qty-btn:hover {
    background-color: var(--rust);
    color: var(--cream);
    border-color: var(--rust);
}

.cart__item--gift {
    border: 2px dashed var(--gold);
    background-color: rgba(245, 158, 11, 0.05);
}

.cart__gift-selector {
    background: linear-gradient(135deg, var(--dark) 0%, #3a322c 100%);
    color: var(--cream);
    padding: var(--space-md);
    border-radius: 8px;
    margin-top: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.cart__gift-title {
    font-family: var(--font-stencil);
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart__gift-desc {
    font-size: 0.8rem;
    margin-bottom: var(--space-sm);
    color: rgba(249, 247, 242, 0.8);
    line-height: 1.4;
}

.cart__gift-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.gift-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--cream);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: left;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.gift-btn:hover {
    background: var(--gold);
    color: var(--dark);
    border-color: var(--gold);
    transform: translateX(5px);
}

.cart__gift-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gold);
    color: var(--dark);
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: var(--space-md);
    animation: slideUp 0.3s ease-out;
}

.gift-change-btn {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.2s;
}

.gift-change-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cart__footer {
    padding: var(--space-md);
    border-top: 1px solid var(--cream-dark);
    background-color: var(--cream);
}

.cart__shipping {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
}

.cart__shipping-free {
    color: #2e7d32;
    font-weight: 600;
}

.cart__total {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--cream-dark);
}

/* Trust Block */
.cart__trust {
    background: linear-gradient(135deg, rgba(254, 220, 87, 0.1) 0%, rgba(254, 220, 87, 0.05) 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    text-align: center;
}

.cart__trust-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-xs);
}

.cart__trust-title {
    font-family: var(--font-stencil);
    font-size: 0.9rem;
    color: var(--rust);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.cart__trust-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--dark);
    font-weight: 600;
}

.cart__checkout {
    width: 100%;
    padding: 1rem;
    background-color: var(--rust);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.cart__checkout:hover {
    background-color: var(--rust-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cart__checkout--stripe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: linear-gradient(135deg, #6772e5 0%, #555bc1 100%);
}

.cart__checkout--stripe:hover {
    background: linear-gradient(135deg, #555bc1 0%, #444aa8 100%);
}

.stripe-icon {
    width: 20px;
    height: 20px;
}

/* Cart Steps */
.cart__step {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.cart__step--active {
    display: flex;
}

.cart__summary {
    padding: var(--space-md);
    border-top: 1px solid var(--cream-dark);
    background-color: var(--cream);
}

.cart__back {
    padding: var(--space-sm) var(--space-md);
    background: none;
    color: var(--rust);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid var(--cream-dark);
    transition: background-color var(--transition-fast);
}

.cart__back:hover {
    background-color: var(--cream-dark);
}

/* Checkout Form */
.checkout-form {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.checkout-form__title {
    font-family: var(--font-stencil);
    font-size: 0.95rem;
    color: var(--rust);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-md);
    margin-top: var(--space-md);
}

.checkout-form__title:first-of-type {
    margin-top: 0;
}

.checkout-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.checkout-form__field {
    margin-bottom: var(--space-sm);
}

.checkout-form__field label {
    display: block;
    font-size: 0.95rem;
    /* Increased from 0.8rem */
    font-weight: 600;
    /* Increased from 500 */
    color: var(--dark);
    /* Darker for better contrast */
    margin-bottom: 6px;
}

.checkout-form__field input,
.checkout-form__field select,
.checkout-form__field textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    /* Increased padding */
    font-family: var(--font-sans);
    font-size: 1rem;
    /* Increased from 0.9rem */
    border: 1px solid var(--cream-dark);
    border-radius: 6px;
    background-color: #fff;
    /* White bg for better input visibility */
    color: var(--dark);
    transition: all var(--transition-fast);
}

.checkout-form__field input:focus,
.checkout-form__field select:focus,
.checkout-form__field textarea:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89, 60, 41, 0.1);
}

.checkout-form__field input::placeholder,
.checkout-form__field textarea::placeholder {
    color: var(--dark-light);
    opacity: 0.6;
}

.checkout-form__field textarea {
    resize: vertical;
    min-height: 80px;
}

.checkout-form__summary {
    background-color: var(--cream-dark);
    border-radius: 8px;
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

.checkout-form__summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
    font-size: 0.9rem;
}

.checkout-form__summary-row:last-child {
    margin-bottom: 0;
}

.checkout-form__summary-total {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.checkout-form__free {
    color: #2e7d32;
    font-weight: 600;
}

.checkout-form__secure {
    text-align: center;
    font-size: 0.8rem;
    color: var(--dark-light);
    margin-top: var(--space-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────────────────── */
/* Standardized activation for both modals and lightboxes */
.modal.open,
.modal.active,
.lightbox.open,
.lightbox.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(44, 36, 30, 0.95);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal__content {
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    background-color: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--transition-base);
}

.modal.open .modal__content {
    transform: scale(1);
}

.modal__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    filter: sepia(30%);
}

.modal__header,
.modal__text {
    position: relative;
    z-index: 1;
}

.modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 44px;
    height: 44px;
    background-color: var(--cream-dark);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Increased z-index */
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background-color: var(--rust);
    color: var(--cream);
}

.modal__body {
    padding: var(--space-xl);
    max-height: 90vh;
    overflow-y: auto;
}

.modal__header {
    margin-bottom: var(--space-lg);
}

.modal__year {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: var(--space-xs);
}

.modal__title {
    font-family: var(--font-stencil);
    font-size: 2rem;
    color: var(--rust);
    letter-spacing: 0.1em;
}

.modal__text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--dark);
}

.modal__text p {
    margin-bottom: var(--space-md);
}

.modal__text strong {
    color: var(--rust);
}

.modal__text em {
    font-style: italic;
}

.modal__definition {
    background-color: var(--cream-dark);
    padding: var(--space-md);
    border-radius: 6px;
    margin-bottom: var(--space-sm);
    border-left: 4px solid var(--gold);
}

.modal__definition-term {
    font-family: var(--font-stencil);
    color: var(--rust);
    margin-bottom: var(--space-xs);
}

/* Quote Modal Specific */
.modal__content--quote {
    max-width: 600px;
}

.modal__subtitle {
    font-size: 1rem;
    color: var(--dark-light);
    margin-top: 4px;
}

.quote-form__summary {
    background-color: var(--cream-dark);
    padding: var(--space-md);
    border-radius: 8px;
    margin-bottom: var(--space-lg);
    border-left: 4px solid var(--rust);
}

.quote-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.quote-form__field--full {
    grid-column: span 2;
}

.quote-form__field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

.quote-form__field input,
.quote-form__field textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    border: 1px solid var(--cream-dark);
    border-radius: 6px;
    background-color: #fff;
    transition: all var(--transition-fast);
}

.quote-form__field input:focus,
.quote-form__field textarea:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89, 60, 41, 0.1);
}

.quote-form__submit {
    width: 100%;
    padding: 1.2rem;
    background-color: var(--rust);
    color: var(--cream);
    border: none;
    border-radius: 6px;
    font-family: var(--font-stencil);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quote-form__submit:hover {
    background-color: var(--dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quote-form__note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--dark-light);
    margin-top: var(--space-sm);
}

@media (max-width: 600px) {
    .quote-form__grid {
        grid-template-columns: 1fr;
    }

    .quote-form__field--full {
        grid-column: span 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PRO SECTION
───────────────────────────────────────────────────────────────────────── */
.pro {
    position: relative;
    padding: var(--space-xl) 0;
    overflow: hidden;
    background-color: var(--cream);
}

.pro__bg {
    position: absolute;
    inset: 0;
    background: url('assets/bg-pro.webp') center center / cover no-repeat;
    opacity: 0.15;
    filter: sepia(0.2);
}

.pro__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.pro__text {
    text-align: left;
    padding-right: var(--space-md);
}

.pro__text .section-header {
    margin-bottom: var(--space-md);
    text-align: left;
    /* Ensure header aligns left */
}

.pro__text .section-header__title {
    font-size: 2.2rem;
    color: var(--dark);
    line-height: 1.2;
}

.pro__text .section-header__subtitle {
    color: var(--rust);
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 500;
}

.pro__description {
    color: var(--dark-light);
    line-height: 1.8;
    /* Better readability */
    font-size: 1.1rem;
    margin-top: var(--space-md);
}

.pro__form-wrapper {
    background-color: rgba(255, 255, 255, 0.98);
    padding: var(--space-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
}

.pro__form {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.pro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    /* More airy gap */
}

.pro__field {
    text-align: left;
}

.pro__field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rust);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.pro__field input,
.pro__field textarea,
.pro__select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--cream-dark);
    border-radius: 8px;
    background-color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--dark);
    transition: all var(--transition-fast);
}

.pro__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23593c29' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.pro__field input:focus,
.pro__field textarea:focus,
.pro__select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(181, 142, 63, 0.1);
}

.pro__field--full {
    grid-column: 1 / -1;
}

.pro__btn {
    width: 100%;
    padding: 1rem;
    background-color: var(--rust);
    color: var(--cream);
    border: none;
    border-radius: 8px;
    font-family: var(--font-stencil);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.pro__btn:hover {
    background-color: var(--dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pro__note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--dark-light);
    margin-top: 15px;
    font-style: italic;
}

/* Engraving Option Style */
.totem-card__options-wrapper {
    width: 100%;
}

.totem-card__option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rust);
    cursor: pointer;
    width: 100%;
    justify-content: flex-end;
}

.totem-card__option input {
    accent-color: var(--rust);
    width: 16px;
    height: 16px;
}

.engraving-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-bottom: 10px;
    transition: all var(--transition-fast);
}

.engraving-input:focus {
    outline: none;
    border-color: var(--rust);
}

.hidden {
    display: none;
}

.totem-card__footer {
    flex-wrap: wrap;
    /* Allow option to wrap above price/btn if needed, or stay inline */
}

@media (max-width: 900px) {
    .pro__layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pro__text {
        text-align: center;
        margin-bottom: var(--space-lg);
    }

    .pro__text .section-header {
        margin-bottom: 0.75rem;
    }

    .pro__description {
        margin-top: 0.75rem;
    }
}

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

/* ─────────────────────────────────────────────────────────────────────────
   TESTIMONIALS SECTION
───────────────────────────────────────────────────────────────────────── */
.testimonials {
    position: relative;
    padding: 4rem 0 3.5rem;
    background-color: #e8d9c2;
    overflow: hidden;
    color: var(--dark);
}

.testimonials__bg {
    display: block;
    position: absolute;
    inset: 0;
    background: url('assets/bg-testimonials.jpg') center center / cover no-repeat;
    opacity: 0.45;
    mix-blend-mode: normal;
}

/* Warm scrim to keep text readable */
.testimonials__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(240,228,210,0.45);
}

.relative-z {
    position: relative;
    z-index: 1;
}

.testimonials .section-header {
    margin-bottom: 2.5rem;
}
.testimonials .section-header__title {
    color: var(--dark);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.testimonials .section-header__subtitle {
    color: var(--dark-light);
    opacity: 1;
}
.testimonials .section-header__eyebrow {
    color: var(--rust);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.testimonial-card {
    background: rgba(252,242,224,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,240,200,0.7);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(89,60,41,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.28s, box-shadow 0.28s, background 0.28s;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    background: rgba(252,242,224,0.72);
    box-shadow: 0 18px 48px rgba(89,60,41,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}

.testimonial-card__body {
    padding: 1.6rem 1.5rem 1.2rem 1.8rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Decorative opening quote */
.testimonial-card__body::before {
    content: '\201C';
    display: block;
    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: 0.7;
    color: rgba(140,85,30,0.28);
    margin-bottom: 0.4rem;
    pointer-events: none;
    user-select: none;
}

.testimonial-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.testimonial-card__meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.testimonial-card__author {
    font-weight: 700;
    color: var(--dark);
    font-family: var(--font-stencil);
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    white-space: nowrap;
}

.testimonial-card__badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

.testimonial-card__badge.pro {
    background: var(--gold);
    color: var(--dark);
}

.testimonial-card__badge.particulier {
    background: transparent;
    border: 1px solid rgba(89,60,41,0.3);
    color: rgba(89,60,41,0.6);
}

.testimonial-card__rating {
    color: var(--gold);
    font-size: 0.82rem;
    margin-bottom: 0.7rem;
    letter-spacing: 0.08em;
}

.testimonial-card__text {
    font-style: italic;
    color: rgba(44,28,14,0.85);
    line-height: 1.7;
    font-size: 0.9rem;
    flex: 1;
}

.testimonial-card__date {
    font-size: 0.72rem;
    color: var(--rust);
    font-style: italic;
    opacity: 0.75;
    white-space: nowrap;
}

.testimonials__actions {
    text-align: center;
    margin-top: 2.5rem;
}

.testimonials__btn {
    display: inline-block;
    padding: 0.72rem 2.2rem;
    background: transparent;
    color: var(--rust);
    border: 1.5px solid rgba(89,60,41,0.4);
    font-family: var(--font-stencil);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    border-radius: 5px;
}

.testimonials__btn:hover {
    background: var(--rust);
    border-color: var(--rust);
    color: var(--cream);
}

.testimonials__btn::after { content: none; }

.modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(44, 36, 30, 0.6);
}

.modal__content--small {
    max-width: 550px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(89,60,41,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    background: #faf5ec;
    color: var(--dark);
}

/* Review Form Styles */
.review-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.review-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.review-form__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rust);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.review-form__field input[type="text"],
.review-form__field input[type="number"],
.review-form__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba(89,60,41,0.15);
    border-radius: 6px;
    background: #fff;
    color: var(--dark);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.review-form__field input::placeholder,
.review-form__field textarea::placeholder {
    color: rgba(89,60,41,0.35);
}

.review-form__field input:focus,
.review-form__field textarea:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89,60,41,0.08);
}

/* Segmented Control (Radio Toggle) */
.segmented-control {
    display: flex;
    background: rgba(89,60,41,0.06);
    border: 1.5px solid rgba(89,60,41,0.12);
    padding: 3px;
    border-radius: 8px;
    gap: 3px;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    color: rgba(89,60,41,0.5);
}

.segmented-control input[type="radio"]:checked+label {
    background: var(--rust);
    color: var(--cream);
    box-shadow: 0 1px 4px rgba(89,60,41,0.2);
}

/* Rating Input */
.rating-input {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 120px;
}

.rating-star {
    font-size: 1.4rem;
    color: var(--gold);
}

.review-form__submit {
    width: 100%;
    padding: 1rem;
    background: var(--rust);
    color: var(--cream);
    border: none;
    border-radius: 6px;
    font-family: var(--font-stencil);
    font-size: 1rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-top: 0.5rem;
}

.review-form__submit:hover {
    background: var(--dark);
    transform: translateY(-1px);
}

.review-form__file-input {
    padding: 0.5rem !important;
    font-size: 0.82rem !important;
    border: 1.5px dashed rgba(89,60,41,0.2) !important;
    background: #fff !important;
    color: var(--dark) !important;
    border-radius: 6px;
    cursor: pointer;
}

.review-form__file-hint {
    font-size: 0.72rem;
    color: var(--rust);
    font-style: italic;
    margin-top: -0.2rem;
    opacity: 0.7;
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(44, 36, 30, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
    backdrop-filter: blur(10px);
}

.lightbox.open {
    display: flex;
    opacity: 1;
}

.lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    transform: scale(0.95);
    transition: transform var(--transition-base);
}

.lightbox.open .lightbox__content {
    transform: scale(1);
}

.lightbox__content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.lightbox__close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
    transition: transform var(--transition-base);
}

.lightbox__close:hover {
    transform: rotate(90deg) scale(1.2);
    color: var(--gold);
}

/* Photo — inset with padding & rounded */
.testimonial-card__photo-container {
    margin: 0 1.5rem 1.5rem 1.8rem;
    border-radius: 7px;
    overflow: hidden;
    height: 145px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(89,60,41,0.12);
}

.testimonial-card__photo-container:hover .testimonial-card__photo {
    transform: scale(1.04);
}

.testimonial-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Compact Grid Logic */
.testimonials__grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

.testimonials__grid--compact .testimonial-card {
    padding: var(--space-sm);
}

.testimonials__grid--compact .testimonial-card__text {
    font-size: 0.85rem;
    line-height: 1.4;
}

.testimonials__grid--compact .testimonial-card__photo-container {
    max-width: 80px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.6s var(--ease-out) forwards;
}

/* Add to cart animation */
@keyframes addedPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        background-color: var(--gold);
        color: var(--dark);
    }

    100% {
        transform: scale(1);
    }
}

.btn-added {
    animation: addedPulse 0.4s var(--ease-out);
}

/* ─────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   TOTEM OPTIONS (Color Picker, Handles, etc.)
───────────────────────────────────────────────────────────────────────── */
.totem-options {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--cream-dark);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.totem-options__title {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rust);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.totem-options__group {
    margin-bottom: var(--space-sm);
}

.totem-options__group:last-child {
    margin-bottom: 0;
}

.totem-options__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 8px;
}

.totem-options__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 5px 6px;
    background-color: var(--cream);
    border-radius: 4px;
    transition: background-color var(--transition-fast);
}

.totem-options__checkbox:hover {
    background-color: var(--cream-dark);
}

.totem-options__checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--rust);
    cursor: pointer;
}

.swatch-inline {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.totem-options__info {
    color: var(--rust-light);
    font-size: 0.9rem;
    cursor: help;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.totem-options__info:hover {
    opacity: 1;
}

.totem-options__price-hint {
    font-size: 0.75rem;
    color: var(--rust-light);
    font-weight: 400;
    margin-left: 4px;
    opacity: 0.9;
}

.totem-options__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 8px;
    background-color: var(--cream);
    border-radius: 4px;
    transition: background-color var(--transition-fast);
}

.totem-options__checkbox:hover {
    background-color: var(--cream-dark);
}

.totem-options__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--rust);
    cursor: pointer;
}

/* Included Options Badge */
.totem-options__included {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #2e7d32;
    margin-bottom: var(--space-sm);
    border: 1px solid #a5d6a7;
}

.totem-options__included-label {
    font-weight: 700;
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.color-swatch {
    position: relative;
    cursor: pointer;
}

.color-swatch input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch .swatch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.color-swatch:hover .swatch {
    transform: scale(1.1);
}

.color-swatch input[type="radio"]:checked+.swatch {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(254, 220, 87, 0.4), var(--shadow-md);
    transform: scale(1.1);
}

/* Handle Picker */
.handle-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.handle-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    background-color: var(--cream);
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.handle-option:hover {
    background-color: #fff;
    border-color: var(--cream-dark);
}

.handle-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--rust);
    cursor: pointer;
}

.handle-option input[type="radio"]:checked+.handle-option__label {
    color: var(--rust);
    font-weight: 600;
}

.handle-option:has(input[type="radio"]:checked) {
    border-color: var(--rust);
    background-color: rgba(89, 60, 41, 0.08);
}

.handle-option__label {
    font-size: 0.9rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Input Styling for Barbecue */
.barbecue-name-input,
.special-handle-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    border: 2px solid var(--cream);
    border-radius: 6px;
    background-color: #fff;
    transition: all var(--transition-fast);
}

.barbecue-name-input:focus,
.special-handle-input:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89, 60, 41, 0.15);
}

.special-handle-input {
    margin-top: 10px;
    resize: vertical;
    min-height: 60px;
}

/* Engraving Input styling update */
.engraving-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    border: 2px solid var(--cream);
    border-radius: 6px;
    background-color: #fff;
    margin-top: 8px;
    transition: all var(--transition-fast);
}

.engraving-input:focus {
    outline: none;
    border-color: var(--rust);
    box-shadow: 0 0 0 3px rgba(89, 60, 41, 0.15);
}

/* Tooltip styling */
[title] {
    position: relative;
}

/* Price styling update for totems with options */
.totem-card__price[data-base-price] {
    font-weight: 700;
}

/* Included options styling */
.totem-options__checkbox--included {
    background-color: rgba(46, 125, 50, 0.1);
    border-left: 3px solid #2e7d32;
}

.totem-options__checkbox--included input[type="checkbox"] {
    accent-color: #2e7d32;
}

.included-label {
    color: #2e7d32;
    font-weight: 600;
    font-style: normal;
}

/* Checkbox container styling */
.totem-options__checkbox+.totem-options__checkbox {
    margin-top: 6px;
}


#boutique {
    position: relative;
    padding: var(--space-xl) 0;
    overflow: hidden;
}

#boutique::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/bg-boutique.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    /* Match neighbors' intensity */
    filter: sepia(0.2) contrast(1.1);
    /* Match tone */
    /* "Fondu" effect: fade top and bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    z-index: 0;
    pointer-events: none;
}

#boutique .container {
    position: relative;
    z-index: 1;
}

/* Boutique Grid (Refined: 3 columns) */
.boutique__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns as requested */
    gap: var(--space-md);
    margin-top: var(--space-md);
    align-items: start;
}

@media (max-width: 1000px) {
    .boutique__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ─────────────────────────────────────────────────────────────────────────
   BOUTIQUE ENHANCEMENTS (COMPACT)
───────────────────────────────────────────────────────────────────────── */
.boutique-card {
    background-color: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.boutique-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.boutique-card__image {
    height: 180px;
    /* Increased height */
    background-color: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    /* Indicate zoom-in capability */
}

.boutique-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform var(--transition-base);
}

/* Specific hover effect for image only */
.boutique-card__image:hover img {
    transform: scale(1.1);
    /* Zoom on image hover */
}

/* Removed card hover zoom to avoid conflict */
/*.boutique-card:hover .boutique-card__image img {
    transform: scale(1.05);
}*/

.boutique-card__content {
    padding: 10px;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
}

.boutique-card__name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.boutique-card__desc {
    font-size: 0.75rem;
    /* Reduced desc */
    color: var(--dark-light);
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

/* Options Block */
.boutique-card__options {
    margin: 4px 0;
    padding: 4px 0;
    border-top: 1px solid var(--cream-dark);
}

.boutique-card__option-group {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Compact layout */
}

.boutique-card__option-label {
    display: block;
    font-size: 0.65rem;
    color: var(--dark-light);
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 6px;
}

/* Mini Color Picker */
.boutique-color-picker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.boutique-color-picker .color-swatch {
    width: 14px;
    /* Tiny swatches */
    height: 14px;
}

.boutique-color-picker .swatch {
    width: 14px;
    height: 14px;
}

/* Tech Specs */
.boutique-card__specs {
    font-size: 0.7rem;
    color: var(--dark-light);
    background-color: rgba(0, 0, 0, 0.03);
    padding: 6px;
    border-radius: 4px;
    margin-bottom: 6px;
    list-style: none;
    display: none;
    /* Hide specs in ultra-compact view to save space? Or just make small */
}

/* Footer & Actions (Ultra Compact) */
.boutique-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--cream-dark);
    margin-top: auto;
    gap: 6px;
}

.boutique-card__price {
    font-family: var(--font-stencil);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rust);
    border: 1.5px solid rgba(180,130,0,0.38);
    border-radius: 5px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-bottom: 0;
}

/* Quantity Selector (Compact) */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--cream-dark);
    border-radius: 3px;
    background-color: #fff;
    height: 24px;
    /* Very compact */
    width: fit-content;
    overflow: hidden;
}

.qty-btn {
    background: none;
    border: none;
    padding: 0 6px;
    height: 100%;
    cursor: pointer;
    color: var(--rust);
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background-color: var(--cream);
}

.qty-input {
    width: 24px;
    height: 100%;
    text-align: center;
    border: none;
    border-left: 1px solid var(--cream-dark);
    border-right: 1px solid var(--cream-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark);
    -moz-appearance: textfield;
    appearance: none;
    background-color: #fff;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add Button */
.boutique-card__btn {
    padding: 0.55rem 1.2rem;
    background-color: var(--gold);
    color: var(--dark);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 20px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

.boutique-card__btn:hover {
    background-color: var(--gold-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.boutique-card__btn.btn-added {
    background-color: #4CAF50;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALMANACH ADJUSTMENTS
═══════════════════════════════════════════════════════════════════════════ */
.almanach-card__year {
    font-size: 1.3rem;
    /* Increased size per user request */
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: block;
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA RADIO DE L'ATELIER - DESIGN PREMIUM 2024
   Neumorphisme, micro-animations, effets de lumière
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables du module radio */
:root {
    --radio-gold: #fedc57;
    --radio-gold-dark: #d4b84a;
    --radio-gold-glow: rgba(254, 220, 87, 0.4);
    --radio-bg: #0d0d0d;
    --radio-bg-light: #1a1a1a;
    --radio-text: #e0e0e0;
    --radio-text-muted: #888;
    --radio-accent: #cd9c3c;
    --radio-green: #4ade80;
    --radio-green-glow: rgba(74, 222, 128, 0.5);
    --radio-red: #ef4444;
    --radio-red-glow: rgba(239, 68, 68, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON RADIO HEADER - PREMIUM 2024
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON RADIO HEADER - LOGIQUE DOUBLE ÉTAT
   ═══════════════════════════════════════════════════════════════════════════ */

.radio-header-premium {
    display: flex;
    align-items: center;
    position: relative;
    height: 36px;
    margin: 0 20px;
    transition: transform 0.3s ease;
}

.radio-header-premium.radio-mode-active {
    transform: translateX(25px);
}

/* 1. BOUTON LANCEUR (Visible par défaut) */
.radio-btn-container {
    position: relative;
    display: block;
    animation: fade-in 0.3s ease;
}

/* On masque le bouton seulement si le mode "Active" est enclenché */
.radio-header-premium.radio-mode-active .radio-btn-container {
    display: none;
}

/* 1. BOUTON D'OUVERTURE (STATIQUE) */
.radio-btn-premium {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* For the underline */
    margin-top: 5px;
    /* Slight visual adjustment downwards */
}

/* Yellow Underline Effect */
.radio-btn-premium::after {
    content: '';
    position: absolute;
    bottom: 12px;
    /* Moved up significantly closer to text */
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    box-shadow: 0 0 8px var(--gold), 0 0 12px #ffaa00;
    transition: width var(--transition-base);
}

.radio-btn-premium:hover::after {
    width: 100%;
}

.radio-btn-premium:hover {
    transform: scale(1.05);
}

.radio-btn-img {
    height: 60px;
    /* Increased from 50px */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease;
    /* Ensure visual centering if image has whitespace */
    display: block;
}

.radio-btn-premium:hover .radio-btn-img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.radio-btn-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.radio-icon-static {
    font-size: 1.1rem;
}

.radio-btn-text {
    font-family: var(--font-stencil);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--cream);
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(254, 220, 87, 0.3);
    font-weight: bold;
}


/* 2. CONTRÔLEUR MÉDIA (Visible quand ACTIVE) - Texture Cuivre/Rouillé */
.radio-controls-premium {
    display: none;
    align-items: center;
    gap: 4px;
    /* Reduced from 8px */
    padding: 2px 6px;
    /* Reduced from 2px 10px */
    height: 32px;
    /* Reduced from 36px */
    background: linear-gradient(145deg,
            #7a5a42 0%,
            #9B6B4F 20%,
            #6B4E3D 40%,
            #8B5A3C 60%,
            #7a5a42 80%,
            #5D4037 100%);
    border: 1px solid rgba(139, 90, 60, 0.7);
    border-radius: 8px;
    animation: fade-in 0.4s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 223, 186, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.radio-header-premium.radio-mode-active .radio-controls-premium {
    display: flex;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Info Group : Badge LIVE + Nom Station */
.radio-info-group {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Reduced gap */
    cursor: pointer;
    padding: 2px 4px;
    /* Reduced padding */
    border-radius: 4px;
    transition: background 0.2s;
}

.current-station-name {
    font-size: 0.7rem;
    /* Reduced font size */
    color: var(--cream);
    font-weight: 500;
    white-space: nowrap;
}

.radio-info-group:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Badge Superscript */
.radio-live-badge-superscript {
    color: #ef4444;
    font-size: 0.4rem;
    /* Reduced font size */
    font-family: var(--font-stencil);
    vertical-align: top;
    position: relative;
    top: -2px;
    opacity: 0;
    transition: opacity 0.3s;
}

.radio-header-premium.is-playing .radio-live-badge-superscript {
    opacity: 1;
    animation: live-pulse-text 1.5s infinite;
}

@keyframes live-pulse-text {

    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    }

    50% {
        opacity: 0.4;
        text-shadow: none;
    }
}

/* Visualiseur intégré */
.radio-mini-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    /* Reduced from 2px */
    height: 10px;
    /* Reduced from 14px */
    margin-right: 2px;
}

.btn-bar {
    width: 2px;
    /* Reduced from 3px */
    height: 2px;
    /* Reduced from 3px base */
    background: var(--radio-gold);
    border-radius: 1px;
    transition: all 0.2s ease;
}

.radio-controls-divider {
    width: 1px;
    height: 12px;
    /* Reduced height */
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
    /* Reduced margin */
}

/* Actions Group */
.radio-actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Reduced from 8px */
}

.radio-play-premium {
    background: transparent;
    border: none;
    color: var(--radio-gold);
    cursor: pointer;
    width: 24px;
    /* Explicit smaller width */
    height: 24px;
    /* Explicit smaller height */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    padding: 0;
}

.play-icon-premium {
    font-size: 0.8rem;
    /* Reduced icon size */
}

.radio-play-premium:hover {
    transform: scale(1.1);
    color: #ffecd2;
}

/* Volume */
.radio-volume-premium {
    display: flex;
    align-items: center;
    width: 40px;
    /* Reduced width */
}

/* Animation barres (Ancien code volume supprimé) */
.btn-bar {
    opacity: 0.5;
}

/* Animation seulement si playing */
.radio-header-premium.is-playing .btn-bar {
    opacity: 1;
    animation: btn-bar-bounce 0.5s ease-in-out infinite alternate;
}

.btn-bar:nth-child(1) {
    animation-delay: 0s;
}

.btn-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.btn-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.btn-bar:nth-child(4) {
    animation-delay: 0.15s;
}

.btn-bar:nth-child(5) {
    animation-delay: 0.05s;
}


.current-station-name {
    font-family: var(--font-stencil);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Séparateur vertical */
.radio-controls-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* Actions Group */
.radio-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Re-use existing play btn style but adjust size if needed */


/* Volume compact */
.radio-volume-premium {
    display: flex;
    align-items: center;
}

.volume-slider-premium {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.volume-slider-premium::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Nom de la station */
.current-station-name {
    font-family: var(--font-stencil);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--cream);
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(254, 220, 87, 0.2);
}

/* Bouton Play Premium - Texture Cuivre */
.radio-play-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 30% 30%,
            #A0674A,
            #8B5A3C 40%,
            #6B4E3D 70%,
            #5D4037);
    border: 1px solid rgba(139, 90, 60, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 223, 186, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.radio-play-premium:hover {
    background: radial-gradient(circle at 30% 30%,
            #fedc57,
            #A0674A 40%,
            #8B5A3C 70%,
            #7a5a42);
    border-color: var(--gold);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(254, 220, 87, 0.6),
        inset 0 1px 0 rgba(255, 223, 186, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.5);
}

.play-icon-premium {
    font-size: 0.6rem;
    color: var(--cream);
    margin-left: 1px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.radio-header-premium.is-playing .radio-play-premium {
    background: radial-gradient(circle at 30% 30%,
            #fedc57,
            #e5c64e 40%,
            #d4af37 70%,
            #c9a961);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(254, 220, 87, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.4);
}

.radio-header-premium.is-playing .play-icon-premium {
    color: var(--dark);
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5));
}

/* Volume Premium - Bouton Dropdown Vertical */
.radio-volume-dropdown {
    position: relative;
    display: inline-block;
}

.radio-volume-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 30% 30%,
            #A0674A,
            #8B5A3C 40%,
            #6B4E3D 70%,
            #5D4037);
    border: 1px solid rgba(139, 90, 60, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 223, 186, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.radio-volume-btn:hover {
    background: radial-gradient(circle at 30% 30%,
            #fedc57,
            #A0674A 40%,
            #8B5A3C 70%,
            #7a5a42);
    border-color: var(--gold);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(254, 220, 87, 0.6),
        inset 0 1px 0 rgba(255, 223, 186, 0.4);
}

.volume-icon-display {
    font-size: 0.65rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Slider Vertical Dropdown - S'ouvre vers le BAS */
.radio-volume-slider-vertical {
    position: absolute;
    top: calc(100% + 8px);
    /* Below button */
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    background: linear-gradient(145deg, #2a2a1e, #1d1d15);
    border: 1px solid rgba(254, 220, 87, 0.3);
    border-radius: 12px;
    padding: 12px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-volume-slider-vertical.is-open {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    visibility: visible;
}

/* Slider Vertical Input */
.volume-slider-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 80px;
    background: transparent;
    cursor: pointer;
}

.volume-slider-vertical::-webkit-slider-runnable-track {
    width: 6px;
    height: 100%;
    background: linear-gradient(to top, var(--gold) 0%, rgba(89, 60, 41, 0.4) 100%);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.volume-slider-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #fedc57, #e5c64e, #d4af37);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 12px rgba(254, 220, 87, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin-left: -6px;
}

.volume-slider-vertical::-moz-range-track {
    width: 6px;
    height: 100%;
    background: linear-gradient(to top, var(--gold) 0%, rgba(89, 60, 41, 0.4) 100%);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.volume-slider-vertical::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #fedc57, #e5c64e, #d4af37);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 12px rgba(254, 220, 87, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Bouton Fermer Radio Header */
.radio-close-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 82, 82, 0.3);
    border: 1px solid rgba(255, 82, 82, 0.5);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-close-header:hover {
    background: rgba(255, 82, 82, 0.7);
    border-color: rgba(255, 82, 82, 0.9);
    color: white;
    transform: scale(1.1);
}

/* Volume horizontal */
.nav__radio-volume-wrap {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav__radio-module.is-playing .nav__radio-volume-wrap {
    display: flex;
    opacity: 1;
}

.volume-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.nav__radio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.nav__radio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--radio-gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(254, 220, 87, 0.4);
    transition: transform 0.2s ease;
}

.nav__radio-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.nav__radio-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--radio-gold);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* Mini visualiseur header */
.nav__radio-visualizer {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    padding: 0 8px;
}

.nav__radio-module.is-playing .nav__radio-visualizer {
    display: flex;
}

.mini-bar {
    width: 2px;
    height: 4px;
    background: var(--radio-green);
    border-radius: 1px;
    animation: mini-bounce 0.6s ease-in-out infinite alternate;
}

.mini-bar:nth-child(1) {
    animation-delay: 0s;
}

.mini-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.mini-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.mini-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.mini-bar:nth-child(5) {
    animation-delay: 0.15s;
}

@keyframes mini-bounce {
    from {
        height: 4px;
        opacity: 0.4;
    }

    to {
        height: 14px;
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RADIO PANEL (Panneau latéral)
   ─────────────────────────────────────────────────────────────────────────── */

.radio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(8px);
}

.radio-overlay--active {
    opacity: 1;
    pointer-events: auto;
}

.radio-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: linear-gradient(180deg, #0f0f0f 0%, #080808 100%);
    border-left: 2px solid var(--radio-gold);
    z-index: 10001;
    transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8);
    overflow-y: auto;
}

.radio-panel--active {
    right: 0;
}

/* Header du panel */
.radio-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(254, 220, 87, 0.15);
    background: rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.radio-panel__title {
    font-family: var(--font-stencil);
    color: var(--radio-gold);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin: 0;
}

.radio-panel__close {
    background: transparent;
    border: 1px solid rgba(254, 220, 87, 0.3);
    color: var(--radio-gold);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-panel__close:hover {
    background: var(--radio-gold);
    color: #000;
    transform: rotate(90deg);
}

/* Contenu du panel */
.radio-panel__content {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

/* Logo Radio Meuh */
.radio-panel__logo-wrap {
    background: var(--radio-gold);
    padding: 20px 35px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(254, 220, 87, 0.2);
}

.radio-panel__logo {
    height: 45px;
    width: auto;
}

.radio-panel__logo-fallback {
    font-family: var(--font-stencil);
    font-size: 1.3rem;
    color: #000;
    letter-spacing: 2px;
}

/* Description */
.radio-panel__description {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.radio-panel__tagline {
    font-family: var(--font-stencil);
    color: var(--radio-gold);
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

.radio-panel__about {
    font-family: var(--font-sans);
    color: var(--radio-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.radio-panel__about strong {
    color: var(--radio-text);
}

/* Visualiseur panel */
.radio-panel__visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 50px;
    padding: 15px 0;
}

.visu-bar {
    width: 4px;
    height: 6px;
    background: var(--radio-gold);
    border-radius: 2px;
    opacity: 0.2;
    transition: height 0.1s ease;
}

.radio-panel.is-playing .visu-bar {
    opacity: 1;
    animation: visu-bounce 0.7s ease-in-out infinite alternate;
}

.visu-bar:nth-child(1) {
    animation-delay: 0s;
}

.visu-bar:nth-child(2) {
    animation-delay: 0.08s;
}

.visu-bar:nth-child(3) {
    animation-delay: 0.16s;
}

.visu-bar:nth-child(4) {
    animation-delay: 0.24s;
}

.visu-bar:nth-child(5) {
    animation-delay: 0.32s;
}

.visu-bar:nth-child(6) {
    animation-delay: 0.40s;
}

.visu-bar:nth-child(7) {
    animation-delay: 0.35s;
}

.visu-bar:nth-child(8) {
    animation-delay: 0.28s;
}

.visu-bar:nth-child(9) {
    animation-delay: 0.20s;
}

.visu-bar:nth-child(10) {
    animation-delay: 0.12s;
}

.visu-bar:nth-child(11) {
    animation-delay: 0.04s;
}

.visu-bar:nth-child(12) {
    animation-delay: 0.18s;
}

@keyframes visu-bounce {
    from {
        height: 6px;
    }

    to {
        height: 25px;
    }
}

/* Gros bouton PLAY */
.radio-panel__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 280px;
    padding: 12px 24px;
    background: linear-gradient(145deg, var(--radio-gold), var(--radio-gold-dark));
    border: none;
    border-radius: 50px;
    color: #000;
    font-family: var(--font-stencil);
    font-size: 0.85rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 25px rgba(254, 220, 87, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.radio-panel__play-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 35px rgba(254, 220, 87, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.radio-panel__play-btn:active {
    transform: translateY(0);
}

.play-btn-icon {
    font-size: 1.2rem;
}

.radio-panel.is-playing .radio-panel__play-btn {
    background: linear-gradient(145deg, #333, #222);
    color: var(--radio-green);
    border: 1px solid var(--radio-green);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

/* Suppression des pseudo-elements conflictuels avec JS */

/* Volume control panel */
.radio-panel__volume {
    width: 100%;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.volume-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-stencil);
    font-size: 0.75rem;
    color: var(--radio-text-muted);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.radio-panel__volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #c0d725 0%, #333 0%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.radio-panel__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #c0d725;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(192, 215, 37, 0.4);
    transition: transform 0.2s ease;
}

.radio-panel__volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.radio-panel__volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--radio-gold);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE DE RADIOS
   ═══════════════════════════════════════════════════════════════════════════ */

.radio-catalog-intro {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: #e0e0e0;
    text-align: center;
    margin: 0 0 2px 0;
    padding: 0 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    line-height: 1.3;
}

.radio-catalog {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* Carte de radio */
.radio-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.radio-card:hover {
    border-color: var(--radio-gold);
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.radio-card.is-selected {
    border-color: var(--radio-green);
    background: linear-gradient(145deg, #0f1f14, #0a1a0f);
}

/* Indicateur de sélection */
.radio-card__indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.radio-card.is-selected .radio-card__indicator {
    background: var(--radio-green);
    box-shadow: 0 0 10px var(--radio-green-glow);
}

/* Icône de la radio */
.radio-card__icon {
    font-size: 1.25rem;
    min-width: 28px;
    text-align: center;
}

/* Infos de la radio */
.radio-card__info {
    flex: 1;
}

.radio-card__name {
    font-family: var(--font-stencil);
    font-size: 0.82rem;
    color: var(--radio-gold);
    margin: 0 0 2px 0;
    letter-spacing: 1px;
}

.radio-card.is-selected .radio-card__name {
    color: var(--radio-green);
}

.radio-card__desc {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--radio-text-muted);
    margin: 0;
}

/* Animation de lecture */
.radio-card__playing {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.radio-card.is-selected.is-playing .radio-card__playing {
    opacity: 1;
}

.playing-bar {
    width: 3px;
    height: 4px;
    background: var(--radio-green);
    border-radius: 1px;
}

.radio-card.is-selected.is-playing .playing-bar {
    animation: playing-bounce 0.6s ease-in-out infinite alternate;
}

.playing-bar:nth-child(1) {
    animation-delay: 0s;
}

.playing-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.playing-bar:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes playing-bounce {
    from {
        height: 4px;
    }

    to {
        height: 18px;
    }
}

/* Note de bas de page */
.radio-panel__footer {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: #555;
    text-align: center;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contrôles du panel */
.radio-panel__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Mobile responsive */
@media (max-width: 768px) {

    /* On affiche le bouton premium mais on ajuste sa taille/marge */
    .radio-header-premium {
        display: flex;
        /* Rendre visible */
        transform: scale(0.55);
        /* Réduire significativement la taille */
        margin-right: -20px;
        margin-left: -10px;
    }

    /* On cache le texte et les contrôles étendus sur mobile pour gagner de la place */
    .radio-btn-text {
        display: none;
    }

    .radio-btn-premium {
        width: 40px;
        /* Plus compact : juste le visualiseur */
        min-width: 40px;
        padding: 0;
        height: 32px;
    }

    .radio-btn-visualizer {
        margin: 0 auto;
        /* Centrer le visualiseur */
    }

    /* Réduire le bouton play sur mobile */
    .radio-play-premium {
        width: 24px;
        height: 24px;
    }

    /* Les contrôles étendus (volume, station) peuvent prendre trop de place sur mobile
       On peut choisir de les cacher ou de les simplifier. 
       Ici on les cache pour garder le header propre, l'utilisateur a tout dans le panel. */
    .radio-header-premium.is-playing .radio-controls-premium {
        display: none;
    }

    .mobile-only {
        display: block !important;
    }

    .radio-panel {
        width: 100%;
        right: -100%;
    }

    .radio-panel--active,
    .radio-panel.active {
        right: 0;
    }

    .radio-card {
        padding: 14px 16px;
    }

    .radio-card__icon {
        font-size: 1.5rem;
        min-width: 35px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU MODULE RADIO
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TOTEM CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════ */
.totem-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.totem-carousel__track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    height: 100%;
}

.totem-carousel__img {
    min-width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.totem-carousel__img:hover {
    transform: scale(1.05);
}

.totem-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(44, 36, 30, 0.7);
    color: var(--cream);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.totem-carousel:hover .totem-carousel__btn {
    opacity: 1;
}

.totem-carousel__btn:hover {
    background-color: var(--rust);
    transform: translateY(-50%) scale(1.1);
}

.totem-carousel__btn--prev {
    left: 10px;
}

.totem-carousel__btn--next {
    right: 10px;
}

.totem-carousel__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.totem-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(249, 247, 242, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.totem-carousel__dot:hover {
    background-color: rgba(249, 247, 242, 0.8);
    transform: scale(1.2);
}

.totem-carousel__dot.active {
    background-color: var(--gold);
    width: 24px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════ */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox__content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.lightbox__content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

/* ── Réalisations caption overlay ── */
.lightbox__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 32px 18px 14px;
    background: linear-gradient(transparent, rgba(20,14,10,0.65));
    border-radius: 0 0 8px 8px;
    pointer-events: none;
}
.lightbox__caption-num {
    font-family: var(--font-stencil);
    font-size: 2.2rem;
    color: rgba(254,220,87,0.65);
    line-height: 1;
    flex-shrink: 0;
}
.lightbox__caption-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lightbox__caption-tag {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.75rem;
    color: rgba(249,247,242,0.55);
    letter-spacing: 0.04em;
}
.lightbox__caption-name {
    font-family: var(--font-stencil);
    font-size: 1rem;
    color: rgba(249,247,242,0.88);
    letter-spacing: 0.07em;
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(44, 36, 30, 0.8);
    color: var(--cream);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__close:hover {
    background-color: var(--rust);
    transform: scale(1.1);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(44, 36, 30, 0.8);
    color: var(--cream);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__nav:hover {
    background-color: var(--rust);
    transform: translateY(-50%) scale(1.1);
}

.lightbox__nav--prev {
    left: 40px;
}

.lightbox__nav--next {
    right: 40px;
}

@media (max-width: 768px) {
    .lightbox__nav {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }

    .lightbox__nav--prev {
        left: 20px;
    }

    .lightbox__nav--next {
        right: 20px;
    }

    .lightbox__close {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    .lightbox__content {
        max-width: 96vw;
        max-height: 80vh;
    }
    .lightbox__content img {
        max-height: 80vh;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PITCHOUN COLOR VIEWER
   ═══════════════════════════════════════════════════════════════════════════ */
.pitchoun-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f5f0e8, #ebe5da);
    border-radius: 8px;
    cursor: pointer;
}

.pitchoun-viewer__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    padding: 10px;
}

.pitchoun-viewer:hover .pitchoun-viewer__img {
    transform: scale(1.03);
}

.pitchoun-viewer__badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: rgba(44, 36, 30, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    color: var(--cream, #F9F7F2);
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pitchoun-viewer:hover .pitchoun-viewer__badge {
    opacity: 1;
}

@media (max-width: 768px) {
    .pitchoun-viewer__img {
        padding: 5px;
    }
    .pitchoun-viewer__badge {
        font-size: 0.6rem;
        padding: 4px 10px;
    }
}





.viewer-360__viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-360__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    transform-origin: center center;
    pointer-events: none;
    will-change: transform;
}

.viewer-360__img.viewer-360__img--changing {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.viewer-360__img.viewer-360__img--visible {
    opacity: 1;
    transition: opacity 0.35s ease-in;
}

/* Zoom Controls */
.viewer-360__controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.viewer-360__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(205, 156, 60, 0.4);
    background: rgba(26, 23, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold, #CD9C3C);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.viewer-360__btn:hover {
    background: rgba(205, 156, 60, 0.25);
    border-color: var(--gold, #CD9C3C);
    transform: scale(1.1);
}

.viewer-360__btn:active {
    transform: scale(0.95);
}

.viewer-360__zoom-level {
    font-family: var(--font-stencil, 'Stardos Stencil', monospace);
    font-size: 0.7rem;
    color: var(--gold, #CD9C3C);
    letter-spacing: 1px;
    padding: 2px 0;
    opacity: 0.8;
}

/* Hint Overlay */
.viewer-360__hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(26, 23, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(205, 156, 60, 0.3);
    border-radius: 20px;
    color: var(--cream, #F9F7F2);
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.viewer-360__hint.hidden {
    opacity: 0;
}

.viewer-360__hint-icon {
    font-size: 1rem;
    animation: viewer-pulse 2s ease-in-out infinite;
}

@keyframes viewer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Fullscreen Button */
.viewer-360__fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(205, 156, 60, 0.4);
    background: rgba(26, 23, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold, #CD9C3C);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.viewer-360__fullscreen-btn:hover {
    background: rgba(205, 156, 60, 0.25);
    border-color: var(--gold, #CD9C3C);
    transform: scale(1.1);
}

/* Thumbnail Strip */
.viewer-360__thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    justify-content: center;
}

.viewer-360__thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(205, 156, 60, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.viewer-360__thumb:hover {
    opacity: 1;
    border-color: var(--gold, #CD9C3C);
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER LIGHTBOX (Fullscreen Viewer)
   ═══════════════════════════════════════════════════════════════════════════ */
.viewer-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.97);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.viewer-lightbox.active {
    display: flex;
}

.viewer-lightbox:active {
    cursor: grabbing;
}

.viewer-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(205, 156, 60, 0.4);
    background: rgba(26, 23, 20, 0.85);
    color: var(--cream, #F9F7F2);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10003;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-lightbox__close:hover {
    background: rgba(205, 156, 60, 0.25);
    transform: scale(1.1);
}

.viewer-lightbox__viewport {
    width: 90vw;
    height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    transform-origin: center center;
    pointer-events: none;
    will-change: transform;
}

.viewer-lightbox__controls {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10003;
}

.viewer-lightbox__color-name {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-stencil, 'Stardos Stencil', monospace);
    font-size: 0.9rem;
    color: var(--gold, #CD9C3C);
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 8px 20px;
    background: rgba(26, 23, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(205, 156, 60, 0.3);
    border-radius: 20px;
    z-index: 10003;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .viewer-360__controls {
        bottom: 8px;
        right: 8px;
    }

    .viewer-360__btn {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }

    .viewer-360__fullscreen-btn {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
    }

    .viewer-360__hint {
        font-size: 0.65rem;
        padding: 6px 12px;
    }

    .viewer-360__thumbs {
        gap: 6px;
        padding: 8px 0;
    }

    .viewer-360__thumb {
        width: 48px;
        height: 48px;
    }

    .viewer-lightbox__controls {
        bottom: 20px;
        right: 20px;
    }

    .viewer-lightbox__color-name {
        bottom: 20px;
        font-size: 0.75rem;
    }

    .viewer-lightbox__close {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE RADIO WIDGET (Floating/Draggable)
───────────────────────────────────────────────────────────────────────── */
.mobile-radio-widget {
    display: none;
    /* Hidden by default, shown via JS on mobile when radio plays */
}

@media (max-width: 768px) {
    .mobile-radio-widget {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%) scale(0.15);
        z-index: 9999;
        display: none;
        /* Still hidden by default */
        flex-direction: column;
        gap: 4px;
        padding: 6px 8px;
        background: linear-gradient(145deg, #2a2218, #1d1813);
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(254, 220, 87, 0.2) inset;
        min-width: 160px;
        max-width: 200px;
        touch-action: none;
        /* Allow our JS to control touch events */
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-radio-widget.is-visible {
        display: flex;
        animation: slideUpWidget 0.3s var(--ease-out) forwards;
    }

    @keyframes slideUpWidget {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(50px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .mobile-radio-widget.is-dragging {
        opacity: 0.9;
        transition: none !important;
    }

    .mobile-radio-widget__header {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: grab;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-radio-widget__header:active {
        cursor: grabbing;
    }

    .mobile-radio-widget__station {
        font-family: var(--font-stencil);
        font-size: 0.8rem;
        color: var(--cream);
        letter-spacing: 0.05em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    .mobile-radio-widget__live {
        font-size: 0.6rem;
        font-weight: 700;
        color: var(--dark);
        background-color: #4ade80;
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.08em;
        animation: pulseLive 2s ease-in-out infinite;
    }

    .mobile-radio-widget.is-paused .mobile-radio-widget__live {
        background-color: #888;
        animation: none;
    }

    @keyframes pulseLive {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.6;
        }
    }

    .mobile-radio-widget__controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-radio-widget__play {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
        color: var(--dark);
        font-size: 0.85rem;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
        box-shadow: 0 3px 8px rgba(254, 220, 87, 0.3);
        flex-shrink: 0;
    }

    .mobile-radio-widget__play:hover,
    .mobile-radio-widget__play:active {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(254, 220, 87, 0.5);
    }

    .mobile-radio-widget__next {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
        color: var(--cream);
        font-size: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
        flex-shrink: 0;
    }

    .mobile-radio-widget__next:hover,
    .mobile-radio-widget__next:active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Volume Dropdown Mobile - S'ouvre vers le HAUT */
    .mobile-volume-dropdown {
        position: relative;
        display: inline-block;
    }

    .mobile-volume-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .mobile-volume-btn:active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
        transform: scale(1.05);
    }

    .mobile-volume-slider-vertical {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) scaleY(0);
        transform-origin: bottom center;
        background: linear-gradient(145deg, #2a2a1e, #1d1d15);
        border: 1px solid rgba(254, 220, 87, 0.3);
        border-radius: 10px;
        padding: 10px 6px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mobile-volume-slider-vertical.is-open {
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
        visibility: visible;
    }

    .mobile-volume-slider-v {
        writing-mode: vertical-lr;
        direction: rtl;
        width: 18px;
        height: 70px;
        background: transparent;
        cursor: pointer;
    }

    .mobile-volume-slider-v::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: radial-gradient(circle at 30% 30%, #fedc57, #e5c64e, #d4af37);
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 8px rgba(254, 220, 87, 0.8);
    }

    .mobile-volume-slider-v::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: radial-gradient(circle at 30% 30%, #fedc57, #e5c64e, #d4af37);
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 8px rgba(254, 220, 87, 0.8);
    }

    .mobile-radio-widget__close {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 82, 82, 0.4);
        color: var(--cream);
        font-size: 0.8rem;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
        flex-shrink: 0;
        margin-left: auto;
    }

    .mobile-radio-widget__close:hover,
    .mobile-radio-widget__close:active {
        background: rgba(255, 82, 82, 0.8);
        color: white;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT STATUS STYLES (Rupture / Bientôt)
   ───────────────────────────────────────────────────────────────────────── */

/* Banner styles are defined earlier in the file - these are just container helpers */

/* Button Status Styles */
.totem-card__btn.disabled,
.boutique-card__btn.disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.btn-status-rupture {
    background-color: #D32F2F !important;
    /* Red */
    color: white !important;
    border-color: #B71C1C !important;
}

.btn-status-coming-soon {
    background-color: #1976D2 !important;
    /* Blue */
    color: white !important;
    border-color: #0D47A1 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX BARBECUE SIZING
   ───────────────────────────────────────────────────────────────────────── */

/* Force configurator card to span full width in the grid */
.totem-card--configurator {
    grid-column: 1 / -1;
    display: flex;
    /* Make it horizontal layout? Optional, but user just said "same size". Usually implies width. */
    /* If we want it to look BIG, maybe we switch to flex-row for image/content split? */
    /* For now, just spanning is the explicit request "same size as olympique -> meaning it shouldn't be small" */
}



/* Mini Gift Tag */
.mini-gift-tag {
    background: var(--rust-light);
    color: var(--cream);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid var(--rust);
}

.totem-card__call-msg {
    font-size: 0.8rem;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────────────
   CART SCROLL FIX
   Ensure the cart is scrollable on mobile so the checkout button is visible
   ───────────────────────────────────────────────────────────────────────── */
#cart {
    overflow-y: auto !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: 120px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for the cart */
#cart::-webkit-scrollbar {
    width: 5px;
}

#cart::-webkit-scrollbar-track {
    background: var(--cream);
}

#cart::-webkit-scrollbar-thumb {
    background-color: var(--rust);
    border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   COMPOSITE IMAGE COMPONENT
   Images PNG superposées pour créer une image composite interactive
───────────────────────────────────────────────────────────────────────── */
.composite-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

/* Wrapper interne pour gérer la superposition */
.composite-image-container::before {
    content: '';
    display: block;
}

/* Première image (fond) - position relative pour donner la hauteur au conteneur */
.composite-image-container .composite-layer--base {
    display: block;
    width: auto;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Images superposées - position absolute, alignées sur l'image de base */
.composite-image-container .composite-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: transform var(--transition-base), height var(--transition-base);
}

.composite-image-container .composite-layer--1 {
    z-index: 2;
}

.composite-image-container .composite-layer--2 {
    z-index: 3;
}

.composite-image-container .composite-layer--3 {
    z-index: 4;
}

.composite-image-container .composite-layer--4 {
    z-index: 5;
}

.composite-image-container .composite-layer--ab-text {
    z-index: 10;
    /* Visible par défaut, caché quand gravure active */
    transition: opacity var(--transition-base);
}

.composite-image-container .composite-layer--ab-text.hidden {
    opacity: 0;
}

/* Hover effect sur le conteneur - DISABLED for composite to keep text aligned */
/* Note: Standard carousel images still get zoom via .totem-carousel__img:hover */
.totem-card:hover .composite-image-container .composite-layer--base {
    /* No zoom to keep text overlay aligned */
    transform: none;
    transition: transform var(--transition-base);
}

.totem-card:hover .composite-image-container .composite-layer {
    /* No zoom to keep text overlay aligned */
    transform: translate(-50%, -50%);
    transition: transform var(--transition-base);
}

/* Text overlay for custom engraving on composite image */
.composite-text-overlay {
    position: absolute;
    top: 42%;
    /* Ajusté à 42% pour centrer dans le rectangle orange */
    left: 49.5%;
    transform: translate(-50%, -50%);
    z-index: 20;
    font-family: var(--font-stencil);
    font-size: clamp(0.5rem, 1.2vw, 0.75rem);
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7);
    /* Ombre nette pour contraste */
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Show text when gravure is active */
.composite-text-overlay.active {
    opacity: 1;
}

/* Hover state - no scaling since composite zoom is disabled */
.totem-card:hover .composite-text-overlay {
    transform: translate(-50%, -50%);
}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHTBOX COMPOSITE STYLES
───────────────────────────────────────────────────────────────────────── */
.lightbox .composite-image-container {
    width: 80vw;
    height: 80vh;
    cursor: default;
    /* Reset zoom cursor */
}

.lightbox .composite-image-container .composite-layer--base,
.lightbox .composite-image-container .composite-layer {
    height: 500px;
    /* Plus grand dans la lightbox */
}

.lightbox .composite-text-overlay {
    font-size: 1.5rem;
    /* Plus grand dans la lightbox */
    top: 44%;
    /* Centré dans le rectangle orange en zoom */
    /* Visible only when custom engraving is active */
    opacity: 0;
}

.lightbox .composite-text-overlay.active {
    opacity: 1;
}

/* Adapter pour mobile */
@media (max-width: 768px) {

    .lightbox .composite-image-container .composite-layer--base,
    .lightbox .composite-image-container .composite-layer {
        height: 300px;
        width: 100%;
    }

    .lightbox .composite-text-overlay {
        font-size: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER IMAGE REPLACEMENTS
───────────────────────────────────────────────────────────────────────── */
.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.footer__logo-img {
    height: 52px;
    /* Adjusted to match text presence */
    width: auto;
    object-fit: contain;
}

.footer__tagline-img {
    height: 120px;
    /* Increased to 120px as requested */
    width: auto;
    object-fit: contain;
    margin-left: 2px;
    margin-top: -30px;
    /* Pull up closer to ball */
    /* Slight alignment adjustment */
}

.footer__logo-ball {
    animation: spin-slow 20s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   NOS RÉALISATIONS — EDITORIAL PREMIUM GRID
───────────────────────────────────────────────────────────────────────── */

.realisations {
    background-color: var(--dark);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* ── 1. DARK HERO HEADER ── */
.real-hero {
    background-color: var(--dark);
    padding: 32px 0 28px;
    text-align: center;
}
.real-hero__watermark { display: none; }
.real-hero__inner { position: relative; }
.real-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.real-hero__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.05em;
}
.real-hero__sep { color: var(--gold); opacity: 0.4; font-size: 0.7rem; }
.real-hero__title {
    margin: 0 0 20px;
}
.real-hero__title-portfolio { display: none; }
.real-hero__title-main {
    font-family: var(--font-stencil);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--cream);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: var(--space-sm);
}
.real-hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.real-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.real-hero__stat-num {
    font-family: var(--font-stencil);
    font-size: 1.3rem;
    color: var(--gold);
    letter-spacing: 0.05em;
    line-height: 1;
}
.real-hero__stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245,240,232,0.4);
}
.real-hero__stat-div {
    width: 1px;
    height: 28px;
    background: rgba(254,220,87,0.18);
    margin: 0 6px;
}
.real-hero__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(245,240,232,0.5);
    max-width: 900px;
    white-space: nowrap;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── 2. GOLD TICKER ── */
.real-ticker {
    background-color: var(--gold);
    overflow: hidden;
    height: 30px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.22), inset 0 -2px 6px rgba(0,0,0,0.12);
}
.real-ticker__track { width: 100%; overflow: hidden; }
.real-ticker__inner {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-stencil);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark);
    animation: real-ticker 30s linear infinite;
    user-select: none;
}
@keyframes real-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) { .real-ticker__inner { animation: none; } }

/* ── 3. ASYMMETRIC GRID ── */
.real-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 155px 155px 130px 180px;
    gap: 6px;
    background-color: var(--dark);
}
.real-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    outline: 1px solid transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.real-item--hero     { grid-column: 1 / 8;  grid-row: 1 / 3; }
.real-item--sec-top  { grid-column: 8 / 13; grid-row: 1 / 2; }
.real-item--sec-bot  { grid-column: 8 / 13; grid-row: 2 / 3; }
.real-item--third-a  { grid-column: 1 / 6;  grid-row: 3 / 4; }
.real-item--third-b  { grid-column: 6 / 8;  grid-row: 3 / 4; }
.real-item--third-c  { grid-column: 8 / 13; grid-row: 3 / 4; }
.real-item--banner   { grid-column: 1 / -1; grid-row: 4 / 5; }

.real-item__media { position: absolute; inset: 0; overflow: hidden; }
.real-item__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    filter: brightness(0.8) saturate(0.88);
    transform: scale(1.04);
    transition: transform 0.7s cubic-bezier(0.33,1,0.68,1), filter 0.5s ease;
    will-change: transform;
}
.real-item--hero .real-item__media img { transform: scale(1.0); object-position: center 20%; }
.real-item:hover .real-item__media img {
    transform: scale(1.08);
    filter: brightness(0.45) saturate(0.7);
}

/* Ghost number */
.real-item__num {
    position: absolute;
    bottom: -14px; left: -6px;
    font-family: var(--font-stencil);
    font-size: clamp(52px, 8vw, 110px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(254,220,87,0.45);
    pointer-events: none; user-select: none;
    letter-spacing: -0.02em;
    transition: -webkit-text-stroke-color 0.4s ease, opacity 0.4s ease;
    opacity: 0.6; z-index: 2;
}
.real-item:hover .real-item__num {
    -webkit-text-stroke-color: rgba(254,220,87,0.75);
    opacity: 1;
}
.real-item--banner .real-item__num {
    bottom: -10px; left: auto; right: 32px;
    font-size: clamp(70px, 10vw, 140px);
}

/* Gold glow border */
.real-item__border {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 4;
    border: 2px solid transparent;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.real-item:hover .real-item__border {
    border-color: rgba(254,220,87,0.5);
    box-shadow: inset 0 0 20px rgba(254,220,87,0.07), 0 0 24px rgba(254,220,87,0.16);
    animation: gold-flash 0.55s ease forwards;
}
@keyframes gold-flash {
    0%   { border-color: rgba(254,220,87,0.95); box-shadow: inset 0 0 28px rgba(254,220,87,0.16), 0 0 36px rgba(254,220,87,0.32); }
    100% { border-color: rgba(254,220,87,0.50); box-shadow: inset 0 0 20px rgba(254,220,87,0.07), 0 0 24px rgba(254,220,87,0.16); }
}
@media (prefers-reduced-motion: reduce) { .real-item:hover .real-item__border { animation: none; } }

/* Caption — toujours visible, opacité faible par défaut */
.real-item__caption {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    padding: 52px 16px 14px;
    background: linear-gradient(to top, rgba(8,6,4,0.75) 0%, rgba(8,6,4,0.25) 55%, transparent 100%);
    display: flex; flex-direction: column; gap: 4px;
    pointer-events: none;
}
.real-item__tag {
    font-family: var(--font-stencil);
    font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold);
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
.real-item:hover .real-item__tag { opacity: 1; }

.real-item__name {
    font-family: var(--font-stencil);
    font-size: clamp(0.85rem, 1.5vw, 1.2rem);
    color: #fff; letter-spacing: 0.04em; line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    opacity: 0.35;
    transition: opacity 0.3s ease;
}
.real-item:hover .real-item__name { opacity: 1; }
.real-item--hero .real-item__name { font-size: clamp(1.1rem, 2vw, 1.6rem); }

@media (prefers-reduced-motion: reduce) {
    .real-item__tag, .real-item__name { opacity: 0.35; }
    .real-item:hover .real-item__media img,
    .real-item--hero .real-item__media img { transform: scale(1.0); }
}

/* Banner: name bigger */
.real-item--banner .real-item__name { font-size: clamp(1rem, 2vw, 1.5rem); }

/* ── 4. FOOTER CTA BAR ── */
.real-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px var(--space-md) 24px;
    background-color: var(--dark);
    border-top: 1px solid rgba(254,220,87,0.14);
    position: relative;
    text-align: center;
}
.real-footer::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    opacity: 0.35;
}
.real-footer__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    color: rgba(245,240,232,0.75);
    max-width: 900px;
    white-space: nowrap;
    line-height: 1.5; margin: 0;
}
.real-footer__btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.real-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-stencil);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 20px;
    white-space: nowrap;
    position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background 0.22s, color 0.22s;
}
.real-footer__btn::before {
    content: '';
    position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}
.real-footer__btn:hover::before { left: 130%; }

.real-footer__btn--primary {
    background: var(--gold);
    color: var(--dark);
}
.real-footer__btn--primary:hover { background: var(--gold-dark); }

.real-footer__btn--outline {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid rgba(245,240,232,0.25);
    clip-path: none;
}
.real-footer__btn--outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.real-footer__btn-arrow {
    display: inline-block;
    transition: transform 0.22s;
}
.real-footer__btn:hover .real-footer__btn-arrow { transform: translateX(3px); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .real-hero { padding: 36px 0 28px; }
    .real-hero__title-main { font-size: clamp(1.6rem, 8vw, 2.8rem); }
    .real-hero__stat-div { height: 26px; margin: 0 6px; }
    .real-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: unset;
        gap: 4px;
    }
    .real-item--hero, .real-item--sec-top, .real-item--sec-bot,
    .real-item--third-a, .real-item--third-b, .real-item--third-c, .real-item--banner {
        grid-column: unset; grid-row: unset;
    }
    .real-item--hero    { grid-column: 1 / -1; aspect-ratio: 16/9; }
    .real-item--third-c { grid-column: 1 / -1; aspect-ratio: 21/9; }
    .real-item--banner  { grid-column: 1 / -1; aspect-ratio: 21/9; }
    .real-item { min-height: 140px; touch-action: manipulation; }
    .real-item__num { font-size: clamp(32px, 11vw, 54px); }
    .real-item--banner .real-item__num { font-size: clamp(40px, 12vw, 64px); }
    .real-item__tag, .real-item__name { opacity: 0.55; }
    .real-footer { align-items: center; gap: 16px; padding: 28px var(--space-sm); text-align: center; }
    .real-ticker { height: 32px; }
    .real-ticker__inner { font-size: 0.65rem; }
    .real-hero__quote { white-space: normal; font-size: 0.88rem; padding: 0 var(--space-sm); }
    .real-footer__text { white-space: normal; font-size: 0.88rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .real-grid { grid-template-rows: 130px 130px 110px 155px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PITCHOUN 3D VIEWER STYLES
═══════════════════════════════════════════════════════════════════════════ */

/* 3D Preview Container - Pitchoun */
/* Override fixed image height for 3D preview cards */
.totem-card .totem-card__image:has(.pitchoun-3d-preview),
.totem-card .totem-card__image:has(.bonvivant-3d-preview),
.totem-card .totem-card__image:has(.barbecue-3d-preview) {
    height: auto;
    min-height: 200px;
    overflow: hidden;
}

.pitchoun-3d-preview {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--cream-dark) 0%, var(--cream) 100%);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.barbecue-3d-preview {
    position: relative;
    width: 100%;
    height: 320px;
    background: #f5f2ed;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.barbecue-3d-preview model-viewer {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
}

.pitchoun-3d-preview model-viewer {
    width: 100%;
    max-width: 100%;
    height: 100%;
    --poster-color: transparent;
}

.pitchoun-3d-preview__poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-dark);
}

.pitchoun-3d-preview__poster img {
    max-height: 80%;
    width: auto;
    object-fit: contain;
}

.pitchoun-3d-preview__loading {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--rust);
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-family: var(--font-sans);
}

.pitchoun-3d-preview__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(44, 36, 30, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 10;
}

/* 3D Viewer Controls - Pitchoun */
.pitchoun-3d-preview__controls {
    position: absolute;
    bottom: 50px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
}

.pitchoun-3d-control {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(44, 36, 30, 0.85);
    backdrop-filter: blur(4px);
    color: var(--cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    padding: 0;
}

.pitchoun-3d-control:hover {
    background: rgba(254, 220, 87, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

.pitchoun-3d-control--active {
    background: rgba(254, 220, 87, 0.3);
    border-color: var(--gold);
    color: var(--gold);
}

.pitchoun-3d-control--active:hover {
    background: rgba(254, 220, 87, 0.4);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .pitchoun-3d-preview {
        height: 180px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BON VIVANT PREMIUM CARD - 3D Viewer & Configurator CTA
═══════════════════════════════════════════════════════════════════════════ */

/* 3D Preview Container */
.bonvivant-3d-preview {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--cream-dark) 0%, var(--cream) 100%);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.bonvivant-3d-preview model-viewer {
    width: 100%;
    max-width: 100%;
    height: 100%;
    --poster-color: transparent;
}

.bonvivant-3d-preview__poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-dark);
}

.bonvivant-3d-preview__poster img {
    max-height: 80%;
    width: auto;
    object-fit: contain;
}

.bonvivant-3d-preview__loading {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--rust);
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-family: var(--font-sans);
}

.bonvivant-3d-preview__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(44, 36, 30, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 10;
}

.badge-3d {
    background: var(--gold);
    color: var(--dark);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-stencil);
}

.badge-text {
    color: var(--cream);
    font-size: 0.75rem;
    font-family: var(--font-sans);
}

/* 3D Viewer Controls on Main Page */
.bonvivant-3d-preview__controls {
    position: absolute;
    bottom: 50px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
}

.bonvivant-3d-control {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(44, 36, 30, 0.85);
    backdrop-filter: blur(4px);
    color: var(--cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    padding: 0;
}

.bonvivant-3d-control:hover {
    background: rgba(254, 220, 87, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

.bonvivant-3d-control--active {
    background: rgba(254, 220, 87, 0.3);
    border-color: var(--gold);
    color: var(--gold);
}

.bonvivant-3d-control--active:hover {
    background: rgba(254, 220, 87, 0.4);
}

/* Bon Vivant Card Specific Styles */
.totem-card--active {
    border: 2px solid var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(254, 220, 87, 0.2), var(--shadow-lg) !important;
}

.totem-card--active:hover {
    box-shadow: 0 0 0 4px rgba(254, 220, 87, 0.3), var(--shadow-lg) !important;
}

.bonvivant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
}

.totem-card--bonvivant .totem-card__name {
    color: var(--rust);
    font-size: 1.4rem;
    margin-bottom: 0;
}

.bonvivant-badge-full {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Couleur sélectionnée BV — affichage RAL */
.bv-color-info {
    font-size: 0.75rem;
    color: var(--dark);
    margin-top: 5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.color-info-ral {
    color: #9a8060;
    font-weight: 400;
    font-size: 0.7rem;
}

.color-info-price {
    color: var(--rust);
    font-weight: 700;
    background: rgba(89, 60, 41, 0.1);
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.7rem;
}

/* Small price badge below each non-free swatch */
.color-swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.swatch-price-badge {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--rust);
    text-align: center;
    margin-top: 2px;
    line-height: 1;
    opacity: 0.7;
}

.color-swatch:has(input:checked) .swatch-price-badge {
    opacity: 1;
}

/* Options Display Grid */
.bonvivant-options-display {
    margin: 0.4rem 0 0;
    padding: 0.6rem;
    background: linear-gradient(135deg, rgba(254, 220, 87, 0.1) 0%, rgba(237, 233, 224, 0.5) 100%);
    border-radius: 8px;
    border: 1px solid rgba(254, 220, 87, 0.3);
}

/* Ligne bouton couleur (label + swatches) */
.btn-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.btn-color-row__label {
    font-size: 0.72rem;
    color: var(--color-text-muted, #888);
    min-width: 50px;
    white-space: nowrap;
}
.btn-color-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.btn-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.btn-color-select {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--dark);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(254, 220, 87, 0.3);
    border-radius: 8px;
    padding: 3px 6px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
}
.btn-color-select:focus {
    border-color: var(--gold);
}

/* Totem + boutons côte à côte */
.bv-colors-row {
    display: flex;
    gap: 14px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(254, 220, 87, 0.2);
    align-items: flex-start;
}
.bv-color-col {
    flex: 1;
    min-width: 0;
}
.bv-color-col .btn-preset-select {
    margin-top: 6px;
    width: 100%;
}

/* Color picker section inside Bon Vivant card */
.bonvivant-color-section {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(254, 220, 87, 0.2);
}

.bonvivant-color-section .totem-options__label {
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.bonvivant-color-section .color-picker {
    margin-top: 4px;
}

.bonvivant-options-display__title {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rust);
    margin-bottom: var(--space-xs);
}

.bonvivant-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BV OPTION CARDS — Modern clickable cards for the main page
   ═══════════════════════════════════════════════════════════════════════════ */
.bv-option-card {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--dark-light);
    padding: 6px 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    border: 2px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.7);
    user-select: none;
}

.bv-option-card:hover {
    border-color: rgba(254, 220, 87, 0.5);
    background: rgba(254, 220, 87, 0.08);
    transform: translateY(-1px);
}

/* Hide native checkbox */
.bv-option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Check indicator */
.bv-option-card__check {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.bv-option-card__check svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    color: var(--dark);
}

/* Label */
.bv-option-card__label {
    flex: 1;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Price */
.bv-option-card__price {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rust);
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.bv-option-card__price--included {
    color: var(--olive);
    opacity: 0.8;
    font-style: italic;
}

/* ═══ ACTIVE STATE ═══ */
.bv-option-card--active {
    border-color: var(--gold);
    background: rgba(254, 220, 87, 0.15);
    box-shadow: 0 2px 8px rgba(254, 220, 87, 0.15);
}

.bv-option-card--active .bv-option-card__check {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 1px 4px rgba(254, 220, 87, 0.3);
}

.bv-option-card--active .bv-option-card__check svg {
    opacity: 1;
    transform: scale(1);
}

.bv-option-card--active .bv-option-card__label {
    color: var(--rust);
    font-weight: 600;
}

.bv-option-card--active .bv-option-card__price {
    opacity: 1;
}

/* ═══ INCLUDED STATE (always-on items) ═══ */
.bv-option-card--included {
    cursor: default;
    border-color: rgba(128, 128, 0, 0.15);
    background: rgba(128, 128, 0, 0.06);
}

.bv-option-card--included:hover {
    transform: none;
    border-color: rgba(128, 128, 0, 0.15);
    background: rgba(128, 128, 0, 0.06);
}

.bv-option-card__check--always {
    background: var(--olive) !important;
    border-color: var(--olive) !important;
}

.bv-option-card__check--always svg {
    opacity: 1 !important;
    transform: scale(1) !important;
    color: white !important;
}

/* ═══ INACTIVE STATE (unchecked) ═══ */
.bv-option-card:not(.bv-option-card--active):not(.bv-option-card--included) .bv-option-card__label {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.15);
}

.bv-option-card:not(.bv-option-card--active):not(.bv-option-card--included) .bv-option-card__price {
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON HIERARCHY — Primary CTA vs Secondary link
   ═══════════════════════════════════════════════════════════════════════════ */

/* Footer with Price + Primary CTA */
.bonvivant-footer {
    background: linear-gradient(135deg, var(--cream-dark) 0%, var(--cream) 100%);
    border-radius: 0 0 6px 6px;
    margin: 0 calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm));
    padding: var(--space-sm);
}

.bonvivant-footer .totem-card__price {
    color: var(--rust); /* même couleur que pitchoun */
}

/* PRIMARY: Ajouter au panier */
.bonvivant-btn--primary {
    background: var(--gold) !important;
    color: var(--dark) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    padding: 10px 20px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 10px rgba(254, 220, 87, 0.45);
}

.bonvivant-btn--primary:hover {
    background: var(--gold-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(254, 220, 87, 0.55);
}

.bonvivant-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(254, 220, 87, 0.35);
}

/* SECONDARY: Configurateur 3D — Small outline button */
.bonvivant-cta--secondary {
    margin: var(--space-xs) 0 var(--space-sm);
    text-align: center;
}

.bonvivant-cta__btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--rust);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--rust);
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.75;
}

.bonvivant-cta__btn--outline:hover {
    background: rgba(89, 60, 41, 0.08);
    opacity: 1;
    border-color: var(--rust-dark);
    transform: translateY(-1px);
}

.bonvivant-cta__btn--outline svg {
    transition: transform 0.3s ease;
    width: 14px;
    height: 14px;
}

.bonvivant-cta__btn--outline:hover svg:last-child {
    transform: translateX(3px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .bonvivant-3d-preview {
        height: 180px;
    }
    
    .bonvivant-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .bonvivant-options-grid {
        grid-template-columns: 1fr;
    }
    
    .bonvivant-cta__btn--outline {
        width: 100%;
        justify-content: center;
    }

    /* Sticky "Ajouter au panier" on mobile */
    .bonvivant-footer {
        position: sticky;
        bottom: 0;
        z-index: 50;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   CHAMP GRAVURE BON VIVANT — styles de base input
───────────────────────────────────────────────────────────────────────── */
.bv-gravure-field .engraving-input {
    border: 1px solid var(--cream-dark);
    border-radius: 6px;
    font-family: var(--font-sans);
    background: white;
    color: var(--dark);
}
.bv-gravure-field .engraving-input:focus {
    outline: none;
    border-color: var(--rust);
}

/* ─────────────────────────────────────────────────────────────────────────
   OVERLAY KIT DE FIXATION — Visionneuse 3D Bon Vivant
───────────────────────────────────────────────────────────────────────── */
@keyframes kitPop {
    0%   { opacity: 0; transform: scale(0.5) translateY(8px); }
    70%  { transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes kitDismiss {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.6) translateY(6px); }
}
.bv-kit-overlay {
    position: absolute;
    bottom: 36px;
    left: 8px;
    z-index: 15;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    background: rgba(28, 22, 16, 0.88);
    border: 1px solid rgba(254, 220, 87, 0.45);
    border-radius: 20px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.6) translateY(6px);
    transition: none;
}
.bv-kit-overlay--visible {
    animation: kitPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.bv-kit-overlay--dismissing {
    animation: kitDismiss 0.25s ease-in forwards;
}
.bv-kit-overlay__icon {
    display: flex;
    align-items: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.bv-kit-overlay__text {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #FEDC57;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTRÔLES ZOOM — Visionneuse 3D (cartes produit)
───────────────────────────────────────────────────────────────────────── */
.viewer3d-card-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
.viewer3d-card-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 36, 30, 0.72);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: var(--cream);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.viewer3d-card-btn:hover {
    background: rgba(89, 60, 41, 0.9);
    border-color: var(--gold);
    color: var(--gold);
}

/* Boutons zoom dans le modal */
.viewer3d-modal__controls {
    position: absolute;
    bottom: 50px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}
.viewer3d-modal__zoom-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 36, 30, 0.75);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--cream);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.viewer3d-modal__zoom-btn:hover {
    background: var(--rust);
    border-color: var(--gold);
    color: var(--gold);
}

/* Hauteur des viewers sur les cartes */
.pitchoun-3d-preview,
.bonvivant-3d-preview {
    height: 240px;
    min-height: 240px;
}
.totem-card .totem-card__image:has(.pitchoun-3d-preview),
.totem-card .totem-card__image:has(.bonvivant-3d-preview),
.totem-card .totem-card__image:has(.barbecue-3d-preview) {
    height: auto;
    min-height: 240px;
}

/* ─────────────────────────────────────────────────────────────────────────
   BOUTON AGRANDIR — Visionneuse 3D (sur la carte produit)
───────────────────────────────────────────────────────────────────────── */
.viewer3d-expand-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(44, 36, 30, 0.75);
    color: var(--cream);
    border: 1px solid rgba(254, 220, 87, 0.4);
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    z-index: 10;
}
.viewer3d-expand-btn:hover {
    background: rgba(89, 60, 41, 0.9);
    border-color: var(--gold);
    color: var(--gold);
}

.bbq-photo-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(44, 36, 30, 0.65);
    color: var(--cream);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    z-index: 10;
}
.bbq-photo-btn:hover {
    background: rgba(89, 60, 41, 0.9);
    border-color: var(--gold);
    color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODAL PLEIN ÉCRAN — Visionneuse 3D
───────────────────────────────────────────────────────────────────────── */
.viewer3d-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer3d-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 15, 10, 0.88);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.viewer3d-modal__container {
    position: relative;
    width: min(90vw, 900px);
    height: min(85vh, 700px);
    background: var(--dark);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(254, 220, 87, 0.15);
}
.viewer3d-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 36, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--cream);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.viewer3d-modal__close:hover {
    background: var(--rust);
    color: white;
}
.viewer3d-modal__hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: rgba(249, 247, 242, 0.5);
    white-space: nowrap;
    pointer-events: none;
}

/* Animation d'ouverture */
.viewer3d-modal__container {
    animation: modalIn 0.25s var(--ease-out);
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────
   COMPACTAGE DES CARTES PRODUIT — Plus de contenu visible sans scroll
───────────────────────────────────────────────────────────────────────── */
.totem-card__desc {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 0.3rem;
}
.totem-card__features {
    padding: 0.4rem 0.8rem;
    margin-bottom: 0.4rem;
}
.totem-card__features li {
    font-size: 0.78rem;
    margin-bottom: 0.15rem;
}
.totem-options__title {
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.totem-options__group {
    margin-bottom: 0.4rem;
}
.totem-options__label {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}
.totem-options__price-hint {
    font-size: 0.7rem;
}
.color-swatch .swatch {
    width: 22px;
    height: 22px;
}
.totem-card__content {
    padding: 0.6rem var(--space-sm) 0.6rem;
}
.totem-card__name {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.totem-options__checkbox {
    font-size: 0.78rem;
    padding: 0.25rem 0;
}
.totem-card__call-msg {
    font-size: 0.7rem;
    margin-top: 0.3rem;
}
/* ─── Bouton preset selector ─── */
.btn-preset-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.btn-preset-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1.5px solid #d0c8b0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    background: #faf8f3;
    color: #5a4a2a;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    white-space: nowrap;
}
.btn-preset-chip input[type="radio"] {
    display: none;
}
.btn-preset-chip:has(input:checked) {
    border-color: #8B6914;
    background: #f5edd6;
    color: #5a3a00;
}
.btn-preset-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}
.btn-preset-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.btn-custom-panel {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f8f5ee;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.btn-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.btn-custom-row:last-child { margin-bottom: 0; }
.btn-custom-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7a6040;
    min-width: 54px;
    flex-shrink: 0;
}
.btn-custom-row .color-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.btn-custom-row .color-picker .swatch { width: 18px; height: 18px; }

/* ─── Select dropdown pour presets boutons ─── */
.btn-preset-select {
    width: 100%;
    padding: 5px 8px;
    border: 1.5px solid #d0c8b0;
    border-radius: 6px;
    background: #faf8f3;
    color: #5a3a00;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    margin-top: 4px;
}
.btn-preset-select:focus {
    outline: none;
    border-color: #8B6914;
}

/* Pitchoun-3d preview height override */
.pitchoun-3d-preview,
.bonvivant-3d-preview {
    height: 240px;
    min-height: 240px;
}
.totem-card .totem-card__image:has(.pitchoun-3d-preview),
.totem-card .totem-card__image:has(.bonvivant-3d-preview) {
    height: auto;
    min-height: 180px;
}
/* ── Gravure : champ texte ── */
.bv-gravure-field {
    margin-top: 8px;
}
.bv-gravure-field .engraving-input {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
}
.bv-gravure-style {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    margin-bottom: 0;
}
.bv-gravure-style__group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.bv-gravure-style__label {
    font-size: 10px;
    font-weight: 600;
    color: #6b5e4e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.bv-font-btns {
    display: flex;
    gap: 4px;
}
.bv-font-btn {
    cursor: pointer;
}
.bv-font-btn input[type="radio"] {
    display: none;
}
.bv-font-btn span {
    display: inline-block;
    padding: 3px 8px;
    border: 1.5px solid #c9b99a;
    border-radius: 5px;
    font-size: 11px;
    color: #6b5e4e;
    background: #faf8f3;
    transition: all 0.15s;
    white-space: nowrap;
}
.bv-font-btn input[type="radio"]:checked + span {
    border-color: #b8960c;
    background: #fffbe6;
    color: #7a6200;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QR-CODE MODAL
═══════════════════════════════════════════════════════════════════════════ */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.qr-modal--open {
    opacity: 1;
    pointer-events: auto;
}
.qr-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.qr-modal__panel {
    position: relative;
    background: var(--dark);
    border: 1px solid rgba(254,220,87,0.25);
    border-radius: 16px;
    max-width: 980px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 32px 32px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(254,220,87,0.4) rgba(255,255,255,0.05);
}
.qr-modal__panel::-webkit-scrollbar {
    width: 6px;
}
.qr-modal__panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.qr-modal__panel::-webkit-scrollbar-thumb {
    background: rgba(254,220,87,0.35);
    border-radius: 8px;
}
.qr-modal__panel::-webkit-scrollbar-thumb:hover {
    background: rgba(254,220,87,0.6);
}
.qr-modal--open .qr-modal__panel {
    transform: translateY(0);
}
.qr-modal__close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    color: rgba(245,240,232,0.4);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}
.qr-modal__close:hover { color: var(--gold); }

.qr-modal__header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(254,220,87,0.15);
}
.qr-modal__eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold);
    opacity: 0.7;
    display: block;
    margin-bottom: 8px;
}
.qr-modal__title {
    font-family: var(--font-stencil);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--cream);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.qr-modal__title span { color: var(--gold); }
.qr-modal__intro {
    font-size: 0.9rem;
    color: rgba(245,240,232,0.55);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Highlight stylé ── */
.qr-highlight {
    color: var(--gold);
    font-style: italic;
    font-weight: 600;
    text-shadow: 0 0 18px rgba(254,220,87,0.4), 0 0 6px rgba(254,220,87,0.15);
    background: none;
}

/* ── SECTIONS ── */
.qr-section {
    padding: 24px 0;
    border-top: 1px solid rgba(254,220,87,0.12);
}
.qr-modal__header + .qr-section { border-top: none; padding-top: 8px; }
.qr-section__label {
    font-family: var(--font-stencil);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    opacity: 0.85;
    display: block;
    margin-bottom: 14px;
}
.qr-section__row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.qr-section__row--reverse { flex-direction: row-reverse; }
.qr-section__img-col {
    flex-shrink: 0;
    width: 220px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
.qr-section__img-col img { width: 100%; height: auto; display: block; }
.qr-section__img-col--radio {
    width: 160px;
    background: none;
    overflow: visible;
    box-shadow: none;
    border-radius: 0;
}
.qr-img-radio-btn {
    display: block;
    width: 140px;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.qr-img-radio-panel {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.qr-section__text-col { flex: 1; }
.qr-section__text-col h3 {
    font-family: var(--font-stencil);
    font-size: 1rem;
    letter-spacing: 0.07em;
    color: var(--cream);
    margin-bottom: 10px;
}
.qr-section__text-col p {
    font-size: 0.87rem;
    line-height: 1.65;
    color: rgba(245,240,232,0.6);
    margin-bottom: 8px;
}
.qr-stations {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.qr-stations li {
    font-size: 0.8rem;
    color: rgba(245,240,232,0.55);
    padding: 5px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border-left: 2px solid rgba(254,220,87,0.3);
}
.qr-station-dot { display: none; }

/* ── TOURNOI ── */
.qr-tournoi-intro { margin-bottom: 16px; }
.qr-tournoi-intro h3 {
    font-family: var(--font-stencil);
    font-size: 1rem;
    letter-spacing: 0.07em;
    color: var(--cream);
    margin-bottom: 8px;
}
.qr-tournoi-intro p {
    font-size: 0.87rem;
    line-height: 1.6;
    color: rgba(245,240,232,0.55);
}

/* ── CAROUSEL ── */
.qr-caro { width: 100%; }
.qr-caro__wrap { position: relative; }
.qr-caro__slide {
    display: none;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(254,220,87,0.1);
    border-radius: 12px;
    overflow: hidden;
}
.qr-caro__slide--on { display: flex; }
.qr-caro__img-zone {
    width: 100%;
    height: 320px;
    overflow: hidden;
    flex-shrink: 0;
}
.qr-caro__img-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    display: block;
}
.qr-caro__info {
    padding: 16px 20px 18px;
    border-top: 1px solid rgba(254,220,87,0.08);
}
.qr-caro__badge {
    display: inline-block;
    font-family: var(--font-stencil);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    background: rgba(254,220,87,0.1);
    border: 1px solid rgba(254,220,87,0.25);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 10px;
}
.qr-caro__info h4 {
    font-family: var(--font-stencil);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--cream);
    margin-bottom: 8px;
}
.qr-caro__info p {
    font-size: 0.87rem;
    line-height: 1.6;
    color: rgba(245,240,232,0.6);
}
.qr-caro__nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    padding: 0 100px;
}
.qr-caro__btn {
    background: rgba(254,220,87,0.1);
    border: 1px solid rgba(254,220,87,0.3);
    color: var(--gold);
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}
.qr-caro__btn:hover { background: rgba(254,220,87,0.25); }
.qr-caro__close-btn {
    position: absolute;
    right: 0;
    background: rgba(254,220,87,0.08);
    border: 1.5px solid rgba(254,220,87,0.45);
    border-radius: 8px;
    color: var(--gold);
    font-family: var(--font-stencil);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 7px 16px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.qr-caro__close-btn:hover {
    background: rgba(254,220,87,0.2);
    border-color: var(--gold);
    color: var(--cream);
}
.qr-caro__dots { display: flex; gap: 8px; }
.qr-caro__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(254,220,87,0.2);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.qr-caro__dot--on {
    background: var(--gold);
    transform: scale(1.3);
}
@media (max-width: 600px) {
    .qr-section__row,
    .qr-section__row--reverse { flex-direction: column; }
    .qr-section__img-col { width: 100%; max-width: 260px; margin: 0 auto; }
    .qr-section__img-col--radio { width: 100%; max-width: 260px; margin: 0 auto; }
    .qr-caro__img-zone { height: 220px; }
    .qr-modal__panel { padding: 20px 14px 16px; }
    .qr-caro__nav {
        padding: 0 8px;
        gap: 8px;
        justify-content: center;
    }
    .qr-caro__close-btn {
        position: static;
        margin-left: 4px;
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .qr-caro__btn {
        width: 34px; height: 34px;
        flex-shrink: 0;
        font-size: 1.2rem;
    }
}

/* QR spec link — inline, looks like a normal spec but clickable */
.spec-qr-link {
    color: #7a6000;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1.5px dashed rgba(122,96,0,0.55);
    transition: color 0.2s, border-color 0.2s;
    font-weight: 600;
}
.spec-qr-link::after {
    content: ' ↗';
    font-size: 0.7em;
    opacity: 0.7;
    vertical-align: super;
}
.spec-qr-link:hover {
    color: #5a4600;
    border-bottom-color: #7a6000;
}