/* Lettre d'Armurier Expert — bloc d'inscription [acp_newsletter]
 *
 * Consomme les jetons du thème enfant (--ae-*, socle d'identité 4.33.0), avec
 * leurs valeurs en repli : le bloc reste lisible si le thème change.
 *
 * Tout est cantonné sous .acp-nl. Le thème pose `h1,h2,h3,h4,h5,h6 { color:#333 }`
 * en global : le titre déclare donc sa couleur. Et sur mobile, le thème enfant
 * passe à 16 px les `p` et les `li` du contenu des articles : les petites
 * mentions du bloc sont des `div`, pour garder leur taille ; les avantages, en
 * `li`, suivent le corps du texte.
 *
 * Contrastes :
 *   bouton, blanc sur #c8102e ..................... 5,9:1
 *   accroche et réassurance #475569 sur #f8fafc .... 7,2:1
 *   surtitre, erreur et lien #a10d25 sur #f8fafc ... 7,7:1
 *   bord du champ #64748b sur blanc ................ 4,8:1 (seuil des composants : 3:1)
 */

.acp-nl {
    margin: 42px 0;
    padding: 24px 24px 20px;
    border: 1px solid var(--ae-trait, #e2e8f0);
    border-top: 3px solid var(--ae-accent, #c8102e);
    border-radius: var(--ae-rayon, 4px);
    background: var(--ae-fond-alt, #f8fafc);
    color: var(--ae-encre, #0f172a);
    font-family: var(--ae-texte, 'Inter', -apple-system, 'Segoe UI', sans-serif);
}

.acp-nl .acp-nl-titre {
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--ae-display, 'Oswald', 'Arial Narrow', Impact, sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ae-encre, #0f172a);
}

.acp-nl .acp-nl-texte {
    margin: 0 0 16px;
    padding: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ae-gris, #475569);
}

.acp-nl-surtitre {
    margin: 0 0 6px;
    font-family: var(--ae-display, 'Oswald', 'Arial Narrow', Impact, sans-serif);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ae-accent-txt, #a10d25);
}

/* Avantages : pastilles cochées dessinées en CSS, sans image à charger. */
.acp-nl .acp-nl-points {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.acp-nl .acp-nl-points li {
    position: relative;
    margin: 0 0 6px;
    padding: 0 0 0 26px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ae-encre, #0f172a);
}

.acp-nl .acp-nl-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .22em;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ae-accent, #c8102e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.7-4.8' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.acp-nl-rassurance {
    margin: 8px 0 0;
    font-size: .8125rem;
    color: var(--ae-gris, #475569);
}

.acp-nl-label {
    display: block;
    margin: 0 0 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ae-encre, #0f172a);
}

.acp-nl-ligne {
    display: flex;
    gap: 8px;
}

.acp-nl .acp-nl-email {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #64748b;
    border-radius: var(--ae-rayon, 4px);
    background: #ffffff;
    color: var(--ae-encre, #0f172a);
    font-family: inherit;
    font-size: 16px; /* en deçà, Safari iOS zoome sur le champ au toucher */
}

.acp-nl .acp-nl-email:focus {
    border-color: var(--ae-accent, #c8102e);
    outline: 2px solid var(--ae-accent, #c8102e);
    outline-offset: 1px;
}

.acp-nl .acp-nl-bouton {
    flex: 0 0 auto;
    height: 46px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: var(--ae-rayon, 4px);
    background: var(--ae-accent, #c8102e);
    color: #ffffff;
    font-family: var(--ae-display, 'Oswald', 'Arial Narrow', Impact, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.acp-nl .acp-nl-bouton:hover {
    background: var(--ae-accent-txt, #a10d25);
}

.acp-nl .acp-nl-bouton:focus-visible {
    outline: 2px solid var(--ae-encre, #0f172a);
    outline-offset: 2px;
}

.acp-nl .acp-nl-bouton:disabled {
    opacity: .7;
    cursor: wait;
}

.acp-nl-consentement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ae-gris, #475569);
}

.acp-nl-consentement input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--ae-accent, #c8102e);
}

.acp-nl-consentement label {
    margin: 0;
    font-weight: 400;
}

.acp-nl-consentement a {
    color: var(--ae-accent-txt, #a10d25);
    text-decoration: underline;
}

/* Champ piège : hors de l'écran plutôt qu'en display:none, que certains
   robots savent reconnaître et ignorer. */
.acp-nl-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.acp-nl-message {
    margin: 12px 0 0;
    font-size: .9375rem;
    line-height: 1.5;
}

.acp-nl-message:empty {
    display: none;
}

.acp-nl-erreur {
    color: var(--ae-accent-txt, #a10d25);
}

.acp-nl-succes {
    padding: 12px 14px;
    border-left: 3px solid #15803d;
    background: #ffffff;
    color: var(--ae-encre, #0f172a);
}

.acp-nl-test {
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: var(--ae-rayon, 4px);
    background: #fef3c7;
    color: #78350f;
    font-size: .8125rem;
}

.acp-nl-form[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .acp-nl {
        padding: 20px 16px 16px;
    }

    .acp-nl-ligne {
        flex-direction: column;
    }

    .acp-nl .acp-nl-bouton {
        width: 100%;
    }
}

/* Articles au design v2 : le bloc suit la colonne des « Publications
   similaires » (ae-v2.css du thème enfant), au lieu de toute la largeur. */
body.ae-v2 .acp-nl {
    max-width: 1112px;
    width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    body.ae-v2 .acp-nl {
        width: calc(100% - 32px);
    }
}