/* ---------- la page /newsletter (chantier NEWSLETTER, 04/09) ----------

   Cinq règles, et pas une de plus. Cette page réemploie la facture de la
   landing : `.ticket`/`.ticket-main` pour le panneau clair, `.champ`, `.hint`,
   `.champ-avis`, `.erreur`, `.btn`/`.btn-big`/`.btn-ticket`, `.succes`,
   `.paiement-note`, `.footer*`. Ce qui suit n'existait nulle part ailleurs. */

.nl { padding: 4vh 20px 8px; max-width: 620px; margin: 0 auto; }

/* Le titre reprend la display de la marque, en bien plus sobre que le hero :
   on est sur une page à un seul geste, pas sur une affiche. */
.nl-titre {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 11vw, 62px); line-height: 0.95;
  margin: 0 0 8px; color: var(--rouge);
}
.nl-chapo { margin: 0 0 22px; color: var(--gris); font-size: 15.5px; }

.nl-succes-texte { margin: 0 0 18px; font-size: 15px; color: #55544e; }
/* L'amorce des boutons. Collée à eux (marge basse courte) et détachée de la
   phrase du dessus : elle annonce ce qui suit, elle ne conclut pas ce qui
   précède. */
.nl-suivre { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #55544e; }

/* LES QUATRE RÉSEAUX EN BOUTONS EMPILÉS (décision de Nicolas, 04/09).
   Empilés et non en grille : sur un téléphone tenu debout dans une salle, une
   cible pleine largeur se touche sans viser. `.btn` porte déjà le rouge de
   marque et l'état actif ; il ne manquait que la largeur et l'espacement. */
.nl-reseaux { display: flex; flex-direction: column; gap: 14px; }
.nl-reseau {
  width: 100%; text-align: center; text-decoration: none;
  /* `.btn` ne porte AUCUN rembourrage : il vient toujours d'un modificateur
     de taille (`.btn-small`, `.btn-big`). Ni l'un ni l'autre ne convient à
     quatre boutons empilés — `.btn-big` en ferait une colonne de 280 px de
     haut. D'où une taille propre, entre les deux. */
  padding: 14px 20px; font-size: 17px;
}

/* ⚠️ LA COULEUR DU TEXTE SE REGAGNE ICI, ET IL FAUT DEUX SÉLECTEURS POUR ÇA.
   `.btn` pose bien `color: var(--blanc)`, mais ces boutons vivent DANS le
   panneau clair : `.ticket a` (posé au chantier CGV-LEGAL pour que les liens
   cessent d'être invisibles sur du papier) est plus spécifique et gagne — le
   texte sortait en gris sombre sur le rouge de marque, et le survol le passait
   même en rouge sur rouge. Corrigé ici plutôt que dans `site.css`, dont la
   règle est juste pour les liens qu'elle vise et sert six pages en production. */
.ticket .nl-reseau, .ticket .nl-reseau:hover { color: var(--blanc); text-decoration: none; }