/* Pop-up newsletter (page d'accueil). Fichier séparé plutôt que <style> inline,
   pour que la politique CSP du site puisse interdire les styles inline. */

.popup-newsletter {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(28rem, calc(100vw - 2 * var(--gouttiere)));
  height: fit-content;
  padding: var(--e-8);
  border: 0;
  background: var(--fubu-creme);
  color: var(--texte);
}

.popup-newsletter::backdrop {
  background: rgb(41 38 38 / 0.5);
}

.popup-newsletter h2 {
  font-size: var(--t-lg);
  margin: 0 var(--e-8) var(--e-6) 0;
}

.popup-newsletter label {
  display: block;
  font-size: var(--t-sm);
  color: var(--fubu-gris);
  margin-bottom: var(--e-2);
}

.popup-newsletter input[type='email'] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--e-6);
  padding: var(--e-3);
  border: 1px solid var(--fubu-trait);
  background: var(--fubu-blanc);
  font-size: var(--t-base);
  transition: border-color var(--transition);
}

.popup-newsletter input[type='email']:hover,
.popup-newsletter input[type='email']:focus {
  border-color: var(--fubu-noir);
}

.popup-newsletter__fermer {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 0;
  background: none;
  color: var(--texte);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
}