/**
 * Event Manager Pro — Public CSS — Lacyme Design
 * All selectors scoped under #emp-event-manager for theme isolation.
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
#emp-event-manager {
    --emp-primary:      #FF4D29;
    --emp-dark:         #37141A;
    --emp-beige:        #F2E8DF;
    --emp-maroon:       #5A2A2D;
    --emp-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --emp-font-serif:   'EB Garamond', Georgia, serif;
    --emp-font-playfair:'Playfair Display', Georgia, serif;
    --emp-font-poppins: 'Poppins', sans-serif;
    --emp-radius:       8px;
    --emp-shadow-lg:    0 12px 40px rgba(55,20,26,.16);
    --emp-border:       rgba(55,20,26,.15);
    --emp-text:         #5A2A2D;
    --emp-text-muted:   rgba(90,42,45,.55);
    --emp-success-bg:   #f0fdf4;
    --emp-success-text: #166534;
    --emp-error-bg:     #fef2f2;
    --emp-error-text:   #991b1b;
    --emp-warn-bg:      #fff7ed;
    --emp-warn-text:    #92400e;
}

/*
 * L'attribut HTML [hidden] impose display:none, mais les sélecteurs
 * scoped (#emp-event-manager .emp-success-card { display:flex }) ont
 * une spécificité plus haute et l'écrasaient — la carte succès était
 * donc toujours visible. Cette règle rétablit la priorité correcte.
 */
#emp-event-manager [hidden] {
    display: none !important;
}

/* ── Wrapper reset + base ───────────────────────────────────────────────────── */
#emp-event-manager {
    font-family:   var(--emp-font) !important;
    font-size:     16px;
    line-height:   1.5;
    color:         var(--emp-text);
    background:    var(--emp-beige);
    /* Full-bleed technique: breaks out of WP content column */
    width:         100vw;
    max-width:     100vw;
    position:      relative;
    left:          50%;
    margin-left:   -50vw;
    margin-right:  -50vw;
    padding:       4rem 6vw;
    box-sizing:    border-box;
    border-radius: 0;
    overflow:      hidden;
}

#emp-event-manager .emp-layout {
    position: relative;
}

/* Reset all direct children typography influenced by theme */
#emp-event-manager *,
#emp-event-manager *::before,
#emp-event-manager *::after {
    box-sizing: border-box;
}

#emp-event-manager p {
    font-weight: 400 !important;
    margin:      0;
}

#emp-event-manager a {
    color: var(--emp-primary);
    text-decoration: none;
}

/* ── Two-column grid ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-layout {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   3.5rem !important;
    align-items:           start !important;
}

#emp-event-manager .emp-layout__form {
    position: sticky;
    top:      2rem;
}

/* ── LEFT COLUMN: info panel ────────────────────────────────────────────────── */
#emp-event-manager .emp-info-panel {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    font-family:    var(--emp-font-serif) !important;
}

#emp-event-manager .emp-logo {
    margin-bottom: .5rem;
}

#emp-event-manager .emp-logo__img {
    max-width:  140px;
    max-height: 64px;
    object-fit: contain;
    display:    block;
}

/* Lien wrapper — sans decoration */
#emp-event-manager .emp-logo__link {
    display:         inline-block;
    text-decoration: none !important;
    outline:         none;
}

/* Animation d'entrée : fade-in + légère montée */
@keyframes empLogoIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

#emp-event-manager .emp-logo__img--animated {
    animation:         empLogoIn .7s cubic-bezier(.22,.61,.36,1) both;
    transition:        transform .35s cubic-bezier(.22,.61,.36,1),
                       filter .35s ease;
    will-change:       transform;
}

/* Zoom doux au survol */
#emp-event-manager .emp-logo__link:hover .emp-logo__img--animated,
#emp-event-manager .emp-logo__link:focus-visible .emp-logo__img--animated {
    transform: scale(1.07);
    filter:    brightness(1.04);
}

/* Sur-titre */
#emp-event-manager .emp-surtitle {
    display:        block;
    font-family:    var(--emp-font-serif) !important;
    font-size:      .75rem !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .2em;
    color:          var(--emp-primary) !important;
    margin:         0 0 .5rem;
    line-height:    1;
}

/* Event title: big serif, mixed weight handled via CSS */
#emp-event-manager .emp-event-title {
    font-family: var(--emp-font-serif) !important;
    font-size:   clamp(2.2rem, 5vw, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color:       var(--emp-dark) !important;
    margin:      0 0 1rem !important;
}

/* Italic word inside title gets primary color */
#emp-event-manager .emp-event-title em {
    font-style: italic !important;
    color:      var(--emp-primary) !important;
    font-weight: 700 !important;
}

/* Description */
#emp-event-manager .emp-event-description {
    font-size:   1.05rem;
    line-height: 1.7;
    color:       var(--emp-maroon);
    max-width:   480px;
    margin-bottom: .5rem;
}

#emp-event-manager .emp-event-description p {
    font-weight: 400 !important;
    margin:      0 0 .5rem !important;
}

/* Info block: date / time / location */
#emp-event-manager .emp-event-info {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    padding:        1.5rem 0;
    border-top:     1px solid var(--emp-border);
    border-bottom:  1px solid var(--emp-border);
    margin-top:     .5rem;
}

#emp-event-manager .emp-info-row {
    display:     flex;
    align-items: flex-start;
    gap:         1rem;
}

#emp-event-manager .emp-info-icon {
    font-size:   1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top:  .1rem;
}

#emp-event-manager .emp-info-main {
    font-weight: 700 !important;
    font-size:   1.05rem !important;
    margin:      0 0 .2rem !important;
    color:       var(--emp-dark) !important;
    line-height: 1.3 !important;
}

#emp-event-manager .emp-info-sub {
    font-size:      .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--emp-text-muted);
    font-style:     italic;
    margin:         0 !important;
}

/* Poppins pour les données date / heure / lieu (lisibilité / modernité) */
#emp-event-manager .emp-event-info .emp-info-main {
    font-family: var(--emp-font-poppins) !important;
}

/* Navigation links */
#emp-event-manager .emp-nav-links {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    margin-top: .75rem;
}

#emp-event-manager .emp-nav-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 14px;
    border-radius:   50px;
    border:          1px solid var(--emp-border);
    background:      #fff;
    color:           var(--emp-maroon) !important;
    font-size:       .78rem;
    font-weight:     600;
    text-decoration: none !important;
    transition:      border-color .2s, color .2s;
    line-height:     1.6;
}

#emp-event-manager .emp-nav-link:hover {
    border-color: var(--emp-primary);
    color:        var(--emp-primary) !important;
}

#emp-event-manager .emp-nav-link img,
#emp-event-manager .emp-nav-link svg {
    display:    inline-block;
    flex-shrink: 0;
}

/* ── RIGHT COLUMN: form card ────────────────────────────────────────────────── */
#emp-event-manager .emp-form-card {
    background: #fff;
    padding:    2.75rem 3rem;
    box-shadow: var(--emp-shadow-lg);
    position:   relative;
    overflow:   hidden;
    /* No border-radius = flush with screenshot */
}

#emp-event-manager .emp-form-card__deco {
    position:       absolute;
    top:            -10px;
    right:          -10px;
    width:          110px;
    opacity:        .07;
    pointer-events: none;
    user-select:    none;
}

#emp-event-manager .emp-form-card__title {
    font-family: var(--emp-font-playfair) !important;
    font-style:  italic !important;
    font-size:   1.8rem !important;
    font-weight: 700 !important;
    color:       var(--emp-dark) !important;
    margin:      0 0 1.75rem !important;
    line-height: 1.2 !important;
}

/* Spots badge */
#emp-event-manager .emp-spots-left {
    display:       inline-block;
    background:    var(--emp-primary);
    color:         #fff !important;
    padding:       .3rem .9rem;
    border-radius: 999px;
    font-size:     .82rem;
    font-weight:   600;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

/* ── Form ───────────────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

#emp-event-manager .emp-form-row {
    display:   flex;
    gap:       1.5rem;
    flex-wrap: wrap;
}

#emp-event-manager .emp-form-row--half > .emp-form-group {
    flex:      1 1 calc(50% - .75rem);
    min-width: 120px;
}

#emp-event-manager .emp-form-group {
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
}

/* ── Underline inputs ───────────────────────────────────────────────────────── */
#emp-event-manager .emp-input {
    appearance:    none !important;
    -webkit-appearance: none !important;
    background:    transparent !important;
    border:        none !important;
    border-bottom: 1.5px solid rgba(55,20,26,.2) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       .75rem 0 !important;
    width:         100% !important;
    font-size:     .95rem !important;
    font-family:   var(--emp-font) !important;
    color:         var(--emp-dark) !important;
    outline:       none !important;
    transition:    border-color .25s;
    line-height:   1.5 !important;
}

#emp-event-manager .emp-input::placeholder {
    color: var(--emp-text-muted) !important;
}

#emp-event-manager .emp-input:focus {
    border-bottom-color: var(--emp-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

#emp-event-manager .emp-input.emp-input--error {
    border-bottom-color: #F44336 !important;
}

#emp-event-manager .emp-error {
    color:      #F44336;
    font-size:  .78rem;
    min-height: 1em;
    display:    block;
}

#emp-event-manager .emp-checking {
    color:     var(--emp-text-muted);
    font-size: .78rem;
}

/* ── Custom checkbox ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-group--checkbox {
    flex-direction: row;
    align-items:    flex-start;
    gap:            .5rem;
}

#emp-event-manager .emp-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         .65rem;
    font-size:   .9rem;
    cursor:      pointer;
    user-select: none;
    line-height: 1.4;
    font-weight: 400 !important;
}

/* Hide native checkbox */
#emp-event-manager .emp-checkbox-label input[type="checkbox"],
#emp-event-manager input[type="checkbox"].emp-hidden-checkbox {
    position: absolute !important;
    opacity:  0 !important;
    width:    0 !important;
    height:   0 !important;
    pointer-events: none;
}

/* Custom box */
#emp-event-manager .emp-checkmark {
    flex-shrink: 0;
    display:     inline-block;
    width:       18px;
    height:      18px;
    min-width:   18px;
    border:      1.5px solid rgba(55,20,26,.4);
    background:  #fff;
    position:    relative;
    top:         1px;
    transition:  border-color .2s;
}

#emp-event-manager .emp-checkbox-label:has(input[type="checkbox"]:checked) .emp-checkmark {
    border-color: var(--emp-primary);
}

#emp-event-manager .emp-checkbox-label:has(input[type="checkbox"]:checked) .emp-checkmark::after {
    content:     '✓';
    position:    absolute;
    left:        2px;
    top:         -2px;
    color:       var(--emp-primary);
    font-weight: 700;
    font-size:   13px;
    line-height: 1;
}

#emp-event-manager .emp-rgpd-group {
    flex-direction: column;
    align-items:    flex-start;
}

/* ── Delegate fields ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-delegate-fields {
    background:    var(--emp-beige);
    border-radius: var(--emp-radius);
    padding:       1rem 1.25rem;
}

/* ── Submit button ──────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-actions {
    margin-top: .25rem;
}

#emp-event-manager .emp-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             .6rem !important;
    padding:         1.05rem 2.5rem !important;
    border-radius:   50px !important;
    font-size:       .82rem !important;
    font-weight:     700 !important;
    letter-spacing:  .1em !important;
    text-transform:  uppercase !important;
    border:          none !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    line-height:     1 !important;
    transition:      transform .3s cubic-bezier(.175,.885,.32,1.275),
                     box-shadow .3s ease;
}

#emp-event-manager .emp-btn--primary {
    background: var(--emp-primary) !important;
    color:      #fff !important;
}

#emp-event-manager .emp-btn--primary:hover {
    transform:  scale(1.04) !important;
    box-shadow: 0 10px 28px rgba(255,107,53,.3) !important;
}

#emp-event-manager .emp-btn--primary:active {
    transform: scale(.97) !important;
}

#emp-event-manager .emp-btn--primary:disabled,
#emp-event-manager .emp-btn--primary[disabled] {
    opacity:    .55;
    cursor:     not-allowed !important;
    transform:  none !important;
    box-shadow: none !important;
}

#emp-event-manager .emp-btn--waitlist {
    background: #FF9800 !important;
    color:      #fff !important;
}

#emp-event-manager .emp-btn--waitlist:hover {
    background: #e68900 !important;
}

/* SVG arrow inside button */
#emp-event-manager .emp-btn svg {
    flex-shrink: 0;
}

/* ── Form feedback ──────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-message {
    border-radius: var(--emp-radius);
    padding:       .85rem 1rem;
    font-size:     .9rem;
    line-height:   1.5;
    margin-top:    .75rem;
}

#emp-event-manager .emp-form-message--success {
    background: var(--emp-success-bg);
    color:      var(--emp-success-text);
    border:     1px solid #bbf7d0;
}

#emp-event-manager .emp-form-message--error {
    background:  var(--emp-error-bg);
    color:       var(--emp-error-text);
    border:      1px solid #fca5a5;
    border-left: 4px solid #F44336;
}

#emp-event-manager .emp-form-message--waiting {
    background:  var(--emp-warn-bg);
    color:       var(--emp-warn-text);
    border:      1px solid #fcd34d;
    border-left: 4px solid #FF9800;
}

/* ── Success card ───────────────────────────────────────────────────────────── */
#emp-event-manager .emp-success-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        3rem 1.5rem;
    gap:            1rem;
    animation:      empSlideUp .5s ease-out;
}

@keyframes empSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

#emp-event-manager .emp-success-card__logo {
    height:  40px;
    opacity: .15;
}

#emp-event-manager .emp-success-card__title {
    font-family: var(--emp-font-serif) !important;
    font-style:  italic !important;
    font-size:   1.7rem !important;
    color:       var(--emp-primary) !important;
    margin:      0 !important;
}

#emp-event-manager .emp-success-card__text {
    color:       var(--emp-text-muted);
    font-size:   1rem;
    line-height: 1.6;
    margin:      0 !important;
}

/* ── Full / closed message ──────────────────────────────────────────────────── */
#emp-event-manager .emp-full-message__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    text-align:     center;
    padding:        2rem 1rem;
    color:          var(--emp-text-muted);
}

#emp-event-manager .emp-full-message__inner svg { opacity: .4; }

/* ── Waitlist notice ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-waitlist-notice {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    background:    var(--emp-warn-bg);
    color:         var(--emp-warn-text);
    border:        1px solid #fcd34d;
    border-left:   4px solid #FF9800;
    border-radius: var(--emp-radius);
    padding:       .85rem 1rem;
    margin-bottom: 1.25rem;
    font-size:     .9rem;
    line-height:   1.5;
}

#emp-event-manager .emp-waitlist-notice p {
    margin: 0 !important;
}

/* ── Responsive — tablet ≤ 900px ────────────────────────────────────────────── */
@media (max-width: 900px) {

    /*
     * Désactive le full-bleed (left/margin-left/-50vw) qui décale
     * le bloc hors de l'écran lorsque la colonne de contenu est
     * plus étroite que le viewport. Sur ≤900px, la colonne est
     * déjà ~100 % du viewport : pas besoin du trucage.
     */
    #emp-event-manager {
        width:        100% !important;
        max-width:    100% !important;
        left:         auto !important;
        margin-left:  0 !important;
        margin-right: 0 !important;
        padding:      2.5rem 1.5rem;
        box-sizing:   border-box;
    }

    /* Passe en colonne unique */
    #emp-event-manager .emp-layout {
        grid-template-columns: 1fr !important;
        gap:                   2.5rem !important;
    }

    /* Le formulaire n'est plus sticky en colonne unique */
    #emp-event-manager .emp-layout__form {
        position: static;
    }

    /*
     * En colonne unique, le panneau info est centré horizontalement.
     * S'applique dès 900px (tablette portrait inclus) et non pas
     * seulement à 600px, car le layout est déjà mono-colonne ici.
     */
    #emp-event-manager .emp-info-panel {
        align-items: center;
        text-align:  center;
    }

    /* Le logo est centré dès le passage en colonne unique */
    #emp-event-manager .emp-logo {
        display:         flex;
        justify-content: center;
    }

    #emp-event-manager .emp-surtitle,
    #emp-event-manager .emp-event-title,
    #emp-event-manager .emp-event-description {
        text-align: center;
    }

    #emp-event-manager .emp-event-description {
        max-width: 100%;
    }

    /*
     * L'info block (date / heure / lieu) doit s'étirer sur toute
     * la largeur pour que ses bordures top/bottom soient pleines.
     * Sans width:100%, align-items:center sur le parent le ferait
     * se rétrécir à sa largeur de contenu.
     */
    #emp-event-manager .emp-event-info {
        width: 100%;
    }

    /* Aligne les lignes icône + texte à gauche sur mobile (collé à gauche) */
    #emp-event-manager .emp-info-row {
        justify-content: flex-start;
    }

    #emp-event-manager .emp-info-main,
    #emp-event-manager .emp-info-sub {
        text-align: left; /* le texte reste lisible aligné à gauche dans la puce */
    }

    /* Liens nav centrés */
    #emp-event-manager .emp-nav-links {
        justify-content: center;
    }
}

/* ── Responsive — mobile ≤ 600px ────────────────────────────────────────────── */
@media (max-width: 600px) {

    #emp-event-manager {
        padding: 2rem 1.25rem;
    }

    /* Taille de titre réduite sur mobile */
    #emp-event-manager .emp-event-title {
        font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    }

    /* Info rows : réduit le gap sur petit écran */
    #emp-event-manager .emp-event-info {
        gap: 1.25rem;
    }

    #emp-event-manager .emp-info-row {
        gap: .75rem;
    }

    /* Carte formulaire moins de padding */
    #emp-event-manager .emp-form-card {
        padding: 2rem 1.25rem 2.5rem;
    }

    /* Champs nom/prénom en pleine largeur */
    #emp-event-manager .emp-form-row--half > .emp-form-group {
        flex: 1 1 100% !important;
    }

    /* Inputs : zone tactile minimum 44px (Apple HIG) */
    #emp-event-manager .emp-input {
        min-height: 44px !important;
        padding:    .875rem 0 !important;
    }

    /* Bouton pleine largeur + zone tactile large */
    #emp-event-manager .emp-btn {
        width:      100% !important;
        min-height: 52px !important;
    }

    /* Titre du formulaire légèrement réduit */
    #emp-event-manager .emp-form-card__title {
        font-size: 1.5rem !important;
    }
}