/* ===========================================================
   EDITOR = invitation HTML fourni (visuel + ouverture exacte)
   + panneau de personnalisation temps réel
   =========================================================== */

/* Fonts chargées via templates/editor (évite un @import bloquant sur les pages publiques). */

:root {
    --kraft: #FFFFFF;
    --kraft-dark: #F3ECDD;
    --kraft-shadow: #E3D6B8;
    /* Thèmes invitation (contenu aperçu classique) — ne pas confondre avec le chrome éditeur */
    --cire: #6E2430;
    --cire-light: #8C3040;
    --or: #C9A24B;
    --or-light: #E7D3A1;
    --ivoire: #FBF6EC;
    --ivoire-deep: #F2E9D8;
    --encre: #2A1A14;
    --vert: #3B4A3B;
    --band-bg: #6E2430;
    --band-fg: #FBF6EC;
    --band-muted: rgba(251, 246, 236, 0.78);
    --band-card: rgba(255, 255, 255, 0.12);
    --band-card-border: rgba(255, 255, 255, 0.28);
    --band-accent: #E7D3A1;
    --panel-w: 370px;
    --f-display: 'Cormorant Garamond', Georgia, serif;
    --f-body: 'EB Garamond', Georgia, serif;
    --f-script: 'Great Vibes', cursive;
}

/*
 * Chrome éditeur = charte vitrine invite-les (--fp-*).
 * Ne s’applique PAS au contenu .invite / iframe mini-site.
 */
.editor,
.page-editor {
    --editor-ink: var(--fp-ink, #3a2a21);
    --editor-muted: var(--fp-muted, #5f4a3c);
    --editor-accent: var(--fp-brown, #5c4033);
    --editor-accent-hover: var(--fp-brown-deep, #2f2119);
    --editor-accent-soft: var(--fp-brown-soft, #8b6b55);
    --editor-gold: var(--fp-gold, #c4a36a);
    --editor-gold-soft: var(--fp-gold-soft, #e0c896);
    --editor-gold-deep: var(--fp-gold-deep, #9a7540);
    --editor-beige: var(--fp-beige, #f3ebe0);
    --editor-beige-deep: var(--fp-beige-deep, #ebe0d2);
    --editor-paper: var(--fp-white, #fffdf9);
    --editor-line: var(--fp-line, rgba(58, 42, 33, 0.12));
    --editor-shadow: var(--fp-shadow, 0 14px 30px rgba(47, 33, 25, 0.08));
    --editor-radius: var(--fp-radius-sm, 10px);
    --panel-bg: var(--fp-white, #fffdf9);
    --panel-border: var(--fp-beige-deep, #ebe0d2);
}

.editor[data-theme="ivoire"] {
    --cire: #6E2430; --cire-light: #8C3040; --or: #C9A24B; --or-light: #E7D3A1;
    --ivoire: #FBF6EC; --encre: #2A1A14; --vert: #3B4A3B;
    --band-bg: #6E2430; --band-fg: #FBF6EC; --band-muted: rgba(251,246,236,.78);
    --band-card: rgba(255,255,255,.12); --band-card-border: rgba(255,255,255,.28); --band-accent: #E7D3A1;
}
.editor[data-theme="blush"] {
    --cire: #9a4f5d; --cire-light: #b36673; --or: #c9a68f; --or-light: #e0c4b0;
    --ivoire: #fcf8f6; --encre: #2a1d22; --vert: #6d5a61;
    --band-bg: #9a4f5d; --band-fg: #fff8f7; --band-muted: rgba(255,248,247,.8);
    --band-card: rgba(255,255,255,.14); --band-card-border: rgba(255,255,255,.3); --band-accent: #f0d4c8;
}
.editor[data-theme="bordeaux"] {
    --cire: #7a1f2b; --cire-light: #9a2f3d; --or: #c4a35a; --or-light: #dfc98a;
    --ivoire: #faf6f2; --encre: #241016; --vert: #5a3a3f;
    --band-bg: #7a1f2b; --band-fg: #fff5f2; --band-muted: rgba(255,245,242,.8);
    --band-card: rgba(255,255,255,.12); --band-card-border: rgba(255,255,255,.28); --band-accent: #dfc98a;
}
.editor[data-theme="corail"] {
    --cire: #c45c4a; --cire-light: #d97866; --or: #e0b07a; --or-light: #f0d2a8;
    --ivoire: #fff8f4; --encre: #2c1814; --vert: #7a5548;
    --band-bg: #c45c4a; --band-fg: #fff8f4; --band-muted: rgba(255,248,244,.82);
    --band-card: rgba(255,255,255,.16); --band-card-border: rgba(255,255,255,.3); --band-accent: #ffe0c8;
}
.editor[data-theme="sauge"] {
    --cire: #46614f; --cire-light: #5a7a64; --or: #b6a97f; --or-light: #d0c5a3;
    --ivoire: #f2f3ee; --encre: #1b2620; --vert: #46614f;
    --band-bg: #46614f; --band-fg: #f4f7f2; --band-muted: rgba(244,247,242,.8);
    --band-card: rgba(255,255,255,.12); --band-card-border: rgba(255,255,255,.28); --band-accent: #d0c5a3;
}
.editor[data-theme="emeraude"] {
    --cire: #1f6b55; --cire-light: #2d8a6e; --or: #c2a35a; --or-light: #dfc98a;
    --ivoire: #f3f8f5; --encre: #13241e; --vert: #1f6b55;
    --band-bg: #1f6b55; --band-fg: #f3f8f5; --band-muted: rgba(243,248,245,.8);
    --band-card: rgba(255,255,255,.12); --band-card-border: rgba(255,255,255,.28); --band-accent: #dfc98a;
}
.editor[data-theme="ocean"] {
    --cire: #1e4d6b; --cire-light: #2d6a8f; --or: #c2a469; --or-light: #d8c49a;
    --ivoire: #f4f7fa; --encre: #12202a; --vert: #3a5a6e;
    --band-bg: #1e4d6b; --band-fg: #f4f8fc; --band-muted: rgba(244,248,252,.8);
    --band-card: rgba(255,255,255,.12); --band-card-border: rgba(255,255,255,.28); --band-accent: #b8d4e8;
}
.editor[data-theme="azur"] {
    --cire: #3a7ca5; --cire-light: #4f93bc; --or: #c9b27a; --or-light: #e0d0a4;
    --ivoire: #f5f9fc; --encre: #1a2a36; --vert: #4a6e82;
    --band-bg: #3a7ca5; --band-fg: #f5f9fc; --band-muted: rgba(245,249,252,.85);
    --band-card: rgba(255,255,255,.16); --band-card-border: rgba(255,255,255,.32); --band-accent: #d6ebf7;
}
.editor[data-theme="lavande"] {
    --cire: #6b5b8a; --cire-light: #8574a6; --or: #c4b07a; --or-light: #ddd0a8;
    --ivoire: #f8f6fb; --encre: #221c2e; --vert: #5c536e;
    --band-bg: #6b5b8a; --band-fg: #f8f6fb; --band-muted: rgba(248,246,251,.82);
    --band-card: rgba(255,255,255,.14); --band-card-border: rgba(255,255,255,.3); --band-accent: #ddd0a8;
}
.editor[data-theme="champagne"] {
    --cire: #8a7348; --cire-light: #a38c5e; --or: #c9a24b; --or-light: #e7d3a1;
    --ivoire: #fbf7ef; --encre: #2a2214; --vert: #6b5c3f;
    --band-bg: #8a7348; --band-fg: #fbf7ef; --band-muted: rgba(251,247,239,.82);
    --band-card: rgba(255,255,255,.14); --band-card-border: rgba(255,255,255,.3); --band-accent: #e7d3a1;
}
.editor[data-theme="terracotta"] {
    --cire: #b45a3c; --cire-light: #c97352; --or: #d4a574; --or-light: #e8c9a4;
    --ivoire: #fbf6f1; --encre: #2c1a12; --vert: #7a5340;
    --band-bg: #b45a3c; --band-fg: #fff8f3; --band-muted: rgba(255,248,243,.82);
    --band-card: rgba(255,255,255,.14); --band-card-border: rgba(255,255,255,.3); --band-accent: #e8c9a4;
}
.editor[data-theme="nocturne"] {
    --cire: #8c2f39; --cire-light: #a9444f; --or: #c2a469; --or-light: #d8c49a;
    --ivoire: #f6f4ef; --encre: #151a24; --vert: #5c6373;
    --band-bg: #1a2030; --band-fg: #f0ebe3; --band-muted: rgba(240,235,227,.78);
    --band-card: rgba(255,255,255,.08); --band-card-border: rgba(255,255,255,.22); --band-accent: #d8c49a;
}
.editor[data-theme="anthracite"] {
    --cire: #3a3f47; --cire-light: #525862; --or: #a8a29a; --or-light: #c9c3ba;
    --ivoire: #f5f5f4; --encre: #1a1c1f; --vert: #5a5f66;
    --band-bg: #2f343c; --band-fg: #f5f5f4; --band-muted: rgba(245,245,244,.8);
    --band-card: rgba(255,255,255,.1); --band-card-border: rgba(255,255,255,.24); --band-accent: #c9c3ba;
}
.editor[data-theme="graphite"] {
    --cire: #4a4a4a; --cire-light: #666666; --or: #9a9a9a; --or-light: #c0c0c0;
    --ivoire: #f7f7f7; --encre: #1e1e1e; --vert: #5c5c5c;
    --band-bg: #3d3d3d; --band-fg: #f7f7f7; --band-muted: rgba(247,247,247,.78);
    --band-card: rgba(255,255,255,.1); --band-card-border: rgba(255,255,255,.22); --band-accent: #c0c0c0;
}

.editor[data-type="romantique"] {
    --f-display: 'Cormorant Garamond', Georgia, serif;
    --f-body: 'EB Garamond', Georgia, serif;
}
.editor[data-type="classique"] {
    --f-display: 'Cinzel', serif;
    --f-body: 'EB Garamond', Georgia, serif;
}
.editor[data-type="moderne"] {
    --f-display: 'Archivo', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, sans-serif;
}
.editor[data-type="editorial"] {
    --f-display: 'Instrument Serif', Georgia, serif;
    --f-body: 'Inter', system-ui, sans-serif;
}

/* ---------- SHELL (chrome éditeur — hors aperçu invitation) ---------- */
.page-editor .site-main { padding: 0; margin: 0; height: 100vh; height: 100dvh; overflow: hidden; }
@media (max-width: 900px) {
    .page-editor .site-main {
        overflow: visible;
    }
}

/* Ascenseurs = brun charte invite-les (faire-part + site d’invitation) */
.page-editor,
.page-editor *,
.editor,
.guest-preview,
.editor__panel-body,
.preview-device__screen,
.guest-preview__card-mount,
.editor__font-select__list {
    scrollbar-width: thin;
    scrollbar-color: #5c4033 #ebe0d2;
}

.page-editor::-webkit-scrollbar,
.editor::-webkit-scrollbar,
.guest-preview::-webkit-scrollbar,
.editor__panel-body::-webkit-scrollbar,
.preview-device__screen::-webkit-scrollbar,
.guest-preview__card-mount::-webkit-scrollbar,
.editor__font-select__list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.page-editor::-webkit-scrollbar-track,
.editor::-webkit-scrollbar-track,
.guest-preview::-webkit-scrollbar-track,
.editor__panel-body::-webkit-scrollbar-track,
.preview-device__screen::-webkit-scrollbar-track,
.guest-preview__card-mount::-webkit-scrollbar-track,
.editor__font-select__list::-webkit-scrollbar-track {
    background: #ebe0d2;
}

.page-editor::-webkit-scrollbar-thumb,
.editor::-webkit-scrollbar-thumb,
.guest-preview::-webkit-scrollbar-thumb,
.editor__panel-body::-webkit-scrollbar-thumb,
.preview-device__screen::-webkit-scrollbar-thumb,
.guest-preview__card-mount::-webkit-scrollbar-thumb,
.editor__font-select__list::-webkit-scrollbar-thumb {
    background: #5c4033;
    border-radius: 999px;
    border: 2px solid #ebe0d2;
}

.page-editor::-webkit-scrollbar-thumb:hover,
.editor::-webkit-scrollbar-thumb:hover,
.guest-preview::-webkit-scrollbar-thumb:hover,
.editor__panel-body::-webkit-scrollbar-thumb:hover,
.preview-device__screen::-webkit-scrollbar-thumb:hover,
.guest-preview__card-mount::-webkit-scrollbar-thumb:hover,
.editor__font-select__list::-webkit-scrollbar-thumb:hover {
    background: #2f2119;
}

.editor {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: var(--editor-beige, #f3ebe0);
    color: var(--editor-ink, #3a2a21);
}

.editor-draft-banner {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.7rem 1rem;
    background: #fff8ef;
    border-bottom: 1px solid rgba(92, 64, 51, 0.14);
    color: #5c4033;
    z-index: 5;
}

.editor-draft-banner[hidden] {
    display: none !important;
}

.editor-draft-banner__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
}

.editor__stage {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--editor-beige, #f3ebe0);
}

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--editor-line, rgba(58, 42, 33, 0.12));
    background: var(--editor-paper, #fffdf9);
    min-width: 0;
}

.preview-toolbar__label {
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--editor-muted, #5f4a3c);
    min-width: 0;
}

.preview-toolbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
}

.preview-toolbar .editor__chips {
    margin-bottom: 0;
}

.editor__btn--preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: normal;
    max-width: 100%;
}

.editor__btn-preview-icon {
    display: inline-flex;
    line-height: 0;
}

.guest-preview {
    position: fixed;
    inset: 0;
    width: 100vw;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: #1c1612;
}

.guest-preview[hidden] {
    display: none !important;
}

.guest-preview__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 12px 16px;
    background: #2a211c;
    border-bottom: 1px solid rgba(255, 253, 251, 0.12);
    color: #f7f1ea;
    position: relative;
    z-index: 1000;
}

.guest-preview__title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
}

.guest-preview__note {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.78rem;
    color: rgba(247, 241, 234, 0.72);
}

.guest-preview__bar .editor__btn {
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

.guest-preview__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

.guest-preview__card-shell {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    background: #f3ebe0;
}

.guest-preview__card-mount {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Aperçu faire-part plein écran : indépendant du chrome éditeur */
.guest-preview__card-mount .editor--guest-preview {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 100%;
    overflow: visible;
    background: #f3ebe0;
}

.guest-preview__card-mount .editor--guest-preview .editor__stage {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    height: auto;
    overflow: visible;
}

.guest-preview__card-mount .editor--guest-preview .preview-shell,
.guest-preview__card-mount .editor--guest-preview .preview-shell--public {
    display: block;
    flex: none;
    width: 100%;
    max-width: 1180px;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 2.75rem;
    overflow: visible;
    background: transparent;
}

.guest-preview__card-mount .editor--guest-preview .preview-device,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="desktop"] .preview-device,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="mobile"] .preview-device {
    width: min(980px, 100%);
    max-width: 980px;
    height: auto;
    min-height: 70vh;
    margin: 0 auto;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(47, 33, 25, 0.12);
    overflow: visible;
    background: #fff;
    /* Laisse l’enveloppe en fixed plein écran (comme le lien public),
       au lieu de la cantonner dans un cadre éditeur trop étroit. */
    transform: none;
}

.guest-preview__card-mount .editor--guest-preview .preview-device__screen {
    flex: none;
    height: auto;
    min-height: 70vh;
    overflow: visible;
}

.guest-preview__card-mount .editor--guest-preview .invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.guest-preview__card-mount .editor--guest-preview .invite .stage {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    align-self: center;
    padding-left: 16px;
    padding-right: 16px;
    background: transparent;
}

.guest-preview__card-mount .editor--guest-preview .invite .scene-wrapper,
.guest-preview__card-mount .editor--guest-preview .invite .revealed-letter,
.guest-preview__card-mount .editor--guest-preview .invite .itinerary-section,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="desktop"] .invite .scene-wrapper,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="desktop"] .invite .itinerary-section,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="mobile"] .invite .scene-wrapper,
.guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="mobile"] .invite .itinerary-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.guest-preview__card-mount .editor--guest-preview .invite .revealed-letter {
    padding: 34px 36px 26px;
}

.guest-preview__card-mount .editor--guest-preview .invite .itinerary-section {
    margin-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
}

.guest-preview__card-mount .editor--guest-preview .invite .photo-frame {
    width: 168px;
    height: 168px;
}

@media (max-width: 720px) {
    .guest-preview__card-mount .editor--guest-preview .preview-shell,
    .guest-preview__card-mount .editor--guest-preview .preview-shell--public {
        max-width: 100%;
        padding: 1rem 0.75rem 2rem;
    }

    .guest-preview__card-mount .editor--guest-preview .preview-device,
    .guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="desktop"] .preview-device,
    .guest-preview__card-mount .editor--guest-preview .editor__stage[data-view="mobile"] .preview-device {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .guest-preview__card-mount .editor--guest-preview .invite .stage,
    .guest-preview__card-mount .editor--guest-preview .invite .itinerary-section,
    .guest-preview__card-mount .editor--guest-preview .invite .scene-wrapper,
    .guest-preview__card-mount .editor--guest-preview .invite .revealed-letter {
        max-width: 100%;
    }

    .guest-preview__card-mount .editor--guest-preview .invite .revealed-letter {
        padding: 32px 20px 28px;
    }
}

body.is-guest-preview-open {
    overflow: hidden;
}

.preview-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f1e8 0%, var(--editor-beige, #f3ebe0) 55%, var(--editor-beige-deep, #ebe0d2) 100%);
}

.preview-device {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width .3s ease, max-width .3s ease, height .3s ease, border-radius .3s ease;
}

.preview-device__notch {
    display: none;
}

.preview-device__screen {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    scroll-behavior: smooth;
}

.preview-device__screen--iframe {
    overflow: hidden;
}

.preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #ffffff;
}

/* Mode Ordinateur (par défaut) : aperçu normal large */
.editor__stage[data-view="desktop"] .preview-device {
    width: min(1040px, 100%);
    max-width: 1040px;
    height: 100%;
    border: 1px solid var(--panel-border, #ebe0d2);
    border-radius: var(--fp-radius, 16px);
    box-shadow: var(--editor-shadow, 0 14px 30px rgba(47, 33, 25, 0.08));
    background: #fff;
}

.editor__stage[data-view="desktop"] .preview-device__notch {
    display: none;
}

.editor__stage[data-view="desktop"] .invite .scene-wrapper {
    max-width: 580px;
}

.editor__stage[data-view="desktop"] .invite .itinerary-section {
    max-width: 100%;
}

.editor__stage[data-view="desktop"] .invite .photo-frame {
    width: 168px;
    height: 168px;
}

.editor__stage[data-view="desktop"] .invite .revealed-letter {
    padding: 30px 32px 24px;
}

/* Mode Mobile : téléphone pour se projeter */
.editor__stage[data-view="mobile"] .preview-device {
    width: 390px;
    max-width: min(390px, 100%);
    height: min(780px, calc(100% - 8px));
    border: 2px solid #1f1f1f;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.editor__stage[data-view="mobile"] .preview-device__notch {
    display: block;
    width: 120px;
    height: 22px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #1f1f1f;
    flex-shrink: 0;
}

.editor__stage[data-view="mobile"] .preview-device__screen {
    border-radius: 0 0 26px 26px;
}

.editor__stage[data-view="mobile"] .invite .scene-wrapper {
    max-width: 340px;
}

.editor__stage[data-view="mobile"] .invite .itinerary-section {
    max-width: 100%;
}

.editor__stage[data-view="mobile"] .invite .names {
    font-size: clamp(24px, 8vw, 32px);
}

.editor__stage[data-view="mobile"] .invite .event,
.editor__stage[data-view="mobile"] .invite .stop .content {
    width: 100%;
}

.editor__stage[data-view="mobile"] .invite .stop .map-link {
    padding: 8px 12px;
}

/*
 * Le entrypoint public charge aussi invitation.css (autre produit),
 * qui force .invite { opacity:0; transform:... }. Ce transform crée un
 * containing block : l’enveloppe fixed se retrouve coincée dans un cadre
 * replié → bandeau blanc étroit. On neutralise ces styles dans l’éditeur.
 */
.editor .invite {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: none;
}

.invite .stage {
    position: relative;
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 14px 20px;
    background: #ffffff;
}

.invite .scene-wrapper {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

/* L'enveloppe/le rideau est un calque fixe, indépendant de la mise en page du
   faire-part : il se pose par-dessus sans jamais déplacer la carte en dessous. */
.invite .envelope-scene {
    position: fixed;
    inset: 0;
    perspective: 1600px;
    transform-style: preserve-3d;
    transition: opacity 1s ease, transform 1s ease;
    z-index: 999;
}
.invite .envelope-scene.gone {
    display: none;
    visibility: hidden;
}
/* Aperçu éditeur : le calque reste cantonné au cadre de l'aperçu (pas à tout l'écran de l'app) */
.editor:not(.editor--public) .preview-device {
    transform: translateZ(0);
}

.invite .envelope-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--kraft) 0%, var(--kraft-dark) 100%);
    box-shadow: 0 30px 70px rgba(60, 40, 10, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.08);
    transition: opacity 0.7s ease 0.9s;
    transform-style: preserve-3d;
}
.invite .envelope-scene.open .envelope-body {
    opacity: 0;
    pointer-events: none;
}
.invite .envelope-body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 50%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.10), transparent 60%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.invite .envelope-body::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 50%;
    background: linear-gradient(240deg, rgba(255, 255, 255, 0.10), transparent 60%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.invite .fold-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.10), transparent 70%);
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    pointer-events: none;
}

.invite .flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(150deg, #FFFFFF, var(--kraft-dark));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transform: rotateX(0deg) translateZ(0);
    transition: transform 1s cubic-bezier(.6, 0, .2, 1);
    z-index: 6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    backface-visibility: hidden;
    will-change: transform;
}
.invite .envelope-scene.open .flap {
    transform: rotateX(178deg) translateZ(1px);
    z-index: 2;
}

.invite .seal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 86px; height: 86px;
    border-radius: 50%;
    border: 0;
    background: radial-gradient(circle at 32% 28%, var(--cire-light), var(--cire) 60%, #4A161E 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.35), inset 0 3px 6px rgba(255, 255, 255, 0.15);
    z-index: 7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    animation: seal-pulse 2.6s ease-in-out infinite;
}
.invite .seal .monogram {
    font-family: var(--f-script);
    color: var(--or-light);
    font-size: 34px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.invite .envelope-scene.open .seal {
    opacity: 0;
    transform: scale(0.5) rotate(25deg);
    pointer-events: none;
    animation: none;
}
@keyframes seal-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.invite .hint {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    letter-spacing: 0.15em;
    color: #6b5c4f;
    font-size: 13px;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}
.invite .envelope-scene.open .hint { opacity: 0; }

/* Ouverture rideau */
.invite .curtain-body { display: none; }
.editor__stage[data-envelope="curtain"] .invite .envelope-body { display: none; }
.editor__stage[data-envelope="curtain"] .invite .curtain-body { display: block; }

.invite .curtain-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    background-color: var(--cire);
    background-image: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--cire) 78%, #000) 0 5px,
        var(--cire) 5px 17px,
        var(--cire-light) 17px 22px,
        var(--cire) 22px 34px
    );
    background-size: 34px 100%;
    box-shadow: none;
    transition: transform 1.6s cubic-bezier(.77, 0, .18, 1);
    z-index: 6;
}
.invite .curtain-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent);
    pointer-events: none;
}
.invite .curtain-panel::after {
    content: none;
}
.invite .curtain-panel--left {
    left: 0;
}
.invite .curtain-panel--left::after {
    right: 0;
}
.invite .curtain-panel--right {
    right: 0;
}
.invite .curtain-panel--right::after {
    left: 0;
    transform: scaleX(-1);
}
.editor__stage[data-envelope="curtain"] .invite .envelope-scene.open .curtain-panel--left {
    transform: translateX(-102%);
}
.editor__stage[data-envelope="curtain"] .invite .envelope-scene.open .curtain-panel--right {
    transform: translateX(102%);
}

.invite .curtain-valance {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 11%;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cire) 60%, #000), var(--cire));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    z-index: 7;
    transition: opacity 0.8s ease 0.5s, transform 1s ease 0.4s;
}
.editor__stage[data-envelope="curtain"] .invite .envelope-scene.open .curtain-valance {
    opacity: 0;
    transform: translateY(-100%);
}

/* Bloc d'ouverture centré : prénoms juste au-dessus du bouton */
.invite .opening-cluster {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92%, 440px);
    pointer-events: none;
}
.invite .opening-cluster .seal {
    pointer-events: auto;
}

/* Poignée du rideau : rond doré + cordon + pompon */
.editor__stage[data-envelope="curtain"] .invite .opening-cluster {
    top: 54%;
}
.editor__stage[data-envelope="curtain"] .invite .seal {
    width: 62px; height: 62px;
    background: radial-gradient(circle at 35% 30%, var(--or-light), var(--or) 55%, color-mix(in srgb, var(--or) 55%, #000) 100%);
    border: 3px solid var(--ivoire);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.editor__stage[data-envelope="curtain"] .invite .seal .monogram {
    display: none;
}
.editor__stage[data-envelope="curtain"] .invite .seal::before {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 42px;
    background: linear-gradient(to bottom, var(--or-light), var(--or));
    border-radius: 2px;
}
.editor__stage[data-envelope="curtain"] .invite .seal::after {
    content: "";
    position: absolute;
    top: calc(100% + 38px); left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 14px;
    background: radial-gradient(circle at 35% 30%, var(--or-light), var(--or));
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.invite .curtain-body {
    position: absolute;
    inset: 0;
    z-index: 6;
}
.invite .curtain-opening-copy {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    text-align: center;
    pointer-events: none;
}
.editor__stage[data-envelope="curtain"] .invite .curtain-opening-copy,
.editor__stage[data-envelope="photo"] .invite .curtain-opening-copy {
    display: flex;
}
.invite .curtain-names {
    margin: 0;
    width: 100%;
    font-family: var(--f-script);
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    line-height: 1.15;
    color: #E8C96A;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.01em;
    white-space: normal;
}
.invite .curtain-names__primary,
.invite .curtain-names__secondary,
.invite .curtain-names__amp {
    display: inline;
}
.invite .curtain-names__amp {
    margin: 0 0.18em;
    font-size: 0.92em;
}
.invite .curtain-names__amp[hidden],
.invite .curtain-names__secondary[hidden] {
    display: none !important;
}
.invite .curtain-tagline {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #E8C96A;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.invite .curtain-tagline[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}
.editor__opening-names {
    display: grid;
    gap: 0.55rem;
    margin: 0.35rem 0 0.75rem;
}
.editor__opening-names[hidden] {
    display: none !important;
}
.editor__stage[data-envelope="curtain"] .invite .hint--curtain {
    margin-top: 3.4rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E8C96A;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.editor__stage[data-envelope="curtain"] .invite .envelope-scene.open .curtain-opening-copy,
.editor__stage[data-envelope="curtain"] .invite .envelope-scene.open .opening-cluster {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.invite .hint--envelope,
.invite .hint--curtain,
.invite .hint--photo { display: none; }
.editor__stage[data-envelope="on"] .invite .hint--envelope,
.editor__stage[data-envelope="curtain"] .invite .hint--curtain,
.editor__stage[data-envelope="photo"] .invite .hint--photo {
    display: block;
}
.invite .hint--curtain[hidden],
.invite .hint--photo[hidden] {
    display: none !important;
}

/* Ouverture photo personnalisée */
.invite .photo-opening {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #1a1210;
    overflow: hidden;
}
.editor__stage[data-envelope="photo"] .invite .envelope-body,
.editor__stage[data-envelope="photo"] .invite .curtain-body {
    display: none;
}
.editor__stage[data-envelope="photo"] .invite .photo-opening {
    display: block;
}
.invite .photo-opening[hidden] {
    display: none !important;
}
.invite .photo-opening__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.invite .photo-opening__img[hidden] {
    display: none !important;
}
.invite .photo-opening__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-family: var(--f-display);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--cire) 75%, #000), var(--cire));
}
.invite .photo-opening__fallback[hidden] {
    display: none !important;
}
.invite .photo-opening__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.42) 100%);
    pointer-events: none;
}
.editor__stage[data-envelope="photo"] .invite .opening-cluster {
    top: var(--opening-pos-y, 78%);
    left: var(--opening-pos-x, 50%);
    bottom: auto;
    transform: translate(-50%, -50%) scale(var(--opening-scale, 1));
    transform-origin: center center;
    width: min(92%, 440px);
    pointer-events: none;
}
.editor__stage[data-envelope="photo"] .invite .curtain-opening-copy {
    display: flex;
    margin-bottom: 0.75rem;
    padding: clamp(0.7rem, 2vw, 1.15rem) clamp(0.95rem, 3vw, 1.6rem);
    border-radius: 14px;
    color: var(--opening-text-color, #fffdfb);
    background-color: color-mix(
        in srgb,
        var(--opening-text-panel-color, #000000) calc(var(--opening-text-panel-opacity, 0.4) * 100%),
        transparent
    );
    transition: background-color 0.28s ease, color 0.28s ease;
    pointer-events: none;
}
.editor:not(.editor--public) .editor__stage[data-envelope="photo"] .invite .curtain-opening-copy {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}
.editor:not(.editor--public) .editor__stage[data-envelope="photo"] .invite .curtain-opening-copy.is-dragging {
    cursor: grabbing;
}
.editor__stage[data-envelope="photo"] .invite .curtain-tagline:not([hidden]) {
    display: block;
    margin-top: 0.15rem;
}
.editor__stage[data-envelope="photo"] .invite .seal {
    display: none !important;
}
.editor__stage[data-envelope="photo"] .invite .photo-opening {
    cursor: pointer;
    pointer-events: auto;
}
.editor__stage[data-envelope="photo"] .invite .hint--photo {
    margin-top: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--opening-text-color, #F5E6C8);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.editor__stage[data-envelope="photo"] .invite .curtain-names,
.editor__stage[data-envelope="photo"] .invite .curtain-tagline {
    color: inherit;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.editor__stage[data-envelope="photo"] .invite .envelope-scene.open .photo-opening {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1s ease, transform 1.2s ease;
}
.editor__stage[data-envelope="photo"] .invite .envelope-scene.open .curtain-opening-copy,
.editor__stage[data-envelope="photo"] .invite .envelope-scene.open .opening-cluster {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.editor__stage[data-envelope="photo"][data-opened="1"] .hint {
    opacity: 0;
}
.editor__opening-photo {
    margin: 8px 0 10px;
}
.editor__opening-photo[hidden],
#openingPhotoField[hidden] {
    display: none !important;
}

.invite .eyebrow {
    font-family: var(--f-display);
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--vert);
    margin: 0 0 10px;
}
.invite .names {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(26px, 6.5vw, 38px);
    line-height: 1.15;
    color: var(--cire);
    margin: 0 0 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.invite .names__display {
    display: inline;
    white-space: pre-line;
}
.invite .names__display.is-placeholder:empty::before,
.invite .names__display.is-placeholder::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--cire) 45%, transparent);
    font-style: italic;
}
.invite .names__display:not(:empty)::before {
    content: none;
}
.invite .names__primary,
.invite .names__secondary,
.invite .names__part {
    display: inline;
}
.invite .names__amp,
.invite .names__join,
.invite .amp {
    display: inline;
    font-family: var(--f-script);
    font-size: 0.85em;
    color: var(--or);
    margin: 0 0.15em;
}
.invite .names__join:not(.names__join--amp) {
    font-family: var(--f-display);
    color: var(--cire);
    margin: 0 0.08em 0 0;
}
.invite .names[data-names="1"] .names__amp,
.invite .names[data-names="1"] .names__secondary,
.invite .names__amp[hidden],
.invite .names__secondary[hidden],
.invite .names__part[hidden],
.invite .names__join[hidden] {
    display: none !important;
}
.invite .curtain-names__text {
    display: inline;
}
.invite .curtain-names__primary,
.invite .curtain-names__secondary,
.invite .curtain-names__amp {
    display: inline;
}
.editor__optional {
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--editor-muted, #5f4a3c);
    font-size: 11px;
}
.invite .divider {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    margin: 10px 0; color: var(--or);
}
.invite .divider .line { height: 1px; width: 44px; background: linear-gradient(to right, transparent, var(--or)); }
.invite .divider .line.rev { background: linear-gradient(to left, transparent, var(--or)); }
.invite .divider .diamond { width: 6px; height: 6px; transform: rotate(45deg); background: var(--or); }

.invite .intro-text {
    font-family: var(--f-body);
    font-size: 14.5px;
    font-style: italic;
    color: var(--encre);
    max-width: 360px;
    margin: 0 auto 12px;
    line-height: 1.5;
}

.invite .date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0 14px;
    text-align: center;
}
.invite .date-block .day {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05em;
    letter-spacing: 0.08em;
    text-transform: none;
    color: inherit;
    margin: 0;
}
.invite .date-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em 0.45em;
    font-family: var(--f-display);
    color: var(--cire);
    line-height: 1.25;
}
.invite .date-main .num {
    font-size: clamp(22px, 5.2vw, 30px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}
.invite .date-main .month {
    font-size: 1.05em;
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: none;
    color: inherit;
    padding-bottom: 0;
}
.invite .date-rule-row {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 10px 0 8px;
}
.invite .date-rule-row .line { height: 1px; width: 34px; background: var(--or); }
.invite .date-rule-row .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--or); }
.invite .date-block .year {
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: 0.4em;
    color: var(--or);
    text-align: center;
}

.invite .events {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px auto 12px;
    max-width: 340px;
    width: 100%;
}
.invite .event {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    padding: 12px 14px 11px;
    background: color-mix(in srgb, var(--cire) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
    border-radius: 10px;
    box-shadow: none;
}
.invite .event .label {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: none;
    color: var(--vert);
    margin: 0 0 2px;
    order: 0;
}
.invite .event .time {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 15px;
    color: var(--cire);
    letter-spacing: 0.04em;
    order: 1;
    margin-top: 0;
}
.invite .event .place {
    font-family: var(--f-display);
    font-size: 16px;
    color: var(--encre);
    font-weight: 500;
    line-height: 1.25;
    order: 2;
}
.invite .event .addr {
    font-size: 11px;
    color: #6b5c4f;
    font-style: italic;
    line-height: 1.4;
    order: 3;
    max-width: 28ch;
}

.invite .rsvp {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--vert);
    text-transform: none;
    line-height: 1.4;
}
.invite .signature-line {
    font-family: var(--f-script);
    font-size: 18px;
    color: var(--cire);
    margin-top: 8px;
}

.invite .photo-frame {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 14px;
    padding: 5px;
    background: linear-gradient(135deg, var(--or-light), var(--or) 50%, #8a6a1f 100%);
    box-shadow: 0 8px 22px rgba(60, 40, 10, 0.35);
}
.invite .photo-frame.is-empty,
.invite .photo-frame[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    border: 0;
    box-shadow: none;
    background: none;
}
.invite .photo-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--ivoire);
}

.invite .revealed-letter {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--ivoire);
    border: 1.5px solid var(--or);
    outline: 1px solid rgba(110, 36, 48, 0.2);
    outline-offset: 5px;
    padding: 22px 18px 18px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(60, 40, 10, 0.2);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.9s ease, transform 0.9s ease;
    pointer-events: none;
    z-index: 20;
    display: none;
}
.invite .revealed-letter.show {
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.invite .itinerary-section {
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
    padding: 34px 18px 36px;
    background: var(--band-bg);
    color: var(--band-fg);
    transition: background-color .35s ease, color .35s ease;
    display: none;
    box-sizing: border-box;
}
.invite .itinerary-section.is-visible {
    display: block;
}
.invite .itinerary {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.invite .itinerary.show { opacity: 1; transform: translateY(0); }

.invite .itinerary h3 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--band-fg);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 13px;
    margin: 0 0 26px;
    padding: 0 8px;
    line-height: 1.45;
}

.invite .route {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px; /* place pour les pastilles abs. sans décaler les cartes */
}
.invite .stop {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px; /* même largeur que .invite .events */
    text-align: left;
    padding: 0 0 18px;
    box-sizing: border-box;
}
.invite .stop:last-child { padding-bottom: 0; }
.invite .stop .dot-col {
    position: absolute;
    left: -28px;
    top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18px;
    padding-top: 0;
}
.invite .stop .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--band-accent); border: 2px solid var(--band-bg);
    box-shadow: 0 0 0 2px var(--band-accent); flex-shrink: 0;
}
.invite .stop .track {
    flex: 1; width: 1px; margin-top: 6px; min-height: 28px;
    background: color-mix(in srgb, var(--band-accent) 55%, transparent);
}
.invite .stop .content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, #fff 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--band-accent) 32%, transparent);
    padding: 14px 15px 13px;
    border-radius: 10px;
}
.invite .stop .stop-label {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: none;
    color: var(--band-accent);
    margin: 0 0 4px;
}
.invite .stop .stop-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--band-fg) 82%, transparent);
    margin: 0 0 6px;
}
.invite .stop .stop-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17.5px;
    font-weight: 500;
    color: var(--band-fg);
    margin: 0 0 4px;
    line-height: 1.25;
}
.invite .stop .stop-addr {
    font-size: 11.5px;
    color: var(--band-muted);
    font-style: italic;
    margin: 0 0 4px;
    line-height: 1.4;
}
.invite .stop .map-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--band-accent) 55%, transparent);
    background: color-mix(in srgb, var(--band-accent) 14%, transparent);
    color: var(--band-accent);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.2;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.invite .stop .map-link:hover,
.invite .stop .map-link:focus-visible {
    background: color-mix(in srgb, var(--band-accent) 24%, transparent);
    border-color: var(--band-accent);
    color: var(--band-fg);
    outline: none;
}
.invite .stop .map-link__icon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}
.invite .stop .map-link__text {
    white-space: nowrap;
}
.invite .stop .map-link__arrow {
    opacity: 0.85;
    flex-shrink: 0;
}
.invite .footer-note {
    text-align: center;
    color: color-mix(in srgb, var(--band-muted) 88%, transparent);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: none;
    margin: 22px 0 0;
    line-height: 1.45;
    opacity: 0.85;
}

/* Sans enveloppe */
.editor__stage[data-envelope="off"] .envelope-scene,
.editor__stage[data-envelope="off"] .hint { display: none; }
.editor__stage[data-envelope="off"] .revealed-letter {
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.editor__stage[data-envelope="off"] .itinerary-section {
    display: block;
}
.editor__stage[data-envelope="off"] .itinerary-section.is-visible,
.editor__stage[data-envelope="off"] .itinerary {
    opacity: 1;
    transform: none;
}
.editor__stage[data-envelope="off"] .stage {
    padding-top: 20px;
    padding-bottom: 8px;
}

/* Après ouverture : hint masqué (bandeau géré via .is-visible avec la lettre) */
.editor__stage[data-envelope="on"][data-opened="1"] .hint,
.editor__stage[data-envelope="curtain"][data-opened="1"] .hint {
    display: none;
}

.invite [data-field][data-placeholder]:empty::before,
.invite [data-field][data-placeholder].is-placeholder::before,
.invite .names__display[data-placeholder]:empty::before,
.invite .names__display[data-placeholder].is-placeholder::before,
.invite .monogram[data-placeholder]:empty::before,
.invite .monogram[data-placeholder].is-placeholder::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--encre) 38%, transparent);
    font-style: italic;
    font-weight: 400;
    pointer-events: none;
}

.invite .monogram[data-placeholder]:empty::before {
    color: color-mix(in srgb, var(--or-light) 70%, transparent);
    font-style: normal;
}

.invite .names__primary[data-placeholder]:empty::before,
.invite .names__secondary[data-placeholder]:empty::before {
    color: color-mix(in srgb, var(--cire) 40%, transparent);
}

/* Aperçu lecture seule : pas d’édition inline sur la carte */
.invite [data-field] {
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}

.editor__input::placeholder,
.editor__textarea::placeholder {
    color: #a89888;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .invite .flap,
    .invite .envelope-body,
    .invite .curtain-panel,
    .invite .curtain-valance,
    .invite .seal,
    .invite .revealed-letter,
    .invite .itinerary { transition: none !important; animation: none !important; }
}

/* =========================================================
   PANEL PERSONNALISATION
   ========================================================= */
.editor__panel {
    width: var(--panel-w);
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    background: var(--panel-bg);
    border-left: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: var(--editor-ink, #3a2a21);
    overflow-x: hidden;
}
.editor__panel-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--editor-paper, #fffdf9);
    min-width: 0;
}
.editor__panel-title {
    margin: 0;
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 18px;
    color: var(--editor-ink, #3a2a21);
}
.editor__panel-price {
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--editor-accent, #5c4033);
    flex-shrink: 0;
}
.editor__panel-body {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 20px;
    background: var(--editor-beige, #f3ebe0);
}
.editor__panel-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--panel-border);
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--editor-paper, #fffdf9);
    min-width: 0;
}
.editor__panel-footer .editor__btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    white-space: normal;
    justify-content: center;
}
.editor__panel-footer .editor__btn--preview {
    flex: 1 1 calc(50% - 4px);
}
.editor__panel-footer .editor__btn--verify {
    flex: 1 1 100%;
    order: 5;
}
.editor__panel-footer .editor__btn--order,
.editor__panel-footer .editor__btn--primary:not(.editor__btn--preview) {
    flex: 1 1 100%;
    order: 6;
}
.editor--finalize-step .editor__panel-footer,
.editor:not(.editor--wizard) .editor__panel-footer {
    align-items: stretch;
}
.wizard-finalize-steps {
    margin: 12px 0 0;
    padding: 12px 12px 12px 1.6rem;
    border-radius: var(--editor-radius, 10px);
    border: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--editor-beige, #f3ebe0) 70%, #fff);
    color: var(--editor-ink, #3a2a21);
    font-size: 13px;
    line-height: 1.45;
}
.wizard-finalize-steps li {
    margin: 0 0 8px;
}
.wizard-finalize-steps li:last-child {
    margin-bottom: 0;
}
.wizard-finalize-steps strong {
    color: var(--editor-accent, #5c4033);
}
.editor__fieldset--finalize .editor__legend {
    margin-bottom: 8px;
}
.editor__fieldset {
    border: 1px solid var(--panel-border);
    margin: 0 0 14px;
    padding: 12px 14px 10px;
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-paper, #fffdf9);
    box-shadow: 0 1px 0 rgba(47, 33, 25, 0.03);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}
.editor__fieldset .editor__legend {
    border-bottom-color: var(--panel-border);
}
.editor__legend {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--editor-ink, #3a2a21);
    margin: 0 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--panel-border);
}
.editor__label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-width: 0; max-width: 100%; }
.editor__label--seal-initials[hidden],
.editor__label--curtain-text[hidden] { display: none !important; }
#replayBtn[hidden] { display: none !important; }
.editor__label span { font-size: 11px; color: var(--editor-muted, #5f4a3c); text-transform: uppercase; letter-spacing: .04em; }
.editor__input {
    font-family: var(--fp-font-body, 'Manrope', system-ui, sans-serif);
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-paper, #fffdf9);
    color: var(--editor-ink, #3a2a21);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.editor__input:focus {
    outline: 0;
    border-color: var(--editor-gold, #c4a36a);
    box-shadow: 0 0 0 2px rgba(196, 163, 106, .28);
}
.editor__input--color {
    padding: 4px;
    height: 40px;
    width: 56px;
    max-width: 56px;
    cursor: pointer;
    background: #fff;
    border-color: var(--panel-border);
}
.editor__input--color::-webkit-color-swatch-wrapper { padding: 2px; }
.editor__input--color::-webkit-color-swatch {
    border: 1px solid var(--panel-border);
    border-radius: 3px;
}
.editor__swatch-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
}
.editor__swatch-picker__btn {
    width: 56px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background-color: var(--swatch, #ffffff);
    box-shadow: inset 0 0 0 3px #fff;
    cursor: pointer;
}
.editor__swatch-picker__btn:hover {
    border-color: var(--editor-gold, #c4a36a);
}
.editor__swatch-picker.is-open .editor__swatch-picker__btn {
    border-color: var(--editor-gold, #c4a36a);
    box-shadow: 0 0 0 2px rgba(196, 163, 106, .28), inset 0 0 0 3px #fff;
}
.editor__swatch-picker__btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.editor__swatch-picker__input {
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.editor__color-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}
.editor__color-wrap .editor__input--color,
.editor__color-wrap .editor__swatch-picker {
    width: auto;
}
.editor__color-wrap__bar {
    display: none;
    position: absolute;
    left: 8px;
    right: auto;
    top: 50%;
    width: 40px;
    height: 2px;
    pointer-events: none;
    z-index: 2;
    background: #2A1A14;
    transform: translateY(4px) rotate(-28deg);
    box-shadow: 0 0 0 1px rgba(255, 253, 248, .7);
}
.editor__color-wrap.is-unused .editor__color-wrap__bar {
    display: block;
}
.editor__color-wrap.is-unused .editor__swatch-picker__btn,
.editor__color-wrap.is-unused .editor__input--color {
    opacity: .55;
    cursor: not-allowed;
}
.editor__textarea { min-height: 72px; resize: vertical; }
.editor__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.editor__row > * { min-width: 0; }
.editor__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; width: 100%; min-width: 0; }
.editor__type-block {
    margin: 12px 0 14px;
}
.editor__type-block .editor__legend {
    margin-bottom: 8px;
}
.editor__sublegend {
    margin: 14px 0 6px;
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--editor-ink, #3a2a21);
}
.editor__sublegend--spaced {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
}
.editor__scale {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-width: 0;
    max-width: 100%;
}
.editor__scale--opacity {
    grid-template-columns: minmax(0, 1fr) auto;
}
.editor__scale__btn {
    flex: 0 0 auto;
    min-width: 36px;
    padding-left: 0;
    padding-right: 0;
}
.editor__scale__range {
    width: 100%;
    min-width: 0;
    accent-color: var(--editor-accent, #5c4033);
    cursor: pointer;
}
.editor__scale__value {
    min-width: 3.5rem;
    font-size: 12px;
    color: var(--editor-muted, #5f4a3c);
    text-align: right;
}
#photoDropCover {
    margin-bottom: 4px;
}
#removePhotoBtnCover:not([hidden]) {
    margin-bottom: 8px;
}
.editor__font-select {
    position: relative;
    margin-bottom: 8px;
}
.editor__font-select__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--editor-accent, #5c4033);
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-accent, #5c4033);
    color: #fff;
    font-family: var(--fp-font-body, 'Manrope', system-ui, sans-serif);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.editor__font-select__trigger:hover,
.editor__font-select.is-open .editor__font-select__trigger {
    background: var(--editor-accent-hover, #2f2119);
    border-color: var(--editor-accent-hover, #2f2119);
}
.editor__font-select__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor__font-select__caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.editor__font-select.is-open .editor__font-select__caret {
    transform: rotate(180deg);
}
.editor__font-select__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-accent, #5c4033);
    border: 1px solid color-mix(in srgb, var(--editor-accent, #5c4033) 70%, #fff);
    box-shadow: var(--editor-shadow, 0 14px 30px rgba(47, 33, 25, 0.08));
    max-height: 260px;
    overflow-y: auto;
}
.editor__font-select__list[hidden] {
    display: none !important;
}
.editor__font-select__list li {
    padding: 9px 12px;
    border-radius: 5px;
    color: #fff;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    cursor: pointer;
}
.editor__font-select__list li:hover,
.editor__font-select__list li[aria-selected="true"] {
    background: color-mix(in srgb, #fff 18%, transparent);
}
.editor__font-select__list li[aria-selected="true"] {
    font-weight: 600;
}
.editor__chip {
    border: 1px solid var(--panel-border);
    background: var(--editor-paper, #fffdf9);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--editor-accent, #5c4033);
    font-family: var(--fp-font-body, 'Manrope', system-ui, sans-serif);
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.3;
}
.editor__chip.is-active {
    background: var(--editor-accent, #5c4033);
    color: #fff;
    border-color: var(--editor-accent, #5c4033);
}
.editor__legend-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--editor-muted, #5f4a3c);
    font-size: 12px;
}
.editor__help {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--editor-muted, #5f4a3c);
    line-height: 1.4;
}
.editor__help--intro {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-paper, #fffdf9);
}
.editor__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.editor__swatch {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 6px 8px 5px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
}
.editor__swatch.is-active { border-color: var(--or); background: rgba(201, 162, 75, .08); }
.editor__swatch-color { display: block; width: 26px; height: 26px; border-radius: 50%; }
.editor__swatch-name {
    font-size: 10px;
    letter-spacing: .02em;
    color: #5c5044;
}
.editor__swatch-color--ivoire { background: linear-gradient(135deg, #FBF6EC 50%, #6E2430 50%); border: 1px solid #E3D6B8; }
.editor__swatch-color--blush { background: #9a4f5d; }
.editor__swatch-color--bordeaux { background: #7a1f2b; }
.editor__swatch-color--corail { background: #c45c4a; }
.editor__swatch-color--sauge { background: #46614f; }
.editor__swatch-color--emeraude { background: #1f6b55; }
.editor__swatch-color--ocean { background: #1e4d6b; }
.editor__swatch-color--azur { background: #3a7ca5; }
.editor__swatch-color--lavande { background: #6b5b8a; }
.editor__swatch-color--champagne { background: #8a7348; }
.editor__swatch-color--terracotta { background: #b45a3c; }
.editor__swatch-color--nocturne { background: #1a2030; }
.editor__swatch-color--anthracite { background: #2f343c; }
.editor__swatch-color--graphite { background: #3d3d3d; }
.editor__drop {
    border: 2px dashed var(--panel-border);
    border-radius: var(--editor-radius, 10px);
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--editor-muted, #5f4a3c);
    cursor: pointer;
    background: var(--editor-paper, #fffdf9);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.35;
}
.editor__drop:hover,
.editor__drop.is-dragover {
    border-color: var(--editor-gold, #c4a36a);
    background: rgba(196, 163, 106, .08);
}
.editor__steps-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.editor__extra-names {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.editor__name-extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: var(--editor-radius, 10px);
    background: var(--editor-paper, #fffdf9);
}
.editor__name-extra[hidden] {
    display: none !important;
}
.editor__name-extra .editor__label {
    margin-bottom: 0;
}
#addNameBtn[hidden],
#addNameBtnMini[hidden] {
    display: none !important;
}
.editor-step { border: 1px solid var(--panel-border); border-radius: var(--editor-radius, 10px); padding: 10px; background: var(--editor-paper, #fffdf9); max-width: 100%; min-width: 0; }
.editor-step__title { margin: 0 0 8px; font-family: var(--fp-font-display, 'Cormorant Garamond', serif); font-size: 14px; font-weight: 600; color: var(--editor-ink, #3a2a21); }
.editor__field-error {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #8a2f2f;
}
.editor__field-success {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #2f6b45;
}
.editor-step__maps-actions {
    margin: 0 0 8px;
}
.editor__btn {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: var(--editor-radius, 10px);
    border: 1px solid var(--panel-border);
    font-family: var(--fp-font-display, 'Cormorant Garamond', serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.25;
    white-space: normal;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.editor__btn--secondary {
    background: var(--editor-paper, #fffdf9);
    color: var(--editor-accent, #5c4033);
    border-color: var(--panel-border);
}
.editor__btn--secondary:hover {
    background: var(--editor-beige, #f3ebe0);
    border-color: var(--editor-accent-soft, #8b6b55);
}
.editor__btn--primary {
    background: var(--editor-accent, #5c4033);
    color: #fff;
    border-color: var(--editor-accent, #5c4033);
}
.editor__btn--primary:hover {
    background: var(--editor-accent-hover, #2f2119);
    border-color: var(--editor-accent-hover, #2f2119);
}
.editor__btn--back {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
}
.editor__btn--order {
    flex: 1 1 auto;
    white-space: normal;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    letter-spacing: .03em;
}
.editor__btn--danger { background: #fff; color: #8c1f2a; border-color: rgba(140, 31, 42, .25); }
.editor__btn--small { width: 100%; flex: initial; margin-top: 6px; padding: 9px 12px; font-size: 12px; }
.editor__toggle-panel {
    display: none;
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 120;
    min-width: 48px;
    height: 48px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 0;
    background: var(--editor-accent, #5c4033);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--editor-shadow, 0 14px 30px rgba(47, 33, 25, 0.08));
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 700;
}
.editor__toggle-panel:hover {
    background: var(--editor-accent-hover, #2f2119);
}
.editor__toggle-panel-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.editor__toggle-panel-text {
    display: none;
}

@media (max-width: 900px) {
    .editor {
        flex-direction: column;
        overflow: visible;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
    }
    .editor__stage {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: 100%;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    .editor__panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: none;
        height: min(78vh, 720px);
        border-left: 0;
        border-top: 1px solid var(--panel-border);
        border-radius: 16px 16px 0 0;
        transform: translateY(calc(100% - 72px));
        transition: transform .35s ease;
        z-index: 900;
        box-shadow: 0 -10px 30px rgba(47, 33, 25, 0.22);
        background: var(--panel-bg);
    }
    .editor__panel.is-open {
        transform: translateY(0);
    }
    .editor__panel-header {
        cursor: pointer;
        padding-top: 14px;
        position: relative;
    }
    .editor__panel-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(42, 26, 20, 0.18);
        transform: translateX(-50%);
    }
    .editor__toggle-panel {
        display: inline-flex !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        z-index: 1000;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .editor__toggle-panel-text {
        display: inline;
    }
    .editor__toggle-panel.is-open {
        bottom: calc(min(78vh, 720px) + 10px);
    }

    .preview-toolbar {
        display: none !important;
    }
    .preview-toolbar__label,
    .preview-toolbar .editor__chips,
    .preview-toolbar .editor__chip--mobile {
        display: none !important;
    }
    .preview-shell {
        flex: 1;
        min-height: 0;
        padding: 0;
        align-items: stretch;
        justify-content: flex-start;
        background: var(--editor-beige, #f3ebe0);
    }

    .editor__stage[data-view="desktop"] .preview-device,
    .editor__stage[data-view="mobile"] .preview-device {
        width: 100%;
        max-width: none;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .editor__stage[data-view="mobile"] .preview-device__notch {
        display: none;
    }

    .editor__stage[data-view="mobile"] .preview-device__screen {
        border-radius: 0;
    }

    .editor:not(.editor--public) .invite {
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .editor:not(.editor--public) .invite .stage {
        min-height: 0;
        height: auto;
        align-items: flex-start;
        padding: 20px 0 16px;
        box-sizing: border-box;
    }

    .editor:not(.editor--public) .invite .scene-wrapper {
        height: auto;
        max-width: 100%;
        width: 100%;
    }

    .editor:not(.editor--public) .invite .revealed-letter {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .editor:not(.editor--public) .invite .itinerary-section {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding-top: 22px;
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    .invite .scene-wrapper,
    .invite .itinerary-section {
        max-width: 100%;
    }

    body.page-editor {
        overflow: hidden;
    }
    body.page-editor .sf-toolbar {
        display: none !important;
    }
}

/* ----- Checkout modal (éditeur) ----- */
body.checkout-modal-open,
body.editor-alert-open {
    overflow: hidden;
}

.checkout-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(32, 22, 16, 0.55);
    backdrop-filter: blur(4px);
}

.checkout-modal.is-open,
.checkout-modal:not([hidden]) {
    display: flex;
}

.checkout-modal[hidden] {
    display: none !important;
}

.checkout-modal__dialog {
    position: relative;
    width: min(100%, 480px);
    max-height: min(92vh, 760px);
    overflow-y: auto;
    padding: 1.75rem 1.5rem 1.4rem;
    border-radius: 18px;
    background: #fffdf9;
    border: 1px solid rgba(58, 42, 33, 0.12);
    box-shadow: 0 24px 60px rgba(47, 33, 25, 0.22);
}

.checkout-modal__close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f4a3c;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.checkout-modal__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b6b55;
}

.checkout-modal__title {
    margin: 0 0 0.45rem;
    font-family: var(--fp-font-display, "Cormorant Garamond", "Times New Roman", serif);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--editor-accent-hover, #2f2119);
}

.checkout-modal__lead {
    margin: 0 0 1.1rem;
    color: #5f4a3c;
    font-size: 0.95rem;
    line-height: 1.45;
}

.checkout-modal__form {
    display: grid;
    gap: 0.85rem;
}

.checkout-modal__actions {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.checkout-modal__error {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #f8e8e4;
    color: #7a2e22;
    font-size: 0.9rem;
}

.checkout-modal__note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #8b6b55;
    line-height: 1.4;
}

.checkout-consent {
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(58, 42, 33, 0.12);
    border-radius: 12px;
    background: rgba(243, 235, 224, 0.55);
    display: grid;
    gap: 0.7rem;
}

.checkout-consent__legend {
    padding: 0;
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b6b55;
    font-weight: 600;
}

.checkout-consent__item {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.65rem;
    align-items: start;
    margin: 0;
    color: #5f4a3c;
    font-size: 0.82rem;
    line-height: 1.45;
    cursor: pointer;
}

.checkout-consent__item input {
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #5c4033;
    cursor: pointer;
}

.checkout-consent__item a {
    color: #5c4033;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.checkout-consent__item a:hover,
.checkout-consent__item a:focus {
    color: #9a7540;
}

.checkout-consent__links {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #8b6b55;
}

.checkout-consent__links a {
    font-weight: 600;
}

.checkout-consent__links-sep {
    margin: 0 0.35rem;
    opacity: 0.7;
}

@media (max-width: 640px) {
    .checkout-consent {
        padding: 0.75rem 0.8rem;
        gap: 0.85rem;
    }

    .checkout-consent__item {
        font-size: 0.8rem;
    }
}

/* ----- Invitation publique (éditeur) ----- */
.editor--public {
    min-height: 100vh;
    height: auto;
    display: block;
    overflow: visible;
    max-width: none;
}

.editor--public .editor__stage {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.editor--public .preview-shell,
.editor--public .preview-shell--public {
    display: block;
    flex: none;
    width: 100%;
    max-width: 1180px;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 2.75rem;
    overflow: visible;
    background: transparent;
}

.editor--public .preview-device,
.editor--public .editor__stage[data-view="desktop"] .preview-device,
.editor--public .editor__stage[data-view="mobile"] .preview-device {
    width: min(980px, 100%);
    max-width: 980px;
    height: auto;
    min-height: 70vh;
    margin: 0 auto;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(47, 33, 25, 0.12);
    overflow: visible;
    background: #fff;
    /* Comme l’aperçu invité : enveloppe fixed = viewport, pas le cadre. */
    transform: none;
}

.editor--public .preview-device__screen {
    flex: none;
    height: auto;
    min-height: 70vh;
    overflow: visible;
}

.editor--public .invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

/* Même colonne pour la lettre et l’itinéraire (évite le décalage horizontal). */
.editor--public .invite .stage {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    align-self: center;
    padding-left: 16px;
    padding-right: 16px;
    background: transparent;
}

.editor--public .invite .scene-wrapper,
.editor--public .invite .revealed-letter,
.editor--public .invite .itinerary-section,
.editor--public .editor__stage[data-view="desktop"] .invite .scene-wrapper,
.editor--public .editor__stage[data-view="desktop"] .invite .itinerary-section,
.editor--public .editor__stage[data-view="mobile"] .invite .scene-wrapper,
.editor--public .editor__stage[data-view="mobile"] .invite .itinerary-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.editor--public .invite .scene-wrapper {
    min-height: 52vh;
}

.editor--public .invite .revealed-letter {
    padding: 34px 36px 26px;
}

.editor--public .invite .itinerary-section {
    margin-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
}

.editor--public .invite .photo-frame {
    width: 168px;
    height: 168px;
}

@media (max-width: 720px) {
    .editor--public .preview-shell,
    .editor--public .preview-shell--public {
        max-width: 100%;
        padding: 1rem 0.75rem 2rem;
    }

    .editor--public .preview-device,
    .editor--public .editor__stage[data-view="desktop"] .preview-device,
    .editor--public .editor__stage[data-view="mobile"] .preview-device {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        min-height: 0;
    }

    .editor--public .preview-device__screen {
        min-height: 0;
    }

    .editor--public .invite .stage,
    .editor--public .invite .itinerary-section,
    .editor--public .editor__stage[data-view="desktop"] .invite .itinerary-section,
    .editor--public .editor__stage[data-view="mobile"] .invite .itinerary-section,
    .editor--public .invite .scene-wrapper,
    .editor--public .invite .revealed-letter {
        max-width: 100%;
    }

    .editor--public .invite .scene-wrapper {
        min-height: 0;
    }

    .editor--public .invite .revealed-letter {
        padding: 32px 20px 28px;
    }
}

.invitation-body--card-editor {
    margin: 0;
    background: #f3ebe0;
}

/* =========================================================
   Wizard mini-site (49,90 €)
   ========================================================= */
.wizard-nav {
    display: grid;
    gap: 6px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--editor-beige, #f3ebe0);
}
.wizard-nav__meta {
    display: grid;
    gap: 6px;
    padding: 0 2px 2px;
}
.wizard-nav__progress-text {
    margin: 0;
    font-size: 12px;
    color: var(--editor-muted, #5f4a3c);
    letter-spacing: 0.02em;
}
.wizard-nav__progress-text strong {
    color: var(--editor-ink, #3a2a21);
    font-weight: 700;
}
.wizard-nav__track {
    height: 3px;
    border-radius: 999px;
    background: rgba(58, 42, 33, 0.1);
    overflow: hidden;
}
.wizard-nav__track-fill {
    display: block;
    height: 100%;
    width: 16.666%;
    border-radius: inherit;
    background: var(--editor-accent, #5c4033);
    transition: width 0.28s ease;
}
.wizard-nav__list {
    display: grid;
    gap: 4px;
}
.wizard-nav:not(.is-expanded) .wizard-nav__item:not(.is-active) {
    display: none;
}
.wizard-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 8px;
    border-radius: var(--editor-radius, 10px);
    cursor: pointer;
    color: var(--editor-muted, #5f4a3c);
}
.wizard-nav__item:hover {
    background: rgba(196, 163, 106, 0.14);
}
.wizard-nav__item.is-active {
    background: var(--editor-paper, #fffdf9);
    box-shadow: 0 1px 0 rgba(47, 33, 25, 0.06);
}
.wizard-nav__item.is-done .wizard-nav__num {
    background: var(--editor-accent, #5c4033);
    color: #fff;
    border-color: var(--editor-accent, #5c4033);
}
.wizard-nav__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--editor-paper, #fffdf9);
    color: var(--editor-accent, #5c4033);
}
.wizard-nav__item.is-active .wizard-nav__num {
    background: var(--editor-accent, #5c4033);
    border-color: var(--editor-accent, #5c4033);
    color: #fff;
}
.wizard-nav__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.wizard-nav__copy strong {
    font-size: 13px;
    color: var(--editor-ink, #3a2a21);
    font-weight: 650;
}
.wizard-nav__copy em {
    font-style: normal;
    font-size: 11px;
    color: var(--editor-muted, #5f4a3c);
}
.wizard-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 8px 4px;
    border: 0;
    background: transparent;
    color: var(--editor-muted, #5f4a3c);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.wizard-nav__toggle:hover,
.wizard-nav__toggle:focus-visible {
    color: #2A1A14;
}
.wizard-nav__chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -3px;
}
.wizard-nav.is-expanded .wizard-nav__chevron {
    transform: rotate(-135deg);
    margin-top: 3px;
}
.wizard-pane[hidden],
.wizard-nav[hidden] {
    display: none !important;
}
.editor__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--editor-ink, #3a2a21);
    cursor: pointer;
}
.editor__toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--editor-accent, #5c4033);
}
.wizard-summary {
    margin: 0;
    padding: 0 0 0 1.1rem;
    color: #5f4a3c;
    line-height: 1.55;
    font-size: 14px;
}
.wizard-summary li {
    margin-bottom: 6px;
}
.editor--wizard .editor__panel {
    width: min(380px, 100%);
}
.editor--wizard .editor__panel-body {
    padding-top: 10px;
}
.wizard-pane {
    min-width: 0;
    max-width: 100%;
}

.editor__panel-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.editor__panel-eyebrow {
    margin: 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--editor-muted, #5f4a3c);
}
.editor__panel-header .editor__panel-title {
    font-size: 16px;
    line-height: 1.25;
}

/* Mini-site editor: jamais d'enveloppe dans l'aperçu */
.editor--wizard .envelope-scene,
.editor[data-offer="mini_site"] .envelope-scene {
    display: none !important;
}
.editor--wizard .revealed-letter,
.editor[data-offer="mini_site"] .revealed-letter {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}
.editor--wizard .itinerary-section,
.editor[data-offer="mini_site"] .itinerary-section {
    opacity: 1 !important;
    visibility: visible !important;
}
.editor--wizard .itinerary,
.editor[data-offer="mini_site"] .itinerary {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Surbrillance temporaire après clic dans l’aperçu */
@keyframes editor-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(184, 149, 106, 0.55);
        background-color: rgba(231, 211, 161, 0.35);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
}
[data-editor-anchor].is-editor-flash,
.editor__fieldset.is-editor-flash,
.editor-step.is-editor-flash {
    border-radius: 10px;
    outline: 2px solid #b8956a;
    outline-offset: 4px;
    animation: editor-flash 1.8s ease;
}

/* Alerte / confirmation éditeur (remplace alert() / confirm()) */
.editor-alert {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    box-sizing: border-box;
}
.editor-alert[hidden] {
    display: none !important;
}
.editor-alert__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 26, 20, 0.42);
}
.editor-alert__dialog {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--editor-paper, #fffdf9);
    border: 1px solid var(--panel-border, #ebe0d2);
    border-radius: var(--fp-radius, 16px);
    box-shadow: var(--editor-shadow, 0 18px 48px rgba(47, 33, 25, 0.14));
    padding: 22px 22px 18px;
    box-sizing: border-box;
}
.editor-alert__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--editor-muted, #5f4a3c);
}
.editor-alert__title {
    margin: 0 0 10px;
    font-family: var(--fp-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--editor-accent, #5c4033);
    line-height: 1.25;
}
.editor-alert__message {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--editor-ink, #3a2a21);
}
.editor-alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.editor-alert[data-type="error"] .editor-alert__title {
    color: var(--editor-accent, #5c4033);
}
.editor-alert[data-type="success"] .editor-alert__title {
    color: var(--fp-sage-dark, #4a3428);
}
.editor-alert[data-type="warning"] .editor-alert__title {
    color: var(--editor-gold-deep, #9a7540);
}
.editor-alert .editor__input.is-editor-flash,
.editor .editor__input.is-editor-flash,
.editor .editor__drop.is-editor-flash,
.editor input.is-editor-flash,
.editor select.is-editor-flash,
.editor textarea.is-editor-flash {
    outline: none;
    border-color: var(--editor-gold, #c4a36a) !important;
    box-shadow: 0 0 0 2px rgba(196, 163, 106, 0.55);
    animation: editor-field-flash 1.8s ease;
    border-radius: var(--editor-radius, 10px);
}

@keyframes editor-field-flash {
    0% {
        box-shadow: 0 0 0 2px rgba(184, 149, 106, 0.75);
        background-color: rgba(231, 211, 161, 0.28);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(184, 149, 106, 0.2);
        background-color: transparent;
    }
}

@media (max-width: 900px) {
    .editor-alert {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .editor-alert__dialog {
        width: 100%;
        border-radius: 16px 16px 12px 12px;
        padding: 20px 18px 16px;
    }
    .editor-alert__actions {
        flex-direction: column-reverse;
    }
    .editor-alert__actions .editor__btn {
        width: 100%;
        justify-content: center;
    }
}