/* ==================================================
   BLOC — HERO SIMPLE
================================================== */

/* Figma : 96 px au-dessus, 56 px en dessous. L'asymétrie est voulue —
   un hero est toujours en tête de page, il respire plus haut que bas.

   Le haut garde ces 96 px, sauf quand le logo en demande davantage : il
   déborde de 92 px sur les grands écrans, et 96 ne laissaient que quatre
   pixels au fil d'Ariane, qui ouvre le bloc à gauche.

   D'où un max() plutôt qu'un simple calcul : la mesure de la maquette
   tient partout, et la réserve ne s'impose que là où elle dépasse — 116
   px au-delà de 1440. Un calcul seul aurait rabaissé le hero à 66 px sur
   les écrans intermédiaires, où le logo est plus petit : on aurait réglé
   le fil d'Ariane en dérangeant la maquette ailleurs. */
.hero_simple {
    padding-top: max(96px, calc(var(--v-logo-debord) + 24px));
    padding-bottom: 56px;
    /* --fond vient du réglage du bloc, dans la palette des entêtes. */
    background: var(--fond, var(--v-turquoise-400));
    color: var(--v-texte-inverse);
    position: relative;
    overflow: hidden;
}

/* Le contenu passe devant les motifs de fond (hero_motifs.css). */
.hero_simple > .container {
    position: relative;
    z-index: 1;
}

.hero_simple .v-eyebrow,
.hero_simple .v-titre,
.hero_simple .v-chapo {
    color: var(--v-texte-inverse);
}

.hero_simple__eyebrow {
    color: var(--v-jaune) !important;
}

/* Sur un fond clair — turquoise clair, jaune, blanc — le texte blanc
   disparaît. Une seule classe bascule l'ensemble, comme au slider. */
.hero_simple.v-hero--clair,
.hero_simple.v-hero--clair .v-titre,
.hero_simple.v-hero--clair .v-chapo {
    color: var(--v-texte-titre);
}

.hero_simple.v-hero--clair .hero_simple__eyebrow,
.hero_simple.v-hero--clair .v-fil {
    color: var(--v-texte-meta) !important;
}

/* Une pastille blanche ne se voit pas sur un fond clair. */
.hero_simple.v-hero--clair .hero_simple__pastille {
    background: var(--v-violet-500);
    border-color: var(--v-violet-500);
    color: var(--v-texte-inverse);
}

/* Figma espace les éléments du bloc texte de 14 px et donne 860 px à la
   colonne de texte. La borne était exprimée en caractères — 46, puis 62
   — et se battait avec la colonne Bootstrap qui la contient déjà. Une
   seule mesure, celle de la maquette. */
.hero_simple__accroche {
    max-width: 860px;
    margin-top: 14px;
}

.hero_simple__titre {
    margin-top: 14px;
}

/* RACCOURCIS */
.hero_simple__raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

/* Pastilles pleines : fond blanc, texte dans le bleu clair du hero. */
.hero_simple__pastille {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--v-blanc);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-fond-hero);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hero_simple__pastille:hover,
.hero_simple__pastille:focus-visible {
    background: var(--v-turquoise-100);
    border-color: var(--v-turquoise-100);
    color: var(--v-turquoise-700);
}

/* CHIFFRES CLÉS */
.hero_simple__chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 1.75rem 0 0;
}

.hero_simple__chiffre dt {
    font-family: var(--v-font-titre);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero_simple__chiffre dd {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    margin: 0;
    opacity: 0.9;
}

/* MÉDIA */
.hero_simple__media {
    margin: 0;
}

.hero_simple__media img {
    width: 100%;
    height: auto;
    border-radius: var(--v-radius-lg);
    display: block;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .hero_simple__media img {
        border-radius: var(--v-radius-md);
    }
}

@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_simple {
        padding-top: 48px;
    }
}

@media (max-width: 767px) {
    .hero_simple {
        padding-top: 56px;
        padding-bottom: var(--v-section-y-mobile);
    }
    .hero_simple__chiffres {
        gap: 1.5rem;
    }
    .hero_simple__chiffre dt {
        font-size: 1.5rem;
    }
}