/* Encart infolettre en fin d'article — plugin lecaribou-fonctionnalites.
   Autonome : indépendant du thème. Les tokens du thème FSE gagnent quand ils
   existent ; sinon les replis (marque historique du live) prennent le relais.
   Reprend le langage visuel de .inline-cta (thème FSE, content.css § 3D.2),
   re-scopé sous .lc-nl-article. Les rares !important ne neutralisent QUE les
   styles inline du plugin MailPoet (width:100% sur les champs). */

.lc-nl-article {
  /* Placé au fil de l'article, calé sur la LARGEUR DE LECTURE (colonne de texte).
     Il ne déborde plus au-delà de la colonne : en desktop large, un débordement
     entrait en collision avec le rail de sommaire fixe (assets/js/toc-rail.js).
     Fallback 47.5rem = valeur de --measure du thème pour un thème classique. */
  max-width: var(--measure, 47.5rem);
  margin: 3rem auto;
  padding: 1.8rem;
  box-sizing: border-box;
  border: 1.5px solid var(--ink, #2a2320);
  border-radius: 12px;
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
}

/* Filet de sécurité si une instance ancienne portait encore la classe alignwide
   (le rendu du bloc ne la pose plus) : on la ramène à la largeur de lecture pour
   qu'elle ne déborde jamais sur le rail de sommaire. !important pour battre la
   règle de layout du cœur (.is-layout-constrained > .alignwide). */
.lc-nl-article.alignwide {
  max-width: var(--measure, 47.5rem) !important;
  margin-inline: auto !important;
}

.lc-nl-article h3 {
  font-family: var(--grotesk, "Schibsted Grotesk", system-ui, sans-serif);
  font-weight: 800;
  font-size: var(--step-1, 1.35rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink, #2a2320);
  margin: 0 0 .5rem;
}

.lc-nl-article > p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft, #5c554b);
  margin: 0 0 1.1rem;
  max-width: 54ch;
}

/* Champ + bouton : on gagne la spécificité sur le balisage du bloc MailPoet. */
.lc-nl-article .mailpoet_form { margin: 0; }
.lc-nl-article .mailpoet_form_form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lc-nl-article .mailpoet_paragraph { margin: 0; }
/* léger décalage vers le bas du paragraphe du bouton (après le reset margin:0) */
.lc-nl-article .mailpoet_paragraph.last { margin-top: 10px; }

/* Libellé du champ (« Adresse e-mail ») : MailPoet le sort en clair (réglé pour
   le pied sombre) → sur l'encart clair il devient blanc sur blanc. On force un
   texte foncé, visible, indépendamment de la config du formulaire. */
.lc-nl-article .mailpoet_text_label {
  display: block;
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink, #2a2320) !important;
  margin: 0 0 .3rem;
}
.lc-nl-article .mailpoet_paragraph:has(.mailpoet_text) { flex: 1 1 210px; }
.lc-nl-article .mailpoet_paragraph:has(.mailpoet_submit) { flex: 0 0 auto; }
.lc-nl-article .mailpoet_message { flex-basis: 100%; padding: 0 !important; margin: .6rem 0 0 !important; }

.lc-nl-article .mailpoet_text {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 1rem;
  padding: .75rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--line-strong, #d6cdbf);
  /* !important sur le fond ET le texte : MailPoet impose parfois ses propres
     couleurs (réglées dans l'éditeur de formulaire) en style inline — sur le
     live, une police claire rendait le texte saisi blanc sur blanc. On force un
     texte foncé sur fond clair pour garantir la lisibilité quelle que soit la
     config du formulaire. */
  background: var(--bg, #fff) !important;
  color: var(--ink, #2a2320) !important;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
}
.lc-nl-article .mailpoet_text::placeholder {
  color: var(--ink-soft, #5c554b) !important;
  opacity: 1;
}
.lc-nl-article .mailpoet_text:focus {
  outline: 2px solid var(--bourgogne, #670e0a);
  border-color: var(--bourgogne, #670e0a);
}

.lc-nl-article .mailpoet_submit {
  font-family: var(--grotesk, "Schibsted Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: .98rem;
  padding: .75rem 1.3rem;
  border-radius: 8px;
  border: 0;
  background: var(--bourgogne, #670e0a);
  color: var(--on-dark, #fff);
  cursor: pointer;
  width: auto !important;
  margin: 0 !important;
  transition: background .2s;
}
.lc-nl-article .mailpoet_submit:hover { background: var(--bourgogne-vif, #8a1610); }

/* Messages succès / erreur (MailPoet contrôle ce balisage : on l'habille). */
.lc-nl-article .mailpoet_validate_success,
.lc-nl-article .mailpoet_validate_error {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 8px;
}
.lc-nl-article .mailpoet_validate_success { color: var(--spruce-900, #23302c); background: var(--sauge, #d9e6dd); }
.lc-nl-article .mailpoet_validate_error { color: var(--bourgogne, #670e0a); background: rgba(103, 14, 10, .08); }

/* État « succès » (après inscription). MailPoet ajoute .mailpoet_form_successfully_send
   au <form> et sa feuille publique passe le message en position:absolute centrée,
   par-dessus le champ+bouton (« arraché du flux »). Même correctif que le pied
   (content.css) : on remet le message dans le flux, on masque le champ+bouton, et
   on affiche la confirmation avec une coche. Spécificité 0,4,0 pour battre le 0,3,0
   de MailPoet ; ::before en inline-block car MailPoet révèle via jQuery .show()
   (display:block inline, qui casserait un flex). */
.lc-nl-article .mailpoet_form.mailpoet_form_successfully_send { position: static; }
.lc-nl-article .mailpoet_form_successfully_send .mailpoet_paragraph { display: none; }
.lc-nl-article .mailpoet_form.mailpoet_form_successfully_send .mailpoet_message { margin: 0 !important; padding: 0 !important; }
.lc-nl-article .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success {
  position: static; left: auto; top: auto; transform: none; text-align: left;
}
.lc-nl-article .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success::before {
  content: ""; display: inline-block; width: 1.25rem; height: 1.25rem;
  vertical-align: -.28em; margin-right: .5rem; background: var(--spruce-900, #23302c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .lc-nl-article .mailpoet_submit { transition: none; }
}