/* ==========================================================================
   HEXAPODE TATTOO - STYLE SYSTEM (VANILLA CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES & DESIGN SYSTEM
   -------------------------------------------------------------------------- */
:root {
    /* Colors */
    --color-bg: #070709;
    --color-bg-opaque: rgba(7, 7, 9, 0.88);
    --color-bg-card: rgba(12, 12, 17, 0.7);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.25);
    
    --color-text-primary: #f8fafc;
    --color-text-secondary: #a4b1c3;
    --color-text-muted: #7b899c;
    
    /* Brand Accent Colors (Gold / Technical Copper) */
    --color-accent: #c5a880;
    --color-accent-glow: rgba(197, 168, 128, 0.35);
    --color-accent-dim: rgba(197, 168, 128, 0.12);
    --color-tech-blue: #38bdf8;
    --color-tech-glow: rgba(56, 189, 248, 0.25);
    
    /* Fonts */
    --font-heading: 'Cinzel', serif;
    --font-mono: 'Space Grotesk', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    
    /* Transitions */
    --transition-slow: 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-medium: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   2. BASE STYLES & RESET
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Removes the default translucent blue tap-highlight rectangle Android
       Chrome flashes on tappable elements (not an issue on iOS Safari,
       which doesn't render it the same way). */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: var(--color-bg);
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Dedicated, explicitly-stacked backdrop layer (behind #stars-canvas).
   Kept off the body element itself: body's own background was painting
   above its negative-z-index descendants in practice, hiding the twinkle
   canvas entirely. Using non-negative z-index (0) for all three background
   layers - ordered purely by DOM order (backdrop, then canvas, then grid) -
   keeps them safely behind the z-index:1+ page content without the
   negative-z-index ambiguity. */
#page-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(4, 4, 6, 0.72), rgba(4, 4, 6, 0.72)), url('images/stars_mosaic.png');
    background-repeat: no-repeat, repeat;
    background-size: cover, 1800px 1198px;
    pointer-events: none;
}

/* Visually hidden but readable by screen readers / search engines (SEO h1) */
.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;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   3. BACKGROUNDS & DECORATIONS
   -------------------------------------------------------------------------- */
#stars-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.blueprint-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
}

.blueprint-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Radial gradient to blend edges and hide seam lines */
    background: radial-gradient(circle at center, transparent 20%, var(--color-bg) 90%);
}

/* --------------------------------------------------------------------------
   4. CENTERED HEADER & DROPDOWN MENU
   -------------------------------------------------------------------------- */
.centered-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px 20px 25px;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(7, 7, 9, 0.92) 50%, rgba(7, 7, 9, 0));
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.header-logo-centered {
    cursor: pointer;
    margin-bottom: 12px;
}

.logo-img {
    height: 75px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.15));
    transition: transform var(--transition-medium), filter var(--transition-medium);
}

.header-logo-centered:hover .logo-img {
    transform: scale(1.03);
    filter: drop-shadow(0 0 15px var(--color-accent-glow));
}

/* Centered dropdown toggle */
.dropdown-menu-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropdown-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.dropdown-toggle-btn .bar {
    display: block;
    width: 26px;
    height: 1px;
    background-color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.dropdown-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    margin-top: 2px;
}

.dropdown-toggle-btn:hover {
    color: var(--color-accent);
}

.dropdown-toggle-btn:hover .bar {
    background-color: var(--color-accent);
}

/* Transform toggle to X when active */
.dropdown-toggle-btn.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: var(--color-accent);
}

.dropdown-toggle-btn.active .bar:nth-child(2) {
    opacity: 0;
}

.dropdown-toggle-btn.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: var(--color-accent);
}

.dropdown-toggle-btn.active .dropdown-label {
    color: var(--color-accent);
}

/* Dropdown list panel */
.dropdown-menu-list {
    position: absolute;
    top: 100%;
    margin-top: 15px;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(15px);
    border: 1px solid var(--color-border);
    list-style: none;
    padding: 15px 0;
    width: 280px;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    z-index: 100;
    border-radius: 4px;
}

.dropdown-menu-list.active {
    display: flex;
    animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-link {
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.15em;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-fast);
}

.menu-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-accent);
    opacity: 0.7;
}

.dropdown-link:hover, .dropdown-link.active {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.02);
    padding-left: 30px;
}

.dropdown-link:hover .menu-num, .dropdown-link.active .menu-num {
    opacity: 1;
    text-shadow: 0 0 5px var(--color-accent-glow);
}

/* --------------------------------------------------------------------------
   5. PAGE CONTAINER & SECTIONS
   -------------------------------------------------------------------------- */
.page-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.page-section {
    display: none;
    opacity: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Pushed down further to accommodate taller centered header */
    padding: 180px 24px 100px;
    position: relative;
    z-index: 2;
    transition: opacity var(--transition-medium);
}

.page-section.active {
    display: block;
    opacity: 1;
}

/* Hide background structures when not home */
body.in-section .blueprint-instructions {
    opacity: 0;
    pointer-events: none;
}

/* Navigation buttons */
.back-to-blueprint {
    background: none;
    border: 1px solid var(--color-border);
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    transition: var(--transition-fast);
    backdrop-filter: blur(5px);
}

.back-to-blueprint:hover {
    color: var(--color-text-primary);
    border-color: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent-dim);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 1px;
    background-color: var(--color-accent);
}

.section-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 200;
    color: var(--color-text-secondary);
    max-width: 650px;
    margin-bottom: 50px;
}

#booking .section-desc,
#shop .section-desc {
    text-align: justify;
}

#booking .section-desc a {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.form-required-note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #ff7a33;
    margin-top: -15px;
    margin-bottom: 35px;
}

.required-asterisk {
    color: #ff7a33;
}

.gallery-subtitle {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--color-text-primary);
    margin: 50px 0 26px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    scroll-margin-top: 120px;
}

.quick-nav-flash {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.quick-nav-flash:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.gallery-subtitle-spaced {
    margin-top: 100px;
}

/* This page's title reads clearly on its own without the accent underline */
#gallery .section-title::after {
    display: none;
}

.flashes-intro-note {
    margin-top: 32px;
    margin-bottom: 32px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.8;
    color: var(--color-text-secondary);
    text-align: justify;
}

.gallery-footer-note {
    margin-top: 60px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.gallery-footer-note a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.gallery-footer-note a:hover {
    color: #ff7a33;
}

.gallery-booking-link {
    font-weight: 700;
}

.gallery-subtitle-logo {
    height: 32px;
    width: auto;
    opacity: 0.85;
}

.gallery-subtitle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 1px;
    background-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   6. INTERACTIVE BLUEPRINT PLAN (HOME)
   -------------------------------------------------------------------------- */
#home {
    padding: 0;
    max-width: none;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: visible;
}

.blueprint-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 125px 15px 20px;
    box-sizing: border-box;
}

#blueprint-svg {
    /* Sized by width with the aspect ratio locked to the viewBox (615x840):
       on narrow/portrait screens width is naturally the tighter constraint,
       so this fills the available space exactly with no dead letterboxing
       inside the SVG's own box. Desktop overrides this to size by height. */
    width: 100%;
    height: auto;
    aspect-ratio: 615 / 840;
    max-width: 1400px;
    display: block;
    transform-origin: 284px 372px; /* Centered around central scarab node in cropped layout */
    transition: transform var(--transition-slow);
    z-index: 1;
    overflow: visible;
}

/* SVG nodes styling */
.plan-bg-image {
    opacity: 0.85; /* Faded slightly to let background stars and details breathe */
}

.plan-scarab-image {
    transition: filter var(--transition-medium);
}

.scarab-instagram-link {
    cursor: pointer;
}

.scarab-instagram-link .node-trigger-area {
    fill: transparent;
}

.scarab-instagram-link:hover .plan-scarab-image {
    filter: drop-shadow(0 0 14px rgba(255, 122, 51, 0.65));
}

.plan-scarab-image-hover {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
}

.scarab-instagram-link:hover .plan-scarab-image-hover {
    opacity: 1;
}

.blueprint-node {
    transition: opacity var(--transition-medium);
}

.clickable-node {
    cursor: pointer;
}

/* Trigger area is invisible but captures mouse events */
.node-trigger-area {
    fill: transparent;
    cursor: pointer;
}

/* Outlines drawn on top of the image to create hover glow */
.node-hover-outline, .node-hover-outline-poly {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 0px;
    opacity: 0;
    transition: opacity var(--transition-medium), stroke-width var(--transition-medium);
}

.pointer-line {
    stroke: var(--color-accent);
    stroke-width: 1px;
    stroke-dasharray: 2, 2;
    opacity: 0.8;
    transition: opacity var(--transition-medium);
}

.node-label {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    fill: var(--color-text-secondary);
    letter-spacing: 0.15em;
    opacity: 0.8;
    transition: opacity var(--transition-medium), fill var(--transition-medium);
    pointer-events: auto;
}

.node-sublabel {
    font-family: var(--font-mono);
    font-size: 14px;
    fill: var(--color-accent);
    letter-spacing: 0.1em;
    opacity: 0.65;
    transition: opacity var(--transition-medium);
    pointer-events: auto;
}

/* Two-segment lever tether: "shoulder" pivots on the chamber anchor, "elbow"
   pivots on the shoulder's tip - each driven by its own independent slow sine
   wave in JS (see script.js), which also sets transform-origin and the line/
   text coordinates (desktop: labels beside the plan; mobile: above/below it).
   The label group (.node-label-fk) is a plain sibling, only ever translated
   (never rotated), so the title always reads perfectly horizontally. */

.node-label-fk {
    pointer-events: auto;
}

.label-right {
    text-anchor: start;
}

.node-label:not(.label-right), .node-sublabel:not(.label-right) {
    text-anchor: end;
}

/* Hover effects inside SVG */
.clickable-node:hover .node-hover-outline,
.clickable-node:hover .node-hover-outline-poly,
.scarab-instagram-link:hover ~ .clickable-node .node-hover-outline,
.scarab-instagram-link:hover ~ .clickable-node .node-hover-outline-poly {
    stroke-width: 1px;
    opacity: 0.7;
    filter: url(#glow-gold);
}

.clickable-node:hover .pointer-line,
.scarab-instagram-link:hover ~ .clickable-node .pointer-line {
    opacity: 1;
}

.clickable-node:hover .node-label,
.scarab-instagram-link:hover ~ .clickable-node .node-label {
    fill: var(--color-text-primary);
    opacity: 1;
    text-shadow: 0 0 8px var(--color-accent-glow);
}

.clickable-node:hover .node-sublabel,
.scarab-instagram-link:hover ~ .clickable-node .node-sublabel {
    opacity: 1;
}

/* SVG Zoom Coordinate Transform Mapping (from script JS) */
.zoom-shop { transform: scale(3) translate(126px, -290px); }
.zoom-gallery { transform: scale(3) translate(-179px, 93px); }
.zoom-about { transform: scale(3) translate(181px, 88px); }
.zoom-booking { transform: scale(3) translate(-168px, -233px); }

/* Zoomed plan states */
#blueprint-svg.zoomed {
    pointer-events: none;
}

#blueprint-svg.zoomed .blueprint-node:not(.zoomed-node) {
    opacity: 0.01;
}

#blueprint-svg.zoomed .plan-bg-image {
    opacity: 0.15; /* Subdued background drawing lines */
}

#blueprint-svg.zoomed .plan-scarab-image {
    opacity: 0.1;
}

#blueprint-svg.zoomed .zoomed-node {
    opacity: 0.85;
}

#blueprint-svg.zoomed .zoomed-node .node-hover-outline,
#blueprint-svg.zoomed .zoomed-node .node-hover-outline-poly {
    stroke-width: 1.5px;
    opacity: 0.95;
    filter: url(#glow-gold);
}

/* Floating Instructions */
.blueprint-instructions {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--transition-medium);
    text-align: center;
    white-space: nowrap;
}

.blueprint-instructions i {
    color: var(--color-accent);
    margin: 0 10px;
}

.blink {
    animation: blinker 2.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   7. SECTION: GALERIE & FLASHS
   -------------------------------------------------------------------------- */
/* Portfolio Grid - tight 3-column layout, Instagram-style */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
    background: #000;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform var(--transition-medium), opacity var(--transition-medium);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 7, 9, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    padding: 20px;
    text-align: center;
    transition: opacity var(--transition-fast);
}

.gallery-item:hover img {
    transform: scale(1.05);
    opacity: 0.6;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* Flash Grid & Card - same tight 3-column layout as the portfolio */
.flashes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.flash-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.flash-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.flash-img-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #000;
}

.flash-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}

.zoom-lens {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    display: none;
    z-index: 20;
}

.zoom-lens.active {
    display: block;
}

.flash-card:hover .flash-img-wrapper img {
    transform: scale(1.03);
}

.flash-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flash-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
}

.flash-details {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   8. SECTION: BOOKING FORM (RESERVATION)
   -------------------------------------------------------------------------- */
.booking-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

/* Form inputs & fields */
.step-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    color: var(--color-accent);
    padding-top: 35px;
    border-top: 1px solid var(--color-border);
}

.step-title:first-child {
    padding-top: 0;
    border-top: none;
}

.form-group-row {
    display: flex;
    gap: 20px;
}

.form-group-row .form-group {
    flex: 1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}

.form-group label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-radius: 4px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.04);
}

.form-group input[type="date"] {
    color-scheme: dark;
    color: var(--color-accent);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 45px;
    cursor: pointer;
    color-scheme: dark;
}

.form-group select option {
    background-color: #14141a;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    padding: 8px;
}

.hidden {
    display: none !important;
}

/* Radio Cards (Select Custom or Flash) */
.radio-cards {
    display: flex;
    gap: 20px;
}

.radio-card {
    flex: 1;
    cursor: pointer;
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card .card-inner {
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.01);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    border-radius: 4px;
    height: 100%;
    transition: var(--transition-fast);
}

.radio-cards-mini {
    gap: 10px;
}

.radio-cards-mini .radio-card {
    flex: 0 0 auto;
}

.radio-cards-mini .card-inner {
    padding: 7px 16px;
    border-radius: 20px;
}

.radio-cards-mini .card-title {
    font-size: 0.8rem;
}

.radio-card .card-inner i {
    font-size: 1.5rem;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.radio-card .card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.radio-card .card-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.radio-card input[type="radio"]:checked + .card-inner {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
}

.radio-card input[type="radio"]:checked + .card-inner i {
    color: var(--color-accent);
    text-shadow: 0 0 5px var(--color-accent-glow);
}

.radio-card input[type="radio"]:checked + .card-inner .card-title {
    color: var(--color-text-primary);
}

/* File Upload drag area */
.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-upload-input {
    border: 1px dashed var(--color-border);
    padding: 30px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: rgba(255, 255, 255, 0.005);
    transition: var(--transition-fast);
}

.file-upload-input:hover {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.015);
}

.file-upload-input i {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.file-limits {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 5px;
}

.file-upload-input input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    font-size: 0.8rem;
}

.file-item i {
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
}

/* Custom Checkbox */
.checkbox-group {
    margin-top: 10px;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    color: var(--color-text-secondary) !important;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    transition: var(--transition-fast);
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--color-accent);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid var(--color-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Form Buttons */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 35px;
}

.btn {
    background: none;
    border: 1px solid var(--color-border);
    padding: 12px 24px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.btn-submit {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
    font-weight: 600;
}

.btn-submit:hover {
    background: #e2b13c;
    border-color: #e2b13c;
    box-shadow: 0 0 15px var(--color-accent-glow);
}

/* Success State */
.form-success-message {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    font-size: 4rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 8px var(--color-accent-glow));
}

.form-success-message h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.form-success-message p {
    color: var(--color-text-secondary);
    max-width: 500px;
    margin: 0 auto 30px;
    font-size: 0.95rem;
}

.btn-secondary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-secondary:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   9. SECTION: QUI SUIS-JE ?
   -------------------------------------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: 60px;
    align-items: start;
}

.about-image-side {
    position: relative;
}

.about-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 0.707; /* A4 aspect ratio */
}

.about-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
    filter: grayscale(0.5) contrast(1.1) brightness(0.9);
    transition: filter var(--transition-medium), transform var(--transition-medium);
}

.about-portrait:hover {
    filter: grayscale(0) contrast(1.05) brightness(0.95);
    transform: scale(1.01);
}

.about-photo-credit {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    opacity: 0.6;
    text-align: right;
    margin-top: 8px;
}

.about-decor-frame {
    position: absolute;
    top: -15px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
}

.frame-logo-underlay {
    width: 60%;
    height: auto;
    opacity: 0.03;
    pointer-events: none;
    transform: rotate(15deg);
}

.about-text-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.artist-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.15em;
    opacity: 0.7;
    margin-top: 6px;
    margin-bottom: 30px;
}

.about-paragraph {
    font-size: 0.95rem;
    font-weight: 200;
    color: var(--color-text-secondary);
    text-align: justify;
}

.inline-link {
    color: inherit;
    text-decoration: underline;
}

.about-paragraph.highlight {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-primary);
    border-left: 2px solid var(--color-accent);
    padding-left: 20px;
    margin-bottom: 12px;
}

.standards-box {
    margin-top: 25px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.005);
    padding: 25px;
    border-radius: 4px;
}

.standards-box h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.standards-box h4 i {
    color: var(--color-accent);
}

.standards-box ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.standards-box li {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    gap: 10px;
}

.standards-box li i {
    color: var(--color-accent);
    font-size: 0.7rem;
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   10. SECTION: SHOP (BOUTIQUE)
   -------------------------------------------------------------------------- */
.shop-real-content {
    display: none;
}

.shop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.shop-construction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 100px 20px;
    text-align: center;
    color: var(--color-text-secondary);
}

.shop-construction i {
    font-size: 2.5rem;
    color: var(--color-accent);
}

.shop-construction p {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

body.shop-admin-mode .shop-placeholder {
    display: none;
}

body.shop-admin-mode .shop-real-content {
    display: block;
}

.shop-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cart-indicator-wrapper {
    position: relative;
    cursor: pointer;
    padding: 10px;
}

.cart-indicator-wrapper i {
    font-size: 1.3rem;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.cart-indicator-wrapper:hover i {
    color: var(--color-accent);
    filter: drop-shadow(0 0 5px var(--color-accent-glow));
}

.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cart dropdown mini-cart */
.cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-top: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 50;
    cursor: default;
}

.cart-indicator-wrapper:hover .cart-dropdown {
    display: flex;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 240px;
    overflow-y: auto;
}

.empty-cart-text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px 0;
}

.cart-dropdown-item {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 12px;
}

.cart-item-thumb {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-item-name {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
}

.cart-item-qtyprice {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.btn-remove-item {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-remove-item:hover {
    color: #ef4444;
}

.cart-dropdown-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.cart-total-row span:last-child {
    color: var(--color-accent);
}

#paypal-button-container {
    min-height: 45px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}

.product-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.product-card:hover {
    border-color: var(--color-accent);
}

.product-img-wrapper {
    aspect-ratio: 0.9;
    overflow: hidden;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform var(--transition-medium);
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.03);
}

.product-img-wrapper i {
    font-size: 2rem;
    color: var(--color-text-muted);
}

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.product-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.product-price {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-accent);
}

.gift-card-product .product-info {
    padding: 20px;
}

.gift-card-product .product-img-wrapper i {
    font-size: 2rem;
    color: var(--color-accent);
}

.product-price-hint {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.gift-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
}

.gift-amount-btn {
    flex: 1;
    min-width: 60px;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 8px 4px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.gift-amount-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.gift-amount-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
    color: var(--color-text-primary);
}

.gift-card-product .form-group {
    margin: 0;
    gap: 6px;
}

.gift-card-product .form-group label {
    font-size: 0.7rem;
}

.btn-add-cart {
    background: none;
    border: 1px solid var(--color-border);
    padding: 10px 0;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    cursor: pointer;
    margin-top: auto;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.btn-add-cart:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent-dim);
}

/* --------------------------------------------------------------------------
   11. SYSTEM DIALOGS, MODALS, AND TOASTS
   -------------------------------------------------------------------------- */
/* Gallery / Lightbox Modal */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 6, 8, 0.96);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn var(--transition-fast) ease;
}

.modal-close {
    position: absolute;
    top: 25px;
    right: 40px;
    color: var(--color-text-secondary);
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-accent);
}

.modal-content-container {
    max-width: 90%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.modal-img-wrapper {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
}

.modal-content-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border: 1px solid var(--color-border);
    display: block;
}

@media (max-width: 768px) {
    .modal-img-wrapper {
        cursor: default;
    }
}

.modal-caption {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    text-align: center;
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 10;
    background: linear-gradient(to top, rgba(7, 7, 9, 0.9), transparent);
    pointer-events: none;
}

.footer-info {
    text-align: center;
}

.footer-info p {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.footer-disclaimer {
    color: var(--color-accent) !important;
    opacity: 0.7;
    margin-top: 4px;
}

.footer-legal-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal-link {
    pointer-events: auto;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-decoration: underline;
    transition: var(--transition-fast);
}

.footer-legal-link:hover {
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   12b. LEGAL PAGES (MENTIONS LÉGALES, CGV, CONFIDENTIALITÉ)
   -------------------------------------------------------------------------- */
.legal-page .section-content {
    max-width: 700px;
}

.legal-subtitle {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-top: 35px;
    margin-bottom: 10px;
}

.legal-subtitle:first-of-type {
    margin-top: 0;
}

.legal-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 200;
    color: var(--color-text-secondary);
    line-height: 1.7;
    text-align: justify;
}

/* --------------------------------------------------------------------------
   12d. POINT-PICKER TOOL (dev helper, ?calib=1)
   -------------------------------------------------------------------------- */
.point-picker {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.point-picker.hidden {
    display: none;
}

.point-picker-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.96);
    border-bottom: 1px solid var(--color-accent);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    z-index: 2002;
}

.point-picker-banner button {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    white-space: nowrap;
}

.point-picker-dot {
    position: fixed;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    margin-top: -13px;
    border-radius: 50%;
    background: rgba(255, 122, 51, 0.25);
    border: 2px solid #ff7a33;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff7a33;
    z-index: 2001;
    pointer-events: none;
}

.point-picker-dot::before,
.point-picker-dot::after {
    content: '';
    position: absolute;
    background: #ff7a33;
}

.point-picker-dot::before {
    left: 50%;
    top: -8px;
    bottom: -8px;
    width: 1px;
    transform: translateX(-50%);
}

.point-picker-dot::after {
    top: 50%;
    left: -8px;
    right: -8px;
    height: 1px;
    transform: translateY(-50%);
}

.point-picker-dot-current {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    background: rgba(56, 189, 248, 0.25);
    border-color: var(--color-tech-blue);
    color: var(--color-tech-blue);
    font-size: 0.7rem;
}

.point-picker-dot-current::before,
.point-picker-dot-current::after {
    display: none;
}

.point-picker-dot-anchor {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    background: rgba(74, 222, 128, 0.3);
    border-color: #4ade80;
    color: #4ade80;
    font-size: 0.7rem;
}

.point-picker-dot-anchor::before,
.point-picker-dot-anchor::after {
    display: none;
}

.point-picker-readout {
    position: fixed;
    bottom: 60px;
    left: 14px;
    right: 14px;
    background: rgba(10, 10, 15, 0.9);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    z-index: 2002;
    white-space: pre;
}

.point-picker-copy {
    position: fixed;
    bottom: 14px;
    left: 14px;
    right: 14px;
    background: var(--color-accent);
    color: #0a0a0f;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 2002;
}

.point-picker-copy.hidden {
    display: none;
}

/* --------------------------------------------------------------------------
   13. ANIMATIONS & TRANSITIONS
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE DESIGN
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-img-container {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Desktop and landscape tablets: header becomes a slim vertical bar on the
   right edge (logo + menu stacked, upright), freeing up the full top of the
   screen so the plan can take up more room. Phones AND portrait tablets keep
   the classic top bar and the phone sizing model instead (below) - a
   portrait tablet is much closer in shape to a tall phone than to a wide
   desktop screen. */
@media (min-width: 1401px), (min-width: 769px) and (orientation: landscape) {
    .centered-header {
        flex-direction: column;
        top: 0;
        right: 0;
        left: auto;
        width: 115px;
        height: 100vh;
        justify-content: center;
        padding: 30px 10px;
        background: linear-gradient(to left, rgba(7, 7, 9, 0.92) 50%, rgba(7, 7, 9, 0));
        border-bottom: none;
        border-left: 1px solid rgba(255, 255, 255, 0.03);
    }

    .header-logo-centered {
        margin-bottom: 28px;
    }

    .logo-img {
        height: 58px;
    }

    .dropdown-menu-list {
        top: auto;
        left: auto;
        right: 100%;
        margin-top: 0;
        margin-right: 15px;
    }

    .blueprint-container {
        padding: 44px 0px 87px 27px;
    }

    .page-section {
        padding: 60px 150px 100px 24px;
    }

    /* Wider than tall here, so height is the tighter constraint - size by
       height instead so there's no dead letterboxing inside the SVG box. */
    #blueprint-svg {
        width: auto;
        height: 100%;
        aspect-ratio: auto;
        max-height: 600px;
        max-width: 440px;
    }
}


/* Phones AND portrait tablets (e.g. iPad 12.9" at 1024x1366) share this
   whole layout model: top-bar header, plan sized/positioned by vertical
   space. A portrait tablet centering itself like a landscape desktop screen
   left it starved for width against the header bar; reusing the phone model
   (already proven reliable across many real devices) fixes that directly
   instead of maintaining a third bespoke layout. Landscape tablets use the
   desktop model instead (see the (orientation: landscape) query above). */
@media (max-width: 768px), (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    .centered-header {
        padding: 20px 20px 15px;
    }

    .blueprint-container {
        padding: 150px 4px 90px;
        /* flex-start instead of center: with the plan often smaller than the
           space available, "center" was adding ~40px of extra empty gap
           above it (on top of the 150px already reserved for the
           instructions text) by splitting the leftover space evenly
           top/bottom. Starting it right after the padding reclaims that gap
           and gives the freed space to the bottom margin instead. */
        align-items: flex-start;
    }

    #blueprint-svg {
        /* Whichever is tighter wins: full container width, or the width
           equivalent to the vertical space actually available (header +
           footer + safety margin). Keeping width/height resolved from a
           single source (instead of width:100% plus an independent
           max-height) avoids the two constraints fighting and distorting
           the box the label coordinates are placed in. */
        width: min(100%, calc((100vh - 150px - 90px - 80px) * 615 / 840));
        /* 100vh is unreliable on mobile: browsers disagree on whether it
           counts the space behind a collapsible address bar (Chrome does,
           Safari mostly doesn't), so the same page renders noticeably
           bigger in Chrome and can overlap the footer. svh is always sized
           for the SMALLEST possible viewport (address bar fully shown) and
           never changes afterwards - unlike dvh, which tracks the address
           bar live and made the plan visibly grow/shrink while scrolling.
           svh is already the conservative/worst-case height, so it needs a
           much smaller extra safety margin than plain vh did - reusing the
           same big buffer here double-counted the safety margin and made
           the plan way too small. This line overrides the vh line above in
           browsers that support svh, which remains a fallback for older ones. */
        width: min(100%, calc((100svh - 150px - 90px - 80px) * 615 / 840));
        /* This formula has no ceiling, so on a viewport far taller than any
           phone (a portrait tablet, now sharing this same layout model) the
           box keeps growing - and the labels anchored below/above it grow
           and drift outward right along with it, eventually running into
           the footer. No real phone gets anywhere near 600px from this
           formula (the tallest phones land around ~460-500px), so the cap
           only ever engages on tablet-sized screens. */
        max-width: 590px;
        /* Between fully top-aligned and the old fully-centered gap (~40px) -
           dialed in with Laurent across a couple of rounds. */
        margin-top: 40px;
    }

    .logo-img {
        height: 60px;
    }

    .page-section {
        padding: 160px 20px 100px;
    }
    
    .section-title {
        font-size: 1.3rem;
    }

    .flash-title {
        font-size: 0.7rem;
    }

    .flash-details {
        font-size: 0.6rem;
    }

    .booking-container {
        padding: 25px 20px;
    }
    
    .form-group-row {
        flex-direction: column;
        gap: 0;
    }
    
    .radio-cards {
        flex-direction: column;
        gap: 12px;
    }
    
    .main-footer {
        padding: 8px 15px;
    }

    .footer-info p {
        font-size: 0.55rem;
    }

    .blueprint-instructions {
        top: 150px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .blueprint-instructions i {
        margin: 0 6px;
    }
}

@media (max-width: 480px) {
    .node-label {
        font-size: 17px;
    }

    .node-sublabel {
        font-size: 11px;
    }

    .blueprint-instructions {
        top: 150px;
        font-size: 0.5rem;
        letter-spacing: 0.08em;
        width: auto;
        white-space: nowrap;
    }

    .blueprint-instructions i {
        margin: 0 4px;
    }
    
    #blueprint-svg {
        transform-origin: 284px 372px !important;
    }

    /* Slightly less scaling on mobile to avoid viewport overflow */
    .zoom-shop { transform: scale(2) translate(84px, -192px); }
    .zoom-gallery { transform: scale(2) translate(-119px, 62px); }
    .zoom-about { transform: scale(2) translate(120px, 58px); }
    .zoom-booking { transform: scale(2) translate(-111px, -154px); }
}