/* ==================================================
   BLOC — BANDEAU NEWSLETTER
================================================== */

/* Figma met le texte et le formulaire côte à côte, pas l'un sous l'autre :
   carte à 30/36 px, 32 px entre les deux colonnes, angles à 20 px. */
.bandeau_newsletter__bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 30px 36px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-xl);
}

.bandeau_newsletter__texte {
    flex: 1 1 420px;
}

.bandeau_newsletter__accroche {
    margin: 8px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
    max-width: 62ch;
}

.bandeau_newsletter__form {
    flex: 0 1 397px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bandeau_newsletter__champ {
    flex: 1 1 240px;
    padding: 12px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.bandeau_newsletter__champ:focus {
    outline: 2px solid var(--v-turquoise-400);
    outline-offset: 1px;
}

.bandeau_newsletter__champ::placeholder {
    color: var(--v-texte-meta);
}

/* La mention légale passe sous les deux colonnes. */
.bandeau_newsletter__mention {
    flex: 1 1 100%;
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-meta);
}

/* Retour de l'inscription, au-dessus de la mention légale. */
.bandeau_newsletter__message {
    flex: 1 1 100%;
    margin: 0 0 8px;
    padding: 10px 14px;
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
}

.bandeau_newsletter__message--succes {
    background: var(--v-succes-fond);
    color: var(--v-succes-texte);
}

.bandeau_newsletter__message--erreur {
    background: var(--v-alerte-fond);
    color: var(--v-alerte-texte);
}

@media (max-width: 767px) {
    .bandeau_newsletter__bloc { padding: 24px 20px; }
    .bandeau_newsletter__form { flex-direction: column; }
}