/*
 * WEE Ticker — Bandeau d'annonces style TV (WP Events Engine)
 * Premium animation CSS-pure · WCAG 2.1 AA · prefers-reduced-motion safe
 */

/* ═══════════════════════════════════════════════════════════════
   PROTECTION DU TITRE DE SECTION
   Garantit que le titre "Les événements à venir !" reste
   toujours visible au-dessus de tout overlay de chargement.
═══════════════════════════════════════════════════════════════ */
.elementor-widget-heading .elementor-heading-title,
.wee-always-visible {
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION DE DÉFILEMENT
═══════════════════════════════════════════════════════════════ */
@keyframes wee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
   BANDEAU — STRUCTURE
═══════════════════════════════════════════════════════════════ */
.wee-ticker {
    display: flex;
    align-items: stretch;
    /* La largeur est définie dans events.css pour hériter des mêmes variables CSS */
    width: 100%;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.2;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 100;
    min-height: 52px; /* WCAG touch target */
}

/* ── Label gauche ─────────────────────────────────────────────── */
.wee-ticker__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0 1.1rem;
    white-space: nowrap;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border-radius: 0.75rem 0 0 0.75rem;
}

.wee-ticker__label::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 15%;
    height: 70%;
    width: 2px;
    background: rgba(255, 255, 255, .3);
}

.wee-ticker__label-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ── Viewport + piste ─────────────────────────────────────────── */
.wee-ticker__viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.wee-ticker__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: wee-scroll linear infinite;
    /* duration injecté inline via PHP : style="animation-duration:Xs" */
    gap: 0;
    padding: 0;
}

/* Pause on hover (optionnel — l'utilisateur peut utiliser le bouton) */
.wee-ticker:hover .wee-ticker__track {
    animation-play-state: paused;
}

/* Pause via bouton (classe JS) */
.wee-ticker.is-paused .wee-ticker__track {
    animation-play-state: paused;
}

/* ── Items ────────────────────────────────────────────────────── */
.wee-tick__item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .25rem;
}

.wee-tick__badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.wee-tick__title {
    font-weight: 700;
    font-size: 1.05rem;
}

.wee-tick__dot {
    opacity: .5;
    font-size: 1.1rem;
    margin: 0 .2rem;
}

.wee-tick__date {
    font-size: 1rem;
    font-style: italic;
    opacity: .9;
}

.wee-tick__time {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.wee-tick__thanks {
    font-size: 1rem;
    opacity: .9;
    font-weight: 500;
}

.wee-tick__sep {
    font-size: .7rem;
    opacity: .45;
    letter-spacing: .2em;
    margin: 0 .6rem;
}

/* ── Bouton pause ─────────────────────────────────────────────── */
.wee-ticker__pause {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0 0.75rem 0.75rem 0;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .15s ease;
    padding: 0;
    color: inherit;
}

.wee-ticker__pause:hover,
.wee-ticker__pause:focus-visible {
    background: rgba(255, 255, 255, .12);
    outline: 2px solid rgba(255, 255, 255, .6);
    outline-offset: -2px;
}

.wee-ticker__pause[aria-pressed="true"] .wee-ticker__pause-icon::after {
    content: '▶';
}
.wee-ticker__pause[aria-pressed="true"] .wee-ticker__pause-icon {
    font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   THÈMES
═══════════════════════════════════════════════════════════════ */

/* ── ALERT (rouge — urgence, annulation) ──────────────────────── */
.wee-ticker--alert {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 40%, #b91c1c 100%);
    color: #fff;
}
.wee-ticker--alert .wee-ticker__label {
    background: #7f1d1d;
    color: #fecaca;
}
.wee-ticker--alert .wee-tick__badge {
    background: rgba(0, 0, 0, .25);
    color: #fef2f2;
    border: 1px solid rgba(255, 255, 255, .2);
}
.wee-ticker--alert .wee-tick__badge--info {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ── INFO (bleu — informatif) ─────────────────────────────────── */
.wee-ticker--info {
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 40%, #1d4ed8 100%);
    color: #fff;
}
.wee-ticker--info .wee-ticker__label {
    background: #1e3a8a;
    color: #bfdbfe;
}
.wee-ticker--info .wee-tick__badge {
    background: rgba(0, 0, 0, .2);
    color: #eff6ff;
    border: 1px solid rgba(255, 255, 255, .2);
}
.wee-ticker--info .wee-tick__badge--info {
    background: rgba(255, 255, 255, .2);
}

/* ── DARK (neutre premium) ────────────────────────────────────── */
.wee-ticker--dark {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #e2e8f0;
}
.wee-ticker--dark .wee-ticker__label {
    background: #020617;
    color: #94a3b8;
}
.wee-ticker--dark .wee-tick__badge {
    background: #dc2626;
    color: #fff;
    border: none;
}
.wee-ticker--dark .wee-tick__badge--info {
    background: #2563eb;
}
.wee-ticker--dark .wee-tick__title {
    color: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion
   Affichage statique à la place de l'animation
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wee-ticker__viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wee-ticker__track {
        animation: none !important;
        /* Afficher uniquement la 1re moitié (les items non-dupliqués) */
    }
    .wee-ticker__pause {
        display: none; /* inutile sans animation */
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .wee-ticker {
        font-size: .95rem;
    }
    .wee-ticker__label-text {
        display: none;
    }
    .wee-ticker__label {
        padding: 0 .7rem;
    }
    .wee-tick__title {
        font-size: .95rem;
    }
}