/* ==================================================
   BLOC — HERO COMPACT
================================================== */

/* Éléments espacés de 12 px, comme dans la maquette.

   Le rembourrage haut n'est plus celui du Figma (40 px) : il réserve la
   place du logo, qui déborde de l'en-tête et recouvrait le surtitre.
   La hauteur plancher est partagée avec l'en-tête de l'espace membre —
   deux bandeaux d'ouverture de même nature, donc de même hauteur. */
.hero_small {
    display: flex;
    align-items: center;
    min-height: var(--v-hero-compact);
    padding-top: calc(var(--v-logo-debord) + 24px);
    padding-bottom: var(--v-section-y);
    /* --fond vient du réglage du bloc, dans la palette des entêtes. */
    background: var(--fond, var(--v-turquoise-100));
    /* Les motifs de fond débordent : le bandeau les rogne. */
    position: relative;
    overflow: hidden;
}

/* Le conteneur doit s'étirer : sans cela, le centrage vertical du bandeau
   le réduirait à la largeur de son texte. Il passe devant les motifs. */
.hero_small > .container {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Sur un fond foncé — turquoise, violet, orange, rose — le texte sombre
   ne se lit plus : il passe en blanc, le surtitre en jaune, comme sur
   l'entête simple. */
.hero_small.v-hero--fonce,
.hero_small.v-hero--fonce .v-titre,
.hero_small.v-hero--fonce .v-fil,
.hero_small.v-hero--fonce .hero_small__accroche {
    color: var(--v-texte-inverse);
}

.hero_small.v-hero--fonce .v-eyebrow {
    color: var(--v-jaune);
}

.hero_small__titre {
    margin-top: 12px;
}

.hero_small__accroche {
    max-width: 60ch;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* Le fil d'Ariane reprend le style Corps/Petit : 12 px, séparateurs à 8 px. */
.hero_small .fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.hero_small__media {
    margin: 0;
}

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

@media (max-width: 767px) {
    /* Sur mobile le logo ne déborde plus et la hauteur plancher n'a plus
       de sens : le bandeau reprend la taille de son contenu. */
    .hero_small {
        min-height: 0;
        padding-top: var(--v-section-y-serre);
        padding-bottom: var(--v-section-y-serre);
    }
}