/*
 * Section Déroulé de la soirée (flexible-event-deroule). Namespacé, dépend
 * de event-base.css (variables --event-*).
 * Pas de description.txt fournie pour cette section (fichier vide) : typo
 * et proportions reprises des conventions déjà établies (Hero, Pourquoi
 * venir) plutôt qu'une fiche technique dédiée — à ajuster si besoin au
 * retour utilisateur.
 */

.flexible-event-deroule__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-family: var(--event-font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--event-color-accent);
}

.flexible-event-deroule__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--event-color-accent);
    flex-shrink: 0;
}

/* Bleu accent illisible sur fond bleu foncé : bascule en blanc, comme le
   reste du texte de la section (cf. --event-section-color-text). */
.flexible-event-section--bg-dark .flexible-event-deroule__eyebrow {
    color: var(--event-color-white);
}

.flexible-event-section--bg-dark .flexible-event-deroule__eyebrow::before {
    background: var(--event-color-white);
}

/* text-align: left explicite — sinon la règle globale non scopée
   `h2 { text-align: center; }` (style/header.css) s'applique. */
.flexible-event-deroule__title {
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 32px;
    color: var(--event-section-color-text, var(--event-color-text));
    text-align: left;
}

.flexible-event-deroule__subtitle {
    font-family: var(--event-font-body);
    font-size: 18px;
    margin: 0 0 40px;
    color: var(--event-section-color-text, var(--event-color-text-muted));
}

/* flex-start (pas stretch) : l'encadré ne doit plus être étiré à la hauteur
   de la frise — avec un programme long, cela l'étirait sur toute cette
   hauteur et poussait son contenu (titre en haut, carte tout en bas via le
   margin-top: auto d'origine) en laissant un grand vide entre les deux. Le
   sticky sur .flexible-event-deroule__access (ci-dessous) gère maintenant
   ce cas : l'encadré garde sa propre hauteur et reste visible à l'écran
   pendant que la frise défile à côté. */
.flexible-event-deroule__row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.flexible-event-deroule__row .flexible-event-deroule__timeline {
    flex: 1 1 55%;
}

.flexible-event-deroule__row .flexible-event-deroule__access {
    flex: 1 1 45%;
}

.flexible-event-deroule__row--full .flexible-event-deroule__timeline {
    flex: 1 1 100%;
    max-width: 720px;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */

.flexible-event-deroule__timeline {
    display: flex;
    flex-direction: column;
}

/* Porte la frise (gap réel entre étapes + ligne verticale ::before) : séparé
   de .timeline pour que la ligne ne s'étende que sur la hauteur réelle des
   étapes. */
.flexible-event-deroule__timeline-items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.flexible-event-deroule__timeline-item {
    position: relative;
    padding-left: 40px;
}

.flexible-event-deroule__timeline-items::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--event-color-accent);
    opacity: 0.3;
}

/* Pastille plus grosse, remplie (pas de fond blanc + anneau) : un seul rond
   plein, cf. maquette. */
.flexible-event-deroule__timeline-marker {
    position: absolute;
    left: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--event-color-accent);
}

.flexible-event-deroule__timeline-time {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 16px;
    border-radius: 12px;
    background: var(--event-color-accent);
    color: var(--event-color-white);
    font-family: var(--event-font-body);
    font-weight: 700;
    font-size: 14px;
}

.flexible-event-deroule__timeline-item-title {
    margin: 0 0 4px;
    font-family: var(--event-font-body);
    font-weight: 800;
    font-size: 18px;
    color: var(--event-section-color-text, var(--event-color-text));
}

.flexible-event-deroule__timeline-item-text {
    margin: 0;
    font-family: var(--event-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--event-color-text-muted);
}

/* ── Accessibilité ────────────────────────────────────────────────────── */

/* sticky : avec un programme long, la frise (à côté) peut être bien plus
   haute que l'encadré — sans ça, l'encadré restait étiré sur toute cette
   hauteur (titre collé en haut, carte tout en bas, grand vide entre les
   deux). Il garde maintenant sa hauteur naturelle et reste visible à
   l'écran pendant que la frise défile.
   top: réutilise --event-hero-header-offset (posée par
   js/landing-event-fold.js sur <html>, hauteur réelle du header + marge de
   sécurité) plutôt qu'une valeur fixe arbitraire — sinon, quand le header
   flottant réapparaît au scroll (cf. header.css, classe .fixed), il
   recouvre l'encadré resté collé trop haut sous top: 24px. */
.flexible-event-deroule__access {
    position: sticky;
    top: var(--event-hero-header-offset, 180px);
    align-self: flex-start;
    background: var(--event-color-navy);
    border-radius: var(--event-radius-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

/* --event-color-navy vaut désormais la même couleur que --event-color-blue-dark
   (#002266, cf. correction de couleur "bleu foncé") : sur une section en fond
   foncé, la carte devient invisible (même teinte que le fond derrière). Même
   traitement "verre dépoli" que les badges de la section Pourquoi venir. */
.flexible-event-section--bg-dark .flexible-event-deroule__access {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.flexible-event-deroule__access-title {
    margin: 0 0 20px;
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 24px;
    color: var(--event-color-white);
}

.flexible-event-deroule__access-infos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.flexible-event-deroule__access-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--event-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.flexible-event-deroule__access-info-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
}

.flexible-event-deroule__access-map {
    display: block;
    border-radius: calc(var(--event-radius-card) - 4px);
    overflow: hidden;
    line-height: 0;
}

.flexible-event-deroule__access-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Grand écran (≥24", ≥1920px) ──────────────────────────────────────── */

@media (min-width: 1920px) {
    .flexible-event-deroule__inner {
        max-width: 1600px;
    }

    .flexible-event-deroule__title {
        font-size: 40px;
    }
}

/* ── Tablette (~768-1199px) ───────────────────────────────────────────── */

@media (max-width: 1199px) {
    .flexible-event-deroule__row {
        flex-direction: column;
    }

    .flexible-event-deroule__row .flexible-event-deroule__timeline,
    .flexible-event-deroule__row .flexible-event-deroule__access {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }

    /* Empilé en colonne : plus de sticky, l'encadré suit le flux normal
       sous la frise comme n'importe quel bloc. */
    .flexible-event-deroule__access {
        position: static;
    }

    .flexible-event-deroule__title {
        font-size: 28px;
    }
}

/* ── Mobile (<768px) ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .flexible-event-deroule__title {
        font-size: 24px;
    }

    .flexible-event-deroule__subtitle {
        margin-bottom: 24px;
    }

    .flexible-event-deroule__row {
        gap: 40px;
    }

    .flexible-event-deroule__access {
        padding: 20px;
    }
}