/**
 * Bloc « Inscription newsletter », et la fenêtre qu'il ouvre.
 *
 * À gauche l'invitation, à droite les mentions et le bouton. Le
 * formulaire lui-même emprunte le composant « formulaire », commun aux
 * trois formulaires du site : il n'a pas de mise en forme propre.
 */

.newsletter {
  display: grid;
  gap: var(--e-m);
  margin-block: var(--e-section);
  align-items: start;
}

/* Deux colonnes égales au-dessus de 768 px, la pile en dessous. */
@media (min-width: 48rem) {
  .newsletter {
    grid-template-columns: 1fr 1fr;
    gap: var(--colonnes-gap);
  }
}

/*
 * 28 px au large, 20 au plus étroit : la borne basse est celle qui garde
 * deux lignes lisibles sur un téléphone.
 */
.newsletter__titre {
  margin: 0;
  font-size: clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem);
  line-height: 1.2;
  color: var(--couleur-titre);
}

.newsletter__mentions {
  margin: 0 0 var(--e-s);
  font-size: 0.75rem;   /* 12 px */
  line-height: 1.4;
  color: var(--couleur-texte);
}

/*
 * Le bouton d'ouverture. Il ne suit pas le système de boutons du
 * thème — coins arrondis, réserves inégales, gris clair — parce que la
 * maquette lui donne l'air d'un champ de saisie plutôt que d'un bouton :
 * c'est une invitation à écrire son adresse, pas une action.
 *
 * Le gris du libellé est celui de la maquette. Il ne passe pas le seuil
 * de contraste ; la réserve est au registre RGAA.
 */
.newsletter__declencheur {
  display: inline-block;
  padding: 6px 50px 6px 20px;
  border: 1px solid var(--couleur-titre);
  border-radius: 999px;
  background-color: var(--c-blanc);
  color: #b2b2b2;
  font-family: var(--police-texte);
  font-size: 0.75rem;   /* 12 px */
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.newsletter__declencheur:hover,
.newsletter__declencheur:focus-visible {
  background-color: var(--couleur-titre);
  color: var(--c-blanc);
}

.newsletter__declencheur:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

/* ---------------------------------------------------------------
 * La fenêtre
 *
 * Le script la construit et y déplace le panneau ; elle n'existe pas
 * sans lui, et le formulaire reste alors dans la page.
 * --------------------------------------------------------------- */

.modale {
  width: min(64rem, 100% - 2 * var(--gouttiere));
  max-height: min(48rem, 100dvh - 2 * var(--e-m));
  padding: var(--e-xl) var(--e-m);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon);
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
  overflow: auto;
}

.modale::backdrop {
  background-color: rgb(10 31 71 / 0.6);
}

/*
 * La croix de fermeture : deux traits dessinés en dégradés plutôt qu'un
 * fichier ou un caractère. Le caractère « × » varie d'une police à
 * l'autre et se lit « multiplié par » ; le nom accessible est porté par
 * aria-label, posé en JavaScript.
 */
.modale__fermer {
  position: absolute;
  top: var(--e-s);
  right: var(--e-s);
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background:
    linear-gradient(currentcolor, currentcolor) center / 100% 3px no-repeat,
    linear-gradient(currentcolor, currentcolor) center / 3px 100% no-repeat;
  rotate: 45deg;
  color: var(--couleur-titre);
  cursor: pointer;
}

.modale__fermer:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

.newsletter__panneau { position: relative; }

.modale .formulaire { max-width: none; }

/* Le remerciement prend la place du formulaire, effacé par le script. */
.newsletter__reponse { margin: 0 0 var(--e-s); }

/*
 * Sans JavaScript, le panneau reste dans la page : il se donne alors la
 * mesure de lecture, comme les autres formulaires.
 */
.newsletter__corps > .newsletter__panneau { max-width: 40rem; }