/* ==== Fontes ====
   Les .ttf restent la source unique du rendu print (resvg lit les TTF) : ne pas
   les supprimer. Le web est servi en .woff2, généré depuis ces mêmes TTF
   (335 Ko -> 137 Ko, mêmes glyphes, mêmes métriques). Si un TTF est remplacé,
   régénérer le woff2 correspondant :
     python -c "from fontTools.ttLib import TTFont; f=TTFont('X.ttf'); f.flavor='woff2'; f.save('X.woff2')"
*/
@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/Fraunces-Regular-_aOttQ2.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/Fraunces-SemiBold-Psx7z8Y.woff2") format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url("../fonts/Outfit-Regular-YnqREMK.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url("../fonts/Outfit-Medium-9eY2FZh.woff2") format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url("../fonts/Outfit-SemiBold-y0lkhYZ.woff2") format('woff2');
    font-weight: 600;
    font-display: swap;
}

/* Fontes d'affichage des thèmes (site uniquement — l'affiche imprimée reste
   en Fraunces/Outfit droits). Chargées seulement quand un thème les rend. */
@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/Fraunces-Italic-Variable-SOH-dtm.woff2") format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url("../fonts/CormorantGaramond-SemiBold-gSvhwzq.woff2") format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo Black';
    src: url("../fonts/ArchivoBlack-Regular-6Blk7QH.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Anton';
    src: url("../fonts/Anton-Regular-KSH4Qgp.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Fredoka';
    src: url("../fonts/Fredoka-Variable-GEhDCFP.woff2") format('woff2');
    font-weight: 300 700;
    font-display: swap;
}
/* Lettrage des affiches riviera : une fonte par palette (Palette::lettering).
   Toutes arrondies, comme le moodboard. Sous-ensemblées au latin + français,
   les mêmes glyphes que les tables de FontMetrics — au-delà, l'auto-ajustement
   retomberait sur la largeur moyenne. */
@font-face {
    font-family: 'Rounded Mplus 1c';
    src: url("../fonts/MPLUSRounded1c-ExtraBold-NWiQK8U.woff2") format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url("../fonts/Rubik-Black-w3IILa_.woff2") format('woff2');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url("../fonts/Quicksand-Bold-3V-wtO3.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url("../fonts/Baloo2-ExtraBold-O3L5WN7.woff2") format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url("../fonts/Nunito-Black-jax866f.woff2") format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ==== Thèmes : tokens sémantiques ========================================
   Le site entier se rethème via body[data-palette="…"] (blocs en fin de
   fichier). Le bloc body ci-dessous = le look atelier/Jardin historique,
   au pixel près : c'est le rendu par défaut (admin, valeur inconnue…).
   Tout est déclaré sur body (pas :root) pour que les dérivés color-mix
   se recalculent quand une palette redéfinit les tokens de base. ==== */
body {
    /* -- base, redéfinie par palette -- */
    --paper: #F7F4EC;
    --ink-strong: #2A241C;
    --ink-mid: #6E6759;
    --accent: #2A402F;
    --accent-deep: #22352A;
    --on-accent: #F5F1E7;
    --heading: var(--accent);
    --plaque: #FDFBF5;
    --plaque-alt: #F3F1E8;
    --frame: #2C241C;
    --wall: #E9EDE0;
    --input-bg: #FBF8F0;
    --input-focus-bg: #FFFFFF;
    --shadow-ink: #2A241C;
    --highlight: #FFFFFF;
    --glass: #FCFAF4;
    --scene-glow: #FFFDF6;
    --glow-strength: 85%;
    --photo-veil: transparent;
    --grain-opacity: .045;
    --font-display: 'Fraunces', Georgia, serif;
    --display-weight: 600;
    --display-style: normal;
    --display-tracking: normal;
    --display-transform: none;

    /* -- dérivés (color-mix), recalculés automatiquement par thème -- */
    --tray-bg: color-mix(in srgb, var(--shadow-ink) 5.5%, transparent);
    --hairline: color-mix(in srgb, var(--shadow-ink) 9%, transparent);
    --hairline-mid: color-mix(in srgb, var(--shadow-ink) 14%, transparent);
    --hairline-strong: color-mix(in srgb, var(--shadow-ink) 24%, transparent);
    --shadow-faint: color-mix(in srgb, var(--shadow-ink) 22%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 30%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 38%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 60%, transparent);
    --bezel-highlight-accent: color-mix(in srgb, var(--highlight) 14%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 50%, transparent);
    --on-accent-soft: color-mix(in srgb, var(--on-accent) 75%, transparent);
    --on-accent-muted: color-mix(in srgb, var(--on-accent) 64%, transparent);
    --on-accent-mid: color-mix(in srgb, var(--on-accent) 30%, transparent);
    --on-accent-faint: color-mix(in srgb, var(--on-accent) 16%, transparent);
    --on-accent-dim: color-mix(in srgb, var(--on-accent) 8%, transparent);
    --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-tint-strong: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-hairline: color-mix(in srgb, var(--accent) 25%, transparent);
    --accent-shadow: color-mix(in srgb, var(--accent) 55%, transparent);
    --glass-nav: color-mix(in srgb, var(--glass) 72%, transparent);
    --glass-sheet: color-mix(in srgb, var(--glass) 86%, transparent);

    /* -- alias historiques (les ~100 usages existants restent valides) -- */
    --forest: var(--accent);
    --forest-deep: var(--accent-deep);
    --cream-btn: var(--on-accent);
    --cream: var(--ink-strong);
    --cream-soft: var(--ink-mid);
    --bg: var(--paper);
    --surface: var(--plaque);
    --ink: var(--ink-strong);
    --ink-soft: var(--ink-mid);
    --line: var(--hairline-mid);
    --radius: 10px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-weight: var(--display-weight, 600);
    font-style: var(--display-style, normal);
    letter-spacing: var(--display-tracking, normal);
    text-transform: var(--display-transform, none);
    line-height: 1.15;
    text-wrap: balance;
}
a { color: var(--accent-dark); }

/* Lien d'évitement : invisible jusqu'au focus clavier */
.skip-link {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(calc(-100% - 20px));
}
.skip-link:focus { transform: none; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.btn {
    display: inline-block;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Nav --- */
.wordmark {
    font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal);
    font-weight: var(--display-weight, 600);
    letter-spacing: var(--display-tracking, normal);
    text-transform: var(--display-transform, none);
    font-size: 19px;
    color: var(--cream, var(--ink));
    text-decoration: none;
}

/* --- Manifesto --- */
.manifesto { padding: 110px 24px 120px; text-align: center; }
.manifesto p {
    font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal);
    font-weight: 400;
    font-size: clamp(24px, 3.1vw, 36px);
    line-height: 1.35;
    max-width: 26em;
    margin: 0 auto;
}
/* Sous-titre du manifesto : registre courant, sous la phrase display */
.manifesto p.manifesto-sub {
    font-family: inherit;
    font-style: normal;
    font-size: clamp(15.5px, 1.35vw, 17.5px);
    line-height: 1.6;
    max-width: 44em;
    margin: 26px auto 0;
    color: var(--cream-soft);
}


/* --- Comment ça marche : cartes empilées au scroll (sticky natif) --- */
.how { max-width: 1150px; margin: 0 auto; padding: 0 24px 150px; }
.how h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 46px; }
.how-stack { display: flex; flex-direction: column; gap: 30px; }
.how-card {
    position: sticky;
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 30px 70px -35px var(--shadow-mid);
}
.how-card:nth-child(1) { top: 94px; }
.how-card:nth-child(2) { top: 108px; }
.how-card:nth-child(3) { top: 122px; }
.how-core {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    min-height: 460px;
    padding: 54px 58px;
    background: var(--plaque);
    border-radius: calc(2rem - .55rem);
    box-shadow: inset 0 1px 1px var(--bezel-highlight);
}
.how-card:nth-child(2) .how-core { background: var(--plaque-alt); }
.how-core-wall { position: relative; overflow: hidden; background: var(--wall); }
.how-core-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(110% 80% at 12% -5%, color-mix(in srgb, var(--scene-glow) var(--glow-strength), transparent), transparent 55%);
}
.how-copy h3 { font-size: clamp(34px, 3.8vw, 52px); margin: 0 0 14px; }
.how-copy p { color: var(--cream-soft); font-size: 17px; max-width: 38ch; margin: 0; }
.how-visual {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.how-visual svg { display: block; width: 100%; height: auto; }
.mini-poster { width: min(235px, 62%); box-shadow: 0 24px 55px -25px var(--shadow-deep); }
.how-compose .wall-dot { width: 22px; height: 22px; cursor: default; pointer-events: none; }
.how-preview { display: block; width: 100%; height: 400px; }
.pv-back {
    position: absolute;
    left: 11%;
    top: 7%;
    width: 46%;
    transform: rotate(-5deg);
    box-shadow: 0 22px 50px -22px var(--shadow-mid);
}
.pv-front {
    position: absolute;
    right: 9%;
    top: 0;
    width: 52%;
    transform: rotate(2deg);
    box-shadow: 0 28px 60px -24px var(--shadow-deep);
}
.hang-frame {
    width: min(245px, 64%);
    border: 10px solid var(--frame);
    background: var(--frame);
    border-radius: 2px;
    box-shadow:
        0 2px 5px var(--shadow-faint),
        0 26px 55px -16px var(--shadow-deep),
        0 60px 110px -45px var(--shadow-soft);
}

/* --- Détails : bento asymétrique 12 colonnes, coques double-bezel.
   La plaque intérieure se soulève dans son plateau au survol. --- */
.details { max-width: 1150px; margin: 0 auto; padding: 0 24px 120px; }
.details-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin: 0 0 44px;
}
.details-head h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0; }
.details-sub {
    max-width: 30ch;
    margin: 0 0 6px;
    color: var(--cream-soft);
    font-size: 15.5px;
    text-align: right;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 6px 15px;
    border: 1px solid var(--hairline-mid);
    border-radius: 999px;
    background: var(--scrim);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cream-soft);
}
.eyebrow::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--forest);
}
.details-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}
.details-bento .reveal { transition-delay: var(--d, 0s); }
.dcell {
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 30px 70px -35px var(--shadow-mid);
}
.dcell-crop { grid-column: 1 / 6; grid-row: 1 / 3; }
.dcell-format { grid-column: 6 / 9; }
.dcell-origin { grid-column: 9 / 13; }
.dcell-forest { grid-column: 6 / 13; }
.dcell-core {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 32px 32px;
    background: var(--plaque);
    border-radius: calc(2rem - .55rem);
    box-shadow: inset 0 1px 1px var(--bezel-highlight);
    transition:
        transform .7s cubic-bezier(.32, .72, 0, 1),
        box-shadow .7s cubic-bezier(.32, .72, 0, 1);
}
.dcell:hover .dcell-core {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 1px var(--bezel-highlight),
        0 18px 38px -22px var(--shadow-mid);
}
.dcell-origin .dcell-core { background: var(--plaque-alt); }
.dcell-tag {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cream-soft);
}
.dcell-num {
    font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal);
    font-weight: 600;
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--forest);
    margin: 0 0 14px;
}
.dcell-unit {
    font-size: .38em;
    letter-spacing: .04em;
    margin-left: .3em;
    color: var(--cream-soft);
}
.dcell-text { color: var(--cream-soft); margin: 0; font-size: 15.5px; max-width: 36ch; }

/* Cellule crop : l'affiche en très gros plan, zoom lent au survol */
.dcell-crop .dcell-core { padding: 0; overflow: hidden; }
.crop { position: relative; overflow: hidden; flex: 1; min-height: 280px; }
.crop svg {
    position: absolute;
    width: 220%;
    height: auto;
    left: -7%;
    top: 0;
    transform: translateY(-32.5%);
    transition: transform 1.4s cubic-bezier(.32, .72, 0, 1);
}
.dcell-crop:hover .crop svg { transform: translateY(-32.5%) scale(1.035); }
.crop-caption { padding: 22px 28px 26px; background: var(--plaque); border-top: 1px solid var(--hairline); }
.crop-line { margin: 0; font-weight: 500; color: var(--ink-strong); }

/* Cellule forêt : la plaque sombre dans son plateau clair */
.dcell-forest .dcell-core {
    position: relative;
    overflow: hidden;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
    background: var(--accent);
    box-shadow: inset 0 1px 1px var(--bezel-highlight-accent);
}
.dcell-forest .dcell-core::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 110% at 8% -10%, var(--on-accent-faint), transparent 55%);
}
.dcell-forest .dcell-tag { color: var(--on-accent-muted); }
.dcell-forest .dcell-num { color: var(--on-accent); margin-bottom: 0; white-space: nowrap; }
.dcell-forest .dcell-text { position: relative; color: var(--on-accent-soft); max-width: 30ch; margin-bottom: 4px; }
.dcell-forest:hover .dcell-core {
    box-shadow:
        inset 0 1px 1px var(--bezel-highlight-accent),
        0 18px 38px -20px var(--accent-shadow);
}

/* --- FAQ : plaques dépliables, réassurance logistique --- */
.faq { max-width: 860px; margin: 0 auto; padding: 0 24px 130px; }
.faq .details-head { margin-bottom: 34px; }
.faq .details-head h2 { font-size: clamp(28px, 3.2vw, 42px); }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-list .reveal { transition-delay: var(--d, 0s); }
.faq-item {
    background: var(--plaque);
    border: 1px solid var(--hairline-mid);
    border-radius: 18px;
    box-shadow: 0 18px 45px -32px var(--shadow-soft), inset 0 1px 1px var(--bezel-highlight);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink-strong);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--hairline-mid);
    background: var(--scrim);
    transition: transform .5s cubic-bezier(.32, .72, 0, 1), background .5s cubic-bezier(.32, .72, 0, 1);
}
.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--accent);
    transform: translate(-50%, -50%);
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--accent-tint); }
.faq-item summary:hover .faq-toggle { background: var(--accent-tint); }
.faq-body {
    margin: 0;
    padding: 0 54px 20px 22px;
    color: var(--cream-soft);
    font-size: 15px;
    line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes faq-open {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .faq-item[open] .faq-body { animation: faq-open .5s cubic-bezier(.32, .72, 0, 1) both; }
}

/* --- Clôture --- */
.closing { text-align: center; padding: 20px 24px 130px; }
.closing h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 0 0 14px; }
.closing-price { color: var(--cream-soft); font-size: 17px; margin: 0 0 30px; }
.btn-lg { padding: 17px 38px; font-size: 18px; }

/* --- Motion : révélations au scroll --- */
@media (prefers-reduced-motion: no-preference) {
    body.reveal-ready .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    }
    body.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .manifesto { padding: 70px 24px 80px; }
    .details { padding-bottom: 80px; }
    .details-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
    .details-sub { text-align: left; margin-bottom: 0; }
    .details-bento { grid-template-columns: 1fr; gap: 18px; }
    .dcell-crop, .dcell-format, .dcell-origin, .dcell-forest { grid-column: auto; grid-row: auto; }
    .details-bento .reveal { transition-delay: 0s; }
    .dcell-forest .dcell-core { flex-direction: column; align-items: flex-start; gap: 18px; }
    .dcell-forest .dcell-num { margin-bottom: 0; }
    .crop { min-height: 240px; }
    .closing { padding-bottom: 90px; }
}

/* ==== Configurateur : contrôles de base (repris par le thème studio) ==== */
.field-row { display: flex; gap: 10px; }
.field { flex: 1; margin-bottom: 10px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--ink-soft); }
.field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    background: var(--bg);
    color: var(--ink);
}
.field input[type="text"]:focus { outline: none; border-color: var(--accent); }

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.activity-item:last-child { border-bottom: none; }
.activity-item input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 1.5px solid transparent;
    background: transparent;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink);
}
.activity-item input[type="text"]:focus { outline: none; border-color: var(--accent); background: var(--bg); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    color: var(--accent);
    flex-shrink: 0;
    padding: 0;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.remove { color: var(--ink-soft); }
.icon-btn.remove:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.icon-btn svg { width: 18px; height: 18px; }

.add-activity {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1.5px dashed var(--line);
    border-radius: 8px;
    background: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}
.add-activity:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.add-activity:disabled { opacity: .45; cursor: not-allowed; }

.reserve-list { display: flex; flex-wrap: wrap; gap: 8px; }
.reserve-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.reserve-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); }
.reserve-chip:disabled { opacity: .4; cursor: not-allowed; }
.reserve-chip svg { width: 14px; height: 14px; color: var(--accent); }

/* Picker de pictos */
.icon-picker { position: relative; }
.icon-picker-pop {
    position: absolute;
    z-index: 30;
    top: 40px;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px -12px var(--shadow-mid);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 34px);
    gap: 6px;
}
.icon-picker-pop .icon-btn.selected { border-color: var(--accent); background: var(--accent-tint); }

/* Récap + consentements */
.consents { font-size: 14px; }
.consents label { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.consents input { margin-top: 3px; accent-color: var(--accent); }
.checkout-error { color: #A03024; font-size: 14px; margin: 10px 0 0; }
.btn-checkout { width: 100%; text-align: center; }

/* ==== Pages simples (merci, légal, erreurs) ==== */
.page-narrow { max-width: 720px; margin: 0 auto; padding: 140px 20px 100px; }
.page-narrow h1 { font-size: 34px; }
.page-narrow h2 { font-size: 22px; margin-top: 32px; }

/* --- Pages éditoriales (/idees) --- */
.crumbs { font-size: 13px; color: var(--cream-soft); margin: 0 0 18px; }
.crumbs a { color: inherit; }
.article-lead {
    font-size: 18.5px;
    line-height: 1.55;
    color: var(--cream-soft);
    margin: 0 0 8px;
}
.article p, .article li { line-height: 1.68; }
.article h3 { font-size: 17.5px; margin-top: 26px; }
.article ul { padding-left: 1.1em; }
.article li { margin-bottom: 7px; }
.article-cta {
    margin-top: 54px;
    padding: 26px 28px;
    border: 1px solid var(--hairline-mid);
    border-radius: 14px;
    background: var(--scrim);
}
.article-cta p { margin: 0 0 18px; }
.article-more { margin-top: 48px; }
.article-more h2 { font-size: 18px; }
.article-more ul { list-style: none; padding: 0; }
.article-more li { margin-bottom: 9px; }
.ideas-list { list-style: none; padding: 0; margin: 34px 0 0; }
.ideas-list > li { margin-bottom: 30px; }
.ideas-list h2 { font-size: 21px; margin: 0 0 6px; }
.ideas-list p { margin: 0; color: var(--cream-soft); }
.success-box {
    background: var(--plaque);
    border: 1px solid var(--hairline-mid);
    border-radius: 18px;
    box-shadow: 0 18px 45px -32px var(--shadow-soft), inset 0 1px 1px var(--bezel-highlight);
    padding: 28px;
    margin: 24px 0;
}
.success-box .ref { font-family: var(--font-display, "Fraunces", serif); font-style: var(--display-style, normal); font-size: 24px; color: var(--forest, var(--accent-dark)); }

/* Attente de la confirmation du webhook Stripe sur /merci */
.status-line { display: flex; align-items: center; gap: 10px; opacity: .75; font-size: 15px; }
.status-line .spinner {
    width: 15px; height: 15px; flex: none;
    border: 2px solid var(--hairline-mid);
    border-top-color: var(--forest, var(--accent-dark));
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .status-line .spinner { animation: status-spin 900ms linear infinite; }
}
@keyframes status-spin { to { transform: rotate(360deg); } }

.error-page { padding-top: 170px; }
.error-code {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cream-soft, var(--ink-soft));
}

/* ==== Admin ==== */
.admin { max-width: 1200px; margin: 0 auto; padding: 110px 20px 60px; }
.admin table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.admin th, .admin td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line); }
.badge.paid { background: #DCE8D4; color: #2A402F; }
.badge.printing { background: #F3E3C3; color: #7A5A18; }
.badge.shipped, .badge.delivered { background: #D4E3E8; color: #1E4653; }
.badge.cancelled { background: #EBD3CE; color: #7A2A1E; }
.badge.failed { background: #8C2F39; color: #fff; }

/* Commande payée qui n'est pas partie à l'impression : doit sauter aux yeux. */
.row-failed > td { background: #FBF0F0; }
.submission-error { color: #7A2A1E; font-size: 13px; line-height: 1.6; border-left: 3px solid #8C2F39; }
.submission-error em { display: block; margin-top: 4px; opacity: .8; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; font-size: 14px; }
.flash-success { background: #DCE8D4; color: #2A402F; }
.flash-warning { background: #F3E3C3; color: #7A5A18; }
.flash-error, .flash-danger { background: #EBD3CE; color: #7A2A1E; }
.admin form { display: inline-flex; gap: 6px; margin: 2px 0; }
.admin form input[type="text"] { width: 130px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.admin .btn-small { padding: 5px 12px; font-size: 13px; }

/* ==== Footer ==== */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0; font-size: 14px; color: var(--ink-soft); }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-inner nav { display: flex; gap: 18px; }
.footer-inner a { color: var(--ink-soft); text-decoration: none; }
.footer-inner a:hover { color: var(--ink); }

/* ==================================================================
   Landing "Atelier" : le mur en lumière naturelle (réf. éditoriale).
   Plâtre chaud, encre espresso, un seul accent : vert forêt (#2A402F,
   issu de la palette produit Jardin). Boutons pill + orbe imbriquée,
   coques "double-bezel" 2rem, grain photographique fixe.
   Les alias --cream-* remappent les tokens des sections partagées
   (étapes, bento, clôture) vers les valeurs claires.
   ================================================================== */
.theme-atelier {
    /* les tokens vivent désormais sur body (voir tête de fichier) */
    --accent-dark: var(--accent-deep);
    background: var(--paper);
    color: var(--ink-strong);
}
.theme-atelier ::selection { background: var(--accent); color: var(--on-accent); }
.theme-atelier h1, .theme-atelier h2, .theme-atelier h3 { color: var(--heading); }
.theme-atelier .btn:focus-visible,
.theme-atelier a:focus-visible,
.theme-atelier button:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* Grain photographique : fixe, inerte, jamais sur un conteneur scrollable */
.grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Nav îlot flottant --- */
.island-nav {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 8px 8px 8px 22px;
    border-radius: 999px;
    background: var(--glass-nav);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 14px 40px -18px var(--shadow-soft);
}
.theme-atelier .wordmark { color: var(--ink-strong); font-size: 17px; white-space: nowrap; }
.btn-forest { white-space: nowrap; }

/* --- Bouton forêt : pill + orbe imbriquée --- */
.btn-forest {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 9px 9px 24px;
    background: var(--forest);
    color: var(--cream-btn);
    transition: background .5s cubic-bezier(.32, .72, 0, 1), transform .5s cubic-bezier(.32, .72, 0, 1);
}
.btn-forest:hover { background: var(--accent-deep); }
.btn-forest:active { transform: scale(.98); }
.btn-orb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--on-accent-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.btn-forest:hover .btn-orb { transform: translate(2px, -2px) scale(1.06); }
.btn-forest.btn-nav { padding: 6px 6px 6px 18px; font-size: 15px; gap: 10px; }
.btn-forest.btn-nav .btn-orb { width: 30px; height: 30px; font-size: 13px; }
.btn-forest.btn-lg { padding: 11px 11px 11px 28px; font-size: 17.5px; }

/* --- Scènes photo : l'affiche composée sur de vraies photos --- */
.photo-scene {
    position: relative;
    overflow: hidden;
}
.photo-scene img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Voile nocturne : transparent en thème clair, il assombrit les photos
   d'intérieur (et l'affiche encadrée) pour qu'elles s'assoient dans la nuit */
.photo-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--photo-veil);
}
.scene-frame {
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 43%);
    width: var(--fw, 46%);
    transform: translate(-50%, -50%);
    border: 9px solid var(--frame);
    background: var(--frame);
    border-radius: 2px;
    box-shadow:
        0 2px 5px var(--shadow-faint),
        0 22px 48px -14px var(--shadow-mid),
        0 55px 100px -40px var(--shadow-soft);
}
.scene-frame svg { display: block; width: 100%; height: auto; }

/* Bande immersive pleine largeur */
.room-band { position: relative; overflow: hidden; margin-bottom: 150px; }
.room-band::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--photo-veil);
}
/* Les photos sont enveloppées dans <picture> (WebP + repli JPEG) : les
   sélecteurs visent l'<img> en descendant, et <picture> passe en block pour ne
   pas réintroduire l'espace de ligne des éléments inline. */
.room-band > picture,
.photo-scene picture { display: block; }
.room-band > picture > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.band-line {
    position: absolute;
    z-index: 1;
    right: 7%;
    top: 34%;
    width: 10.5em;
    margin: 0;
    font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal);
    font-weight: 600;
    font-size: clamp(22px, 2.7vw, 42px);
    line-height: 1.15;
    color: var(--forest);
}

/* --- Héro : le mur habité --- */
.wall-hero .scene-light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(115% 85% at 10% -5%, color-mix(in srgb, var(--scene-glow) var(--glow-strength), transparent), transparent 55%),
        linear-gradient(205deg, color-mix(in srgb, var(--highlight) calc(var(--glow-strength) * .38), transparent), transparent 42%),
        radial-gradient(90% 70% at 100% 105%, color-mix(in srgb, var(--shadow-ink) 10%, transparent), transparent 60%);
}
.wall-hero {
    position: relative;
    min-height: 100dvh;
    background: var(--wall);
    transition: background 1s cubic-bezier(.32, .72, 0, 1);
    overflow: hidden;
    padding: 0 24px;
}
.wall-title {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: max(15vh, 128px);
    font-size: clamp(46px, 8vw, 108px);
    line-height: .98;
    letter-spacing: -.02em;
    margin: 0;
}
.wall-line { display: block; }
.wall-frame {
    position: absolute;
    left: 50%;
    top: 36%;
    width: clamp(250px, 25vw, 350px);
    transform: translateX(-50%);
    z-index: 2;
    border: 11px solid var(--frame);
    background: var(--frame);
    border-radius: 2px;
    box-shadow:
        0 3px 6px var(--shadow-faint),
        0 30px 60px -18px var(--shadow-deep),
        0 70px 130px -50px var(--shadow-soft);
}
.wall-frame svg { display: block; width: 100%; height: auto; }
.wall-lead {
    position: absolute;
    z-index: 3;
    right: max(5vw, 30px);
    bottom: 20%;
    width: min(300px, 28vw);
    color: var(--cream-soft);
    font-size: 16.5px;
    margin: 0;
}
.wall-actions {
    position: absolute;
    z-index: 3;
    left: max(5vw, 30px);
    bottom: 9%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}
.wall-dots { display: flex; gap: 12px; }
.wall-dot {
    position: relative;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: var(--dot-bg);
    cursor: pointer;
    padding: 0;
    transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.wall-dot::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--dot-accent);
}
.wall-dot:hover { transform: translateY(-2px) scale(1.08); }
.wall-dot.active { outline: 2px solid var(--forest); outline-offset: 3px; }

/* --- Galerie : cascade de pièces --- */
.rooms { max-width: 1180px; margin: 0 auto; padding: 30px 24px 150px; }
.rooms h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 46px; }
.rooms-cascade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 46px;
    max-width: 940px;
    margin: 0 auto;
    align-items: start;
}
.room-card { margin: 0; }
.room-card:nth-child(1) { transform: rotate(-1.6deg); margin-top: 30px; }
.room-card:nth-child(2) { transform: rotate(1.3deg); }
.room-shell {
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 30px 70px -35px var(--shadow-mid);
}
.room-shell .photo-scene {
    border-radius: calc(2rem - .55rem);
    box-shadow: inset 0 1px 1px var(--scrim);
}
.room-card figcaption {
    margin-top: 16px;
    text-align: center;
    color: var(--cream-soft);
    font-size: 15px;
}

/* --- Sections partagées, recolorées par les alias --- */
.theme-atelier .manifesto { padding: 150px 24px; }
.theme-atelier .manifesto p { color: var(--ink-strong); }
.theme-atelier .manifesto em { font-style: normal; color: var(--forest); }
.theme-atelier .details { padding-bottom: 150px; }
.theme-atelier .closing { padding-bottom: 150px; }
.theme-atelier .closing .btn-forest { margin: 0 auto; }

/* --- Motion atelier --- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes atelier-rise {
        from { opacity: 0; transform: translateY(36px); filter: blur(10px); }
        to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    @keyframes atelier-hang {
        from { opacity: 0; transform: translateX(-50%) translateY(52px); filter: blur(8px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
    }
    .wall-title .wall-line { animation: atelier-rise .9s cubic-bezier(.32, .72, 0, 1) both; }
    .wall-title .wall-line:nth-child(2) { animation-delay: .1s; }
    .wall-frame { animation: atelier-hang 1.1s cubic-bezier(.32, .72, 0, 1) .28s both; }
    .wall-lead { animation: atelier-rise .9s cubic-bezier(.32, .72, 0, 1) .5s both; }
    .wall-actions { animation: atelier-rise .9s cubic-bezier(.32, .72, 0, 1) .62s both; }

    body.theme-atelier.reveal-ready .reveal {
        filter: blur(9px);
        transition: opacity .85s cubic-bezier(.32, .72, 0, 1), transform .85s cubic-bezier(.32, .72, 0, 1), filter .85s cubic-bezier(.32, .72, 0, 1);
    }
    body.theme-atelier.reveal-ready .reveal.is-visible { filter: blur(0); }
}

/* --- Mobile atelier --- */
@media (max-width: 900px) {
    .island-nav { gap: 14px; padding-left: 16px; top: 12px; width: max-content; max-width: calc(100vw - 24px); }
    .theme-atelier .wordmark { font-size: 15px; }

    .wall-hero { min-height: 0; padding-bottom: 60px; }
    .wall-title { padding-top: 108px; font-size: clamp(38px, 10.5vw, 52px); }
    .wall-frame {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: min(300px, 76%);
        margin: 36px auto 0;
    }
    .wall-lead {
        position: static;
        width: 100%;
        max-width: 34em;
        margin: 30px auto 0;
        text-align: center;
    }
    .wall-actions {
        position: static;
        align-items: center;
        margin-top: 26px;
    }
    .rooms { padding-bottom: 90px; }
    .how { padding-bottom: 90px; }
    .how-card { position: static; }
    .how-core { grid-template-columns: 1fr; min-height: 0; padding: 32px 24px; gap: 30px; }
    .how-preview { height: auto; aspect-ratio: 1 / 1; }
    .room-band { margin-bottom: 90px; }
    .room-band > picture > img { aspect-ratio: 4 / 5; object-position: 6% center; }
    .room-band .scene-frame { --fx: 50%; --fy: 30%; --fw: 29%; border-width: 6px; }
    .room-band .band-line {
        position: static;
        width: auto;
        max-width: 14em;
        margin: 26px auto 0;
        padding: 0 24px;
        text-align: center;
        font-size: 24px;
    }
    .rooms-cascade { grid-template-columns: 1fr; gap: 30px; }
    .room-card:nth-child(n) { transform: none; margin-top: 0; }
    .theme-atelier .manifesto { padding: 90px 24px; }
    .theme-atelier .details, .theme-atelier .closing { padding-bottom: 90px; }
    .faq { padding-bottom: 80px; }
    .faq-body { padding-right: 22px; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    @keyframes atelier-hang-mobile {
        from { opacity: 0; transform: translateY(52px); filter: blur(8px); }
        to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    .wall-frame { animation-name: atelier-hang-mobile; }
}

/* ==================================================================
   Configurateur "Studio" : le mur vivant à gauche (sticky plein écran,
   la teinte suit la palette choisie), le parcours en quatre gestes à
   droite. Même langage que la landing atelier : coques double-bezel,
   pill + orbe, bezier (.32, .72, 0, 1).
   ================================================================== */
.island-nav-studio { padding-right: 22px; }
.studio-chip {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--cream-soft);
    white-space: nowrap;
    padding-left: 20px;
    border-left: 1px solid var(--hairline-mid);
}

.studio {
    /* les contrôles hérités (champs, pictos, chips) passent en forêt */
    --accent: var(--forest);
    --accent-dark: var(--accent-deep);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 640px);
}

/* --- Le mur : scène sticky, pleine hauteur --- */
.studio-wall {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wall);
    transition: background 1s cubic-bezier(.32, .72, 0, 1);
}
.studio-frame {
    position: relative;
    z-index: 1;
    width: min(clamp(250px, 26vw, 380px), calc((100dvh - 220px) * 5 / 7));
    border: 11px solid var(--frame);
    background: var(--frame);
    border-radius: 2px;
    box-shadow:
        0 3px 6px var(--shadow-faint),
        0 30px 60px -18px var(--shadow-deep),
        0 70px 130px -50px var(--shadow-soft);
}
.studio-frame svg { display: block; width: 100%; height: auto; }
.studio-note {
    position: absolute;
    z-index: 1;
    left: 32px;
    right: 32px;
    bottom: 30px;
    margin: 0;
    text-align: center;
    color: var(--cream-soft);
    font-size: 13.5px;
}

/* --- Le parcours --- */
.studio-pane {
    padding: 128px clamp(28px, 4.5vw, 64px) 150px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Bannière retour d'annulation Stripe : réassurance, langage atelier */
.studio-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 26px;
    padding: 14px 8px 14px 20px;
    border: 1px solid var(--accent-hairline);
    border-radius: 999px;
    background: var(--accent-tint);
}
.studio-banner p { margin: 0; font-size: 14.5px; color: var(--forest); font-weight: 500; }
.studio-banner-close {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--forest);
    cursor: pointer;
    transition: background .45s cubic-bezier(.32, .72, 0, 1);
}
.studio-banner-close:hover { background: var(--accent-tint-strong); }
.studio-banner-close svg { width: 14px; height: 14px; }

/* Chrome de la feuille mobile (poignée + segments) : mobile uniquement */
.sheet-header { display: none; }

.studio-head { margin: 0 0 16px; }
.studio-head h1 {
    font-size: clamp(34px, 3.4vw, 46px);
    letter-spacing: -.01em;
    margin: 0 0 14px;
}
.studio-lead { color: var(--cream-soft); font-size: 16.5px; max-width: 44ch; margin: 0; }
.studio .reveal { transition-delay: var(--d, 0s); }

/* Panneaux d'étape : coque double-bezel, plaque crème */
.spanel {
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 30px 70px -35px var(--shadow-mid);
}
.spanel-core {
    padding: 30px 32px 34px;
    background: var(--plaque);
    border-radius: calc(2rem - .55rem);
    box-shadow: inset 0 1px 1px var(--bezel-highlight);
}
.spanel-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 24px;
}
.step-no {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline-mid);
    background: var(--scrim);
    font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--forest);
}
.spanel-head h2 {
    font-size: 21px;
    margin: 2px 0 5px;
}
.spanel-head p { margin: 0; color: var(--cream-soft); font-size: 14.5px; }

/* Champs : plus amples, focus forêt en halo doux */
.studio .field label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cream-soft);
    margin-bottom: 7px;
}
.studio .field input[type="text"] {
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--hairline-mid);
    background: var(--input-bg);
    font-size: 16px; /* jamais < 16px : iOS zoome au focus et casse la scène sticky */
    transition:
        border-color .45s cubic-bezier(.32, .72, 0, 1),
        box-shadow .45s cubic-bezier(.32, .72, 0, 1),
        background .45s cubic-bezier(.32, .72, 0, 1);
}
.studio .field input[type="text"]:focus {
    border-color: var(--forest);
    background: var(--input-focus-bg);
    box-shadow: 0 0 0 4px var(--accent-tint);
}
.studio .field-row { gap: 14px; }

/* Palettes : les orbes du héro, avec leur nom */
.palette-orbs { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.palette-orb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--cream-soft);
}
.palette-orb .wall-dot { display: block; width: 34px; height: 34px; pointer-events: none; }
.palette-orb .wall-dot::after { inset: 9px; }
.palette-orb:hover .wall-dot { transform: translateY(-2px) scale(1.08); }
.palette-orb.active .wall-dot { outline: 2px solid var(--forest); outline-offset: 3px; }
.palette-orb.active .orb-label { color: var(--forest); font-weight: 600; }

/* Choix du motif : axe indépendant (au trait ou découpé façon Matisse) */
.motif-choice { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.motif-choice-label {
    margin: 0 0 12px;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cream-soft, var(--ink-soft));
}
.motif-orbs { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.motif-orb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: var(--cream-soft, var(--ink-soft));
}
.motif-preview {
    display: block;
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid var(--hairline-mid);
    background: var(--scrim);
    fill: none;
    stroke: var(--accent, currentColor);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
/* Motif plein : les fragments portent leurs propres couleurs, pas de contour hérité */
.motif-orb.filled .motif-preview { stroke: none; }
.motif-orb:hover .motif-preview { transform: translateY(-2px) scale(1.08); }
.motif-orb.active .motif-preview { outline: 2px solid var(--forest); outline-offset: 3px; border-color: transparent; }
.motif-orb.active .orb-label { color: var(--forest); font-weight: 600; }

/* Aventures : compteur, jauge fine, lignes hairline */
.adv-count {
    margin-left: auto;
    align-self: center;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--hairline-mid);
    background: var(--scrim);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cream-soft);
    white-space: nowrap;
    transition: color .45s cubic-bezier(.32, .72, 0, 1), border-color .45s cubic-bezier(.32, .72, 0, 1);
}
.adv-count.full { color: var(--forest); border-color: var(--forest); }
.adv-progress {
    height: 3px;
    border-radius: 999px;
    background: var(--hairline);
    overflow: hidden;
    margin: 0 0 18px;
}
.adv-progress-fill {
    display: block;
    height: 100%;
    background: var(--forest);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .8s cubic-bezier(.32, .72, 0, 1);
}
.studio .activity-item { border-bottom-color: var(--hairline); padding: 7px 0; }
.studio .activity-item input[type="text"] { font-size: 16px; } /* ≥ 16px : anti-zoom iOS */
.studio .icon-btn {
    border-radius: 999px;
    border-color: var(--hairline-mid);
    background: var(--input-bg);
    transition: border-color .45s cubic-bezier(.32, .72, 0, 1), transform .45s cubic-bezier(.32, .72, 0, 1);
}
.studio .icon-btn:hover { transform: translateY(-1px); }
.studio .icon-picker-pop { border-radius: 18px; }
.studio .add-activity {
    border-radius: 999px;
    padding: 12px;
    border-color: var(--hairline-strong);
    transition: border-color .45s cubic-bezier(.32, .72, 0, 1), color .45s cubic-bezier(.32, .72, 0, 1);
}

/* Réserve d'idées, intégrée à l'étape 03 */
.reserve { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.reserve-title { margin: 0 0 12px; font-size: 13.5px; font-weight: 500; color: var(--cream-soft); }
.studio .reserve-chip {
    background: var(--input-bg);
    transition: border-color .45s cubic-bezier(.32, .72, 0, 1), color .45s cubic-bezier(.32, .72, 0, 1);
}

/* Étape 04 : la plaque forêt, moment de signature */
.spanel-forest .spanel-core {
    position: relative;
    overflow: hidden;
    background: var(--forest);
    box-shadow: inset 0 1px 1px var(--bezel-highlight-accent);
}
.spanel-forest .spanel-core::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 110% at 8% -10%, var(--on-accent-faint), transparent 55%);
}
.spanel-forest .spanel-core > * { position: relative; }
.spanel-forest .spanel-head h2 { color: var(--cream-btn); }
.spanel-forest .spanel-head p { color: var(--on-accent-muted); }
.spanel-forest .step-no {
    border-color: var(--on-accent-mid);
    background: var(--on-accent-dim);
    color: var(--cream-btn);
}
.order-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 18px 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--on-accent-faint);
    border-bottom: 1px solid var(--on-accent-faint);
    color: var(--cream-btn);
    font-weight: 500;
}
.order-line small { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: var(--on-accent-muted); }
.order-price { font-family: var(--font-display, "Fraunces", Georgia, serif); font-style: var(--display-style, normal); font-weight: 600; font-size: 30px; }
.order-promise { margin: 0 0 20px; font-size: 14px; color: var(--on-accent-soft); }
.order-promise strong { color: var(--cream-btn); font-weight: 600; }
.spanel-forest .consents { color: var(--on-accent-soft); font-size: 13.5px; }
.spanel-forest .consents a { color: var(--cream-btn); }
.spanel-forest .consents input { accent-color: var(--cream-btn); }
.spanel-forest .checkout-error { color: #F2C0B2; }

.btn-cream {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    padding: 10px 10px 10px 26px;
    background: var(--cream-btn);
    color: var(--forest);
    font-size: 17px;
    transition:
        background .5s cubic-bezier(.32, .72, 0, 1),
        transform .5s cubic-bezier(.32, .72, 0, 1);
}
.btn-cream:hover:not(:disabled) { background: color-mix(in srgb, var(--on-accent) 92%, var(--highlight)); }
.btn-cream:active:not(:disabled) { transform: scale(.985); }
.btn-cream .btn-orb { background: var(--accent-tint); }
.btn-cream:hover:not(:disabled) .btn-orb { transform: translate(2px, -2px) scale(1.06); }

/* --- Motion studio --- */
@media (prefers-reduced-motion: no-preference) {
    .studio-frame { animation: atelier-rise 1s cubic-bezier(.32, .72, 0, 1) .15s both; }
    .studio-note { animation: atelier-rise .9s cubic-bezier(.32, .72, 0, 1) .45s both; }
    .studio-head { animation: atelier-rise .9s cubic-bezier(.32, .72, 0, 1) .08s both; }
}

/* --- Mobile studio : expérience app. Le mur occupe tout l'écran, la
   composition vit dans une feuille de verre glissante (poignée, segments,
   safe-area). Replier la feuille agrandit l'affiche, façon carte Wallet. --- */
@media (max-width: 900px) {
    .island-nav-studio .studio-chip { display: none; }
    .island-nav-studio { padding-right: 18px; }

    body.page-studio { height: 100dvh; overflow: hidden; }
    body.page-studio .site-footer { display: none; }

    .studio { display: block; }
    .studio-wall {
        position: fixed;
        inset: 0;
        height: 100dvh;
        z-index: 1;
    }
    .studio-frame {
        position: absolute;
        top: 11dvh;
        left: 50%;
        width: min(74vw, 48dvh);
        border-width: 9px;
        margin: 0;
        transform: translateX(-50%) scale(.42);
        transform-origin: top center;
        transition: transform .7s cubic-bezier(.32, .72, 0, 1);
        /* l'animation d'entrée desktop (fill both) écraserait les transforms d'état */
        animation: none;
    }
    .sheet-peek .studio-frame { transform: translateX(-50%) scale(1); }
    .studio-note {
        display: block;
        left: 20px;
        right: 20px;
        bottom: calc(122px + env(safe-area-inset-bottom));
        font-size: 12.5px;
        opacity: 0;
        transition: opacity .6s cubic-bezier(.32, .72, 0, 1) .2s;
        animation: none;
    }
    .sheet-peek .studio-note { opacity: 1; }

    /* La feuille : verre chaud, coins concentriques, défilement interne */
    .studio-pane {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        height: 66dvh;
        max-width: none;
        margin: 0;
        padding: 0 14px calc(22px + env(safe-area-inset-bottom));
        gap: 14px;
        background: var(--glass-sheet);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid var(--hairline);
        border-bottom: none;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -18px 55px -22px var(--shadow-mid);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateY(0);
        transition: transform .65s cubic-bezier(.32, .72, 0, 1);
    }
    /* Repliée : seule la poignée dépasse, l'affiche respire */
    .sheet-peek .studio-pane {
        transform: translateY(calc(66dvh - 106px - env(safe-area-inset-bottom)));
        overflow: hidden;
    }

    /* Poignée + segments, épinglés en haut de la feuille */
    .sheet-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 -14px;
        padding: 8px 14px 10px;
        background: linear-gradient(color-mix(in srgb, var(--glass) 96%, transparent) 62%, transparent);
    }
    .sheet-grabber {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 100%;
        padding: 2px 0 6px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: 'Outfit', sans-serif;
    }
    .grabber-bar {
        width: 38px;
        height: 5px;
        border-radius: 999px;
        background: var(--hairline-strong);
        transition: background .4s cubic-bezier(.32, .72, 0, 1);
    }
    .sheet-grabber:active .grabber-bar { background: var(--shadow-mid); }
    .grabber-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: var(--forest);
        color: var(--cream-btn);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: .02em;
        box-shadow: 0 8px 20px -8px var(--accent-shadow);
        transition: transform .4s cubic-bezier(.32, .72, 0, 1);
    }
    .sheet-grabber:active .grabber-pill { transform: scale(.96); }
    .grabber-pill svg { width: 15px; height: 15px; flex: none; }
    .sheet-steps {
        display: flex;
        gap: 6px;
        justify-content: center;
        padding-top: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .sheet-steps::-webkit-scrollbar { display: none; }
    .sheet-steps button {
        flex: none;
        white-space: nowrap;
        padding: 7px 13px;
        border: 1px solid var(--hairline-mid);
        border-radius: 999px;
        background: var(--scrim);
        font-family: 'Outfit', sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--cream-soft);
        cursor: pointer;
        transition:
            background .45s cubic-bezier(.32, .72, 0, 1),
            color .45s cubic-bezier(.32, .72, 0, 1),
            border-color .45s cubic-bezier(.32, .72, 0, 1);
    }
    .sheet-steps button.active {
        background: var(--forest);
        border-color: var(--forest);
        color: var(--cream-btn);
    }

    /* Contenu de la feuille */
    .studio-head { margin: 4px 6px 8px; }
    .studio-head h1 { font-size: 26px; margin-bottom: 8px; }
    .studio-lead { font-size: 14.5px; }
    .spanel { scroll-margin-top: 110px; }
    .spanel-core { padding: 24px 20px 26px; }
    .spanel-head { flex-wrap: wrap; gap: 12px; }
    .adv-count { align-self: flex-start; }
    .order-line { flex-wrap: wrap; }
}

/* ==================================================================
   L'affiche comme carte : zones cliquables invisibles par-dessus le SVG.
   Survol → halo pointillé ; champ lié au focus → halo qui respire ;
   fin d'ouverture → scintillement unique de toutes les zones.
   ================================================================== */
.poster-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
    pointer-events: all;
    cursor: pointer;
    transition: stroke .45s cubic-bezier(.32, .72, 0, 1);
}
.poster-hit:hover { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.poster-hit.editing {
    stroke: color-mix(in srgb, var(--accent) 80%, transparent);
}
#poster-svg.show-hits .poster-hit {
    stroke: color-mix(in srgb, var(--accent) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes hit-breathe {
        0%, 100% { opacity: .5; }
        50% { opacity: 1; }
    }
    .poster-hit.editing { animation: hit-breathe 2.2s cubic-bezier(.32, .72, 0, 1) infinite; }
    @keyframes hit-glint {
        0% { opacity: 0; }
        30% { opacity: 1; }
        100% { opacity: 0; }
    }
    #poster-svg.show-hits .poster-hit { animation: hit-glint 1.6s cubic-bezier(.32, .72, 0, 1) both; }
}

/* ==================================================================
   La flèche « meta tuto » : une note épinglée en marge + une flèche
   griffonnée à la main, pointant vers la liste d'aventures de l'affiche.
   Montrée une seule fois, desktop au pointeur fin. Sur mobile, l'ouverture
   et la feuille portent déjà l'affordance : la note reste masquée (le
   display:none par défaut gagne même quand Alpine lève le x-show).
   ================================================================== */
.meta-hint { display: none; }

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
    .meta-hint {
        display: block;
        position: absolute;
        z-index: 2;
        left: clamp(20px, 5vw, 76px);
        bottom: 96px;
        width: 212px;
        color: var(--forest);
        pointer-events: none; /* seul le bouton de fermeture reste cliquable */
    }
    .meta-hint-arrow {
        position: absolute;
        bottom: calc(100% - 4px);
        left: 34%;
        width: 116px;
        height: 90px;
        overflow: visible;
    }
    .mh-shaft { opacity: .85; }
    .meta-hint-note {
        position: relative;
        margin: 0;
        padding: 13px 34px 14px 16px;
        background: color-mix(in srgb, var(--plaque, var(--paper)) 92%, white);
        border: 1px solid var(--accent-hairline);
        border-radius: 15px 15px 15px 4px;
        box-shadow: 0 16px 34px -18px var(--accent-shadow);
        transform: rotate(-2.4deg);
        transform-origin: bottom left;
        font-family: var(--font-display, 'Fraunces', Georgia, serif);
        font-style: italic;
        font-size: 15px;
        line-height: 1.32;
        color: var(--forest);
        pointer-events: auto;
    }
    .meta-hint-close {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: color-mix(in srgb, var(--forest) 60%, transparent);
        cursor: pointer;
        transition: background .35s cubic-bezier(.32, .72, 0, 1), color .35s cubic-bezier(.32, .72, 0, 1);
    }
    .meta-hint-close:hover { background: var(--accent-tint); color: var(--forest); }
    .meta-hint-close svg { width: 12px; height: 12px; }
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    @keyframes mh-bob {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(4px, -4px) rotate(-3deg); }
    }
    .meta-hint-arrow { animation: mh-bob 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
}

/* ==================================================================
   L'ouverture : trois temps avant d'entrer dans l'atelier (1re visite).
   Verre chaud sur toute la scène, carte double-bezel centrée, l'affiche
   vivante derrière — prénoms et palette se répercutent en direct.
   ================================================================== */
body.ob-open { overflow: hidden; }
.ob {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ob-veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--wall) 46%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
.ob-shell {
    position: relative;
    width: min(560px, 100%);
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 40px 90px -40px var(--shadow-deep);
}
.ob-card {
    padding: 34px 38px 30px;
    background: var(--plaque);
    border-radius: calc(2rem - .55rem);
    box-shadow: inset 0 1px 1px var(--bezel-highlight);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
}
.ob-dots {
    display: flex;
    gap: 7px;
    margin: 0 0 22px;
}
.ob-dots span {
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: var(--hairline-mid);
    transition: background .5s cubic-bezier(.32, .72, 0, 1);
}
.ob-dots span.active { background: var(--forest); }
.ob-beat h2 {
    font-size: clamp(27px, 3vw, 34px);
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.ob-lead {
    color: var(--cream-soft);
    font-size: 15.5px;
    max-width: 42ch;
    margin: 0 0 26px;
}
/* Prénoms : éditoriaux, à même la plaque — juste un filet sous la ligne */
.ob-names {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}
.ob-names input {
    flex: 1;
    min-width: 0;
    padding: 4px 2px 10px;
    border: none;
    border-bottom: 1.5px solid var(--hairline-strong);
    border-radius: 0;
    background: none;
    color: var(--ink-strong);
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-style: var(--display-style, normal);
    font-weight: 600;
    font-size: clamp(22px, 4.5vw, 30px);
    transition: border-color .45s cubic-bezier(.32, .72, 0, 1);
}
.ob-names input:focus { outline: none; border-color: var(--forest); }
.ob-names input::placeholder { color: var(--cream-soft); opacity: .55; font-weight: 400; }
.ob-amp {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-style: var(--display-style, normal);
    font-weight: 600;
    font-size: clamp(22px, 4.5vw, 30px);
    color: var(--forest);
}
.ob-orbs { gap: 14px 26px; margin-bottom: 6px; }
.ob-orbs .wall-dot { width: 40px; height: 40px; }
.ob-orbs .wall-dot::after { inset: 11px; }
.ob-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
}
.ob-skip {
    padding: 6px 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--cream-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .45s cubic-bezier(.32, .72, 0, 1);
}
.ob-skip:hover { color: var(--ink-strong); }
.ob .btn-forest { display: inline-flex; align-items: center; gap: 14px; padding: 9px 9px 9px 24px; }

@media (prefers-reduced-motion: no-preference) {
    .ob-shell { animation: atelier-rise .8s cubic-bezier(.32, .72, 0, 1) both; }
    /* Chaque temps : révélation en cascade (display none → bloc relance l'animation) */
    .ob-beat > * { animation: atelier-rise .7s cubic-bezier(.32, .72, 0, 1) both; }
    .ob-beat > *:nth-child(2) { animation-delay: .07s; }
    .ob-beat > *:nth-child(3) { animation-delay: .14s; }
    .ob-beat > *:nth-child(4) { animation-delay: .21s; }
}

@media (max-width: 900px) {
    .ob { padding: 14px; align-items: flex-end; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    .ob-card { padding: 26px 22px 22px; }
    .ob-names { flex-wrap: wrap; }
    .ob-footer { flex-wrap: wrap-reverse; justify-content: center; row-gap: 10px; }
    .ob-footer .btn-forest { width: 100%; justify-content: space-between; }
}

/* ==================================================================
   Œuf de Pâques — code Konami : « Toutes les cases cochées ».
   Le mouvement vit en JS (Web Animations API, transform/opacity only) ;
   la CSS ne porte que l'aspect statique + les bribes sûres en mouvement
   réduit. Tout suit la palette active via les tokens (--accent, --paper…).
   ================================================================== */

.konami-overlay {
    position: fixed;
    inset: 0;
    z-index: 70; /* juste au-dessus du grain (60), sous rien d'interactif */
    pointer-events: none;
    overflow: hidden;
}
.konami-overlay .piece {
    position: absolute;
    bottom: -60px;
    line-height: 0;
    will-change: transform, opacity;
}
.konami-overlay .confetti {
    border-radius: 2px;
}

/* La coche tracée dans chaque case de l'affiche (nœud SVG transitoire). */
.konami-check {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1; /* masquée : dévoilée quand .drawn passe l'offset à 0 */
}
.konami-check.drawn {
    stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .konami-check {
        transition: stroke-dashoffset .34s cubic-bezier(.32, .72, 0, 1);
    }
}

/* Bandeau central en double-cadre (plaque + cœur), suit la palette. */
.konami-banner {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 71;
    pointer-events: none;
    padding: 6px;
    border-radius: 2rem;
    background: color-mix(in oklab, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        0 0 0 1px var(--hairline-soft, rgba(0, 0, 0, .06)),
        0 30px 80px -30px color-mix(in oklab, var(--scene-glow, var(--accent)) 60%, transparent),
        0 0 44px -8px color-mix(in oklab, var(--accent) 55%, transparent);
}
.konami-banner-core {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: calc(2rem - 6px);
    background: color-mix(in oklab, var(--paper) 92%, var(--accent) 8%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-size: clamp(20px, 3.4vw, 30px);
    letter-spacing: -.01em;
    white-space: nowrap;
}
.konami-banner-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--paper);
    font-size: 19px;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .konami-banner {
        animation: konami-pop .7s cubic-bezier(.32, .72, 0, 1) both;
    }
    @keyframes konami-pop {
        from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
}

/* ==================================================================
   Les 7 thèmes : chaque palette de l'affiche rethème le site entier.
   body sans surcharge = Jardin (le look atelier historique).
   Les thèmes sombres (Minuit, Grenat) inversent l'élévation : les
   plateaux s'éclaircissent au lieu de s'assombrir, les reflets se
   font discrets, les photos prennent un voile de nuit.
   ================================================================== */

/* --- Jardin : nature, le défaut (aucune surcharge nécessaire) --- */
body[data-palette="jardin"] {}

/* --- Encre : éditorial sobre, crème et terracotta --- */
body[data-palette="encre"] {
    --paper: #F8F5EE;
    --ink-strong: #26221C;
    --ink-mid: #6F675B;
    --accent: #B85C48;
    --accent-deep: #9C4936;
    --on-accent: #FBF3EC;
    --heading: var(--ink-strong);
    --plaque-alt: #F2EEE4;
    --wall: #F1ECE1;
    --shadow-ink: #26221C;
    --glass: #FCFAF4;
}

/* --- Brume : sobre et calme, gris bleutés --- */
body[data-palette="brume"] {
    --paper: #EFF1F3;
    --ink-strong: #2F3A46;
    --ink-mid: #6E7A87;
    --accent: #5D7794;
    --accent-deep: #4A6380;
    --on-accent: #F4F7FA;
    --heading: var(--ink-strong);
    --plaque: #FBFCFD;
    --plaque-alt: #E9EDF0;
    --frame: #232B33;
    --wall: #EDF0F2;
    --input-bg: #F6F8FA;
    --shadow-ink: #2F3A46;
    --glass: #F7F9FA;
    --scene-glow: #FBFDFF;
}

/* --- Poudre : romantique doux, rose poudré et prune --- */
body[data-palette="poudre"] {
    --paper: #F8EEE9;
    --ink-strong: #573139;
    --ink-mid: #A18086;
    --accent: #BE6A5A;
    --accent-deep: #A85648;
    --on-accent: #FBF1EC;
    --plaque: #FDF6F2;
    --plaque-alt: #F3E5DF;
    --frame: #4A2A31;
    --wall: #F4EBE5;
    --input-bg: #FBF2ED;
    --shadow-ink: #573139;
    --glass: #FCF4EF;
    --scene-glow: #FFF9F4;
    --display-style: italic;
}

/* --- Grenat : romantique intense, bordeaux à la lueur d'une lampe --- */
body[data-palette="grenat"] {
    --paper: #3A1B25;
    --ink-strong: #F5E9E2;
    --ink-mid: #C09AA6;
    --accent: #E2A184;
    --accent-deep: #EDB79D; /* sur fond sombre, le survol éclaircit */
    --on-accent: #3A1420;
    --heading: #F0C9B4;
    --plaque: #46232F;
    --plaque-alt: #40202B;
    --frame: #22101A;
    --wall: #4A2532;
    --input-bg: #331722;
    --input-focus-bg: #2C121C;
    --shadow-ink: #14060C;
    --glass: #33161F;
    --scene-glow: #E2A184;
    --glow-strength: 14%;
    --photo-veil: color-mix(in srgb, #1E0912 30%, transparent);
    --grain-opacity: .06;
    --display-style: italic;

    /* élévation inversée : plateaux et filets s'éclaircissent */
    --tray-bg: color-mix(in srgb, var(--highlight) 4%, transparent);
    --hairline: color-mix(in srgb, var(--highlight) 8%, transparent);
    --hairline-mid: color-mix(in srgb, var(--highlight) 13%, transparent);
    --hairline-strong: color-mix(in srgb, var(--highlight) 22%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 7%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 6%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 60%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 75%, transparent);
}

/* --- Minuit : élégance de nuit, bleu profond et or --- */
body[data-palette="minuit"] {
    --paper: #111D33;
    --ink-strong: #F2EDE0;
    --ink-mid: #9BA7BE;
    --accent: #D9A44E;
    --accent-deep: #E3B466; /* sur fond sombre, le survol éclaircit */
    --on-accent: #241A08;
    --plaque: #1B2A47;
    --plaque-alt: #172540;
    --frame: #0B1220;
    --wall: #1C2A47;
    --input-bg: #16233D;
    --input-focus-bg: #121E36;
    --shadow-ink: #04070F;
    --glass: #14203A;
    --scene-glow: #D9A44E;
    --glow-strength: 12%;
    --photo-veil: color-mix(in srgb, #0A1122 30%, transparent);
    --grain-opacity: .06;
    --font-display: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
    --display-tracking: .01em;

    --tray-bg: color-mix(in srgb, var(--highlight) 4%, transparent);
    --hairline: color-mix(in srgb, var(--highlight) 8%, transparent);
    --hairline-mid: color-mix(in srgb, var(--highlight) 13%, transparent);
    --hairline-strong: color-mix(in srgb, var(--highlight) 22%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 7%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 6%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 60%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 75%, transparent);
}

/* --- Pop : l'esprit BD, jaune solaire, traits francs, ombres dures --- */
body[data-palette="pop"] {
    --paper: #FFF8E7;
    --ink-strong: #14141A;
    --ink-mid: #4A4A55;
    --accent: #2D49E0;
    --accent-deep: #1F35B8;
    --on-accent: #FFFFFF;
    --heading: var(--ink-strong);
    --plaque: #FFFFFF;
    --plaque-alt: #FFEFC2;
    --frame: #14141A;
    --wall: #F5E3A9;
    --input-bg: #FFFDF4;
    --shadow-ink: #14141A;
    --glass: #FFFBEE;
    --scene-glow: #FFFFFF;
    --glow-strength: 45%;
    --grain-opacity: .035; /* papier de kiosque, pas pellicule */
    --font-display: 'Archivo Black', 'Fraunces', sans-serif;
    --display-weight: 400; /* Archivo Black : graisse unique */
    --display-tracking: -.02em;

    /* contours quasi pleins + ombres franches, façon encrage */
    --tray-bg: color-mix(in srgb, var(--shadow-ink) 8%, transparent);
    --hairline: color-mix(in srgb, var(--shadow-ink) 55%, transparent);
    --hairline-mid: color-mix(in srgb, var(--shadow-ink) 80%, transparent);
    --bezel-highlight: transparent; /* aplat imprimé, sans reflet */
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 55%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 70%, transparent);
}
body[data-palette="pop"] ::selection { background: #FFD337; color: var(--ink-strong); }

/* --- Néon : la nuit électrique, violet-noir et magenta, affiche de concert --- */
body[data-palette="neon"] {
    --paper: #100C17;
    --ink-strong: #F4EFF7;
    --ink-mid: #9D93B0;
    --accent: #E8447F;
    --accent-deep: #F5679B; /* sur fond sombre, le survol éclaircit */
    --on-accent: #1D0812;
    --heading: var(--accent); /* les titres claquent en magenta */
    --plaque: #1A1424;
    --plaque-alt: #221A30;
    --frame: #060409;
    --wall: #1C1526;
    --input-bg: #171020;
    --input-focus-bg: #130D1C;
    --shadow-ink: #000000;
    --glass: #171021;
    --scene-glow: #E8447F;
    --glow-strength: 16%;
    --photo-veil: color-mix(in srgb, #0A0510 35%, transparent);
    --grain-opacity: .07;
    --font-display: 'Anton', 'Archivo Black', sans-serif;
    --display-weight: 400; /* Anton : graisse unique, déjà massive */
    --display-tracking: .015em;

    /* élévation nocturne, filets un cran plus francs que Minuit */
    --tray-bg: color-mix(in srgb, var(--highlight) 5%, transparent);
    --hairline: color-mix(in srgb, var(--highlight) 10%, transparent);
    --hairline-mid: color-mix(in srgb, var(--highlight) 16%, transparent);
    --hairline-strong: color-mix(in srgb, var(--highlight) 26%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 8%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 7%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 50%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 65%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 80%, transparent);
}
/* Le halo magenta déborde légèrement des CTA : néon, pas LED de bureau */
body[data-palette="neon"] .btn-forest,
body[data-palette="neon"] .grabber-pill {
    box-shadow: 0 0 24px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ==================================================================
   Série riviera : fonds vifs façon Matisse — le site EST l'affiche.
   Le fond de page reprend l'aplat saturé du poster (pas de version
   pastel), la display passe en Fredoka capitales espacées (lettrage
   découpé des affiches de plage) et les plaques restent des aplats
   ton sur ton, comme des papiers posés l'un sur l'autre.
   ================================================================== */
body[data-palette="miami"],
body[data-palette="ibiza"],
body[data-palette="mykonos"],
body[data-palette="bondi"],
body[data-palette="capri"],
body[data-palette="palm"] {
    --font-display: 'Fredoka', 'Outfit', sans-serif;
    --display-weight: 600;
    --display-style: normal;
    --display-tracking: .06em;
    --display-transform: uppercase;
    --grain-opacity: .035; /* papier affiche, pas pellicule */
}

/* La marque se lit comme un titre d'affiche : couleur des titres, pas l'encre */
body[data-palette="miami"] .wordmark,
body[data-palette="ibiza"] .wordmark,
body[data-palette="mykonos"] .wordmark,
body[data-palette="bondi"] .wordmark,
body[data-palette="capri"] .wordmark,
body[data-palette="palm"] .wordmark { color: var(--heading); }

/* --- Miami : jaune solaire plein, titres rose vif --- */
body[data-palette="miami"] {
    --paper: #FFD21E;
    --ink-strong: #2A1E08;
    --ink-mid: #75590A;
    --accent: #E5187A;
    --accent-deep: #C70F67;
    --on-accent: #FFF0F6;
    --heading: #E5187A;
    --plaque: #FFE36A;
    --plaque-alt: #FFDC49;
    --frame: #2A1E08;
    --wall: #FFD21E; /* l'atelier baigne dans l'aplat, comme l'affiche */
    --input-bg: #FFF3C2;
    --input-focus-bg: #FFF9E0;
    --shadow-ink: #7A5A00;
    --glass: #FFE36A;
    --scene-glow: #FFEB8A;
    --glow-strength: 28%;
    --bezel-highlight: color-mix(in srgb, var(--highlight) 30%, transparent); /* aplat, presque sans reflet */
}

/* --- Ibiza : fuchsia plein, titres jaune, encre presque noire --- */
body[data-palette="ibiza"] {
    --paper: #E5187A;
    --ink-strong: #33051C;
    --ink-mid: #48091F;
    --accent: #FFD21E;
    --accent-deep: #F0BE00;
    --on-accent: #33051C;
    --heading: #FFD21E;
    --plaque: #EA3489;
    --plaque-alt: #DE1170;
    --frame: #33051C;
    --wall: #E5187A;
    --input-bg: #F9D3E4;
    --input-focus-bg: #FCE7F1;
    --shadow-ink: #4A0426;
    --glass: #EA3489;
    --scene-glow: #FF7FB8;
    --glow-strength: 20%;
    --photo-veil: color-mix(in srgb, #4A0426 18%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 18%, transparent);
    --hairline: color-mix(in srgb, var(--shadow-ink) 16%, transparent);
    --hairline-mid: color-mix(in srgb, var(--shadow-ink) 24%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 30%, transparent);
}

/* --- Mykonos : nuit égéenne, bleu marine et turquoise (élévation inversée) --- */
body[data-palette="mykonos"] {
    --paper: #16324F;
    --ink-strong: #EAF6F6;
    --ink-mid: #8FB6C4;
    --accent: #3FC7C7;
    --accent-deep: #55D8D8; /* sur fond sombre, le survol éclaircit */
    --on-accent: #08222E;
    --heading: #7FD8D8;
    --plaque: #1B3A55;
    --plaque-alt: #17324A;
    --frame: #0B1B2B;
    --wall: #1C3A57;
    --input-bg: #16304A;
    --input-focus-bg: #122942;
    --shadow-ink: #04070F;
    --glass: #163350;
    --scene-glow: #3FC7C7;
    --glow-strength: 12%;
    --photo-veil: color-mix(in srgb, #08161F 30%, transparent);
    --grain-opacity: .06;

    --tray-bg: color-mix(in srgb, var(--highlight) 4%, transparent);
    --hairline: color-mix(in srgb, var(--highlight) 8%, transparent);
    --hairline-mid: color-mix(in srgb, var(--highlight) 13%, transparent);
    --hairline-strong: color-mix(in srgb, var(--highlight) 22%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 7%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 6%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 60%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 75%, transparent);
}

/* --- Bondi : émeraude plein, titres rose vif (élévation inversée) --- */
body[data-palette="bondi"] {
    --paper: #0E8A6E;
    --ink-strong: #EFFBF6;
    --ink-mid: #9BD8C5;
    --accent: #FF3D8B;
    --accent-deep: #FF5C9E; /* sur fond sombre, le survol éclaircit */
    --on-accent: #380A1E;
    --heading: #FF7FB0; /* le rose clair du corail, lisible sur émeraude */
    --plaque: #14977B;
    --plaque-alt: #0F8065;
    --frame: #052E24;
    --wall: #0E8A6E;
    --input-bg: #0C7A61;
    --input-focus-bg: #0A6B55;
    --shadow-ink: #032B22;
    --glass: #12967B;
    --scene-glow: #FF7FB0;
    --glow-strength: 12%;
    --photo-veil: color-mix(in srgb, #04352A 25%, transparent);
    --grain-opacity: .05;

    --tray-bg: color-mix(in srgb, var(--highlight) 5%, transparent);
    --hairline: color-mix(in srgb, var(--highlight) 10%, transparent);
    --hairline-mid: color-mix(in srgb, var(--highlight) 16%, transparent);
    --hairline-strong: color-mix(in srgb, var(--highlight) 26%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 8%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 7%, transparent);
    --shadow-soft: color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --shadow-mid: color-mix(in srgb, var(--shadow-ink) 60%, transparent);
    --shadow-deep: color-mix(in srgb, var(--shadow-ink) 75%, transparent);
}

/* --- Capri : orange plein, titres bleu ciel, boutons jaune dolce vita --- */
body[data-palette="capri"] {
    --paper: #F5641E;
    --ink-strong: #381302;
    --ink-mid: #601F04;
    --accent: #FFD21E;
    --accent-deep: #F0BE00;
    --on-accent: #381302;
    --heading: #7EC8E3;
    --plaque: #F87833;
    --plaque-alt: #EA5510;
    --frame: #381302;
    --wall: #F5641E;
    --input-bg: #FCDEC8;
    --input-focus-bg: #FEEEE0;
    --shadow-ink: #5C1E00;
    --glass: #F87833;
    --scene-glow: #FFA45C;
    --glow-strength: 24%;
    --photo-veil: color-mix(in srgb, #5C1E00 12%, transparent);
    --bezel-highlight: color-mix(in srgb, var(--highlight) 18%, transparent);
    --hairline: color-mix(in srgb, var(--shadow-ink) 15%, transparent);
    --hairline-mid: color-mix(in srgb, var(--shadow-ink) 23%, transparent);
    --scrim: color-mix(in srgb, var(--highlight) 28%, transparent);
}

/* --- Palm : rose pâle, titres vert palmier, boutons rouge --- */
body[data-palette="palm"] {
    --paper: #F7C9D0;
    --ink-strong: #123D2A;
    --ink-mid: #5E7A6A;
    --accent: #E5231B;
    --accent-deep: #C4170F;
    --on-accent: #FFF5F3;
    --heading: #1F7A4D;
    --plaque: #FADCE1;
    --plaque-alt: #F3B9C3;
    --frame: #123D2A;
    --wall: #F7C9D0;
    --input-bg: #FDF0F2;
    --input-focus-bg: #FFFAFB;
    --shadow-ink: #59202E;
    --glass: #FADCE1;
    --scene-glow: #FFF3F5;
    --glow-strength: 40%;
    --bezel-highlight: color-mix(in srgb, var(--highlight) 35%, transparent);
}

/* ==================================================================
   Chorégraphie du changement de thème.
   Voie principale : View Transition (fondu GPU de la page entière,
   déclenché par le JS). Repli : classe .theme-switching posée 500 ms,
   transition douce des couleurs (jamais les box-shadow : trop coûteux).
   ================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
    body.theme-switching,
    body.theme-switching *,
    body.theme-switching *::before,
    body.theme-switching *::after {
        transition:
            background-color .45s cubic-bezier(.32, .72, 0, 1),
            color .45s cubic-bezier(.32, .72, 0, 1),
            border-color .45s cubic-bezier(.32, .72, 0, 1) !important;
    }
    body.theme-switching svg [data-fill],
    body.theme-switching svg [data-stroke] { transition: none !important; }
}

/* ===== Paiement : le formulaire Stripe embarqué, dans notre atelier ===== */
.pay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--wall) 46%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
.pay-sheet {
    position: relative;
    width: min(680px, 100%);
    margin: auto;
    background: var(--tray-bg);
    border: 1px solid var(--hairline);
    border-radius: 2rem;
    padding: .55rem;
    box-shadow: 0 40px 90px -40px var(--shadow-deep);
}
.pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
}
.pay-title {
    margin: 0;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--cream-soft);
}
.pay-close {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    color: var(--cream-soft);
}
.pay-close:hover { color: var(--cream); }
/* Stripe monte son iframe ici ; fond clair imposé par le formulaire. */
#checkout {
    background: #fff;
    border-radius: calc(2rem - .55rem);
    padding: 8px;
    min-height: 320px;
}