/* ═══════════════════════════════════════════════════════════════════
   iz-client.css — IziBillet Client Framework v1.0
   Mobile-first · Responsive · Design System Consolidé
   Usage : <link rel="stylesheet" href="{{ asset('css/iz-client.css') }}">
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ── 2. Design Tokens ─────────────────────────────────────────────── */
:root {
    /* Couleurs brand */
    --iz-brand: #FF3B5C;
    --iz-brand-dark: #D42E4C;
    --iz-brand-soft: rgba(255, 59, 92, .08);
    --iz-brand-glow: rgba(255, 59, 92, .22);
    --iz-reserve: #7C3AED;
    --iz-reserve-dark: #5B21B6;
    --iz-reserve-soft: rgba(124, 58, 237, .08);
    --iz-reserve-glow: rgba(124, 58, 237, .22);

    /* Statuts */
    --iz-success: #00C9A7;
    --iz-success-alt: #059669;
    --iz-success-soft: rgba(0, 201, 167, .08);
    --iz-warning: #FFB400;
    --iz-warning-dark: #D97706;
    --iz-warning-soft: rgba(255, 180, 0, .08);
    --iz-danger: #DC2626;
    --iz-danger-soft: rgba(220, 38, 38, .08);
    --iz-info: #3B82F6;
    --iz-info-soft: rgba(59, 130, 246, .08);
    --iz-gold: #F5A623;
    --iz-gold-soft: rgba(245, 166, 35, .08);

    /* Surfaces & texte */
    --iz-page-bg: #fffdfd;
    --iz-surface: #FFFFFF;
    --iz-surface-2: #F4F5F7;
    --iz-text: #0D0D12;
    --iz-muted: #8A8FA8;
    --iz-border: rgba(0, 0, 0, .07);

    /* Forme */
    --iz-radius: 18px;
    --iz-radius-sm: 10px;
    --iz-radius-xs: 8px;
    --iz-radius-pill: 100px;

    /* Ombres */
    --iz-shadow-card: 0 4px 32px rgba(0, 0, 0, .07);
    --iz-shadow-hover: 0 12px 40px rgba(0, 0, 0, .12);
    --iz-shadow-modal: 0 24px 80px rgba(0, 0, 0, .18);

    /* Transition */
    --iz-tr: .22s cubic-bezier(.4, 0, .2, 1);

    /* Polices */
    --iz-font-heading: 'Syne', 'Montserrat', sans-serif;
    --iz-font-body: 'Montserrat', Verdana, sans-serif;
    --iz-font-mono: 'Courier New', monospace;

    --iz-sticky-top: 80px;

    /* ── Aliases legacy (rétrocompat Section 18) ──────────────────── */
    --brand: var(--iz-brand);
    --brand-dark: var(--iz-brand-dark);
    --brand-soft: var(--iz-brand-soft);
    --brand-glow: var(--iz-brand-glow);
    --reserve: var(--iz-reserve);
    --reserve-dark: var(--iz-reserve-dark);
    --reserve-soft: var(--iz-reserve-soft);
    --reserve-glow: var(--iz-reserve-glow);
    --success: var(--iz-success);
    --success-soft: var(--iz-success-soft);
    --warning: var(--iz-warning);
    --warning-soft: var(--iz-warning-soft);
    --danger: var(--iz-danger);
    --danger-soft: var(--iz-danger-soft);
    --danger-border: rgba(220, 38, 38, .3);
    --info: var(--iz-info);
    --info-soft: var(--iz-info-soft);
    --gold: var(--iz-gold);
    --surface: var(--iz-surface);
    --surface-2: var(--iz-surface-2);
    --text: var(--iz-text);
    --muted: var(--iz-muted);
    --border: var(--iz-border);
    --radius: var(--iz-radius);
    --radius-sm: var(--iz-radius-sm);
    --shadow-card: var(--iz-shadow-card);
    --shadow-hover: var(--iz-shadow-hover);
    --shadow: var(--iz-shadow-card);
    --tr: var(--iz-tr);
    --transition: var(--iz-tr);
    --t: var(--iz-tr);
    --text-primary: var(--iz-text);
    --text-muted: var(--iz-muted);
    --red: var(--iz-danger);
    --red-dark: #B91C1C;
    --green: var(--iz-success);
    --ink-2: #5C5F7A;
    --dark-bg: #0D0D12;
    --ev-radius: var(--iz-radius);
    --ev-tr: var(--iz-tr);
    --discount: var(--iz-brand);
    --discount-soft: var(--iz-brand-soft);
    --discount-glow: var(--iz-brand-glow);
    --sp-brand: var(--iz-brand);
    --sp-brand-soft: var(--iz-brand-soft);
    --sp-muted: var(--iz-muted);
    --sp-border: var(--iz-border);
    --sp-radius: var(--iz-radius);
    --sp-surface: var(--iz-surface);
    --sp-text: var(--iz-text);
    --sp-tr: var(--iz-tr);
}

/* ── 3. Reset & Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--iz-font-body);
    background-color: var(--iz-page-bg);
    color: var(--iz-text);
    -webkit-font-smoothing: antialiased;
}

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

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

/* ── 4. Typographie ───────────────────────────────────────────────── */
.iz-title-xl {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.iz-title-lg {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.iz-title-md {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    letter-spacing: -.025em;
}

.iz-title-sm {
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
}

.iz-eyebrow {
    font-family: var(--iz-font-heading);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--iz-brand);
}

.iz-label {
    font-family: var(--iz-font-heading);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iz-muted);
    display: block;
    margin-bottom: .75rem;
}

.iz-code {
    font-family: var(--iz-font-mono);
    letter-spacing: .04em;
    font-size: .9em;
}

.iz-text-brand {
    color: var(--iz-brand);
}

.iz-text-reserve {
    color: var(--iz-reserve);
}

.iz-text-success {
    color: var(--iz-success);
}

.iz-text-warning {
    color: var(--iz-warning-dark);
}

.iz-text-danger {
    color: var(--iz-danger);
}

.iz-text-muted {
    color: var(--iz-muted);
}

/* ── 5. Mise en page ──────────────────────────────────────────────── */
.iz-page-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.iz-page-wrap-md {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.iz-page-wrap-lg {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.iz-section {
    padding: 3rem 0;
}

.iz-section-sm {
    padding: 2rem 0;
}

.iz-section-lg {
    padding: 5rem 0;
}

/* Grille deux colonnes (1 col par défaut → sidebar à droite sur md+) */
.iz-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.iz-sidebar-sticky {
    position: sticky;
    top: var(--iz-sticky-top);
}

/* Grille événements */
.iz-ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

/* Grille services organisateur */
.iz-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

/* Grille tarifs */
.iz-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

/* ── 6. Boutons ───────────────────────────────────────────────────── */
/* Base commune */
[class^="iz-btn"],
[class*=" iz-btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: none;
    cursor: pointer;
    font-family: var(--iz-font-heading);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition:
        background var(--iz-tr),
        color var(--iz-tr),
        transform var(--iz-tr),
        box-shadow var(--iz-tr),
        border-color var(--iz-tr);
}

[class^="iz-btn"]:disabled,
[class*=" iz-btn"]:disabled {
    opacity: .55;
    pointer-events: none;
}

/* Tailles */
.iz-btn {
    border-radius: var(--iz-radius-pill);
    padding: .75rem 2rem;
    font-size: .9rem;
}

.iz-btn-sm {
    border-radius: var(--iz-radius-pill);
    padding: .55rem 1.25rem;
    font-size: .82rem;
}

.iz-btn-lg {
    border-radius: var(--iz-radius-pill);
    padding: .9rem 2.5rem;
    font-size: .95rem;
}

.iz-btn-block {
    width: 100%;
}

/* Bouton carré (formulaire annulation) */
.iz-btn-square {
    border-radius: var(--iz-radius-sm);
    padding: .85rem 2rem;
    font-size: .95rem;
}

/* Variantes */
.iz-btn-primary {
    background: var(--iz-brand);
    color: #fff;
}

.iz-btn-primary:hover {
    background: var(--iz-brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--iz-brand-glow);
}

.iz-btn-reserve {
    background: var(--iz-reserve);
    color: #fff;
}

.iz-btn-reserve:hover {
    background: var(--iz-reserve-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--iz-reserve-glow);
}

.iz-btn-success {
    background: var(--iz-success);
    color: #fff;
}

.iz-btn-success:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.iz-btn-danger {
    background: var(--iz-danger);
    color: #fff;
}

.iz-btn-danger:hover {
    background: #B91C1C;
}

.iz-btn-outline {
    background: transparent;
    color: var(--iz-brand);
    border: 1.5px solid var(--iz-brand);
}

.iz-btn-outline:hover {
    background: var(--iz-brand);
    color: #fff;
}

.iz-btn-outline-reserve {
    background: transparent;
    color: var(--iz-reserve);
    border: 1.5px solid var(--iz-reserve);
}

.iz-btn-outline-reserve:hover {
    background: var(--iz-reserve);
    color: #fff;
}

.iz-btn-ghost {
    background: transparent;
    color: var(--iz-muted);
    border: 1.5px solid var(--iz-border);
}

.iz-btn-ghost:hover {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
}

.iz-btn-surface {
    background: var(--iz-surface-2);
    color: var(--iz-text);
    border: 1.5px solid var(--iz-border);
}

.iz-btn-surface:hover {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
}

.iz-btn-warning {
    background: transparent;
    color: #B87D00;
    border: 1.5px solid rgba(255, 180, 0, .4);
}

.iz-btn-warning:hover {
    background: rgba(255, 180, 0, .08);
    border-color: var(--iz-warning);
}

/* Bouton icône rond */
.iz-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    font-size: 1rem;
    border: 1.5px solid var(--iz-border);
    background: transparent;
    color: var(--iz-muted);
}

.iz-btn-icon:hover {
    background: var(--iz-brand-soft);
    border-color: rgba(255, 59, 92, .3);
    color: var(--iz-brand);
    transform: scale(1.08);
}

.iz-btn-icon.fav-active {
    background: rgba(250, 204, 21, .1);
    border-color: rgba(250, 204, 21, .4);
    color: #EAB308;
}

/* État chargement */
.iz-btn-spinning {
    background: var(--iz-brand);
    color: #fff;
    opacity: .75;
    pointer-events: none;
    cursor: not-allowed;
}

/* Mobile CTA fixe (event show page) */
.iz-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1.5px solid var(--iz-border);
    padding: .7rem 1rem;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .1);
    gap: .6rem;
    align-items: center;
}

/* ── 7. Champs de formulaire ──────────────────────────────────────── */
.iz-input {
    width: 100%;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    padding: .72rem .9rem;
    font-size: .9rem;
    font-family: var(--iz-font-body);
    background: var(--iz-surface);
    color: var(--iz-text);
    outline: none;
    transition: border-color var(--iz-tr), box-shadow var(--iz-tr), background var(--iz-tr);
}

.iz-input:focus {
    border-color: var(--iz-brand);
    box-shadow: 0 0 0 3px var(--iz-brand-glow);
    background: var(--iz-surface);
}

.iz-input.reserve:focus {
    border-color: var(--iz-reserve);
    box-shadow: 0 0 0 3px var(--iz-reserve-glow);
}

.iz-input.is-invalid {
    border-color: var(--iz-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.iz-textarea {
    resize: vertical;
    min-height: 72px;
}

.iz-label-text {
    font-size: .82rem;
    font-weight: 600;
    display: block;
    margin-bottom: .4rem;
}

/* Champ téléphone (préfixe + input) */
.iz-phone-wrap {
    display: flex;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    overflow: hidden;
    background: var(--iz-surface);
    transition: border-color var(--iz-tr), box-shadow var(--iz-tr);
}

.iz-phone-wrap:focus-within {
    border-color: var(--iz-brand);
    box-shadow: 0 0 0 3px var(--iz-brand-glow);
}

.iz-phone-wrap.reserve:focus-within {
    border-color: var(--iz-reserve);
    box-shadow: 0 0 0 3px var(--iz-reserve-glow);
}

.iz-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    background: var(--iz-surface-2);
    border-right: 1.5px solid var(--iz-border);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.iz-phone-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: var(--iz-font-body);
    background: transparent;
    min-width: 0;
}

/* OTP */
.iz-otp-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    overflow: hidden;
    transition: border-color var(--iz-tr), box-shadow var(--iz-tr);
}

.iz-otp-wrap:focus-within {
    border-color: var(--iz-warning);
    box-shadow: 0 0 0 3px rgba(255, 180, 0, .18);
}

.iz-otp-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .75rem 1rem;
    font-size: .9rem;
    letter-spacing: .15em;
    font-weight: 600;
    background: transparent;
    min-width: 0;
}

/* Grille opérateurs de paiement */
.iz-operators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.iz-operator-option {
    display: none;
}

.iz-operator-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .9rem .6rem;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    cursor: pointer;
    background: var(--iz-surface-2);
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    transition: var(--iz-tr);
}

.iz-operator-label:hover {
    border-color: rgba(255, 59, 92, .35);
    background: var(--iz-surface);
    box-shadow: var(--iz-shadow-hover);
    transform: translateY(-2px);
}

.iz-operator-option:checked+.iz-operator-label {
    border-color: var(--iz-brand);
    background: var(--iz-surface);
    box-shadow: 0 0 0 3px var(--iz-brand-glow), var(--iz-shadow-hover);
}

.iz-operator-option.reserve:checked+.iz-operator-label {
    border-color: var(--iz-reserve);
    box-shadow: 0 0 0 3px var(--iz-reserve-glow), var(--iz-shadow-hover);
}

.iz-operator-logo {
    width: 52px;
    height: 32px;
    object-fit: contain;
}

.iz-operator-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--iz-brand);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
}

.iz-operator-option:checked+.iz-operator-label .iz-operator-check {
    display: flex;
}

/* Stepper quantité */
.iz-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-pill);
    overflow: hidden;
    background: var(--iz-surface);
    transition: border-color var(--iz-tr);
}

.iz-qty-stepper:focus-within {
    border-color: var(--iz-reserve);
}

.iz-qty-btn {
    border: none;
    background: transparent;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--iz-text);
    transition: background var(--iz-tr), color var(--iz-tr);
}

.iz-qty-btn:hover {
    background: var(--iz-reserve-soft);
    color: var(--iz-reserve);
}

.iz-qty-input {
    border: none;
    outline: none;
    width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    background: transparent;
}

/* Case à cocher / radio */
.iz-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--iz-brand);
    cursor: pointer;
}

.iz-check-input.reserve {
    accent-color: var(--iz-reserve);
}

.iz-check-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .88rem;
    cursor: pointer;
}

/* Carte d'acceptation (CGU) */
.iz-accept-card {
    background: #FAFAFA;
    border: 2px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    padding: 1.2rem;
    transition: var(--iz-tr);
}

.iz-accept-card.checked {
    background: var(--iz-reserve-soft);
    border-color: var(--iz-reserve-glow);
}

/* Barre de force mot de passe */
.iz-pwd-bar {
    display: flex;
    gap: 3px;
    margin-top: .4rem;
}

.iz-pwd-bar-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .07);
}

/* ── 8. Cartes ────────────────────────────────────────────────────── */
/* Carte de base */
.iz-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    box-shadow: var(--iz-shadow-card);
}

.iz-card-hover {
    transition: var(--iz-tr);
}

.iz-card-hover:hover {
    box-shadow: var(--iz-shadow-hover);
    border-color: rgba(255, 59, 92, .18);
    transform: translateY(-3px);
}

/* Sections internes d'une carte */
.iz-card-section {
    padding: 1.4rem 1.6rem 1rem;
}

.iz-card-section+.iz-card-section {
    border-top: 1px solid var(--iz-border);
}

.iz-card-header {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--iz-border);
}

.iz-card-footer {
    padding: .75rem 1.4rem;
    background: var(--iz-surface-2);
    border-top: 1px solid var(--iz-border);
}

/* Carte pass / billet (checkout) */
.iz-pass-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    transition: border-color var(--iz-tr), box-shadow var(--iz-tr);
}

.iz-pass-card:hover,
.iz-pass-card.has-selection {
    border-color: var(--iz-brand);
    box-shadow: 0 0 0 4px var(--iz-brand-glow);
}

.iz-pass-card.discount-active:hover,
.iz-pass-card.discount-active.has-selection {
    border-color: var(--iz-reserve);
    box-shadow: 0 0 0 4px var(--iz-reserve-glow);
}

.iz-pass-card.sold-out {
    opacity: .6;
    pointer-events: none;
}

.iz-pass-card-body {
    padding: 1.25rem 1.4rem;
}

.iz-pass-card-footer {
    padding: .75rem 1.4rem;
    background: var(--iz-surface-2);
    border-top: 1px solid var(--iz-border);
}

/* Carte résumé / récapitulatif (sidebar commande) */
.iz-resume-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    box-shadow: var(--iz-shadow-card);
}

.iz-resume-header {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--iz-border);
}

.iz-resume-body {
    padding: 1rem 1.4rem;
}

.iz-resume-totals {
    padding: 0 1.4rem;
}

.iz-resume-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--iz-border);
}

.iz-resume-row {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    font-size: .82rem;
    color: var(--iz-muted);
    border-bottom: 1px dashed var(--iz-border);
}

/* Barre totale sombre (bas du récapitulatif) */
.iz-total-bar {
    padding: 1rem 1.4rem;
    background: var(--iz-text);
    border-radius: 0 0 calc(var(--iz-radius) - 2px) calc(var(--iz-radius) - 2px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.iz-total-bar-reserve {
    background: var(--iz-reserve);
}

.iz-total-bar .label {
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
}

.iz-total-bar .amount {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}

/* Carte événement */
.iz-ev-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--iz-shadow-card);
    transition: transform var(--iz-tr), box-shadow var(--iz-tr), border-color var(--iz-tr);
}

.iz-ev-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--iz-shadow-hover);
    border-color: rgba(255, 59, 92, .18);
}

.iz-ev-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 190px;
}

.iz-ev-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .38) 0%, transparent 55%);
    pointer-events: none;
}

.iz-ev-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--iz-tr);
}

.iz-ev-card:hover .iz-ev-card-img {
    transform: scale(1.06);
}

.iz-ev-price-pill {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    z-index: 3;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--iz-radius-pill);
    padding: .22rem .75rem;
    font-weight: 800;
    font-size: .75rem;
    color: var(--iz-text);
}

.iz-ev-card-body {
    padding: 1.4rem .75rem .6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.iz-ev-card-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3rem;
}

.iz-ev-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: var(--iz-muted);
}

.iz-ev-meta-row.date {
    color: var(--iz-brand);
    font-weight: 600;
}

.iz-ev-card-footer {
    padding: .6rem .75rem;
    border-top: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Carte prestataire de service */
.iz-sp-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .06);
    transition: transform var(--iz-tr), box-shadow var(--iz-tr), border-color var(--iz-tr);
}

.iz-sp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .11);
    border-color: rgba(255, 59, 92, .18);
}

.iz-sp-cover {
    position: relative;
    height: 110px;
    overflow: hidden;
    flex-shrink: 0;
}

.iz-sp-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, transparent 60%);
}

.iz-sp-cover-cat {
    position: absolute;
    top: .6rem;
    left: .7rem;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--iz-radius-pill);
    padding: .18rem .65rem;
    font-size: .67rem;
    font-weight: 700;
    color: var(--iz-text);
}

.iz-sp-identity {
    display: flex;
    align-items: flex-end;
    gap: .85rem;
    margin-top: -2.1rem;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

.iz-sp-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1rem;
}

.iz-sp-body {
    padding: .6rem 1rem 1rem;
    flex: 1;
}

.iz-sp-name {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .95rem;
}

.iz-sp-card-footer {
    padding: .6rem 1rem;
    border-top: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Carte confirmation (succès / échec) */
.iz-sc-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: 0 8px 48px rgba(0, 0, 0, .09);
    overflow: hidden;
    text-align: center;
}

.iz-sc-stripe {
    height: 5px;
}

.iz-sc-stripe-success {
    background: linear-gradient(90deg, var(--iz-success) 0%, #00e5c0 100%);
}

.iz-sc-stripe-fail {
    background: linear-gradient(90deg, var(--iz-brand) 0%, #ff8fa0 100%);
}

.iz-sc-icon-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iz-pop .4s ease both;
}

.iz-sc-icon-success {
    background: rgba(0, 201, 167, .1);
    border: 2px solid rgba(0, 201, 167, .2);
    color: var(--iz-success);
}

.iz-sc-icon-fail {
    background: var(--iz-brand-soft);
    border: 2px solid rgba(255, 59, 92, .2);
    color: var(--iz-brand);
}

.iz-sc-order-box {
    background: var(--iz-brand-soft);
    border: 1.5px solid rgba(255, 59, 92, .15);
    border-radius: 12px;
    padding: .65rem 1.1rem;
    display: inline-block;
}

.iz-sc-order-code {
    font-family: var(--iz-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--iz-brand);
    letter-spacing: .04em;
}

/* Carte réservation (liste) */
.iz-res-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: 1.25rem 1.4rem;
    transition: var(--iz-tr);
}

.iz-res-card:hover {
    border-color: var(--iz-reserve-glow);
    box-shadow: 0 4px 20px var(--iz-reserve-soft);
}

/* Carte organisateur (service) */
.iz-org-service-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: 1.6rem;
    box-shadow: var(--iz-shadow-card);
    transition: var(--iz-tr);
}

.iz-org-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--iz-shadow-hover);
    border-color: rgba(255, 59, 92, .15);
}

.iz-org-service-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carte tarif */
.iz-plan-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: 1.75rem;
}

.iz-plan-card.featured {
    background: var(--iz-text);
    border-color: transparent;
}

.iz-plan-card.unavailable {
    opacity: .6;
    filter: grayscale(.3);
}

/* Carte récapitulatif réservation (2 colonnes) */
.iz-recap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.iz-recap-cell {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--iz-reserve-glow);
    border-right: 1px solid var(--iz-reserve-glow);
}

.iz-recap-cell:nth-child(even) {
    border-right: none;
}

.iz-recap-cell-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--iz-muted);
    margin-bottom: .2rem;
}

.iz-recap-cell-value {
    font-size: .95rem;
    font-weight: 800;
    color: var(--iz-text);
}

.iz-recap-cell-value.accent {
    color: var(--iz-reserve);
}

.iz-recap-cell-value.danger {
    color: var(--iz-danger);
}

/* ── 9. Badges et Pills ───────────────────────────────────────────── */
.iz-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: var(--iz-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    padding: .22rem .75rem;
    white-space: nowrap;
}

.iz-pill-sm {
    font-size: .65rem;
    padding: .12rem .5rem;
}

/* Couleurs */
.iz-pill-brand {
    background: var(--iz-brand);
    color: #fff;
}

.iz-pill-brand-soft {
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    border: 1px solid rgba(255, 59, 92, .2);
}

.iz-pill-reserve {
    background: var(--iz-reserve-soft);
    color: var(--iz-reserve);
    border: 1px solid var(--iz-reserve-glow);
}

.iz-pill-success {
    background: rgba(0, 201, 167, .12);
    color: #00A087;
}

.iz-pill-warning {
    background: rgba(255, 180, 0, .14);
    color: #B87D00;
}

.iz-pill-danger {
    background: rgba(255, 59, 92, .1);
    color: var(--iz-brand);
}

.iz-pill-info {
    background: rgba(59, 130, 246, .12);
    color: #1D4ED8;
}

.iz-pill-grey {
    background: rgba(0, 0, 0, .05);
    color: var(--iz-muted);
}

.iz-pill-gold {
    background: rgba(245, 166, 35, .1);
    color: #B87D00;
}

.iz-pill-discount {
    background: var(--iz-reserve-soft);
    color: var(--iz-reserve);
}

/* Badge réservation (uppercase + lettre-spacing) */
.iz-badge-reserve {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--iz-reserve-soft);
    color: var(--iz-reserve);
    border: 1px solid var(--iz-reserve-glow);
    border-radius: var(--iz-radius-pill);
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Disponibilité (animé) */
.iz-avail-ok {
    background: rgba(0, 201, 167, .12);
    color: #00A087;
}

.iz-avail-low {
    background: rgba(255, 180, 0, .14);
    color: #B87D00;
    animation: iz-pulse 2s infinite;
}

.iz-avail-sold {
    background: rgba(255, 59, 92, .1);
    color: var(--iz-brand);
}

/* Statut réservation */
.iz-res-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: var(--iz-radius-pill);
    padding: .3rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.iz-res-status.pending {
    background: #FFF7ED;
    color: #C2410C;
    border-color: #FED7AA;
}

.iz-res-status.active {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}

.iz-res-status.completed {
    background: #F0FDF4;
    color: #15803D;
    border-color: #BBF7D0;
}

.iz-res-status.expired {
    background: #F9FAFB;
    color: #6B7280;
    border-color: #E5E7EB;
}

.iz-res-status.cancelled {
    background: #FEF2F2;
    color: var(--iz-danger);
    border-color: #FECACA;
}

/* Badges statut événement (sur photo) */
.iz-ev-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--iz-radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.iz-ev-status-tonight {
    background: rgba(239, 68, 68, .88);
    color: #fff;
}

.iz-ev-status-soon {
    background: rgba(245, 158, 11, .92);
    color: #fff;
}

.iz-ev-status-new {
    background: rgba(99, 102, 241, .88);
    color: #fff;
}

.iz-ev-status-trending {
    background: rgba(234, 88, 12, .90);
    color: #fff;
}

.iz-ev-status-ongoing {
    background: rgba(220, 38, 38, .92);
    color: #fff;
}

.iz-ev-status-past {
    background: rgba(107, 114, 128, .80);
    color: #fff;
}

.iz-ev-status-lastspots {
    background: rgba(16, 185, 129, .88);
    color: #fff;
}

.iz-ev-status-free {
    background: rgba(16, 185, 129, .88);
    color: #fff;
}

.iz-ev-status-private {
    background: rgba(255, 59, 92, .8);
    color: #fff;
}

.iz-ev-status-test {
    background: rgba(249, 115, 22, .8);
    color: #fff;
}

/* Chip catégorie (sur photo événement) */
.iz-cat-chip {
    position: absolute;
    bottom: 9px;
    left: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--iz-radius-pill);
    padding: 4px 10px 4px 5px;
}

.iz-cat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
}

/* Pill verre (hero overlay) */
.iz-glass-pill {
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--iz-radius-pill);
    color: #fff;
}

/* Meta pill (entête de page) */
.iz-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    background: var(--iz-surface-2);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-radius-pill);
    font-size: .82rem;
}

/* Bandeau promotion (discount strip) */
.iz-discount-strip {
    background: linear-gradient(135deg, #7C3AED 0%, #9B59B6 100%);
    color: #fff;
    padding: .45rem 1.4rem;
    font-size: .78rem;
    font-weight: 600;
}

/* Badge remboursement */
.iz-refund-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: var(--iz-radius-pill);
    padding: .2rem .7rem;
    font-size: .75rem;
    font-weight: 700;
}

.iz-refund-badge.approved {
    background: #ECFDF5;
    color: var(--iz-success-alt);
    border-color: #A7F3D0;
}

.iz-refund-badge.rejected {
    background: #FEF2F2;
    color: var(--iz-danger);
    border-color: #FCA5A5;
}

/* Ruban mode test */
.iz-test-ribbon {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--iz-brand);
    border-radius: var(--iz-radius-pill);
    padding: .3rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--iz-brand);
    text-transform: uppercase;
    box-shadow: var(--iz-shadow-card);
}

/* Tags prestataire */
.iz-sp-tag {
    display: inline-block;
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    border: 1px solid rgba(255, 59, 92, .15);
    border-radius: var(--iz-radius-pill);
    padding: .15rem .6rem;
    font-size: .68rem;
    font-weight: 700;
}

.iz-sp-tag-more {
    background: rgba(0, 0, 0, .05);
    color: var(--iz-muted);
    border-color: transparent;
}

/* ── 10. Alertes & Bannières ──────────────────────────────────────── */
/* Alerte à bordure gauche */
.iz-alert {
    border-radius: var(--iz-radius-sm);
    padding: .75rem 1rem;
    font-size: .82rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-left: 3px solid transparent;
}

.iz-alert-info {
    background: rgba(0, 120, 255, .07);
    border-color: #0078FF;
    color: #0055cc;
}

.iz-alert-warning {
    background: var(--iz-warning-soft);
    border-color: var(--iz-warning);
    color: #9A6A00;
}

.iz-alert-danger {
    background: rgba(255, 59, 92, .07);
    border-color: var(--iz-brand);
    color: #c2173a;
}

.iz-alert-success {
    background: rgba(0, 201, 167, .07);
    border-color: var(--iz-success);
    color: #006E5C;
}

.iz-alert-reserve {
    background: var(--iz-reserve-soft);
    border-color: var(--iz-reserve);
    color: var(--iz-reserve-dark);
}

.iz-alert-om {
    background: rgba(255, 100, 0, .06);
    border-color: #FF6400;
    color: #7A3300;
}

/* Barre d'instruction (page paiement) */
.iz-instruction-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: var(--iz-radius-sm);
    padding: .7rem 1rem;
    font-size: .83rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.iz-instruction-bar.brand {
    background: var(--iz-brand-soft);
    border-left: 3px solid var(--iz-brand);
    color: var(--iz-brand-dark);
}

.iz-instruction-bar.reserve {
    background: var(--iz-reserve-soft);
    border-left: 3px solid var(--iz-reserve);
    color: var(--iz-reserve-dark);
}

/* Directive OTP */
.iz-otp-directive {
    background: linear-gradient(135deg, #FFF8EC, #FFF3DD);
    border: 1px solid rgba(255, 180, 0, .25);
    border-left: 3px solid var(--iz-warning);
    border-radius: var(--iz-radius-sm);
    padding: .85rem 1rem;
    font-size: .8rem;
    color: #7A5800;
    margin-bottom: 1rem;
}

/* Gratuit */
.iz-free-notice {
    background: rgba(0, 201, 167, .07);
    border: 1px solid rgba(0, 201, 167, .2);
    border-radius: var(--iz-radius-sm);
    padding: .7rem 1rem;
    font-size: .82rem;
    color: #006E5C;
}

/* Bloc échéance */
.iz-deadline-block {
    background: #FFF7ED;
    border: 2px solid #FED7AA;
    border-radius: var(--iz-radius-sm);
    padding: 1rem;
    text-align: center;
}

.iz-deadline-date {
    font-size: 1.3rem;
    font-weight: 800;
    color: #C2410C;
    font-family: var(--iz-font-heading);
}

.iz-deadline-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--iz-radius-xs);
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: #C2410C;
}

.iz-deadline-warning {
    background: #FEF9C3;
    border: 1px solid #FDE68A;
    border-radius: var(--iz-radius-sm);
    padding: .8rem 1rem;
    font-size: .82rem;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Boîte causes (page échec) */
.iz-causes-box {
    background: rgba(245, 158, 11, .06);
    border: 1.5px solid rgba(245, 158, 11, .2);
    border-left: 3px solid var(--iz-warning);
    border-radius: var(--iz-radius);
    padding: .9rem 1.1rem;
    text-align: left;
}

.iz-causes-box li {
    font-size: .8rem;
    color: #7A5800;
    font-weight: 500;
}

/* Bannière info livraison (bleue) */
.iz-delivery-info {
    background: var(--iz-info-soft);
    border: 1.5px solid rgba(59, 130, 246, .18);
    border-left: 3px solid var(--iz-info);
    border-radius: var(--iz-radius);
}

/* Bannière hero réservation */
.iz-cond-hero {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 60%, #0EA5E9 100%);
    border-radius: var(--iz-radius) var(--iz-radius) 0 0;
    padding: 2.5rem 2rem 2rem;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.iz-hero-icon-wrap {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 2rem;
}

.iz-hero-event-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--iz-radius-pill);
    padding: .35rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
}

/* ── 10.1 Alertes de page (module Notifications → clients) ───────────── */
.iz-page-alerts {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: 1.25rem;
}

.iz-page-alert {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-radius: var(--iz-radius);
    padding: 1.1rem 1.3rem;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--iz-shadow-card);
    animation: iz-page-alert-in .5s cubic-bezier(.16, 1, .3, 1) both;
    transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease;
}

.iz-page-alert.is-dismissing {
    opacity: 0;
    transform: scale(.98);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Motif décoratif en fond */
.iz-page-alert::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 22px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent 85%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent 85%);
    pointer-events: none;
}

.iz-page-alert > * {
    position: relative;
    z-index: 1;
}

.iz-page-alert-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.iz-page-alert-content {
    flex: 1;
    min-width: 200px;
}

.iz-page-alert-title {
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .98rem;
    color: #fff;
    margin-bottom: .2rem;
}

.iz-page-alert-message {
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
}

.iz-page-alert-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}

.iz-page-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--iz-text);
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
    border-radius: var(--iz-radius-pill);
    padding: .55rem 1.15rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    transition: transform var(--iz-tr), box-shadow var(--iz-tr);
}

.iz-page-alert-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    color: var(--iz-text);
}

.iz-page-alert-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--iz-tr);
}

.iz-page-alert-close:hover {
    background: rgba(255, 255, 255, .28);
}

@keyframes iz-page-alert-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Variantes de type — fonds pleins dégradés */
.iz-page-alert-info {
    background: linear-gradient(120deg, #1D4ED8, #1E3A8A);
}

.iz-page-alert-warning {
    background: linear-gradient(120deg, #B45309, #78350F);
}

.iz-page-alert-danger {
    background: linear-gradient(120deg, var(--iz-brand), #9F1239);
}

.iz-page-alert-success {
    background: linear-gradient(120deg, #0F766E, #115E59);
}

@media (max-width: 640px) {
    .iz-page-alert {
        padding: 1rem;
        gap: .8rem;
    }

    .iz-page-alert-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1.1rem;
    }

    .iz-page-alert-title {
        font-size: .9rem;
    }

    .iz-page-alert-message {
        font-size: .8rem;
    }

    .iz-page-alert-actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* ── 11. Modales & Overlays ───────────────────────────────────────── */
.iz-modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--iz-shadow-modal);
}

.iz-modal-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-surface);
}

.iz-modal-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .95rem;
    color: var(--iz-text);
    letter-spacing: -.01em;
    margin: 0;
}

.iz-modal-subtitle {
    font-size: .75rem;
    color: var(--iz-muted);
}

.iz-modal-body {
    padding: 1.4rem 1.5rem 1.2rem;
    background: var(--iz-surface);
}

.iz-modal-footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--iz-border);
    background: var(--iz-surface-2);
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

.iz-modal-close {
    background: rgba(0, 0, 0, .05);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--iz-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--iz-tr);
}

.iz-modal-close:hover {
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
}

/* Overlay centré (sondage abandon) */
.iz-overlay-bd {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.iz-overlay-sheet {
    background: var(--iz-surface);
    border-radius: 16px;
    max-width: 440px;
    width: 100%;
    padding: 1.5rem 1.75rem 2rem;
    transform: scale(.92);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.iz-overlay-sheet.open {
    transform: scale(1);
    opacity: 1;
}

.iz-overlay-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.iz-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--iz-muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: .1rem .3rem;
    border-radius: 6px;
    transition: var(--iz-tr);
    flex-shrink: 0;
}

.iz-overlay-close:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--iz-text);
}

/* Overlay chargement paiement */
.iz-pay-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
}

.iz-pay-overlay.active {
    display: flex;
}

.iz-pay-modal {
    background: var(--iz-surface);
    border-radius: 22px;
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--iz-shadow-modal);
}

/* Indicateurs d'étape (modale chargement) */
.iz-step-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-bottom: 1.75rem;
    min-height: 8px;
}

.iz-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0E3EB;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.iz-step-dot.active {
    background: var(--iz-brand);
    width: 24px;
    border-radius: var(--iz-radius-pill);
}

.iz-step-dot.done {
    background: var(--iz-success);
}

/* ── 12. Navigation & Fil d'Ariane ────────────────────────────────── */
.iz-bc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.iz-bc-crumb {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 500;
    color: var(--iz-muted);
    text-decoration: none;
    padding: .2rem .45rem;
    border-radius: var(--iz-radius-xs);
    transition: color var(--iz-tr), background var(--iz-tr);
}

a.iz-bc-crumb:hover {
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.iz-bc-crumb-active {
    color: var(--iz-brand);
    font-weight: 700;
    background: var(--iz-brand-soft);
}

.iz-bc-sep {
    font-size: .85rem;
    color: #C8CEDA;
    flex-shrink: 0;
}

/* En-tête sticky (event show) */
.iz-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--iz-border);
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.iz-sticky-header.visible {
    transform: translateY(0);
}

/* Onglets */
.iz-tab-nav {
    display: flex;
    border-bottom: 1px solid var(--iz-border);
    overflow-x: auto;
}

.iz-tab-btn {
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    color: var(--iz-muted);
    font-size: .82rem;
    font-weight: 600;
    padding: .75rem 1rem;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    transition: var(--iz-tr);
    white-space: nowrap;
}

.iz-tab-btn.active {
    color: var(--iz-brand);
    border-bottom-color: var(--iz-brand);
    font-weight: 700;
}

.iz-tab-pane {
    display: none;
    padding: 1.5rem 1.6rem;
}

.iz-tab-pane.active {
    display: block;
}

/* Barre de progression par étapes (conditions réservation) */
.iz-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0 .5rem;
}

.iz-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.iz-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    transition: var(--iz-tr);
}

.iz-step-circle.done {
    background: var(--iz-reserve);
    color: #fff;
}

.iz-step-circle.active {
    background: var(--iz-reserve);
    color: #fff;
    box-shadow: 0 0 0 4px var(--iz-reserve-soft);
}

.iz-step-circle.todo {
    background: var(--iz-surface);
    color: var(--iz-muted);
    border: 2px solid var(--iz-border);
}

.iz-step-label-text {
    font-size: .7rem;
    font-weight: 700;
    color: var(--iz-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.iz-step-label-text.active {
    color: var(--iz-reserve);
}

.iz-step-connector {
    width: 60px;
    height: 2px;
    background: var(--iz-border);
    margin-bottom: 1.2rem;
}

.iz-step-connector.done {
    background: var(--iz-reserve);
}

/* Pagination */
.iz-pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.iz-pg-btn {
    background: var(--iz-surface-2);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: var(--iz-tr);
}

.iz-pg-btn:hover {
    background: var(--iz-brand-soft);
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    transform: translateY(-1px);
}

.iz-pg-btn.active {
    background: var(--iz-brand);
    color: #fff;
    border-color: var(--iz-brand);
    font-weight: 700;
}

.iz-pg-btn:disabled {
    color: var(--iz-muted);
    opacity: .5;
    cursor: not-allowed;
}

/* ── 13. Progression, Compteurs & Suivi ──────────────────────────── */
/* Barre de compte à rebours (page paiement) */
.iz-countdown-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: var(--iz-radius-sm);
    padding: .65rem 1rem;
    font-size: .83rem;
    border-left: 3px solid var(--iz-success);
    background: rgba(0, 201, 167, .08);
    color: #006E5C;
}

.iz-countdown-bar.warn {
    background: #FFF8EC;
    border-left-color: var(--iz-warning);
    color: #7A5800;
}

.iz-countdown-bar.urgent {
    background: var(--iz-brand-soft);
    border-left-color: var(--iz-brand);
    color: var(--iz-brand-dark);
}

.iz-countdown-timer {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .05em;
}

/* Barre de progression (réservation) */
.iz-progress-bar {
    height: 8px;
    border-radius: 4px;
    background: #E5E7EB;
    overflow: hidden;
}

.iz-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--iz-reserve);
    transition: width .3s;
}

/* Suivi livraison (étapes linéaires) */
.iz-tracking-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 2rem;
}

.iz-tracking-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e9ecef;
    z-index: 0;
}

.iz-tracking-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
    background: #e9ecef;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    z-index: 1;
    position: relative;
    transition: var(--iz-tr);
}

.iz-tracking-node.active,
.iz-tracking-node.done {
    background: #0ab39c;
    border-color: #0ab39c;
    color: #fff;
}

.iz-tracking-node.refused {
    background: #f06548;
    border-color: #f06548;
    color: #fff;
}

.iz-tracking-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iz-tracking-label {
    font-size: .75rem;
    color: #adb5bd;
    font-weight: 500;
    text-align: center;
    max-width: 80px;
    margin-top: .4rem;
}

.iz-tracking-label.active,
.iz-tracking-label.done {
    color: #0ab39c;
    font-weight: 600;
}

.iz-tracking-label.refused {
    color: #f06548;
    font-weight: 600;
}

/* Points d'étape (page succès) */
.iz-sc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iz-sc-step-dot.done {
    background: rgba(0, 201, 167, .12);
    color: var(--iz-success);
    border: 2px solid rgba(0, 201, 167, .25);
}

.iz-sc-step-dot.pending {
    background: rgba(0, 0, 0, .05);
    color: var(--iz-muted);
    border: 2px solid var(--iz-border);
}

.iz-sc-step-dot.pending-info {
    background: rgba(59, 130, 246, .1);
    color: var(--iz-info);
    border: 2px solid rgba(59, 130, 246, .25);
}

/* Étoiles de notation (sondage) */
.iz-svy-star {
    font-size: 2.1rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .3;
    transition: .15s;
    padding: 0 .1rem;
}

.iz-svy-star.on {
    opacity: 1;
    color: #F59E0B;
}

/* ── 14. Animations & Chargement ─────────────────────────────────── */
/* Spinner */
.iz-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid var(--iz-brand-soft);
    border-top-color: var(--iz-brand);
    animation: iz-spin 1s linear infinite;
    display: block;
    margin: 0 auto;
}

.iz-spinner-sm {
    width: 28px;
    height: 28px;
    border-width: 3px;
}

.iz-spinner-reserve {
    border-color: var(--iz-reserve-soft);
    border-top-color: var(--iz-reserve);
}

/* Anneau spinner (page paiement) */
.iz-pay-spinner-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.iz-pay-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--iz-brand-soft);
    border-top-color: var(--iz-brand);
    animation: iz-spin 1s linear infinite;
}

/* Squelette shimmer */
.iz-skeleton {
    background: #E8EAF0;
    border-radius: var(--iz-radius-xs);
    animation: iz-shimmer 1.4s infinite linear;
}

.iz-skeleton-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    height: 320px;
    overflow: hidden;
}

.iz-skeleton-img {
    height: 190px;
}

.iz-skeleton-line {
    height: 12px;
    border-radius: 6px;
}

/* Toast */
.iz-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--iz-text);
    color: #fff;
    padding: .8rem 1.6rem;
    border-radius: var(--iz-radius-pill);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    font-size: .9rem;
    animation: iz-toast-up .3s ease both;
    z-index: 9999;
    white-space: nowrap;
}

/* Keyframes */
@keyframes iz-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes iz-shimmer {

    0%,
    100% {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

@keyframes iz-pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .45
    }
}

@keyframes iz-blink {

    0%,
    100% {
        opacity: .85
    }

    50% {
        opacity: .15
    }
}

@keyframes iz-pop {
    from {
        transform: scale(.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes iz-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes iz-toast-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.iz-animate-pop {
    animation: iz-pop .4s ease both;
}

.iz-animate-fade-up {
    animation: iz-fade-up .4s ease both;
}

/* ── 15. Utilitaires ──────────────────────────────────────────────── */
.iz-section-accent {
    width: 5px;
    height: 2.1rem;
    border-radius: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--iz-brand), var(--iz-gold));
}

.iz-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--iz-surface);
    border-radius: var(--iz-radius);
    border: 1.5px dashed var(--iz-border);
}

.iz-trust-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--iz-muted);
    font-size: .72rem;
    flex-wrap: wrap;
}

.iz-scroll-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.iz-scroll-thin::-webkit-scrollbar-thumb {
    background: var(--iz-reserve-glow);
    border-radius: 4px;
}

.iz-back-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--iz-text);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px var(--iz-brand-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--iz-tr);
}

.iz-back-top:hover {
    transform: translateY(-2px);
    background: var(--iz-brand);
}

/* Accent section label (event show) */
.iz-sec-label-accent {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.iz-sec-label-accent::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--iz-brand);
    flex-shrink: 0;
}

/* Galerie */
.iz-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}

.iz-gallery-item {
    border-radius: var(--iz-radius-sm);
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.iz-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--iz-tr);
}

.iz-gallery-item:hover .iz-gallery-overlay {
    background: rgba(0, 0, 0, .35);
}

/* Dropdown popup */
.iz-dropdown {
    position: absolute;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    box-shadow: var(--iz-shadow-hover);
    z-index: 50;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity var(--iz-tr), transform var(--iz-tr);
}

.iz-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.iz-dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    font-size: .83rem;
    cursor: pointer;
    border-radius: var(--iz-radius-xs);
}

.iz-dropdown-item:hover {
    background: var(--iz-surface-2);
}

.iz-dropdown-item.selected {
    color: var(--iz-brand);
    font-weight: 700;
}

/* ── 16. Breakpoints Mobile-First ─────────────────────────────────── */

/* ≥480px — petits téléphones paysage */
@media (min-width: 480px) {
    .iz-operators-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .iz-ev-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* ══ Section 18 : Styles page-specific ══════════════════════════════════ */


/* ── 18.0 Variables CSS canoniques (:root) ────────────────────────────
   Fallback global. Chaque page surcharge via son propre <style>
   (chargé après iz-client.css dans @yield('css')).
   ──────────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --brand: #FF3B5C;
    --brand-dark: #d42e4c;
    --brand-glow: rgba(255, 59, 92, .22);
    --brand-soft: rgba(255, 59, 92, .08);

    /* Surfaces & bordures */
    --surface: #FFFFFF;
    --surface-2: #F7F8FA;
    --border: rgba(0, 0, 0, .07);

    /* Texte */
    --text: #0D0D12;
    --muted: #8A8FA8;

    /* Rayons */
    --radius: 18px;
    --radius-sm: 10px;
    --radius-xs: 8px;

    /* Transitions (trois alias couvrant les variantes de pages) */
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
    --t: .22s cubic-bezier(.4, 0, .2, 1);
    --tr: .22s cubic-bezier(.4, 0, .2, 1);

    /* Ombres */
    --shadow-card: 0 4px 32px rgba(0, 0, 0, .07);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, .12);
    --shadow: 0 4px 32px rgba(0, 0, 0, .08);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, .13);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, .10);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);

    /* Couleurs fonctionnelles */
    --success: #00C9A7;
    --success-soft: #ECFDF5;
    --warning: #D97706;
    --warning-soft: #FFFBEB;
    --danger: #DC2626;
    --danger-soft: #FEF2F2;
    --danger-border: #FCA5A5;
    --info: #3B82F6;
    --info-soft: rgba(59, 130, 246, .08);
    --green: #10B981;
    --gold: #F5A623;

    /* Réservations (violet) */
    --reserve: #7C3AED;
    --reserve-dark: #6d28d9;
    --reserve-soft: rgba(124, 58, 237, .08);
    --reserve-glow: rgba(124, 58, 237, .22);

    /* Réductions */
    --discount: #7C3AED;
    --discount-soft: rgba(124, 58, 237, .08);
    --discount-glow: rgba(124, 58, 237, .2);

    /* Alias auth (--red = --brand, --ink = texte foncé) */
    --ink: #07070D;
    --ink-2: #12121C;
    --red: #FF3B5C;
    --red-dark: #D42E4C;
    --red-soft: rgba(255, 59, 92, .1);
    --red-glow: rgba(255, 59, 92, .28);

    /* Livraison (alias --text-primary / --text-muted) */
    --text-primary: #0D0D12;
    --text-muted: #8A8FA8;
    --warning-soft-delivery: rgba(255, 180, 0, .1);

    /* Section sombre (home/organizer) */
    --dark-bg: #26171c;
}

/* ── Surcharges scopées : pages avec valeurs distinctes des canoniques ── */

/* Auth : palette couleur légèrement distincte + transition plus lente */
.auth-split {
    --muted: #7A7A9A;
    --text: #1A1A2E;
    --border: rgba(0, 0, 0, .08);
    --t: .24s cubic-bezier(.4, 0, .2, 1);
    --transition: .24s cubic-bezier(.4, 0, .2, 1);
}

/* Home page : brand #E83A30 + DM Sans — scope page entiere via :has() */
body:has(.hero-swiper-wrap) {
    --brand: #E83A30;
    --brand-dark: #c42a21;
    --brand-glow: rgba(232, 58, 48, .28);
    --brand-soft: rgba(232, 58, 48, .10);
    --text: #0A0A14;
    --muted: #6B7280;
    font-family: 'DM Sans', sans-serif;
}

/* Aliases sections home (héritent déjà via body:has, redéclarés pour robustesse) */
.home-section,
.home-section-alt,
.home-section-dark,
.home-search-wrap {
    --brand: #E83A30;
    --brand-dark: #c42a21;
    --brand-glow: rgba(232, 58, 48, .28);
    --brand-soft: rgba(232, 58, 48, .10);
}

/* reservations/conditions : vert foncé, reserve-dark différent, radius 20px */
.cond-wrapper {
    --success: #059669;
    --success-soft: #ECFDF5;
    --reserve-dark: #5B21B6;
    --reserve-soft: rgba(124, 58, 237, .07);
    --reserve-glow: rgba(124, 58, 237, .18);
    --radius: 20px;
    --radius-sm: 12px;
}

/* reservations/deposit-success : success vert foncé */
.success-card {
    --success: #059669;
    --success-soft: #ECFDF5;
    --muted: #6B7280;
}

/* Pages sc-wrap (orders/fail, orders/success, orders/delivery-success) : radius 20px */
.sc-wrap {
    --radius: 20px;
}

/* Pages muted gris bleuté : reservations/cancel, show, my-reservations, deposit-success */
.res-cancel-wrap,
.res-detail-card,
.my-res-wrap {
    --muted: #6B7280;
}

/* ── Body backgrounds par page (CSS :has()) ─────────────────────────────
   Surcharge body { background: var(--iz-page-bg) } du framework (#F8F9FA)
   pour les pages dont la couleur de fond diffère.
   Zéro modification HTML — sélecteur CSS pur.
   ─────────────────────────────────────────────────────────────────────── */

/* event/show — fond bleu-gris très pâle */
body:has(.ev-sticky-header) {
    font-family: 'DM Sans', sans-serif;
    --radius: 20px;
    --radius-sm: 12px;
}

/* event/index */
body:has(.el-header) {
    font-family: 'DM Sans', sans-serif;
}

/* orders/checkout-delivery */
body:has(.checkout-event-title) {
    font-family: 'DM Sans', sans-serif;
}

/* orders/payment + reservations/payment — même fond et police */
body:has(.pay-event-title) {
    font-family: 'DM Sans', sans-serif;
}

/* organizer/index */
body:has(.org-hero) {
    font-family: 'DM Sans', sans-serif;
    --radius: 20px;
    overflow-x: hidden;
}

/* service-provider/index */
body:has(.sp-page-header) {
    font-family: 'DM Sans', sans-serif;
}

/* service-provider/show */
body:has(.spd-layout) {
    font-family: 'DM Sans', sans-serif;
}

/* orders/fail, orders/success, orders/delivery-success (pages carte sc-wrap) */
body:has(.sc-wrap) {
    font-family: 'DM Sans', sans-serif;
}

/* reservations/complete */
body:has(.solde-badge) {
    font-family: 'DM Sans', sans-serif;
}

/* orders/index — pass-list : radius légèrement plus petit (16px) */
body:has(.pass-list) {
    --radius: 16px;
}

/* reservations/my-reservations */
body:has(.btn-res-action) {
    --radius: 16px;
}

/* ── 18.1 Utilitaires partagés ──────────────────────────────────────── */
.page-title {
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 2rem);
    letter-spacing: -.03em;
    color: var(--iz-text);
}

.btn-back {
    color: var(--iz-muted);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: var(--iz-tr);
}

.btn-back:hover {
    color: var(--iz-text);
}

.hero-bg {
    display: none;
}

.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.step-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--iz-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.step-label.active {
    color: var(--iz-reserve);
}

.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--iz-muted);
    margin-bottom: .85rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--iz-border);
    font-size: .9rem;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--iz-muted);
}

.info-value {
    font-weight: 700;
    color: var(--iz-text);
}

.deadline-block {
    background: #FFF7ED;
    border: 2px solid #FED7AA;
    border-radius: var(--iz-radius-sm);
    padding: 1.1rem 1.2rem;
    margin: 1.25rem 0;
    text-align: center;
}

.deadline-block .date,
.deadline-date {
    font-size: 1.35rem;
    font-weight: 800;
    color: #C2410C;
}

.deadline-block p {
    margin: 0;
    font-size: .88rem;
    color: #92400E;
}

.btn-pay {
    background: var(--iz-brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: var(--iz-tr);
}

.btn-pay:hover {
    background: var(--iz-brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--iz-brand-glow);
    color: #fff;
}

.btn-pay:disabled {
    opacity: .6;
    pointer-events: none;
}

.instruction-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--iz-brand-soft);
    border-left: 3px solid var(--iz-brand);
    border-radius: var(--iz-radius-sm);
    padding: .7rem 1rem;
    font-size: .83rem;
    color: var(--iz-brand-dark);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* ══ 18.2 Breadcrumb ══════════════════════════════════════════ */
.bc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.bc-title {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    color: #0D0D12;
    letter-spacing: -.025em;
    margin: 0;
}

.bc-nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
}

.bc-crumb {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 500;
    color: #8A8FA8;
    text-decoration: none;
    padding: .2rem .45rem;
    border-radius: 8px;
    transition: color .18s, background .18s;
}

.bc-crumb i {
    font-size: .9rem;
}

a.bc-crumb:hover {
    color: #FF3B5C;
    background: rgba(255, 59, 92, .07);
}

.bc-crumb-static {
    cursor: default;
}

.bc-crumb-active {
    color: #FF3B5C;
    font-weight: 700;
    background: rgba(255, 59, 92, .07);
}

.bc-sep {
    font-size: .85rem;
    color: #C8CEDA;
    flex-shrink: 0;
}

/* ══ 18.3 sc-* (success/fail partagé) ══════════════════════════════════════════ */
.sc-stripe {
    height: 5px;
}

.sc-stripe--success {
    background: linear-gradient(90deg, var(--iz-success) 0%, #00e5c0 100%);
}

.sc-stripe--brand {
    background: linear-gradient(90deg, var(--iz-brand) 0%, #ff8fa0 100%);
}

.sc-icon-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.sc-icon-circle--success {
    background: rgba(0, 201, 167, .1);
    border: 2px solid rgba(0, 201, 167, .2);
}

.sc-icon-circle--brand {
    background: var(--iz-brand-soft);
    border: 2px solid rgba(255, 59, 92, .2);
}

.sc-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.sc-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 48px rgba(0, 0, 0, .09);
    overflow: hidden;
    text-align: center;
}

/* Stripe vert (livraison) */
.sc-stripe--success {
    height: 5px;
    background: linear-gradient(90deg, var(--success) 0%, #00e5c0 100%);
}

/* Icon */
.sc-icon-wrap {
    padding: 2.25rem 2rem 1.25rem;
}

.sc-icon-circle--brand-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(0, 201, 167, .1);
    border: 2px solid rgba(0, 201, 167, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes sc-pop {
    from {
        transform: scale(.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.sc-icon-circle i {
    font-size: 2.4rem;
    color: var(--success);
}

.sc-event-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: -.02em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.sc-headline {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .98rem;
    color: var(--text);
    margin-bottom: .5rem;
}

.sc-sub {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 360px;
    margin: 0 auto;
}

/* Order number box */
.sc-order-box {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--brand-soft);
    border: 1.5px solid rgba(255, 59, 92, .15);
    border-radius: 12px;
    padding: .65rem 1.1rem;
    margin-top: 1.25rem;
    text-decoration: none;
    transition: background var(--tr), border-color var(--tr);
}

.sc-order-box:hover {
    background: rgba(255, 59, 92, .14);
    border-color: rgba(255, 59, 92, .3);
}

.sc-order-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.sc-order-code {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .04em;
}

.sc-order-icon {
    font-size: 1.1rem;
    color: var(--brand);
}

/* Delivery info box */
.sc-delivery-info {
    margin: 1.25rem 1.75rem 0;
    background: var(--info-soft);
    border: 1.5px solid rgba(59, 130, 246, .18);
    border-left: 3px solid var(--info);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    text-align: left;
}

.sc-delivery-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--info);
    margin-bottom: .5rem;
}

.sc-delivery-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sc-delivery-list li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .8rem;
    color: #1E3A5F;
    font-weight: 500;
}

.sc-delivery-list li i {
    font-size: .88rem;
    flex-shrink: 0;
    margin-top: .08rem;
    color: var(--info);
}

/* Steps */
.sc-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0 0;
}

.sc-steps {
    display: flex;
    padding: 1.1rem 1.75rem;
    gap: 0;
}

.sc-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
}

.sc-step+.sc-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: rgba(0, 201, 167, .2);
    z-index: 0;
}

.sc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.sc-step-dot.done {
    background: rgba(0, 201, 167, .12);
    color: var(--success);
    border: 2px solid rgba(0, 201, 167, .25);
}

.sc-step-dot.pending {
    background: rgba(59, 130, 246, .1);
    color: var(--info);
    border: 2px solid rgba(59, 130, 246, .25);
}

.sc-step-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    max-width: 70px;
    line-height: 1.35;
}

/* Actions */
.sc-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem 2rem 1.75rem;
}

.sc-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
}

.sc-btn-primary:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-glow);
}

.sc-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: var(--info-soft);
    color: var(--info);
    border: 1.5px solid rgba(59, 130, 246, .25);
    border-radius: 100px;
    padding: .72rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr);
}

.sc-btn-secondary:hover {
    background: rgba(59, 130, 246, .14);
    border-color: rgba(59, 130, 246, .4);
    color: var(--info);
}

.sc-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .72rem 1.5rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--tr), color var(--tr);
}

.sc-btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Trust */
.sc-trust {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    padding: 0 2rem .9rem;
    font-size: .7rem;
    color: var(--muted);
}

.sc-trust-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* ══ 18.4 ev-card component (partagé) ══════════════════════════════════════════ */
/* ── Shell ── */
.ev-card {
    --ev-radius: 16px;
    --ev-tr: .22s cubic-bezier(.4, 0, .2, 1);
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, rgba(0, 0, 0, .07));
    border-radius: var(--ev-radius);
    overflow: visible;
    /* pour la puce catégorie qui déborde */
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
    transition: transform var(--ev-tr), box-shadow var(--ev-tr), border-color var(--ev-tr);
    height: 100%;
}

.ev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
    border-color: rgba(232, 58, 48, .2);
}

/* ── Image ── */
.ev-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 186px;
    border-radius: var(--ev-radius) var(--ev-radius) 0 0;
    flex-shrink: 0;
}

.ev-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.ev-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.ev-card:hover .ev-card-img {
    transform: scale(1.06);
}

.ev-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .42) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}

.img-placeholder {
    display: none;
    /* caché par défaut */
}

/* ── Groupe de badges statut (top-left) ── */
.ev-status-group {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.ev-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ev-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
    flex-shrink: 0;
}

.ev-status-tonight {
    background: rgba(239, 68, 68, .88);
    color: #fff;
}

.ev-status-soon {
    background: rgba(245, 158, 11, .92);
    color: #fff;
}

.ev-status-new {
    background: rgba(99, 102, 241, .88);
    color: #fff;
}

.ev-status-trending {
    background: rgba(232, 58, 48, .88);
    color: #fff;
}

.ev-status-lastspots {
    background: rgba(16, 185, 129, .88);
    color: #fff;
}

.ev-status-free {
    background: rgba(16, 185, 129, .88);
    color: #fff;
}

.ev-status-online {
    background: rgba(59, 130, 246, .88);
    color: #fff;
}

/* Point clignotant pour "Ce soir" et "Bientôt" */
.ev-status-tonight .ev-status-dot,
.ev-status-soon .ev-status-dot {
    animation: ev-blink 1.5s ease-in-out infinite;
}

@keyframes ev-blink {

    0%,
    100% {
        opacity: .85;
    }

    50% {
        opacity: .15;
    }
}

/* ── Puce catégorie (chip chevauchant image et corps) ── */
.ev-cat-chip {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    bottom: 9px;
    left: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    padding: 4px 10px 4px 5px;
}

.ev-card:hover .ev-cat-chip {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.ev-cat-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ev-cat-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Prix pill (bottom-right image) ── */
.ev-card-price-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 800;
    color: #0A0A14;
    white-space: nowrap;
}

/* ── Body ── */
.ev-card-body {
    padding: 22px 12px 10px;
    /* 22px top = espace pour la puce catégorie */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* clip pour que la puce catégorie ne soit pas masquée par l'overflow:hidden du parent */
    overflow: visible;
}

/* clip l'image uniquement */
.ev-card>.ev-card-img-wrap {
    overflow: hidden;
}

.ev-card-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    color: var(--text, #0D0D12);
    text-decoration: none;
    letter-spacing: -.01em;
    line-height: 1.3;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3rem;
    transition: color var(--ev-tr);
}

.ev-card-title:hover {
    color: #E83A30;
}

.ev-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ev-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--muted, #8A8FA8);
    line-height: 1.4;
}

.ev-meta-row i {
    font-size: .78rem;
    flex-shrink: 0;
}

.ev-meta-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-meta-row.ev-meta-date {
    color: #E83A30;
    font-weight: 600;
}

.ev-meta-row.ev-meta-date i {
    color: #E83A30;
}

.ev-more-dates {
    background: rgba(232, 58, 48, .1);
    color: #E83A30;
    border-radius: 100px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 700;
    margin-left: 3px;
    white-space: nowrap;
}

/* ── Footer ── */
.ev-card-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border, rgba(0, 0, 0, .07));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ev-fav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border, rgba(0, 0, 0, .08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #8A8FA8);
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--ev-tr), border-color var(--ev-tr), color var(--ev-tr), transform var(--ev-tr);
}

.ev-fav-btn:hover,
.ev-fav-btn.active {
    background: rgba(232, 58, 48, .08);
    border-color: rgba(232, 58, 48, .3);
    color: #E83A30;
    transform: scale(1.12);
}

.ev-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    color: #E83A30;
    text-decoration: none;
    transition: gap var(--ev-tr);
}

.ev-card-cta:hover {
    gap: 7px;
    color: #E83A30;
}

.ev-card-cta i {
    font-size: .82rem;
}

/* ══ 18.5 Auth (login+register partagé, canonical=register) ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       TOKENS — identiques à login
    ═══════════════════════════════════════════ */


*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════
       SPLIT LAYOUT
    ═══════════════════════════════════════════ */
.auth-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ── GAUCHE ── */
.auth-left {
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    background: var(--ink-2);
}

.auth-left-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&q=80&auto=format&fit=crop') center / cover no-repeat;
    opacity: .2;
    transform: scale(1.06);
    animation: slowZoom 20s ease-in-out infinite alternate;
}

@keyframes slowZoom {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1.14);
    }
}

.auth-left-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(245, 166, 35, .15) 0%, transparent 55%),
        linear-gradient(180deg, rgba(7, 7, 13, .55) 0%, rgba(7, 7, 13, .15) 40%, rgba(7, 7, 13, .88) 100%);
}

/* Bokeh */
.bokeh {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bok {
    position: absolute;
    border-radius: 50%;
    animation: bokehFloat linear infinite;
    opacity: 0;
}

.bok:nth-child(1) {
    width: 7px;
    height: 7px;
    background: rgba(255, 59, 92, .85);
    left: 22%;
    top: 40%;
    animation-duration: 7s;
    animation-delay: .2s;
}

.bok:nth-child(2) {
    width: 4px;
    height: 4px;
    background: rgba(245, 166, 35, .8);
    left: 68%;
    top: 52%;
    animation-duration: 9s;
    animation-delay: 1.4s;
}

.bok:nth-child(3) {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, .65);
    left: 48%;
    top: 68%;
    animation-duration: 11s;
    animation-delay: 2.2s;
    filter: blur(2px);
}

.bok:nth-child(4) {
    width: 3px;
    height: 3px;
    background: rgba(255, 59, 92, .6);
    left: 82%;
    top: 25%;
    animation-duration: 6s;
    animation-delay: .6s;
}

.bok:nth-child(5) {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .6);
    left: 34%;
    top: 80%;
    animation-duration: 8s;
    animation-delay: 3.2s;
}

.bok:nth-child(6) {
    width: 11px;
    height: 11px;
    background: rgba(245, 166, 35, .45);
    left: 58%;
    top: 18%;
    animation-duration: 13s;
    animation-delay: 1.8s;
    filter: blur(3px);
}

.bok:nth-child(7) {
    width: 4px;
    height: 4px;
    background: rgba(255, 59, 92, .7);
    left: 12%;
    top: 62%;
    animation-duration: 7.5s;
    animation-delay: 4.1s;
}

.bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, .5);
    left: 90%;
    top: 74%;
    animation-duration: 10s;
    animation-delay: 2.8s;
}

.bok:nth-child(9) {
    width: 6px;
    height: 6px;
    background: rgba(16, 185, 129, .55);
    left: 55%;
    top: 88%;
    animation-duration: 12s;
    animation-delay: .9s;
    filter: blur(1px);
}

.bok:nth-child(10) {
    width: 4px;
    height: 4px;
    background: rgba(245, 166, 35, .7);
    left: 28%;
    top: 22%;
    animation-duration: 9s;
    animation-delay: 3.7s;
}

@keyframes bokehFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: .7;
    }

    100% {
        transform: translateY(-90px) scale(1.4);
        opacity: 0;
    }
}

.auth-left-content {
    position: relative;
    z-index: 2;
}

.auth-logo img {
    height: 44px;
    filter: brightness(0) invert(1);
}

/* Claim texte */
.auth-left-tagline {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.04em;
    margin-bottom: 1rem;
}

.auth-left-tagline em {
    font-style: normal;
    color: var(--gold);
    position: relative;
}

.auth-left-tagline em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--gold), var(--red));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineReveal .8s .6s ease forwards;
}

@keyframes underlineReveal {
    to {
        transform: scaleX(1);
    }
}

.auth-left-sub {
    font-size: .9rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.65;
    max-width: 320px;
    font-weight: 300;
}

.auth-left-claim {
    margin-top: auto;
}

/* Avantages liste */
.auth-perks {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.auth-perk {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .82);
    font-size: .85rem;
    font-weight: 500;
}

.auth-perk-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--gold);
}

.auth-perk-icon.red {
    color: var(--red);
    background: rgba(255, 59, 92, .1);
    border-color: rgba(255, 59, 92, .2);
}

.auth-perk-icon.green {
    color: var(--green);
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .2);
}

.auth-perk-icon.gold {
    color: var(--gold);
    background: rgba(245, 166, 35, .1);
    border-color: rgba(245, 166, 35, .2);
}

/* Divider users */
.auth-users {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
    padding: .85rem 1.1rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.auth-users-avatars {
    display: flex;
}

.auth-user-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ink-2);
    background: linear-gradient(135deg, var(--red), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    margin-left: -8px;
    flex-shrink: 0;
}

.auth-user-av:first-child {
    margin-left: 0;
}

.auth-users-text {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.4;
}

.auth-users-text strong {
    color: #fff;
}

/* ── DROITE ── */
.auth-right {
    flex: 1;
    background: #F9F9FC;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    position: relative;
    padding: 2.5rem 3.5rem;
}

.auth-right::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, .07) 0%, transparent 70%);
    pointer-events: none;
}

.auth-right::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 92, .06) 0%, transparent 70%);
    pointer-events: none;
}

.auth-right-inner {
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: formReveal .5s ease both;
}

@keyframes formReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

/* Back */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 1.75rem;
    transition: color var(--t);
    letter-spacing: .01em;
}

.auth-back:hover {
    color: var(--red);
}

.auth-back i {
    font-size: .9rem;
}

/* Header */
.auth-form-head {
    margin-bottom: 1.75rem;
}

.auth-welcome {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .55rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.auth-welcome::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.auth-title {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-bottom: .45rem;
}

.auth-subtitle {
    font-size: .87rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.5;
}

/* Champs */
.auth-field {
    margin-bottom: 1.1rem;
}

.auth-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-bottom: 1.1rem;
}

.auth-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .45rem;
}

.auth-label .req {
    color: var(--red);
    margin-left: 2px;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .95rem;
    pointer-events: none;
    transition: color var(--t);
}

.auth-input {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .78rem 1rem .78rem 2.65rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: .87rem;
    color: var(--text);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.auth-input::placeholder {
    color: #C0C0D0;
}

.auth-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(255, 59, 92, .1);
    background: #fff;
}

.auth-input-wrap:focus-within .auth-input-icon {
    color: var(--red);
}

.auth-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
}

.auth-invalid {
    font-size: .73rem;
    color: #ef4444;
    margin-top: .38rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Toggle pwd */
.auth-eye {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    padding: .2rem;
    border-radius: 6px;
    transition: color var(--t);
    line-height: 1;
}

.auth-eye:hover {
    color: var(--text);
}

/* Strength checker */
.pwd-rules {
    margin: .65rem 0 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
}

.pwd-rules-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .55rem;
}

.pwd-rule {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .3rem;
    transition: color var(--t);
}

.pwd-rule:last-child {
    margin-bottom: 0;
}

.pwd-rule-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    border: 1.5px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .6rem;
    transition: background var(--t), border-color var(--t);
}

.pwd-rule.valid {
    color: var(--green);
}

.pwd-rule.valid .pwd-rule-dot {
    background: rgba(16, 185, 129, .15);
    border-color: var(--green);
    color: var(--green);
}

/* Force bar */
.pwd-strength-bar {
    display: flex;
    gap: 3px;
    margin-top: .6rem;
}

.pwd-bar-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .07);
    transition: background .3s ease;
}

/* Notice e-mail */
.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: rgba(255, 59, 92, .05);
    border: 1px solid rgba(255, 59, 92, .15);
    border-left: 3px solid var(--red);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.1rem;
    font-size: .79rem;
    color: #4A1010;
    line-height: 1.5;
}

.auth-notice i {
    color: var(--red);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

/* CGU */
.auth-terms {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 1.1rem;
}

.auth-terms a {
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
}

.auth-terms a:hover {
    text-decoration: underline;
}

/* Turnstile wrap */
.auth-captcha {
    margin-bottom: 1.1rem;
    border-radius: 10px;
    overflow: hidden;
}

/* Submit */
.btn-auth {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .9rem 1.5rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
    overflow: hidden;
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-auth::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
    pointer-events: none;
}

.btn-auth:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 59, 92, .38);
}

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

.btn-auth .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transform: scale(0);
    animation: rippleAnim .55s linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Lien login */
.auth-login-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .85rem;
    color: var(--muted);
}

.auth-login-link a {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--t);
}

.auth-login-link a:hover {
    color: var(--red-dark);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
@media (max-width: 960px) {
    .auth-left {
        display: none;
    }

    .auth-right {
        padding: 2.5rem 1.75rem;
        background: #fff;
        align-items: center;
    }

    .auth-right-inner {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .auth-right {
        padding: 2rem 1.25rem;
    }

    .auth-row-2 {
        grid-template-columns: 1fr;
    }
}

.auth-page-login .auth-left {
    flex: 0 0 48%;
}

.auth-page-login .auth-right {
    justify-content: center;
}

/* ══ 18.6 Payment partagé (canonical=reservations/payment) ══════════════════════════════════════════ */
/* ── Page header ── */
.pay-event-title {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
}

.deposit-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--reserve-soft);
    color: var(--reserve);
    border: 1px solid var(--reserve-glow);
    border-radius: 100px;
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Payment pane ── */
.pay-pane {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.pane-section {
    padding: 1.4rem 1.6rem 1rem;
}

.pane-section+.pane-section {
    border-top: 1px solid var(--border);
}

.pane-label {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

/* ── Instruction bar ── */
.instruction-bar-reserve {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--reserve-soft);
    border-left: 3px solid var(--reserve);
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    font-size: .83rem;
    color: var(--reserve-dark);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.instruction-bar-reserve i {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Operator cards ── */
.operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .75rem;
}

.operator-option {
    display: none;
}

.operator-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .9rem .6rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
    background: var(--surface-2);
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.operator-label:hover {
    border-color: rgba(255, 59, 92, .35);
    background: var(--surface);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.operator-option:checked+.operator-label {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--brand-glow), var(--shadow-hover);
}

.operator-logo {
    width: 52px;
    height: 32px;
    object-fit: contain;
}

.operator-name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
}

.operator-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
}

.operator-option:checked+.operator-label .operator-check {
    display: flex;
}

/* ── Phone input ── */
.phone-field-wrap {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--surface);
}

.phone-field-wrap:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    background: var(--surface-2);
    border-right: 1.5px solid var(--border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}

.phone-prefix img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    margin-right: .45rem;
}

.phone-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: transparent;
}

.phone-input::placeholder {
    color: var(--muted);
}

/* ── OTP ── */
.otp-input-wrap {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.otp-input-wrap:focus-within {
    border-color: #FFB400;
    box-shadow: 0 0 0 3px rgba(255, 180, 0, .18);
}

.otp-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    letter-spacing: .15em;
    font-weight: 600;
}

/* ── MOMO directive ── */
.momo-directive {
    font-size: .85rem;
    color: #c2173a;
    background: rgba(255, 59, 92, .06);
    border: 1px solid rgba(255, 59, 92, .18);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    margin-top: .5rem;
}

/* ── Pay footer ── */
.pay-footer {
    padding: 1.1rem 1.6rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.btn-pay--reserve {
    background: var(--reserve);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn-pay--reserve:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--reserve-glow);
    background: var(--reserve-dark);
    color: #fff;
}

.btn-pay--reserve:disabled {
    opacity: .6;
    pointer-events: none;
}

.btn-spinner {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 2rem;
    font-size: .9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    opacity: .75;
}

.security-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--muted);
}

/* ── Resume sidebar ── */
.resume-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 80px;
    box-shadow: var(--shadow-card);
}

.resume-header {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resume-header h5 {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--text);
    margin: 0;
}

.resume-ticket-count {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: .15rem .6rem;
}

.resume-body {
    padding: 1rem 1.4rem;
}

.resume-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--border);
}

.resume-line:last-child {
    border-bottom: none;
}

.rl-pass-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}

.rl-pass-icon i {
    font-size: .85rem;
    color: var(--brand);
}

.rl-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
}

.rl-qty {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .1rem;
}

.rl-qty-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}

.rl-price {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    color: var(--text);
    white-space: nowrap;
    text-align: right;
}

.resume-totals {
    padding: 0 1.4rem;
}

.resume-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    font-size: .82rem;
    color: var(--muted);
    border-bottom: 1px dashed var(--border);
}

.resume-row:last-child {
    border-bottom: none;
}

.resume-total-bar {
    padding: 1rem 1.4rem;
    background: var(--text);
    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resume-total-bar .rtb-label {
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
}

.resume-total-bar .rtb-amount {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}

.deadline-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: #C2410C;
}

.trust-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .85rem;
    padding: 0 .25rem;
    color: var(--muted);
    font-size: .72rem;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.trust-item i {
    font-size: .85rem;
}

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

    .pay-footer {
        justify-content: flex-end;
    }
}

/* ── reservations/payment overrides : restaure la palette violette (--reserve) ── */
body:has(.deposit-badge) .operator-label:hover {
    border-color: rgba(124, 58, 237, .35);
}

body:has(.deposit-badge) .operator-option:checked+.operator-label {
    border-color: var(--reserve);
    box-shadow: 0 0 0 3px var(--reserve-glow), var(--shadow-hover);
}

body:has(.deposit-badge) .operator-check {
    background: var(--reserve);
}

body:has(.deposit-badge) .phone-field-wrap:focus-within {
    border-color: var(--reserve);
    box-shadow: 0 0 0 3px var(--reserve-glow);
}

body:has(.deposit-badge) .btn-spinner {
    background: var(--reserve);
}

body:has(.deposit-badge) .rl-pass-icon {
    background: var(--reserve-soft);
}

body:has(.deposit-badge) .rl-pass-icon i {
    color: var(--reserve);
}

body:has(.deposit-badge) .resume-total-bar {
    background: var(--reserve);
}

.instruction-bar-reserve {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--iz-reserve-soft);
    border-left: 3px solid var(--iz-reserve);
    border-radius: var(--iz-radius-sm);
    padding: .7rem 1rem;
    font-size: .83rem;
    color: var(--iz-reserve-dark);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.pay-modal-reserve-context .step-indicators .step-dot.active {
    background: var(--iz-reserve);
}

.pay-modal-reserve-context .pay-spinner {
    border-color: var(--iz-reserve-soft);
    border-top-color: var(--iz-reserve);
}

.pay-modal-reserve-context .pay-icon-inner {
    color: var(--iz-reserve);
}

.pay-modal-reserve-context .pay-countdown {
    color: var(--iz-reserve);
}

.pay-modal-reserve-context .btn-modal-exit:hover {
    border-color: var(--iz-reserve);
    color: var(--iz-reserve);
    background: var(--iz-reserve-soft);
}

/* ══ 18.7 payments/payment-loading ══════════════════════════════════════════ */
/* ── Modal container ── */
.pay-modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
}

.pay-modal-body {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    background: #fff;
}

/* ── Step indicators ── */
.step-indicators {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-bottom: 1.75rem;
    min-height: 8px;
}

.step-indicators .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0E3EB;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.step-indicators .step-dot.active {
    background: #FF3B5C;
    width: 24px;
    border-radius: 100px;
}

.step-indicators .step-dot.done {
    background: #00C9A7;
}

/* ── Central icon with spinner ring ── */
.pay-modal-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 59, 92, .12);
    border-top-color: #FF3B5C;
    animation: pay-spin 1s linear infinite;
}

@keyframes pay-spin {
    to {
        transform: rotate(360deg);
    }
}

.pay-icon-inner {
    font-size: 1.9rem;
    color: #FF3B5C;
    position: relative;
    z-index: 1;
}

/* ── Text ── */
.pay-modal-title {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: #0D0D12;
    letter-spacing: -.02em;
    margin-bottom: .55rem;
    min-height: 1.6rem;
}

.pay-modal-sub {
    font-size: .875rem;
    color: #8A8FA8;
    line-height: 1.6;
    margin-bottom: .5rem;
}

.pay-modal-sub strong {
    color: #0D0D12;
}

.pay-modal-momo {
    font-size: .85rem;
    color: #c2173a;
    background: rgba(255, 59, 92, .06);
    border: 1px solid rgba(255, 59, 92, .18);
    border-radius: 10px;
    padding: .65rem 1rem;
    margin-top: .5rem;
}

/* ── Countdown ── */
.pay-countdown {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #FF3B5C;
    letter-spacing: .04em;
    margin-top: .25rem;
    min-height: 2rem;
}

/* ── Footer ── */
.pay-modal-footer {
    padding: 1rem 2rem 1.5rem;
    display: flex;
    justify-content: center;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.btn-modal-exit {
    background: transparent;
    color: #8A8FA8;
    border: 1.5px solid rgba(0, 0, 0, .1);
    border-radius: 100px;
    padding: .6rem 1.75rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    font-family: 'DM Sans', sans-serif;
}

.btn-modal-exit:hover {
    border-color: #FF3B5C;
    color: #FF3B5C;
    background: rgba(255, 59, 92, .05);
}

/* ══ 18.8 orders/success (survey) ══════════════════════════════════════════ */
/* ── Survey bottom sheet ── */
.svy-bd {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .4);
    display: none;
    align-items: flex-end;
    justify-content: center
}

.svy-sheet {
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-width: 480px;
    width: 100%;
    padding: 1.5rem 1.75rem 2rem;
    transform: translateY(100%);
    transition: .35s cubic-bezier(.4, 0, .2, 1)
}

.svy-star {
    font-size: 2.1rem;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    opacity: .3;
    transition: .15s;
    padding: 0 .1rem
}

.svy-star.on {
    opacity: 1;
    color: #F59E0B
}

#svy-send:not([disabled]) {
    opacity: 1;
    cursor: pointer
}

/* ══ 18.9 orders/fail (unique: sc-causes + modifiers) ══════════════════════════════════════════ */
/* Top stripe — rouge */


/* Icon */












/* Order number box */










/* Cause list */
.sc-causes {
    margin: 1.25rem 1.75rem 0;
    background: rgba(245, 158, 11, .06);
    border: 1.5px solid rgba(245, 158, 11, .2);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    text-align: left;
}

.sc-causes-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--warning);
    margin-bottom: .5rem;
}

.sc-causes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sc-causes ul li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .8rem;
    color: #7A5800;
    font-weight: 500;
}

.sc-causes ul li i {
    font-size: .88rem;
    flex-shrink: 0;
    margin-top: .08rem;
    color: var(--warning);
}

/* Divider */


/* Actions */










/* Trust */

/* ══ 18.10 orders/delivery-success (unique: steps, delivery-info) ══════════════════════════════════════════ */
/* Stripe vert (livraison) */


/* Icon */












/* Order number box */










/* Delivery info box */
.sc-delivery-info {
    margin: 1.25rem 1.75rem 0;
    background: var(--info-soft);
    border: 1.5px solid rgba(59, 130, 246, .18);
    border-left: 3px solid var(--info);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    text-align: left;
}

.sc-delivery-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--info);
    margin-bottom: .5rem;
}

.sc-delivery-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sc-delivery-list li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .8rem;
    color: #1E3A5F;
    font-weight: 500;
}

.sc-delivery-list li i {
    font-size: .88rem;
    flex-shrink: 0;
    margin-top: .08rem;
    color: var(--info);
}

/* Steps */


.sc-steps {
    display: flex;
    padding: 1.1rem 1.75rem;
    gap: 0;
}

.sc-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
}

.sc-step+.sc-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: rgba(0, 201, 167, .2);
    z-index: 0;
}

.sc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.sc-step-dot.done {
    background: rgba(0, 201, 167, .12);
    color: var(--success);
    border: 2px solid rgba(0, 201, 167, .25);
}

.sc-step-dot.pending {
    background: rgba(59, 130, 246, .1);
    color: var(--info);
    border: 2px solid rgba(59, 130, 246, .25);
}

.sc-step-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    max-width: 70px;
    line-height: 1.35;
}

/* Actions */






.sc-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: var(--info-soft);
    color: var(--info);
    border: 1.5px solid rgba(59, 130, 246, .25);
    border-radius: 100px;
    padding: .72rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr);
}

.sc-btn-secondary:hover {
    background: rgba(59, 130, 246, .14);
    border-color: rgba(59, 130, 246, .4);
    color: var(--info);
}





/* Trust */

/* ══ 18.11 orders/delivery-order + orders/index (fusionnés) ══════════════════════════════════════════ */
.page-event-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.15;
    text-transform: uppercase;
}

.event-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.meta-pill i {
    color: var(--brand);
    font-size: .9rem;
}

/* ── Pass card ── */
.pass-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.pass-card:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.pass-card.has-selection {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.pass-card.discount-active {
    border-color: rgba(124, 58, 237, .3);
}

.pass-card.discount-active:hover,
.pass-card.discount-active.has-selection {
    border-color: var(--discount);
    box-shadow: 0 0 0 4px var(--discount-glow);
}

.pass-card .card-body {
    padding: 1.25rem 1.4rem;
}

.pass-card .card-footer {
    padding: .75rem 1.4rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

.pass-name {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.pass-desc {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* ── Price block ── */
.price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .12rem;
}

.price-original {
    font-size: .78rem;
    color: var(--text-muted);
    text-decoration: line-through;
    display: none;
}

.price-original.visible {
    display: block;
}

.pass-price {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-primary);
    transition: color var(--transition);
}

.pass-price.is-discounted {
    color: var(--discount);
}

.pass-price .currency {
    font-family: 'Montserrat', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: .8rem;
    color: var(--text-muted);
    margin-left: 2px;
}

.price-saving {
    font-size: .72rem;
    font-weight: 700;
    color: var(--discount);
    background: var(--discount-soft);
    border-radius: 100px;
    padding: .1rem .55rem;
    display: none;
}

.price-saving.visible {
    display: inline-block;
}

/* ── Discount strip ── */
.discount-strip {
    background: linear-gradient(135deg, #7C3AED 0%, #9B59B6 100%);
    color: #fff;
    padding: .45rem 1.4rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.discount-strip.visible {
    display: flex;
}

.discount-strip .ds-label {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.discount-strip .ds-label i {
    font-size: .95rem;
}

.countdown-pill {
    background: rgba(255, 255, 255, .2);
    border-radius: 100px;
    padding: .15rem .65rem;
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 88px;
    justify-content: center;
    white-space: nowrap;
}

.countdown-pill.urgent {
    background: rgba(255, 50, 50, .35);
    animation: blink-pill 1s infinite;
}

@keyframes blink-pill {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

.discount-upcoming {
    background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(124, 58, 237, .02));
    border: 1px dashed rgba(124, 58, 237, .3);
    border-radius: var(--radius-sm);
    padding: .6rem 1rem;
    font-size: .8rem;
    color: #5b21b6;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .5rem;
}

.discount-upcoming i {
    flex-shrink: 0;
    font-size: .95rem;
    margin-top: .05rem;
}

.discount-qty-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.discount-qty-badge .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-badge 1.5s infinite;
}

.avail-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.avail-badge.ok {
    background: rgba(0, 201, 167, .12);
    color: #00A087;
}

.avail-badge.low {
    background: rgba(255, 180, 0, .14);
    color: #B87D00;
    animation: pulse-badge 2s infinite;
}

.avail-badge.sold {
    background: rgba(255, 59, 92, .1);
    color: var(--brand);
}

.avail-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

@keyframes pulse-badge {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .45
    }
}

.pass-card.sold-out {
    opacity: .6;
    pointer-events: none;
}

.pass-card.sold-out::after {
    content: 'COMPLET';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .12em;
    color: var(--brand);
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    pointer-events: none;
}

/* ── Stepper ── */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color var(--transition);
}

.qty-stepper:focus-within {
    border-color: var(--brand);
}

.pass-card.discount-active .qty-stepper:focus-within {
    border-color: var(--discount);
}

.qty-stepper button {
    border: none;
    background: transparent;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.qty-stepper button:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.pass-card.discount-active .qty-stepper button:hover {
    background: var(--discount-soft);
    color: var(--discount);
}

.qty-stepper input {
    border: none;
    outline: none;
    width: 42px;
    text-align: center;
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    background: transparent;
    color: var(--text-primary);
    -moz-appearance: textfield;
}

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

/* ── Smart alerts ── */
.smart-alert {
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    font-size: .82rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-left: 3px solid transparent;
    margin-top: .6rem;
    animation: fade-alert .3s ease;
}

@media (max-width:768px) {
    .smart-alert {
        padding: .65rem .9rem;
        font-size: .8rem;
        gap: .5rem;
    }
}

@media (max-width:576px) {
    .smart-alert {
        padding: .6rem .8rem;
        font-size: .78rem;
        gap: .45rem;
        flex-wrap: wrap;
    }
}

@media (max-width:400px) {
    .smart-alert {
        padding: .55rem .7rem;
        font-size: .75rem;
        gap: .4rem;
    }
}

@keyframes fade-alert {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.smart-alert i {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.smart-alert.info {
    background: rgba(0, 120, 255, .07);
    border-color: #0078FF;
    color: #0055cc;
}

.smart-alert.warning {
    background: var(--warning-soft);
    border-color: #FFB400;
    color: #9A6A00;
}

.smart-alert.danger {
    background: rgba(255, 59, 92, .07);
    border-color: var(--brand);
    color: #c2173a;
}

/* ── Alerte prix mixte ── */
.mixed-price-alert {
    border-radius: var(--radius-sm);
    padding: .6rem 1rem;
    font-size: .8rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(124, 58, 237, .02));
    border: 1px solid rgba(124, 58, 237, .25);
    border-left: 3px solid var(--discount);
    color: #5b21b6;
    margin-top: .5rem;
    animation: fade-alert .3s ease;
}

.mixed-price-alert i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: .05rem;
}

.lottery-notice {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    font-size: .8rem;
    color: #7a3e00;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .5rem;
}

.lottery-notice i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: .05rem;
}

/* ── Summary sidebar ── */
.summary-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.summary-header {
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--border);
}

.summary-header h5 {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-primary);
    margin: 0;
}

.summary-body {
    padding: 1rem 1.4rem;
}

.summary-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.summary-empty i {
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
    opacity: .4;
}

.summary-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--border);
    animation: slide-in .25s ease;
}

.summary-line:last-child {
    border-bottom: none;
}

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

    to {
        opacity: 1;
        transform: none
    }
}

.sl-name {
    font-size: .85rem;
    color: var(--text-primary);
    font-weight: 500;
}

.sl-qty {
    font-size: .78rem;
    color: var(--text-muted);
}

/* Ligne de quantité avec badges préf./normal */
.sl-qty-row {
    font-size: .75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .1rem;
}

.sl-qty-row .badge-pref {
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .05rem .45rem;
    font-weight: 700;
    font-size: .68rem;
}

.sl-qty-row .badge-normal {
    background: rgba(0, 0, 0, .05);
    color: var(--text-muted);
    border-radius: 100px;
    padding: .05rem .45rem;
    font-weight: 600;
    font-size: .68rem;
}

.sl-price {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-primary);
}

.sl-discount-tag {
    font-size: .68rem;
    color: var(--discount);
    font-weight: 600;
    background: var(--discount-soft);
    border-radius: 100px;
    padding: .05rem .45rem;
    margin-left: .3rem;
}

.sl-saving {
    font-size: .7rem;
    color: var(--discount);
    text-align: right;
    display: block;
}

.summary-total-row {
    margin-top: .75rem;
    padding: .9rem 1.4rem;
    background: var(--text-primary);
    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-total-row .label {
    color: rgba(255, 255, 255, .65);
    font-size: .82rem;
    font-weight: 500;
}

.summary-total-row .amount {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}

/* ── CTA ── */
.btn-checkout {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .85rem 2rem;
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--brand-glow);
    background: #e02d50;
    color: #fff;
}

/* ── Test / toast ── */
.test-mode-ribbon {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--brand);
    border-radius: 100px;
    padding: .3rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--brand);
    text-transform: uppercase;
    box-shadow: var(--shadow-card);
    animation: pop-in .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(.7)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.toast-no-order {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: #fff;
    padding: .8rem 1.6rem;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    z-index: 9999;
    display: none;
    white-space: nowrap;
}

.toast-no-order.show {
    display: block;
    animation: toast-up .3s ease;
}

@keyframes toast-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0)
    }
}

.section-label {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.status-card {
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1.5px solid var(--border);
}

.status-card .status-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.status-card .status-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.status-card .status-sub {
    font-size: .88rem;
    color: var(--text-muted);
    margin-top: .4rem;
}

.pass-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* ══ 18.12 orders/payment ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
               VARIABLES
            ═══════════════════════════════════════════ */


/* ── Page header ── */


/* ── Test mode ribbon ── */
.test-ribbon {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--brand);
    border-radius: 100px;
    padding: .3rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand);
    text-transform: uppercase;
    box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════════
               PAYMENT PANE
            ═══════════════════════════════════════════ */


/* ── Section header inside pane ── */






/* ── Instruction bar ── */




/* ═══════════════════════════════════════════
               OPERATOR CARDS
            ═══════════════════════════════════════════ */














/* Checkmark badge */




/* ═══════════════════════════════════════════
               PHONE INPUT
            ═══════════════════════════════════════════ */












/* ── OTP directive ── */
.otp-directive {
    background: linear-gradient(135deg, #FFF8EC, #FFF3DD);
    border: 1px solid rgba(255, 180, 0, .25);
    border-left: 3px solid #FFB400;
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: .8rem;
    color: #7A5800;
    margin-bottom: 1rem;
}

.otp-directive ol {
    margin: .4rem 0 0 .8rem;
    padding: 0;
}

.otp-directive li {
    margin-bottom: .25rem;
}







/* ── Credit card form ── */
.cc-form .form-control {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    padding: .65rem .9rem;
    font-size: .85rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.cc-form .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ═══════════════════════════════════════════
               ACTION FOOTER
            ═══════════════════════════════════════════ */








.btn-cancel {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .72rem 1.4rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
}

.btn-cancel:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.btn-skip {
    background: transparent;
    color: #B87D00;
    border: 1.5px solid rgba(255, 180, 0, .4);
    border-radius: 100px;
    padding: .72rem 1.4rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.btn-skip:hover {
    background: rgba(255, 180, 0, .08);
    border-color: #FFB400;
}

/* Spinner button */


/* ── Free event notice ── */
.free-notice {
    background: rgba(0, 201, 167, .07);
    border: 1px solid rgba(0, 201, 167, .2);
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    font-size: .82rem;
    color: #006E5C;
    margin-bottom: .75rem;
}

/* ═══════════════════════════════════════════
               RESUME SIDEBAR
            ═══════════════════════════════════════════ */
























/* Prix mixte badges */
.rl-badge-pref {
    display: inline-block;
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .05rem .55rem;
    font-size: .7rem;
    font-weight: 700;
}

.rl-badge-normal {
    display: inline-block;
    background: rgba(0, 0, 0, .05);
    color: var(--muted);
    border-radius: 100px;
    padding: .05rem .55rem;
    font-size: .7rem;
    font-weight: 600;
}

.rl-tag-pref {
    display: inline-block;
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .05rem .5rem;
    font-size: .65rem;
    font-weight: 700;
    margin-left: .3rem;
    vertical-align: middle;
}



.rl-saving {
    font-size: .7rem;
    color: var(--discount);
    font-weight: 600;
    margin-top: .15rem;
}

/* Totals section */












/* ── Trust badges ── */






/* ── Countdown bar ── */
.countdown-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    font-size: .83rem;
    font-weight: 500;
    margin-bottom: 1.1rem;
    border-left: 3px solid #00C9A7;
    background: rgba(0, 201, 167, .08);
    color: #006E5C;
    transition: background .5s, border-color .5s, color .5s;
}

.countdown-bar.warn {
    background: #FFF8EC;
    border-left-color: #FFB400;
    color: #7A5800;
}

.countdown-bar.urgent {
    background: var(--brand-soft);
    border-left-color: var(--brand);
    color: var(--brand-dark);
}

.countdown-timer {
    font-family: 'Syne', monospace;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .05em;
}

/* ── Responsive ── */
@media(max-width: 767px) {}

/* ══ 18.13 orders/checkout-delivery ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
                       VARIABLES
                    ═══════════════════════════════════════════ */


/* ── Page title ── */
.checkout-event-title {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ── Test ribbon ── */
.test-ribbon {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--brand);
    border-radius: 100px;
    padding: .3rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand);
    text-transform: uppercase;
    box-shadow: var(--shadow-card);
}

/* ── Alert banners ── */
.co-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
}

.co-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.co-alert-icon.info {
    background: rgba(59, 130, 246, .08);
    color: #3B82F6;
}

.co-alert-icon.warning {
    background: rgba(245, 158, 11, .08);
    color: #F59E0B;
}

.co-alert-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--text);
    margin-bottom: .2rem;
}

.co-alert-sub {
    font-size: .83rem;
    color: var(--muted);
}

/* ═══════════════════════════════════════════
                       FORM PANE
                    ═══════════════════════════════════════════ */
.co-pane {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.co-section {
    padding: 1.4rem 1.6rem 1.2rem;
}

.co-section+.co-section {
    border-top: 1px solid var(--border);
}

.co-section-label {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.co-section-label i {
    font-size: .85rem;
}

/* ── Auth notice ── */
.auth-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.auth-notice a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.auth-notice a:hover {
    text-decoration: underline;
}

.auth-notice .required-note {
    font-size: .78rem;
    color: var(--muted);
}

/* ── Form controls ── */
.co-field {
    margin-bottom: 1rem;
}

.co-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .4rem;
}

.co-label .req {
    color: var(--brand);
    margin-left: .15rem;
}

.co-input,
.co-select {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .95rem;
    font-size: .875rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
}

.co-input::placeholder {
    color: var(--muted);
}

.co-input:focus,
.co-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.co-input.is-invalid,
.co-select.is-invalid {
    border-color: var(--brand);
}

.co-invalid {
    font-size: .77rem;
    color: var(--brand);
    margin-top: .3rem;
}

/* Select arrow */
.co-select-wrap {
    position: relative;
}

.co-select-wrap::after {
    content: '\ea4e';
    font-family: 'remixicon';
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: .9rem;
}

/* ── Zone de livraison dropdown ── */
.zone-btn {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .95rem;
    font-size: .875rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--muted);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.zone-btn:focus,
.zone-btn.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    color: var(--text);
    outline: none;
}

.zone-btn .zone-selected {
    color: var(--text);
    font-weight: 500;
}

.zone-dropdown {
    min-width: 100%;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    padding: 0;
}

.zone-search-wrap {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.zone-search {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .8rem;
    font-size: .83rem;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    background: var(--surface);
    transition: border-color var(--transition);
}

.zone-search:focus {
    border-color: var(--brand);
}

.zone-dropdown .dropdown-item {
    padding: .6rem 1rem;
    font-size: .83rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.zone-dropdown .dropdown-item:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.zone-no-result {
    padding: .7rem 1rem;
    font-size: .82rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Delivery amount readonly ── */
.delivery-amount-display {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .95rem;
    font-size: .95rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.delivery-amount-display .daf-unit {
    font-size: .72rem;
    font-weight: 400;
    color: var(--muted);
}

/* ═══════════════════════════════════════════
                       FORM FOOTER
                    ═══════════════════════════════════════════ */
.co-footer {
    padding: 1.1rem 1.6rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

.btn-co-submit {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn-co-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--brand-glow);
    background: var(--brand-dark);
    color: #fff;
}

/* ═══════════════════════════════════════════
                       RESUME SIDEBAR
                    ═══════════════════════════════════════════ */
























/* Badges prix mixte */
.rl-badge-pref {
    display: inline-block;
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .05rem .55rem;
    font-size: .7rem;
    font-weight: 700;
}

.rl-badge-normal {
    display: inline-block;
    background: rgba(0, 0, 0, .05);
    color: var(--muted);
    border-radius: 100px;
    padding: .05rem .55rem;
    font-size: .7rem;
    font-weight: 600;
}

.rl-tag-pref {
    display: inline-block;
    background: var(--discount-soft);
    color: var(--discount);
    border-radius: 100px;
    padding: .05rem .5rem;
    font-size: .65rem;
    font-weight: 700;
    margin-left: .3rem;
    vertical-align: middle;
}



.rl-saving {
    font-size: .7rem;
    color: var(--discount);
    font-weight: 600;
    margin-top: .15rem;
}

/* Totals */












/* ── Responsive ── */
@media(max-width: 767px) {
    .co-section {
        padding: 1.1rem 1.1rem .9rem;
    }

    .co-footer {
        padding: 1rem 1.1rem;
    }
}

/* ══ 18.14 payments/om-directive ══════════════════════════════════════════ */
/* ── Modal container ── */
.om-modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .16);
}

/* ── Header ── */
.om-modal-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
}

.om-modal-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 100, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.om-modal-title {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #0D0D12;
    margin: 0;
    letter-spacing: -.01em;
}

.om-modal-subtitle {
    font-size: .75rem;
    color: #8A8FA8;
    margin: 0;
}

.om-close-btn {
    margin-left: auto;
    background: rgba(0, 0, 0, .05);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #8A8FA8;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.om-close-btn:hover {
    background: rgba(255, 59, 92, .1);
    color: #FF3B5C;
}

/* ── Body ── */
.om-modal-body {
    padding: 1.4rem 1.5rem 1.2rem;
    background: #fff;
}

.om-intro {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: rgba(255, 100, 0, .06);
    border: 1px solid rgba(255, 100, 0, .18);
    border-left: 3px solid #FF6400;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .83rem;
    color: #7A3300;
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

.om-intro-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: .05rem;
    color: #FF6400;
}

.om-steps-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A8FA8;
    margin-bottom: .85rem;
}

/* ── Steps ── */
.om-steps {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.om-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.om-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 100, 0, .1);
    color: #FF6400;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}

.om-step-title {
    font-size: .85rem;
    font-weight: 700;
    color: #0D0D12;
    margin-bottom: .2rem;
}

.om-step-desc {
    font-size: .8rem;
    color: #5A5F78;
    line-height: 1.55;
}

.om-code {
    display: inline-block;
    background: #0D0D12;
    color: #fff;
    border-radius: 6px;
    padding: .05rem .45rem;
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ── Footer ── */
.om-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #F7F8FA;
}

.om-btn-secondary {
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, .1);
    color: #8A8FA8;
    border-radius: 100px;
    padding: .6rem 1.4rem;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: border-color .2s, color .2s;
    text-decoration: none;
}

.om-btn-secondary:hover {
    border-color: #8A8FA8;
    color: #0D0D12;
}

.om-btn-primary {
    background: #FF6400;
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .62rem 1.6rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Syne', 'Montserrat', sans-serif;
    letter-spacing: .01em;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.om-btn-primary:hover {
    background: #e05800;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 100, 0, .28);
}

/* ══ 18.15 reservations/cancel ══════════════════════════════════════════ */
.cancel-card {
    max-width: 620px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .08);
}

.cancel-header {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.cancel-header h1 {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: .4rem;
}

.cancel-body {
    padding: 2rem;
}

.recap-box {
    background: var(--reserve-soft);
    border: 1px solid rgba(124, 58, 237, .2);
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.recap-row {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    font-size: .9rem;
}

.recap-label {
    color: var(--muted);
}

.recap-value {
    font-weight: 700;
}

.window-box {
    background: var(--warning-soft);
    border: 1.5px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    color: #92400E;
}

.window-box strong {
    color: var(--warning);
}

.warning-box {
    background: var(--danger-soft);
    border: 2px solid var(--danger-border);
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.warning-box .title {
    color: var(--danger);
    font-weight: 800;
    font-size: .93rem;
    margin-bottom: .5rem;
}

.warning-box p {
    color: var(--danger);
    font-size: .87rem;
    margin: 0;
}

.reason-area {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .9rem;
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    outline: none;
    transition: .2s;
}

.reason-area:focus {
    border-color: var(--reserve);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.btn-cancel-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: .9rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    transition: .2s;
    margin-bottom: .8rem;
}

.btn-cancel-danger:hover {
    background: #B91C1C;
}

/* ══ 18.16 reservations/conditions ══════════════════════════════════════════ */
/* ─── Wrapper ─── */
.cond-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ─── Steps progress ─── */
.steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0 .5rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    transition: var(--transition);
}

.step-circle.done {
    background: var(--reserve);
    color: #fff;
}

.step-circle.active {
    background: var(--reserve);
    color: #fff;
    box-shadow: 0 0 0 4px var(--reserve-soft);
}

.step-circle.todo {
    background: var(--surface);
    color: var(--muted);
    border: 2px solid var(--border);
}


.step-connector {
    width: 60px;
    height: 2px;
    background: var(--border);
    margin-bottom: 1.2rem;
}

.step-connector.done {
    background: var(--reserve);
}

/* ─── Hero header ─── */
.cond-hero {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 60%, #0EA5E9 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 2.5rem 2rem 2rem;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cond-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-icon-wrap {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 2rem;
}

.cond-hero h1 {
    font-weight: 900;
    font-size: clamp(1.3rem, 3.5vw, 1.75rem);
    letter-spacing: -.03em;
    margin-bottom: .5rem;
}

.hero-event-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    padding: .35rem 1rem;
    font-size: .85rem;
    font-weight: 600;
}

/* ─── Body ─── */
.cond-body {
    background: var(--surface);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

/* ─── Section titles ─── */



/* ─── Recap ─── */
.recap-card {
    background: var(--reserve-soft);
    border: 1.5px solid var(--reserve-glow);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.recap-header-row {
    padding: .85rem 1.2rem;
    background: linear-gradient(90deg, var(--reserve-soft), transparent);
    border-bottom: 1px solid var(--reserve-glow);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.recap-header-row strong {
    font-size: .9rem;
    color: var(--text);
}

.recap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.recap-cell {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--reserve-glow);
    border-right: 1px solid var(--reserve-glow);
}

.recap-cell:nth-child(even) {
    border-right: none;
}

.recap-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

.recap-cell-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: .2rem;
}

.recap-cell-value {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
}

.recap-cell-value.accent {
    color: var(--reserve);
    font-size: 1.05rem;
}

.recap-cell-value.danger {
    color: var(--danger);
}

.recap-deadline-row {
    padding: .85rem 1.2rem;
    border-top: 1.5px solid var(--reserve-glow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(124, 58, 237, .04);
}

.deadline-label {
    font-size: .82rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.deadline-value {
    font-weight: 800;
    font-size: .95rem;
    color: var(--danger);
}

/* ─── Refund window ─── */
.refund-banner {
    background: var(--success-soft);
    border: 1.5px solid #A7F3D0;
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.refund-banner-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: #D1FAE5;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 1rem;
}

.refund-banner-text strong {
    color: var(--success);
    font-size: .9rem;
    display: block;
    margin-bottom: .2rem;
}

.refund-banner-text p {
    color: #065F46;
    font-size: .83rem;
    margin: 0;
    line-height: 1.5;
}

/* ─── Warning ─── */
.warning-card {
    background: var(--warning-soft);
    border: 1.5px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.warning-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--warning);
    font-weight: 800;
    font-size: .88rem;
    margin-bottom: .7rem;
}

.warning-title-icon {
    width: 28px;
    height: 28px;
    background: #FEF3C7;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

.warning-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.warning-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .85rem;
    color: #92400E;
    font-weight: 600;
    line-height: 1.4;
}

.warning-list li::before {
    content: '!';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: #FCD34D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 900;
    color: #78350F;
    margin-top: .05rem;
}

/* ─── Terms ─── */
.terms-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    font-size: .87rem;
    color: var(--text);
    line-height: 1.7;
    max-height: 180px;
    overflow-y: auto;
}

.terms-card::-webkit-scrollbar {
    width: 4px;
}

.terms-card::-webkit-scrollbar-track {
    background: transparent;
}

.terms-card::-webkit-scrollbar-thumb {
    background: var(--reserve-glow);
    border-radius: 4px;
}

/* ─── Accept section ─── */
.accept-card {
    background: #FAFAFA;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.accept-card.checked {
    background: var(--reserve-soft);
    border-color: var(--reserve-glow);
}

.accept-card .form-check {
    margin: 0;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.accept-card .form-check-input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid #C4B5FD;
    border-radius: 5px;
    cursor: pointer;
    margin-top: .1rem;
}

.accept-card .form-check-input:checked {
    background-color: var(--reserve);
    border-color: var(--reserve);
}

.accept-card .form-check-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
    cursor: pointer;
    line-height: 1.5;
}

/* ─── CTA ─── */
.btn-accept {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: linear-gradient(135deg, var(--reserve) 0%, var(--reserve-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 1rem 2rem;
    font-weight: 800;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--reserve-glow);
    transition: var(--transition);
    letter-spacing: -.01em;
}

.btn-accept:hover:not(:disabled) {
    background: linear-gradient(135deg, #6d28d9 0%, #4338CA 100%);
    box-shadow: 0 6px 24px rgba(124, 58, 237, .35);
    transform: translateY(-1px);
}

.btn-accept:active:not(:disabled) {
    transform: translateY(0);
}

.btn-accept:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-accept .btn-icon {
    font-size: 1.1rem;
}




/* ─── Divider ─── */
.section-divider {
    border: none;
    border-top: 1.5px solid var(--border);
    margin: 1.5rem 0;
}

.section-title-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

/* ══ 18.17 reservations/complete ══════════════════════════════════════════ */
.solde-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--reserve-soft);
    color: var(--reserve);
    border: 1px solid var(--reserve-glow);
    border-radius: 100px;
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}




















.resume-solde-row {
    display: flex;
    justify-content: space-between;
    padding: .7rem 1.4rem;
    background: var(--reserve-soft);
}

.resume-solde-value {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--reserve);
}

.deadline-warning {
    background: #FEF9C3;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .82rem;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.phone-group,
.otp-group {
    display: none;
}

.phone-group.visible,
.otp-group.visible {
    display: block;
}

#pay-status-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#pay-status-overlay.active {
    display: flex;
}

.status-modal {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    max-width: 360px;
    width: 90%;
}

.status-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid var(--reserve-soft);
    border-top-color: var(--reserve);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* ══ 18.18 reservations/deposit-success ══════════════════════════════════════════ */
.success-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .08);
}

.success-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    padding: 2.5rem;
    text-align: center;
}

.success-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.success-header h1 {
    font-weight: 800;
    font-size: 1.6rem;
}

.success-body {
    padding: 2rem;
}







.btn-complete {
    display: block;
    background: var(--reserve);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: .9rem;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    transition: .2s;
}

.btn-complete:hover {
    background: #6d28d9;
    color: #fff;
}

.btn-event {
    display: block;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem;
    font-size: .88rem;
    text-align: center;
    text-decoration: none;
    margin-top: .8rem;
    transition: .2s;
}

.btn-event:hover {
    border-color: var(--reserve);
    color: var(--reserve);
}

/* ══ 18.19 reservations/index ══════════════════════════════════════════ */
.reserve-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--reserve-soft);
    color: var(--reserve);
    border: 1px solid var(--reserve-glow);
    border-radius: 100px;
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}



.res-pass-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.res-pass-card:hover {
    border-color: var(--reserve-glow);
    box-shadow: 0 4px 20px var(--reserve-soft);
}

.pass-card.selected {
    border-color: var(--reserve);
    background: var(--reserve-soft);
}

.res-pass-card .pass-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.res-pass-card .pass-price {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--reserve);
}

.res-pass-card .pass-deposit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: 1px solid var(--reserve-glow);
    border-radius: 8px;
    padding: .2rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--reserve);
}

.qty-control {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--reserve);
    background: none;
    color: var(--reserve);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.qty-btn:hover {
    background: var(--reserve);
    color: #fff;
}

.qty-display {
    font-weight: 700;
    font-size: 1rem;
    min-width: 24px;
    text-align: center;
}

.res-summary-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: sticky;
    top: 80px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
}

.summary-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: .6rem 0;
}

.summary-total {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
}

.summary-deposit {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--reserve);
}

.btn-reserve {
    background: var(--reserve);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: .85rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    transition: var(--transition);
}

.btn-reserve:hover {
    background: #6d28d9;
}

.btn-reserve:disabled {
    background: #c4b5fd;
    cursor: not-allowed;
}

.info-banner {
    background: var(--reserve-soft);
    border: 1px solid var(--reserve-glow);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .84rem;
    color: var(--reserve);
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.deadline-badge {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: .3rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: #C2410C;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Auth widget */
.auth-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
}

.auth-tab-btn {
    padding: .45rem 1rem;
    border-radius: 8px 8px 0 0;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: var(--transition);
}

.auth-tab-btn.active {
    background: var(--reserve-soft);
    color: var(--reserve);
}

.auth-tab-btn:hover:not(.active) {
    color: var(--text);
}

.auth-tab-pane {
    display: none;
}

.auth-tab-pane.active {
    display: block;
}

.auth-connected {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
}

.auth-connected-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.auth-connected-name {
    font-weight: 700;
    font-size: .95rem;
    color: #15803d;
}

.auth-connected-detail {
    font-size: .82rem;
    color: #166534;
}

.auth-redirect-card {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.auth-redirect-card p {
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: 1rem;
}

.btn-auth-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: var(--transition);
}

.btn-auth-action.btn-login {
    background: var(--reserve);
    color: #fff;
}

.btn-auth-action.btn-login:hover {
    background: #6d28d9;
    color: #fff;
}

.btn-auth-action.btn-register {
    background: #fff;
    color: var(--reserve);
    border: 1.5px solid var(--reserve);
}

.btn-auth-action.btn-register:hover {
    background: var(--reserve-soft);
    color: var(--reserve);
}

/* ══ 18.20 reservations/my-reservations ══════════════════════════════════════════ */
.res-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    transition: var(--transition);
}

.res-card:hover {
    border-color: var(--reserve-glow);
    box-shadow: 0 4px 20px var(--reserve-soft);
}

.res-card+.res-card {
    margin-top: .75rem;
}

.res-event-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.res-pass-name {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .15rem;
}

.res-amounts {
    display: flex;
    gap: 1.5rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}

.res-amount-item {
    display: flex;
    flex-direction: column;
}

.res-amount-label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.res-amount-value {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.res-amount-value.deposit {
    color: var(--reserve);
}

.res-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .75rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
}

.res-status.pending {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FED7AA;
}

.res-status.active {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.res-status.completed {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.res-status.expired {
    background: #F9FAFB;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.res-status.cancelled {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.btn-res-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 8px;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: 1.5px solid var(--reserve);
    color: var(--reserve);
    background: none;
}

.btn-res-action:hover {
    background: var(--reserve);
    color: #fff;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1.5px dashed var(--border);
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: .5rem;
}

.empty-state-text {
    color: var(--muted);
    font-size: .9rem;
}

/* ══ 18.21 reservations/show ══════════════════════════════════════════ */
.res-detail-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .08);
}

.res-header {
    padding: 1.8rem;
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    color: #fff;
}

.res-header h1 {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: .3rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 100px;
    padding: .3rem .9rem;
    font-size: .78rem;
    font-weight: 700;
}

.status-PENDING_PAYMENT {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.status-DEPOSIT_PAID {
    background: #ECFDF5;
    color: #059669;
}

.status-COMPLETED {
    background: #ECFDF5;
    color: #059669;
}

.status-EXPIRED {
    background: #FEF2F2;
    color: #DC2626;
}

.status-CANCELLED {
    background: #F3F4F6;
    color: #6B7280;
}

.refund-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: 100px;
    padding: .2rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    margin-top: .4rem;
}

.refund-badge.approved {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

.refund-badge.rejected {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FCA5A5;
}

.btn-cancel-res {
    display: block;
    background: transparent;
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
    border-radius: var(--radius-sm);
    padding: .7rem;
    font-size: .88rem;
    text-align: center;
    text-decoration: none;
    transition: .2s;
    margin-top: .8rem;
}

.btn-cancel-res:hover {
    background: #FEF2F2;
    color: #DC2626;
}

.refund-window-block {
    background: #FFF7ED;
    border: 1.5px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    font-size: .83rem;
    color: #92400E;
}

.res-body {
    padding: 2rem;
}




.btn-action {
    display: block;
    background: var(--reserve);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: .85rem;
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    text-decoration: none;
    transition: .2s;
    margin-bottom: .8rem;
}

.btn-action:hover {
    background: #6d28d9;
    color: #fff;
}

.deadline-date {
    font-size: 1.3rem;
    font-weight: 800;
    color: #C2410C;
}

.progress-bar-res {
    height: 8px;
    border-radius: 4px;
    background: #E5E7EB;
    overflow: hidden;
    margin-top: .5rem;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--reserve);
    transition: .3s;
}

/* ══ 18.22 event/index ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
                                                               PAGE HEADER
                                                            ═══════════════════════════════════════════ */
.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.el-page-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--text);
    letter-spacing: -.03em;
    margin: 0;
}

.el-result-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .28rem .9rem;
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
}

.el-result-count strong {
    color: var(--text);
    font-weight: 700;
}

/* ═══════════════════════════════════════════
                                                               FILTER BAR — toujours visible
                                                            ═══════════════════════════════════════════ */
.el-filterbar {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

/* ── Top row : search + sort + advanced toggle ── */
.el-filterbar-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.el-search-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

.el-search-wrap i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .95rem;
    pointer-events: none;
}

.el-search-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .62rem .9rem .62rem 2.3rem;
    font-size: .85rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--surface-2);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.el-search-input::placeholder {
    color: var(--muted);
}

.el-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    background: var(--surface);
}

/* Sort dropdown */
.el-sort-wrap {
    position: relative;
    flex-shrink: 0;
}

.el-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .62rem .95rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition);
}

.el-sort-btn:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

.el-sort-btn i {
    font-size: .9rem;
}

.el-sort-dropdown {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    min-width: 180px;
    z-index: 50;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.el-sort-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.el-sort-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.el-sort-option:hover {
    background: var(--surface-2);
}

.el-sort-option.selected {
    color: var(--brand);
    font-weight: 700;
}

.el-sort-option i {
    font-size: .9rem;
    color: var(--muted);
}

.el-sort-option.selected i {
    color: var(--brand);
}

/* Advanced toggle */
.el-advanced-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .62rem .95rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition);
}

.el-advanced-btn:hover,
.el-advanced-btn.active {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.el-advanced-btn .el-filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    display: none;
}

.el-advanced-btn.has-filters .el-filter-dot {
    display: inline-block;
}

/* ── Category pills row ── */
.el-cats-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
}

.el-cats-row::-webkit-scrollbar {
    display: none;
}









.el-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .28rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition);
    text-decoration: none;
}

.el-cat-pill:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.el-cat-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}

.el-cat-pill i {
    font-size: .82rem;
}

/* Conteneur empilé — positionné sur la card */












/* Tendance — orange chaud */


/* En cours — rouge vif avec point live animé */


/* Passé — neutre grisé */






/* Point clignotant pour "Ce soir" et "Bientôt" */


/* Icône live pulsante pour "En cours" */


@keyframes ev-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .6;
        transform: scale(1.25);
    }
}

/* Free-only toggle pill */
.el-free-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .28rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition);
    text-decoration: none;
}

.el-free-pill:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(0, 201, 167, .08);
}

.el-free-pill.active {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.el-free-pill i {
    font-size: .82rem;
}

/* ── Type pills row ── */
.el-types-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.el-types-row::-webkit-scrollbar {
    display: none;
}

.el-type-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .22rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition);
    text-decoration: none;
}

.el-type-pill:hover {
    border-color: rgba(124, 58, 237, .35);
    color: #7C3AED;
    background: rgba(124, 58, 237, .07);
}

.el-type-pill.active {
    background: rgba(124, 58, 237, .1);
    border-color: rgba(124, 58, 237, .4);
    color: #7C3AED;
    font-weight: 700;
}

/* Row label */
.el-row-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Advanced panel ── */
.el-advanced-panel {
    border-top: 1px solid var(--border);
    padding: 1.1rem 1.2rem;
    background: var(--surface-2);
}

.el-adv-label {
    font-family: 'Syne', sans-serif;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem;
}

/* Slider */
.el-slider-wrap {
    padding: .75rem 0 .35rem;
}

.noUi-connect {
    background: var(--brand) !important;
}

.noUi-handle {
    background: var(--brand) !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px var(--brand-glow) !important;
    width: 18px !important;
    height: 18px !important;
    top: -7px !important;
    right: -9px !important;
    cursor: grab;
}

.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
}

.noUi-tooltip {
    background: var(--text) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    padding: .2rem .5rem !important;
}

/* Price display */
.el-price-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .45rem;
}

.el-price-val {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    color: var(--text);
}

/* Date range */
.el-date-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .58rem .85rem;
    font-size: .82rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.el-date-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Advanced actions */
.el-adv-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .6rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-filter:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px var(--brand-glow);
}

.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .58rem 1.1rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    text-decoration: none;
}

.btn-reset:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* ── Active chips bar ── */
.el-active-filters {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.el-active-label {
    font-size: .73rem;
    color: var(--muted);
    font-weight: 500;
}

.el-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid rgba(255, 59, 92, .2);
    border-radius: 100px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
}

.el-active-chip a {
    color: var(--brand);
    text-decoration: none;
    margin-left: .1rem;
    font-size: .85rem;
}

.el-active-chip a:hover {
    opacity: .6;
}

/* ═══════════════════════════════════════════
                                                               GRID
                                                            ═══════════════════════════════════════════ */
.el-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.1rem;
}

.el-skeleton {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    height: 320px;
    box-shadow: var(--shadow-card);
}

.el-skeleton-img {
    height: 190px;
    background: #E8EAF0;
    animation: el-shimmer 1.4s infinite linear;
}

.el-skeleton-body {
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.el-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: #E8EAF0;
    animation: el-shimmer 1.4s infinite linear;
}

.el-skeleton-line.short {
    width: 60%;
}

@keyframes el-shimmer {
    0% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .6;
    }
}

.el-empty {
    grid-column: 1/-1;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.el-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--muted);
    margin: 0 auto 1rem;
}

.el-empty-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: .4rem;
}

.el-empty-sub {
    font-size: .85rem;
    color: var(--muted);
}

/* ═══════════════════════════════════════════
                                                               EV-CARD (composant)
                                                            ═══════════════════════════════════════════ */














































/* ═══════════════════════════════════════════
                                       ✅ PAGINATION STYLES
                                    ═══════════════════════════════════════════ */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination li {
    display: inline-flex;
}

.pagination-btn,
.pagination-active,
.pagination-disabled,
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: .5rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-decoration: none;
}

.pagination-btn {
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
    cursor: pointer;
}

.pagination-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
}

.pagination-active {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    border: 1.5px solid var(--brand);
}

.pagination-disabled {
    color: var(--muted);
    background: var(--surface);
    border: 1.5px solid var(--border);
    cursor: not-allowed;
    opacity: .5;
}

.pagination-ellipsis {
    color: var(--muted);
    cursor: default;
}

/* ✅ Loading Indicator */
.spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.25em;
}

.text-primary {
    color: var(--brand) !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media(max-width:640px) {
    .el-filterbar-top {
        flex-wrap: wrap;
    }

    .el-sort-btn span {
        display: none;
    }

    .pagination {
        gap: .25rem;
    }

    .pagination-btn,
    .pagination-active,
    .pagination-disabled,
    .pagination-ellipsis {
        min-width: 35px;
        height: 35px;
        font-size: .75rem;
        padding: .3rem;
    }
}

/* ══ 18.23 event/show ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
                                                                                   TOKENS
                                                                                ═══════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
                                                                                   RESET breadcrumb (on garde le composant mais on le cache sur cette page)
                                                                                ═══════════════════════════════════════════════ */
.page-title-box {
    display: none !important;
}

/* ═══════════════════════════════════════════════
                                                                                   CINEMATIC HERO — pleine largeur
                                                                                ═══════════════════════════════════════════════ */
.ev-hero {
    position: relative;
    width: 100%;
    height: clamp(380px, 56vw, 620px);
    overflow: hidden;
    background: #0D0D12;
}

.ev-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.04);
    transition: transform 8s ease;
}

.hero-bg {
    display: none;
}

.ev-hero.loaded .ev-hero-bg {
    transform: scale(1);
}

/* Gradient multi-couche */
.ev-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 30%, rgba(0, 0, 0, .0) 55%, rgba(0, 0, 0, .85) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, transparent 60%);
    z-index: 1;
}

/* ── Barre de navigation héro (back + actions) ── */
.ev-hero-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 100%);
}

.ev-hero-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 100px;
    padding: .42rem 1rem .42rem .65rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t);
}

.ev-hero-back:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.ev-hero-back i {
    font-size: 1rem;
}

.ev-hero-actions-top {
    display: flex;
    gap: .5rem;
}

.ev-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--t), transform var(--t);
    text-decoration: none;
    position: relative;
}

.ev-action-btn:hover {
    background: rgba(255, 255, 255, .28);
    transform: scale(1.06);
}

.ev-action-btn.active {
    background: rgba(255, 59, 92, .7);
    border-color: rgba(255, 59, 92, .5);
    color: #fff;
}

/* ── Contenu héro (bas) ── */
.ev-hero-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1.75rem 1.75rem 2rem;
}

.ev-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .85rem;
}

.ev-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 100px;
    padding: .25rem .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ev-hero-badge-cat {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.ev-hero-badge-free {
    background: rgba(16, 185, 129, .85);
    color: #fff;
}

.ev-hero-badge-priv {
    background: rgba(255, 59, 92, .8);
    color: #fff;
}

.ev-hero-badge-test {
    background: rgba(249, 115, 22, .8);
    color: #fff;
}

.ev-hero-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    color: #fff;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-bottom: .75rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.ev-hero-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .3rem;
    font-weight: 500;
}

.ev-hero-meta-row i {
    font-size: .9rem;
    color: rgba(255, 255, 255, .6);
    flex-shrink: 0;
}

/* Thumbnail strip intégré dans le héro */
.ev-hero-thumbs {
    display: flex;
    gap: .4rem;
    margin-top: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .1rem;
}

.ev-hero-thumbs::-webkit-scrollbar {
    display: none;
}

.ev-thumb {
    width: 56px;
    height: 42px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .25);
    transition: border-color var(--t), transform var(--t);
}

.ev-thumb.active {
    border-color: #fff;
}

.ev-thumb:hover {
    transform: scale(1.05);
}

.ev-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Share dropdown ── */
.share-dropdown {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .18);
    width: 210px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 99;
}

.share-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.share-dropdown-header {
    padding: .55rem 1rem .45rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.share-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background var(--t);
}

.share-item:hover {
    background: var(--surface-2);
}

.share-item i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.si-whatsapp {
    background: rgba(37, 211, 102, .12);
    color: #25D366;
}

.si-facebook {
    background: rgba(24, 119, 242, .1);
    color: #1877F2;
}

.si-twitter {
    background: rgba(29, 155, 240, .1);
    color: #1D9BF0;
}

.si-copy {
    background: rgba(0, 0, 0, .05);
    color: var(--muted);
}

.copy-success .si-copy {
    background: rgba(16, 185, 129, .12);
    color: var(--green);
}

/* ═══════════════════════════════════════════════
                                                                                   STICKY HEADER (apparaît au scroll)
                                                                                ═══════════════════════════════════════════════ */
.ev-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: .65rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.ev-sticky-header.visible {
    transform: translateY(0);
}

.ev-sticky-title {
    flex: 1;
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    color: var(--text);
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-sticky-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .52rem 1.25rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t);
}

.ev-sticky-cta:hover {
    background: var(--brand-dark);
    color: #fff;
}

/* ═══════════════════════════════════════════════
                                                                                   LAYOUT PRINCIPAL
                                                                                ═══════════════════════════════════════════════ */
.ev-main {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

/* ── Cartes de contenu ── */
.ev-info-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ev-card-section {
    padding: 1.5rem 1.75rem;
}

.ev-card-section+.ev-card-section {
    border-top: 1px solid var(--border);
}

/* ── Section label ── */
.ev-sec-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.ev-sec-label::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}

/* ── Titre événement ── */
.ev-event-date {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 100px;
    padding: .28rem .85rem;
    margin-bottom: .85rem;
}

.ev-event-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    color: var(--text);
    letter-spacing: -.04em;
    line-height: 1.12;
    margin-bottom: .65rem;
}

.ev-event-desc {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 0;
}

/* ── Pill organisateur ── */
.ev-org-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .38rem .9rem .38rem .38rem;
    margin-top: 1.15rem;
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.ev-org-pill:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.ev-org-pill-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ev-org-pill-ph {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.ev-org-pill-by {
    font-size: .65rem;
    color: var(--muted);
    line-height: 1;
}

.ev-org-pill-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
}

/* ── Dates & lieux ── */
.ev-loc-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.ev-loc-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .9rem 1.1rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--t);
}

.ev-loc-item:hover {
    border-color: rgba(255, 59, 92, .2);
}

.ev-loc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.ev-loc-date {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .2rem;
}

.ev-loc-time {
    font-size: .76rem;
    color: var(--muted);
    margin-bottom: .15rem;
}

.ev-loc-place {
    font-size: .78rem;
    color: var(--muted);
}

/* ── Description longue ── */
.ev-long-desc {
    font-size: .9rem;
    color: #4A4D60;
    line-height: 1.75;
}

.ev-long-desc h1,
.ev-long-desc h2,
.ev-long-desc h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: var(--text);
    margin-top: 1.25rem;
}

/* ── Organisateur card ── */
.ev-org-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ev-org-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.ev-org-avatar-ph {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ev-org-name {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: color var(--t);
}

.ev-org-name:hover {
    color: var(--brand);
}

.ev-org-by {
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: .15rem;
}

.ev-org-socials {
    display: flex;
    gap: .4rem;
    margin-top: .45rem;
}

.ev-social-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: .85rem;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.ev-social-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand);
}

/* ── Status banners ── */
.ev-banner {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    border-left: 3px solid transparent;
}

/* "Bientôt disponible" — indigo : anticipation, événement à venir */
.ev-banner-info {
    background: rgba(99, 102, 241, .08);
    border-color: #6366F1;
}

.ev-banner-info .ev-banner-icon {
    background: rgba(99, 102, 241, .13);
    color: #6366F1;
}

.ev-banner-info .ev-banner-title {
    color: #4338CA;
}

/* Stock faible / attention — ambre : urgence douce */
.ev-banner-warning {
    background: rgba(245, 158, 11, .09);
    border-color: #F59E0B;
}

.ev-banner-warning .ev-banner-icon {
    background: rgba(245, 158, 11, .15);
    color: #D97706;
}

.ev-banner-warning .ev-banner-title {
    color: #92400E;
}

/* "Ventes terminées" — rose doux : indisponible, sans agressivité */
.ev-banner-closed {
    background: rgba(239, 68, 68, .07);
    border-color: #F87171;
}

.ev-banner-closed .ev-banner-icon {
    background: rgba(239, 68, 68, .12);
    color: #EF4444;
}

.ev-banner-closed .ev-banner-title {
    color: #B91C1C;
}

.ev-banner-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.ev-banner-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    color: var(--text);
}

.ev-banner-sub {
    font-size: .79rem;
    color: var(--muted);
    margin-top: .15rem;
}

/* ═══════════════════════════════════════════════
                                                                                   SIDEBAR TICKET
                                                                                ═══════════════════════════════════════════════ */
.ev-ticket-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

/* Prix */
.ev-ticket-header {
    padding: 1.4rem 1.5rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.tc-price-label {
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: .1rem;
}

.tc-price-value {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1;
}

.tc-price-unit {
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
}

/* Countdown */
.ev-countdown {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .9rem;
    padding: .65rem .8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.ev-cd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.ev-cd-num {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--brand);
    line-height: 1;
    letter-spacing: -.02em;
}

.ev-cd-label {
    font-size: .58rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .1rem;
}

.ev-cd-sep {
    font-weight: 800;
    color: var(--muted);
    font-size: .9rem;
    padding-bottom: .5rem;
    align-self: center;
}

/* Barre progression */
.ev-ticket-progress {
    padding: 0 1.5rem .1rem;
}

.ev-prog-row {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.ev-prog-bar {
    height: 5px;
    background: rgba(0, 0, 0, .07);
    border-radius: 100px;
    overflow: hidden;
}

.ev-prog-fill {
    height: 100%;
    border-radius: 100px;
    transition: width .6s ease;
}

/* Passes list */
.ev-passes-wrap {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.ev-passes-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem;
}

.ev-pass-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    transition: border-color var(--t);
    cursor: default;
}

.ev-pass-item+.ev-pass-item {
    margin-top: .45rem;
}

.ev-pass-item:hover {
    border-color: rgba(255, 59, 92, .2);
}

.ev-pass-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
}

.ev-pass-desc {
    font-size: .7rem;
    color: var(--muted);
    margin-top: .05rem;
}

.ev-pass-price {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .85rem;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}

.ev-pass-price.free {
    color: var(--green);
}

/* CTA buttons */
.ev-ticket-body {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.btn-tc-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .9rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-tc-primary:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--brand-glow);
}

.btn-tc-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: transparent;
    color: var(--brand);
    border: 1.5px solid var(--brand);
    border-radius: 100px;
    padding: .75rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t);
}

.btn-tc-secondary:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.btn-tc-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: transparent;
    color: #7C3AED;
    border: 1.5px solid #7C3AED;
    border-radius: 100px;
    padding: .75rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.btn-tc-reserve:hover {
    background: rgba(124, 58, 237, .08);
    color: #7C3AED;
}

.ev-reserve-badge {
    display: inline-block;
    background: rgba(124, 58, 237, .1);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, .25);
    border-radius: 100px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    margin-left: .3rem;
    vertical-align: middle;
}

.btn-tc-tertiary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .75rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--t);
}

.btn-tc-tertiary:hover {
    border-color: var(--text);
}

.btn-tc-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .6rem;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background var(--t);
}

.btn-tc-fav:hover,
.btn-tc-fav.active {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.btn-tc-fav i {
    font-size: .95rem;
}

/* Trust bar */
.tc-trust {
    display: flex;
    justify-content: center;
    gap: .85rem;
    padding: .65rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .69rem;
    color: var(--muted);
}

.tc-trust-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Ventes fermées */
.tc-closed {
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.tc-closed-icon {
    font-size: 2.2rem;
    color: var(--muted);
    margin-bottom: .65rem;
}

.tc-closed-text {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.6;
}

.tc-closed-text strong {
    color: var(--text);
}

/* ═══════════════════════════════════════════════
                                                                                   SWIPERS RECOMMANDATIONS
                                                                                ═══════════════════════════════════════════════ */
.ev-swiper-section {
    margin-top: 2rem;
}

.ev-swiper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ev-swiper-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ev-swiper-title::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}

.ev-swiper-nav {
    display: flex;
    gap: .4rem;
}

.ev-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    font-size: .9rem;
    transition: background var(--t), border-color var(--t), color var(--t);
}

.ev-nav-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

/* ═══════════════════════════════════════════════
                                                                                   STICKY CTA MOBILE
                                                                                ═══════════════════════════════════════════════ */
.ev-mobile-cta {
    display: none;
}

@media(max-width: 991px) {
    .ev-hero {
        height: clamp(280px, 70vw, 420px);
    }

    .ev-hero-title {
        font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    }

    .ev-hero-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .ev-ticket-card {
        position: static;
        margin-bottom: 1.25rem;
    }

    .ev-card-section {
        padding: 1.1rem 1.25rem;
    }

    .ev-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1.5px solid var(--border);
        padding: .7rem 1rem;
        align-items: center;
        gap: .55rem;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .1);
    }

    .mc-price {
        flex: 1;
    }

    .mc-price-from {
        font-size: .63rem;
        color: var(--muted);
        line-height: 1;
    }

    .mc-price-val {
        font-family: 'Syne', sans-serif;
        font-weight: 800;
        font-size: .95rem;
        color: var(--text);
    }

    .mc-fav {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid var(--border);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--t);
    }

    .mc-fav.active,
    .mc-fav:hover {
        background: var(--brand-soft);
        border-color: rgba(255, 59, 92, .3);
        color: var(--brand);
    }

    .mc-btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 100px;
        padding: .72rem 1.3rem;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: .8rem;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--t);
    }

    .mc-btn:hover {
        background: var(--brand-dark);
        color: #fff;
    }

}

@media(max-width: 576px) {
    .ev-hero-title {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }
}

/* Modal tombola */
.lottery-modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .16);
}

.lottery-note {
    background: rgba(245, 158, 11, .07);
    border: 1px solid rgba(245, 158, 11, .2);
    border-left: 3px solid var(--gold);
    border-radius: 10px;
    padding: .7rem 1rem;
    font-size: .81rem;
    color: #7A5800;
    margin-bottom: 1.25rem;
}

/* ══ 18.24 index.blade.php (homepage) ══════════════════════════════════════════ */



/* ════════════════════════════════════════════
                                                               SECTIONS & HEADERS
                                                            ════════════════════════════════════════════ */
.home-section {
    padding: 3rem 0;
}

.home-section-alt {
    padding: 3rem 0;
    background: var(--surface-2);
}

.home-section-dark {
    padding: 3rem 0;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.home-section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 85% 50%, rgba(232, 58, 48, .11) 0%, transparent 70%);
    pointer-events: none;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.section-accent {
    width: 5px;
    height: 2.1rem;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand), var(--gold));
    flex-shrink: 0;
}

.section-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    color: var(--text);
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1.15;
}

.section-title-light {
    color: #fff;
}

.section-subtitle {
    font-size: .79rem;
    color: var(--muted);
    margin: .15rem 0 0;
}

.section-subtitle-light {
    color: rgba(255, 255, 255, .5);
}

.btn-section-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .55rem 1.3rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.btn-section-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-section-cta-outline {
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, .2);
}

.btn-section-cta-outline:hover {
    background: rgba(255, 255, 255, .18);
}

/* ════════════════════════════════════════════
                                                               SEARCH BAR
                                                            ════════════════════════════════════════════ */
.home-search-wrap {
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.home-search-inner {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .32rem .32rem .32rem 1.1rem;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.home-search-inner:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.home-search-inner i {
    color: #fff;
    font-size: 1rem;
    margin-right: .5rem;
    flex-shrink: 0;
}

.home-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: .87rem;
    color: var(--text);
    min-width: 0;
}

.home-search-input::placeholder {
    color: var(--muted);
}

.home-search-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .58rem 1.2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    transition: background var(--transition);
}

.home-search-btn:hover {
    background: var(--brand-dark);
}

/* ════════════════════════════════════════════
                                                               CATEGORY FILTER
                                                            ════════════════════════════════════════════ */
.cat-filter-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: .5rem .1rem 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25rem;
}

.cat-filter-bar::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: none;
    background: none;
    cursor: pointer;
    flex: 0 0 72px;
    width: 72px;
    -webkit-tap-highlight-color: transparent;
}

.cat-btn:active {
    opacity: .75;
}

.cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F1F5;
    border: 1.5px solid rgba(0, 0, 0, .07);
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.cat-icon i {
    font-size: 21px;
    color: #6B7280;
    transition: color var(--transition);
}

.cat-btn.active .cat-icon {
    background: var(--brand);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 5px 16px var(--brand-glow);
}

.cat-btn.active .cat-icon i {
    color: #fff;
}

.cat-label {
    font-size: 10.5px;
    font-weight: 500;
    color: #6B7280;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    min-height: calc(10.5px * 1.25 * 2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    word-break: break-word;
    hyphens: auto;
    transition: color var(--transition);
}

.cat-btn.active .cat-label {
    color: var(--brand);
    font-weight: 700;
}

.cat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.cat-btn.active .cat-dot {
    opacity: 1;
}

/* ════════════════════════════════════════════
                                                               GRID EVENTS — animation
                                                            ════════════════════════════════════════════ */
.events-grid .col {
    animation: fadeSlideUp .4s ease both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.events-grid .col:nth-child(1) {
    animation-delay: .04s;
}

.events-grid .col:nth-child(2) {
    animation-delay: .08s;
}

.events-grid .col:nth-child(3) {
    animation-delay: .12s;
}

.events-grid .col:nth-child(4) {
    animation-delay: .16s;
}

.events-grid .col:nth-child(5) {
    animation-delay: .20s;
}

.events-grid .col:nth-child(6) {
    animation-delay: .24s;
}

.events-grid .col:nth-child(7) {
    animation-delay: .28s;
}

.events-grid .col:nth-child(8) {
    animation-delay: .32s;
}

/* ════════════════════════════════════════════
                                                               SWIPER NAV (swipers de sections)
                                                            ════════════════════════════════════════════ */
.swiper-nav-bar {
    position: relative;
    height: 46px;
    margin-bottom: .5rem;
}

.swiper-nav-bar .swiper-button-next,
.swiper-nav-bar .swiper-button-prev {
    top: 0;
    bottom: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.home-section .swiper-button-next,
.home-section .swiper-button-prev,
.home-section-alt .swiper-button-next,
.home-section-alt .swiper-button-prev {
    color: var(--brand);
    background: var(--brand-soft);
    transition: background var(--transition);
}

.home-section .swiper-button-next:hover,
.home-section .swiper-button-prev:hover,
.home-section-alt .swiper-button-next:hover,
.home-section-alt .swiper-button-prev:hover {
    background: rgba(232, 58, 48, .18);
}

.home-section-dark .swiper-button-next,
.home-section-dark .swiper-button-prev {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.home-section-dark .swiper-button-next:hover,
.home-section-dark .swiper-button-prev:hover {
    background: rgba(255, 255, 255, .2);
}

.swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

.swiper-button-prev {
    right: 48px !important;
    left: auto !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: .8rem !important;
    font-weight: 800 !important;
}

/* ════════════════════════════════════════════
                                                               WEEKEND — empty state
                                                            ════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: .87rem;
}

.empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .4;
}

/* ════════════════════════════════════════════
                                                               FREE SECTION — accent vert
                                                            ════════════════════════════════════════════ */
.accent-green {
    background: linear-gradient(180deg, #10B981, #059669) !important;
}

/* ════════════════════════════════════════════
                                                               BACK TO TOP
                                                            ════════════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px var(--brand-glow);
    transition: background var(--transition), transform var(--transition);
}

#back-to-top:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
                                                               RESPONSIVE
                                                            ════════════════════════════════════════════ */
@media (max-width: 576px) {
    .section-title {
        font-size: 1.15rem;
    }

    .home-search-btn span {
        display: none;
    }

    .home-search-btn {
        padding: .58rem .9rem;
    }

    .btn-section-cta span {
        display: none;
    }
}




/* ════════════════════════════════════════════
                                                               HERO SWIPER
                                                            ════════════════════════════════════════════ */
.hero-swiper-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .2);
}

.mySwiper .swiper-slide {
    position: relative;
}

/* ── Static image slides ── */
.hero-static-slide {
    height: clamp(260px, 42vw, 520px);
    /* ou 100vh, ou clamp(...) */
}

.hero-static-slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* ── Dynamic event hero slides ── */
.hero-event-slide {
    position: relative;
    width: 100%;
    height: clamp(260px, 42vw, 520px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero-bg {
    display: none;
}

.hero-event-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.mySwiper .swiper-slide-active .hero-event-bg {
    transform: scale(1.06);
}

.hero-event-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .45) 45%,
            rgba(0, 0, 0, .12) 75%,
            transparent 100%);
}

.hero-event-top {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 5px 12px;
    border-radius: 100px;
    text-transform: uppercase;
}

.hero-badge-trend {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 3px 12px var(--brand-glow);
}

.hero-badge-cat {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hero-badge-free {
    background: rgba(16, 185, 129, .85);
    color: #fff;
}

.hero-event-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 10px;
    letter-spacing: .02em;
}

.hero-event-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-size: clamp(1.25rem, 3.5vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-event-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
}

.hero-meta-row i {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
}

.hero-event-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 10px 22px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-hero-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--brand-glow);
}

.btn-hero-fav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}

.btn-hero-fav:hover,
.btn-hero-fav.active {
    background: rgba(232, 58, 48, .6);
}

.btn-hero-fav.active i::before {
    content: "\ee0f";
}

/* ri-heart-fill */

/* Swiper pagination */
.mySwiper .swiper-pagination {
    bottom: 14px;
}

.mySwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    width: 7px;
    height: 7px;
    transition: width .3s, background .3s;
}

.mySwiper .swiper-pagination-bullet-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}

/* ════════════════════════════════════════════
                                                               SECTIONS & HEADERS
                                                            ════════════════════════════════════════════ */
.home-section {
    padding: 3rem 0;
}

.home-section-alt {
    padding: 3rem 0;
    background: var(--surface-2);
}

.home-section-dark {
    padding: 3rem 0;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.home-section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 85% 50%, rgba(232, 58, 48, .11) 0%, transparent 70%);
    pointer-events: none;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.section-accent {
    width: 5px;
    height: 2.1rem;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand), var(--gold));
    flex-shrink: 0;
}

.section-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    color: var(--text);
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1.15;
}

.section-title-light {
    color: #fff;
}

.section-subtitle {
    font-size: .79rem;
    color: var(--muted);
    margin: .15rem 0 0;
}

.section-subtitle-light {
    color: rgba(255, 255, 255, .5);
}

.btn-section-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .55rem 1.3rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.btn-section-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-section-cta-outline {
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, .2);
}

.btn-section-cta-outline:hover {
    background: rgba(255, 255, 255, .18);
}

/* ════════════════════════════════════════════
                                                               SEARCH BAR
                                                            ════════════════════════════════════════════ */
.home-search-wrap {
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.home-search-inner {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .32rem .32rem .32rem 1.1rem;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.home-search-inner:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.home-search-inner i {
    color: #fff;
    font-size: 1rem;
    margin-right: .5rem;
    flex-shrink: 0;
}

.home-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: .87rem;
    color: var(--text);
    min-width: 0;
}

.home-search-input::placeholder {
    color: var(--muted);
}

.home-search-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .58rem 1.2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    transition: background var(--transition);
}

.home-search-btn:hover {
    background: var(--brand-dark);
}

/* ════════════════════════════════════════════
                                                               CATEGORY FILTER
                                                            ════════════════════════════════════════════ */
.cat-filter-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: .5rem .1rem 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25rem;
}

.cat-filter-bar::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: none;
    background: none;
    cursor: pointer;
    flex: 0 0 72px;
    width: 72px;
    -webkit-tap-highlight-color: transparent;
}

.cat-btn:active {
    opacity: .75;
}

.cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F1F5;
    border: 1.5px solid rgba(0, 0, 0, .07);
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.cat-icon i {
    font-size: 21px;
    color: #6B7280;
    transition: color var(--transition);
}

.cat-btn.active .cat-icon {
    background: var(--brand);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 5px 16px var(--brand-glow);
}

.cat-btn.active .cat-icon i {
    color: #fff;
}

.cat-label {
    font-size: 10.5px;
    font-weight: 500;
    color: #6B7280;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    min-height: calc(10.5px * 1.25 * 2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    word-break: break-word;
    hyphens: auto;
    transition: color var(--transition);
}

.cat-btn.active .cat-label {
    color: var(--brand);
    font-weight: 700;
}

.cat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.cat-btn.active .cat-dot {
    opacity: 1;
}

/* ════════════════════════════════════════════
                                                               GRID EVENTS — animation
                                                            ════════════════════════════════════════════ */
.events-grid .col {
    animation: fadeSlideUp .4s ease both;
}

.events-grid .col:nth-child(1) {
    animation-delay: .04s;
}

.events-grid .col:nth-child(2) {
    animation-delay: .08s;
}

.events-grid .col:nth-child(3) {
    animation-delay: .12s;
}

.events-grid .col:nth-child(4) {
    animation-delay: .16s;
}

.events-grid .col:nth-child(5) {
    animation-delay: .20s;
}

.events-grid .col:nth-child(6) {
    animation-delay: .24s;
}

.events-grid .col:nth-child(7) {
    animation-delay: .28s;
}

.events-grid .col:nth-child(8) {
    animation-delay: .32s;
}

/* ════════════════════════════════════════════
                                                               SWIPER NAV (swipers de sections)
                                                            ════════════════════════════════════════════ */
.swiper-nav-bar {
    position: relative;
    height: 46px;
    margin-bottom: .5rem;
}

.swiper-nav-bar .swiper-button-next,
.swiper-nav-bar .swiper-button-prev {
    top: 0;
    bottom: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.home-section .swiper-button-next,
.home-section .swiper-button-prev,
.home-section-alt .swiper-button-next,
.home-section-alt .swiper-button-prev {
    color: var(--brand);
    background: var(--brand-soft);
    transition: background var(--transition);
}

.home-section .swiper-button-next:hover,
.home-section .swiper-button-prev:hover,
.home-section-alt .swiper-button-next:hover,
.home-section-alt .swiper-button-prev:hover {
    background: rgba(232, 58, 48, .18);
}

.home-section-dark .swiper-button-next,
.home-section-dark .swiper-button-prev {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.home-section-dark .swiper-button-next:hover,
.home-section-dark .swiper-button-prev:hover {
    background: rgba(255, 255, 255, .2);
}

.swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

.swiper-button-prev {
    right: 48px !important;
    left: auto !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: .8rem !important;
    font-weight: 800 !important;
}

/* ════════════════════════════════════════════
                                                               WEEKEND — empty state
                                                            ════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: .87rem;
}

.empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .4;
}

/* ════════════════════════════════════════════
                                                               FREE SECTION — accent vert
                                                            ════════════════════════════════════════════ */
.accent-green {
    background: linear-gradient(180deg, #10B981, #059669) !important;
}

/* ════════════════════════════════════════════
                                                               BACK TO TOP
                                                            ════════════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px var(--brand-glow);
    transition: background var(--transition), transform var(--transition);
}

#back-to-top:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
                                                               RESPONSIVE
                                                            ════════════════════════════════════════════ */
@media (max-width: 576px) {
    .section-title {
        font-size: 1.15rem;
    }

    .home-search-btn span {
        display: none;
    }

    .home-search-btn {
        padding: .58rem .9rem;
    }

    .btn-section-cta span {
        display: none;
    }
}

/* ════════════════════════════════════════════
                                                               HERO SWIPER
                                                            ════════════════════════════════════════════ */
.hero-swiper-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .2);
}

.mySwiper .swiper-slide {
    position: relative;
}

/* ── Static image slides ── */
.hero-static-slide {
    height: clamp(260px, 42vw, 520px);
    /* ou 100vh, ou clamp(...) */
}

.hero-static-slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* ── Dynamic event hero slides ── */
.hero-event-slide {
    position: relative;
    width: 100%;
    height: clamp(260px, 42vw, 520px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero-bg {
    display: none;
}

.hero-event-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.mySwiper .swiper-slide-active .hero-event-bg {
    transform: scale(1.06);
}

.hero-event-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .45) 45%,
            rgba(0, 0, 0, .12) 75%,
            transparent 100%);
}

.hero-event-top {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 5px 12px;
    border-radius: 100px;
    text-transform: uppercase;
}

.hero-badge-trend {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 3px 12px var(--brand-glow);
}

.hero-badge-cat {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hero-badge-free {
    background: rgba(16, 185, 129, .85);
    color: #fff;
}

.hero-event-body {
    position: relative;
    padding: 20px 20px 22px;
    width: 100%;
}

.hero-event-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 10px;
    letter-spacing: .02em;
}

.hero-event-title {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-size: clamp(1.25rem, 3.5vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-event-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
}

.hero-meta-row i {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
}

.hero-event-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 10px 22px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-hero-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--brand-glow);
}

.btn-hero-fav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}

.btn-hero-fav:hover,
.btn-hero-fav.active {
    background: rgba(232, 58, 48, .6);
}

.btn-hero-fav.active i::before {
    content: "\ee0f";
}

/* ri-heart-fill */

/* Swiper pagination */
.mySwiper .swiper-pagination {
    bottom: 14px;
}

.mySwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    width: 7px;
    height: 7px;
    transition: width .3s, background .3s;
}

.mySwiper .swiper-pagination-bullet-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}

/* ════════════════════════════════════════════
                                                               SECTIONS & HEADERS
                                                            ════════════════════════════════════════════ */
.home-section {
    padding: 3rem 0;
}

.home-section-alt {
    padding: 3rem 0;
    background: var(--surface-2);
}

.home-section-dark {
    padding: 3rem 0;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.home-section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 85% 50%, rgba(232, 58, 48, .11) 0%, transparent 70%);
    pointer-events: none;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.section-accent {
    width: 5px;
    height: 2.1rem;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand), var(--gold));
    flex-shrink: 0;
}

.home-section-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    color: var(--text);
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1.15;
}

.section-title-light {
    color: #fff;
}

.section-subtitle {
    font-size: .79rem;
    color: var(--muted);
    margin: .15rem 0 0;
}

.section-subtitle-light {
    color: rgba(255, 255, 255, .5);
}

.btn-section-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .55rem 1.3rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.btn-section-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-section-cta-outline {
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, .2);
}

.btn-section-cta-outline:hover {
    background: rgba(255, 255, 255, .18);
}

/* ════════════════════════════════════════════
                                                               SEARCH BAR
                                                            ════════════════════════════════════════════ */
.home-search-wrap {
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.home-search-inner {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .32rem .32rem .32rem 1.1rem;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.home-search-inner:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.home-search-inner i {
    color: #fff;
    font-size: 1rem;
    margin-right: .5rem;
    flex-shrink: 0;
}

.home-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: .87rem;
    color: var(--text);
    min-width: 0;
}

.home-search-input::placeholder {
    color: var(--muted);
}

.home-search-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .58rem 1.2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .79rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    transition: background var(--transition);
}

.home-search-btn:hover {
    background: var(--brand-dark);
}

/* ════════════════════════════════════════════
                                                               CATEGORY FILTER
                                                            ════════════════════════════════════════════ */
.cat-filter-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: .5rem .1rem 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25rem;
}

.cat-filter-bar::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: none;
    background: none;
    cursor: pointer;
    flex: 0 0 72px;
    width: 72px;
    -webkit-tap-highlight-color: transparent;
}

.cat-btn:active {
    opacity: .75;
}

.cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F1F5;
    border: 1.5px solid rgba(0, 0, 0, .07);
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.cat-icon i {
    font-size: 21px;
    color: #6B7280;
    transition: color var(--transition);
}

.cat-btn.active .cat-icon {
    background: var(--brand);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 5px 16px var(--brand-glow);
}

.cat-btn.active .cat-icon i {
    color: #fff;
}

.cat-label {
    font-size: 10.5px;
    font-weight: 500;
    color: #6B7280;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    min-height: calc(10.5px * 1.25 * 2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    word-break: break-word;
    hyphens: auto;
    transition: color var(--transition);
}

.cat-btn.active .cat-label {
    color: var(--brand);
    font-weight: 700;
}

.cat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.cat-btn.active .cat-dot {
    opacity: 1;
}

/* ════════════════════════════════════════════
                                                               GRID EVENTS — animation
                                                            ════════════════════════════════════════════ */
.events-grid .col {
    animation: fadeSlideUp .4s ease both;
}

.events-grid .col:nth-child(1) {
    animation-delay: .04s;
}

.events-grid .col:nth-child(2) {
    animation-delay: .08s;
}

.events-grid .col:nth-child(3) {
    animation-delay: .12s;
}

.events-grid .col:nth-child(4) {
    animation-delay: .16s;
}

.events-grid .col:nth-child(5) {
    animation-delay: .20s;
}

.events-grid .col:nth-child(6) {
    animation-delay: .24s;
}

.events-grid .col:nth-child(7) {
    animation-delay: .28s;
}

.events-grid .col:nth-child(8) {
    animation-delay: .32s;
}

/* ════════════════════════════════════════════
                                                               SWIPER NAV (swipers de sections)
                                                            ════════════════════════════════════════════ */
.swiper-nav-bar {
    position: relative;
    height: 46px;
    margin-bottom: .5rem;
}

.swiper-nav-bar .swiper-button-next,
.swiper-nav-bar .swiper-button-prev {
    top: 0;
    bottom: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.home-section .swiper-button-next,
.home-section .swiper-button-prev,
.home-section-alt .swiper-button-next,
.home-section-alt .swiper-button-prev {
    color: var(--brand);
    background: var(--brand-soft);
    transition: background var(--transition);
}

.home-section .swiper-button-next:hover,
.home-section .swiper-button-prev:hover,
.home-section-alt .swiper-button-next:hover,
.home-section-alt .swiper-button-prev:hover {
    background: rgba(232, 58, 48, .18);
}

.home-section-dark .swiper-button-next,
.home-section-dark .swiper-button-prev {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.home-section-dark .swiper-button-next:hover,
.home-section-dark .swiper-button-prev:hover {
    background: rgba(255, 255, 255, .2);
}

.swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

.swiper-button-prev {
    right: 48px !important;
    left: auto !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: .8rem !important;
    font-weight: 800 !important;
}

/* ════════════════════════════════════════════
                                                               WEEKEND — empty state
                                                            ════════════════════════════════════════════ */
.empty-inline {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: .87rem;
}

.empty-inline i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .4;
}

/* ════════════════════════════════════════════
                                                               FREE SECTION — accent vert
                                                            ════════════════════════════════════════════ */
.accent-green {
    background: linear-gradient(180deg, #10B981, #059669) !important;
}

/* ════════════════════════════════════════════
                                                               BACK TO TOP
                                                            ════════════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px var(--brand-glow);
    transition: background var(--transition), transform var(--transition);
}

#back-to-top:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
                                                               RESPONSIVE
                                                            ════════════════════════════════════════════ */
@media (max-width: 576px) {
    .home-section-title {
        font-size: 1.15rem;
    }

    .home-search-btn span {
        display: none;
    }

    .home-search-btn {
        padding: .58rem .9rem;
    }

    .btn-section-cta span {
        display: none;
    }
}

/* ══ 18.25 organizer/index ══════════════════════════════════════════ */
* {
    box-sizing: border-box;
}

/* ─── section helpers ─── */
.org-section {
    padding: 5rem 0;
}

.org-section-sm {
    padding: 3.5rem 0;
}

.org-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .5rem;
}

.org-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: .75rem;
}

.org-heading-white {
    color: #fff;
}

.org-subheading {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 520px;
}

.org-subheading-white {
    color: rgba(255, 255, 255, .7);
}

/* Buttons */
.org-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 1.75rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.org-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--brand-glow);
    background: var(--brand-dark);
    color: #fff;
}

.org-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    color: var(--brand);
    border: 2px solid var(--brand);
    border-radius: 100px;
    padding: .73rem 1.6rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.org-btn-outline:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.org-btn-success {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .75rem 1.75rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}

.org-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 201, 167, .3);
    color: #fff;
}

/* ═══════════════════════════════════════════
                                               HERO
                                            ═══════════════════════════════════════════ */
.org-hero {
    background: var(--text);
    padding: 5.5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

/* Decorative blobs */
.org-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 92, .18) 0%, transparent 70%);
    pointer-events: none;
}

.org-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: 10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 201, 167, .12) 0%, transparent 70%);
    pointer-events: none;
}

.org-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 100px;
    padding: .28rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.org-hero-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.org-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--brand), #ff8fa0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.org-hero-sub {
    font-size: .95rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
}

.org-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Hero visual */
.org-hero-visual {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    padding: 1.75rem;
    position: relative;
}

.org-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-top: 1.25rem;
}

.org-stat-item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    text-align: center;
}

.org-stat-num {
    font-family: 'Montserrat', 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: -.02em;
}

.org-stat-lbl {
    font-size: .7rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .1rem;
}

/* Steps (process) */
.org-steps {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: 1.25rem;
}

.org-step {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
}

.org-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    flex-shrink: 0;
}

.org-step-text {
    font-size: .82rem;
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
}

/* ═══════════════════════════════════════════
                                               SERVICES
                                            ═══════════════════════════════════════════ */
.org-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
    margin-top: 3rem;
}

.org-service-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.org-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(255, 59, 92, .15);
}

.org-service-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.org-service-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    color: var(--text);
    margin-bottom: .35rem;
}

.org-service-desc {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════
                                               PRICING
                                            ═══════════════════════════════════════════ */
.org-pricing-bg {
    background: var(--surface-2);
    border-radius: 28px;
    padding: 3.5rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.org-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.org-plan-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    position: relative;
}

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

.org-plan-card.featured {
    background: var(--text);
    border-color: transparent;
}

.org-plan-card.unavailable {
    opacity: .6;
    filter: grayscale(.3);
}

.org-plan-badge {
    position: absolute;
    top: -.65rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    border-radius: 100px;
    padding: .18rem .9rem;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px var(--brand-glow);
}

.org-plan-unavailable {
    position: absolute;
    top: -.65rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--muted);
    color: #fff;
    border-radius: 100px;
    padding: .18rem .9rem;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.org-plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.org-plan-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.org-plan-card.featured .org-plan-name {
    color: rgba(255, 255, 255, .6);
}

.org-plan-card:not(.featured) .org-plan-name {
    color: var(--muted);
}

.org-plan-price {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: .2rem;
}

.org-plan-card.featured .org-plan-price {
    color: #fff;
}

.org-plan-card:not(.featured) .org-plan-price {
    color: var(--text);
}

.org-plan-price-sub {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted);
}

.org-plan-card.featured .org-plan-price-sub {
    color: rgba(255, 255, 255, .45);
}

.org-plan-desc {
    font-size: .78rem;
    margin: .75rem 0 1.25rem;
    line-height: 1.55;
}

.org-plan-card.featured .org-plan-desc {
    color: rgba(255, 255, 255, .55);
}

.org-plan-card:not(.featured) .org-plan-desc {
    color: var(--muted);
}

.org-plan-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 1.25rem;
}

.org-plan-card.featured .org-plan-divider {
    border-color: rgba(255, 255, 255, .1);
}

.org-plan-features {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.org-plan-feat {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8rem;
    line-height: 1.45;
}

.org-plan-card.featured .org-plan-feat {
    color: rgba(255, 255, 255, .75);
}

.org-plan-card:not(.featured) .org-plan-feat {
    color: var(--muted);
}

.org-feat-icon {
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.org-feat-icon.yes {
    color: var(--success);
}

.org-feat-icon.no {
    color: rgba(0, 0, 0, .2);
}

.org-plan-card.featured .org-feat-icon.no {
    color: rgba(255, 255, 255, .2);
}

/* Comparison table */
.org-compare-table {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-top: 2.5rem;
}

.org-compare-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    background: var(--text);
    padding: 1.1rem 1.4rem;
    gap: .5rem;
}

.org-compare-head .ch-feat {
    color: rgba(255, 255, 255, .5);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.org-compare-head .ch-plan {
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.org-compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    padding: .7rem 1.4rem;
    gap: .5rem;
    border-top: 1px solid var(--border);
    align-items: center;
}

.org-compare-row:nth-child(even) {
    background: var(--surface-2);
}

.org-compare-row .cr-feat {
    font-size: .83rem;
    color: var(--text);
    font-weight: 500;
}

.org-compare-row .cr-val {
    text-align: center;
    font-size: .82rem;
    color: var(--muted);
}

.org-compare-row .cr-val i.yes {
    color: var(--success);
    font-size: 1.1rem;
}

.org-compare-row .cr-val i.no {
    color: rgba(0, 0, 0, .15);
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════
                                               IMPRESSION
                                            ═══════════════════════════════════════════ */
.org-print-card {
    background: linear-gradient(135deg, #0D0D12 0%, #1a1f2e 100%);
    border-radius: var(--radius);
    padding: 3rem 3.5rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.org-print-card::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 92, .15), transparent 65%);
}

.org-print-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(255, 59, 92, .1);
    border: 1px solid rgba(255, 59, 92, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--brand);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
                                               TESTIMONIALS
                                            ═══════════════════════════════════════════ */
.org-reviews-bg {
    background: var(--text);
    border-radius: 28px;
    padding: 4rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.org-reviews-bg::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 92, .12), transparent 65%);
}

.org-quote-mark {
    font-size: 4rem;
    line-height: 1;
    color: rgba(255, 59, 92, .3);
    font-family: Georgia, serif;
    margin-bottom: -.5rem;
}

.org-review-text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.75;
    font-style: italic;
    max-width: 680px;
    margin: 0 auto 1.75rem;
}

.org-reviewer-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
}

.org-reviewer-title {
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .15rem;
}

/* Swiper overrides */
.client-review-swiper .swiper-button-next,
.client-review-swiper .swiper-button-prev {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, .1) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 50% !important;
}

.client-review-swiper .swiper-button-next::after,
.client-review-swiper .swiper-button-prev::after {
    font-size: .7rem !important;
    color: #fff !important;
}

.client-review-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .3) !important;
    opacity: 1;
}

.client-review-swiper .swiper-pagination-bullet-active {
    background: var(--brand) !important;
}

/* ═══════════════════════════════════════════
                                               FAQ
                                            ═══════════════════════════════════════════ */
.org-faq-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.org-faq-card .accordion-item {
    border: none;
    border-bottom: 1px solid var(--border);
}

.org-faq-card .accordion-item:last-child {
    border-bottom: none;
}

.org-faq-card .accordion-button {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    padding: 1.1rem 1.4rem;
    box-shadow: none !important;
}

.org-faq-card .accordion-button:not(.collapsed) {
    color: var(--brand);
    background: var(--brand-soft);
}

.org-faq-card .accordion-button::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A8FA8'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.org-faq-card .accordion-body {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.7;
    padding: .9rem 1.4rem 1.1rem;
}

/* ═══════════════════════════════════════════
                                               CONTACT
                                            ═══════════════════════════════════════════ */
.org-contact-info {
    background: var(--text);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    height: 100%;
}

.org-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.org-contact-item:last-child {
    margin-bottom: 0;
}

.org-contact-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--brand);
    flex-shrink: 0;
}

.org-contact-lbl {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    margin-bottom: .15rem;
}

.org-contact-val {
    font-weight: 600;
    font-size: .88rem;
    color: #fff;
}

.org-contact-form {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-card);
}

.org-form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .4rem;
    display: block;
}

.org-form-control {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
    font-size: .85rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--surface-2);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.org-form-control::placeholder {
    color: var(--muted);
}

.org-form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    background: var(--surface);
}

textarea.org-form-control {
    resize: vertical;
    min-height: 110px;
}

@media(max-width: 767px) {
    .org-section {
        padding: 3.5rem 0;
    }

    .org-hero {
        padding: 3.5rem 0 3rem;
    }

    .org-pricing-bg {
        padding: 2rem 1.25rem;
    }

    .org-print-card {
        padding: 2rem;
    }

    .org-compare-table {
        display: none;
    }
}

/* ══ 18.26 participant/delivery-tracking ══════════════════════════════════════════ */
.tracking-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 2rem;
}

.tracking-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e9ecef;
    z-index: 0;
}

.tracking-steps .progress-line {
    position: absolute;
    top: 20px;
    left: 0;
    height: 3px;
    background: #0ab39c;
    z-index: 1;
    transition: width 0.4s ease;
}

.tracking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #adb5bd;
    border: 3px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-icon.active {
    background: #0ab39c;
    border-color: #0ab39c;
    color: #fff;
}

.step-icon.done {
    background: #0ab39c;
    border-color: #0ab39c;
    color: #fff;
}

.step-icon.refused {
    background: #f06548;
    border-color: #f06548;
    color: #fff;
}

.tracking-step-label {
    margin-top: 8px;
    font-size: 0.75rem;
    text-align: center;
    color: #adb5bd;
    font-weight: 500;
    max-width: 80px;
}

.step-label.active,
.step-label.done {
    color: #0ab39c;
    font-weight: 600;
}

.step-label.refused {
    color: #f06548;
    font-weight: 600;
}

@media (max-width: 576px) {
    .tracking-step-label {
        font-size: 0.65rem;
        max-width: 60px;
    }

    .step-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .tracking-steps::before {
        top: 16px;
    }

    .tracking-steps .progress-line {
        top: 16px;
    }
}

/* ══ 18.27 service-provider/index ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
                   PAGE HEADER
                ═══════════════════════════════════════════ */
.sp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.sp-page-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--text);
    letter-spacing: -.03em;
    margin: 0;
}

.sp-result-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .28rem .9rem;
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
}

.sp-result-count strong {
    color: var(--text);
    font-weight: 700;
}

/* ═══════════════════════════════════════════
                   LAYOUT : sidebar + grid
                ═══════════════════════════════════════════ */
.sp-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media(max-width: 991px) {
    .sp-layout {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
                   FILTER SIDEBAR
                ═══════════════════════════════════════════ */
.sp-sidebar {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.sp-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .9rem;
    border-bottom: 1px solid var(--border);
}

.sp-sidebar-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    color: var(--text);
    margin: 0;
}

.sp-clearall {
    font-size: .75rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition);
}

.sp-clearall:hover {
    opacity: .7;
}

/* Filter section */
.sp-filter-section {
    border-bottom: 1px solid var(--border);
}

.sp-filter-section:last-child {
    border-bottom: none;
}

.sp-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition);
}

.sp-filter-toggle:hover {
    background: var(--surface-2);
}

.sp-filter-toggle-left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sp-filter-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.sp-filter-count {
    background: var(--brand);
    color: #fff;
    border-radius: 100px;
    padding: .05rem .45rem;
    font-size: .65rem;
    font-weight: 700;
    display: none;
}

.sp-filter-count.visible {
    display: inline-block;
}

.sp-filter-toggle i.arrow {
    font-size: .9rem;
    color: var(--muted);
    transition: transform var(--transition);
}

.sp-filter-toggle.collapsed i.arrow {
    transform: rotate(-90deg);
}

/* Filter body */
.sp-filter-body {
    padding: 0 1.25rem 1rem;
}

/* Search inside filter */
.sp-filter-search-wrap {
    position: relative;
    margin-bottom: .75rem;
}

.sp-filter-search-wrap i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .85rem;
    pointer-events: none;
}

.sp-filter-search {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem .5rem 2rem;
    font-size: .8rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--surface-2);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}

.sp-filter-search:focus {
    border-color: var(--brand);
    background: var(--surface);
}

/* Checkbox items */
.sp-filter-items {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sp-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem 0;
}

.sp-filter-item label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--text);
    cursor: pointer;
    flex: 1;
}

.sp-filter-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.sp-filter-item-count {
    font-size: .7rem;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: .05rem .45rem;
    font-weight: 600;
}

/* Tags row */
.sp-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .2rem 1.25rem 1rem;
}

.sp-tag-check {
    display: none;
}

.sp-tag-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .22rem .7rem;
    font-size: .73rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition);
}

.sp-tag-check:checked+.sp-tag-label {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.sp-tag-label:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Show more */
.sp-show-more {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
    padding: .25rem 0;
    margin-top: .2rem;
    display: none;
    text-align: left;
    transition: opacity var(--transition);
}

.sp-show-more:hover {
    opacity: .7;
}

.sp-show-more.visible {
    display: block;
}

/* ═══════════════════════════════════════════
                   MAIN CONTENT
                ═══════════════════════════════════════════ */

/* Search bar */
.sp-searchbar {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .65rem .65rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: var(--shadow-card);
    margin-bottom: 1.1rem;
}

.sp-searchbar i {
    color: var(--muted);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sp-searchbar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .88rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: transparent;
}

.sp-searchbar input::placeholder {
    color: var(--muted);
}

/* Active filter chips */
.sp-active-chips {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.sp-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid rgba(255, 59, 92, .18);
    border-radius: 100px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
}

.sp-chip-remove {
    cursor: pointer;
    font-size: .82rem;
    margin-left: .1rem;
    opacity: .7;
    transition: opacity var(--transition);
}

.sp-chip-remove:hover {
    opacity: 1;
}

/* Grid */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Skeleton */
.sp-skeleton {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    height: 310px;
}

.sp-skel-cover {
    height: 110px;
    background: #E8EAF0;
    animation: sp-shimmer 1.4s infinite linear;
}

.sp-skel-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.sp-skel-line {
    height: 12px;
    border-radius: 6px;
    background: #E8EAF0;
    animation: sp-shimmer 1.4s infinite linear;
}

@keyframes sp-shimmer {

    0%,
    100% {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

/* Empty state */
.sp-empty {
    grid-column: 1/-1;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.sp-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--muted);
    margin: 0 auto 1rem;
}

.sp-empty-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: .35rem;
}

.sp-empty-sub {
    font-size: .83rem;
    color: var(--muted);
}

/* Pagination */
.sp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.sp-pg-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition);
}

.sp-pg-btn:hover:not(.disabled) {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.sp-pg-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

.sp-pg-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Mobile filter toggle */
.sp-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: .45rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .5rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 1rem;
    transition: border-color var(--transition), color var(--transition);
}

.sp-mobile-filter-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.sp-mobile-filter-btn i {
    font-size: .95rem;
}

@media(max-width: 991px) {
    .sp-mobile-filter-btn {
        display: inline-flex;
    }

    .sp-sidebar {
        position: static;
        display: none;
        margin-bottom: 1rem;
    }

    .sp-sidebar.open {
        display: block;
    }
}

/* ═══════════════════════════════════════════
                   SP CARD
                ═══════════════════════════════════════════ */
.sp-card {
    --sp-radius: 16px;
    --sp-brand: #FF3B5C;
    --sp-brand-soft: rgba(255, 59, 92, .08);
    --sp-brand-glow: rgba(255, 59, 92, .22);
    --sp-surface: #fff;
    --sp-border: rgba(0, 0, 0, .07);
    --sp-text: #0D0D12;
    --sp-muted: #8A8FA8;
    --sp-tr: .22s cubic-bezier(.4, 0, .2, 1);
    background: var(--sp-surface);
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .06);
    transition: transform var(--sp-tr), box-shadow var(--sp-tr), border-color var(--sp-tr);
    height: 100%;
}

.sp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .11);
    border-color: rgba(255, 59, 92, .18);
}

.sp-card-cover {
    position: relative;
    height: 110px;
    overflow: hidden;
    flex-shrink: 0;
}

.sp-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.sp-card:hover .sp-cover-img {
    transform: scale(1.05);
}

.sp-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, transparent 60%);
    pointer-events: none;
}

.sp-cover-cat {
    position: absolute;
    top: .6rem;
    left: .7rem;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    padding: .18rem .65rem;
    font-size: .67rem;
    font-weight: 700;
    color: var(--sp-text);
    letter-spacing: .02em;
    white-space: nowrap;
}

.sp-card-body {
    padding: 1rem 1.1rem .7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.sp-identity {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: -2.1rem;
    position: relative;
    z-index: 2;
}

.sp-avatar-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sp-surface);
}

.sp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-brand-soft);
    color: var(--sp-brand);
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .04em;
}

.sp-identity-info {
    flex: 1;
    min-width: 0;
    padding-top: 1.85rem;
}

.sp-name {
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--sp-text);
    letter-spacing: -.015em;
    margin: 0 0 .18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .73rem;
    color: var(--sp-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-location i {
    font-size: .8rem;
    color: var(--sp-brand);
    flex-shrink: 0;
}

.sp-desc {
    font-size: .8rem;
    color: var(--sp-muted);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.sp-tag {
    display: inline-block;
    background: var(--sp-brand-soft);
    color: var(--sp-brand);
    border: 1px solid rgba(255, 59, 92, .15);
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .68rem;
    font-weight: 700;
}

.sp-tag-more {
    background: rgba(0, 0, 0, .05);
    color: var(--sp-muted);
    border-color: transparent;
}

.sp-card-footer {
    padding: .65rem 1.1rem;
    border-top: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sp-fav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-muted);
    font-size: .95rem;
    cursor: pointer;
    transition: background var(--sp-tr), border-color var(--sp-tr), color var(--sp-tr), transform var(--sp-tr);
}

.sp-fav-btn:hover,
.sp-fav-btn.active {
    background: rgba(250, 204, 21, .1);
    border-color: rgba(250, 204, 21, .4);
    color: #EAB308;
    transform: scale(1.12);
}

.sp-fav-btn.active i {
    animation: sp-star-pop .25s cubic-bezier(.4, 0, .2, 1);
}

@keyframes sp-star-pop {
    0% {
        transform: scale(.7);
    }

    60% {
        transform: scale(1.25);
    }

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

.sp-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: 'Syne', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .75rem;
    color: var(--sp-brand);
    text-decoration: none;
    transition: gap var(--sp-tr);
}

.sp-cta:hover {
    gap: .5rem;
    color: var(--sp-brand);
}

.sp-cta i {
    font-size: .85rem;
}

/* ══ 18.28 service-provider/show ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
               LAYOUT
            ═══════════════════════════════════════════ */
.spd-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media(max-width: 991px) {
    .spd-layout {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
               PROFILE CARD (sidebar)
            ═══════════════════════════════════════════ */
.spd-profile-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 80px;
}

/* Cover banner */
.spd-cover {
    height: 110px;
    background: linear-gradient(135deg, #0D0D12 0%, #1e2035 100%);
    position: relative;
    overflow: hidden;
}

.spd-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 50%, rgba(255, 59, 92, .2), transparent 65%);
}

/* Avatar overlapping cover */
.spd-avatar-wrap {
    position: relative;
    margin: -36px auto 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    overflow: hidden;
    background: var(--surface);
    z-index: 2;
}

.spd-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spd-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
}

/* Profile body */
.spd-profile-body {
    padding: .75rem 1.4rem 1.4rem;
    text-align: center;
}

.spd-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: -.02em;
    margin: .6rem 0 .2rem;
}

.spd-category {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid rgba(255, 59, 92, .18);
    border-radius: 100px;
    padding: .2rem .75rem;
    font-size: .73rem;
    font-weight: 700;
    margin-bottom: .9rem;
}

.spd-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 1rem;
    text-decoration: none;
}

.spd-email i {
    color: var(--brand);
    font-size: .9rem;
}

.spd-email:hover {
    color: var(--brand);
}

/* Info list */
.spd-info-list {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-align: left;
    margin-bottom: 1rem;
}

.spd-info-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
}

.spd-info-row:last-child {
    border-bottom: none;
}

.spd-info-row i {
    font-size: .95rem;
    color: var(--brand);
    flex-shrink: 0;
    margin-top: .05rem;
}

.spd-info-label {
    color: var(--muted);
    font-size: .72rem;
    margin-bottom: .05rem;
    font-weight: 600;
}

.spd-info-val {
    color: var(--text);
    font-weight: 500;
}

/* Socials */
.spd-socials {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.spd-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.spd-social-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand);
    transform: scale(1.08);
}

/* CTA button */
.spd-contact-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .7rem 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    margin-top: 1rem;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.spd-contact-cta:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--brand-glow);
}

/* ═══════════════════════════════════════════
               MAIN CONTENT
            ═══════════════════════════════════════════ */
.spd-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Tab card */
.spd-tab-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

/* Tab nav */
.spd-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 1.25rem;
}

.spd-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .9rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
    margin-bottom: -1px;
}

.spd-tab-btn:hover {
    color: var(--text);
}

.spd-tab-btn.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: 700;
}

.spd-tab-btn i {
    font-size: .9rem;
}

/* Tab panes */
.spd-tab-pane {
    display: none;
    padding: 1.5rem 1.6rem;
}

.spd-tab-pane.active {
    display: block;
}

/* Description */
.spd-description {
    font-size: .92rem;
    line-height: 1.8;
    color: #3A3D50;
}

.spd-description h1,
.spd-description h2,
.spd-description h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
}

/* Tags */
.spd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.25rem;
}

.spd-tag {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid rgba(255, 59, 92, .15);
    border-radius: 100px;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
}

/* Tags section label */
.spd-tags-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.25rem 0 .6rem;
}

/* ── Gallery ── */
.spd-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}

.spd-gallery-item {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
}

.spd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.spd-gallery-item:hover img {
    transform: scale(1.06);
}

.spd-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.spd-gallery-item:hover .spd-gallery-overlay {
    background: rgba(0, 0, 0, .35);
}

.spd-gallery-overlay i {
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--transition), transform var(--transition);
}

.spd-gallery-item:hover .spd-gallery-overlay i {
    opacity: 1;
    transform: scale(1);
}

/* Empty gallery */
.spd-media-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

.spd-media-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .5rem;
}

/* Video section */
.spd-video-wrap {
    margin-top: 1.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
}

.spd-video-wrap #player {
    width: 100%;
    height: 100%;
}

/* ── Section divider in tabs ── */
.spd-section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}

.spd-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
}

@media(max-width: 640px) {
    .spd-tab-pane {
        padding: 1.1rem;
    }

    .spd-gallery {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* ══ 18.29 auth/login (unique) ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
           TOKENS
        ═══════════════════════════════════════════ */


*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════
           LAYOUT SPLIT
        ═══════════════════════════════════════════ */


/* ── Panneau gauche (immersif) ── */


/* Image de fond avec overlay */




/* Particules bokeh */
























/* Contenu gauche */














/* Stats cards */
.auth-stats {
    display: flex;
    gap: .75rem;
    margin-top: 2rem;
}

.auth-stat {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: .85rem 1.1rem;
    flex: 1;
    transition: background var(--t);
}

.auth-stat:hover {
    background: rgba(255, 255, 255, .1);
}

.auth-stat-val {
    font-family: 'Clash Display', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
}

.auth-stat-val span {
    color: var(--red);
}

.auth-stat-label {
    font-size: .68rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .3rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Panneau droit (formulaire) ── */


/* Motif décoratif coin */






/* Retour accueil */






/* Entête formulaire */










/* Champs */






















/* Toggle mot de passe */




/* Ligne remember + forgot */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.auth-check-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.auth-check-input {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    accent-color: var(--red);
    cursor: pointer;
}

.auth-check-label {
    font-size: .83rem;
    color: var(--muted);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.auth-forgot {
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--t);
}

.auth-forgot:hover {
    color: var(--red);
}

/* Bouton submit */








/* Ripple */


/* Séparateur */
.auth-sep {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.6rem 0;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-sep::before,
.auth-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Boutons sociaux */
.auth-socials {
    display: flex;
    gap: .6rem;
}

.btn-social {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem .5rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--t), background var(--t), transform var(--t);
}

.btn-social:hover {
    border-color: rgba(0, 0, 0, .16);
    background: #fff;
    transform: translateY(-1px);
    color: var(--text);
}

.btn-social i {
    font-size: 1.05rem;
}

.btn-social .g-color {
    color: #EA4335;
}

.btn-social .f-color {
    color: #1877F2;
}

/* Lien inscription */
.auth-register {
    text-align: center;
    margin-top: 1.75rem;
    font-size: .85rem;
    color: var(--muted);
}

.auth-register a {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--t);
}

.auth-register a:hover {
    color: var(--red-dark);
    text-decoration: underline;
}


/* ══ 18.30 auth/passwords/confirm (split dark layout) ══════════════════════════════════════════════════ */

body:has(.split) {
    --ink: #07070D;
    --ink2: #0a1a14;
    background: #07070D;
    font-family: 'Bricolage Grotesque', sans-serif;
    min-height: 100vh;
    display: flex;
}

body:has(.hsteps) {
    --acc: #10B981;
    --acc-d: #059669;
    --acc-s: rgba(16, 185, 129, .1);
    --acc-g: rgba(16, 185, 129, .28);
}

body:has(.steps) {
    --acc: #3B82F6;
    --acc-d: #2563EB;
    --acc-s: rgba(59, 130, 246, .1);
    --acc-g: rgba(59, 130, 246, .28);
}

.split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.s-left {
    flex: 0 0 46%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    background: #0a1a14;
}

.s-left-bg {
    position: absolute;
    inset: 0;
    opacity: .18;
    transform: scale(1.06);
    animation: zBg 22s ease-in-out infinite alternate;
}

@keyframes zBg {
    to {
        transform: scale(1.14);
    }
}

.s-left-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, .18) 0%, transparent 55%), linear-gradient(180deg, rgba(7, 7, 13, .6) 0%, rgba(7, 7, 13, .12) 40%, rgba(7, 7, 13, .92) 100%);
}

body:has(.hsteps) .bok:nth-child(1) {
    width: 7px;
    height: 7px;
    background: rgba(16, 185, 129, .9);
    left: 20%;
    top: 38%;
    animation: bkf 7s .2s linear infinite;
}

body:has(.hsteps) .bok:nth-child(2) {
    width: 4px;
    height: 4px;
    background: rgba(245, 166, 35, .8);
    left: 70%;
    top: 55%;
    animation: bkf 9s 1.3s linear infinite;
}

body:has(.hsteps) .bok:nth-child(3) {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, .55);
    left: 48%;
    top: 68%;
    animation: bkf 11s 2s linear infinite;
    filter: blur(2px);
}

body:has(.hsteps) .bok:nth-child(4) {
    width: 3px;
    height: 3px;
    background: rgba(16, 185, 129, .7);
    left: 84%;
    top: 26%;
    animation: bkf 6s .6s linear infinite;
}

body:has(.hsteps) .bok:nth-child(5) {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .5);
    left: 32%;
    top: 82%;
    animation: bkf 8s 3s linear infinite;
}

body:has(.hsteps) .bok:nth-child(6) {
    width: 11px;
    height: 11px;
    background: rgba(16, 185, 129, .35);
    left: 59%;
    top: 16%;
    animation: bkf 13s 1.7s linear infinite;
    filter: blur(3px);
}

body:has(.hsteps) .bok:nth-child(7) {
    width: 4px;
    height: 4px;
    background: rgba(245, 166, 35, .65);
    left: 12%;
    top: 62%;
    animation: bkf 7.5s 4s linear infinite;
}

body:has(.hsteps) .bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(16, 185, 129, .55);
    left: 91%;
    top: 74%;
    animation: bkf 10s 2.6s linear infinite;
}

@keyframes bkf {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: .7;
    }

    100% {
        transform: translateY(-88px) scale(1.38);
        opacity: 0;
    }
}

.lc {
    position: relative;
    z-index: 2;
}

.logo img {
    height: 44px;
    filter: brightness(0) invert(1);
}

.tagline {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.04em;
    margin-bottom: .9rem;
}

.tagline em {
    font-style: normal;
    color: var(--acc);
    position: relative;
}

.tagline em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--acc), #F5A623);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: lu .8s .5s ease forwards;
}

@keyframes lu {
    to {
        transform: scaleX(1);
    }
}

.sub {
    font-size: .9rem;
    color: rgba(255, 255, 255, .5);
    line-height: 1.65;
    max-width: 330px;
    font-weight: 300;
    margin-bottom: 2rem;
}

.checks {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.chk {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    font-weight: 500;
}

.chk-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .88rem;
    background: var(--acc-s);
    border: 1px solid rgba(0, 0, 0, .05);
    color: var(--acc);
}

.pnote {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: var(--acc-s);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
}

.pnote i {
    color: var(--acc);
    font-size: 1rem;
    flex-shrink: 0;
}

.pnote p {
    font-size: .74rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.45;
    margin: 0;
}

.pnote p strong {
    color: rgba(255, 255, 255, .82);
}

.s-right {
    flex: 1;
    background: #F9F9FC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 3rem 3.5rem;
    overflow: hidden;
}

.s-right::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, .07) 0%, transparent 70%);
    pointer-events: none;
}

.s-right::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, .06) 0%, transparent 70%);
    pointer-events: none;
}

.ri {
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: fR .55s ease both;
}

@keyframes fR {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

.env-anim {
    width: 90px;
    height: 90px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(16, 185, 129, .05));
    border: 1.5px solid rgba(16, 185, 129, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    position: relative;
    animation: envPulse 2.5s ease-in-out infinite;
}

@keyframes envPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .28);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
    }
}

.env-anim i {
    font-size: 2.4rem;
    color: var(--acc);
}

.env-anim .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--acc);
    border: 2.5px solid #F9F9FC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: #fff;
}

.hsteps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 1.75rem;
}

.hs-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    position: relative;
}

.hs-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    right: -50%;
    height: 1.5px;
    background: var(--border);
}

.hs-item.done::after {
    background: var(--acc);
}

.hs-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hs-item.done .hs-dot {
    background: var(--acc);
    border-color: var(--acc);
    color: #fff;
}

.hs-item.active .hs-dot {
    background: #fff;
    border-color: var(--acc);
    color: var(--acc);
    box-shadow: 0 0 0 4px var(--acc-s);
}

.hs-label {
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
}

.hs-item.done .hs-label,
.hs-item.active .hs-label {
    color: var(--acc);
}

.email-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.email-card i {
    font-size: 1.2rem;
    color: var(--acc);
    flex-shrink: 0;
}

.email-card-text {
    font-size: .84rem;
    color: var(--muted);
}

.email-card-text strong {
    color: var(--text);
    display: block;
    font-size: .9rem;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.btn-main {
    width: 100%;
    background: var(--acc);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .88rem 1.5rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
    pointer-events: none;
}

.btn-main:hover {
    background: var(--acc-d);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--acc-g);
    color: #fff;
}

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

.btn-main .rip {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transform: scale(0);
    animation: ra .55s linear;
    pointer-events: none;
}

@keyframes ra {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ghost {
    width: 100%;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .82rem 1.5rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    transition: border-color var(--t), color var(--t);
}

.btn-ghost:hover {
    border-color: var(--text);
    color: var(--text);
}

.spam-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: rgba(245, 158, 11, .06);
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin-top: 1.1rem;
    font-size: .77rem;
    color: #78350F;
    line-height: 1.5;
}

.spam-note i {
    color: #F59E0B;
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.logo img {
    height: 44px;
    filter: brightness(0) invert(1);
}

.ey {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ey::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--acc);
    border-radius: 2px;
}

body:has(.hsteps) .ey::after {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--acc);
    border-radius: 2px;
}

.ft {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-bottom: .5rem;
    text-align: center;
}

.fs {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.75rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

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


@media (max-width: 900px) {
    .s-left {
        display: none;
    }

    .s-right {
        padding: 2.5rem 1.75rem;
        background: #fff;
    }

    .ri {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .s-right {
        padding: 2rem 1.25rem;
    }

    .hsteps {
        gap: .5rem;
    }
}


/* ══ 18.31 auth/passwords/email ══════════════════════════════════════════════════════════════════ */

/* Bokeh overrides: blue accent on email page */
body:has(.steps) .bok:nth-child(1) {
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, .9);
    left: 22%;
    top: 40%;
    animation: bkf 7s .3s linear infinite;
}

body:has(.steps) .bok:nth-child(2) {
    width: 4px;
    height: 4px;
    background: rgba(255, 59, 92, .8);
    left: 68%;
    top: 55%;
    animation: bkf 9s 1.4s linear infinite;
}

body:has(.steps) .bok:nth-child(3) {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .55);
    left: 46%;
    top: 70%;
    animation: bkf 11s 2s linear infinite;
    filter: blur(2px);
}

body:has(.steps) .bok:nth-child(4) {
    width: 3px;
    height: 3px;
    background: rgba(59, 130, 246, .7);
    left: 83%;
    top: 27%;
    animation: bkf 6s .7s linear infinite;
}

body:has(.steps) .bok:nth-child(5) {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .5);
    left: 33%;
    top: 82%;
    animation: bkf 8s 3s linear infinite;
}

body:has(.steps) .bok:nth-child(6) {
    width: 10px;
    height: 10px;
    background: rgba(245, 166, 35, .4);
    left: 61%;
    top: 15%;
    animation: bkf 13s 1.8s linear infinite;
    filter: blur(3px);
}

body:has(.steps) .bok:nth-child(7) {
    width: 4px;
    height: 4px;
    background: rgba(59, 130, 246, .65);
    left: 11%;
    top: 63%;
    animation: bkf 7.5s 4s linear infinite;
}

body:has(.steps) .bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(255, 59, 92, .5);
    left: 90%;
    top: 74%;
    animation: bkf 10s 2.7s linear infinite;
}

/* Vertical steps on left panel */
.steps {
    display: flex;
    flex-direction: column;
}

.step {
    display: flex;
    gap: .85rem;
}

.sdot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .55);
}

.sdot.cur {
    background: var(--acc);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 5px var(--acc-s);
}

.sline {
    width: 1.5px;
    flex: 1;
    min-height: 22px;
    background: rgba(255, 255, 255, .08);
    margin: .26rem 0;
}

.step:last-child .sline {
    display: none;
}

.sbody {
    padding-bottom: 1.15rem;
}

.stit {
    font-size: .83rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .16rem;
}

.sdesc {
    font-size: .73rem;
    color: rgba(255, 255, 255, .38);
    line-height: 1.5;
}

/* Right panel specific */
.back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color var(--t);
}

.back:hover {
    color: var(--red);
}

.ico {
    width: 70px;
    height: 70px;
    border-radius: 21px;
    background: linear-gradient(135deg, var(--acc-s), rgba(0, 0, 0, .02));
    border: 1.5px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.95rem;
    color: var(--acc);
    margin-bottom: 1.4rem;
    position: relative;
}

.ico::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 27px;
    background: var(--acc-s);
    z-index: -1;
}

.ok-box {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .2);
    border-left: 3px solid #10B981;
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: 1.2rem;
    font-size: .8rem;
    color: #065F46;
    line-height: 1.5;
}

.ok-box i {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--acc-s);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.4rem;
    font-size: .79rem;
    line-height: 1.5;
}

.hint i {
    color: var(--acc);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

/* Form */
.ff {
    margin-bottom: 1.2rem;
}

.fl {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .45rem;
}

.fw {
    position: relative;
}

.fi-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .95rem;
    pointer-events: none;
    transition: color var(--t);
}

.fi {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .8rem 1rem .8rem 2.65rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: .88rem;
    color: var(--text);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.fi::placeholder {
    color: #C0C0D0;
}

.fi:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 4px var(--acc-s);
}

.fw:focus-within .fi-icon {
    color: var(--acc);
}

.fi.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
}

.ferr {
    font-size: .73rem;
    color: #ef4444;
    margin-top: .38rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.btn-m {
    width: 100%;
    background: var(--acc);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .9rem 1.5rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
    overflow: hidden;
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-m::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
    pointer-events: none;
}

.btn-m:hover {
    background: var(--acc-d);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--acc-g);
}

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

.btn-m .rip {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    transform: scale(0);
    animation: ra .55s linear;
    pointer-events: none;
}

.bot {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .84rem;
    color: var(--muted);
}

.bot a {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
}

.bot a:hover {
    text-decoration: underline;
}

/* ══ 18.32 auth/passwords/reset-password-on-first-login (purple) ═══════════════════════════════ */

body:has(.welcome-pill) {
    --acc: #8B5CF6;
    --acc-d: #7C3AED;
    --acc-s: rgba(139, 92, 246, .1);
    --acc-g: rgba(139, 92, 246, .28);
    --green: #10B981;
}

/* Purple bokeh */
body:has(.welcome-pill) .bok:nth-child(1) {
    width: 7px;
    height: 7px;
    background: rgba(139, 92, 246, .9);
    left: 20%;
    top: 38%;
    animation: bkf 7s .2s linear infinite;
}

body:has(.welcome-pill) .bok:nth-child(2) {
    width: 4px;
    height: 4px;
    background: rgba(245, 166, 35, .8);
    left: 70%;
    top: 55%;
    animation: bkf 9s 1.3s linear infinite;
}

body:has(.welcome-pill) .bok:nth-child(3) {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, .5);
    left: 48%;
    top: 68%;
    animation: bkf 11s 2s linear infinite;
    filter: blur(2px);
}

body:has(.welcome-pill) .bok:nth-child(4) {
    width: 3px;
    height: 3px;
    background: rgba(139, 92, 246, .7);
    left: 84%;
    top: 26%;
    animation: bkf 6s .6s linear infinite;
}

body:has(.welcome-pill) .bok:nth-child(5) {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .45);
    left: 32%;
    top: 82%;
    animation: bkf 8s 3s linear infinite;
}

body:has(.welcome-pill) .bok:nth-child(6) {
    width: 11px;
    height: 11px;
    background: rgba(245, 166, 35, .4);
    left: 59%;
    top: 16%;
    animation: bkf 13s 1.7s linear infinite;
    filter: blur(3px);
}

body:has(.welcome-pill) .bok:nth-child(7) {
    width: 4px;
    height: 4px;
    background: rgba(255, 59, 92, .55);
    left: 12%;
    top: 62%;
    animation: bkf 7.5s 4s linear infinite;
}

body:has(.welcome-pill) .bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(139, 92, 246, .55);
    left: 91%;
    top: 74%;
    animation: bkf 10s 2.6s linear infinite;
}

/* tagline em = gold on this page (not --acc) */
body:has(.welcome-pill) .tagline em {
    color: var(--gold);
}

body:has(.welcome-pill) .tagline em::after {
    background: linear-gradient(90deg, var(--gold), var(--acc));
}

/* btn-main = flex:1 here (in a row), not full-width */
body:has(.welcome-pill) .btn-main {
    flex: 1;
    width: auto;
}

.welcome-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--acc-s);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 100px;
    padding: .32rem .85rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--acc);
    margin-bottom: 1.1rem;
}

.perks {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.perk {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    font-weight: 500;
}

.perk-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .88rem;
}

.perk-ico.v {
    background: rgba(139, 92, 246, .15);
    border: 1px solid rgba(139, 92, 246, .25);
    color: var(--acc);
}

.perk-ico.g {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .22);
    color: #10B981;
}

.perk-ico.o {
    background: rgba(245, 166, 35, .12);
    border: 1px solid rgba(245, 166, 35, .22);
    color: var(--gold);
}

/* Password toggle button */
.eye {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    padding: .2rem;
    border-radius: 6px;
    transition: color var(--t);
    line-height: 1;
}

.eye:hover {
    color: var(--text);
}

/* Password strength dot indicator */
.pdot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    border: 1.5px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .58rem;
    color: transparent;
    transition: background var(--t), border-color var(--t), color var(--t);
}

.pwd-rule.valid .pdot {
    background: rgba(16, 185, 129, .15);
    border-color: #10B981;
    color: #10B981;
}

/* Strength bar */
.sbar {
    display: flex;
    gap: 3px;
    margin-top: .55rem;
}

.sb {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .07);
    transition: background .3s;
}

/* Button row */
.btn-row {
    display: flex;
    gap: .7rem;
}

.btn-skip {
    flex: 0 0 auto;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: .82rem 1.1rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: border-color var(--t), color var(--t);
}

.btn-skip:hover {
    border-color: var(--red);
    color: var(--red);
}

.skip-note {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    margin-top: .85rem;
    line-height: 1.55;
}

/* ══ 18.33 auth/passwords/reset (green accent on auth-split layout) ═══════════════════════════ */

/* Green accent overrides */
body:has(.auth-security) .auth-left-bg {
    background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200&q=80&auto=format&fit=crop');
    opacity: .18;
}

body:has(.auth-security) .auth-left-gradient {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, .14) 0%, transparent 55%),
        linear-gradient(180deg, rgba(7, 7, 13, .58) 0%, rgba(7, 7, 13, .18) 38%, rgba(7, 7, 13, .9) 100%);
}

body:has(.auth-security) .bok:nth-child(1) {
    background: rgba(16, 185, 129, .9);
}

body:has(.auth-security) .bok:nth-child(2) {
    background: rgba(255, 59, 92, .8);
}

body:has(.auth-security) .bok:nth-child(3) {
    background: rgba(255, 255, 255, .6);
}

body:has(.auth-security) .bok:nth-child(4) {
    background: rgba(16, 185, 129, .65);
}

body:has(.auth-security) .bok:nth-child(5) {
    background: rgba(255, 255, 255, .55);
}

body:has(.auth-security) .bok:nth-child(6) {
    background: rgba(245, 166, 35, .45);
}

body:has(.auth-security) .bok:nth-child(7) {
    background: rgba(255, 59, 92, .65);
}

body:has(.auth-security) .bok:nth-child(8) {
    background: rgba(16, 185, 129, .55);
}

body:has(.auth-security) .auth-left-tagline em {
    color: var(--green);
}

body:has(.auth-security) .auth-left-tagline em::after {
    background: linear-gradient(90deg, var(--green), var(--gold));
}

body:has(.auth-security) .auth-welcome {
    color: var(--green);
}

body:has(.auth-security) .auth-welcome::before {
    background: var(--green);
}

body:has(.auth-security) .auth-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
    background: #fff;
}

body:has(.auth-security) .auth-input-wrap:focus-within .auth-input-icon {
    color: var(--green);
}

body:has(.auth-security) .btn-auth {
    background: var(--green);
}

body:has(.auth-security) .btn-auth:hover {
    background: #059669;
    box-shadow: 0 10px 28px rgba(16, 185, 129, .38);
}

/* Steps on left panel */
.auth-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-step {
    display: flex;
    gap: 1rem;
    position: relative;
}

.auth-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.auth-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Clash Display', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    flex-shrink: 0;
    transition: background var(--t), border-color var(--t);
}

.auth-step.active .auth-step-num {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, .18);
}

.auth-step-line {
    width: 1.5px;
    flex: 1;
    min-height: 28px;
    background: rgba(255, 255, 255, .1);
    margin: .3rem 0;
}

.auth-step:last-child .auth-step-line {
    display: none;
}

.auth-step-body {
    padding-bottom: 1.4rem;
}

.auth-step-title {
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .2rem;
    line-height: 1.3;
}

.auth-step.active .auth-step-title {
    color: #fff;
}

.auth-step-desc {
    font-size: .75rem;
    color: rgba(255, 255, 255, .42);
    line-height: 1.5;
}

.auth-step.active .auth-step-desc {
    color: rgba(255, 255, 255, .6);
}

/* Security note at bottom of left panel */
.auth-security {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 12px;
    margin-top: auto;
}

.auth-security i {
    color: var(--green);
    font-size: 1rem;
    flex-shrink: 0;
}

.auth-security-text {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.45;
}

.auth-security-text strong {
    color: rgba(255, 255, 255, .88);
}

/* Icon wrap on right panel */
.auth-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(16, 185, 129, .06));
    border: 1.5px solid rgba(16, 185, 129, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: var(--green);
    margin-bottom: 1.4rem;
    position: relative;
}

.auth-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 26px;
    background: rgba(16, 185, 129, .06);
    z-index: -1;
}


@media (max-width: 480px) {
    body:has(.welcome-pill) .btn-row {
        flex-direction: column-reverse;
    }
}



/* ═══════════════════════════════════════════

/* ══ 18.34 auth/verify (cyan accent — email verification) ══════════════════════════════════════ */

body:has(.vmail) {
    --acc: #06B6D4;
    --acc-d: #0891B2;
    --acc-s: rgba(6, 182, 212, .1);
    --acc-g: rgba(6, 182, 212, .28);
}

/* Cyan bokeh */
body:has(.vmail) .bok:nth-child(1) {
    width: 8px;
    height: 8px;
    background: rgba(6, 182, 212, .9);
    left: 15%;
    top: 35%;
    animation: bkf 8s .3s linear infinite;
}

body:has(.vmail) .bok:nth-child(2) {
    width: 5px;
    height: 5px;
    background: rgba(245, 166, 35, .75);
    left: 72%;
    top: 52%;
    animation: bkf 10s 1.4s linear infinite;
}

body:has(.vmail) .bok:nth-child(3) {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .45);
    left: 46%;
    top: 70%;
    animation: bkf 12s 2.1s linear infinite;
    filter: blur(2px);
}

body:has(.vmail) .bok:nth-child(4) {
    width: 4px;
    height: 4px;
    background: rgba(6, 182, 212, .65);
    left: 82%;
    top: 24%;
    animation: bkf 7s .8s linear infinite;
}

body:has(.vmail) .bok:nth-child(5) {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, .4);
    left: 30%;
    top: 80%;
    animation: bkf 9s 3.2s linear infinite;
}

body:has(.vmail) .bok:nth-child(6) {
    width: 12px;
    height: 12px;
    background: rgba(6, 182, 212, .35);
    left: 57%;
    top: 14%;
    animation: bkf 14s 1.8s linear infinite;
    filter: blur(3px);
}

body:has(.vmail) .bok:nth-child(7) {
    width: 5px;
    height: 5px;
    background: rgba(255, 59, 92, .55);
    left: 10%;
    top: 60%;
    animation: bkf 7.5s 4.1s linear infinite;
}

body:has(.vmail) .bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(6, 182, 212, .5);
    left: 93%;
    top: 76%;
    animation: bkf 11s 2.7s linear infinite;
}

/* Mail icon container (also the unique page identifier) */
.vmail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-bottom: 1.6rem;
}

.mail-frame {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--acc-s), rgba(6, 182, 212, .05));
    border: 1.5px solid rgba(6, 182, 212, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: var(--acc);
    position: relative;
    z-index: 1;
    animation: mailPulse 2.8s ease-in-out infinite;
}

.mail-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--acc);
    animation: vring 2.4s ease-out infinite;
}

.r1 {
    width: 68px;
    height: 68px;
    animation-delay: 0s;
}

.r2 {
    width: 84px;
    height: 84px;
    animation-delay: .7s;
}

.r3 {
    width: 100px;
    height: 100px;
    animation-delay: 1.4s;
}

@keyframes vring {
    0% {
        transform: scale(.85);
        opacity: .65;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

@keyframes mailPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--acc-s), 0 8px 24px rgba(6, 182, 212, .12);
    }

    50% {
        box-shadow: 0 0 0 10px transparent, 0 12px 32px rgba(6, 182, 212, .22);
    }
}

/* ══ 18.35 Error pages (404 / 403 / 500 / 503) ══════════════════════════════════════════════════ */

/* Accent tokens per page */
body:has(.err-404) {
    --acc: #FF3B5C;
    --acc-d: #E01E3C;
    --acc-s: rgba(255, 59, 92, .12);
}

body:has(.err-403) {
    --acc: #F59E0B;
    --acc-d: #D97706;
    --acc-s: rgba(245, 158, 11, .12);
}

body:has(.err-500) {
    --acc: #8B5CF6;
    --acc-d: #7C3AED;
    --acc-s: rgba(139, 92, 246, .12);
}

body:has(.err-503) {
    --acc: #06B6D4;
    --acc-d: #0891B2;
    --acc-s: rgba(6, 182, 212, .12);
}

/* Bokeh particles — positions shared, color follows --acc */
body:has(.err-wrap) .bok:nth-child(1) {
    width: 8px;
    height: 8px;
    background: var(--acc);
    left: 10%;
    top: 20%;
    animation: bkf 7s .5s linear infinite;
}

body:has(.err-wrap) .bok:nth-child(2) {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, .5);
    left: 80%;
    top: 15%;
    animation: bkf 9s 1.5s linear infinite;
}

body:has(.err-wrap) .bok:nth-child(3) {
    width: 12px;
    height: 12px;
    background: var(--acc);
    opacity: .4;
    left: 55%;
    top: 75%;
    animation: bkf 11s 2s linear infinite;
    filter: blur(2px);
}

body:has(.err-wrap) .bok:nth-child(4) {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .35);
    left: 25%;
    top: 80%;
    animation: bkf 8s 3s linear infinite;
}

body:has(.err-wrap) .bok:nth-child(5) {
    width: 6px;
    height: 6px;
    background: var(--acc);
    opacity: .5;
    left: 90%;
    top: 45%;
    animation: bkf 10s .8s linear infinite;
}

body:has(.err-wrap) .bok:nth-child(6) {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .2);
    left: 40%;
    top: 10%;
    animation: bkf 13s 2.5s linear infinite;
    filter: blur(3px);
}

body:has(.err-wrap) .bok:nth-child(7) {
    width: 5px;
    height: 5px;
    background: var(--acc);
    opacity: .65;
    left: 70%;
    top: 70%;
    animation: bkf 7.5s 4s linear infinite;
}

body:has(.err-wrap) .bok:nth-child(8) {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, .4);
    left: 15%;
    top: 50%;
    animation: bkf 6s 1.2s linear infinite;
}

/* Full-screen wrapper */
.err-wrap {
    min-height: 100vh;
    background: #07070D;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: 'Bricolage Grotesque', sans-serif;
    padding: 2rem;
}

/* Ambient glow blobs */
.err-wrap::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--acc-s, rgba(255, 59, 92, .08)) 0%, transparent 70%);
    top: -150px;
    left: -150px;
    border-radius: 50%;
    pointer-events: none;
}

.err-wrap::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--acc-s, rgba(255, 59, 92, .06)) 0%, transparent 70%);
    bottom: -120px;
    right: -120px;
    border-radius: 50%;
    pointer-events: none;
}

/* Card — centered content block */
.err-card {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.err-logo {
    margin-bottom: 3rem;
}

.err-logo img {
    height: 34px;
    opacity: .88;
}

/* Big error number */
.err-num {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(5.5rem, 16vw, 10rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--acc) 0%, rgba(255, 255, 255, .82) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 50px var(--acc-s));
    animation: errFloat 4s ease-in-out infinite;
    margin-bottom: .5rem;
    letter-spacing: -.04em;
}

/* Maintenance spinning icon */
.err-maint-ico {
    font-size: 4rem;
    color: var(--acc);
    filter: drop-shadow(0 0 20px var(--acc-s));
    animation: errWrench 3.5s ease-in-out infinite;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.err-title {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}

.err-divider {
    width: 40px;
    height: 2px;
    border-radius: 2px;
    background: var(--acc);
    opacity: .5;
    margin: .8rem auto 1.2rem;
}

.err-msg {
    font-size: .95rem;
    color: rgba(255, 255, 255, .46);
    line-height: 1.7;
    max-width: 360px;
    margin: 0 auto 2rem;
}

.err-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--acc);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .82rem 1.9rem;
    font-family: 'Clash Display', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), box-shadow var(--t), transform var(--t);
    position: relative;
    overflow: hidden;
}

.err-btn:hover {
    background: var(--acc-d);
    box-shadow: 0 12px 32px var(--acc-s);
    transform: translateY(-2px);
    color: #fff;
}

.err-ft {
    position: fixed;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .73rem;
    color: rgba(255, 255, 255, .17);
    z-index: 2;
}

@keyframes errFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes errWrench {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    20% {
        transform: rotate(-20deg) translateY(-5px);
    }

    60% {
        transform: rotate(20deg) translateY(-5px);
    }

    80% {
        transform: rotate(-8deg);
    }
}

/* ══ 18.36 orders/checkout (multi-step form) ══════════════════════════════════════════════════ */

/* ── Page background ──────────────────────────────────────────────────────────────────────── */
body:has(.checkout-tab) {
    background-color: #F4F5F9;
}

/* ── Event title ──────────────────────────────────────────────────────────────────────────── */
.ck-event-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--text);
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* ── Main form card ───────────────────────────────────────────────────────────────────────── */
.ck-card {
    background: #fff;
    border: 1px solid #E8EAF0;
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .055);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

/* ── Progress stepper override ────────────────────────────────────────────────────────────── */
body:has(.checkout-tab) .progress-nav .progress {
    display: none;
}

body:has(.checkout-tab) .progress-bar-tab {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0 0 2rem;
    list-style: none;
    gap: 0;
}

body:has(.checkout-tab) .progress-bar-tab .nav-item {
    display: flex;
    align-items: center;
    flex: 1;
}

body:has(.checkout-tab) .progress-bar-tab .nav-item:last-child {
    flex: 0 0 auto;
}

/* Connector line between step icons */
body:has(.checkout-tab) .progress-bar-tab .nav-item:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: #E8EAF0;
    margin: 0 4px;
    flex-shrink: 1;
}

body:has(.checkout-tab) .progress-bar-tab .nav-link {
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    cursor: default;
    white-space: nowrap;
}

/* Step icon circle — override Bootstrap bg-soft-dark, rounded-circle, p-2 */
body:has(.checkout-tab) .progress-bar-tab .nav-link i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: #F0F1F6 !important;
    border: 2px solid #E0E2EC !important;
    color: #9CA3AF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: background .25s, border-color .25s, box-shadow .25s, color .25s;
}

body:has(.checkout-tab) .progress-bar-tab .nav-link.active i {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
    box-shadow: 0 0 0 5px rgba(255, 59, 92, .12);
}

/* ── Section heading inside form steps ────────────────────────────────────────────────────── */
.ck-section-head {
    margin-bottom: 1.4rem;
}

.ck-section-head h5 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    margin: 0 0 .25rem;
}

.ck-section-head p {
    font-size: .83rem;
    color: var(--muted);
    margin: 0;
}

/* ── Form controls in checkout ────────────────────────────────────────────────────────────── */
body:has(.checkout-tab) .form-control,
body:has(.checkout-tab) .form-select {
    border-radius: 10px !important;
    border-color: #E0E2EC !important;
    background-color: #FAFBFC !important;
    font-size: .88rem !important;
    color: var(--text) !important;
    padding: .58rem .85rem !important;
    transition: border-color .2s, box-shadow .2s !important;
}

body:has(.checkout-tab) .form-control:focus,
body:has(.checkout-tab) .form-select:focus {
    border-color: var(--red) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 92, .1) !important;
    outline: none !important;
}

body:has(.checkout-tab) .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .35rem;
}

body:has(.checkout-tab) .input-group-text {
    border-radius: 10px 0 0 10px !important;
    border-color: #E0E2EC !important;
    background-color: #F0F1F6 !important;
    font-size: .85rem;
}

/* ── Flag phone input — fix SVG expanding to fill container ── */
body:has(.checkout-tab) [data-input-flag] {
    display: flex;
    align-items: stretch;
}

body:has(.checkout-tab) [data-input-flag]>.btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    padding: .45rem .75rem;
    white-space: nowrap;
}

body:has(.checkout-tab) .country-flagimg {
    width: 24px !important;
    height: 16px !important;
    object-fit: cover;
    flex-shrink: 0;
}

body:has(.checkout-tab) .form-check-label {
    font-size: .83rem;
}

/* ── Nav step buttons (Next / Back) ───────────────────────────────────────────────────────── */
body:has(.checkout-tab) .nexttab.btn-danger,
body:has(.checkout-tab) .nexttab.btn-danger.btn-label {
    background: var(--red) !important;
    border-color: var(--red) !important;
    border-radius: 100px !important;
    font-weight: 700;
    font-size: .875rem;
    padding: .58rem 1.4rem !important;
    transition: background .2s, box-shadow .2s, transform .2s !important;
}

body:has(.checkout-tab) .nexttab.btn-danger:hover {
    background: #e0173a !important;
    box-shadow: 0 6px 18px rgba(255, 59, 92, .28) !important;
    transform: translateY(-1px);
}

body:has(.checkout-tab) .previestab.btn-light,
body:has(.checkout-tab) .previestab.btn-light.btn-label {
    background: #F0F1F6 !important;
    border-color: #E0E2EC !important;
    border-radius: 100px !important;
    color: var(--muted) !important;
    font-weight: 600;
    font-size: .875rem;
    padding: .58rem 1.2rem !important;
}

body:has(.checkout-tab) .previestab.btn-light:hover {
    background: #E5E7EF !important;
    color: var(--text) !important;
}

/* Velzon .btn-label positions .label-icon absolutely (top/bottom:-1px) — incompatible with
   border-radius:100px (rectangular band overflows pill corners). Reset to inline icon. */
body:has(.checkout-tab) .btn-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

body:has(.checkout-tab) .btn-label.right {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    flex-direction: row-reverse;
}

body:has(.checkout-tab) .btn-label .label-icon {
    position: static !important;
    width: auto !important;
    background: transparent !important;
}

/* ── nexttab ↔ btn-load: overlay absolu — évite le décalage dû au double ms-auto ──────────
   Le JS jQuery fait deux opérations séparées (.spinner → show, .nexttab → hide), ce qui peut
   déclencher un repaint intermédiaire où les deux boutons sont visibles simultanément.
   Avec position:absolute, btn-load sort du flux flex et n'interfère plus avec ms-auto. */
body:has(.checkout-tab) .d-flex:has(.nexttab, .btn-load),
body:has(.checkout-tab) .ck-nav-row {
    position: relative;
    align-items: center !important;
}

body:has(.checkout-tab) .btn-load {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: .58rem 1.4rem !important;
    white-space: nowrap;
    border-radius: 100px !important;
    font-weight: 600;
    font-size: .875rem;
}

body:has(.checkout-tab) .btn-load .spinner-border {
    width: .9rem !important;
    height: .9rem !important;
    border-width: 2px;
    flex-shrink: 0;
}

/* ── OTP step ─────────────────────────────────────────────────────────────────────────────── */
.ck-otp-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255, 59, 92, .07);
    border: 1.5px solid rgba(255, 59, 92, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--red);
    margin: 0 auto 1.5rem;
}

body:has(.checkout-tab) input.otp {
    width: 56px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: 'Syne', monospace !important;
    border-radius: 12px !important;
    border: 2px solid #E0E2EC !important;
    background: #F8F9FB !important;
    color: var(--text) !important;
    text-align: center !important;
    padding: 0 !important;
    transition: border-color .2s, box-shadow .2s !important;
}

body:has(.checkout-tab) input.otp:focus {
    border-color: var(--red) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 59, 92, .1) !important;
    outline: none !important;
}

/* Resend link */
#resend-code {
    color: var(--red);
    font-weight: 600;
    font-size: .85rem;
}

/* Alert in OTP step */
body:has(.checkout-tab) .alert-otp,
body:has(.checkout-tab) .alert-contact {
    border-radius: 10px;
    font-size: .85rem;
    border: none;
    padding: .8rem 1rem;
}

body:has(.checkout-tab) .alert-danger:not(.alert-otp):not(.alert-contact) {
    border-radius: 10px;
    font-size: .84rem;
    border: none;
    background: rgba(255, 59, 92, .06);
    color: #c0122e;
}

/* ── Ticket items ─────────────────────────────────────────────────────────────────────────── */
.ck-ticket-item {
    background: #FAFBFD;
    border: 1px solid #E8EAF0;
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ck-ticket-item:last-child {
    margin-bottom: 0;
}

.ck-ticket-item h5 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: var(--text);
    margin: 0;
}

/* ── checkout-step page (Pack PRO CHAP) ───────────────────────────────────────────────────── */
body:has(.ck-step-page) {
    background-color: #F4F5F9;
}

.ck-step-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.ck-step-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ck-step-header h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text);
    margin-bottom: 1rem;
    letter-spacing: -.02em;
}

.ck-step-warn {
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
    background: rgba(255, 59, 92, .06);
    border: 1px solid rgba(255, 59, 92, .15);
    border-radius: 12px;
    padding: .75rem 1.1rem;
    font-size: .87rem;
    color: #c0122e;
    font-weight: 500;
    max-width: 600px;
    text-align: left;
    line-height: 1.55;
}

.ck-step-warn i {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: 1rem;
}

.ck-step-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.ck-step-card {
    background: #fff;
    border: 1px solid #E8EAF0;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}

.ck-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red);
    border-radius: 18px 18px 0 0;
}

.ck-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
}

.ck-num-big {
    font-family: 'Syne', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--red);
    opacity: .12;
    margin-bottom: .75rem;
    display: block;
}

.ck-step-card h6 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: .98rem;
    color: var(--text);
    margin-bottom: .5rem;
}

.ck-step-card p {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.ck-step-cta {
    text-align: center;
}

.ck-step-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .78rem 2rem;
    font-family: 'Syne', sans-serif;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.ck-step-btn:hover {
    background: #e0173a;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255, 59, 92, .28);
    transform: translateY(-2px);
}

.ck-step-infoline {
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--muted);
    font-weight: 500;
}

.ck-step-infoline strong {
    color: var(--text);
}

/* ── ck-nav-row : barre boutons de navigation dans les tabs checkout ─────────── */
.ck-nav-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
}

/* ── Contact tab ─────────────────────────────────────────────────────────────── */
.ck-contact-auth {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: 1.2rem;
    padding: .65rem .9rem;
    background: rgba(255, 59, 92, .04);
    border: 1px solid rgba(255, 59, 92, .1);
    border-radius: 10px;
}

.ck-contact-auth a {
    color: var(--red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ck-contact-required {
    font-size: .82rem;
    color: var(--muted);
    text-align: right;
    margin-bottom: 1.2rem;
}

.ck-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 1.2rem;
}

@media (max-width: 576px) {
    .ck-contact-fields {
        grid-template-columns: 1fr;
    }
}

.ck-contact-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ck-contact-field .form-label {
    font-size: .83rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0;
}

.ck-contact-field .invalid-feedback {
    font-size: .78rem;
}

/* ── Checkout custom buttons (aucune dépendance Bootstrap .btn) ──────────────── */
.ck-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem 1.4rem;
    background: var(--red);
    color: #fff !important;
    border: none;
    border-radius: 100px;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.ck-btn-primary:hover,
.ck-btn-primary:focus-visible {
    background: #e0173a;
    box-shadow: 0 6px 18px rgba(255, 59, 92, .28);
    transform: translateY(-1px);
    outline: none;
}

.ck-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem 1.2rem;
    background: #F0F1F6;
    border: 1.5px solid #E0E2EC;
    color: var(--muted) !important;
    border-radius: 100px;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.ck-btn-secondary:hover,
.ck-btn-secondary:focus-visible {
    background: #E5E7EF;
    color: var(--text) !important;
    outline: none;
}

/* ── Wrapper nexttab + btn-load : illusion d'un seul bouton ─────────────────────
   Le JS jQuery hide .nexttab (d-none) et show .spinner séparément → potentiel
   layout shift. Solution : .ck-continue-wrap est le bloc de référence.
   Quand d-none est sur .nexttab, on override en visibility:hidden pour garder
   la largeur du wrapper intact → .ck-btn-load s'overlay au même endroit. */
.ck-nav-row>.ck-continue-wrap {
    margin-left: auto;
}

.ck-continue-wrap {
    position: relative;
    display: inline-block;
}

body:has(.checkout-tab) .ck-continue-wrap .nexttab.d-none {
    display: inline-flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.ck-btn-load {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .58rem 1.4rem;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    cursor: default;
}

.ck-btn-load .spinner-border {
    width: .9rem;
    height: .9rem;
    border-width: 2px;
    flex-shrink: 0;
}

.ck-sms-notice {
    font-size: .83rem;
    color: var(--muted);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   §18.37 — orders/lottery/* (payment · success · fail · invoice)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Éléments partagés ─────────────────────────────────────────────────────── */

.lot-page-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--iz-text);
    margin-bottom: .25rem;
}

.lot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--iz-gold);
    margin-bottom: .75rem;
}

/* ── Page paiement ─────────────────────────────────────────────────────────── */

.lot-pay-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.lot-pay-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 660px) {
    .lot-pay-grid {
        grid-template-columns: 1fr 300px;
    }
}

.lot-pay-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    overflow: hidden;
}

.lot-pay-card-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--iz-border);
}

.lot-pay-card-body {
    padding: 1.25rem 1.5rem;
}

.lot-pay-card-footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.lot-pay-btn-group {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.lot-op-name {
    font-size: .78rem;
    font-weight: 700;
}

.lot-pay-field {
    margin-top: 1.25rem;
}

.lot-pay-field .invalid-feedback {
    font-size: .78rem;
    margin-top: .3rem;
    color: var(--iz-danger);
}

.lot-cc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.lot-cc-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
}

@media (max-width: 520px) {

    .lot-cc-grid-2,
    .lot-cc-grid-3 {
        grid-template-columns: 1fr;
    }
}

.lot-wave-hint {
    font-size: .85rem;
    color: var(--iz-muted);
    margin-top: 1rem;
    line-height: 1.65;
    background: var(--iz-surface-2);
    border-radius: var(--iz-radius-sm);
    padding: .85rem 1rem;
}

.lot-otp-guide {
    font-size: .83rem;
    color: var(--iz-muted);
    background: var(--iz-surface-2);
    border-radius: var(--iz-radius-sm);
    padding: .9rem 1rem;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.65;
}

.lot-otp-guide-title {
    font-weight: 600;
    color: var(--iz-text);
    margin-bottom: .4rem;
}

.lot-otp-guide-steps {
    margin: 0;
    padding-left: 1.2rem;
}

/* Récapitulatif sidebar */
.lot-summary-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    overflow: hidden;
    position: sticky;
    top: var(--iz-sticky-top);
}

.lot-summary-header {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lot-summary-icon {
    font-size: 1.1rem;
    color: var(--iz-gold);
}

.lot-summary-body {
    padding: 1.25rem 1.4rem;
}

/* Ticket stub sombre dans la sidebar */
.lot-stub {
    background: var(--iz-text);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.lot-stub::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245, 166, 35, .14) 0%, transparent 60%);
    pointer-events: none;
}

.lot-stub-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: .35rem;
}

.lot-stub-event {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: -.01em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lot-stub-divider {
    border: none;
    border-top: 1.5px dashed rgba(255, 255, 255, .2);
    margin: .75rem 0;
}

.lot-stub-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lot-stub-qty {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--iz-gold);
    letter-spacing: -.02em;
    line-height: 1;
}

.lot-stub-qty-label {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-top: .2rem;
}

.lot-stub-price {
    text-align: right;
}

.lot-stub-price-val {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1;
}

.lot-stub-price-label {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.lot-summary-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--iz-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lot-summary-total-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--iz-muted);
}

.lot-summary-total-val {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--iz-text);
}

.lot-sms-note {
    font-size: .8rem;
    color: var(--iz-muted);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: 1rem;
    line-height: 1.55;
}

.lot-sms-note i {
    color: var(--iz-gold);
    margin-top: .1rem;
    flex-shrink: 0;
}

/* ── Success : ticket physique (risque esthétique) ─────────────────────────── */

.lot-sc-ticket {
    margin: 1.75rem auto 0;
    background: var(--iz-text);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    max-width: 300px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}

.lot-sc-ticket::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245, 166, 35, .18) 0%, transparent 55%);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

/* Shimmer sweep — l'unique animation, une seule passe (transform only → Composite) */
.lot-sc-ticket-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 25%,
            rgba(255, 255, 255, .07) 50%,
            transparent 75%);
    transform: translateX(-100%);
    animation: lot-shimmer 1.8s ease .5s both;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

@keyframes lot-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lot-sc-ticket-shimmer {
        animation: none;
    }
}

.lot-sc-ticket-inner {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: left;
}

.lot-sc-ticket-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--iz-gold);
    margin-bottom: .5rem;
}

.lot-sc-ticket-event {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .85rem;
}

.lot-sc-ticket-perfs {
    border: none;
    border-top: 1.5px dashed rgba(255, 255, 255, .18);
    margin: 0 0 .85rem;
}

.lot-sc-ticket-code-label {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    margin-bottom: .25rem;
}

.lot-sc-ticket-code {
    font-family: var(--iz-font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--iz-gold);
    letter-spacing: .1em;
}

.lot-sc-ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1.5px dashed rgba(255, 255, 255, .14);
}

.lot-sc-ticket-qty {
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
}

.lot-sc-ticket-tagline {
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--iz-gold);
    font-style: italic;
}

/* Boutons d'action partagés (success + fail) */
.lot-sc-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 0 1.5rem 2rem;
    margin-top: 1.75rem;
}

@media (min-width: 400px) {
    .lot-sc-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ── Fail : référence commande ─────────────────────────────────────────────── */

.lot-fail-ref {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: var(--iz-surface-2);
    border: 1px solid var(--iz-border);
    border-radius: 10px;
    padding: .65rem 1.4rem;
    margin: 1.25rem auto 0;
}

.lot-fail-ref-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--iz-muted);
}

.lot-fail-ref-code {
    font-family: var(--iz-font-mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--iz-brand);
    letter-spacing: .05em;
}

/* ── Facture ───────────────────────────────────────────────────────────────── */

.lot-inv-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.lot-inv-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.lot-inv-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    overflow: hidden;
}

.lot-inv-stripe {
    height: 5px;
    background: linear-gradient(90deg, var(--iz-brand) 0%, #ff8fa0 100%);
}

.lot-inv-header {
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid var(--iz-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.lot-inv-num {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    color: var(--iz-text);
    margin: 0;
}

.lot-inv-meta-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: .25rem;
}

.lot-inv-meta-val {
    font-size: .88rem;
    font-weight: 600;
    color: var(--iz-text);
    margin-bottom: .5rem;
}

.lot-inv-status {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: var(--iz-radius-pill);
}

.lot-inv-status--paid {
    background: var(--iz-success-soft);
    color: var(--iz-success-alt);
    border: 1px solid rgba(0, 201, 167, .2);
}

.lot-inv-status--cancel {
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    border: 1px solid rgba(255, 59, 92, .2);
}

.lot-inv-section {
    padding: 1.25rem 2rem;
}

.lot-inv-section+.lot-inv-section {
    border-top: 1px solid var(--iz-border);
}

.lot-inv-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: 1rem;
}

.lot-inv-client-name {
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--iz-text);
    margin-bottom: .3rem;
}

.lot-inv-client-detail {
    font-size: .85rem;
    color: var(--iz-muted);
    margin-bottom: .2rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.lot-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.lot-inv-table th {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--iz-muted);
    padding: .5rem 0;
    border-bottom: 1.5px solid var(--iz-border);
    white-space: nowrap;
}

.lot-inv-table th:last-child,
.lot-inv-table td:last-child {
    text-align: right;
}

.lot-inv-table td {
    padding: .9rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--iz-border);
}

.lot-inv-item-name {
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .88rem;
    color: var(--iz-text);
    margin-bottom: .15rem;
}

.lot-inv-item-sub {
    font-size: .78rem;
    color: var(--iz-muted);
    margin: 0;
}

.lot-inv-total-row {
    display: flex;
    justify-content: flex-end;
    padding-top: .85rem;
}

.lot-inv-total-box {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .85rem 1.4rem;
    background: var(--iz-text);
    border-radius: 10px;
}

.lot-inv-total-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .2rem;
}

.lot-inv-total-val {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}

.lot-inv-method {
    font-size: .88rem;
    color: var(--iz-muted);
    margin-bottom: .25rem;
}

.lot-inv-method strong {
    color: var(--iz-text);
}

.lot-inv-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--iz-border);
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

@media print {
    .lot-inv-print-hide {
        display: none !important;
    }

    .lot-inv-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .lot-inv-wrap {
        padding: 0;
        max-width: 100%;
    }

    .lot-inv-stripe {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   §19  TERMS & POLICIES  (tp-*)
   ───────────────────────────────────────────────────────────────────────── */

.tp-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.25rem 5rem;
}

/* Hero */
.tp-hero {
    border-bottom: 2px solid var(--iz-brand);
    padding-bottom: 1.75rem;
    margin-bottom: 2.5rem;
}

.tp-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.tp-date {
    font-family: var(--iz-font-body);
    font-size: .72rem;
    color: var(--iz-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tp-back {
    font-family: var(--iz-font-body);
    font-size: .8rem;
    font-weight: 600;
    color: var(--iz-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: opacity var(--iz-tr);
}

.tp-back:hover {
    opacity: .75;
    color: var(--iz-brand);
}

.tp-title {
    font-family: var(--iz-font-heading);
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--iz-text);
    line-height: 1.15;
    margin: 0 0 .6rem;
}

.tp-intro {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-muted);
    line-height: 1.7;
    margin: 0;
}

/* TOC */
.tp-toc {
    background: var(--iz-surface-2);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
}

.tp-toc-title {
    font-family: var(--iz-font-heading);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: .75rem;
}

.tp-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tp-toc-list a {
    font-family: var(--iz-font-body);
    font-size: .78rem;
    color: var(--iz-text);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem 0;
    transition: color var(--iz-tr);
    line-height: 1.45;
}

.tp-toc-list a:hover {
    color: var(--iz-brand);
}

.tp-toc-num {
    font-family: var(--iz-font-heading);
    font-variant-numeric: tabular-nums;
    font-size: .65rem;
    font-weight: 800;
    color: var(--iz-brand);
    min-width: 1.5rem;
    flex-shrink: 0;
}

/* Section list */
.tp-sections {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

/* Section */
.tp-section {
    scroll-margin-top: 5rem;
}

.tp-section-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--iz-border);
    margin-bottom: 1rem;
}

.tp-section-num {
    font-family: var(--iz-font-heading);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
    padding: .2rem .5rem;
    border-radius: .3rem;
    flex-shrink: 0;
    line-height: 1;
}

.tp-section-h {
    font-family: var(--iz-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--iz-text);
    margin: 0;
    line-height: 1.3;
}

/* Body text */
.tp-body {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-text);
    line-height: 1.8;
}

.tp-body p {
    margin-bottom: .7rem;
}

.tp-body p:last-child {
    margin-bottom: 0;
}

/* Bullet list */
.tp-list {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-text);
    line-height: 1.75;
    list-style: none;
    padding: 0;
    margin: .5rem 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.tp-list li {
    display: flex;
    gap: .6rem;
    align-items: baseline;
}

.tp-list li::before {
    content: "—";
    color: var(--iz-brand);
    font-weight: 700;
    flex-shrink: 0;
}

/* Definition item */
.tp-def-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: .5rem 0 .75rem;
}

.tp-def-item {
    display: flex;
    gap: .65rem;
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-text);
    line-height: 1.7;
    align-items: baseline;
}

.tp-def-item::before {
    content: "—";
    color: var(--iz-brand);
    font-weight: 700;
    flex-shrink: 0;
}

.tp-def-term {
    font-weight: 700;
}

/* Sub-heading inside section */
.tp-sub-h {
    font-family: var(--iz-font-heading);
    font-size: .85rem;
    font-weight: 700;
    color: var(--iz-text);
    margin: 1.1rem 0 .35rem;
    letter-spacing: .02em;
    font-style: italic;
}

/* Contact CTA */
.tp-cta {
    background: var(--iz-text);
    border-radius: var(--iz-radius);
    padding: 2rem 1.75rem;
    text-align: center;
    margin-top: 3rem;
}

.tp-cta p {
    font-family: var(--iz-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .tp-toc-list {
        gap: .35rem;
    }

    .tp-toc-list a {
        font-size: .8rem;
    }

    .tp-section-h {
        font-size: .98rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   §20  CONTACT (ct-*) · FAQ (faq-*) · MAINTENANCE (mnt-*)
   ───────────────────────────────────────────────────────────────────────── */

/* ── Contact ── */
.ct-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1.25rem 5rem;
}

.ct-hero {
    margin-bottom: 2.5rem;
}

.ct-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.ct-eyebrow {
    font-family: var(--iz-font-heading);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iz-brand);
}

.ct-title {
    font-family: var(--iz-font-heading);
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--iz-text);
    line-height: 1.15;
    margin: 0 0 .35rem;
}

.ct-sub {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-muted);
    margin: 0;
}

.ct-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.75rem;
    align-items: start;
}

.ct-info-card {
    background: var(--iz-text);
    border-radius: var(--iz-radius);
    padding: 1.75rem 1.5rem;
    color: #fff;
}

.ct-info-brand {
    font-family: var(--iz-font-heading);
    font-size: .95rem;
    font-weight: 800;
    color: var(--iz-brand);
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ct-info-row {
    display: flex;
    gap: .8rem;
    margin-bottom: 1.35rem;
    align-items: flex-start;
}

.ct-info-row:last-child {
    margin-bottom: 0;
}

.ct-info-icon {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 59, 92, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--iz-brand);
    font-size: .9rem;
    margin-top: .1rem;
}

.ct-info-label {
    font-family: var(--iz-font-heading);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    margin-bottom: .2rem;
}

.ct-info-val {
    font-family: var(--iz-font-body);
    font-size: .83rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    line-height: 1.5;
}

.ct-info-val a {
    color: var(--iz-brand);
    text-decoration: none;
}

.ct-info-val a:hover {
    text-decoration: underline;
}

.ct-form-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: 2rem;
    box-shadow: var(--iz-shadow-card);
}

.ct-form-title {
    font-family: var(--iz-font-heading);
    font-size: .95rem;
    font-weight: 700;
    color: var(--iz-text);
    margin-bottom: 1.4rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--iz-border);
}

.ct-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ct-field {
    margin-bottom: 1rem;
}

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

    .ct-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ── FAQ ── */
.faq-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1.25rem 5rem;
}

.faq-hero {
    text-align: center;
    margin-bottom: 2.75rem;
}

.faq-hero-eyebrow {
    font-family: var(--iz-font-heading);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iz-brand);
    margin-bottom: .55rem;
}

.faq-hero-title {
    font-family: var(--iz-font-heading);
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--iz-text);
    margin-bottom: .7rem;
    line-height: 1.2;
}

.faq-hero-sub {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    color: var(--iz-muted);
    max-width: 520px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.faq-accordion .accordion-item {
    border: 1px solid var(--iz-border) !important;
    border-radius: var(--iz-radius-sm) !important;
    margin-bottom: .5rem;
    overflow: hidden;
    background: var(--iz-surface);
}

.faq-accordion .accordion-button {
    font-family: var(--iz-font-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--iz-text);
    background: var(--iz-surface);
    padding: 1rem 1.2rem;
    box-shadow: none !important;
    line-height: 1.45;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.faq-accordion .accordion-button:focus {
    outline: 2px solid var(--iz-brand);
    outline-offset: -2px;
    box-shadow: none !important;
}

.faq-accordion .accordion-body {
    font-family: var(--iz-font-body);
    font-size: .85rem;
    color: var(--iz-muted);
    line-height: 1.75;
    padding: .65rem 1.2rem 1rem;
    background: var(--iz-surface);
}

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

/* ── Maintenance ── */
.mnt-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--iz-text);
    padding: 2rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.mnt-page::before {
    content: "";
    position: absolute;
    top: -35%;
    right: -20%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(255, 59, 92, .13) 0%, transparent 68%);
    pointer-events: none;
}

.mnt-page::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -18%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(255, 59, 92, .07) 0%, transparent 68%);
    pointer-events: none;
}

.mnt-card {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 460px;
}

.mnt-logo {
    font-family: var(--iz-font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--iz-brand);
    letter-spacing: .06em;
    margin-bottom: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-transform: uppercase;
}

.mnt-icon-wrap {
    width: 88px;
    height: 88px;
    background: rgba(255, 59, 92, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.4rem;
    color: var(--iz-brand);
}

.mnt-title {
    font-family: var(--iz-font-heading);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .8rem;
}

.mnt-sub {
    font-family: var(--iz-font-body);
    font-size: .9rem;
    color: rgba(255, 255, 255, .45);
    line-height: 1.75;
    margin: 0;
}

.mnt-footer {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    font-family: var(--iz-font-body);
    font-size: .7rem;
    color: rgba(255, 255, 255, .2);
    letter-spacing: .04em;
}

/* ── Cookie Banner (ck-cookie-*) ── */
.ck-cookie-bar {
    position: fixed;
    bottom: 3.5rem;
    left: 1.5rem;
    z-index: 9999;
    width: 340px;
    max-width: calc(100vw - 3rem);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-top: 3px solid var(--iz-brand);
    border-radius: var(--iz-radius);
    padding: 1.25rem;
    box-shadow: var(--iz-shadow-modal);
}

.ck-cookie-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ck-cookie-icon {
    font-size: 1.25rem;
    color: var(--iz-brand);
    line-height: 1;
    flex-shrink: 0;
}

.ck-cookie-label {
    font-family: var(--iz-font-heading);
    font-size: .82rem;
    font-weight: 800;
    color: var(--iz-text);
    letter-spacing: .02em;
}

.ck-cookie-text {
    font-family: var(--iz-font-body);
    font-size: .78rem;
    color: var(--iz-muted);
    line-height: 1.65;
    margin: 0;
}

.ck-cookie-text a {
    color: var(--iz-brand);
    font-weight: 600;
    text-decoration: none;
}

.ck-cookie-text a:hover {
    text-decoration: underline;
}

.ck-cookie-actions {
    display: flex;
    gap: .5rem;
}

.ck-cookie-actions .ck-btn-primary,
.ck-cookie-actions .ck-btn-secondary {
    flex: 1;
    justify-content: center;
    font-size: .78rem;
    padding: .45rem .75rem;
}

@media (max-width: 480px) {
    .ck-cookie-bar {
        bottom: 1rem;
        left: 1rem;
        width: calc(100vw - 2rem);
        max-width: none;
    }
}

/* ─── §21 Invoice (inv-*) ──────────────────────────────────── */
.inv-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.inv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.inv-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--iz-muted);
    text-decoration: none;
    transition: color .18s;
}

.inv-back:hover {
    color: var(--iz-brand);
}

.inv-doc {
    background: var(--iz-surface);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    overflow: hidden;
}

.inv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--iz-text);
    color: #fff;
}

.inv-brand {
    font-family: var(--iz-font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.inv-brand i {
    color: var(--iz-brand);
}

.inv-brand-tagline {
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    margin-top: .2rem;
    font-family: var(--iz-font-body);
}

.inv-title-block {
    text-align: right;
}

.inv-title {
    font-family: var(--iz-font-heading);
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: .07em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.inv-num {
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .4rem;
    font-family: var(--iz-font-body);
}

.inv-num strong {
    color: var(--iz-brand);
    font-weight: 700;
}

.inv-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px dashed var(--iz-border);
}

.inv-meta-item {
    padding: 1.25rem 1.5rem;
    border-right: 1px dashed var(--iz-border);
}

.inv-meta-item:last-child {
    border-right: none;
}

.inv-meta-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: .4rem;
    font-family: var(--iz-font-body);
}

.inv-meta-val {
    font-family: var(--iz-font-heading);
    font-size: .88rem;
    font-weight: 700;
    color: var(--iz-text);
    line-height: 1.3;
}

.inv-meta-val.is-amount {
    color: var(--iz-brand);
    font-size: .95rem;
}

.inv-billing {
    padding: 1.5rem;
    border-bottom: 1px dashed var(--iz-border);
}

.inv-section-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: .65rem;
    font-family: var(--iz-font-body);
}

.inv-billing-name {
    font-family: var(--iz-font-heading);
    font-size: .92rem;
    font-weight: 700;
    color: var(--iz-text);
    margin: 0 0 .2rem;
}

.inv-billing-detail {
    font-size: .81rem;
    color: var(--iz-muted);
    line-height: 1.75;
    margin: 0;
}

.inv-table-section {
    padding: 1.5rem 1.5rem 0;
}

.inv-table-wrap {
    overflow-x: auto;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--iz-font-body);
    font-size: .82rem;
}

.inv-table thead th {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iz-muted);
    padding: .6rem .75rem;
    background: var(--iz-surface-2);
    border-bottom: 1px solid var(--iz-border);
    white-space: nowrap;
}

.inv-table thead th:first-child {
    border-radius: var(--iz-radius-sm) 0 0 var(--iz-radius-sm);
}

.inv-table thead th:last-child {
    border-radius: 0 var(--iz-radius-sm) var(--iz-radius-sm) 0;
}

.inv-table tbody td {
    padding: .9rem .75rem;
    border-bottom: 1px solid var(--iz-border);
    color: var(--iz-text);
    vertical-align: middle;
}

.inv-table tbody tr:last-child td {
    border-bottom: none;
}

.inv-pass-event {
    font-size: .7rem;
    color: var(--iz-muted);
    margin: 0 0 .1rem;
}

.inv-pass-name {
    font-weight: 700;
}

.inv-totals {
    display: flex;
    justify-content: flex-end;
    padding: .5rem 1.5rem 0;
}

.inv-totals-table {
    width: 260px;
    font-family: var(--iz-font-body);
    font-size: .82rem;
    border-collapse: collapse;
}

.inv-totals-table td {
    padding: .45rem .4rem;
    color: var(--iz-muted);
}

.inv-totals-table td:last-child {
    text-align: right;
    color: var(--iz-text);
    font-weight: 600;
}

.inv-totals-grand {
    border-top: 2px solid var(--iz-brand);
}

.inv-totals-grand td {
    padding-top: .7rem;
    font-family: var(--iz-font-heading);
    font-size: .95rem;
    font-weight: 800;
    color: var(--iz-text) !important;
}

.inv-totals-grand td:last-child {
    color: var(--iz-brand) !important;
}

.inv-payment {
    padding: 1.25rem 1.5rem 1.75rem;
    margin-top: 1rem;
    border-top: 1px dashed var(--iz-border);
}

.inv-payment-row {
    font-size: .81rem;
    color: var(--iz-muted);
    margin-bottom: .3rem;
    display: flex;
    gap: .4rem;
}

.inv-payment-row:last-child {
    margin-bottom: 0;
}

.inv-payment-row strong {
    color: var(--iz-text);
}

@media print {
    .inv-doc {
        box-shadow: none;
        border-radius: 0;
    }

    .inv-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

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

    .inv-meta-item {
        border-right: none;
        border-bottom: 1px dashed var(--iz-border);
    }

    .inv-meta-item:nth-child(odd) {
        border-right: 1px dashed var(--iz-border);
    }

    .inv-meta-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .inv-header {
        flex-direction: column;
        gap: .75rem;
    }

    .inv-title-block {
        text-align: left;
    }

    .inv-totals {
        padding: .5rem 1rem 0;
    }

    .inv-totals-table {
        width: 100%;
    }

    .inv-table-section,
    .inv-billing,
    .inv-payment {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .inv-meta-item {
        padding: 1rem;
    }
}

/* ─── §22 Delivery Tracking (dv-*) ──────────────────────────── */
.dv-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.dv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dv-header-title {
    font-family: var(--iz-font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--iz-text);
    margin: 0 0 .2rem;
}

.dv-header-ref {
    font-size: .78rem;
    color: var(--iz-muted);
}

.dv-card {
    background: var(--iz-surface);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    padding: 1.75rem;
    margin-bottom: 1rem;
}

/* Stepper */
.dv-stepper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Track background — from center of step 1 to center of step 4 (12.5% each side for 4 steps) */
.dv-stepper::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    background: var(--iz-border);
    border-radius: 99px;
    z-index: 0;
}

/* Fill — starts at step 1 center; width set inline by PHP */
.dv-progress-fill {
    position: absolute;
    top: 22px;
    left: 12.5%;
    height: 3px;
    background: var(--iz-brand);
    border-radius: 99px;
    z-index: 1;
}

.dv-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex: 1;
}

.dv-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--iz-surface-2);
    border: 2px solid var(--iz-border);
    color: var(--iz-muted);
}

.dv-step-icon.done {
    background: var(--iz-brand);
    border-color: var(--iz-brand);
    color: #fff;
}

.dv-step-icon.active {
    background: var(--iz-surface);
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    box-shadow: 0 0 0 4px var(--iz-brand-soft);
}

.dv-step-label {
    font-family: var(--iz-font-body);
    font-size: .67rem;
    font-weight: 600;
    color: var(--iz-muted);
    text-align: center;
    line-height: 1.3;
    max-width: 72px;
}

.dv-step-label.done,
.dv-step-label.active {
    color: var(--iz-text);
}

/* Refused state */
.dv-refused {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(255, 59, 92, .05);
    border: 1px solid rgba(255, 59, 92, .18);
    border-left: 4px solid var(--iz-brand);
    border-radius: var(--iz-radius-sm);
    padding: 1rem 1.25rem;
    font-size: .85rem;
    color: var(--iz-text);
    line-height: 1.6;
}

.dv-refused i {
    font-size: 1.3rem;
    color: var(--iz-brand);
    flex-shrink: 0;
    margin-top: .05rem;
}

/* Info grid */
.dv-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 2rem;
}

.dv-info-label {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iz-muted);
    margin-bottom: .3rem;
    font-family: var(--iz-font-body);
}

.dv-info-val {
    font-family: var(--iz-font-heading);
    font-size: .88rem;
    font-weight: 700;
    color: var(--iz-text);
}

/* Invoice link */
.dv-invoice-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--iz-muted);
    text-decoration: none;
    transition: color .18s;
}

.dv-invoice-link:hover {
    color: var(--iz-brand);
}

@media (max-width: 480px) {
    .dv-stepper::before {
        top: 19px;
    }

    .dv-progress-fill {
        top: 19px;
    }

    .dv-step-icon {
        width: 38px;
        height: 38px;
        font-size: .95rem;
    }

    .dv-step-label {
        max-width: 56px;
        font-size: .61rem;
    }

    .dv-info-grid {
        grid-template-columns: 1fr;
    }

    .dv-card {
        padding: 1.25rem;
    }
}

/* ─── §23 Favorites (fav-*) ─────────────────────────────────── */
/* Cards : repose sur les classes ev-card (§18.4) — pas de duplication */
.fav-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.fav-page-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--iz-text);
    letter-spacing: -.03em;
    margin: 0;
}

.fav-count-badge {
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    border: 1px solid rgba(255, 59, 92, .18);
    border-radius: 100px;
    padding: .3rem .85rem;
    font-size: .8rem;
    font-weight: 700;
}

.fav-filter-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.fav-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: 100px;
    padding: .4rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--iz-muted);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.fav-filter-btn:hover {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.fav-filter-btn.active {
    background: var(--iz-brand);
    border-color: var(--iz-brand);
    color: #fff;
}

.fav-filter-btn .count {
    font-size: .68rem;
    opacity: .75;
}

.fav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.fav-item {
    min-height: 0;
}

.fav-empty {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    padding: 4rem 2rem;
    text-align: center;
}

.fav-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--iz-brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--iz-brand);
    margin: 0 auto 1.25rem;
}

.fav-empty-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--iz-text);
    margin-bottom: .5rem;
}

.fav-empty-sub {
    font-size: .88rem;
    color: var(--iz-muted);
    margin-bottom: 1.5rem;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.btn-fav-explore {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--iz-brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .7rem 1.75rem;
    font-family: var(--iz-font-heading);
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.btn-fav-explore:hover {
    background: #d42e4c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 59, 92, .22);
}

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

/* ─── §24 Tickets (tk-*) — Boarding pass layout ─────────── */
.tk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.tk-page-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--iz-text);
    letter-spacing: -.03em;
    margin: 0;
}

.tk-count-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: 100px;
    padding: .28rem .9rem;
    font-size: .78rem;
    color: var(--iz-muted);
    font-weight: 500;
}

.tk-count-badge strong {
    color: var(--iz-text);
    font-weight: 700;
}

.tk-filterbar {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: .75rem 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--iz-shadow-card);
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.tk-tabs {
    display: flex;
    gap: .35rem;
}

.tk-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--iz-surface-2);
    border: 1.5px solid var(--iz-border);
    border-radius: 100px;
    padding: .38rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--iz-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .22s cubic-bezier(.4, 0, .2, 1);
}

.tk-tab:hover {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.tk-tab.active {
    background: var(--iz-brand);
    border-color: var(--iz-brand);
    color: #fff;
    font-weight: 700;
}

.tk-tab .tk-tab-count {
    background: rgba(255, 255, 255, .25);
    border-radius: 100px;
    padding: .05rem .45rem;
    font-size: .68rem;
}

.tk-tab:not(.active) .tk-tab-count {
    background: rgba(0, 0, 0, .07);
    color: var(--iz-muted);
}

.tk-date-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 220px;
}

.tk-date-input {
    flex: 1;
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    padding: .55rem .85rem;
    font-size: .83rem;
    font-family: var(--iz-font-body);
    color: var(--iz-text);
    background: var(--iz-surface-2);
    outline: none;
    transition: border-color .22s, background .22s;
}

.tk-date-input::placeholder {
    color: var(--iz-muted);
}

.tk-date-input:focus {
    border-color: var(--iz-brand);
    background: var(--iz-surface);
}

.tk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--iz-brand);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: .55rem 1.2rem;
    font-size: .8rem;
    font-weight: 700;
    font-family: var(--iz-font-heading);
    cursor: pointer;
    transition: background .22s, transform .22s;
    flex-shrink: 0;
}

.tk-filter-btn:hover {
    background: #d42e4c;
    transform: scale(1.02);
}

/* Grid — 1 column for boarding pass cards on most screens */
.tk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: .85rem;
}

/* Skeletons */
.tk-skeleton {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    box-shadow: var(--iz-shadow-card);
    height: 115px;
}

.tk-skel-bar {
    height: 8px;
    border-radius: 4px;
    background: #E8EAF0;
    animation: tk-shimmer 1.4s infinite linear;
}

.tk-skel-inner {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

@keyframes tk-shimmer {

    0%,
    100% {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

/* ══ Boarding-pass card ══════════════════════════════════════ */
.tk-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    overflow: hidden;
    box-shadow: var(--iz-shadow-card);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s, border-color .22s;
    display: flex;
    flex-direction: row;
    min-height: 115px;
    position: relative;
}

.tk-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--iz-shadow-hover);
    border-color: rgba(255, 59, 92, .15);
}

/* Left status panel */
.tk-bp-panel {
    width: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem .5rem;
}

.tk-bp-panel.upcoming {
    background: linear-gradient(170deg, #00C9A7 0%, #00a085 100%);
}

.tk-bp-panel.past {
    background: linear-gradient(170deg, #B4B8CC 0%, #8A8FA8 100%);
}

.tk-bp-panel i {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, .9);
}

.tk-bp-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: .56rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

/* Horizontal content wrapper */
.tk-bp-content {
    display: flex;
    flex: 1;
    min-width: 0;
}

/* Main info zone */
.tk-bp-info {
    flex: 1;
    padding: .9rem 1rem .9rem 1.25rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
}

.tk-event-name {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1rem;
    color: var(--iz-text);
    letter-spacing: -.02em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tk-meta {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.tk-meta-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--iz-muted);
}

.tk-meta-row i {
    font-size: .82rem;
    flex-shrink: 0;
}

.tk-meta-row.date {
    color: var(--iz-brand);
    font-weight: 600;
}

.tk-pass-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--iz-brand-soft);
    color: var(--iz-brand);
    border: 1px solid rgba(255, 59, 92, .15);
    border-radius: 100px;
    padding: .14rem .65rem;
    font-size: .68rem;
    font-weight: 700;
    align-self: flex-start;
}

/* Stub (right side — dashed left border = tear line) */
.tk-bp-stub {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: .55rem;
    padding: .9rem .75rem;
    background: var(--iz-surface-2);
    border-left: 2px dashed var(--iz-border);
    text-align: center;
}

/* Notch circles at the tear line */
.tk-bp-stub::before,
.tk-bp-stub::after {
    content: '';
    position: absolute;
    right: calc(120px - 9px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--iz-surface-2);
    border: 1.5px solid var(--iz-border);
    z-index: 2;
}

.tk-bp-stub::before {
    top: -9px;
}

.tk-bp-stub::after {
    bottom: -9px;
}

.tk-code {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .68rem;
    font-weight: 700;
    color: var(--iz-muted);
    letter-spacing: .05em;
    word-break: break-all;
}

.tk-download-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: var(--iz-brand);
    color: #fff;
    border: none;
    border-radius: var(--iz-radius-sm);
    padding: .5rem .75rem;
    font-size: .72rem;
    font-family: var(--iz-font-heading);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .22s, transform .22s, box-shadow .22s;
    width: 100%;
}

.tk-download-btn i {
    font-size: 1rem;
}

.tk-download-btn:hover {
    background: #d42e4c;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 59, 92, .22);
}

.tk-download-btn:disabled,
.tk-download-btn.disabled {
    background: var(--iz-border);
    color: var(--iz-muted);
    pointer-events: none;
    box-shadow: none;
}

/* Empty + pagination */
.tk-empty {
    grid-column: 1/-1;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--iz-shadow-card);
}

.tk-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--iz-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--iz-muted);
    margin: 0 auto 1rem;
}

.tk-empty-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--iz-text);
    margin-bottom: .35rem;
}

.tk-empty-sub {
    font-size: .83rem;
    color: var(--iz-muted);
}

.tk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.tk-pg-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius-sm);
    padding: .5rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--iz-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all .22s cubic-bezier(.4, 0, .2, 1);
}

.tk-pg-btn:hover:not(.disabled) {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.tk-pg-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

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

    .tk-filterbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tk-bp-stub {
        width: 100px;
    }

    .tk-bp-stub::before,
    .tk-bp-stub::after {
        right: calc(100px - 9px);
    }
}

/* ─── §25 Delivery Orders (do-*) ─────────────────────────── */
.do-section {
    margin-top: 2.5rem;
}

.do-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.do-section-title {
    font-family: var(--iz-font-heading);
    font-weight: 800;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: var(--iz-text);
    letter-spacing: -.03em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.do-section-title i {
    color: var(--iz-brand);
    font-size: 1.1rem;
}

.do-count-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: 100px;
    padding: .28rem .9rem;
    font-size: .78rem;
    color: var(--iz-muted);
    font-weight: 500;
}

.do-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.do-card {
    background: var(--iz-surface);
    border: 1.5px solid var(--iz-border);
    border-radius: var(--iz-radius);
    box-shadow: var(--iz-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s, border-color .22s;
}

.do-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--iz-shadow-hover);
    border-color: rgba(255, 59, 92, .15);
}

.do-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem .7rem;
    border-bottom: 1px dashed var(--iz-border);
}

.do-card-ref {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--iz-text);
    letter-spacing: .04em;
}

.do-status {
    font-size: .68rem !important;
    padding: .18rem .65rem !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.do-card-meta {
    padding: .75rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.do-meta-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--iz-muted);
}

.do-meta-row i {
    font-size: .88rem;
    flex-shrink: 0;
}

.do-meta-amount {
    color: var(--iz-text);
    font-weight: 700;
    font-size: .88rem;
}

.do-meta-amount i {
    color: var(--iz-brand);
}

.do-card-footer {
    padding: .7rem 1.1rem .85rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    border-top: 1px solid var(--iz-border);
}

.do-card-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .77rem;
    font-weight: 600;
    color: var(--iz-muted);
    text-decoration: none;
    border: 1.5px solid var(--iz-border);
    border-radius: 100px;
    padding: .32rem .85rem;
    transition: all .22s;
}

.do-card-link:hover {
    border-color: var(--iz-brand);
    color: var(--iz-brand);
    background: var(--iz-brand-soft);
}

.do-card-link--primary {
    background: var(--iz-brand);
    color: #fff;
    border-color: var(--iz-brand);
}

.do-card-link--primary:hover {
    background: #d42e4c;
    color: #fff;
    border-color: #d42e4c;
}

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

/* §18.12 — Date picker (choose_one checkout) */
.date-pick-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px
}

.date-pick-card {
    position: relative;
    cursor: pointer
}

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

.date-pick-body {
    border: 2px solid var(--iz-border, #e5e7eb);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 130px;
    transition: border-color .18s, box-shadow .18s;
    background: #fff
}

.date-pick-card input:checked~.date-pick-body {
    border-color: var(--iz-red, #FF3B5C);
    box-shadow: 0 0 0 3px rgba(255, 59, 92, .12)
}

.date-pick-day {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--iz-red, #FF3B5C)
}

.date-pick-month {
    font-size: .78rem;
    text-transform: capitalize;
    color: #6b7280;
    margin-bottom: 4px
}

.date-pick-time {
    font-size: .82rem;
    font-weight: 500;
    color: #374151
}

.date-pick-place {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px
}

.date-pick-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #374151;
    text-transform: uppercase;
    margin-bottom: 8px
}

/* ─── §26 Followed Organizers (fo-*) ─────────────────────────── */
.fo-header {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 24px 32px;
    border-bottom: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.fo-header h1 {
    font-family: var(--iz-font-heading);
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    color: var(--iz-text);
    margin: 0;
}

.fo-count-badge {
    background: var(--iz-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--iz-radius-pill);
}

.fo-grid {
    max-width: 1100px;
    margin: 40px auto 80px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.fo-org-card {
    background: var(--iz-surface);
    border-radius: var(--iz-radius);
    border: 1px solid var(--iz-border);
    overflow: hidden;
    animation: fo-fadeUp .5s ease both;
}

.fo-org-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--iz-text);
}

.fo-org-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .15);
    flex-shrink: 0;
}

.fo-org-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2520, #3d3028);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--iz-font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--iz-brand);
    flex-shrink: 0;
}

.fo-org-meta {
    flex: 1;
    min-width: 0;
}

.fo-org-name {
    font-family: var(--iz-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-org-name:hover {
    color: var(--iz-brand);
}

.fo-org-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    margin-top: 2px;
}

.fo-org-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-unfollow {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--iz-radius-pill);
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: var(--iz-tr);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-unfollow:hover {
    border-color: var(--iz-danger);
    color: var(--iz-danger);
}

.fo-events-wrap {
    padding: 20px 24px;
}

.fo-events-label {
    font-family: var(--iz-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iz-brand);
    margin-bottom: 16px;
    display: block;
}

.fo-events-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.fo-ev-card {
    border-radius: var(--iz-radius-sm);
    overflow: hidden;
    border: 1px solid var(--iz-border);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: var(--iz-tr);
}

.fo-ev-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--iz-shadow-hover);
    border-color: transparent;
}

.fo-ev-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.fo-ev-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.fo-ev-card:hover .fo-ev-img img {
    transform: scale(1.06);
}

.fo-ev-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 13, 12, .6) 0%, transparent 60%);
}

.fo-ev-body {
    padding: 12px 14px;
    background: var(--iz-surface-2);
    flex: 1;
}

.fo-ev-name {
    font-family: var(--iz-font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--iz-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.fo-ev-date {
    font-size: 12px;
    color: var(--iz-brand);
    display: flex;
    align-items: center;
    gap: 4px;
}

.fo-no-events {
    color: var(--iz-muted);
    font-size: 14px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fo-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--iz-brand);
    text-decoration: none;
    margin-top: 16px;
    transition: var(--iz-tr);
}

.fo-see-all:hover {
    color: var(--iz-brand-dark);
}

.fo-empty {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 0 24px;
}

.fo-empty i {
    font-size: 56px;
    color: rgba(0, 0, 0, .12);
    display: block;
    margin-bottom: 20px;
}

.fo-empty h2 {
    font-family: var(--iz-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--iz-text);
    margin-bottom: 10px;
}

.fo-empty p {
    font-size: 15px;
    color: #7a7570;
    line-height: 1.7;
    margin-bottom: 24px;
}

.fo-empty a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 26px;
    border-radius: var(--iz-radius-pill);
    background: var(--iz-brand);
    color: #fff;
    text-decoration: none;
    transition: var(--iz-tr);
}

.fo-empty a:hover {
    background: var(--iz-brand-dark);
}

@keyframes fo-fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@media (max-width: 600px) {
    .fo-org-head {
        flex-wrap: wrap;
    }

    .fo-events-row {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ─── §27 Organizer show (org-*) ─────────────────────────────── */
.org-hero {
    position: relative;
    background: var(--iz-text);
    overflow: hidden;
    padding: 80px 0 0;
}

.org-hero__noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px;
    opacity: 0.6;
}

.org-hero__glow {
    position: absolute;
    top: -120px;
    right: -120px;
    z-index: 0;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 151, 58, .22) 0%, transparent 70%);
}

.org-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 64px 64px;
}

.org-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px 64px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: end;
}

.org-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    animation: org-fadeUp .6s ease both;
}

.org-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--iz-brand-dark);
    animation: org-spin 12s linear infinite;
}

.org-avatar-ring::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--iz-brand-dark);
}

.org-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--iz-text);
    display: block;
}

.org-avatar-placeholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2520, #3d3028);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--iz-font-heading);
    font-size: 42px;
    font-weight: 800;
    color: var(--iz-brand-dark);
    border: 4px solid rgba(200, 151, 58, .3);
}

.org-info {
    animation: org-fadeUp .6s .12s ease both;
}

.org-badge {
    display: inline-block;
    font-family: var(--iz-font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--iz-brand-dark);
    border: 1px solid rgba(200, 151, 58, .4);
    border-radius: var(--iz-radius-pill);
    padding: 4px 14px;
    margin-bottom: 14px;
}

.org-name {
    font-family: var(--iz-font-heading);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 20px;
}

.org-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}

.org-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

.org-stat strong {
    font-family: var(--iz-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-right: 2px;
}

/* Follow button */
.btn-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--iz-font-heading);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--iz-radius-pill);
    border: 1.5px solid var(--iz-brand-dark);
    background: var(--iz-brand-dark);
    color: #fff;
    cursor: pointer;
    transition: var(--iz-tr);
    letter-spacing: .02em;
}

.btn-follow:hover {
    background: #b82540;
    border-color: #b82540;
}

.btn-follow.following {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .7);
}

.btn-follow.following:hover {
    border-color: var(--iz-danger);
    color: var(--iz-danger);
    background: transparent;
}

.btn-follow.loading {
    opacity: .6;
    pointer-events: none;
}

/* Socials */
.org-socials {
    display: flex;
    gap: 10px;
}

.org-social-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--iz-radius-xs);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .65);
    font-size: 17px;
    text-decoration: none;
    transition: var(--iz-tr);
}

.org-social-btn:hover {
    background: var(--iz-brand-dark);
    border-color: var(--iz-brand-dark);
    color: var(--iz-text);
    transform: translateY(-2px);
}

.org-hero-wave {
    display: block;
    background: var(--iz-text);
}

.org-hero-wave svg {
    display: block;
    width: 100%;
}

/* Description */
.org-description {
    max-width: 820px;
    margin: 56px auto 0;
    padding: 0 32px;
    animation: org-fadeUp .6s .2s ease both;
}

.org-section-label {
    font-family: var(--iz-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--iz-brand-dark);
    margin-bottom: 12px;
    display: block;
}

.org-section-title {
    font-family: var(--iz-font-heading);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--iz-text);
    margin-bottom: 20px;
}

.org-description__body {
    font-size: 16px;
    line-height: 1.8;
    color: #4a4540;
}

/* Events section */
.org-events-section {
    max-width: 1200px;
    margin: 64px auto 80px;
    padding: 0 32px;
}

.org-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    align-items: center;
}

.org-filter-tab {
    font-family: var(--iz-font-heading);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--iz-radius-pill);
    border: 1.5px solid #fef2f4;
    background: transparent;
    color: #6b6560;
    cursor: pointer;
    transition: var(--iz-tr);
    display: flex;
    align-items: center;
    gap: 8px;
}

.org-filter-tab .count {
    font-size: 11px;
    font-weight: 700;
    background: #fef2f4;
    color: #6b6560;
    border-radius: var(--iz-radius-pill);
    padding: 2px 8px;
    transition: var(--iz-tr);
}

.org-filter-tab.active {
    background: var(--iz-text);
    border-color: var(--iz-text);
    color: #fff;
}

.org-filter-tab.active .count {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.org-filter-tab:hover:not(.active) {
    border-color: var(--iz-text);
    color: var(--iz-text);
}

.org-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}

/* Organizer event card */
.org-ev-card {
    background: #fef2f4;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--iz-border);
    transition: var(--iz-tr);
    animation: org-fadeUp .5s ease both;
    display: flex;
    flex-direction: column;
}

.org-ev-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .12);
    border-color: transparent;
}

.org-ev-card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.org-ev-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.org-ev-card:hover .org-ev-card__img img {
    transform: scale(1.06);
}

.org-ev-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 13, 12, .7) 0%, transparent 55%);
}

.org-ev-card__date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(14, 13, 12, .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--iz-radius-xs);
    padding: 8px 12px;
    text-align: center;
    color: #fff;
    line-height: 1;
}

.org-ev-card__date-badge .day {
    font-family: var(--iz-font-heading);
    font-size: 20px;
    font-weight: 800;
    display: block;
}

.org-ev-card__date-badge .month {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--iz-brand);
    display: block;
    margin-top: 2px;
}

.org-ev-card__fav {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(14, 13, 12, .6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    transition: var(--iz-tr);
}

.org-ev-card__fav:hover,
.org-ev-card__fav.active {
    color: var(--iz-danger);
}

.org-ev-card__fav.active {
    background: rgba(231, 76, 60, .15);
}

.org-ev-card__body {
    padding: 18px 20px 14px;
    flex: 1;
}

.org-ev-card__name {
    font-family: var(--iz-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--iz-text);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.35;
}

.org-ev-card__name:hover {
    color: var(--iz-brand-dark);
}

.org-ev-card__date-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-brand-dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.org-ev-card__place {
    font-size: 13px;
    color: #7a7570;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
}

.org-ev-card__place i {
    margin-top: 2px;
    flex-shrink: 0;
}

.org-ev-card__footer {
    padding: 12px 20px 16px;
    border-top: 1px dashed #fef2f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.org-ev-card__price {
    font-family: var(--iz-font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-text);
}

.org-ev-card__price.free {
    color: var(--iz-success-alt);
}

.org-ev-card__btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--iz-radius-pill);
    background: var(--iz-text);
    color: #fff;
    text-decoration: none;
    letter-spacing: .02em;
    transition: var(--iz-tr);
}

.org-ev-card__btn:hover {
    background: var(--iz-brand-dark);
    color: var(--iz-text);
}

.org-ev-card.org-past-card {
    opacity: .78;
}

.org-ev-card.org-past-card .org-ev-card__img::after {
    content: 'Passé';
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-family: var(--iz-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(14, 13, 12, .7);
    color: rgba(255, 255, 255, .65);
    padding: 4px 10px;
    border-radius: var(--iz-radius-pill);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.org-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 32px;
    color: var(--iz-muted);
}

.org-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: .4;
}

.org-empty-state p {
    font-family: var(--iz-font-heading);
    font-size: 18px;
    font-weight: 600;
}

@keyframes org-fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes org-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .org-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        align-items: center;
    }

    .org-avatar-wrap {
        margin: 0 auto;
    }

    .org-meta {
        justify-content: center;
    }

    .org-socials {
        justify-content: center;
    }

    .org-filter-tabs {
        justify-content: center;
    }
}