/* Carte newsletter (LMI, 03/11/2026)
 *
 * Maquette : Maquettes-LMI-v2/1-Accueil-et-composants/Pied-de-page.html, bloc
 * « showNewsletter ». Carte au bleu de marque, texte blanc, deux colonnes — le discours
 * a gauche, le formulaire a droite — rayon 20px, padding 44px, gouttiere 32px, titre
 * Newsreader 34px, chapeau 16px en blanc attenue, champ et bouton a rayon 12px, bouton
 * blanc a texte bleu. La variante d'article (Newsletter-article.html) reprend le meme
 * dessin en plus compact : c'est ce que donne la regle mobile plus bas.
 *
 * ⚠️ Les couleurs viennent des jetons de l'EN-TETE, pas de --eldorado-accent : en mode
 * sombre l'accent s'eclaircit en #9db6ff, alors que --eldorado-en-tete-fond reste le bleu
 * de marque #1E3A8A dans les deux modes — exactement ce que fait la maquette, dont la
 * carte et l'en-tete partagent la meme couleur. Mesure : accent #1e3a8a (clair) / #9db6ff
 * (sombre), en-tete-fond #1e3a8a dans les deux.
 */
.eldorado-bib-newsletter {
    --lmi-nl-fond: var(--eldorado-en-tete-fond, #1e3a8a);
    --lmi-nl-texte: var(--eldorado-en-tete-texte, #ffffff);
    /* Le reset du theme impose « button, input, textarea { border-radius:
     * var(--border-radius) !important } » et le site a --border-radius: 0 : tous les
     * controles sont a angles vifs, alors que la maquette les arrondit. Plutot que de
     * surencherir en !important, on redefinit la variable sur la carte : le reset
     * continue de gagner, mais avec la valeur de la maquette. Portee a la carte seule. */
    --border-radius: 12px;
    /* Repere pour sortir le libelle et le pot de miel hors de l'ecran. */
    position: relative;
    background: var(--lmi-nl-fond);
    color: var(--lmi-nl-texte);
    border: 0;
    border-radius: 20px;
    padding: 44px;
    display: grid;
    row-gap: 16px;
}
.eldorado-bib-newsletter > h2 {
    margin: 0;
    font-family: var(--eldorado-police-titres);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.15;
    color: inherit;
}
/* #DCE4F5 dans la maquette, soit le blanc legerement rabattu sur le fond. */
.eldorado-bib-newsletter > p {
    margin: 0;
    font-size: 16px;
    color: color-mix(in srgb, var(--lmi-nl-texte) 86%, var(--lmi-nl-fond));
}

.eldorado-bib-newsletter form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
/* La maquette n'affiche pas de libelle : le placeholder porte l'intitule. On le sort de
 * l'ecran plutot que de le masquer, pour qu'il reste lu par les lecteurs d'ecran. */
.eldorado-bib-newsletter form > label {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Pot de miel anti-robot du coeur : il etait rendu visible (mesure : 32x22) au milieu de
 * la ligne du formulaire. Hors ecran, il garde sa fonction sans occuper de place. */
.eldorado-bib-newsletter input[name="eldorado_hp"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}
/* 160px et non 200 : dans un article la carte ne fait que 740px, donc 310px par colonne.
 * A 200px le bouton passait a la ligne (mesure : formulaire de 114px de haut au lieu de
 * 52). La maquette compacte (Newsletter-article.html) utilise la meme valeur. */
.eldorado-bib-newsletter input[type="email"] {
    flex: 1 1 160px;
    min-width: 160px;
    width: auto;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
}
.eldorado-bib-newsletter button[type="submit"] {
    padding: 14px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--eldorado-en-tete-bouton-fond, #ffffff);
    color: var(--eldorado-en-tete-bouton-texte, #1e3a8a);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Deux colonnes a partir de 861px, le point de rupture de la maquette (.wrap). Le
 * formulaire occupe la colonne 2 sur les deux rangees du discours. */
@media (min-width: 861px) {
    .eldorado-bib-newsletter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 8px;
        align-items: center;
    }
    .eldorado-bib-newsletter > h2 { grid-column: 1; grid-row: 1; }
    .eldorado-bib-newsletter > p { grid-column: 1; grid-row: 2; }
    .eldorado-bib-newsletter > .eldorado-newsletter { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
    .eldorado-bib-newsletter { padding: 30px; }
    .eldorado-bib-newsletter > h2 { font-size: 28px; }
}

/* Variante d'article (maquette : 5-Composants-partages/Newsletter-article.html).
 * Meme dessin, resserre : dans un article la carte ne fait que 740px, soit 310px par
 * colonne. La maquette prevoit pour ce cas rayon 18, padding 30, gouttiere 24, titre 28,
 * chapeau 15, controles a rayon 10. */
.inside-article .eldorado-bib-newsletter {
    --border-radius: 10px;
    border-radius: 18px;
    padding: 30px;
}
.inside-article .eldorado-bib-newsletter > h2 { font-size: 28px; }
.inside-article .eldorado-bib-newsletter > p { font-size: 15px; }
.inside-article .eldorado-bib-newsletter input[type="email"] { padding: 13px 14px; border-radius: 10px; }
.inside-article .eldorado-bib-newsletter button[type="submit"] { padding: 13px 18px; border-radius: 10px; }
@media (min-width: 861px) {
    .inside-article .eldorado-bib-newsletter { column-gap: 24px; }
}