/* ==================================================
   BLOC — ENTÊTE DE L'AGENDA
   D'après la maquette 381:1837
================================================== */

/* Le logo rond du header déborde sur ce qui suit : sans cette réserve en
   haut, le fil d'Ariane passe derrière lui.

   La réserve se lit sur --v-logo-debord au lieu d'être écrite en dur.
   C'est ce qui manquait : 4rem valaient 64 px pour un débordement qui
   atteint 92 px sur les grands écrans, et le fil d'Ariane finissait sous
   le cercle. La variable suit les trois tailles de logo, celle du
   défilement comprise.

   Le max() garde les 4rem d'origine là où le logo demande moins : on ne
   réserve que ce qui manque, comme le fait l'en-tête pour les blocs qui
   ne sont pas des hero. */
.hero_agenda {
    background: var(--v-turquoise-100);
    padding: max(4rem, calc(var(--v-logo-debord) + 24px)) 0 3rem;
}

.hero_agenda__eyebrow {
    margin: 0 0 0.5rem;
}

.hero_agenda__titre {
    margin: 0 0 0.75rem;
}

.hero_agenda__accroche {
    max-width: 38em;
    font-family: var(--v-font-corps);
    font-size: 1rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
    margin: 0 0 1.75rem;
}

/* LES TROIS REPÈRES */

.hero_agenda__reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
}

.hero_agenda__repere {
    margin: 0;
}

.hero_agenda__repere dt {
    font-family: var(--v-font-titre);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-titre);
}

.hero_agenda__repere dd {
    margin: 2px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

/* VISUEL */

.hero_agenda__visuel {
    margin: 0;
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.hero_agenda__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .hero_agenda {
        padding: 2rem 0 2.5rem;
    }

    /* Les trois repères côte à côte deviennent illisibles sous 480 px :
       ils passent en colonne, avec moins d'écart. */
    .hero_agenda__reperes {
        gap: 1.25rem;
    }

    .hero_agenda__repere dt {
        font-size: 1.1875rem;
    }
}

@media (max-width: 991px) {
    /* Le plancher de cette réserve a été dessiné pour un logo qui
       déborde de l'en-tête. Sous 992 px il ne déborde plus — la
       maquette le ramène à un rond de 36 px dans la barre — et
       --v-logo-debord vaut zéro : le plancher ne protège donc plus
       rien, il ouvre juste une bande vide au-dessus du titre. */
    .hero_agenda {
        padding-top: 48px;
    }
}