/* ==========================================================================
   Window Portal Network — la page d'attente

   Le header du site complet, suivi d'un seul bloc : « Launching soon » et la
   capture d'adresse. Rien d'autre.

   Ce fichier vient APRÈS style.css et ne fait que deux choses : neutraliser
   les mécanismes du site complet qui n'ont plus d'objet ici (le figement des
   onglets, la course de 200vh), et habiller le bloc d'attente.

   Le fond de losanges du header se poursuit sous ce bloc — aucune couture
   visible entre les deux, comme sur le site complet.
   ========================================================================== */

/* --- Le bloc d'attente ---------------------------------------------------
   Pas de `min-height: 200vh` comme `.suite` : ici rien ne monte par-dessus,
   donc aucune course de figement n'est nécessaire. Le bloc fait la hauteur
   de son contenu, avec de l'air autour. */
.attente {
  position: relative;
  background: transparent;   /* le champ de losanges doit rester visible */
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(5rem, 14vh, 9rem);
}

.attente-contenu {
  position: relative;
  z-index: 2;
  max-width: 680px;
  /* Le padding de `.enveloppe` doit rester DANS la largeur, sinon le bloc
     déborde à droite sur téléphone. */
  box-sizing: border-box;
}

/* Rien ne doit provoquer de défilement horizontal. */
.attente, .inscription, .inscription-rangee { max-width: 100%; }

.attente-titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--wpn-ancre);
  margin: 0 0 var(--espace-6);
}

.attente-texte {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: rgba(27, 31, 42, .78);
  margin: 0 0 var(--espace-4);
  max-width: 58ch;
}

.attente-texte-second { margin-bottom: var(--espace-8); }

/* --- Le formulaire -------------------------------------------------------
   L'étiquette est visible plutôt que masquée : un champ dont le seul libellé
   est un texte d'exemple perd son sens dès qu'on commence à taper. */
.inscription { max-width: 30rem; }

.inscription-etiquette {
  display: block;
  font-size: .82rem;
  font-weight: var(--graisse-moyenne);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(27, 31, 42, .55);
  margin-bottom: var(--espace-2);
}

.inscription-rangee {
  display: flex;
  gap: var(--espace-3);
  flex-wrap: wrap;
}

.inscription-champ {
  flex: 1 1 15rem;
  min-width: 0;                     /* sans quoi le champ déborde en flex */
  width: 100%;
  box-sizing: border-box;
  /* La hauteur doit venir du padding seul. Sans `height: auto`, le champ
     hérite d'une hauteur posée ailleurs dans style.css et devient
     démesurément haut sur téléphone. */
  height: auto;
  line-height: 1.4;
  font-family: inherit;
  font-size: 1rem;
  color: var(--wpn-ancre);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(27, 31, 42, .22);
  border-radius: 2px;
  padding: .82rem 1rem;
  transition: border-color .25s ease, background .25s ease;
}

.inscription-champ::placeholder { color: rgba(27, 31, 42, .38); }

.inscription-champ:focus {
  outline: none;
  border-color: var(--wpn-bleu-700);
  background: #fff;
}

/* Le contour de focus visible au clavier, en plus du changement de bordure. */
.inscription-champ:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 76, 139, .22);
}

.inscription-bouton {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.inscription-bouton[disabled] { opacity: .55; cursor: default; }

/* --- Le message de retour ------------------------------------------------
   La couleur ne porte jamais l'information seule : le texte dit lui-même ce
   qui s'est passé. */
.inscription-message {
  margin: var(--espace-3) 0 0;
  font-size: .95rem;
  line-height: 1.5;
  min-height: 1.4em;                /* évite que la page saute à l'affichage */
}

.inscription-message.est-ok    { color: var(--wpn-bleu-700); }
/* jaune-700 et non le jaune de marque : celui-ci ne passe pas sur blanc. */
.inscription-message.est-erreur { color: #8A1F1F; }

/* --- Le pied -------------------------------------------------------------
   Opaque, pour marquer la fin de la zone décorée. */
.pied { position: relative; z-index: 2; }

/* --- Téléphone ----------------------------------------------------------- */
@media (max-width: 560px) {
  .inscription-rangee { flex-direction: column; align-items: stretch; }
  /* En colonne, l'axe principal devient la VERTICALE : `flex: 1 1 15rem`
     ferait alors grandir le champ en hauteur (il montait à 240 px). On lui
     rend sa taille naturelle, donnée par son padding. */
  .inscription-champ { flex: 0 0 auto; }
  .inscription-bouton { width: 100%; }
}

/* --- Lisibilité du chapô -------------------------------------------------
   Le champ de losanges passe derrière le texte (z-index 0 contre 2), mais
   sur cette page le chapô est plus long que sur le site complet et se
   retrouve à hauteur des grands losanges. Ils sont pâles, mais un texte gris
   sur une forme colorée perd du contraste.

   Un voile très léger, de la couleur du fond, redonne l'assise du texte sans
   dessiner de boîte : le flou l'empêche d'avoir un bord visible. */
.heros-chapo {
  position: relative;
}
.heros-chapo::before {
  content: "";
  position: absolute;
  inset: -0.6em -1.2em;
  background: var(--wpn-fond, #F5F5F4);
  filter: blur(18px);
  opacity: .78;
  z-index: -1;
  pointer-events: none;
}