[hidden] {
    display: none !important;
}
/* ==========================================================================
   SURPRIA - Event creation form
   ========================================================================== */

.event-create-container {
    max-width: 1040px;
}


/* ==========================================================================
   Header
   ========================================================================== */

.event-create-header {
    max-width: 780px;

    margin-bottom: 34px;
}

.event-back {
    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;

    color: var(--text-soft);

    font-size: 0.82rem;
    font-weight: 800;

    transition:
        color 0.16s ease,
        transform 0.16s ease;
}

.event-back:hover {
    color: var(--text);

    transform: translateX(-3px);
}

.event-create-header h1 {
    margin: 19px 0 12px;

    font-size: clamp(2.7rem, 5vw, 4.4rem);
    line-height: 0.98;

    letter-spacing: -0.06em;
}

.event-create-header > p {
    max-width: 700px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1rem;
    line-height: 1.65;
}


/* ==========================================================================
   Form
   ========================================================================== */

.event-form {
    display: grid;

    gap: 22px;
}


/* ==========================================================================
   Sections
   ========================================================================== */

.event-form-section {
    position: relative;

    padding: 34px;

    border: 1px solid rgba(21, 21, 21, 0.07);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.90);

    box-shadow: 0 12px 38px rgba(30, 24, 16, 0.045);
}

.event-reveal-section {
    border-color: rgba(244, 165, 28, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 250, 242, 0.92)
        );
}

.event-section-number {
    position: absolute;

    top: 28px;
    right: 30px;

    color: #c4bbb0;

    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.event-section-heading {
    max-width: 690px;

    margin-bottom: 28px;
}

.event-section-kicker {
    display: block;

    margin-bottom: 7px;

    color: #9a690c;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.event-section-heading h2 {
    margin: 0;

    font-size: 1.65rem;
    line-height: 1.15;

    letter-spacing: -0.035em;
}

.event-section-heading p {
    margin: 9px 0 0;

    color: var(--text-soft);

    font-size: 0.9rem;
    line-height: 1.6;
}


/* ==========================================================================
   Event type cards
   ========================================================================== */

.event-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 13px;
}

.event-type-card {
    cursor: pointer;
}

.event-type-card input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.event-type-card-inner {
    position: relative;

    min-height: 120px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 12px;

    padding: 19px;

    border: 1px solid #e4ded5;
    border-radius: 18px;

    background: #fff;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.event-type-card:hover .event-type-card-inner {
    transform: translateY(-2px);

    border-color: rgba(244, 165, 28, 0.35);

    box-shadow: 0 10px 25px rgba(30, 24, 16, 0.055);
}

.event-type-card-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: var(--surface-soft);

    font-size: 1.35rem;
}

.event-type-card strong {
    font-size: 0.92rem;
}

.event-type-check {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ded8cf;

    color: white;

    font-size: 0.7rem;
    font-weight: 950;

    opacity: 0;

    transform: scale(0.8);

    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        background 0.16s ease;
}

.event-type-card input:checked + .event-type-card-inner {
    border-color: var(--accent);

    background: rgba(244, 165, 28, 0.055);

    box-shadow:
        0 0 0 3px rgba(244, 165, 28, 0.09);
}

.event-type-card input:checked
+ .event-type-card-inner
.event-type-check {
    opacity: 1;

    transform: scale(1);

    background: var(--accent);

    color: #17120a;
}


/* ==========================================================================
   Theme selection
   ========================================================================== */

.theme-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 15px;
}

.theme-selection-card {
    cursor: pointer;
}

.theme-selection-card[hidden] {
    display: none !important;
}

.theme-selection-card input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.theme-selection-inner {
    position: relative;

    display: block;

    overflow: hidden;

    border: 1px solid #e4ded5;
    border-radius: 20px;

    background: #fff;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.theme-selection-card:hover .theme-selection-inner {
    transform: translateY(-3px);

    box-shadow: var(--shadow-sm);
}

.theme-selection-preview {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fff5df,
            #f7efe3
        );
}

.theme-selection-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.theme-selection-placeholder {
    font-size: 2.5rem;
}

.theme-selection-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 14px 15px 15px;
}

.theme-selection-content strong {
    overflow: hidden;

    font-size: 0.88rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-badge,
.free-badge {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 0 8px;

    border-radius: 999px;

    font-size: 0.63rem;
    font-weight: 900;
}

.premium-badge {
    background: #1b1b1b;
    color: #fff;
}

.free-badge {
    background: #edf7ef;
    color: #2f7d49;
}

.theme-selection-check {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--accent);

    color: #17120a;

    box-shadow: 0 6px 15px rgba(244, 165, 28, 0.28);

    font-size: 0.72rem;
    font-weight: 950;

    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.theme-selection-card input:checked + .theme-selection-inner {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(244, 165, 28, 0.09),
        var(--shadow-sm);
}

.theme-selection-card input:checked
+ .theme-selection-inner
.theme-selection-check {
    opacity: 1;

    transform: scale(1);
}


/* ==========================================================================
   Fields
   ========================================================================== */

.event-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.event-field {
    min-width: 0;
}

.event-field-full {
    grid-column: 1 / -1;
}

.event-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 0.8rem;
    font-weight: 850;
}

.event-field input,
.event-field select,
.event-field textarea {
    width: 100%;

    border: 1px solid #ddd7cd;
    border-radius: 13px;

    outline: none;

    background: #fff;

    color: var(--text);

    font: inherit;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.event-field input,
.event-field select {
    height: 52px;

    padding: 0 14px;
}

.event-field textarea {
    min-height: 125px;

    padding: 14px;

    resize: vertical;

    line-height: 1.6;
}

.event-field input::placeholder,
.event-field textarea::placeholder {
    color: #aaa49c;
}

.event-field input:hover,
.event-field select:hover,
.event-field textarea:hover {
    border-color: #cbc4b9;
}

.event-field input:focus,
.event-field select:focus,
.event-field textarea:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 4px rgba(244, 165, 28, 0.10);
}

.event-field select {
    cursor: pointer;
}

.event-field-help {
    display: block;

    margin-top: 7px;

    color: #8b857c;

    font-size: 0.72rem;
    line-height: 1.45;
}


/* ==========================================================================
   Media placeholder
   ========================================================================== */

.event-media-placeholder {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-top: 22px;
    padding: 18px;

    border: 1px dashed rgba(21, 21, 21, 0.16);
    border-radius: 18px;

    background: rgba(248, 243, 234, 0.52);
}

.event-media-placeholder-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: white;

    font-size: 1.25rem;

    box-shadow: 0 6px 18px rgba(30, 24, 16, 0.05);
}

.event-media-placeholder strong {
    display: block;

    margin-bottom: 4px;

    font-size: 0.86rem;
}

.event-media-placeholder p {
    margin: 0;

    color: var(--text-soft);

    font-size: 0.76rem;
    line-height: 1.5;
}

.coming-soon {
    flex: 0 0 auto;

    margin-left: auto;

    padding: 7px 10px;

    border-radius: 999px;

    background: white;

    color: var(--text-soft);

    font-size: 0.65rem;
    font-weight: 850;
}


/* ==========================================================================
   Notice
   ========================================================================== */

.event-form-notice {
    padding: 17px 18px;

    border: 1px solid rgba(244, 165, 28, 0.14);
    border-radius: 15px;

    background: rgba(244, 165, 28, 0.07);

    color: #7b5a19;

    font-size: 0.82rem;
    line-height: 1.55;
}


/* ==========================================================================
   Alerts
   ========================================================================== */

.event-create-container .form-alert {
    margin-bottom: 22px;

    padding: 17px 19px;

    border-radius: 16px;

    font-size: 0.82rem;
    line-height: 1.5;
}

.event-create-container .form-alert strong {
    display: block;

    margin-bottom: 7px;
}

.event-create-container .form-alert ul {
    margin: 0;
    padding-left: 19px;
}

.event-create-container .form-alert li + li {
    margin-top: 4px;
}

.event-create-container .form-alert-error {
    border: 1px solid rgba(194, 55, 55, 0.16);

    background: #fff2f1;

    color: #9f302b;
}


/* ==========================================================================
   Footer actions
   ========================================================================== */

.event-form-actions {
    position: sticky;

    bottom: 16px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin-top: 8px;
    padding: 15px;

    border: 1px solid rgba(21, 21, 21, 0.07);
    border-radius: 20px;

    background: rgba(255, 250, 242, 0.88);

    box-shadow: 0 14px 40px rgba(30, 24, 16, 0.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.event-form-actions button {
    border: 0;

    cursor: pointer;
}


/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes eventSectionEnter {

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

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

}

.event-form-section {
    animation: eventSectionEnter 0.4s ease both;
}

.event-form-section:nth-of-type(2) {
    animation-delay: 0.03s;
}

.event-form-section:nth-of-type(3) {
    animation-delay: 0.06s;
}

.event-form-section:nth-of-type(4) {
    animation-delay: 0.09s;
}

.event-form-section:nth-of-type(5) {
    animation-delay: 0.12s;
}

.event-form-section:nth-of-type(6) {
    animation-delay: 0.15s;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {

    .event-type-grid,
    .theme-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-form-section {
        padding: 28px;
    }

}


/* ==========================================================================
   Small tablet
   ========================================================================== */

@media (max-width: 700px) {

    .event-create-header h1 {
        font-size: 2.75rem;
    }

    .event-form-section {
        padding: 24px 20px;
    }

    .event-section-number {
        top: 22px;
        right: 21px;
    }

    .event-fields-grid {
        grid-template-columns: 1fr;
    }

    .event-field-full {
        grid-column: auto;
    }

    .event-media-placeholder {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .coming-soon {
        margin-left: 0;
    }

    .event-form-actions {
        flex-direction: column-reverse;
    }

    .event-form-actions .btn {
        width: 100%;
    }

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 520px) {

    .event-create-container {
        width: min(100% - 20px, 1040px);
    }

    .event-create-header {
        margin-bottom: 25px;
    }

    .event-create-header h1 {
        font-size: 2.35rem;
    }

    .event-create-header > p {
        font-size: 0.9rem;
    }

    .event-type-grid,
    .theme-selection-grid {
        grid-template-columns: 1fr;
    }

    .event-type-card-inner {
        min-height: 95px;

        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .event-section-heading {
        padding-right: 28px;
    }

    .event-section-heading h2 {
        font-size: 1.4rem;
    }

    .event-form-actions {
        bottom: 8px;

        padding: 10px;

        border-radius: 16px;
    }

}

/* ==========================================================================
   Media uploader
   ========================================================================== */

.event-media-upload {
    position: relative;

    display: block;

    min-height: 240px;

    overflow: hidden;

    border: 2px dashed #ddd4c7;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(248,243,234,.65)
        );

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.event-media-upload:hover {
    border-color: var(--accent);

    background:
        rgba(244,165,28,.04);
}

.event-media-upload > input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.event-media-empty {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 30px;

    text-align: center;
}

.event-media-upload-icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    margin-bottom: 6px;

    border-radius: 20px;

    background:
        rgba(244,165,28,.12);

    font-size: 1.9rem;
}

.event-media-empty strong {
    font-size: 1rem;
}

.event-media-empty span {
    color: var(--text-soft);

    font-size: .75rem;
}


.event-media-preview {
    position: relative;

    background: #111;
}

.event-media-preview img,
.event-media-preview video {
    width: 100%;
    max-height: 450px;

    display: block;

    object-fit: contain;
}

.event-media-preview-info {
    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 14px;

    padding: 11px 14px;

    border-radius: 13px;

    background:
        rgba(17,17,17,.78);

    color: white;

    backdrop-filter: blur(10px);
}

.event-media-preview-info strong,
.event-media-preview-info span {
    display: block;
}

.event-media-preview-info strong {
    overflow: hidden;

    font-size: .8rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-media-preview-info span {
    margin-top: 3px;

    color: rgba(255,255,255,.7);

    font-size: .68rem;
}


.event-media-remove {
    margin-top: 10px;

    padding: 8px 12px;

    border: 0;
    border-radius: 999px;

    background: #fff0ef;

    color: #a13c35;

    cursor: pointer;

    font-size: .74rem;
    font-weight: 800;
}

/* ==========================================================================
   Theme picker with live preview
   ========================================================================== */

.theme-picker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);

    gap: 28px;

    align-items: start;
}


.theme-live-preview {
    position: sticky;

    top: 100px;

    padding: 20px;

    border: 1px solid rgba(21,21,21,.07);
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(248,243,234,.78)
        );

    box-shadow:
        0 15px 40px rgba(30,24,16,.06);
}


.theme-live-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.theme-live-preview-header strong {
    display: block;

    margin-top: 3px;

    font-size: .95rem;
}


.theme-preview-label {
    color: var(--text-soft);

    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .05em;

    text-transform: uppercase;
}


.theme-preview-badge {
    padding: 6px 9px;

    border-radius: 999px;

    background: #edf7ef;

    color: #2f7d49;

    font-size: .62rem;
    font-weight: 900;
}


.theme-preview-badge.is-premium {
    background: #191919;

    color: white;
}


/* Phone */

.theme-phone {
    max-width: 400px;

    margin: 0 auto;

    padding: 8px;

    border-radius: 34px;

    background: #171717;

    box-shadow:
        0 25px 55px rgba(17,17,17,.22);
}


.theme-phone-top {
    position: relative;

    height: 24px;

    background: #171717;
}


.theme-phone-top span {
    position: absolute;

    left: 50%;
    top: 5px;

    width: 80px;
    height: 8px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #343434;
}


.theme-phone-screen {
    position: relative;

    min-height:720px;

    overflow: hidden;

    border-radius: 27px;

    background: white;
}


/* Empty preview */

.theme-preview-empty {
    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 30px;

    text-align: center;

    color: var(--text-soft);
}


.theme-preview-empty > div {
    font-size: 2.4rem;
}


.theme-preview-empty strong {
    color: var(--text);

    font-size: .9rem;
}


.theme-preview-empty span {
    max-width: 210px;

    font-size: .72rem;
    line-height: 1.5;
}


/* Generic image preview */

#themePreviewImage {
    width: 100%;
    min-height: 520px;
    height: 100%;

    object-fit: cover;
}


/* Baby Gift mini-render */

.theme-preview-baby-gift {
    min-height: 520px;

    padding: 45px 20px 30px;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(244,165,28,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 95%,
            rgba(247,217,217,.62),
            transparent 35%
        ),
        #fffaf1;

    text-align: center;
}


.theme-preview-baby-gift small {
    color: #8c5d06;

    font-weight: 900;
}


.theme-preview-baby-gift h3 {
    margin: 18px 0;

    font-size: 1.8rem;
    line-height: 1.05;

    letter-spacing: -.04em;
}


.theme-preview-smile {
    width: 70px;
    height: 25px;

    margin: 0 auto 25px;

    border-bottom:
        5px solid var(--accent);

    border-radius:
        0 0 70px 70px;
}


.theme-preview-gift {
    margin: 35px 0 18px;

    font-size: 4.8rem;

    animation:
        previewGiftFloat
        2.2s ease-in-out
        infinite;
}


@keyframes previewGiftFloat {

    50% {
        transform: translateY(-7px);
    }

}


.theme-preview-baby-gift p {
    color: var(--text-soft);

    font-size: .78rem;
}


.theme-preview-baby-gift button {
    margin-top: 20px;
    padding: 11px 17px;

    border: 0;
    border-radius: 999px;

    background: var(--accent);

    color: var(--text);

    font-size: .72rem;
    font-weight: 900;
}


.theme-preview-help {
    margin: 16px 2px 0;

    color: var(--text-soft);

    font-size: .69rem;
    line-height: 1.5;
}


@media (max-width: 900px) {

    .theme-picker-layout {
        grid-template-columns: 1fr;
    }

    .theme-live-preview {
        position: static;
    }

    .theme-phone {
        max-width: 300px;
    }

}
.theme-preview-intro-message,
.theme-preview-reveal-message {
    margin: 8px 0 14px;

    color: var(--text-soft);

    font-size: .72rem;
    line-height: 1.45;
}

.theme-preview-reveal-title {
    display: block;

    margin-top: 14px;

    font-size: 1rem;
    line-height: 1.25;
}

.theme-preview-live-media {
    width: calc(100% - 36px);

    margin: 15px auto;

    overflow: hidden;

    border: 6px solid white;
    border-bottom-width: 16px;

    background: white;

    box-shadow:
        0 10px 25px rgba(17,24,39,.12);

    transform: rotate(-1deg);
}

.theme-preview-live-media img,
.theme-preview-live-media video {
    width: 100%;
    max-height: 165px;

    display: block;

    object-fit: cover;
}

.theme-preview-settings {
    display: flex;
    justify-content: center;

    gap: 8px;

    margin-top: 18px;
}

.theme-preview-settings span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 6px 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.72);

    font-size: .64rem;
}

/* ==========================================================================
   Preview states
   ========================================================================== */

.theme-preview-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-bottom: 16px;
    padding: 5px;

    border-radius: 999px;

    background: var(--surface-soft);
}

.theme-preview-tab {
    min-height: 36px;

    border: 0;
    border-radius: 999px;

    background: transparent;

    color: var(--text-soft);

    cursor: pointer;

    font-size: .7rem;
    font-weight: 850;

    transition:
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.theme-preview-tab.active {
    background: white;

    color: var(--text);

    box-shadow:
        0 5px 15px rgba(30,24,16,.08);
}


.theme-preview-state {
    min-height: 520px;

    padding: 42px 20px 28px;

    text-align: center;
}

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


.theme-preview-state[data-preview-panel="after"] {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(244,165,28,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(247,217,217,.50),
            transparent 35%
        ),
        #fffaf1;
}


.theme-preview-reveal-title {
    display: block;

    margin: 22px 0 15px;

    font-size: 1.25rem;
    line-height: 1.2;

    letter-spacing: -.025em;
}
.event-current-media {
    margin-bottom: 20px;
    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface-soft);
}

.event-current-media img,
.event-current-media video {
    width: min(100%, 450px);
    max-height: 330px;

    display: block;

    margin-top: 10px;

    border-radius: 14px;

    object-fit: contain;

    background: #111;
}

.event-current-media p {
    margin: 10px 0 0;

    color: var(--text-soft);

    font-size: .75rem;
}
.event-status-readonly {
    min-height: 52px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border: 1px solid #ddd7cd;
    border-radius: 13px;

    background: var(--surface-soft);

    color: var(--text);

    font-size: .86rem;
    font-weight: 800;
}

.event-edit-draft-notice {
    margin-bottom: 22px;
}

.event-current-media {
    margin: 22px 0;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface-soft);
}

.event-current-media img,
.event-current-media video {
    width: min(100%, 460px);
    max-height: 350px;

    display: block;

    margin-top: 12px;

    border-radius: 14px;

    object-fit: contain;

    background: #111;
}

.event-current-media p {
    margin: 11px 0 0;

    color: var(--text-soft);

    font-size: .75rem;
    line-height: 1.5;
}
.event-status-readonly {
    min-height: 52px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border: 1px solid #ddd7cd;
    border-radius: 13px;

    background: var(--surface-soft);

    color: var(--text);

    font-size: .86rem;
    font-weight: 800;
}

.event-create-draft-notice {
    margin-bottom: 22px;
}
/* ========================================================================== 
   Éditeur global avec aperçu permanent
   ========================================================================== */

.event-create-container {
    max-width: 1440px;
}

.event-form {
    display: block;
}

.event-editor-layout {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 28px;
    align-items: start;
}

.event-editor-form {
    display: grid;
    min-width: 0;
    gap: 22px;
}

.event-editor-preview-column {
    position: relative;
    min-width: 0;
}

.event-editor-preview-column .theme-live-preview {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.event-editor-preview-column .theme-phone-screen,
.event-editor-preview-column .theme-preview-empty,
.event-editor-preview-column .theme-preview-baby-gift,
.event-editor-preview-column .theme-preview-state {
    min-height: 470px;
}

.event-editor-preview-column #themePreviewImage {
    min-height: 470px;
}

.theme-preview-mobile-open,
.theme-preview-mobile-close {
    display: none;
}

@media (max-width: 1180px) {
    .event-editor-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 20px;
    }

    .event-editor-preview-column .theme-live-preview {
        padding: 16px;
    }

    .event-editor-preview-column .theme-phone-screen,
    .event-editor-preview-column .theme-preview-empty,
    .event-editor-preview-column .theme-preview-baby-gift,
    .event-editor-preview-column .theme-preview-state,
    .event-editor-preview-column #themePreviewImage {
        min-height: 430px;
    }
}

@media (max-width: 900px) {
    .event-editor-layout {
        display: block;
    }

    .event-editor-preview-column {
        position: static;
    }

    .event-editor-preview-column .theme-live-preview {
        position: fixed;
        z-index: 1000;
        inset: 0;
        display: none;
        max-height: none;
        overflow-y: auto;
        padding: 70px 18px 28px;
        border: 0;
        border-radius: 0;
        background: rgba(248, 243, 234, 0.98);
        box-shadow: none;
    }

    .event-editor-preview-column .theme-live-preview.is-mobile-open {
        display: block;
        animation: themePreviewMobileEnter 0.22s ease both;
    }

    .theme-preview-mobile-open {
        position: fixed;
        z-index: 45;
        right: 18px;
        bottom: 90px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 17px;
        border: 0;
        border-radius: 999px;
        background: #171717;
        color: #fff;
        box-shadow: 0 14px 32px rgba(17, 17, 17, 0.24);
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 900;
    }

    .theme-preview-mobile-close {
        position: fixed;
        z-index: 1010;
        top: 16px;
        right: 16px;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #171717;
        color: #fff;
        box-shadow: 0 10px 25px rgba(17, 17, 17, 0.2);
        cursor: pointer;
        font-size: 1rem;
    }

    body.preview-mobile-open {
        overflow: hidden;
    }

    .event-editor-preview-column .theme-live-preview-header,
    .event-editor-preview-column .theme-preview-tabs,
    .event-editor-preview-column .theme-phone,
    .event-editor-preview-column .theme-preview-help {
        width: min(100%, 360px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 520px) {
    .theme-preview-mobile-open {
        right: 12px;
        bottom: 82px;
        min-height: 45px;
        padding: 0 14px;
    }

    .event-editor-preview-column .theme-live-preview {
        padding-right: 12px;
        padding-left: 12px;
    }

    .event-editor-preview-column .theme-phone {
        max-width: 300px;
    }
}

@keyframes themePreviewMobileEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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


/* ==========================================================================\n   Aperçu réel du template dans le téléphone\n   ========================================================================== */
.theme-preview-frame {
    width: 100%;
    height: 520px;
    display: block;
    border: 0;
    background: #fff;
}
.theme-preview-frame[hidden] { display: none !important; }
.event-editor-preview-column .theme-preview-frame { height: 470px; }
@media (max-width: 900px) {
    .theme-preview-frame,
    .event-editor-preview-column .theme-preview-frame { height: min(70vh, 620px); }
}

/* ==========================================================================
   CORRECTIONS — thèmes en ligne + aperçu sticky sur ordinateur
   ========================================================================== */

/*
 * L'aperçu principal se trouve maintenant dans la colonne droite globale.
 * La grille interne de l'étape 2 ne doit donc plus réserver une colonne vide.
 */
.theme-picker-layout {
    display: block;
    width: 100%;
}

/*
 * Cartes de thèmes disposées en ligne, avec une largeur lisible.
 * Elles passent automatiquement à la ligne lorsque le nombre de thèmes augmente.
 */
.theme-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 190px));
    justify-content: start;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

.theme-selection-card {
    min-width: 0;
}

.theme-selection-inner {
    height: 100%;
}

.theme-selection-preview {
    aspect-ratio: 3 / 2;
    min-height: 112px;
}

.theme-selection-content {
    min-height: 58px;
}

/*
 * Le sticky est porté par toute la colonne.
 * Cela permet à l'aperçu de suivre le défilement sur toute la hauteur du formulaire.
 */
@media (min-width: 901px) {
    .event-editor-preview-column {
        position: sticky;
        top: 92px;
        align-self: start;
        height: fit-content;
    }

    .event-editor-preview-column .theme-live-preview {
        position: relative;
        top: auto;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/*
 * Sur écran intermédiaire, les cartes restent suffisamment larges
 * au lieu d'être compressées.
 */
@media (min-width: 901px) and (max-width: 1180px) {
    .theme-selection-grid {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    }
}

/*
 * Tablette : deux cartes par ligne.
 */
@media (max-width: 900px) {
    .theme-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Mobile : défilement horizontal sur une seule ligne.
 * On garde ainsi les aperçus assez grands sans allonger la page.
 */
@media (max-width: 520px) {
    .theme-selection-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .theme-selection-card {
        min-width: 0;
        width: 100%;
    }

    .theme-selection-preview {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .theme-selection-content {
        min-width: 0;
        padding: 11px 10px 12px;
        gap: 6px;
    }

    .theme-selection-content strong {
        min-width: 0;
        font-size: .76rem;
    }

    .premium-badge,
    .free-badge {
        min-height: 21px;
        padding-inline: 6px;
        font-size: .56rem;
    }
}

@media (max-width: 360px) {
    .theme-selection-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SURPRIA — Assistant de création V2
   ========================================================================== */

.event-wizard {
    display: grid;
    gap: 22px;
}

.event-wizard-progress {
    position: sticky;
    top: 82px;
    z-index: 35;

    padding: 8px;

    border: 1px solid rgba(21, 21, 21, .07);
    border-radius: 20px;

    background: rgba(255, 250, 242, .94);

    box-shadow: 0 12px 32px rgba(30, 24, 16, .07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.event-wizard-progress ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.event-wizard-progress button {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 11px;

    border: 0;
    border-radius: 14px;

    background: transparent;
    color: var(--text-soft);

    cursor: pointer;

    text-align: left;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.event-wizard-progress button:hover {
    transform: translateY(-1px);

    background: rgba(255, 255, 255, .7);
    color: var(--text);
}

.event-wizard-progress button.is-active {
    background: #171717;
    color: white;
}

.event-wizard-progress button.is-complete {
    color: #287847;
}

.event-wizard-progress-number {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--surface-soft);

    color: var(--text);

    font-size: .72rem;
    font-weight: 950;
}

.event-wizard-progress button.is-active
.event-wizard-progress-number {
    background: var(--accent);
}

.event-wizard-progress button.is-complete
.event-wizard-progress-number {
    background: #e8f7ed;
    color: #287847;
}

.event-wizard-progress-copy {
    min-width: 0;
}

.event-wizard-progress-copy strong,
.event-wizard-progress-copy small {
    display: block;
}

.event-wizard-progress-copy strong {
    overflow: hidden;

    font-size: .73rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-wizard-progress-copy small {
    margin-top: 3px;

    font-size: .59rem;

    opacity: .7;
}

.event-wizard-panels {
    min-width: 0;
}

.event-wizard-panel {
    display: grid;

    gap: 18px;
}

.event-wizard-panel[hidden] {
    display: none !important;
}

.event-wizard-panel-heading {
    padding: 4px 4px 2px;
}

.event-wizard-panel-heading span {
    display: block;

    margin-bottom: 6px;

    color: #9a690c;

    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;

    text-transform: uppercase;
}

.event-wizard-panel-heading h2 {
    margin: 0;

    font-size: clamp(1.65rem, 3vw, 2.15rem);
    letter-spacing: -.04em;
}

.event-wizard-panel-heading p {
    max-width: 680px;

    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: .86rem;
    line-height: 1.55;
}

.event-wizard-original-section {
    animation: eventWizardPanelEnter .28s ease both;
}

.event-wizard-original-section
.event-section-heading {
    margin-bottom: 22px;
}

.event-wizard-original-section
.event-section-kicker,
.event-wizard-original-section
.event-section-heading > div > p {
    display: none;
}

.event-wizard-original-section
.event-section-heading h2 {
    font-size: 1.18rem;
}

.event-wizard-actions {
    position: sticky;

    bottom: 14px;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    padding: 13px;

    border: 1px solid rgba(21, 21, 21, .07);
    border-radius: 18px;

    background: rgba(255, 250, 242, .94);

    box-shadow: 0 14px 38px rgba(30, 24, 16, .1);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.event-wizard-actions > a {
    margin-right: auto;
}

.event-inline-source-field {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}

.event-inline-editor-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 14px;

    padding: 16px;

    border: 1px solid rgba(89, 92, 255, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(89, 92, 255, .06),
            rgba(244, 165, 28, .06)
        );
}

.event-inline-editor-guide-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: white;

    font-size: 1.25rem;

    box-shadow: 0 7px 20px rgba(30, 24, 16, .06);
}

.event-inline-editor-guide strong {
    display: block;

    margin-bottom: 3px;
}

.event-inline-editor-guide p {
    margin: 0;

    color: var(--text-soft);

    font-size: .76rem;
    line-height: 1.45;
}

.event-inline-save-status {
    min-height: 30px;

    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .8);
    color: var(--text-soft);

    font-size: .64rem;
    font-weight: 850;

    white-space: nowrap;
}

.event-inline-save-status[data-state="saving"] {
    background: #fff6da;
    color: #8a6812;
}

.event-inline-save-status[data-state="saved"] {
    background: #e8f7ed;
    color: #287847;
}

.event-wizard-has-error input,
.event-wizard-has-error select,
.event-wizard-has-error textarea,
.event-wizard-has-error .event-type-card-inner,
.event-wizard-has-error .theme-selection-inner,
.event-wizard-has-error.event-inline-editor-guide {
    border-color: #c94a44 !important;

    box-shadow:
        0 0 0 3px rgba(201, 74, 68, .09) !important;
}

.event-wizard-field-error {
    grid-column: 1 / -1;

    margin: 9px 0 0;

    color: #a53939;

    font-size: .72rem;
    font-weight: 800;
}

.theme-preview-editable {
    position: relative;

    outline: 0;

    border-radius: .2em;

    cursor: text;

    transition:
        background .16s ease,
        box-shadow .16s ease;
}

.theme-preview-editable:hover {
    background: rgba(255, 255, 255, .55);

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, .3);
}

.theme-preview-editable:focus {
    background: rgba(255, 255, 255, .82);

    box-shadow:
        0 0 0 4px rgba(244, 165, 28, .28);
}

.theme-preview-editable[data-edit-empty="true"]::before {
    content: attr(data-edit-placeholder);

    color: currentColor;

    opacity: .48;
}

@keyframes eventWizardPanelEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1050px) {
    .event-wizard-progress-copy small {
        display: none;
    }
}

@media (max-width: 900px) {
    .event-wizard-progress {
        top: 70px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .event-wizard-progress::-webkit-scrollbar {
        display: none;
    }

    .event-wizard-progress ol {
        display: flex;

        min-width: max-content;
    }

    .event-wizard-progress li {
        flex: 0 0 145px;
    }

    .event-wizard-actions {
        bottom: 8px;
    }
}

@media (max-width: 650px) {
    .event-wizard {
        gap: 15px;
    }

    .event-wizard-progress {
        margin-inline: -10px;

        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .event-wizard-panel-heading {
        padding-inline: 0;
    }

    .event-wizard-panel-heading h2 {
        font-size: 1.55rem;
    }

    .event-inline-editor-guide {
        grid-template-columns: auto 1fr;
    }

    .event-inline-save-status {
        grid-column: 1 / -1;

        justify-self: start;
    }

    .event-wizard-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;

        padding: 10px;
    }

    .event-wizard-actions > a {
        display: none;
    }

    .event-wizard-actions .btn {
        width: 100%;
    }

    .event-wizard-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .event-wizard-progress li {
        flex-basis: 128px;
    }

    .event-wizard-progress button {
        min-height: 52px;
    }

    .event-wizard-progress-number {
        width: 28px;
        height: 28px;
    }

    .event-wizard-original-section {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   SURPRIA — Contrôles uniques au-dessus du téléphone
   ========================================================================== */

.theme-preview-player-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 14px;
    padding: 9px;

    border: 1px solid rgba(21, 21, 21, .07);
    border-radius: 16px;

    background: rgba(255, 255, 255, .88);

    box-shadow:
        0 9px 24px rgba(30, 24, 16, .055);
}

.theme-preview-player-control {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 11px;

    border: 1px solid rgba(21, 21, 21, .1);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    cursor: pointer;

    font: inherit;
    font-size: .66rem;
    font-weight: 850;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease;
}

.theme-preview-player-control:hover {
    transform: translateY(-1px);

    border-color: rgba(244, 165, 28, .45);
}

.theme-preview-player-control.is-active {
    border-color: var(--accent);

    background: #fff7df;

    box-shadow:
        0 0 0 3px rgba(244, 165, 28, .09);
}

.theme-preview-player-control.is-primary {
    border-color: transparent;

    background: #171717;
    color: #fff;
}

.theme-preview-player-separator {
    width: 1px;
    height: 24px;

    margin-inline: 2px;

    background: rgba(21, 21, 21, .1);
}

.theme-preview-tabs {
    display: none !important;
}

@media (max-width: 520px) {
    .theme-preview-player-bar {
        gap: 5px;

        padding: 7px;
    }

    .theme-preview-player-control {
        min-height: 34px;

        padding-inline: 9px;

        font-size: .62rem;
    }

    .theme-preview-player-separator {
        display: none;
    }
}

/* ==========================================================================
   SURPRIA — Correctif fonctionnel wizard 4 étapes
   ========================================================================== */

.event-hidden-fields {
    display: none !important;
}

.event-wizard-panel[data-wizard-step="3"] {
    min-height: 360px;
}

.event-wizard-panel[data-wizard-step="3"]
.event-visual-editor-guide {
    align-self: start;
}

.event-visual-editor-guide {
    display: grid;
    gap: 18px;

    padding: 24px;

    border: 1px solid rgba(89, 92, 255, .13);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(244, 165, 28, .11),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(248, 247, 255, .92)
        );
}

.event-visual-editor-copy h3 {
    margin: 0;

    font-size: 1.55rem;
    letter-spacing: -.035em;
}

.event-visual-editor-copy p {
    margin: 9px 0 0;

    color: var(--text-soft);

    font-size: .82rem;
    line-height: 1.58;
}

.event-visual-editor-kicker {
    display: block;

    margin-bottom: 8px;

    color: #835f10;

    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.event-visual-editor-tips {
    display: grid;
    gap: 8px;

    padding: 14px;

    border-radius: 16px;

    background: rgba(21, 21, 21, .035);

    color: var(--text-soft);

    font-size: .72rem;
    font-weight: 700;
}

.event-visual-editor-tips span::before {
    content: "✓";

    margin-right: 8px;

    color: #2c8a50;

    font-weight: 950;
}

.event-form.is-visual-editor-step
.event-editor-layout {
    grid-template-columns:
        minmax(300px, .78fr)
        minmax(440px, 1.22fr);
}

.event-form.is-visual-editor-step
.theme-phone {
    max-width: 440px;
}

.event-form.is-visual-editor-step
.theme-phone-screen {
    min-height: 620px;
}

.event-form.is-visual-editor-step
.theme-preview-frame {
    height: 620px;
}

@media (max-width: 900px) {
    .event-form.is-visual-editor-step
    .event-editor-layout {
        display: block;
    }

    .event-wizard-panel[data-wizard-step="3"] {
        min-height: auto;
    }
}


/* ==========================================================================
   SURPRIA — Event Create V3
   ========================================================================== */

/* Deux lignes distinctes pour les contrôles du téléphone */
.theme-preview-player-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.theme-preview-mode-row,
.theme-preview-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.theme-preview-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.theme-preview-mode-row .theme-preview-player-control {
    width: 100%;
}

.theme-preview-actions-row {
    padding-top: 8px;
    border-top: 1px solid rgba(21, 21, 21, .08);
}

/* Zoom du média */
.event-media-zoom {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid rgba(21, 21, 21, .08);
    border-radius: 16px;
    background: #f8f6f2;
}

.event-media-zoom-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.event-media-zoom-heading label {
    margin: 0;
}

.event-media-zoom-heading output {
    min-width: 62px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff;
    font-size: .68rem;
    font-weight: 900;
    text-align: center;
}

.event-media-zoom input[type="range"] {
    width: 100%;
    height: auto;
    padding: 0;
    accent-color: var(--accent);
}

.event-media-preview {
    overflow: hidden;
}

.event-media-preview img {
    transform-origin: center center;
    transition: transform .18s ease;
}

/* L'étape finale combine média et éditeur visuel */
.event-wizard-panel[data-wizard-step="3"] {
    min-height: 360px;
}

.event-final-media-section {
    margin-bottom: 0;
}

.event-form.is-visual-editor-step .event-editor-layout {
    grid-template-columns:
        minmax(300px, .78fr)
        minmax(440px, 1.22fr);
}

@media (max-width: 520px) {
    .theme-preview-actions-row {
        flex-wrap: wrap;
    }

    .theme-preview-actions-row
    .theme-preview-player-control {
        flex: 1 1 46px;
    }
}


/* ==========================================================================
   SURPRIA — cadrage directement dans l’aperçu mobile
   ========================================================================== */

.theme-preview-framing-panel[hidden] {
    display: none !important;
}

.theme-preview-framing-panel {
    width: min(100%, 390px);
    margin: 14px auto 0;
    overflow: hidden;
    border: 1px solid rgba(21, 21, 21, .09);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 36px rgba(21,21,21,.11);
}

.theme-preview-framing-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 15px;
}

.theme-preview-framing-header span,
.theme-preview-framing-header strong {
    display: block;
}

.theme-preview-framing-header span {
    color: var(--accent-dark, #94640b);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.theme-preview-framing-header strong {
    margin-top: 3px;
    font-size: .74rem;
}

.theme-preview-framing-collapse {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f2f1ee;
    color: #171717;
    font: inherit;
    font-weight: 900;
}

.theme-preview-framing-body {
    display: grid;
    gap: 13px;
    padding: 13px 15px 15px;
    border-top: 1px solid rgba(21,21,21,.07);
}

.theme-preview-framing-body[hidden] {
    display: none !important;
}

.theme-preview-framing-fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.theme-preview-framing-fit button {
    min-height: 39px;
    border: 1px solid rgba(21,21,21,.1);
    border-radius: 11px;
    background: #fff;
    color: #171717;
    font: inherit;
    font-size: .64rem;
    font-weight: 850;
}

.theme-preview-framing-fit button.is-active {
    border-color: var(--accent, #f4a51c);
    background: #fff7df;
    box-shadow: 0 0 0 3px rgba(244,165,28,.08);
}

.theme-preview-framing-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.theme-preview-framing-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.theme-preview-framing-field strong,
.theme-preview-framing-field output {
    font-size: .65rem;
}

.theme-preview-framing-field input[type="range"] {
    width: 100%;
    height: auto;
    padding: 0;
    accent-color: var(--accent, #f4a51c);
}

.theme-preview-framing-field input:disabled {
    opacity: .4;
}

.theme-preview-framing-reset {
    min-height: 40px;
    border: 0;
    border-radius: 11px;
    background: #f2f1ee;
    color: #171717;
    font: inherit;
    font-size: .66rem;
    font-weight: 850;
}

/* Les contrôles du formulaire restent utiles sur desktop. */
@media (min-width: 901px) {
    .theme-preview-framing-panel {
        display: none !important;
    }
}

/* Sur mobile, le cadrage se fait dans l’aperçu : on masque le doublon. */
@media (max-width: 900px) {
    .event-form
    .event-media-framing {
        display: none !important;
    }

    .theme-live-preview.is-mobile-open {
        overflow-y: auto !important;
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }

    .theme-live-preview.is-mobile-open
    .theme-preview-framing-panel {
        display: block;
    }

    .theme-live-preview.is-mobile-open
    .theme-preview-help {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   SURPRIA — bouton aperçu étape 4 restauré
   ========================================================================== */

.event-step4-preview-button {
    width: 100%;
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

@media (min-width: 901px) {
    .event-step4-preview-button {
        display: none !important;
    }
}

/* ==========================================================================\n   SURPRIA — aperçu : édition manuelle + lecture complète\n   ========================================================================== */
.theme-preview-editor-controls {
    display: grid;
    grid-template-columns: auto minmax(74px, 1fr) auto auto;
    align-items: center;
    gap: 7px;
}

.theme-preview-editor-status {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--surface-soft, #f6f2eb);
    color: var(--text-soft, #777);
    font-size: .65rem;
    font-weight: 850;
    white-space: nowrap;
}

.theme-preview-editor-controls .is-primary {
    min-width: 135px;
}

@media (max-width: 520px) {
    .theme-preview-editor-controls {
        grid-template-columns: 1fr 1fr;
    }

    .theme-preview-editor-status {
        order: -1;
        grid-column: 1 / -1;
    }

    .theme-preview-editor-controls .is-primary {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

/* ==========================================================================\n   SURPRIA — Popup de progression d'upload V6\n   ========================================================================== */
body.surpria-upload-open {
    overflow: hidden;
}

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

.surpria-upload-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.surpria-upload-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .58);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.surpria-upload-card {
    position: relative;
    width: min(100%, 480px);
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 26px;
    background: #fffaf2;
    box-shadow: 0 28px 90px rgba(17, 17, 17, .28);
    animation: surpriaUploadEnter .2s ease both;
}

.surpria-upload-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(244, 165, 28, .13);
    font-size: 1.45rem;
}

.surpria-upload-kicker {
    display: block;
    margin-bottom: 6px;
    color: #96650d;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .09em;
}

.surpria-upload-copy h2 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -.035em;
}

.surpria-upload-copy p {
    margin: 8px 0 0;
    color: var(--text-soft, #777);
    font-size: .82rem;
    line-height: 1.5;
}

.surpria-upload-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid rgba(21, 21, 21, .07);
    border-radius: 15px;
    background: rgba(255, 255, 255, .85);
}

.surpria-upload-file-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f4f0e8;
}

.surpria-upload-file-copy {
    min-width: 0;
}

.surpria-upload-file-copy strong,
.surpria-upload-file-copy small {
    display: block;
}

.surpria-upload-file-copy strong {
    overflow: hidden;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surpria-upload-file-copy small {
    margin-top: 3px;
    color: var(--text-soft, #777);
    font-size: .65rem;
}

.surpria-upload-progress {
    margin-top: 20px;
}

.surpria-upload-progress-track {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8e3db;
}

.surpria-upload-progress-track span {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--accent, #f4a51c);
    transition: width .12s linear;
}

.surpria-upload-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.surpria-upload-progress-meta strong {
    font-size: .78rem;
}

.surpria-upload-progress-meta span {
    color: var(--text-soft, #777);
    font-size: .68rem;
}

.surpria-upload-processing {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    padding: 11px 12px;
    border-radius: 13px;
    background: #edf7ef;
    color: #287847;
    font-size: .72rem;
    font-weight: 850;
}

.surpria-upload-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: surpriaUploadSpin .7s linear infinite;
}

.surpria-upload-warning {
    margin: 17px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(21, 21, 21, .07);
    color: #8a8176;
    font-size: .68rem;
    line-height: 1.45;
}

.surpria-upload-modal.is-error .surpria-upload-icon {
    background: #fff0ef;
}

.surpria-upload-modal.is-error .surpria-upload-progress-track span {
    background: #c94a44;
}

@keyframes surpriaUploadEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes surpriaUploadSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .surpria-upload-modal {
        padding: 12px;
    }

    .surpria-upload-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .surpria-upload-copy h2 {
        font-size: 1.25rem;
    }

    .surpria-upload-progress-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* P1.3B — thème présélectionné depuis une fiche publique */
.event-theme-preselected-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(244,165,28,.18);
    border-radius: 16px;
    background: #fff8ea;
}
.event-theme-preselected-notice > span {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(30,24,16,.06);
}
.event-theme-preselected-notice strong,
.event-theme-preselected-notice small {
    display: block;
}
.event-theme-preselected-notice strong {
    font-size: .82rem;
}
.event-theme-preselected-notice small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: .7rem;
    line-height: 1.4;
}

/* ==========================================================================
   SURPRIA — Étape 2 : sélection de thème orientée aperçu
   ========================================================================== */
.event-theme-section .event-section-heading {
    margin-bottom: 20px;
}

.theme-selection-mobile-hint {
    display: none;
    margin: -2px 0 14px;
    color: var(--text-soft);
    font-size: .76rem;
    line-height: 1.5;
}

.theme-selection-preview img {
    transition: transform .28s ease;
}

.theme-selection-card:hover .theme-selection-preview img {
    transform: scale(1.025);
}

.theme-selection-tier {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: calc(100% - 20px);
    padding: 0 9px;
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(20, 18, 15, .12);
    font-size: .61rem;
    font-weight: 900;
    white-space: nowrap;
}

.theme-selection-tier.is-premium {
    background: rgba(24, 24, 24, .94);
    color: #fff;
}

.theme-selection-tier.is-free {
    background: rgba(255, 255, 255, .94);
    color: #277343;
}

.event-theme-section .theme-selection-content {
    min-height: 64px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
}

.event-theme-section .theme-selection-content strong {
    max-width: 100%;
    font-size: .88rem;
}

.event-theme-section .theme-selection-content small {
    color: var(--text-soft);
    font-size: .64rem;
    font-weight: 700;
}

.event-theme-section .theme-selection-card input:checked + .theme-selection-inner {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(244,165,28,.11), 0 12px 28px rgba(40,32,20,.1);
}

.event-theme-section .theme-selection-card input:checked + .theme-selection-inner .theme-selection-content small {
    color: #8a5b0d;
}

.event-theme-preview-action {
    display: none;
}

@media (max-width: 900px) {
    .theme-selection-mobile-hint {
        display: block;
    }

    .event-theme-preview-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
        padding: 12px;
        border: 1px solid rgba(21,21,21,.07);
        border-radius: 16px;
        background: #fffaf2;
    }

    .event-theme-preview-choice {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .event-theme-preview-choice span {
        color: var(--text-soft);
        font-size: .62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .event-theme-preview-choice strong {
        overflow: hidden;
        font-size: .78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .event-theme-preview-button {
        flex: 0 0 auto;
        min-height: 42px;
        padding-inline: 13px;
        font-size: .72rem;
    }

    .event-theme-preview-button:disabled {
        opacity: .45;
        cursor: not-allowed;
    }
}

@media (max-width: 520px) {
    .event-theme-section .theme-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .event-theme-section .theme-selection-inner {
        border-radius: 16px;
    }

    .event-theme-section .theme-selection-preview {
        aspect-ratio: 4 / 3;
    }

    .theme-selection-tier {
        left: 7px;
        bottom: 7px;
        min-height: 21px;
        padding-inline: 7px;
        font-size: .54rem;
    }

    .event-theme-section .theme-selection-content {
        min-height: 54px;
        padding: 9px 9px 10px;
    }

    .event-theme-section .theme-selection-content strong {
        font-size: .74rem;
    }

    .event-theme-section .theme-selection-content small {
        display: none;
    }

    .event-theme-preview-action {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    .event-theme-preview-button {
        width: 100%;
        justify-content: center;
    }
}


/* Step 2 preview CTA is mobile/tablet only.
   Desktop already has the synchronized preview column visible. */
@media (min-width: 901px) {
    .event-editor-page .event-theme-preview-action {
        display: none !important;
    }
}

/* =========================================================
   STEP 3 — EXPERIENCE UX
========================================================= */
.event-wizard-panel[data-wizard-step="3"] .event-experience-section > .event-section-heading {
    display: none;
}
.event-wizard-panel[data-wizard-step="3"] .event-fields-grid {
    gap: 16px;
}
.event-experience-setting {
    padding: 18px;
    border: 1px solid rgba(22, 24, 35, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
}
.event-experience-setting-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.event-experience-setting-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(108, 92, 231, .08);
    font-size: 19px;
}
.event-experience-setting-heading label {
    display: block;
    margin: 1px 0 4px;
    font-weight: 750;
}
.event-experience-setting-heading .event-field-help {
    display: block;
    margin: 0;
    line-height: 1.45;
}
.event-experience-setting select {
    width: 100%;
    min-height: 48px;
}
@media (max-width: 700px) {
    .event-wizard-panel[data-wizard-step="3"] .event-fields-grid {
        grid-template-columns: 1fr;
    }
    .event-experience-setting {
        padding: 15px;
        border-radius: 16px;
    }
}

/* =========================================================
   STEP 3 — PERSONALIZATION UX
========================================================= */
.event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
    margin-bottom: 16px;
}
.event-wizard-panel[data-wizard-step="3"] .event-final-media-section > .event-section-heading {
    display: none;
}
.event-visual-editor-guide {
    padding: 18px;
    border: 1px solid rgba(22, 24, 35, .09);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
}
.event-visual-editor-copy h3 {
    margin-bottom: 6px;
}
.event-visual-editor-copy p {
    max-width: 620px;
    margin-bottom: 0;
}
.event-visual-editor-quick-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-top: 16px;
}
.event-visual-editor-quick-steps span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(108,92,231,.055);
    font-size: .9rem;
    line-height: 1.3;
}
.event-visual-editor-quick-steps b {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: rgba(108,92,231,.12);
    font-size: .78rem;
}
.event-inline-save-status {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    font-size: .82rem;
    opacity: .72;
}
/* Desktop already shows the synchronized phone preview permanently. */
@media (min-width: 901px) {
    .event-step4-preview-button {
        display: none !important;
    }
    .event-visual-editor-quick-steps span:nth-child(2) {
        display: none;
    }
    .event-visual-editor-quick-steps {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 900px) {
    .event-step4-preview-button {
        width: 100%;
        margin-top: 16px;
    }
}
@media (max-width: 620px) {
    .event-visual-editor-guide {
        padding: 15px;
        border-radius: 16px;
    }
    .event-visual-editor-quick-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .event-visual-editor-quick-steps span {
        min-height: 44px;
        padding: 9px 10px;
    }
}

/* ==========================================================================
   SURPRIA — Correctif affichage étape 3 desktop (2026-08-27)
   Empêche les aides de personnalisation de se compresser en colonnes étroites.
   ========================================================================== */
@media (min-width: 901px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-guide {
        min-width: 0;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-copy,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-quick-steps {
        min-width: 0;
        width: 100%;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-quick-steps {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-quick-steps span {
        flex: 1 1 190px;
        min-width: 190px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-visual-editor-quick-steps span:nth-child(2) {
        display: none;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"]
    .event-inline-save-status {
        width: fit-content;
        max-width: 100%;
        white-space: nowrap;
    }
}


/* ==========================================================================
   P1 — Étape A : personnalisation simplifiée + réglages avancés repliables
   ========================================================================== */
.event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
    padding: 18px;
    border: 1px solid rgba(22, 24, 35, .09);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
}

.event-wizard-panel[data-wizard-step="3"] .event-visual-editor-guide {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced {
    margin-top: 14px;
    border-top: 1px solid rgba(22,24,35,.08);
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px 4px;
    cursor: pointer;
    list-style: none;
    font-weight: 750;
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary::-webkit-details-marker {
    display: none;
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary::after {
    content: "⌄";
    flex: 0 0 auto;
    font-size: 1.15rem;
    transition: transform .18s ease;
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced[open] > summary::after {
    transform: rotate(180deg);
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary small {
    margin-left: auto;
    font-weight: 500;
    opacity: .62;
}

.event-wizard-panel[data-wizard-step="3"] .event-step4-advanced .event-media-framing {
    margin-top: 12px;
}

.event-wizard-panel[data-wizard-step="3"] .event-inline-save-status {
    margin-top: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(25, 135, 84, .07);
}

@media (max-width: 620px) {
    .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
        padding: 15px;
        border-radius: 16px;
    }

    .event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary {
        align-items: flex-start;
    }

    .event-wizard-panel[data-wizard-step="3"] .event-step4-advanced > summary small {
        display: none;
    }

    .event-wizard-panel[data-wizard-step="3"] .event-step4-preview-button {
        position: sticky;
        bottom: 10px;
        z-index: 4;
    }
}


/* ==========================================================================
   P1 MOBILE PASS — création / édition
   Cible prioritaire : 320–430 px
   ========================================================================== */
@media (max-width: 430px) {
    .event-editor-page {
        min-width: 0;
        overflow-x: clip;
    }

    .event-editor-page .event-form-container,
    .event-editor-page .event-wizard,
    .event-editor-page .event-wizard-panel,
    .event-editor-page .event-form-card {
        min-width: 0;
        max-width: 100%;
    }

    .event-editor-page .event-form-container {
        padding-inline: 12px;
    }

    .event-editor-page .event-editor-heading h1,
    .event-editor-page .event-form-heading h1 {
        overflow-wrap: anywhere;
        font-size: clamp(1.5rem, 8vw, 1.95rem);
        line-height: 1.08;
    }

    .event-editor-page .event-wizard-nav {
        gap: 7px;
        margin-inline: -12px;
        padding-inline: 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .event-editor-page .event-wizard-nav::-webkit-scrollbar {
        display: none;
    }

    .event-editor-page .event-wizard-nav button,
    .event-editor-page .event-wizard-nav a {
        flex: 0 0 auto;
        min-height: 44px;
        scroll-snap-align: start;
    }

    .event-editor-page .event-wizard-panel {
        padding-inline: 0;
    }

    .event-editor-page .event-field,
    .event-editor-page .event-field input,
    .event-editor-page .event-field select,
    .event-editor-page .event-field textarea {
        min-width: 0;
        width: 100%;
    }

    .event-editor-page input,
    .event-editor-page select,
    .event-editor-page textarea {
        font-size: 16px; /* évite le zoom automatique iOS */
    }

    .event-editor-page .event-wizard-actions,
    .event-editor-page .event-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .event-editor-page .event-wizard-actions .btn,
    .event-editor-page .event-form-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .event-editor-page .event-visual-editor-quick-steps span {
        flex-basis: 100% !important;
        min-width: 0 !important;
    }

    .event-editor-page .event-inline-save-status {
        width: 100% !important;
        white-space: normal !important;
        text-align: center;
    }

    .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
        padding: 13px;
    }

    .event-wizard-panel[data-wizard-step="3"] .event-step4-preview-button {
        bottom: calc(8px + env(safe-area-inset-bottom));
        width: 100%;
        min-height: 48px;
        box-shadow: 0 10px 28px rgba(15,15,15,.14);
    }

    .event-editor-page img,
    .event-editor-page video {
        max-width: 100%;
    }
}

@media (max-width: 350px) {
    .event-editor-page .event-form-container {
        padding-inline: 10px;
    }
}

/* P1 — parcours simplifié */
.event-section-number-continuation{opacity:.45}
.event-advanced{border:1px solid rgba(127,127,127,.22);border-radius:16px;padding:0!important;background:rgba(255,255,255,.03)}
.event-advanced>summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700}
.event-advanced>summary::-webkit-details-marker{display:none}
.event-advanced-body{padding:0 18px 18px}
.event-experience-advanced{margin-top:8px}


/* Theme picker — experience-first presentation */
.theme-selection-mobile-hint{margin:0 0 14px;font-size:clamp(1rem,1.5vw,1.15rem);font-weight:800;color:var(--text,#171717)}
.theme-selection-card{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.theme-selection-card:not([hidden]):hover{transform:translateY(-2px)}
.theme-selection-card.is-recommended{box-shadow:0 12px 34px rgba(20,20,20,.08)}
.theme-selection-name-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.theme-selection-recommended{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#171717;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.02em}
.theme-selection-recommended[hidden]{display:none!important}
.theme-selection-experience{display:block;margin-top:5px;line-height:1.4;opacity:.72}
.theme-selection-cta{display:inline-flex;margin-top:8px;font-size:.72rem;font-weight:800;opacity:.9}
.theme-selection-card:has(input:checked) .theme-selection-cta{opacity:1}
@media(max-width:700px){.theme-selection-grid{scroll-snap-type:x mandatory;scroll-padding-inline:4px}.theme-selection-card{scroll-snap-align:start}.theme-selection-content{padding-top:2px}.theme-selection-cta{min-height:30px;align-items:center}}


/* A2 — live animated preview inside theme cards */
.theme-selection-preview{
    position:relative;
    overflow:hidden;
}
.theme-card-live-preview{
    position:absolute;
    inset:0;
    z-index:3;
    width:100%;
    height:100%;
    border:0;
    background:#fff;
    pointer-events:none;
    transform:scale(1.01);
}
.theme-selection-card.is-live-preview .theme-selection-preview > img,
.theme-selection-card.is-live-preview .theme-selection-placeholder{
    opacity:0;
}
.theme-selection-card.is-live-preview .theme-selection-tier{
    z-index:5;
}
.theme-selection-card.is-live-preview .theme-selection-cta::before{
    content:"● ";
    font-size:.6em;
}
@media(prefers-reduced-motion:reduce){
    .theme-card-live-preview{
        display:none!important;
    }
    .theme-selection-card.is-live-preview .theme-selection-preview > img{
        opacity:1;
    }
}


/* A2.1 — 3.7 s preview: readable before/reveal sequence */
.theme-selection-preview{
    min-height:132px;
}
.theme-card-live-preview{
    background:transparent;
}
.theme-card-preview-phase{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:6;
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(17,17,17,.78);
    color:#fff;
    font-size:.62rem;
    font-weight:800;
    line-height:1;
    backdrop-filter:blur(6px);
    pointer-events:none;
}
.theme-card-preview-progress{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:7;
    height:3px;
    background:rgba(255,255,255,.28);
    overflow:hidden;
    pointer-events:none;
}
.theme-card-preview-progress::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
}
.theme-card-preview-progress.is-running::after{
    animation:surpriaThemeCardPreviewProgress 3.7s linear forwards;
}
@keyframes surpriaThemeCardPreviewProgress{
    to{transform:scaleX(1)}
}
.theme-selection-card.is-showing-reveal .theme-card-preview-phase{
    background:rgba(255,255,255,.9);
    color:#171717;
}
@media(max-width:700px){
    .theme-selection-preview{
        min-height:150px;
    }
}
@media(prefers-reduced-motion:reduce){
    .theme-card-preview-progress{
        display:none!important;
    }
}


/* A2.2 — cartes plus grandes pour mieux apprécier les thèmes */
@media (min-width: 901px) {
    .theme-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .theme-selection-card {
        min-width: 0;
        border-radius: 20px;
    }

    .theme-selection-preview {
        min-height: 245px;
        aspect-ratio: 16 / 10;
    }

    .theme-selection-preview > img,
    .theme-card-live-preview {
        width: 100%;
        height: 100%;
    }

    .theme-selection-content {
        padding: 15px 16px 17px;
    }

    .theme-selection-name-row strong {
        font-size: 1.05rem;
    }

    .theme-selection-experience {
        font-size: .82rem;
    }
}

@media (min-width: 1280px) {
    .theme-selection-preview {
        min-height: 270px;
    }
}

@media (max-width: 900px) {
    .theme-selection-card {
        min-width: min(82vw, 340px);
    }

    .theme-selection-preview {
        min-height: 205px;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 520px) {
    .theme-selection-card {
        min-width: min(86vw, 330px);
    }

    .theme-selection-preview {
        min-height: 190px;
    }
}


/* A2.3 — correctif mobile : aucune superposition entre cartes */
@media (max-width: 900px) {
    .theme-selection-grid {
        display: flex !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 4px 4px 12px !important;
        margin-inline: -4px !important;
        scroll-snap-type: x mandatory !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .theme-selection-card {
        flex: 0 0 min(82vw, 340px) !important;
        width: min(82vw, 340px) !important;
        max-width: min(82vw, 340px) !important;
        min-width: min(82vw, 340px) !important;
        scroll-snap-align: start !important;
        position: relative !important;
        z-index: 0 !important;
        transform: none !important;
    }

    .theme-selection-card:hover,
    .theme-selection-card:focus-within {
        transform: none !important;
    }

    .theme-selection-inner {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: inherit;
    }

    .theme-selection-preview {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 205px !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
    }

    .theme-selection-content {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .theme-card-live-preview {
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .theme-card-preview-phase,
    .theme-card-preview-progress,
    .theme-selection-tier {
        max-width: calc(100% - 20px);
    }
}

@media (max-width: 520px) {
    .theme-selection-card {
        flex-basis: min(86vw, 330px) !important;
        width: min(86vw, 330px) !important;
        max-width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
    }

    .theme-selection-preview {
        min-height: 190px !important;
    }
}


/* A2.4 — carrousel mobile type frise : swipe + carte active centrée */
@media (max-width: 900px) {
    .event-theme-section,
    .theme-picker-layout {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .theme-picker-layout {
        display: block !important;
        overflow: hidden !important;
    }

    .theme-selection-grid {
        position: relative;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 14px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        padding: 10px max(7vw, 18px) 18px !important;
        margin: 0 !important;
        scroll-padding-inline: max(7vw, 18px);
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .theme-selection-grid::-webkit-scrollbar {
        display: none;
    }

    .theme-selection-grid::before,
    .theme-selection-grid::after {
        content: "";
        flex: 0 0 max(1px, calc((100% - min(82vw, 340px)) / 2 - 14px));
        width: max(1px, calc((100% - min(82vw, 340px)) / 2 - 14px));
    }

    .theme-selection-card {
        flex: 0 0 min(82vw, 340px) !important;
        width: min(82vw, 340px) !important;
        min-width: min(82vw, 340px) !important;
        max-width: min(82vw, 340px) !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always;
        opacity: .72;
        transition:
            opacity .2s ease,
            transform .2s ease,
            filter .2s ease !important;
    }

    .theme-selection-card.is-carousel-current,
    .theme-selection-card:has(input:checked) {
        opacity: 1;
        transform: scale(1) !important;
        z-index: 2 !important;
    }

    .theme-selection-card:not(.is-carousel-current):not(:has(input:checked)) {
        transform: scale(.965) !important;
    }

    .theme-selection-inner {
        height: 100%;
    }

    .theme-selection-card::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -11px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d7d0c6;
        transform: translateX(-50%);
        box-shadow: 0 0 0 4px #fff;
        z-index: 8;
    }

    .theme-selection-card.is-carousel-current::after,
    .theme-selection-card:has(input:checked)::after {
        background: #171717;
    }
}

@media (max-width: 520px) {
    .theme-selection-grid {
        padding-inline: 7vw !important;
    }

    .theme-selection-grid::before,
    .theme-selection-grid::after {
        flex-basis: max(1px, calc((100% - min(86vw, 330px)) / 2 - 14px));
        width: max(1px, calc((100% - min(86vw, 330px)) / 2 - 14px));
    }

    .theme-selection-card {
        flex-basis: min(86vw, 330px) !important;
        width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
        max-width: min(86vw, 330px) !important;
    }
}


/* A2.5 — mobile : une grande carte + seulement un aperçu de la suivante */
@media (max-width: 900px) {
    .theme-selection-grid {
        gap: 12px !important;
        padding: 10px 0 18px 16px !important;
        scroll-padding-left: 16px !important;
        scroll-padding-right: 0 !important;
    }

    .theme-selection-grid::before,
    .theme-selection-grid::after {
        display: none !important;
        content: none !important;
    }

    .theme-selection-card {
        flex: 0 0 calc(100vw - 54px) !important;
        width: calc(100vw - 54px) !important;
        min-width: calc(100vw - 54px) !important;
        max-width: calc(100vw - 54px) !important;
        scroll-snap-align: start !important;
    }

    .theme-selection-card.is-carousel-current,
    .theme-selection-card:has(input:checked) {
        transform: none !important;
    }

    .theme-selection-card:not(.is-carousel-current):not(:has(input:checked)) {
        transform: none !important;
        opacity: .84;
    }
}

@media (max-width: 520px) {
    .theme-selection-grid {
        padding-left: 14px !important;
        scroll-padding-left: 14px !important;
    }

    .theme-selection-card {
        flex-basis: calc(100vw - 48px) !important;
        width: calc(100vw - 48px) !important;
        min-width: calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
    }
}


/* A2.6 — grande carte mobile + compteur Thème x / xx */
.theme-carousel-counter{
    display:none;
}
@media(max-width:900px){
    .theme-carousel-counter{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        margin:2px 2px 10px;
        color:var(--text-soft,#6f6a63);
        font-size:.72rem;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:.06em;
    }
    .theme-carousel-counter-value{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:58px;
        min-height:28px;
        padding:4px 9px;
        border:1px solid rgba(20,20,20,.09);
        border-radius:999px;
        background:#fff;
        color:var(--text,#171717);
        font-size:.76rem;
        letter-spacing:0;
    }
    .theme-selection-grid{
        padding-right:16px!important;
    }
    .theme-selection-card{
        flex:0 0 calc(100vw - 48px)!important;
        width:calc(100vw - 48px)!important;
        min-width:calc(100vw - 48px)!important;
        max-width:calc(100vw - 48px)!important;
    }
}


/* C — aperçu court commun + freeze final */
.theme-selection-card.is-preview-frozen .theme-card-preview-progress::after{
    transform:scaleX(1)!important;
}
.theme-selection-card.is-preview-frozen .theme-card-preview-phase{
    opacity:.76;
}
.theme-selection-card.is-showing-reveal .theme-card-live-preview{
    filter:saturate(1.03);
}


/* Aperçu mobile immersif — ratio téléphone 9:16 */
@media (max-width: 900px) {
    .theme-selection-preview {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
    }

    .theme-card-live-preview {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

    .theme-card-preview-phase {
        top: 10px !important;
        bottom: auto !important;
        left: 10px !important;
    }

    .theme-card-preview-progress {
        bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    .theme-selection-preview {
        aspect-ratio: 9 / 16 !important;
        min-height: 0 !important;
    }
}


/* Correctif 9:16 "contain" :
   le thème reste réellement en viewport 9:16, mais il est entièrement visible
   dans la carte au lieu d'être affiché plein largeur puis coupé verticalement. */
@media (max-width: 900px) {
    .theme-selection-preview {
        /* Fenêtre de carte plus compacte pour rester visible à l'écran. */
        aspect-ratio: 4 / 5 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fbf8f2 !important;
    }

    .theme-card-live-preview {
        /* 70.3125% = (9/16) / (4/5) :
           iframe interne exactement 9:16, contenu entier, sans crop. */
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        width: 70.3125% !important;
        max-width: 70.3125% !important;
        height: 100% !important;
        transform: translateX(-50%) !important;
        border: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    /* Les overlays appartiennent à la fenêtre 9:16, pas au bord de la carte. */
    .theme-card-preview-phase {
        left: calc(14.84375% + 10px) !important;
        top: 10px !important;
        right: auto !important;
    }

    .theme-card-preview-progress {
        left: 14.84375% !important;
        right: 14.84375% !important;
        width: auto !important;
        bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    .theme-selection-preview {
        aspect-ratio: 4 / 5 !important;
    }
}


/* Correctif carte mobile rognée à droite.
   Ne jamais dimensionner la carte avec 100vw : le carousel vit dans un
   conteneur déjà paddé. La carte prend maintenant 100% de la largeur utile. */
@media (max-width: 900px) {
    .theme-selection-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 4px 0 12px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .theme-selection-card {
        box-sizing: border-box !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        transform: none !important;
    }

    .theme-selection-inner {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .theme-selection-preview,
    .theme-selection-content,
    .theme-selection-experience {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    .theme-selection-card {
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Phase A — contextual visual editor */
.theme-preview-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 11px 12px;
    border: 1px solid rgba(31, 41, 55, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 25px rgba(20, 24, 32, .07);
}
.theme-preview-context-bar[hidden] { display: none !important; }
.theme-preview-context-copy { min-width: 0; }
.theme-preview-context-copy > span,
.theme-preview-context-copy > strong,
.theme-preview-context-copy > small { display: block; }
.theme-preview-context-copy > span {
    margin-bottom: 2px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #77716b;
}
.theme-preview-context-copy > strong {
    font-size: 13px;
    line-height: 1.25;
    color: #171717;
}
.theme-preview-context-copy > small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
    color: #77716b;
}
.theme-preview-context-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.theme-preview-context-action {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(20, 20, 20, .12);
    border-radius: 10px;
    background: #171717;
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.theme-preview-context-action[hidden] { display: none !important; }
@media (max-width: 900px) {
    .theme-preview-context-bar { align-items: flex-start; }
    .theme-preview-context-copy > small { max-width: 28ch; }
}

/* ==========================================================================\n   Mobile compact media uploader - event_create step 3\n   The thumbnail is intentionally compact and does not affect theme framing.\n   ========================================================================== */
@media (max-width: 520px) {
    .event-experience-section .event-media-upload {
        min-height: 0;
        border-radius: 16px;
    }

    .event-experience-section .event-media-empty {
        min-height: 150px;
        padding: 20px 16px;
        gap: 6px;
    }

    .event-experience-section .event-media-upload-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 2px;
        border-radius: 15px;
        font-size: 1.45rem;
    }

    .event-experience-section .event-media-preview {
        width: 100%;
        height: clamp(155px, 45vw, 205px);
        min-height: 0;
        background: #111;
    }

    .event-experience-section .event-media-preview img,
    .event-experience-section .event-media-preview video {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    .event-experience-section .event-media-preview-info {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 8px 11px;
        border-radius: 11px;
    }

    .event-experience-section .event-media-preview-info strong {
        font-size: .75rem;
    }

    .event-experience-section .event-media-preview-info span {
        margin-top: 1px;
        font-size: .63rem;
    }

    .event-experience-section .event-media-remove {
        margin-top: 8px;
    }
}


/* ==========================================================================
   SURPRIA — Wizard complet V2
   UX desktop + mobile
   ========================================================================== */

/* 3 étapes réelles : Occasion / Surprise / Expérience */
.event-editor-page .event-wizard {
    gap: 18px;
}

.event-editor-page .event-wizard-progress {
    top: 76px;
    padding: 7px;
    border-radius: 18px;
}

.event-editor-page .event-wizard-progress ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.event-editor-page .event-wizard-progress button {
    min-height: 54px;
    padding: 7px 10px;
    border-radius: 13px;
}

.event-editor-page .event-wizard-progress-copy strong {
    font-size: .76rem;
}

.event-editor-page .event-wizard-progress-copy small {
    font-size: .58rem;
}

/* L'étape active doit se lire comme l'action en cours, sans doublon visuel. */
.event-editor-page .event-wizard-panel-heading {
    padding: 2px 2px 0;
}

.event-editor-page .event-wizard-panel-heading > span {
    margin-bottom: 5px;
}

.event-editor-page .event-wizard-panel-heading h2 {
    font-size: clamp(1.55rem, 2.7vw, 2rem);
}

.event-editor-page .event-wizard-panel-heading p {
    margin-top: 6px;
    max-width: 620px;
}

/* Résumé vivant de ce qui est déjà choisi. */
.event-wizard-selection-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(21,21,21,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 7px 20px rgba(30,24,16,.035);
}

.event-wizard-selection-summary[hidden] {
    display: none !important;
}

.event-wizard-selection-summary-label {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
}

.event-wizard-selection-summary-items {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.event-wizard-selection-summary-items::-webkit-scrollbar {
    display: none;
}

.event-wizard-summary-chip {
    flex: 0 0 auto;
    max-width: 250px;
    overflow: hidden;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff8e8;
    color: #6f4b06;
    font-size: .68rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cartes Occasion : décisions rapides, moins de hauteur. */
.event-editor-page .event-type-grid {
    gap: 10px;
}

.event-editor-page .event-type-card-inner {
    min-height: 92px;
    padding: 14px 12px;
    border-radius: 17px;
}

.event-editor-page .event-type-card-icon {
    font-size: 1.55rem;
}

.event-editor-page .event-type-card strong {
    font-size: .82rem;
}

/* Thèmes : l'image reste dominante, le texte secondaire. */
.event-editor-page .theme-selection-grid {
    gap: 11px;
}

.event-editor-page .theme-selection-inner {
    border-radius: 18px;
}

.event-editor-page .theme-selection-preview {
    aspect-ratio: 16 / 10;
    min-height: 0;
}

.event-editor-page .theme-selection-content {
    padding: 11px 12px 12px;
}

.event-editor-page .theme-selection-name-row strong {
    font-size: .84rem;
}

.event-editor-page .theme-selection-cta {
    font-size: .67rem;
}

/* Étapes 2 / 3 : cartes de contenu plus sobres. */
.event-editor-page .event-wizard-original-section {
    border-radius: 20px;
}

.event-editor-page .event-wizard-original-section .event-section-heading {
    margin-bottom: 16px;
}

.event-editor-page .event-wizard-original-section .event-section-heading h2 {
    font-size: 1.08rem;
}

.event-editor-page .event-fields-grid {
    gap: 13px;
}

.event-editor-page .event-field label {
    margin-bottom: 6px;
}

.event-editor-page .event-field input,
.event-editor-page .event-field select,
.event-editor-page .event-field textarea {
    border-radius: 13px;
}

/* Barre d'actions : une action primaire évidente. */
.event-editor-page .event-wizard-actions {
    bottom: 10px;
    gap: 8px;
    padding: 10px;
    border-radius: 17px;
}

.event-editor-page .event-wizard-actions .btn {
    min-height: 46px;
    border-radius: 14px;
}

.event-editor-page .event-wizard-next,
.event-editor-page .event-wizard-submit {
    min-width: 170px;
}

/* Le bouton Précédent ne doit pas rivaliser avec Continuer. */
.event-editor-page .event-wizard-previous {
    background: transparent;
    box-shadow: none;
}

/* Preview desktop : stable et utile sans voler toute la page. */
@media (min-width: 901px) {
    .event-editor-page .event-editor-layout {
        align-items: start;
    }

    .event-editor-page .event-editor-preview-column {
        position: sticky;
        top: 82px;
    }

    .event-editor-page .theme-live-preview {
        max-height: calc(100vh - 98px);
    }
}

/* Tablet/mobile : vrai parcours guidé, une décision par écran. */
@media (max-width: 900px) {
    .event-editor-page .event-create-header {
        margin-bottom: 12px;
    }

    .event-editor-page .event-create-header > p,
    .event-editor-page .event-create-draft-notice {
        font-size: .78rem;
    }

    .event-editor-page .event-wizard-progress {
        top: 62px;
        margin-inline: -4px;
        padding: 5px;
        overflow: visible;
        border-radius: 15px;
    }

    .event-editor-page .event-wizard-progress ol {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
        gap: 4px;
    }

    .event-editor-page .event-wizard-progress li {
        min-width: 0;
        flex: initial;
    }

    .event-editor-page .event-wizard-progress button {
        min-height: 48px;
        justify-content: center;
        gap: 6px;
        padding: 6px;
        text-align: center;
    }

    .event-editor-page .event-wizard-progress-number {
        width: 27px;
        height: 27px;
        font-size: .66rem;
    }

    .event-editor-page .event-wizard-progress-copy strong {
        font-size: .64rem;
    }

    .event-editor-page .event-wizard-progress-copy small {
        display: none;
    }

    .event-editor-page .event-wizard-panel {
        gap: 12px;
    }

    .event-editor-page .event-wizard-panel-heading h2 {
        font-size: 1.42rem;
        line-height: 1.05;
    }

    .event-editor-page .event-wizard-panel-heading p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .event-wizard-selection-summary {
        padding: 8px 9px;
        border-radius: 13px;
    }

    .event-wizard-selection-summary-label {
        display: none;
    }

    .event-wizard-summary-chip {
        padding: 5px 8px;
        font-size: .64rem;
    }

    .event-editor-page .event-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .event-editor-page .event-type-card-inner {
        min-height: 82px;
        padding: 11px 9px;
        border-radius: 15px;
    }

    .event-editor-page .event-type-card-icon {
        font-size: 1.4rem;
    }

    .event-editor-page .event-type-card strong {
        font-size: .75rem;
    }

    /* Thèmes : carousel horizontal contrôlable au pouce. */
    .event-editor-page .theme-selection-grid {
        display: flex;
        gap: 10px;
        margin-inline: -2px;
        padding: 2px 2px 7px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .event-editor-page .theme-selection-grid::-webkit-scrollbar {
        display: none;
    }

    .event-editor-page .theme-selection-card {
        flex: 0 0 min(78vw, 320px);
        scroll-snap-align: center;
    }

    .event-editor-page .theme-selection-preview {
        aspect-ratio: 16 / 10;
    }

    .event-editor-page .event-wizard-original-section {
        padding: 16px 14px;
        border-radius: 17px;
    }

    .event-editor-page .event-wizard-original-section .event-section-heading {
        margin-bottom: 12px;
    }

    .event-editor-page .event-fields-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    /* Barre d'actions mobile : Précédent discret, Continuer dominant. */
    .event-editor-page .event-wizard-actions {
        grid-template-columns: auto minmax(0, 1fr);
        bottom: calc(8px + env(safe-area-inset-bottom));
        padding: 8px;
    }

    .event-editor-page .event-wizard-actions .btn {
        min-height: 46px;
        padding-inline: 13px;
        font-size: .78rem;
    }

    .event-editor-page .event-wizard-previous {
        width: auto;
        min-width: 46px;
        padding-inline: 12px;
    }

    .event-editor-page .event-wizard-next {
        width: 100%;
        min-width: 0;
    }

    .event-editor-page .event-wizard-submit {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    /* Étape expérience : réglages secondaires compacts. */
    .event-editor-page .event-experience-setting {
        padding: 12px;
        border-radius: 14px;
    }

    .event-editor-page .event-step3-editor-card {
        margin-top: 10px;
    }
}

@media (max-width: 430px) {
    .event-editor-page .event-create-container {
        padding-inline: 12px;
    }

    .event-editor-page .event-type-grid {
        gap: 7px;
    }

    .event-editor-page .theme-selection-card {
        flex-basis: min(84vw, 310px);
    }

    .event-editor-page .event-wizard-progress-copy strong {
        font-size: .6rem;
    }

    .event-editor-page .event-wizard-panel-heading h2 {
        font-size: 1.34rem;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.1
   Mobile theme swipe + compact creation flow
   ========================================================================== */

@media (max-width: 900px) {
    /* The draft notice is useful, but must not dominate the first screen. */
    .event-editor-page .event-create-draft-notice {
        padding: 10px 12px;
        margin-bottom: 12px;
        border-radius: 14px;
        font-size: .72rem;
        line-height: 1.35;
    }

    /* Progress = navigation only. Remove redundant secondary descriptions. */
    .event-editor-page .event-wizard-progress {
        margin-bottom: 8px;
    }

    .event-editor-page .event-wizard-progress-copy small {
        display: none !important;
    }

    .event-editor-page .event-wizard-progress button {
        min-height: 46px;
    }

    /* STEP 1 OF 3 duplicates the progress bar on mobile. */
    .event-editor-page .event-wizard-panel-heading > span {
        display: none;
    }

    .event-editor-page .event-wizard-panel-heading {
        padding-top: 0;
    }

    /* Selection summary becomes a tiny contextual chip. */
    .event-editor-page .event-wizard-selection-summary {
        min-height: 38px;
        margin-bottom: 2px;
    }

    /* Remove the duplicated theme helper sentence on mobile. */
    .event-editor-page .theme-selection-mobile-hint {
        display: none !important;
    }

    /*
     * Theme chooser: one complete card at a time.
     * The previous V2 carousel kept desktop-sized media rules, which produced
     * the giant cropped image visible in the test capture.
     */
    .event-editor-page .event-theme-section {
        overflow: hidden;
    }

    .event-editor-page .event-theme-section .theme-selection-grid,
    .event-editor-page .theme-selection-grid {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: stretch;
        gap: 10px;
        width: calc(100% + 4px);
        margin: 0 -2px;
        padding: 2px 2px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .event-editor-page .event-theme-section .theme-selection-grid::-webkit-scrollbar,
    .event-editor-page .theme-selection-grid::-webkit-scrollbar {
        display: none;
    }

    .event-editor-page .event-theme-section .theme-selection-card,
    .event-editor-page .theme-selection-card {
        flex: 0 0 88% !important;
        width: 88% !important;
        min-width: 0 !important;
        max-width: 330px !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .event-editor-page .event-theme-section .theme-selection-inner,
    .event-editor-page .theme-selection-inner {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-radius: 18px;
    }

    .event-editor-page .event-theme-section .theme-selection-preview,
    .event-editor-page .theme-selection-preview {
        position: relative;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 10 !important;
        overflow: hidden;
        border-radius: 17px 17px 0 0;
    }

    .event-editor-page .event-theme-section .theme-selection-preview > img,
    .event-editor-page .theme-selection-preview > img {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .event-editor-page .event-theme-section .theme-selection-content,
    .event-editor-page .theme-selection-content {
        flex: 0 0 auto;
        padding: 11px 12px 12px !important;
    }

    .event-editor-page .theme-selection-name-row {
        min-height: 24px;
    }

    .event-editor-page .theme-selection-experience {
        margin-top: 3px;
        font-size: .69rem;
    }

    .event-editor-page .theme-selection-cta {
        margin-top: 6px;
        min-height: 0;
        font-size: .66rem;
    }

    /* Swipe affordance: the next card deliberately peeks into view. */
    .event-editor-page .event-theme-section .theme-selection-grid::after {
        content: "";
        flex: 0 0 2px;
    }

    /* Sticky actions must not hide the card. */
    .event-editor-page .event-wizard {
        padding-bottom: 72px;
    }

    .event-editor-page .event-wizard-actions {
        bottom: calc(6px + env(safe-area-inset-bottom));
        min-height: 58px;
        padding: 7px;
        border-radius: 16px;
    }

    .event-editor-page .event-wizard-actions .btn {
        min-height: 44px;
    }

    .event-editor-page .event-wizard-actions > a,
    .event-editor-page .event-wizard-previous {
        flex: 0 0 48px;
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        padding-inline: 7px;
        overflow: hidden;
        font-size: 0;
        white-space: nowrap;
    }

    .event-editor-page .event-wizard-actions > a::before,
    .event-editor-page .event-wizard-previous::before {
        content: "←";
        font-size: 1rem;
    }

    .event-editor-page .event-wizard-next,
    .event-editor-page .event-wizard-submit {
        min-width: 0;
        font-size: .76rem;
    }
}

@media (max-width: 430px) {
    .event-editor-page .event-create-header h1 {
        font-size: clamp(2rem, 10.5vw, 2.6rem);
        line-height: .98;
    }

    .event-editor-page .event-create-header > p {
        line-height: 1.4;
    }

    .event-editor-page .event-wizard-progress-copy strong {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .event-editor-page .event-theme-section .theme-selection-card,
    .event-editor-page .theme-selection-card {
        flex-basis: 91% !important;
        width: 91% !important;
        max-width: none !important;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.2
   Step 1 order: Occasion first (2x3 grid) -> Theme swipe
   Sticky actions and spacing refinements
   ========================================================================== */

@media (max-width: 900px) {
    /* Occasion stays as a clear 2x3 grid, but more compact. */
    .event-editor-page .event-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .event-editor-page .event-type-card-inner {
        min-height: 76px !important;
        padding: 10px 9px !important;
        border-radius: 14px !important;
    }

    .event-editor-page .event-type-card-icon {
        font-size: 1.28rem !important;
    }

    .event-editor-page .event-type-card strong {
        font-size: .72rem !important;
    }

    /* Reduce vertical noise between Occasion and Theme. */
    .event-editor-page .event-type-section,
    .event-editor-page .event-theme-section {
        margin-top: 0;
    }

    .event-editor-page .event-type-section + .event-theme-section {
        margin-top: 12px;
    }

    /* Sticky actions: prevent labels from wrapping/cropping. */
    .event-editor-page .event-wizard-actions {
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }

    .event-editor-page .event-wizard-actions > a,
    .event-editor-page .event-wizard-previous {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        padding-inline: 8px !important;
        font-size: .68rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        overflow: hidden !important;
    }

    .event-editor-page .event-wizard-actions > a::before,
    .event-editor-page .event-wizard-previous::before {
        display: none !important;
    }

    .event-editor-page .event-wizard-next,
    .event-editor-page .event-wizard-submit {
        min-height: 44px !important;
    }
}

/* Desktop: same logical order, without changing the 2x2 theme grid. */
@media (min-width: 901px) {
    .event-editor-page .event-type-section + .event-theme-section {
        margin-top: 14px;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.3 corrective
   - Occasion réellement avant Thème
   - CTA sticky corrigé
   - Thème sélectionné centré au chargement
   ========================================================================== */

@media (max-width: 900px) {
    /* The secondary/cancel action only: do not affect the primary CTA. */
    .event-editor-page .event-wizard-actions .event-wizard-previous,
    .event-editor-page .event-wizard-actions .event-wizard-cancel {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        padding-inline: 8px !important;
        font-size: .67rem !important;
        line-height: 1.05 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .event-editor-page .event-wizard-actions .event-wizard-next,
    .event-editor-page .event-wizard-actions .event-wizard-submit {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: .76rem !important;
        white-space: nowrap !important;
    }

    .event-editor-page .event-wizard-actions {
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }

    /* Slightly tighten the theme section without changing its design. */
    .event-editor-page .event-theme-section .event-section-heading,
    .event-editor-page .theme-selection-section-heading {
        margin-bottom: 10px !important;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.4
   Mobile action bar: step 1 = one full-width primary CTA.
   12px visual gutter chosen to match the compact mobile layout.
   ========================================================================== */

@media (max-width: 900px) {
    .event-editor-page .event-wizard-actions.is-first-step {
        display: grid !important;
        grid-template-columns: 1fr !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }

    .event-editor-page .event-wizard-actions.is-first-step .event-wizard-previous,
    .event-editor-page .event-wizard-actions.is-first-step .event-wizard-cancel,
    .event-editor-page .event-wizard-actions.is-first-step > a:not(.event-wizard-next):not(.event-wizard-submit) {
        display: none !important;
    }

    .event-editor-page .event-wizard-actions.is-first-step .event-wizard-next {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.5
   Étape 3 desktop + mobile : finalisation de l'expérience
   ========================================================================== */

.event-editor-page .event-wizard-panel[data-wizard-step="3"] {
    gap: 14px;
}

/* Média en premier : c'est l'élément le plus concret de la révélation. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
    order: 1;
    margin: 0;
    padding: 18px;
    border-radius: 20px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section {
    order: 2;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
    order: 3;
    margin-top: 0;
}

/* Les deux durées forment un seul bloc de réglages compréhensible. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    border-radius: 17px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting-heading {
    gap: 10px;
    margin-bottom: 11px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 16px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting-heading label {
    font-size: .82rem;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting-heading .event-field-help {
    font-size: .7rem;
    line-height: 1.35;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting select {
    min-height: 44px;
    border-radius: 12px;
}

/* Programmation / expiration = options secondaires, repliées par défaut. */
.event-step3-availability {
    grid-column: 1 / -1;
    margin-top: 2px;
    border: 1px solid rgba(22,24,35,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.62);
    overflow: hidden;
}

.event-step3-availability > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
    font-size: .76rem;
    font-weight: 800;
}

.event-step3-availability > summary::-webkit-details-marker {
    display: none;
}

.event-step3-availability > summary::before {
    content: "🗓️";
    flex: 0 0 auto;
}

.event-step3-availability > summary::after {
    content: "⌄";
    margin-left: auto;
    font-size: 1rem;
    transition: transform .18s ease;
}

.event-step3-availability[open] > summary::after {
    transform: rotate(180deg);
}

.event-step3-availability-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 13px 13px;
}

.event-step3-availability-fields > .event-field {
    min-width: 0;
    margin: 0;
}

.event-step3-availability-fields label {
    font-size: .74rem;
}

.event-step3-availability-fields input {
    min-height: 43px;
    border-radius: 12px;
    font-size: .76rem;
}

/* Upload média : plus direct, moins de hauteur vide. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-media-upload {
    min-height: 180px;
    border-radius: 16px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-media-empty {
    min-height: 156px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-media-upload-icon {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
}

/* L'éditeur visuel devient une aide courte, pas une deuxième grosse carte. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
    padding: 14px 15px;
    border-color: rgba(22,24,35,.08);
    background: rgba(255,255,255,.72);
    border-radius: 17px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading h3 {
    font-size: 1rem;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading p {
    font-size: .76rem;
    line-height: 1.4;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
    gap: 6px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips span {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .72rem;
}

/* Desktop : preview permanente, pas besoin d'un gros CTA "ouvrir l'éditeur". */
@media (min-width: 901px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-button {
        display: none !important;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px 18px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading {
        grid-column: 1;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
        grid-column: 1 / -1;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-inline-save-status {
        position: absolute;
        right: 15px;
        top: 14px;
        margin: 0;
    }
}

/* Mobile : une seule colonne, preview accessible mais non envahissante. */
@media (max-width: 900px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] {
        gap: 10px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
        padding: 14px;
        border-radius: 17px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-fields-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting {
        min-height: 0;
        padding: 12px;
        border-radius: 15px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-setting-heading {
        margin-bottom: 9px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-media-upload {
        min-height: 150px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-media-empty {
        min-height: 128px;
    }

    .event-step3-availability-fields {
        grid-template-columns: 1fr;
        padding: 0 11px 11px;
    }

    .event-step3-availability > summary {
        min-height: 44px;
        padding: 10px 11px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
        padding: 12px;
        border-radius: 15px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-button {
        position: static !important;
        min-height: 44px;
        margin: 1px 0 0;
        box-shadow: none;
        border-radius: 13px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips::-webkit-scrollbar {
        display: none;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips span {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 34px;
        padding: 6px 8px;
        font-size: .68rem;
        border-radius: 999px;
    }

    /* Étape finale : précédent + sauvegarde restent tous deux utiles. */
    .event-editor-page .event-wizard-actions.is-final-step {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }

    .event-editor-page .event-wizard-actions.is-final-step .event-wizard-previous {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        font-size: .67rem !important;
    }

    .event-editor-page .event-wizard-actions.is-final-step .event-wizard-submit {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .event-editor-page .event-wizard-actions.is-final-step .event-wizard-next {
        display: none !important;
    }
}


/* ==========================================================================
   SURPRIA — Wizard V2.6
   Step 3 finishing: clear editor CTA + capability chips + first-use onboarding
   + desktop footer fix.
   ========================================================================== */

/* Clear visual-editor promise */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-button {
    font-weight: 850;
}

.event-step3-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.event-step3-capability {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 31px;
    padding: 6px 9px;
    border: 1px solid rgba(22,24,35,.07);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.event-step3-capability::before {
    content: "✓";
    color: #2c9b69;
    font-weight: 900;
}

/* First-use onboarding */
.event-step3-onboarding {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(17,17,17,.48);
    backdrop-filter: blur(5px);
}

.event-step3-onboarding[hidden] {
    display: none !important;
}

.event-step3-onboarding-card {
    width: min(100%, 390px);
    padding: 20px;
    border-radius: 22px;
    background: #fffdf9;
    box-shadow: 0 24px 70px rgba(0,0,0,.2);
}

.event-step3-onboarding-kicker {
    display: inline-flex;
    padding: 6px 9px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #fff3d6;
    color: #8a5700;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.event-step3-onboarding-card h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.08;
}

.event-step3-onboarding-card > p {
    margin: 8px 0 15px;
    color: var(--text-soft);
    font-size: .79rem;
    line-height: 1.45;
}

.event-step3-onboarding-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.event-step3-onboarding-list li {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #f8f5ef;
    font-size: .77rem;
    font-weight: 750;
    line-height: 1.35;
}

.event-step3-onboarding-list span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff;
    font-size: 1rem;
}

.event-step3-onboarding-start {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: #171717;
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

/* Desktop action bar: no more wrapped Annuler / Précédent. */
@media (min-width: 901px) {
    .event-editor-page .event-wizard-actions {
        display: grid !important;
        grid-template-columns: 112px 112px minmax(220px, 1fr) !important;
        align-items: stretch;
    }

    .event-editor-page .event-wizard-actions .event-wizard-cancel,
    .event-editor-page .event-wizard-actions .event-wizard-previous {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-inline: 12px !important;
        font-size: .75rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .event-editor-page .event-wizard-actions .event-wizard-submit {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
    }
}

/* Mobile: replace the old permanent tip row with compact capabilities. */
@media (max-width: 900px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
        display: none !important;
    }

    .event-step3-capabilities {
        justify-content: flex-start;
        gap: 6px;
        margin-top: 9px;
    }

    .event-step3-capability {
        min-height: 29px;
        padding: 5px 8px;
        font-size: .64rem;
    }

    .event-step3-onboarding-card {
        padding: 18px;
        border-radius: 20px;
    }
}


/* ==========================================================================
   SURPRIA — Preview / visual editor V2.7
   Contextual editing: selected text/media + direct framing controls.
   ========================================================================== */

.theme-preview-editor-shell {
    position: relative;
}

.theme-preview-context-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 11px;
    border: 1px solid rgba(21,21,21,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 22px rgba(20,24,32,.055);
}

.theme-preview-context-bar[hidden] {
    display: none !important;
}

.theme-preview-context-copy {
    min-width: 0;
}

.theme-preview-context-copy > span {
    display: block;
    margin-bottom: 2px;
    color: #a36500;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.theme-preview-context-copy > strong {
    display: block;
    overflow: hidden;
    color: #171717;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-preview-context-copy > small {
    display: block;
    margin-top: 2px;
    color: #706b64;
    font-size: 10px;
    line-height: 1.35;
}

.theme-preview-context-actions {
    display: flex;
    gap: 6px;
}

.theme-preview-context-action {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(21,21,21,.1);
    border-radius: 10px;
    background: #fff;
    color: #171717;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.theme-preview-context-action.is-primary {
    border-color: #171717;
    background: #171717;
    color: #fff;
}

.theme-preview-context-action[hidden] {
    display: none !important;
}

.theme-preview-framing-panel {
    display: grid;
    gap: 11px;
    margin: -2px 0 11px;
    padding: 11px;
    border: 1px solid rgba(21,21,21,.08);
    border-radius: 14px;
    background: #faf8f4;
}

.theme-preview-framing-panel[hidden] {
    display: none !important;
}

.theme-preview-framing-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.theme-preview-framing-top strong {
    font-size: 11px;
}

.theme-preview-framing-fit {
    display: flex;
    gap: 5px;
}

.theme-preview-fit-button,
.theme-preview-framing-reset {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(21,21,21,.1);
    border-radius: 9px;
    background: #fff;
    color: #171717;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.theme-preview-fit-button.is-active {
    border-color: #171717;
    background: #171717;
    color: #fff;
}

.theme-preview-framing-control {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) 42px;
    align-items: center;
    gap: 8px;
}

.theme-preview-framing-control label,
.theme-preview-framing-control output {
    font-size: 9px;
    font-weight: 800;
}

.theme-preview-framing-control output {
    text-align: right;
}

.theme-preview-framing-control input[type="range"] {
    width: 100%;
}

.theme-preview-editor-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff8e8;
    color: #725008;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .theme-preview-context-bar {
        position: sticky;
        top: 0;
        z-index: 8;
        grid-template-columns: minmax(0,1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 13px;
    }

    .theme-preview-context-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .theme-preview-context-action {
        width: 100%;
    }

    .theme-preview-framing-panel {
        padding: 10px;
    }

    .theme-preview-framing-control {
        grid-template-columns: 48px minmax(0,1fr) 40px;
    }

    .theme-preview-editor-hint {
        font-size: 9px;
    }
}


/* ==========================================================================
   SURPRIA — Preview editor V2.8
   Mobile finishing: compact selected-element card + collapsible framing tools.
   ========================================================================== */

.theme-preview-framing-toggle {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(21,21,21,.1);
    border-radius: 10px;
    background: #171717;
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

@media (max-width: 900px) {
    /* Save/status block takes less vertical space. */
    .theme-preview-save-banner,
    .theme-preview-sync-banner,
    .theme-preview-editor-save-banner {
        padding-block: 9px !important;
        margin-bottom: 8px !important;
    }

    /* The contextual card becomes a compact selection summary. */
    .theme-preview-context-bar {
        gap: 6px !important;
        margin-bottom: 7px !important;
        padding: 8px 9px !important;
    }

    .theme-preview-context-copy > span {
        font-size: 8px !important;
    }

    .theme-preview-context-copy > strong {
        font-size: 12px !important;
    }

    .theme-preview-context-copy > small {
        margin-top: 1px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    .theme-preview-context-actions {
        grid-template-columns: 1fr auto !important;
        gap: 6px !important;
    }

    .theme-preview-context-action {
        min-height: 32px !important;
        padding-inline: 9px !important;
        font-size: 9px !important;
    }

    /* Framing controls are collapsed by default on mobile. */
    .theme-preview-framing-panel {
        margin-bottom: 8px !important;
        padding: 9px !important;
    }

    .theme-preview-framing-panel.is-mobile-collapsed .theme-preview-framing-control,
    .theme-preview-framing-panel.is-mobile-collapsed .theme-preview-framing-fit {
        display: none !important;
    }

    .theme-preview-framing-panel.is-mobile-collapsed .theme-preview-framing-top {
        min-height: 34px;
    }

    .theme-preview-framing-panel.is-mobile-collapsed .theme-preview-framing-top strong {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .theme-preview-framing-panel.is-mobile-collapsed .theme-preview-framing-top strong::after {
        content: attr(data-summary);
        color: #746d64;
        font-size: 9px;
        font-weight: 700;
    }

    .theme-preview-editor-hint {
        margin-bottom: 7px !important;
        padding: 6px 8px !important;
        font-size: 8px !important;
    }
}


/* ==========================================================================
   SURPRIA — Preview editor V2.9
   Direct media manipulation: no external framing panel.
   ========================================================================== */

.theme-preview-framing-panel,
.theme-preview-context-action#themePreviewContextAdvanced {
    display: none !important;
}

@media (max-width: 900px) {
    .theme-preview-context-bar {
        margin-bottom: 7px !important;
        padding: 8px 9px !important;
    }

    .theme-preview-context-actions {
        grid-template-columns: auto !important;
        justify-content: end;
    }

    .theme-preview-context-action#themePreviewContextReset {
        min-width: 92px;
    }
}


/* SURPRIA Wizard V3 — 5-step premium creation flow */
.event-wizard-progress ol{grid-template-columns:repeat(5,minmax(0,1fr))}
.event-wizard-progress button{min-width:0}
.event-wizard-progress-copy strong{white-space:normal}
.event-wizard-panel[data-wizard-step="4"]{max-width:980px;margin-inline:auto}
.event-wizard-review{display:grid;gap:18px;margin-top:24px}
.event-wizard-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.event-wizard-review-grid article{position:relative;display:grid;gap:7px;padding:20px 54px 20px 20px;border:1px solid rgba(15,23,42,.09);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 14px 34px rgba(15,23,42,.055)}
.event-wizard-review-grid article:first-child{grid-column:span 2}
.event-wizard-review-grid span{font-size:.78rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.event-wizard-review-grid strong{font-size:1.05rem;color:#0f172a;overflow-wrap:anywhere}
.event-wizard-review-grid button{position:absolute;right:14px;top:14px;border:0;background:transparent;font:inherit;font-size:.78rem;font-weight:700;color:#2563eb;cursor:pointer}
.event-wizard-review-note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(239,246,255,.75);color:#334155}
.event-wizard-review-note p{margin:0;line-height:1.55}
.event-wizard-panel[data-wizard-step="2"] .theme-selection-grid{margin-top:8px}
@media(max-width:900px){
  .event-wizard-progress{overflow:hidden}
  .event-wizard-progress ol{display:flex;gap:6px}
  .event-wizard-progress li{flex:1;min-width:0}
  .event-wizard-progress-copy{display:none}
  .event-wizard-progress-number{margin:auto}
  .event-wizard-review-grid{grid-template-columns:1fr}
  .event-wizard-review-grid article:first-child{grid-column:auto}
}
@media(max-width:600px){
  .event-wizard-review-grid article{padding:16px 48px 16px 16px;border-radius:16px}
  .event-wizard-review-note{border-radius:16px;font-size:.9rem}
}


/* SURPRIA Wizard V3.1 — Step 1 corrections */
.event-form.is-occasion-step .event-editor-preview{display:none}
.event-form.is-occasion-step .event-editor-layout{grid-template-columns:minmax(0,1fr)}
.event-wizard-actions .event-wizard-previous{white-space:nowrap;min-width:112px}
@media(max-width:900px){
  .event-form.is-occasion-step .event-editor-preview{display:none}
  .event-wizard-progress{padding:14px 16px}
  .event-wizard-progress ol{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    position:relative;
  }
  .event-wizard-progress ol::before{
    content:"";
    position:absolute;
    left:0;right:0;top:50%;
    height:4px;
    border-radius:999px;
    background:rgba(15,23,42,.08);
    transform:translateY(-50%);
    z-index:0;
  }
  .event-wizard-progress li{position:relative;z-index:1}
  .event-wizard-progress button{
    min-height:32px;
    padding:0;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }
  .event-wizard-progress-number{
    width:30px;height:30px;min-width:30px;
    display:grid;place-items:center;
    border-radius:999px;
    background:#f8f5ee;
  }
  .event-wizard-progress button.is-active .event-wizard-progress-number{
    background:#111;
    color:#fff;
  }
  .event-wizard-progress button.is-complete .event-wizard-progress-number{
    background:#f4a312;
    color:#111;
  }
  .event-wizard-progress-copy{display:none!important}
  .event-wizard-actions .event-wizard-previous{min-width:auto}
}


/* SURPRIA Wizard V3.1.1 — Step 1 final visual polish */
.event-wizard-mobile-progress-label{display:none}
.event-form.is-occasion-step-final .event-editor-preview,
.event-form.is-occasion-step-final .event-preview-column,
.event-form.is-occasion-step-final [class*="preview-column"]{display:none!important}
.event-form.is-occasion-step-final .event-editor-layout,
.event-form.is-occasion-step-final .event-form-layout{grid-template-columns:minmax(0,1fr)!important}
.event-wizard-actions .event-wizard-previous{
  min-width:124px!important;
  width:auto!important;
  padding-inline:18px!important;
  white-space:nowrap!important;
  word-break:normal!important;
}
@media(max-width:900px){
  .event-wizard-mobile-progress-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.82rem;
    font-weight:800;
    color:#334155;
    margin-bottom:10px;
  }
  .event-wizard-progress ol{
    height:6px;
    display:block!important;
    position:relative;
    overflow:hidden;
    border-radius:999px;
    background:rgba(15,23,42,.08);
  }
  .event-wizard-progress ol::before{display:none!important}
  .event-wizard-progress li{display:none!important}
  .event-wizard-progress ol::after{
    content:"";
    display:block;
    height:100%;
    width:var(--surpria-wizard-progress, 25%);
    border-radius:inherit;
    background:#f4a312;
    transition:width .25s ease;
  }
  .event-wizard-actions .event-wizard-previous{min-width:auto!important}
}


/* SURPRIA Wizard V3.1.2 — Fix desktop "Annuler" wrapping */
@media(min-width:901px){
  .event-wizard-actions{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }

  .event-wizard-actions .event-wizard-previous{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:132px!important;
    max-width:none!important;
    padding:14px 22px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    line-height:1.1!important;
  }

  .event-wizard-actions .event-wizard-next{
    flex:0 0 auto!important;
    min-width:220px!important;
    width:auto!important;
    white-space:normal!important;
  }
}


/* SURPRIA Wizard V3.1.3 — real desktop Cancel button fix */
@media (min-width: 901px) {
    .event-editor-page .event-wizard-actions > .event-wizard-cancel {
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:0 0 132px!important;
        width:132px!important;
        min-width:132px!important;
        max-width:132px!important;
        padding:14px 18px!important;
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        overflow:visible!important;
        text-overflow:clip!important;
        line-height:1.15!important;
    }
}





/* SURPRIA Wizard V3.2.1 — safe Step 2 visuals */
.event-wizard-panel[data-wizard-step="2"] .theme-selection-card{
    position:relative;
}
.event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321{
    border-color:#f4a312!important;
    box-shadow:0 0 0 3px rgba(244,163,18,.13)!important;
}
.event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321::after{
    content:"✓";
    position:absolute;
    top:12px;
    right:12px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f4a312;
    color:#111;
    font-weight:900;
    z-index:8;
}
.event-wizard-panel[data-wizard-step="2"] .theme-experience-link-v321{
    font-weight:800!important;
    text-decoration:none!important;
}
@media(max-width:900px){
    .event-wizard-panel[data-wizard-step="2"] .theme-selection-grid{
        scroll-snap-type:x mandatory;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
    }
    .event-wizard-panel[data-wizard-step="2"] .theme-selection-card{
        scroll-snap-align:center;
    }
}


/* SURPRIA Wizard V3.3 — Step 2 preview behaviour */
/* Cards are static: the experience preview lives outside the thumbnail. */
.theme-selection-card:hover .theme-selection-inner {
    transform:none!important;
}
.theme-selection-card:hover .theme-selection-preview img {
    transform:none!important;
}
.theme-selection-preview img {
    transition:none!important;
}

/* Desktop: give the live phone preview considerably more vertical room. */
@media (min-width: 1181px) {
    .event-editor-layout {
        grid-template-columns:minmax(0,1fr) 560px;
    }

    .event-editor-preview-column .theme-phone-screen,
    .event-editor-preview-column .theme-preview-empty,
    .event-editor-preview-column .theme-preview-baby-gift,
    .event-editor-preview-column .theme-preview-state,
    .event-editor-preview-column #themePreviewImage {
        min-height:620px!important;
    }

    .event-editor-preview-column .theme-preview-frame {
        height:620px!important;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .event-editor-preview-column .theme-phone-screen,
    .event-editor-preview-column .theme-preview-empty,
    .event-editor-preview-column .theme-preview-baby-gift,
    .event-editor-preview-column .theme-preview-state,
    .event-editor-preview-column #themePreviewImage {
        min-height:520px!important;
    }

    .event-editor-preview-column .theme-preview-frame {
        height:520px!important;
    }
}

/* Mobile: no animated content is rendered in the thumbnail itself. */
@media (max-width: 900px) {
    .theme-selection-card iframe,
    .theme-selection-card .theme-card-live-preview,
    .theme-selection-card [data-theme-card-live-preview] {
        display:none!important;
    }
}


/* SURPRIA Wizard V3.3 — 4-step flow */
.event-form.is-theme-preview-readonly .event-inline-editor-guide,
.event-form.is-theme-preview-readonly .event-inline-editor-tools,
.event-form.is-theme-preview-readonly [data-inline-editor-tools]{
    display:none!important;
}
.event-form.is-theme-preview-readonly [contenteditable="true"]{
    pointer-events:none!important;
}
.event-wizard-panel[data-wizard-step="3"] .event-wizard-original-section{
    margin-bottom:18px;
}


/* SURPRIA Wizard V3.3.1 — Step 1 fixes */
@media (min-width: 901px){
    .event-wizard-progress,
    .event-wizard-steps,
    .event-wizard-progress-list{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        gap:8px!important;
    }
    .event-wizard-progress > *,
    .event-wizard-steps > *,
    .event-wizard-progress-list > *{
        min-width:0!important;
    }
}

.event-form.wizard-step-1 .event-preview-panel,
.event-form.wizard-step-1 .event-preview-card,
.event-form.wizard-step-1 .event-form-preview,
.event-form.wizard-step-1 .event-wizard-preview,
.event-form.wizard-step-1 [data-event-preview],
.event-form.wizard-step-1 [data-preview-panel]{
    display:none!important;
}

@media (max-width: 900px){
    .event-form.wizard-step-1 .event-wizard-actions{
        display:block!important;
    }
    .event-form.wizard-step-1 .event-wizard-next{
        width:100%!important;
        min-height:52px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
        font-size:15px!important;
        font-weight:800!important;
        padding:0 18px!important;
    }
    .event-form.wizard-step-1 .event-wizard-previous,
    .event-form.wizard-step-1 .event-wizard-cancel{
        display:none!important;
    }
}


/* SURPRIA Wizard V3.3.2 — desktop Step 1 */
@media (min-width:901px){
    /* Four progress items always stay on one row. */
    .event-wizard-progress,
    .event-wizard-steps,
    .event-wizard-progress-list,
    .event-wizard-stepper{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        grid-auto-flow:column!important;
        grid-auto-columns:minmax(0,1fr)!important;
        width:100%!important;
        align-items:stretch!important;
        gap:8px!important;
        flex-wrap:nowrap!important;
    }
    .event-wizard-progress > *,
    .event-wizard-steps > *,
    .event-wizard-progress-list > *,
    .event-wizard-stepper > *{
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        grid-row:1!important;
    }

    /* The preview belongs to step 2+, never to Occasion. */
    html[data-surpria-wizard-step="1"] .event-preview-panel,
    html[data-surpria-wizard-step="1"] .event-preview-card,
    html[data-surpria-wizard-step="1"] .event-form-preview,
    html[data-surpria-wizard-step="1"] .event-wizard-preview,
    html[data-surpria-wizard-step="1"] .event-preview,
    html[data-surpria-wizard-step="1"] .preview-panel,
    html[data-surpria-wizard-step="1"] .preview-card,
    html[data-surpria-wizard-step="1"] [data-event-preview],
    html[data-surpria-wizard-step="1"] [data-preview-panel],
    form.event-form[data-active-wizard-step="1"] .event-preview-panel,
    form.event-form[data-active-wizard-step="1"] .event-preview-card,
    form.event-form[data-active-wizard-step="1"] .event-form-preview,
    form.event-form[data-active-wizard-step="1"] .event-wizard-preview,
    form.event-form[data-active-wizard-step="1"] .event-preview,
    form.event-form[data-active-wizard-step="1"] .preview-panel,
    form.event-form[data-active-wizard-step="1"] .preview-card,
    form.event-form[data-active-wizard-step="1"] [data-event-preview],
    form.event-form[data-active-wizard-step="1"] [data-preview-panel]{
        display:none!important;
    }
}



/* SURPRIA Wizard V3.3.3 — definitive Step 1 desktop fix */
@media (min-width:901px){

    /* The OL is the real step grid. */
    .event-editor-page .event-wizard-progress ol,
    .event-wizard-progress ol{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        grid-template-rows:1fr!important;
        grid-auto-flow:column!important;
        grid-auto-columns:minmax(0,1fr)!important;
        gap:8px!important;
        width:100%!important;
        overflow:visible!important;
    }

    .event-editor-page .event-wizard-progress li,
    .event-wizard-progress li{
        display:block!important;
        grid-row:1!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
    }

    .event-editor-page .event-wizard-progress button,
    .event-wizard-progress button{
        width:100%!important;
        min-width:0!important;
    }

    .event-editor-page .event-wizard-progress-copy strong{
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* Actual preview wrapper used by event_create. */
    html[data-surpria-active-step="1"] .event-editor-preview,
    form.event-form[data-surpria-active-step="1"] .event-editor-preview,
    html[data-surpria-active-step="1"] .event-editor-preview-column,
    form.event-form[data-surpria-active-step="1"] .event-editor-preview-column{
        display:none!important;
    }

    html[data-surpria-active-step="1"] .event-editor-layout,
    form.event-form[data-surpria-active-step="1"] .event-editor-layout{
        grid-template-columns:minmax(0,1fr)!important;
    }
}


/* SURPRIA Wizard V3.3.4 — desktop timeline */
@media (min-width:901px){
    .event-wizard-progress.is-surpria-timeline{
        position:relative!important;
        padding:24px 26px 20px!important;
        overflow:visible!important;
    }

    .event-wizard-progress.is-surpria-timeline ol{
        position:relative!important;
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        grid-template-rows:auto!important;
        width:100%!important;
        gap:0!important;
        margin:0!important;
        padding:0!important;
        list-style:none!important;
        overflow:visible!important;
    }

    .event-wizard-progress.is-surpria-timeline ol::before{
        content:""!important;
        position:absolute!important;
        left:10%!important;
        right:10%!important;
        top:18px!important;
        height:2px!important;
        background:rgba(24,24,24,.12)!important;
        z-index:0!important;
    }

    .event-wizard-progress.is-surpria-timeline li{
        position:relative!important;
        z-index:1!important;
        display:flex!important;
        justify-content:center!important;
        min-width:0!important;
        width:auto!important;
        margin:0!important;
        padding:0 10px!important;
        grid-row:1!important;
    }

    .event-wizard-progress.is-surpria-timeline button{
        position:relative!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:8px!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
        text-align:center!important;
        color:inherit!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-index,
    .event-wizard-progress.is-surpria-timeline button > span:first-child{
        position:relative!important;
        z-index:2!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        border-radius:999px!important;
        background:#f6f1e9!important;
        border:1px solid rgba(24,24,24,.08)!important;
        font-weight:800!important;
        line-height:1!important;
        box-shadow:0 0 0 7px #fffaf2!important;
    }

    .event-wizard-progress.is-surpria-timeline li.is-active .event-wizard-progress-index,
    .event-wizard-progress.is-surpria-timeline li[aria-current="step"] .event-wizard-progress-index,
    .event-wizard-progress.is-surpria-timeline button[aria-current="step"] > span:first-child{
        background:#ffa915!important;
        color:#111!important;
        border-color:#ffa915!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy{
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        gap:2px!important;
        min-width:0!important;
        width:100%!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy strong{
        display:block!important;
        width:100%!important;
        white-space:nowrap!important;
        overflow:visible!important;
        text-overflow:clip!important;
        font-size:14px!important;
        line-height:1.2!important;
        text-align:center!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy small{
        display:block!important;
        white-space:nowrap!important;
        font-size:11px!important;
        line-height:1.2!important;
        opacity:.58!important;
        text-align:center!important;
    }

    /* neutralize old selected "black card" styling */
    .event-wizard-progress.is-surpria-timeline li.is-active,
    .event-wizard-progress.is-surpria-timeline li[aria-current="step"],
    .event-wizard-progress.is-surpria-timeline li.is-active button,
    .event-wizard-progress.is-surpria-timeline li[aria-current="step"] button{
        background:transparent!important;
        color:inherit!important;
        border-radius:0!important;
        box-shadow:none!important;
    }
}


/* SURPRIA Wizard V3.3.5 — full-width desktop timeline */
@media (min-width:901px){
    .event-wizard-progress.is-surpria-timeline{
        width:100%!important;
        max-width:none!important;
        box-sizing:border-box!important;
    }

    .event-wizard-progress.is-surpria-timeline ol{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        width:100%!important;
        max-width:none!important;
        min-width:100%!important;
        box-sizing:border-box!important;
        justify-content:stretch!important;
        align-items:start!important;
    }

    .event-wizard-progress.is-surpria-timeline li{
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        justify-self:stretch!important;
        align-self:start!important;
        display:flex!important;
        justify-content:center!important;
        padding:0 12px!important;
        box-sizing:border-box!important;
    }

    .event-wizard-progress.is-surpria-timeline button{
        width:100%!important;
        max-width:none!important;
        flex:1 1 auto!important;
        box-sizing:border-box!important;
    }

    .event-wizard-progress.is-surpria-timeline ol::before{
        left:10%!important;
        right:10%!important;
        width:auto!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy{
        width:100%!important;
        max-width:none!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy strong,
    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy small{
        width:100%!important;
        text-align:center!important;
    }
}


/* SURPRIA Wizard V3.3.6 — timeline root width fix
   IMPORTANT: the NAV must NOT be the 4-column grid; its OL is the grid. */
@media (min-width:901px){
    .event-wizard-progress.is-surpria-timeline{
        display:block!important;
        grid-template-columns:none!important;
        grid-auto-columns:auto!important;
        grid-auto-flow:row!important;
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        box-sizing:border-box!important;
        padding:24px 32px 20px!important;
    }

    .event-wizard-progress.is-surpria-timeline > ol{
        position:relative!important;
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        grid-template-rows:auto!important;
        grid-auto-flow:row!important;
        grid-auto-columns:auto!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        gap:0!important;
        box-sizing:border-box!important;
    }

    .event-wizard-progress.is-surpria-timeline > ol > li{
        display:flex!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        grid-row:1!important;
        justify-content:center!important;
        padding:0 16px!important;
        box-sizing:border-box!important;
    }

    .event-wizard-progress.is-surpria-timeline > ol > li > button{
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-number{
        position:relative!important;
        z-index:2!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        flex:0 0 38px!important;
        border-radius:50%!important;
        background:#f6f1e9!important;
        border:1px solid rgba(24,24,24,.08)!important;
        box-shadow:0 0 0 7px #fffaf2!important;
        font-weight:800!important;
        line-height:1!important;
    }

    .event-wizard-progress.is-surpria-timeline li.is-active .event-wizard-progress-number,
    .event-wizard-progress.is-surpria-timeline li[aria-current="step"] .event-wizard-progress-number,
    .event-wizard-progress.is-surpria-timeline button[aria-current="step"] .event-wizard-progress-number{
        background:#ffa915!important;
        border-color:#ffa915!important;
        color:#111!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy{
        width:100%!important;
        min-width:0!important;
        margin-top:7px!important;
        text-align:center!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy strong{
        display:block!important;
        width:100%!important;
        white-space:normal!important;
        overflow:visible!important;
        text-overflow:clip!important;
        line-height:1.2!important;
        text-align:center!important;
    }

    .event-wizard-progress.is-surpria-timeline .event-wizard-progress-copy small{
        display:block!important;
        width:100%!important;
        white-space:nowrap!important;
        text-align:center!important;
        margin-top:3px!important;
    }

    .event-wizard-progress.is-surpria-timeline > ol::before{
        content:""!important;
        position:absolute!important;
        left:10%!important;
        right:10%!important;
        top:18px!important;
        height:2px!important;
        background:rgba(24,24,24,.12)!important;
        z-index:0!important;
    }
}


/* SURPRIA Wizard V3.3.7 — Step 2 preview is presentation-only */
.event-form.is-theme-preview-readonly #themePreviewContextBar,
.event-form.is-theme-preview-readonly .theme-preview-framing-panel,
.event-form.is-theme-preview-readonly .event-inline-editor-guide,
.event-form.is-theme-preview-readonly .event-step3-editor-card {
    display:none!important;
}


/* SURPRIA Wizard V3.4.3 — Étape 4 Récapitulatif */
.event-review-summary{
    display:grid;
    gap:18px;
    margin-top:6px;
}
.event-review-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:22px 24px;
    border:1px solid rgba(24,24,24,.08);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(255,169,21,.10),rgba(255,255,255,.88));
}
.event-review-kicker{
    display:block;
    margin-bottom:5px;
    color:#b66a00;
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.event-review-hero h3{
    margin:0 0 5px;
    font-size:1.35rem;
    line-height:1.15;
}
.event-review-hero p{
    margin:0;
    max-width:760px;
    opacity:.68;
    line-height:1.5;
}
.event-review-ready{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#ffa915;
    font-size:1.35rem;
    font-weight:900;
}
.event-review-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.event-review-card{
    min-width:0;
    padding:16px 17px;
    border:1px solid rgba(24,24,24,.09);
    border-radius:17px;
    background:#fff;
}
.event-review-card.is-wide{
    grid-column:1 / -1;
}
.event-review-card.is-muted .event-review-value{
    opacity:.58;
}
.event-review-card-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
    margin-bottom:9px;
}
.event-review-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:10px;
    background:#fff8eb;
}
.event-review-label{
    min-width:0;
    color:#625b52;
    font-size:.77rem;
    font-weight:850;
    letter-spacing:.025em;
    text-transform:uppercase;
}
.event-review-edit{
    appearance:none;
    border:0;
    background:transparent;
    color:#a45f00;
    cursor:pointer;
    padding:4px 2px;
    font:inherit;
    font-size:.78rem;
    font-weight:850;
}
.event-review-edit:hover{
    text-decoration:underline;
}
.event-review-value{
    font-size:.98rem;
    font-weight:750;
    line-height:1.45;
    overflow-wrap:anywhere;
}
.event-review-next{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:17px 18px;
    border-radius:17px;
    background:#181818;
    color:#fff;
}
.event-review-next-icon{
    flex:0 0 auto;
    font-size:1.35rem;
}
.event-review-next strong{
    display:block;
    margin-bottom:3px;
}
.event-review-next p{
    margin:0;
    opacity:.72;
    line-height:1.45;
}
.event-wizard-panel[data-wizard-step="4"] > .event-wizard-panel-heading{
    margin-bottom:16px;
}

@media(max-width:700px){
    .event-review-summary{
        gap:12px;
    }
    .event-review-hero{
        padding:17px;
        border-radius:18px;
    }
    .event-review-hero h3{
        font-size:1.18rem;
    }
    .event-review-ready{
        width:40px;
        height:40px;
        flex-basis:40px;
    }
    .event-review-grid{
        grid-template-columns:1fr;
        gap:9px;
    }
    .event-review-card,
    .event-review-card.is-wide{
        grid-column:auto;
        padding:14px;
        border-radius:15px;
    }
    .event-review-card-head{
        grid-template-columns:auto 1fr auto;
    }
    .event-review-value{
        font-size:.92rem;
    }
    .event-review-next{
        padding:15px;
        border-radius:15px;
    }
}


/* SURPRIA Wizard V3.4.5 — desktop timeline must not cover step content */
@media (min-width:901px){
    .event-wizard-progress.is-surpria-timeline{
        position:relative!important;
        top:auto!important;
        z-index:1!important;
        margin-bottom:18px!important;
        overflow:visible!important;
    }

    .event-wizard-panels{
        position:relative!important;
        z-index:2!important;
    }

    .event-wizard-panel-heading{
        position:relative!important;
        z-index:2!important;
        margin-top:0!important;
    }
}

/* ========================================================================== 
   SURPRIA P1 FR — Wizard émotion + conversion
   Ajustements d'interface uniquement : aucune logique métier modifiée.
   ========================================================================== */

.event-wizard-panel-heading {
    max-width: 760px;
}

.event-wizard-panel-heading h2 {
    letter-spacing: -0.025em;
}

.event-wizard-panel-heading p {
    max-width: 640px;
    line-height: 1.55;
}

/* L'occasion doit ressembler à un choix de moment, pas à un formulaire. */
.event-essential-type-section .event-section-heading p,
.event-occasion-theme-section .event-section-heading p {
    max-width: 620px;
}

.event-type-card-inner,
.theme-selection-inner {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.event-type-card:hover .event-type-card-inner,
.theme-selection-card:hover .theme-selection-inner {
    transform: translateY(-2px);
}

/* Le nom interne est volontairement plus discret que le contenu émotionnel. */
.event-essential-details-section {
    padding-bottom: 22px;
}

.event-essential-details-section .event-field-primary {
    max-width: 680px;
}

.event-essential-details-section .event-field-secondary {
    opacity: .84;
}

/* Média : bloc prioritaire de l'étape de personnalisation. */
.event-final-media-section {
    margin-top: 4px;
    border: 1px solid rgba(37, 99, 235, .14);
    background: linear-gradient(180deg, rgba(239, 246, 255, .72), rgba(255, 255, 255, .92));
}

.event-final-media-section .event-section-heading h2 {
    margin-bottom: 6px;
}

.event-final-media-section .event-media-upload {
    min-height: 190px;
}

/* L'aperçu devient l'action principale : on parle du résultat, pas de l'outil. */
.event-step3-editor-card {
    border-color: rgba(124, 58, 237, .16) !important;
    background: linear-gradient(145deg, rgba(245, 243, 255, .9), rgba(255, 255, 255, .96)) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.event-step3-editor-card .event-visual-editor-kicker {
    font-weight: 800;
    letter-spacing: .02em;
}

.event-step3-editor-button {
    min-height: 54px;
}

.event-step3-editor-tips span {
    border: 1px solid rgba(15, 23, 42, .06);
}

/* Les réglages restent disponibles mais ne monopolisent plus l'étape. */
.event-experience-section.is-simplified-experience > .event-section-heading {
    display: none;
}

.event-experience-section.is-simplified-experience {
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 18px;
    background: rgba(248, 250, 252, .76);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
    overflow: hidden;
}

/* Un seul bloc visuel : le <details> sert uniquement au repli, sans créer
   une seconde carte à l'intérieur de la section. */
.event-experience-options {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.event-experience-options > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.event-experience-options > summary::-webkit-details-marker {
    display: none;
}

.event-experience-options-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
}

.event-experience-options-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.event-experience-options-copy strong {
    font-size: .95rem;
}

.event-experience-options-copy small {
    color: var(--muted, #64748b);
    line-height: 1.35;
}

.event-experience-options-action {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 800;
    color: var(--primary, #2563eb);
}

.event-experience-options[open] .event-experience-options-action::after {
    content: ' ×';
}

.event-experience-options > .event-fields-grid {
    padding: 4px 16px 16px;
    border-top: 1px solid rgba(15, 23, 42, .07);
}

/* Récapitulatif : le dernier écran doit ressembler à un accomplissement. */
.event-review-hero {
    position: relative;
    overflow: hidden;
}

.event-review-kicker {
    text-transform: none;
    letter-spacing: 0;
}

.event-review-ready {
    box-shadow: 0 10px 24px rgba(16, 185, 129, .14);
}

.event-review-next {
    border: 1px solid rgba(124, 58, 237, .14);
    background: linear-gradient(135deg, rgba(245, 243, 255, .88), rgba(255, 255, 255, .96));
}

@media (max-width: 700px) {
    .event-final-media-section {
        padding: 16px;
    }

    .event-final-media-section .event-media-upload {
        min-height: 155px;
    }

    .event-experience-options > summary {
        padding: 13px;
    }

    .event-experience-options-copy small {
        font-size: .76rem;
    }

    .event-experience-options-action {
        font-size: .76rem;
    }
}

/* ================================================================
   SURPRIA P1.2 — Étape 3 : hiérarchie créative complète
   Personnalisation -> langue -> réglages -> aperçu final
   ================================================================ */

.event-editor-page .event-wizard-panel[data-wizard-step="3"] {
    --step3-card-radius: 18px;
}

/* 1. La personnalisation devient la première et principale action. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
    order: 1;
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid rgba(124, 58, 237, .18) !important;
    border-radius: var(--step3-card-radius);
    background: linear-gradient(145deg, rgba(250, 245, 255, .96), rgba(255, 255, 255, .98)) !important;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading h3 {
    margin: 4px 0 7px;
    font-size: 1.18rem;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading p {
    max-width: 620px;
    margin: 0;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-button {
    min-height: 52px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mini aperçu uniquement utile lorsque le vrai téléphone n'est pas visible. */
.event-step3-mini-preview {
    display: none;
}

/* 2. La langue n'est plus une grosse fiche de configuration. */
.event-editor-page .event-essential-details-section.is-language-only {
    order: 2;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: var(--step3-card-radius);
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
}

.event-editor-page .event-essential-details-section.is-language-only > .event-section-heading {
    margin-bottom: 10px;
}

.event-editor-page .event-essential-details-section.is-language-only .event-section-kicker {
    margin-bottom: 3px;
}

.event-editor-page .event-essential-details-section.is-language-only .event-section-heading h2 {
    font-size: 1rem;
    margin: 0;
}

.event-editor-page .event-essential-details-section.is-language-only .event-section-heading p {
    display: none;
}

.event-editor-page .event-essential-details-section.is-language-only .event-fields-grid {
    display: block;
}

.event-editor-page .event-essential-details-section.is-language-only .event-field-secondary {
    opacity: 1;
}

.event-editor-page .event-essential-details-section.is-language-only .event-field-secondary label {
    font-size: .78rem;
    margin-bottom: 6px;
}

.event-editor-page .event-essential-details-section.is-language-only select {
    min-height: 46px;
}

/* 3. Les réglages sont une ligne compacte, jamais une grosse carte vide. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section.is-simplified-experience {
    order: 3;
    margin: 0 0 14px;
    border-radius: 14px;
    box-shadow: none;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options > summary {
    min-height: 66px;
    padding: 10px 14px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-copy {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-copy small::before {
    content: '· ';
}

/* Les sections média éventuelles restent après la personnalisation et avant les réglages. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
    order: 2;
}

/* 4. L'aperçu desktop parle du résultat plutôt que du thème. */
.event-editor-page .theme-live-preview .theme-preview-label {
    letter-spacing: .07em;
    font-weight: 800;
}

.event-editor-page .theme-live-preview-header #themePreviewName::before {
    content: 'Live preview · ';
    font-weight: 500;
    color: var(--muted, #64748b);
}

@media (max-width: 700px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card {
        margin-bottom: 12px;
        padding: 14px;
    }

    .event-step3-mini-preview {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        border: 1px solid rgba(124, 58, 237, .12);
        border-radius: 13px;
        background: rgba(255, 255, 255, .72);
    }

    .event-step3-mini-preview-phone {
        display: grid;
        place-items: center;
        width: 36px;
        height: 46px;
        flex: 0 0 36px;
        border: 2px solid rgba(15, 23, 42, .72);
        border-radius: 9px;
        font-size: 1.05rem;
        color: rgba(124, 58, 237, .9);
        background: linear-gradient(180deg, #fff, #fff8f3);
    }

    .event-step3-mini-preview-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .event-step3-mini-preview-copy small {
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted, #64748b);
    }

    .event-step3-mini-preview-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .94rem;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-heading h3 {
        font-size: 1.06rem;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-tips {
        display: none;
    }

    .event-editor-page .event-essential-details-section.is-language-only {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .event-editor-page .event-essential-details-section.is-language-only > .event-section-heading {
        margin-bottom: 8px;
    }

    .event-editor-page .event-essential-details-section.is-language-only .event-section-heading h2 {
        font-size: .94rem;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section.is-simplified-experience {
        margin-bottom: 10px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options > summary {
        min-height: 58px;
        padding: 9px 11px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-copy {
        display: grid;
        gap: 1px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-copy small::before {
        content: '';
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-options-action {
        font-size: .74rem;
    }
}

/* SURPRIA P1.3 — colonne d'aperçu = éditeur, pas lecteur */
.theme-preview-editor-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    margin: 12px 14px 6px;
    border: 1px solid rgba(15,23,42,.09);
    border-radius: 13px;
    background: rgba(248,250,252,.92);
}
.theme-preview-editor-tab {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
}
.theme-preview-editor-tab span {
    display: inline-grid;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-right: 5px;
    border-radius: 50%;
    background: rgba(15,23,42,.07);
    font-size: .72rem;
}
.theme-preview-editor-tab.is-active {
    background: #171717;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
}
.theme-preview-editor-tab.is-active span { background: rgba(255,255,255,.16); }
.theme-preview-editor-mode-copy {
    display: grid;
    gap: 2px;
    margin: 0 18px 10px;
}
.theme-preview-editor-mode-copy strong { font-size: .9rem; }
.theme-preview-editor-mode-copy small { color: #64748b; line-height: 1.35; }

/* La barre lecteur historique n'est plus une commande d'édition. */
.event-form.is-step3-focused-editor .theme-preview-player-bar,
.event-form.is-step3-focused-editor .theme-preview-editor-controls { display: none !important; }

.event-step4-full-experience {
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid rgba(249,115,22,.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,247,237,.9), rgba(255,255,255,.96));
}
.event-step4-full-kicker {
    display: block;
    margin-bottom: 6px;
    color: #c45f00;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .09em;
}
.event-step4-full-experience h3 { margin: 0 0 6px; font-size: 1.2rem; }
.event-step4-full-experience p { margin: 0 0 14px; color: #64748b; }
.event-step4-full-play { width: 100%; }

@media (max-width: 700px) {
    .theme-preview-editor-tabs { margin: 10px 10px 6px; }
    .theme-preview-editor-tab { min-height: 44px; font-size: .9rem; }
    .theme-preview-editor-mode-copy { margin: 0 13px 9px; }
}

/* SURPRIA Wizard P1.4 — Étape 4 : validation finale, pas d'édition */
.event-step4-preview-intro{
    display:none;
}

/* L'étape 4 garde le téléphone, mais retire les commandes propres à l'éditeur. */
.event-form.is-review-step .theme-preview-editor-tabs,
.event-form.is-review-step .theme-preview-editor-mode-copy,
.event-form.is-review-step .theme-preview-player-bar,
.event-form.is-review-step .theme-preview-editor-controls,
.event-form.is-review-step #themePreviewContextBar,
.event-form.is-review-step .theme-preview-framing-panel{
    display:none!important;
}

.event-form.is-review-step .event-wizard-panel[data-wizard-step="4"] > .event-wizard-panel-heading{
    margin-bottom:18px;
}

/* Le récapitulatif commence directement par les éléments à contrôler. */
.event-form.is-review-step .event-review-summary{
    margin-top:0;
    gap:14px;
}

.event-form.is-review-step .event-review-next{
    border:1px solid rgba(123,92,255,.16);
    background:linear-gradient(135deg,rgba(248,245,255,.98),rgba(255,255,255,.98));
    color:#25202d;
    box-shadow:none;
}
.event-form.is-review-step .event-review-next-kicker{
    display:block;
    margin-bottom:4px;
    color:#7457c8;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.event-form.is-review-step .event-review-next strong{
    color:#211a29;
}
.event-form.is-review-step .event-review-next p{
    color:#6d6474;
    opacity:1;
}
.event-form.is-review-step .event-review-next-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:#f0eaff;
}

/* Le CTA de sortie dit précisément où l'utilisateur va. */
.event-form.is-review-step .event-wizard-submit{
    min-width:min(100%,260px);
}

@media (min-width:901px){
    /* Sur desktop, le bouton de lecture appartient à la colonne aperçu. */
    .event-form.is-review-step .event-step4-full-experience{
        display:none!important;
    }
    .event-form.is-review-step .event-step4-preview-intro{
        display:grid;
        gap:14px;
        margin:0 0 16px;
        padding:17px 18px;
        border:1px solid rgba(249,115,22,.15);
        border-radius:17px;
        background:linear-gradient(135deg,rgba(255,248,238,.94),rgba(255,255,255,.98));
    }
    .event-step4-preview-intro-copy{
        display:grid;
        gap:3px;
    }
    .event-step4-preview-intro-copy > span{
        color:#b85e00;
        font-size:.69rem;
        font-weight:900;
        letter-spacing:.09em;
    }
    .event-step4-preview-intro-copy > strong{
        font-size:1.05rem;
        line-height:1.25;
    }
    .event-step4-preview-intro-copy > small{
        color:#6b7280;
        line-height:1.4;
    }
    .event-step4-preview-play{
        width:100%;
        min-height:44px;
    }

    /* L'en-tête standard est utile en édition mais redondant en validation. */
    .event-form.is-review-step .theme-live-preview-header{
        display:none!important;
    }
}

@media (max-width:900px){
    /* Sur mobile le téléphone reste dans son overlay ; on conserve donc un seul
       accès clair à la lecture complète au début de l'étape 4. */
    .event-form.is-review-step .event-step4-preview-intro{
        display:none!important;
    }
    .event-form.is-review-step .event-step4-full-experience{
        display:block;
        margin-bottom:18px;
        padding:17px 16px;
        border-radius:17px;
    }
    .event-form.is-review-step .event-step4-full-experience h3{
        font-size:1.12rem;
    }
}

@media (max-width:700px){
    .event-form.is-review-step .event-wizard-panel[data-wizard-step="4"] > .event-wizard-panel-heading{
        margin-bottom:14px;
    }
    .event-form.is-review-step .event-review-grid{
        gap:9px;
    }
    .event-form.is-review-step .event-review-next{
        padding:14px;
    }
    .event-form.is-review-step .event-wizard-submit{
        width:100%;
        min-width:0;
    }
}
/* Destination Reveal Premium settings */
.destination-experience-settings{padding:22px;border:1px solid rgba(59,119,151,.18);border-radius:22px;background:linear-gradient(145deg,rgba(232,247,252,.8),rgba(255,248,233,.72))}.destination-settings-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}.destination-settings-heading>span{font-size:1.6rem}.destination-settings-heading label{display:block;font-weight:850}.destination-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.destination-mode-grid label{cursor:pointer}.destination-mode-grid input{position:absolute;opacity:0;pointer-events:none}.destination-mode-grid label>span{display:block;height:100%;padding:16px;border:1px solid rgba(40,75,95,.14);border-radius:16px;background:#fff;transition:.18s}.destination-mode-grid strong,.destination-mode-grid small{display:block}.destination-mode-grid small{margin-top:6px;color:var(--muted,#6b7280);line-height:1.45}.destination-mode-grid input:checked+span{border-color:#3988ad;box-shadow:0 0 0 3px rgba(57,136,173,.12)}.destination-clue-fields{display:grid;gap:11px;margin-top:16px}.destination-clue-fields label>span{display:block;margin-bottom:6px;font-size:.78rem;font-weight:800}.destination-clue-fields input{width:100%}.destination-clue-rhythm{margin-top:5px;padding:15px;border-radius:16px;background:rgba(255,255,255,.72)}.destination-clue-rhythm>label{display:block;font-weight:850}.destination-clue-rhythm select{width:100%;margin-top:10px}.destination-clue-estimate{display:block;margin-top:10px;color:#256e91;font-size:.82rem}@media(max-width:700px){.destination-mode-grid{grid-template-columns:1fr}.destination-experience-settings{padding:17px}}

/* Event wizard — step 3 guide (kept in stylesheet for CSP compliance) */
.event-step3-editor-card{display:grid;gap:14px;margin-top:18px;padding:18px;border:1px solid rgba(37,99,235,.16);border-radius:18px;background:rgba(239,246,255,.58)}
.event-step3-editor-heading h3{margin:4px 0 6px}
.event-step3-editor-heading p{margin:0}
.event-step3-editor-button{width:100%;justify-content:center}
.event-step3-editor-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.event-step3-editor-tips span{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.82);font-size:.84rem;line-height:1.3}
.event-step3-editor-tips b{flex:0 0 auto;font-size:1rem}
@media(max-width:700px){
    .event-step3-editor-card{gap:10px;margin-top:12px;padding:12px;border-radius:15px}
    .event-step3-editor-heading h3{font-size:1.05rem;margin:2px 0 4px}
    .event-step3-editor-heading p{font-size:.86rem;line-height:1.4}
    .event-step3-editor-button{min-height:52px;position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:8;box-shadow:0 10px 24px rgba(15,23,42,.14)}
    .event-step3-editor-tips{display:flex;gap:7px;overflow-x:auto;padding:1px 0 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .event-step3-editor-tips::-webkit-scrollbar{display:none}
    .event-step3-editor-tips span{flex:0 0 auto;min-width:max-content;padding:7px 9px;border-radius:999px;font-size:.76rem;scroll-snap-align:start}
    .event-step3-editor-tips b{font-size:.9rem}
    .event-step3-editor-card .event-inline-save-status{font-size:.75rem}
}

/* P1 — création invitée */
.event-create-draft-notice.event-guest-notice{border-color:rgba(143,93,35,.18);background:#fff8ed;color:#4b3824}


/* SURPRIA P2 — choix de thèmes plus court et explicite */
.theme-show-all-button{
    display:block;
    width:fit-content;
    margin:14px auto 0;
    padding:10px 16px;
    border:1px solid rgba(24,24,24,.12);
    border-radius:999px;
    background:#fff;
    color:#4e463d;
    font:inherit;
    font-size:.86rem;
    font-weight:850;
    cursor:pointer;
}
.theme-show-all-button:hover{border-color:rgba(244,165,28,.5);background:#fffaf1}
.theme-selection-card[hidden]{display:none!important}


/* ==========================================================
   SURPRIA — Wizard theme catalogue / showroom
   Step 2 = choose a style. Step 3 = personalize MY surprise.
   ========================================================== */
.event-form[data-surpria-active-step="2"] .event-editor-layout{
    grid-template-columns:minmax(0,1fr)!important;
}
.event-form[data-surpria-active-step="2"] .event-editor-preview-column{
    display:none!important;
}
.event-form[data-surpria-active-step="2"] .theme-selection-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.theme-card-quick-preview{
    appearance:none;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:10px;
    min-height:38px;
    padding:8px 12px;
    border:1px solid rgba(24,24,27,.12);
    border-radius:12px;
    background:rgba(255,255,255,.9);
    color:inherit;
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.theme-card-quick-preview:hover,
.theme-card-quick-preview:focus-visible{
    transform:translateY(-1px);
    border-color:rgba(24,24,27,.28);
    box-shadow:0 8px 20px rgba(24,24,27,.08);
    outline:none;
}

.theme-showroom-dialog{
    width:min(1040px,calc(100vw - 32px));
    max-width:none;
    max-height:min(880px,calc(100dvh - 32px));
    margin:auto;
    padding:0;
    border:0;
    border-radius:26px;
    background:#fff;
    color:#171717;
    box-shadow:0 30px 90px rgba(17,17,17,.24);
    overflow:hidden;
}
.theme-showroom-dialog::backdrop{
    background:rgba(18,18,22,.62);
    backdrop-filter:blur(8px);
}
.theme-showroom-shell{
    display:flex;
    flex-direction:column;
    max-height:min(880px,calc(100dvh - 32px));
}
.theme-showroom-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:22px 24px 18px;
    border-bottom:1px solid rgba(20,20,20,.08);
}
.theme-showroom-heading{
    display:grid;
    gap:4px;
}
.theme-showroom-kicker{
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.55;
}
.theme-showroom-heading strong{
    font-size:clamp(20px,2.4vw,30px);
    line-height:1.08;
}
.theme-showroom-heading small{
    max-width:660px;
    font-size:13px;
    line-height:1.45;
    opacity:.62;
}
.theme-showroom-close{
    appearance:none;
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(20,20,20,.1);
    border-radius:50%;
    background:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.theme-showroom-body{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    gap:28px;
    padding:24px;
    overflow:auto;
}
.theme-showroom-preview-column{
    min-width:0;
    display:grid;
    justify-items:center;
    align-content:start;
    gap:14px;
}
.theme-showroom-tabs{
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:999px;
    background:#f3f3f4;
}
.theme-showroom-tabs button{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:9px 15px;
    background:transparent;
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
}
.theme-showroom-tabs button.is-active{
    background:#fff;
    box-shadow:0 3px 12px rgba(20,20,20,.08);
}
.theme-showroom-live-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#f3f3f4;
    color:#34343a;
    font-size:12px;
    font-weight:800;
}
.theme-showroom-live-badge span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#e34b4b;
    box-shadow:0 0 0 5px rgba(227,75,75,.12);
    animation:themeShowroomLivePulse 1.6s ease-in-out infinite;
}
@keyframes themeShowroomLivePulse{
    50%{transform:scale(.72);opacity:.62}
}
.theme-showroom-phone{
    width:min(100%,390px);
    padding:9px;
    border-radius:34px;
    background:#111216;
    box-shadow:0 22px 55px rgba(18,18,20,.18);
}
.theme-showroom-phone-top{
    height:20px;
    display:grid;
    place-items:center;
}
.theme-showroom-phone-top span{
    width:76px;
    height:5px;
    border-radius:99px;
    background:#35363b;
}
.theme-showroom-screen{
    height:min(610px,64dvh);
    min-height:470px;
    border-radius:25px;
    overflow:hidden;
    background:#f5f5f5;
}
.theme-showroom-screen iframe{
    width:100%;
    height:100%;
    display:block;
    border:0;
    background:#fff;
}
.theme-showroom-summary{
    align-self:center;
    display:grid;
    gap:16px;
}
.theme-showroom-summary h3{
    margin:0;
    font-size:28px;
    line-height:1.08;
}
.theme-showroom-tier{
    width:max-content;
    max-width:100%;
    padding:6px 10px;
    border-radius:999px;
    background:#f3f3f4;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.theme-showroom-tier.is-premium{
    background:#fff3cf;
    color:#7b5b00;
}
.theme-showroom-features{
    display:grid;
    gap:10px;
    padding:16px;
    border:1px solid rgba(20,20,20,.08);
    border-radius:18px;
    background:#fafafa;
}
.theme-showroom-features span{
    display:grid;
    grid-template-columns:26px 1fr;
    align-items:center;
    gap:8px;
    font-size:13px;
    line-height:1.35;
}
.theme-showroom-features b{
    font-size:18px;
}
.theme-showroom-select.is-selected{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
body.theme-showroom-open{
    overflow:hidden;
}

@media (max-width:900px){
    .event-form[data-surpria-active-step="2"] .theme-selection-grid{
        grid-template-columns:none;
    }
    .theme-showroom-dialog{
        width:100vw;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }
    .theme-showroom-shell{
        height:100dvh;
        max-height:none;
    }
    .theme-showroom-header{
        padding:16px 16px 12px;
    }
    .theme-showroom-heading small{
        display:none;
    }
    .theme-showroom-body{
        grid-template-columns:1fr;
        gap:18px;
        padding:14px 16px 24px;
    }
    .theme-showroom-screen{
        height:min(560px,62dvh);
        min-height:420px;
    }
    .theme-showroom-summary{
        align-self:auto;
    }
    .theme-showroom-summary h3,
    .theme-showroom-features{
        display:none;
    }
}


/* V3.4.2 — La carte sélectionne; le bouton œil ouvre seulement l'aperçu. */
.event-form[data-surpria-active-step="2"] .theme-selection-card{
    cursor:pointer;
}
.event-form[data-surpria-active-step="2"] .theme-selection-card .theme-selection-cta{
    display:flex;
    align-items:center;
    gap:6px;
}
.event-form[data-surpria-active-step="2"] .theme-selection-card .theme-selection-cta::before{
    content:"👁";
}
.theme-showroom-actions{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
    gap:10px;
    margin-top:2px;
}
.theme-showroom-back,
.theme-showroom-select{
    width:100%;
}
@media (max-width:600px){
    .theme-showroom-actions{
        grid-template-columns:1fr;
    }
    .theme-showroom-select{
        order:-1;
    }
}


/* V3.4.1 — robust showroom overlay (no native <dialog> dependency) */
.theme-showroom-dialog[hidden]{
    display:none!important;
}
.theme-showroom-dialog{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:16px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(18,18,22,.66)!important;
    backdrop-filter:blur(8px);
    overflow:auto!important;
}
.theme-showroom-dialog::backdrop{
    display:none!important;
}
.theme-showroom-dialog .theme-showroom-shell{
    width:min(1040px,100%);
    max-height:calc(100dvh - 32px);
    background:#fff;
    border-radius:26px;
    box-shadow:0 30px 90px rgba(17,17,17,.28);
    overflow:hidden;
}
@media (max-width:900px){
    .theme-showroom-dialog{
        padding:0!important;
        place-items:stretch!important;
    }
    .theme-showroom-dialog .theme-showroom-shell{
        width:100%;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }
}


/* ==========================================================================
   SURPRIA V3.5 — Theme discovery modal + desktop hover preview
   ========================================================================== */
.theme-discovery-modal[hidden],
.theme-discovery-hover[hidden]{
    display:none!important;
}
.theme-discovery-modal{
    position:fixed;
    inset:0;
    z-index:2147483600;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(15,15,19,.68);
    backdrop-filter:blur(9px);
}
.theme-discovery-modal-card{
    width:min(920px,100%);
    max-height:calc(100dvh - 36px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:26px;
    background:#fff;
    box-shadow:0 32px 100px rgba(0,0,0,.32);
}
.theme-discovery-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px 16px;
    border-bottom:1px solid rgba(20,20,20,.08);
}
.theme-discovery-modal-header>div{
    display:grid;
    gap:3px;
}
.theme-discovery-modal-header span{
    font-size:11px;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.55;
}
.theme-discovery-modal-header strong{
    font-size:24px;
    line-height:1.08;
}
.theme-discovery-modal-header small{
    font-size:13px;
    opacity:.62;
}
.theme-discovery-close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(20,20,20,.1);
    border-radius:50%;
    background:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.theme-discovery-modal-content{
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:18px 22px 22px;
    overflow:auto;
}
.theme-discovery-preview{
    width:100%;
    display:grid;
    justify-items:center;
    gap:12px;
}
.theme-discovery-tabs{
    display:flex;
    gap:5px;
    padding:5px;
    border-radius:999px;
    background:#f2f2f3;
}
.theme-discovery-tabs button{
    border:0;
    border-radius:999px;
    padding:8px 15px;
    background:transparent;
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
}
.theme-discovery-tabs button.is-active{
    background:#fff;
    box-shadow:0 3px 12px rgba(20,20,20,.09);
}
.theme-discovery-device{
    width:min(390px,100%);
    padding:8px;
    border-radius:32px;
    background:#111216;
    box-shadow:0 18px 50px rgba(20,20,20,.18);
}
.theme-discovery-device-top{
    height:19px;
    display:grid;
    place-items:center;
}
.theme-discovery-device-top span{
    width:74px;
    height:5px;
    border-radius:999px;
    background:#35363b;
}
.theme-discovery-device iframe{
    width:100%;
    height:min(570px,60dvh);
    min-height:430px;
    display:block;
    border:0;
    border-radius:24px;
    background:#fff;
}
.theme-discovery-actions{
    width:min(620px,100%);
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:10px;
}
body.theme-discovery-open{
    overflow:hidden;
}

/* Desktop hover preview */
.theme-discovery-hover{
    position:fixed;
    z-index:2147483500;
    padding:10px;
    border:1px solid rgba(20,20,20,.09);
    border-radius:20px;
    background:#fff;
    box-shadow:0 22px 65px rgba(20,20,20,.24);
    pointer-events:none;
    opacity:0;
    transform:translateY(5px) scale(.985);
    transition:opacity .14s ease,transform .14s ease;
}
.theme-discovery-hover.is-visible{
    opacity:1;
    transform:none;
}
.theme-discovery-hover-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:2px 3px 8px;
}
.theme-discovery-hover-head span{
    font-size:10px;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:.55;
}
.theme-discovery-hover-head strong{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}
.theme-discovery-hover-screen{
    overflow:hidden;
    border-radius:14px;
    background:#f3f3f3;
}
.theme-discovery-hover-screen iframe{
    width:100%;
    height:390px;
    display:block;
    border:0;
    background:#fff;
}
.theme-discovery-hover>small{
    display:block;
    padding:8px 4px 2px;
    font-size:11px;
    line-height:1.35;
    opacity:.6;
}

@media (max-width:900px){
    .theme-discovery-hover{
        display:none!important;
    }
    .theme-discovery-modal{
        padding:0;
        place-items:stretch;
    }
    .theme-discovery-modal-card{
        width:100%;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }
    .theme-discovery-modal-header{
        padding:14px 16px 12px;
    }
    .theme-discovery-modal-header small{
        display:none;
    }
    .theme-discovery-modal-content{
        padding:12px 14px 18px;
    }
    .theme-discovery-device iframe{
        height:min(560px,62dvh);
        min-height:410px;
    }
}
@media (max-width:560px){
    .theme-discovery-actions{
        grid-template-columns:1fr;
    }
    .theme-discovery-actions .btn-primary{
        order:-1;
    }
}


/* ==========================================================================
   SURPRIA — ordre canonique de l'étape 3
   1 Média → 2 Textes → 3 Langue → options → 4 Test
   IMPORTANT : remplace les anciennes règles P1.2/V5 encore présentes plus haut.
   ========================================================================== */

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-wizard-panel-heading {
    order: 0 !important;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-final-media-section {
    order: 1 !important;
    margin-top: 0;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-step3-editor-card {
    order: 2 !important;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-essential-details-section.is-language-only {
    order: 3 !important;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-experience-section {
    order: 4 !important;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"]:not([hidden]) > .event-step3-test-experience {
    order: 5 !important;
}

/* Le panneau caché ne doit jamais réapparaître à cause du flex. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"][hidden] {
    display: none !important;
}

/* ==========================================================================\n   SURPRIA P1.1 / P1.2 — visual-first editor + final review\n   ========================================================================== */

/* All five moments share the same width. */
.event-editor-page .event-wizard-progress ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* During personalization the live phone is the main editing surface. */
@media (min-width: 1181px) {
    .event-form.is-visual-editor-step .event-editor-layout {
        grid-template-columns: minmax(360px, .72fr) minmax(560px, 1.28fr);
        gap: 30px;
    }

    .event-form.is-visual-editor-step .event-editor-preview-column .theme-live-preview {
        padding: 20px 22px;
    }

    .event-form.is-visual-editor-step .event-editor-preview-column .theme-preview-frame {
        height: min(67vh, 680px);
    }
}

/* The step-3 form stays intentionally lightweight; secondary controls remain
   available without competing with media, copy and language. */
.event-form.is-visual-editor-step .event-step4-advanced {
    margin-top: 12px;
    border: 1px solid rgba(24,24,24,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.66);
}

.event-form.is-visual-editor-step .event-step4-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.event-form.is-visual-editor-step .event-step4-advanced > summary::-webkit-details-marker {
    display: none;
}

.event-form.is-visual-editor-step .event-step4-advanced > summary small {
    color: var(--text-soft, #6b7280);
    font-size: .72rem;
}

/* Final review is validation, not another configuration form. */
.event-form.is-review-step .event-review-hero {
    border-color: rgba(249,115,22,.16);
    background: linear-gradient(135deg, rgba(255,247,237,.96), rgba(255,255,255,.98));
}

.event-step4-full-experience {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 16px;
    border: 1px solid rgba(249,115,22,.18);
    border-radius: 17px;
    background: #fff8ee;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.event-step4-full-experience > span:first-child {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffa915;
}

.event-step4-full-experience strong,
.event-step4-full-experience small {
    display: block;
}

.event-step4-full-experience small {
    margin-top: 3px;
    color: #6b7280;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .event-editor-page .event-wizard-progress ol {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .event-editor-page .event-wizard-progress-copy strong {
        font-size: .58rem;
    }
}

@media (max-width: 540px) {
    .event-editor-page .event-wizard-progress-copy strong {
        display: none;
    }

    .event-editor-page .event-wizard-progress button {
        justify-content: center;
        padding-inline: 5px;
    }
}

@media (min-width: 901px) {
    /* P1 keeps one explicit full-experience action in the final review too. */
    .event-form.is-review-step .event-step4-full-experience {
        display: flex !important;
    }
}

.theme-free-trial-hint{margin:10px 0 18px;padding:12px 16px;border:1px solid #ebd9a9;border-radius:14px;background:#fff8e8;color:#634715;font-weight:700;line-height:1.5}

/* Step 2: show more of the next theme and keep the choice above mobile actions. */
@media (max-width: 900px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="2"] .theme-selection-card {
        flex: 0 0 min(76vw, 292px) !important;
        width: min(76vw, 292px) !important;
        min-width: min(76vw, 292px) !important;
        max-width: min(76vw, 292px) !important;
    }
    .event-editor-page .event-wizard-panel[data-wizard-step="2"] .theme-selection-preview {
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
        max-height: 165px !important;
    }
    .event-editor-page .event-wizard-panel[data-wizard-step="2"] .theme-selection-content {
        padding: 9px 11px 10px !important;
    }
}

/* One selection check: keep the check inside the card, remove old overlays. */
.event-editor-page .event-wizard-panel[data-wizard-step="2"] .theme-selection-card::after {
    content: none !important;
    display: none !important;
}

/* Five focused creation steps: the media decision has its own panel. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"][hidden],
.event-editor-page .event-wizard-panel[data-wizard-step="4"][hidden],
.event-editor-page .event-wizard-panel[data-wizard-step="5"][hidden],
.event-editor-page .event-final-media-section[hidden]{display:none!important}
.event-editor-page .event-wizard-panel[data-wizard-step="4"] .event-step3-flow{display:grid;gap:16px}
.event-editor-page .event-wizard-panel[data-wizard-step="5"]{max-width:980px;margin-inline:auto}
.event-form.is-review-step .event-wizard-panel[data-wizard-step="5"]>.event-wizard-panel-heading{margin-bottom:16px}
.event-media-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.event-media-choice label{cursor:pointer;min-width:0}
.event-media-choice input{position:absolute;opacity:0}
.event-media-choice span{display:flex;align-items:center;justify-content:center;min-height:62px;height:100%;padding:12px;border:1px solid #e5ded5;border-radius:16px;background:#fff;color:#332b24;text-align:center;font-weight:800;line-height:1.3}
.event-media-choice input:checked+span{border-color:#f4a312;background:#fff8e8;box-shadow:0 0 0 2px rgba(244,163,18,.16)}
.event-media-choice input:focus-visible+span{outline:2px solid #171717;outline-offset:2px}
.event-media-choice-note{margin:0 0 12px;padding:12px;border-radius:12px;background:#fff8e8;color:#57401f;font-size:.85rem;line-height:1.4}
@media(min-width:901px){
 .event-editor-page .event-wizard-progress.is-surpria-timeline>ol{grid-template-columns:repeat(5,minmax(0,1fr))!important}
 .event-editor-page .event-wizard-progress.is-surpria-timeline>ol::before{left:10%!important;right:10%!important}
}
@media(max-width:900px){
 .event-media-choice{grid-template-columns:1fr;gap:8px}
 .event-media-choice span{min-height:52px;justify-content:flex-start;text-align:left}
 .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section{margin:0;padding:16px}
 .event-editor-page .event-wizard-panel[data-wizard-step="4"] .event-step3-flow{gap:12px}
}
.event-form[data-surpria-active-step="3"] .event-editor-layout{grid-template-columns:minmax(0,1fr)!important}
.event-form[data-surpria-active-step="3"] .event-editor-preview-column{display:none!important}
/* The wizard has five items: define all five tracks on the nav itself so the
   last item cannot fall into an implicit narrow column after the nav moves. */
@media(min-width:901px){
 .event-form>.event-wizard-progress>ol{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
 }
 .event-form>.event-wizard-progress>ol::before{
  left:10%!important;
  right:10%!important;
 }
 .event-form>.event-wizard-progress>ol>li{
  grid-column:auto!important;
 }
}
@media(min-width:901px){
 .event-form>.event-wizard-progress{margin-bottom:22px}
}
.event-form[data-surpria-active-step="3"] .event-final-media-section .event-section-kicker{display:none}
/* Five-step follow-up: remove legacy 3rd-step height and constrain the text CTA. */
.event-editor-page .event-wizard-panel[data-wizard-step="3"]{min-height:0!important}
.event-editor-page .event-wizard-panel[data-wizard-step="4"] .event-step3-editor-card{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;min-width:0;
}
.event-editor-page .event-wizard-panel[data-wizard-step="4"] .event-step3-editor-heading{min-width:0}
.event-editor-page .event-wizard-panel[data-wizard-step="4"] .event-step3-text-edit-action{
 display:flex!important;align-items:center;justify-content:center;width:100%;min-width:0;
 white-space:normal;writing-mode:horizontal-tb;text-align:center;
}

/* Step 4: edit the real form fields without searching inside the phone. */
.event-form[data-surpria-active-step="4"] .event-step3-editor-card{gap:14px!important}
.event-message-editor{display:grid;gap:12px;min-width:0}
.event-message-editor-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;border-radius:14px;background:#f4f1eb}
.event-message-editor-tab{min-height:40px;border:0;border-radius:10px;background:transparent;color:#48434b;font:inherit;font-weight:800;cursor:pointer}
.event-message-editor-tab.is-active{background:#171717;color:#fff}
.event-message-editor-tab:focus-visible{outline:2px solid #e59900;outline-offset:2px}
.event-message-editor-fields{display:grid;gap:10px}
.event-message-editor-fields[hidden]{display:none!important}
.event-message-editor-explanation{margin:0;padding:9px 11px;border-radius:10px;background:#fff7e7;color:#4d3921;font-size:.82rem;line-height:1.4}
.event-message-editor-language-note{margin:0;color:#625b68;font-size:.75rem;line-height:1.4}
.event-message-editor-field{display:grid;gap:5px;min-width:0;color:#27232c;font-size:.8rem;font-weight:800}
.event-message-editor-input{box-sizing:border-box;width:100%;min-height:42px;padding:10px 12px;border:1px solid #ded9e4;border-radius:11px;background:#fff;color:#1d1b20;font:inherit;font-size:1rem;font-weight:400;line-height:1.4}
textarea.event-message-editor-input{min-height:68px;resize:vertical}
.event-message-editor-input:focus-visible{outline:2px solid #f5a414;outline-offset:1px}

/* Keep the real theme legible while fitting its phone in a shorter viewport. */
@media(min-width:901px){
 .event-form[data-surpria-active-step="4"] .event-editor-preview-column .theme-phone-screen{height:min(56vh,520px)!important;min-height:0!important;overflow:hidden!important}
 .event-form[data-surpria-active-step="4"] .event-editor-preview-column .theme-preview-frame{width:125%!important;height:125%!important;min-height:0!important;transform:scale(.8);transform-origin:top left}
}
@media(max-width:900px){
 .event-form[data-surpria-active-step="4"] .event-step3-editor-heading p{font-size:.85rem;line-height:1.35}
 .event-form[data-surpria-active-step="4"] .event-step3-editor-card{padding:16px!important}
 .event-form[data-surpria-active-step="4"] .event-editor-preview-column .theme-live-preview.is-mobile-open{padding-top:14px!important;padding-bottom:14px!important}
 .event-form[data-surpria-active-step="4"] .event-editor-preview-column .theme-phone-screen{height:clamp(320px,calc(100dvh - 235px),520px)!important;min-height:0!important;overflow:hidden!important}
 .event-form[data-surpria-active-step="4"] .event-editor-preview-column .theme-preview-frame{width:125%!important;height:125%!important;min-height:0!important;transform:scale(.8);transform-origin:top left}
}

/* ==========================================================
   SURPRIA CREATE V2 — UX experiment
   Isolated from event-form.css / production wizard.
   ========================================================== */
.event-create-v2 .event-create-header { max-width: 780px; margin-inline: auto; text-align: center; }
.event-create-v2 .event-create-header h1 { max-width: 720px; margin-inline: auto; }
.event-create-v2 .event-create-header > p { max-width: 650px; margin-inline: auto; }
.event-create-v2 #create-step-1,
.event-create-v2 .event-theme-section { border: 0; box-shadow: none; background: transparent; }
.event-create-v2 #create-step-1 .event-section-number,
.event-create-v2 .event-theme-section .event-section-number { display: none; }
.event-create-v2 #create-step-1 .event-section-heading,
.event-create-v2 .event-theme-section .event-section-heading { text-align: center; justify-content: center; }
.event-create-v2 #create-step-1 .event-section-heading > div,
.event-create-v2 .event-theme-section .event-section-heading > div { max-width: 680px; margin-inline: auto; }
.event-create-v2 #create-step-1 .event-section-kicker,
.event-create-v2 .event-theme-section .event-section-kicker { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(124,58,237,.09); }
.event-create-v2 .event-type-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; max-width: 900px; margin: 28px auto 0; }
.event-create-v2 .event-type-card-inner { min-height: 145px; padding: 22px 14px; border-radius: 24px; flex-direction: column; justify-content: center; gap: 10px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.event-create-v2 .event-type-card:hover .event-type-card-inner { transform: translateY(-3px); }
.event-create-v2 .event-type-card-icon { font-size: 2rem; }
.event-create-v2 .event-type-card input:checked + .event-type-card-inner { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(35,23,69,.12); }
.event-create-v2 .event-type-check { position: absolute; top: 12px; right: 12px; }
.event-create-v2 .event-theme-section { margin-top: 22px; padding-top: 34px; border-top: 1px solid rgba(35,23,69,.08); }
.event-create-v2 .theme-selection-grid { gap: 18px; }
.event-create-v2 .theme-selection-card { border-radius: 26px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.event-create-v2 .theme-selection-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(35,23,69,.13); }
.event-create-v2 .theme-selection-preview { aspect-ratio: 4/3; }
.event-create-v2 .theme-selection-content { padding: 18px; }
.event-create-v2 .theme-card-quick-preview { min-height: 44px; border-radius: 14px; }
.event-create-v2 .theme-show-all-button { margin: 24px auto 0; }
.event-create-v2 .theme-free-trial-hint { max-width: 720px; margin-inline: auto; text-align: center; }
.event-create-v2 .theme-selection-mobile-hint { text-align: center; }
.event-create-v2 .theme-carousel-counter { justify-content: center; }
@media (max-width: 820px) {
  .event-create-v2 .event-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-create-v2 .event-type-card-inner { min-height: 122px; }
}
@media (max-width: 520px) {
  .event-create-v2 .event-create-header { text-align: left; }
  .event-create-v2 #create-step-1 .event-section-heading,
  .event-create-v2 .event-theme-section .event-section-heading { text-align: left; }
  .event-create-v2 #create-step-1 .event-section-heading > div,
  .event-create-v2 .event-theme-section .event-section-heading > div { margin-inline: 0; }
  .event-create-v2 .event-type-grid { gap: 10px; }
  .event-create-v2 .event-type-card-inner { min-height: 108px; padding: 16px 8px; border-radius: 20px; }
  .event-create-v2 .event-type-card-icon { font-size: 1.65rem; }
}


/* ==========================================================
   SURPRIA CREATE V2.1 — lighter, emotional journey
   ========================================================== */
.event-create-v2 .event-section-number { display:none !important; }
.event-create-v2 .event-create-header { margin-top: 8px; margin-bottom: 10px; }
.event-create-v2 .event-create-header .eyebrow { margin-bottom: 10px; }
.event-create-v2 .event-create-header h1 { margin-top: 0; margin-bottom: 8px; line-height: .98; }
.event-create-v2 .event-create-header > p { margin-top: 0; margin-bottom: 12px; }
.event-create-v2 .event-form-notice { margin-top: 10px; margin-bottom: 14px; }
.event-create-v2 .event-wizard-progress { margin-top: 8px; margin-bottom: 18px !important; padding-block: 10px; }
.event-create-v2 .event-wizard-progress ol { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.event-create-v2 .event-wizard-progress ol::before { left: 12.5% !important; right: 12.5% !important; }
.event-create-v2 .event-wizard-progress-number { width: 30px; height: 30px; font-size: .72rem; }
.event-create-v2 .event-wizard-progress-copy small { display:none !important; }
.event-create-v2 .event-wizard-progress-copy strong { font-size: .74rem; }
.event-create-v2 .event-wizard-panel-heading { margin-bottom: 10px; }
.event-create-v2 .event-wizard-panel-heading > span { display:none !important; }
.event-create-v2 #create-step-1 .event-type-grid { margin-top: 18px; }
@media (min-width: 901px) {
  .event-create-v2 .event-create-header h1 { font-size: clamp(2.65rem,4.5vw,4.25rem); }
  .event-create-v2 .event-type-card-inner { min-height: 112px; padding: 16px 14px; }
  .event-create-v2 .event-type-grid { max-width: 760px; }
}
@media (max-width: 700px) {
  .event-create-v2 .event-create-header { margin-top: 0; }
  .event-create-v2 .event-create-header h1 { font-size: clamp(2rem,9vw,2.65rem); line-height: 1.02; }
  .event-create-v2 .event-create-header > p { font-size: .88rem; }
  .event-create-v2 .event-wizard-progress { padding: 7px 4px; margin-bottom: 14px !important; }
  .event-create-v2 .event-wizard-progress-number { display:none; }
  .event-create-v2 .event-wizard-progress-copy strong { font-size: .64rem; white-space:nowrap; }
  .event-create-v2 .event-wizard-progress ol::before { top: 0; }
}


/* ==========================================================
   SURPRIA CREATE V2.2 — Mood showroom
   ========================================================== */
.event-create-v2 .event-wizard-panel-heading > span,
.event-create-v2 .event-section-number { display:none !important; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] > .event-wizard-panel-heading {
  max-width: 720px; margin: 0 auto 20px; text-align:center;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .event-theme-section {
  margin-top:0; padding-top:0; border-top:0;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .event-theme-section > .event-section-heading { display:none; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-mobile-hint { display:none; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-free-trial-hint {
  margin: 0 auto 16px; padding: 10px 14px; max-width:680px; border-radius:14px;
  background:rgba(255,166,0,.08); font-size:.84rem;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-carousel-counter { display:none; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1080px; margin:0 auto;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card {
  background:#fff; border:1px solid rgba(35,23,69,.10); border-radius:24px; overflow:hidden;
  box-shadow:0 10px 28px rgba(35,23,69,.06);
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:not([hidden]) { display:block; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(35,23,69,.12); }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-inner { height:100%; display:flex; flex-direction:column; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-preview { aspect-ratio:16/10; border-radius:0; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-preview img { width:100%; height:100%; object-fit:cover; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-content { display:flex; flex-direction:column; gap:9px; padding:16px; flex:1; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-name-row strong { font-size:1.05rem; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-recommended:not([hidden]) {
  display:inline-flex; width:max-content; font-size:.68rem; font-weight:800; border-radius:999px; padding:5px 8px;
  background:rgba(255,166,0,.13); color:#8a5200;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-experience { min-height:2.4em; opacity:.72; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-card-quick-preview { margin-top:auto; width:100%; }
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:has(input:checked) {
  border-color:#ffa600; box-shadow:0 0 0 2px rgba(255,166,0,.16),0 18px 40px rgba(35,23,69,.10);
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-show-all-button {
  display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px;
  border:1px solid rgba(35,23,69,.13); border-radius:14px; background:#fff; font-weight:800;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-show-all-button[hidden] { display:none !important; }
@media (max-width:900px){
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] > .event-wizard-panel-heading{text-align:left;margin-bottom:14px;}
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-free-trial-hint{text-align:left;}
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-grid{grid-template-columns:1fr;gap:14px;}
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-preview{aspect-ratio:16/9;}
 .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-content{padding:14px;}
}

/* SURPRIA V2.2 — stabilization of journey steps 1–2 */
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321 {
  border-color:#f6a400 !important;
  box-shadow:0 0 0 3px rgba(246,164,0,.14),0 18px 42px rgba(35,23,69,.12);
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321 .theme-selection-check {
  display:flex !important; opacity:1 !important; transform:scale(1) !important;
}
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321 .theme-card-quick-preview::after {
  content:'  ✓';
}
@media (max-width: 640px) {
  .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    padding-inline:0 !important;
  }
  .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card {
    width:100% !important; min-width:0 !important; max-width:none !important;
    scroll-snap-align:none !important;
  }
  .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-carousel-counter { display:none !important; }
}

/* ==========================================================================\n   SURPRIA V2 — Étape 3 unifiée : Personnalisation\n   Média + textes + options du thème vivent sur un seul écran.\n   ========================================================================== */
.event-editor-page .event-wizard-panel[data-wizard-step="3"].event-personalization-unified {
    gap: 16px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] > .event-wizard-panel-heading {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] > .event-wizard-panel-heading h2 {
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-flow {
    display: grid;
    gap: 14px;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-essential-details-section.is-language-only,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section:not([hidden]) {
    border: 1px solid rgba(22,24,35,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 34px rgba(32,24,16,.045);
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section {
    margin-top: 0;
}

.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-message-editor-tabs {
    position: sticky;
    top: 8px;
    z-index: 2;
}

/* Desktop : la preview existante reste le deuxième pilier et suit le scroll. */
@media (min-width: 901px) {
    .event-editor-page.is-visual-editor-step .event-editor-main {
        align-items: start;
    }

    .event-editor-page.is-visual-editor-step .event-editor-preview-column {
        position: sticky;
        top: 18px;
        align-self: start;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-flow {
        gap: 16px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-essential-details-section.is-language-only,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section:not([hidden]) {
        padding: 18px;
    }
}

/* Mobile : personnalisation compacte, preview ouverte à la demande. */
@media (max-width: 900px) {
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] > .event-wizard-panel-heading {
        text-align: left;
        margin-inline: 0;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-flow {
        gap: 10px;
    }

    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-essential-details-section.is-language-only,
    .event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section:not([hidden]) {
        border-radius: 17px;
        box-shadow: none;
    }
}

/* ==========================================================
   SURPRIA V3.1 — Personalization as a true visual editor
   ========================================================== */
@media (min-width: 901px) {
  .event-form[data-surpria-active-step="3"] .event-editor-layout {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 390px !important;
    gap:24px !important;
    align-items:start !important;
  }
  .event-form[data-surpria-active-step="3"] .event-editor-preview-column {
    display:block !important;
    position:relative !important;
    min-width:0;
  }
  .event-form[data-surpria-active-step="3"] .event-editor-preview-column .theme-live-preview {
    display:block !important;
    position:sticky !important;
    top:18px !important;
    max-height:calc(100vh - 36px) !important;
    overflow:auto;
  }
  .event-form[data-surpria-active-step="3"] .event-step3-text-edit-action { display:none !important; }
  .event-form[data-surpria-active-step="3"] .event-wizard-panel[data-wizard-step="3"] > .event-wizard-panel-heading { text-align:left; margin-inline:0; }
}
.event-form[data-surpria-active-step="3"] .event-step3-flow { display:grid; gap:14px; }
.event-form[data-surpria-active-step="3"] .event-step3-editor-card { order:1; }
.event-form[data-surpria-active-step="3"] .event-essential-details-section.is-language-only { order:0; }
.event-form[data-surpria-active-step="3"] .event-experience-section { order:3; }
.event-form[data-surpria-active-step="3"] .event-media-choice { margin:14px 0 10px; }
.event-form[data-surpria-active-step="3"] .event-final-media-section { margin-top:0; }
.event-form[data-surpria-active-step="3"] .event-final-media-section .event-section-heading { margin-bottom:12px; }
.event-form[data-surpria-active-step="3"] .event-message-editor-tabs { position:static; }
@media (max-width:900px) {
  .event-form[data-surpria-active-step="3"] .event-step3-text-edit-action {
    display:flex !important; align-items:center; justify-content:center; width:100%; min-height:48px;
    border-radius:14px; margin-top:10px;
  }
  .event-form[data-surpria-active-step="3"] .event-media-choice { grid-template-columns:1fr 1fr; }
  .event-form[data-surpria-active-step="3"] .event-media-choice span { justify-content:center; text-align:center; min-height:54px; }
}
@media (max-width:520px) {
  .event-form[data-surpria-active-step="3"] .event-media-choice { grid-template-columns:1fr; }
}

/* ==========================================================
   SURPRIA V3.2 — Personnalisation finale
   Chronologie fidèle : consentement + Avant → REC → 3·2·1 → Reveal.
   ========================================================== */
.event-form[data-surpria-active-step="3"] .event-step3-editor-heading {
  display:block !important; width:100%; margin-bottom:14px;
}
.event-form[data-surpria-active-step="3"] .event-step3-editor-heading h3 { margin:5px 0 5px; }
.event-form[data-surpria-active-step="3"] .event-message-editor { width:100%; }
.event-form[data-surpria-active-step="3"] .event-message-editor-fields { width:100%; }
.event-form[data-surpria-active-step="3"] .event-message-editor-explanation {
  display:block; width:100%; padding:12px 14px; border-radius:14px; line-height:1.45;
}
.event-form[data-surpria-active-step="3"] .event-message-editor-explanation.is-before-capture {
  background:rgba(255,166,0,.08);
}
.event-form[data-surpria-active-step="3"] .event-message-editor-explanation.is-recording {
  background:rgba(214,50,50,.07); border:1px solid rgba(214,50,50,.12);
}
.event-form[data-surpria-active-step="3"] .event-final-media-section {
  padding:18px !important;
}
.event-form[data-surpria-active-step="3"] .event-final-media-section > .event-section-heading h2 {
  font-size:1.15rem; margin-bottom:4px;
}
.event-form[data-surpria-active-step="3"] .event-media-choice-compact {
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  margin:12px 0 0 !important; padding-top:12px; border-top:1px solid rgba(22,24,35,.08);
}
.event-form[data-surpria-active-step="3"] .event-media-choice-compact label { margin:0; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-use { display:none; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip span {
  min-height:auto !important; padding:0 !important; border:0 !important; background:transparent !important;
  color:rgba(22,24,35,.62); text-decoration:underline; font-size:.82rem; font-weight:700;
}
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip input:checked + span {
  color:#8a5200; text-decoration:none;
}
/* L'upload est l'action principale : plus de double gros CTA au-dessus. */
.event-form[data-surpria-active-step="3"] > .event-media-choice:not(.event-media-choice-compact),
.event-form[data-surpria-active-step="3"] .event-personalization-unified > .event-media-choice:not(.event-media-choice-compact) { display:none !important; }
@media (min-width:901px) {
  .event-form[data-surpria-active-step="3"] .event-step3-editor-card { padding:20px !important; }
  .event-form[data-surpria-active-step="3"] .event-step3-editor-heading { max-width:none !important; }
  .event-form[data-surpria-active-step="3"] .event-message-editor-tabs { width:100%; }
}
@media (max-width:900px) {
  .event-form[data-surpria-active-step="3"] .event-media-choice-compact { display:flex !important; }
  .event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip { width:auto; }
}

/* V3.2.1 — le choix « sans média » reste toujours réversible. */
.event-form[data-surpria-active-step="3"] .event-final-media-section.is-without-media .event-field:has(#reveal_media),
.event-form[data-surpria-active-step="3"] .event-final-media-section.is-without-media #mediaPreview,
.event-form[data-surpria-active-step="3"] .event-final-media-section.is-without-media #removeMedia {
  display:none !important;
}
.event-form[data-surpria-active-step="3"] .event-no-media-state {
  margin:12px 0 4px;
  padding:16px 18px;
  border:1px solid #e7e0d8;
  border-radius:16px;
  background:#faf8f5;
  color:#342d27;
}
.event-form[data-surpria-active-step="3"] .event-no-media-state strong { display:block; margin-bottom:4px; font-size:.95rem; }
.event-form[data-surpria-active-step="3"] .event-no-media-state p { margin:0; color:#766d65; font-size:.86rem; line-height:1.45; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-use[hidden],
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip[hidden] { display:none !important; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-use:not([hidden]) { display:block !important; width:100%; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-use:not([hidden]) span { border-style:dashed; background:#fff; color:#332b24; }

/* ==========================================================
   SURPRIA V3.3 — Compact media card + on-demand framing
   ========================================================== */
.event-form[data-surpria-active-step="3"] .event-final-media-section:not(.is-without-media) .event-field:has(#reveal_media).has-surpria-media {
  padding:0; border:0; background:transparent;
}
.event-form[data-surpria-active-step="3"] .event-final-media-section .event-media-preview.is-surpria-compact {
  display:grid !important; grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:center;
  min-height:112px; max-height:132px; padding:10px; border:1px solid #e7e0d8; border-radius:16px; background:#fff;
  overflow:hidden;
}
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > img,
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > video {
  display:block !important; width:112px !important; height:92px !important; max-height:92px !important; object-fit:cover; border-radius:12px; transform:none !important;
}
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > img[hidden],
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > video[hidden] { display:none !important; }
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact .event-media-preview-info { min-width:0; align-self:center; }
.event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact .event-media-preview-info strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-form[data-surpria-active-step="3"] .surpria-media-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.event-form[data-surpria-active-step="3"] .surpria-media-action { appearance:none; border:1px solid #e3ddd6; border-radius:11px; background:#fff; padding:9px 12px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; color:#332b24; }
.event-form[data-surpria-active-step="3"] .surpria-media-action:hover { border-color:#f4a312; background:#fff9ee; }
.event-form[data-surpria-active-step="3"] .surpria-media-action.is-danger { color:#a9342f; }
.event-form[data-surpria-active-step="3"] .event-media-remove { display:none !important; }
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-compact-media { border:0 !important; padding:0 !important; background:transparent !important; }
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-compact-media .event-media-empty { display:none !important; }
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-framing-open .event-media-preview.is-surpria-compact {
  display:block !important; max-height:none; padding:0; border:0; overflow:visible; background:transparent;
}
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-framing-open .event-media-preview.is-surpria-compact > img,
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-framing-open .event-media-preview.is-surpria-compact > video {
  width:100% !important; height:auto !important; max-height:520px !important; border-radius:16px; transform:var(--surpria-media-transform, none);
}
.event-form[data-surpria-active-step="3"] .event-media-upload.is-surpria-framing-open .event-media-preview-info { margin-top:8px; }
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip span {
  text-decoration:none !important; color:#6d655d !important; padding:9px 12px !important; border:1px solid #e7e0d8 !important; border-radius:11px !important; background:#faf8f5 !important;
}
.event-form[data-surpria-active-step="3"] .event-media-choice-compact .event-media-skip span::before { content:'○ '; }
@media(max-width:600px){
  .event-form[data-surpria-active-step="3"] .event-final-media-section .event-media-preview.is-surpria-compact { grid-template-columns:88px minmax(0,1fr); min-height:100px; }
  .event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > img,
  .event-form[data-surpria-active-step="3"] .event-media-preview.is-surpria-compact > video { width:88px !important; height:78px !important; }
  .event-form[data-surpria-active-step="3"] .surpria-media-actions { display:grid; grid-template-columns:1fr 1fr; }
  .event-form[data-surpria-active-step="3"] .surpria-media-action:first-child { grid-column:1/-1; }
}


/* SURPRIA V3.3.1 — localized live-preview prefix. */
html[lang="fr"] .event-editor-page .theme-live-preview-header #themePreviewName::before { content: 'Aperçu en direct · '; }
html[lang="en"] .event-editor-page .theme-live-preview-header #themePreviewName::before { content: 'Live preview · '; }
html[lang="es"] .event-editor-page .theme-live-preview-header #themePreviewName::before { content: 'Vista previa en directo · '; }
html[lang="it"] .event-editor-page .theme-live-preview-header #themePreviewName::before { content: 'Anteprima dal vivo · '; }

/* Framing is manipulated directly inside the theme preview. */
.event-form[data-surpria-active-step="3"] .surpria-media-actions [data-surpria-media-crop] { display:none !important; }

/* SURPRIA V3.4.3 — Step 3 mobile preview
   The preview column is intentionally hidden on mobile while editing, but it
   must become a rendering host when the full-screen preview is opened. */
@media (max-width:900px){
  .event-form[data-surpria-active-step="3"] .event-editor-preview-column.is-mobile-preview-open{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1000!important;
    width:100%!important;
    height:100dvh!important;
    min-width:0!important;
    pointer-events:none;
  }
  .event-form[data-surpria-active-step="3"] .event-editor-preview-column.is-mobile-preview-open .theme-live-preview.is-mobile-open{
    display:block!important;
    pointer-events:auto;
  }
}


/* ==========================================================================
   SURPRIA V3.5 — Couche de finitions visuelles (polish)
   --------------------------------------------------------------------------
   Purement visuelle : aucun display / grid / hidden / ordre n'est modifié,
   aucune classe ni aucun identifiant n'est ajouté ou retiré. Le
   fonctionnement du wizard (JS, PHP, étapes, aperçu) reste strictement
   identique. Pour revenir à l'ancien rendu, supprimer ce bloc.
   ========================================================================== */

.event-create-v2 {
    --sp-ink: #1b1712;
    --sp-ink-soft: #6b6259;
    --sp-line: rgba(35, 23, 69, .10);
    --sp-accent: #f4a312;
    --sp-accent-deep: #9a5b00;
    --sp-accent-wash: #fff6e3;
    --sp-ring: 0 0 0 4px rgba(244, 163, 18, .24);
    --sp-ease: cubic-bezier(.2, .7, .2, 1);
    --sp-shadow-rest: 0 1px 2px rgba(30, 24, 16, .05), 0 8px 22px rgba(30, 24, 16, .05);
    --sp-shadow-lift: 0 2px 4px rgba(30, 24, 16, .06), 0 18px 40px rgba(35, 23, 69, .13);
}

/* --- Texte : meilleur rendu et lecture --------------------------------- */
.event-create-v2 {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.event-create-v2 .event-create-header h1 {
    text-wrap: balance;
}

.event-create-v2 .event-create-header > p,
.event-create-v2 .event-section-heading p,
.event-create-v2 .event-wizard-panel-heading p {
    text-wrap: pretty;
    color: var(--sp-ink-soft);
}

/* --- Retour + eyebrow -------------------------------------------------- */
.event-create-v2 .event-back {
    padding: 8px 12px 8px 10px;
    margin-left: -10px;
    border-radius: 999px;
    transition: color .18s var(--sp-ease), background .18s var(--sp-ease), transform .18s var(--sp-ease);
}

.event-create-v2 .event-back:hover {
    background: rgba(27, 23, 18, .05);
}

/* --- Bandeau d'information (brouillon / invité) ------------------------- */
.event-create-v2 .event-form-notice {
    max-width: 760px;
    margin-inline: auto;
    padding: 11px 16px;
    border: 1px solid rgba(244, 163, 18, .22);
    border-radius: 14px;
    background: var(--sp-accent-wash);
    color: #5b4220;
    font-size: .84rem;
    line-height: 1.5;
    text-align: center;
}

/* --- Barre de progression ---------------------------------------------- */
.event-create-v2 .event-wizard-progress {
    border-color: var(--sp-line);
    box-shadow: var(--sp-shadow-rest);
}

.event-create-v2 .event-wizard-progress button {
    transition: background .2s var(--sp-ease), color .2s var(--sp-ease), transform .2s var(--sp-ease), box-shadow .2s var(--sp-ease);
}

.event-create-v2 .event-wizard-progress button.is-active {
    background: var(--sp-ink);
    box-shadow: 0 6px 16px rgba(27, 23, 18, .22);
}

.event-create-v2 .event-wizard-progress button.is-active .event-wizard-progress-number {
    color: var(--sp-ink);
    box-shadow: 0 0 0 4px rgba(244, 163, 18, .28);
}

.event-create-v2 .event-wizard-progress button.is-complete .event-wizard-progress-number {
    background: #dff4e6;
}

.event-create-v2 .event-wizard-progress button:focus-visible {
    outline: 3px solid var(--sp-accent);
    outline-offset: 2px;
}

/* --- Étape 1 : cartes d'occasion --------------------------------------- */
.event-create-v2 .event-type-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.event-create-v2 .event-type-card-inner {
    border: 1.5px solid var(--sp-line);
    background: #fff;
    box-shadow: var(--sp-shadow-rest);
    transition: transform .22s var(--sp-ease), box-shadow .22s var(--sp-ease), border-color .22s var(--sp-ease), background .22s var(--sp-ease);
}

.event-create-v2 .event-type-card:hover .event-type-card-inner {
    border-color: rgba(244, 163, 18, .55);
    box-shadow: var(--sp-shadow-lift);
}

.event-create-v2 .event-type-card:active .event-type-card-inner {
    transform: scale(.98);
}

.event-create-v2 .event-type-card-inner strong {
    color: var(--sp-ink);
    font-size: .95rem;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.event-create-v2 .event-type-card input:checked + .event-type-card-inner {
    border-color: var(--sp-accent);
    background: linear-gradient(180deg, #fffaf0, var(--sp-accent-wash));
    box-shadow: var(--sp-ring), var(--sp-shadow-lift);
}

.event-create-v2 .event-type-card input:focus-visible + .event-type-card-inner {
    outline: 3px solid var(--sp-ink);
    outline-offset: 3px;
}

.event-create-v2 .event-type-check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sp-accent);
    color: var(--sp-ink);
    font-size: .8rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(244, 163, 18, .4);
    transition: opacity .18s var(--sp-ease), transform .22s var(--sp-ease);
}

.event-create-v2 .event-type-card input:not(:checked) + .event-type-card-inner .event-type-check {
    opacity: 0;
    transform: scale(.6);
}

.event-create-v2 .event-type-card input:checked + .event-type-card-inner .event-type-check {
    opacity: 1;
    transform: scale(1);
}

/* --- Étape 2 : cartes de thèmes ---------------------------------------- */
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card {
    border-color: var(--sp-line);
    box-shadow: var(--sp-shadow-rest);
    transition: transform .24s var(--sp-ease), box-shadow .24s var(--sp-ease), border-color .24s var(--sp-ease);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:hover {
    box-shadow: var(--sp-shadow-lift);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:has(input:focus-visible) {
    outline: 3px solid var(--sp-ink);
    outline-offset: 3px;
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:has(input:checked),
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card.is-selected-v321 {
    border-color: var(--sp-accent) !important;
    box-shadow: var(--sp-ring), var(--sp-shadow-lift);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-preview img {
    transition: transform .5s var(--sp-ease);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:hover .theme-selection-preview img {
    transform: scale(1.04);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-name-row strong {
    color: var(--sp-ink);
    letter-spacing: -.015em;
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-experience {
    opacity: 1;
    color: var(--sp-ink-soft);
    font-size: .84rem;
    line-height: 1.45;
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-recommended:not([hidden]) {
    color: var(--sp-accent-deep);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-card-quick-preview {
    min-height: 46px;
    transition: background .18s var(--sp-ease), border-color .18s var(--sp-ease), transform .18s var(--sp-ease);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-card-quick-preview:hover {
    border-color: rgba(244, 163, 18, .6);
    background: var(--sp-accent-wash);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-card-quick-preview:active {
    transform: scale(.98);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-card-quick-preview:focus-visible,
.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-show-all-button:focus-visible {
    outline: 3px solid var(--sp-accent);
    outline-offset: 2px;
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-show-all-button {
    transition: background .18s var(--sp-ease), border-color .18s var(--sp-ease), transform .18s var(--sp-ease);
}

.event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-show-all-button:hover {
    background: var(--sp-accent-wash);
    border-color: rgba(244, 163, 18, .6);
}

/* --- Champs de formulaire (étapes 3 et suivantes) ---------------------- */
.event-create-v2 .event-field label {
    color: var(--sp-ink);
    font-size: .84rem;
    letter-spacing: -.005em;
}

.event-create-v2 .event-field input,
.event-create-v2 .event-field select,
.event-create-v2 .event-field textarea,
.event-create-v2 .event-message-editor-input {
    border-color: #d9d2c7;
    transition: border-color .18s var(--sp-ease), box-shadow .18s var(--sp-ease), background .18s var(--sp-ease);
}

.event-create-v2 .event-field input:focus,
.event-create-v2 .event-field select:focus,
.event-create-v2 .event-field textarea:focus,
.event-create-v2 .event-message-editor-input:focus,
.event-create-v2 .event-message-editor-input:focus-visible {
    border-color: var(--sp-accent);
    box-shadow: var(--sp-ring);
    outline: none;
}

.event-create-v2 .event-field input:user-invalid,
.event-create-v2 .event-field textarea:user-invalid,
.event-create-v2 .event-field select:user-invalid {
    border-color: #d64545;
    box-shadow: 0 0 0 4px rgba(214, 69, 69, .12);
}

.event-create-v2 .event-field-help {
    color: #7a7268;
    font-size: .76rem;
}

/* Onglets Avant / Pendant / Après de l'éditeur de messages */
.event-create-v2 .event-message-editor-tabs {
    background: #f1ede6;
    box-shadow: inset 0 1px 2px rgba(30, 24, 16, .06);
}

.event-create-v2 .event-message-editor-tab {
    transition: background .2s var(--sp-ease), color .2s var(--sp-ease), box-shadow .2s var(--sp-ease);
}

.event-create-v2 .event-message-editor-tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, .7);
}

.event-create-v2 .event-message-editor-tab.is-active {
    background: var(--sp-ink);
    box-shadow: 0 4px 12px rgba(27, 23, 18, .22);
}

/* Cartes de l'étape de personnalisation */
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-final-media-section,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-step3-editor-card,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-essential-details-section.is-language-only,
.event-editor-page .event-wizard-panel[data-wizard-step="3"] .event-experience-section:not([hidden]) {
    border-color: var(--sp-line);
    box-shadow: var(--sp-shadow-rest);
}

/* Actions sur le média (remplacer / cadrer…) */
.event-create-v2 .surpria-media-action {
    min-height: 40px;
    transition: border-color .18s var(--sp-ease), background .18s var(--sp-ease), transform .18s var(--sp-ease);
}

.event-create-v2 .surpria-media-action:active {
    transform: scale(.97);
}

.event-create-v2 .surpria-media-action:focus-visible {
    outline: 3px solid var(--sp-accent);
    outline-offset: 2px;
}

.event-create-v2 .event-media-choice input:focus-visible + span {
    outline: 3px solid var(--sp-ink);
    outline-offset: 2px;
}

/* --- Barre d'actions (Précédent / Continuer) --------------------------- */
.event-editor-page .event-wizard-actions {
    border-color: var(--sp-line);
    background: rgba(255, 252, 247, .92);
    box-shadow: 0 -2px 0 rgba(255, 255, 255, .6) inset, 0 18px 44px rgba(30, 24, 16, .14);
}

.event-editor-page .event-wizard-actions .btn {
    font-weight: 800;
    letter-spacing: -.005em;
    transition: transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease), background .18s var(--sp-ease), border-color .18s var(--sp-ease);
}

.event-editor-page .event-wizard-actions .btn:active {
    transform: scale(.98);
}

.event-editor-page .event-wizard-next,
.event-editor-page .event-wizard-submit {
    box-shadow: 0 8px 20px rgba(244, 163, 18, .35);
}

.event-editor-page .event-wizard-next:hover,
.event-editor-page .event-wizard-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(244, 163, 18, .42);
}

.event-editor-page .event-wizard-previous:hover,
.event-editor-page .event-wizard-actions > a:hover {
    background: rgba(27, 23, 18, .05);
}

.event-editor-page .event-wizard-actions .btn:focus-visible,
.event-editor-page .event-wizard-actions > a:focus-visible {
    outline: 3px solid var(--sp-ink);
    outline-offset: 3px;
}

.event-editor-page .event-wizard-actions .btn:disabled,
.event-editor-page .event-wizard-actions .btn[aria-disabled="true"] {
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Aperçu téléphone ---------------------------------------------------- */
.event-create-v2 .theme-live-preview {
    border-color: var(--sp-line);
    box-shadow: var(--sp-shadow-rest);
}

.event-create-v2 .theme-preview-editor-tab {
    transition: background .2s var(--sp-ease), color .2s var(--sp-ease), box-shadow .2s var(--sp-ease);
}

.event-create-v2 .theme-preview-editor-tab:focus-visible {
    outline: 3px solid var(--sp-accent);
    outline-offset: 2px;
}

.event-create-v2 .theme-phone {
    filter: drop-shadow(0 22px 34px rgba(30, 24, 16, .2));
}

/* --- Alerte d'erreur ----------------------------------------------------- */
.event-create-v2 .form-alert-error {
    border-radius: 16px;
    box-shadow: var(--sp-shadow-rest);
}

/* --- Mobile : confort tactile et respiration ---------------------------- */
@media (max-width: 700px) {
    .event-create-v2 .event-form-notice {
        text-align: left;
        font-size: .8rem;
    }

    .event-create-v2 .event-type-card-inner strong {
        font-size: .88rem;
    }

    .event-create-v2 .event-field input,
    .event-create-v2 .event-field select,
    .event-create-v2 .event-field textarea,
    .event-create-v2 .event-message-editor-input {
        font-size: 16px; /* évite le zoom automatique d'iOS au focus */
    }

    .event-create-v2 .event-wizard-progress-copy strong {
        font-size: .68rem;
    }

    .event-editor-page .event-wizard-actions {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Accessibilité : mouvement réduit ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .event-create-v2 *,
    .event-create-v2 *::before,
    .event-create-v2 *::after {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .event-create-v2 .event-type-card:hover .event-type-card-inner,
    .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:hover,
    .event-create-v2 .event-wizard-panel[data-wizard-step="2"] .theme-selection-card:hover .theme-selection-preview img {
        transform: none;
    }
}


/* SURPRIA V4.0.1 — shared full-screen preview modal (step 3 mobile + step 4 all screens) */
.surpria-mobile-preview-button{display:none}
.surpria-mobile-preview-modal{display:none;position:fixed;inset:0;z-index:2147483000;background:#f8f7f4;overflow:hidden}
.surpria-mobile-preview-modal.is-open{display:flex;flex-direction:column}
.surpria-mobile-preview-modal-bar{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;border-bottom:1px solid rgba(35,23,69,.10)}
.surpria-mobile-preview-modal-close{width:40px;height:40px;border:0;border-radius:50%;background:#f2f0ec;font-size:28px;line-height:1;cursor:pointer}
.surpria-mobile-preview-modal-host{flex:1;min-height:0;overflow:auto;padding:10px}
.surpria-mobile-preview-modal-host #themeLivePreview{display:block!important;position:relative!important;inset:auto!important;width:min(100%,760px)!important;height:auto!important;max-height:none!important;margin:0 auto!important;overflow:visible!important;transform:none!important}
@media (max-width:900px){
  .event-form[data-surpria-active-step="3"] .surpria-mobile-preview-button{
    display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
    margin:12px 0 4px;border:1px solid rgba(35,23,69,.12);border-radius:15px;background:#fff;
    font:inherit;font-weight:800;color:#251b16;box-shadow:0 8px 24px rgba(30,24,16,.07);cursor:pointer
  }
  .event-form[data-surpria-active-step="3"] .event-step3-text-edit-action{display:none!important}
  .surpria-mobile-preview-modal-host #themeLivePreview{width:100%!important}
}

/* SURPRIA V3.6 — Ready step polish. Step 3 remains untouched. */
.event-form.is-review-step .event-review-summary{
    display:grid;
    gap:16px;
}
.event-ready-test-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
    gap:18px;
    align-items:center;
    padding:20px;
    border:1px solid rgba(249,115,22,.20);
    border-radius:20px;
    background:linear-gradient(135deg,#fff8ed 0%,#fff 72%);
    box-shadow:0 10px 28px rgba(120,72,15,.055);
}
.event-ready-test-copy{display:grid;gap:5px;min-width:0}
.event-ready-test-kicker{
    color:#b85e00;
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.event-ready-test-copy>strong{font-size:1.12rem;line-height:1.2;color:#211a29}
.event-ready-test-copy>p{margin:0;color:#6d6474;font-size:.88rem;line-height:1.45}
.event-form.is-review-step .event-ready-test-card .event-step4-full-experience{
    margin:0!important;
    min-height:64px;
    border-color:rgba(249,115,22,.24);
    background:#fff;
    box-shadow:0 7px 20px rgba(83,52,13,.07);
}
.event-form.is-review-step .event-ready-test-card .event-step4-full-experience:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(83,52,13,.10);
}
.event-review-section-heading{display:flex;align-items:baseline;gap:9px;padding:2px 2px 0}
.event-review-section-heading>span{
    color:#b85e00;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.event-review-section-heading>strong{font-size:.92rem;color:#2b2530}
.event-form.is-review-step .event-review-grid{gap:10px}
.event-form.is-review-step .event-review-card{
    padding:14px 15px;
    border-radius:15px;
    box-shadow:none;
}
.event-form.is-review-step .event-review-card-head{margin-bottom:7px}
.event-form.is-review-step .event-review-value{line-height:1.35}
.event-form.is-review-step .event-review-next{
    position:relative;
    align-items:center;
    padding:17px 18px;
    border-radius:18px;
}
.event-form.is-review-step .event-review-next::after{
    content:'→';
    margin-left:auto;
    padding-left:12px;
    color:#7457c8;
    font-size:1.25rem;
    font-weight:900;
}
.event-form.is-review-step .event-wizard-actions{
    margin-top:2px;
    padding-top:12px;
}
.event-form.is-review-step .event-wizard-submit{
    min-height:52px;
    box-shadow:0 10px 22px rgba(20,20,20,.12);
}
@media(min-width:901px){
    .event-form.is-review-step .event-wizard-panel[data-wizard-step="5"]{max-width:100%}
    .event-form.is-review-step .event-review-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .event-form.is-review-step .event-review-card.is-wide{grid-column:1/-1}
}
@media(max-width:900px){
    .event-ready-test-card{grid-template-columns:1fr;gap:13px;padding:16px}
    .event-ready-test-copy>strong{font-size:1.05rem}
    .event-form.is-review-step .event-ready-test-card .event-step4-full-experience{
        display:flex!important;
        min-height:60px;
        padding:13px 14px;
    }
    .event-review-section-heading{display:grid;gap:2px}
    .event-form.is-review-step .event-review-card{padding:13px 14px}
    .event-form.is-review-step .event-review-next::after{display:none}
}
@media(max-width:540px){
    .event-ready-test-card{border-radius:17px}
    .event-form.is-review-step .event-review-next{padding:15px}
}


/* SURPRIA V4.0.2 — Step 4 full-experience test.
   The creator watches the real sequence; manual Before/Reveal navigation is
   intentionally hidden only inside this test modal. Step 3 keeps its tabs. */
.surpria-mobile-preview-modal.is-full-experience .theme-preview-editor-tabs,
.surpria-mobile-preview-modal.is-full-experience .theme-preview-editor-mode-copy {
    display: none !important;
}

/* Creator mobile journey: examples, truthful save state and preview return. */
.event-editor-page .creator-message-examples {
    margin-top: 16px; padding: 14px 16px; border: 1px solid #ded7e8;
    border-radius: 16px; background: #faf8fd;
}
.event-editor-page .creator-message-examples summary {
    cursor: pointer; font-weight: 700; min-height: 44px; align-content: center;
}
.event-editor-page .creator-message-examples p { line-height: 1.5; margin: 8px 0 12px; }
.event-editor-page .creator-message-examples button { min-height: 46px; margin: 4px; white-space: normal; }
.event-editor-page .creator-save-status {
    display: block !important; margin: 16px 0 8px; padding: 12px 14px;
    font-size: 14px; line-height: 1.5; color: #50445d; background: #f5f1fa;
    border-radius: 12px; overflow-wrap: anywhere;
}
.event-editor-page .creator-save-status[data-state="saved"] { background: #edf8f1; color: #216341; }
.event-editor-page .creator-save-status[data-state="warning"] { background: #fff5e4; color: #79500c; }
.event-editor-page .creator-media-save-note { margin: 8px 0 12px; font-size: 14px; line-height: 1.5; color: #79500c; }
.event-editor-page .creator-save-retry { min-height: 46px; margin-bottom: 12px; }
.event-editor-page :is(.creator-media-save-note, .creator-save-retry)[hidden] { display: none !important; }
@media (max-width: 900px) {
    .event-editor-page .surpria-mobile-preview-modal-bar {
        box-sizing: content-box; height: auto; min-height: 54px; flex: 0 0 auto;
        padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
        gap: 10px;
    }
    .event-editor-page .surpria-mobile-preview-modal-close {
        width: auto; height: auto; min-height: 46px; padding: 10px 14px;
        border-radius: 12px; font-size: 14px; line-height: 1.3; font-weight: 700;
    }
    .event-editor-page .surpria-mobile-preview-modal-host {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }
    .event-editor-page .surpria-mobile-preview-modal :is(button, input, textarea):focus-visible {
        outline: 3px solid #6941a5; outline-offset: 3px;
    }
    .event-editor-page .event-step4-advanced > summary { min-height: 46px; }
    .event-editor-page .event-wizard-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}