/* ============================================================
   ÉVÉNEMENTS — Ruban verre, collé au bas du hero (landing)
   Marquee de pastilles avec vignette photo, pause au survol,
   reduced-motion safe. Données : API du planificateur (/api/events).
   ============================================================ */

.hero-evticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: stretch;
    height: 92px;
    /* Verre dépoli : fond très translucide pour laisser transparaître la vidéo floutée */
    background: rgba(8, 16, 38, .26);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Étiquette fixe (ne défile pas) */
.hero-evticker__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 20px;
    text-decoration: none;
    color: #7dd3fc;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: rgba(0, 180, 216, .07);
    border-right: 1px solid rgba(255, 255, 255, .12);
    transition: color .2s ease, background .2s ease;
}
.hero-evticker__label:hover { color: #fff; background: rgba(0, 180, 216, .14); }
.hero-evticker__label i, .hero-evticker__label svg { width: 16px; height: 16px; }

/* Zone défilante + fondu des bords */
.hero-evticker__viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}

.hero-evticker__track {
    display: flex;
    width: max-content;
    height: 100%;
    will-change: transform;
    animation: hero-evticker-scroll var(--evt-duration, 40s) linear infinite;
}
/* Pause au survol et au focus clavier */
.hero-evticker__viewport:hover .hero-evticker__track,
.hero-evticker__viewport:focus-within .hero-evticker__track { animation-play-state: paused; }

/* Deux groupes identiques + translateX(-50%) = boucle parfaitement continue */
@keyframes hero-evticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hero-evticker__group { display: flex; height: 100%; flex-shrink: 0; }

/* Pastille événement (vignette + texte) */
.hero-evticker__item {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    height: 100%;
    padding: 0 16px;
    text-decoration: none;
    transition: background .25s ease;
}
.hero-evticker__item:hover { background: rgba(255, 255, 255, .06); }

/* Vignette photo */
.hero-evticker__thumb {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hero-evticker__thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 180, 216, .22), rgba(0, 119, 182, .10));
}
.hero-evticker__thumb--ph i, .hero-evticker__thumb--ph svg { width: 24px; height: 24px; color: #7dd3fc; }

/* Texte */
.hero-evticker__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 220px;
}
.hero-evticker__date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7dd3fc;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hero-evticker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00b4d8;
    box-shadow: 0 0 8px rgba(0, 180, 216, .65);
    flex-shrink: 0;
}
.hero-evticker__cd {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 6px rgba(0, 180, 216, .4);
}
.hero-evticker__cd.is-today {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 1px 6px rgba(5, 150, 105, .45);
}
.hero-evticker__title {
    color: rgba(255, 255, 255, .95);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Repli statique : peu d'événements ou reduced-motion */
.hero-evticker__viewport--static {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
}
.hero-evticker__viewport--static .hero-evticker__track { animation: none; }

/* Quand le ruban est présent : remonter « Découvrir » et dégager le contenu */
.hero-v2--has-ticker .hero-scroll { bottom: 108px; }
.hero-v2--has-ticker .hero-content { padding-bottom: 128px; }

/* ── Transition hero → section ──────────────────────────────────────────
   On retire l'ancien fondu blanc de 200px (.hero-v2::after) qui montait sur
   la vidéo et transparaissait à travers le verre du ruban (brume blanchâtre).
   À la place : joint net + ombre douce posée par la section suivante.        */
.hero-v2::after { display: none; }

#story {
    position: relative;
    z-index: 1;
    box-shadow: 0 -10px 26px rgba(3, 4, 94, .12);
}

/* Fluid hand-off: a soft gradient on the story's leading edge eases the dark
   hero / events-ribbon into the light section instead of a hard colour jump.
   It lives on the section (not the pinned wrapper), so it only shows during the
   transition and scrolls away once you reach the pinned content. */
#story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom,
        rgba(8, 16, 38, 0.34) 0%,
        rgba(12, 22, 48, 0.14) 42%,
        rgba(243, 243, 244, 0) 100%);
    z-index: 3;
    pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .hero-evticker { height: 76px; }
    .hero-evticker__label { padding: 0 14px; font-size: 0.64rem; letter-spacing: 0.1em; }
    .hero-evticker__label span { display: none; }   /* icône seule sur mobile */
    .hero-evticker__item { padding: 0 12px; gap: 10px; }
    .hero-evticker__thumb { width: 50px; height: 50px; border-radius: 10px; }
    .hero-evticker__text { max-width: 168px; gap: 3px; }
    .hero-evticker__title { font-size: 0.78rem; -webkit-line-clamp: 1; }
    .hero-v2--has-ticker .hero-content { padding-bottom: 98px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-evticker__track { animation: none !important; }
    .hero-evticker__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hero-evticker__group--clone { display: none; }
}