/* ==========================================================================
   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);
}

/* Deux colonnes : le texte et le formulaire à gauche, la mascotte à droite.
   La colonne de texte garde une largeur de lecture confortable ; la mascotte
   prend ce qui reste. `align-items: center` la cale sur le milieu du bloc de
   texte plutôt que sur son sommet — la fusée monte vers la droite, un
   alignement en haut la ferait sortir du bloc. */
.attente-grille {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.attente-contenu {
  position: relative;
  max-width: 680px;
  /* Indispensable dans une grille : sans cela une piste refuse de descendre
     sous la largeur intrinsèque de son contenu et le bloc déborde à droite
     sur téléphone. */
  min-width: 0;
  /* Le padding de `.enveloppe` doit rester DANS la largeur, sinon le bloc
     déborde à droite sur téléphone. */
  box-sizing: border-box;
}

/* La mascotte. Aucun cadre, aucune ombre portée : le PNG est détouré et
   flotte directement sur le champ de losanges. */
.attente-mascotte {
  justify-self: center;
  max-width: 34rem;
  width: 100%;
}

.attente-mascotte img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sous 900 px il n'y a plus la place pour deux colonnes : la mascotte passe
   sous le formulaire et se réduit, pour ne pas repousser la capture
   d'adresse hors de l'écran sur téléphone. */
@media (max-width: 900px) {
  .attente-grille { grid-template-columns: 1fr; }
  .attente-mascotte { max-width: 22rem; }
}

/* 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;
}

/* ==========================================================================
   Le bloc « ouverts aux affaires »

   Il vient après le bloc d'attente et avant le pied. Fond sombre : c'est le
   seul aplat plein de la page, et il sert à marquer une rupture — on quitte
   « on arrive bientôt » pour « on prend du travail maintenant ». Sans ce
   contraste, le second bloc se lirait comme la suite du premier et le
   visiteur ne verrait pas qu'on lui demande quelque chose de différent.
   ========================================================================== */

/* ATTENTION AU NOM DE CETTE CLASSE.

   Ce bloc s'appelait d'abord `.ouvert` — et cela a rendu la page entièrement
   non défilable. `site.js` pose en effet une classe `ouvert` sur l'élément
   RACINE (`<html>`) pour déclencher l'arrivée du texte du héros ; la règle
   `.ouvert { overflow: hidden }` écrite ici pour rogner le filigrane
   s'appliquait donc à `<html>` lui-même, et le document ne défilait plus.

   Avant de nommer une classe de bloc, vérifier qu'elle n'est pas déjà posée
   sur `:root` ou sur `body` par un script — un nom d'état comme « ouvert »,
   « actif » ou « vu » a toutes les chances de l'être. */
.affaires {
  position: relative;
  z-index: 2;
  background: var(--wpn-ancre);
  color: #fff;
  padding: clamp(4rem, 11vh, 7rem) 0;
  /* Le filigrane déborde du bloc : c'est ce débordement coupé qui lui donne
     son échelle. Sans cela il n'aurait l'air que d'un logo un peu gros. */
  overflow: hidden;
}

/* --- Le rappel du logo, en filigrane -------------------------------------
   Trois décisions, dans l'ordre d'importance :

   1. Il est COUPÉ par le bord droit. Une forme entière se lit comme une
      illustration posée ; une forme coupée se lit comme un motif dont la
      page n'est qu'une fenêtre. C'est ce qui le fait passer pour une
      texture de marque plutôt que pour un second logo.

   2. Il est TRÈS pâle. Le texte blanc passe devant : au-delà d'une certaine
      densité, le filigrane gênerait la lecture et se mettrait à concurrencer
      le bouton. On le sent, on ne le lit pas.

   3. Il ne reçoit ni clic ni curseur (`pointer-events: none`) et il est
      `aria-hidden` : c'est du décor, il ne doit rien intercepter ni être
      annoncé aux lecteurs d'écran. */
.affaires-filigrane {
  position: absolute;
  /* Ancré au bord droit et centré verticalement : il occupe le vide laissé
     par la colonne de texte, qui s'arrête à 46 rem.

     Le décalage à droite est franc (-18%) : le losange jaune doit sortir
     VRAIMENT du cadre. À -6%, la forme tenait entière dans le bloc et se
     lisait comme une illustration posée là — exactement ce qu'on ne veut
     pas. C'est la coupure qui fait la texture. */
  top: 50%;
  /* Le débordement est exprimé en PIXELS, pas en pourcentage de la largeur
     du bloc. Un `right: -18%` grandit avec l'écran : sur une large fenêtre
     le SVG dépassait de plus de 250 px, allongeait la page et créait un
     défilement horizontal — le visiteur se retrouvait bloqué en haut. Le
     `overflow: hidden` du bloc rogne l'affichage mais n'empêche pas la boîte
     de compter dans la taille du document. Une valeur fixe reste maîtrisée
     quelle que soit la taille de l'écran. */
  right: -70px;
  transform: translateY(-50%);
  width: min(46rem, 52vw);
  /* La hauteur est bornée à celle du bloc : un SVG plus haut que son
     conteneur dépasse en haut ET en bas, ce que `overflow: hidden` masque
     sans empêcher la page de s'allonger. */
  max-height: 100%;
  height: auto;
  /* Plus haut que la valeur d'un vrai filigrane, parce que les trois
     couleurs doivent rester DISTINCTES : en dessous, l'intersection
     violette se confond avec le jaune et la construction de la marque —
     tout l'intérêt du rappel — devient illisible. */
  opacity: .2;
  pointer-events: none;
  z-index: 0;
}

/* Le contenu passe devant le filigrane. */
.affaires .enveloppe { position: relative; z-index: 1; }

/* La largeur de lecture est portée par ce bloc INTÉRIEUR, jamais par
   `.enveloppe` : celle-ci porte la largeur de colonne du site (1200 px) et
   son centrage. Les mélanger recentre le texte au milieu de la page au lieu
   de l'aligner sur la colonne — c'est l'erreur que le bloc d'attente avait
   déjà faite. */
.affaires-contenu {
  box-sizing: border-box;
  min-width: 0;
  max-width: 46rem;
}

/* Le surtitre dit le paradoxe en une ligne, avant le titre. C'est lui qui
   désamorce la contradiction « site inachevé / studio ouvert ». */
.affaires-surtitre {
  font-size: .82rem;
  font-weight: var(--graisse-moyenne);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Le jaune de marque ne passe pas en texte sur fond clair, mais sur ce
     fond sombre il est parfaitement lisible — c'est l'inverse du piège
     habituel. */
  color: var(--wpn-jaune-400);
  margin: 0 0 var(--espace-4);
}

.affaires-titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--espace-6);
}

.affaires-texte {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 var(--espace-8);
  max-width: 56ch;
}

/* Le bouton s'inverse : sur fond sombre, le bouton sombre de la page
   disparaîtrait. */
.affaires-bouton {
  background: #fff;
  color: var(--wpn-ancre);
  border-color: #fff;
}
.affaires-bouton:hover { background: var(--wpn-jaune-400); border-color: var(--wpn-jaune-400); }

/* Sur écran étroit, le texte occupe toute la largeur et passerait par-dessus
   le filigrane. On le recule derrière le coin bas-droit, où il ne rencontre
   plus que le vide sous le bouton. */
@media (max-width: 900px) {
  .affaires-filigrane {
    top: auto;
    bottom: -12%;
    right: -80px;
    transform: none;
    width: min(26rem, 80vw);
    opacity: .13;
  }
}

/* ==========================================================================
   La fenêtre de soumission
   ========================================================================== */

.modale {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-4);
  /* La fenêtre peut dépasser la hauteur de l'écran sur un petit téléphone :
     c'est le conteneur qui défile, pas la page derrière. */
  overflow-y: auto;
}

.modale[hidden] { display: none; }

.modale-voile {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 42, .55);
  opacity: 0;
  transition: opacity .18s linear;
}

.modale-boite {
  position: relative;
  width: 100%;
  max-width: 34rem;
  box-sizing: border-box;
  background: var(--wpn-fond);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  /* Le léger décalage vers le bas donne le sens de l'apparition : la
     fenêtre monte vers sa place au lieu de surgir. */
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .18s linear, transform .18s cubic-bezier(.2,.8,.2,1);
}

.modale.est-ouverte .modale-voile { opacity: 1; }
.modale.est-ouverte .modale-boite { opacity: 1; transform: none; }

/* La page ne défile plus derrière la fenêtre ouverte. */
body.modale-ouverte { overflow: hidden; }

.modale-fermer {
  position: absolute;
  top: var(--espace-3);
  right: var(--espace-3);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(27, 31, 42, .5);
  background: transparent;
  border: 0;
  border-radius: var(--rayon-md);
  cursor: pointer;
}
.modale-fermer:hover { color: var(--wpn-ancre); background: rgba(27, 31, 42, .06); }

.modale-titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--wpn-ancre);
  /* La marge de droite laisse la place au bouton de fermeture : sans elle,
     un titre long passe dessous. */
  margin: 0 2.5rem var(--espace-3) 0;
}

.modale-chapo {
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(27, 31, 42, .68);
  margin: 0 0 var(--espace-6);
}

/* --- Les champs ---------------------------------------------------------- */

.champ { margin-bottom: var(--espace-4); }

.champ-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);
}

/* « optional » en minuscules et en plus pâle : la mention doit se lire comme
   une permission, pas comme une étiquette de plus. */
.champ-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--graisse-normale);
  color: rgba(27, 31, 42, .38);
  margin-left: var(--espace-2);
}

.champ-saisie {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* La hauteur vient du padding seul — même précaution que pour le champ
     d'inscription, qui héritait sinon d'une hauteur posée ailleurs. */
  height: auto;
  padding: .7rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wpn-ancre);
  background: #fff;
  border: 1px solid rgba(27, 31, 42, .18);
  border-radius: var(--rayon-md);
}

.champ-saisie:focus {
  outline: none;
  border-color: var(--wpn-bleu-700);
  box-shadow: 0 0 0 3px rgba(10, 76, 139, .16);
}

.champ-zone { resize: vertical; min-height: 6.5rem; }

/* Le piège à robots : retiré de l'écran sans `display: none`, que certains
   remplisseurs automatiques savent détecter et contourner. */
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.soumission-bouton { width: 100%; margin-top: var(--espace-2); }

.soumission-message {
  min-height: 1.4em;
  margin: var(--espace-3) 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(27, 31, 42, .7);
}
.soumission-message.est-ok { color: var(--wpn-bleu-700); font-weight: var(--graisse-moyenne); }
.soumission-message.est-erreur { color: #B42318; }

/* ==========================================================================
   Les icônes sociales du pied
   ========================================================================== */

/* Les liens du pied et les icônes se centrent sur une même ligne : sans
   `align-items`, le lien texte se cale en haut et les pastilles en bas. */
.pied-liens { align-items: center; }

.pied-sociaux { display: inline-flex; gap: var(--espace-3); align-items: center; }

.pied-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rayon-md);
  color: var(--wpn-neutre-200);
  /* La cible tactile fait 36 px : une icône de 18 px seule serait trop
     petite à toucher sur téléphone. */
  background: rgba(255, 255, 255, .06);
}

.pied-social svg { width: 1.05rem; height: 1.05rem; display: block; }
.pied-social:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Le mouvement n'est pas indispensable ici : on le retire pour qui l'a
   demandé, sans rien enlever au fonctionnement. */
@media (prefers-reduced-motion: reduce) {
  .modale-voile, .modale-boite { transition: none; }
  .modale-boite { transform: none; }
}

/* ==========================================================================
   Le sélecteur de langue

   Trois abréviations dans le header. Volontairement discret : ce n'est pas
   une fonction du produit, c'est une commodité — un visiteur qui n'en a pas
   besoin ne doit pas le remarquer, et celui qui la cherche doit la trouver
   là où l'usage la place, en haut à droite.
   ========================================================================== */

.nav-contenu { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-6); }

.langues {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  font-size: .78rem;
  font-weight: var(--graisse-moyenne);
  letter-spacing: .06em;
}

.langue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* La cible fait 34 px de large : trois lettres serrées seraient pénibles à
     viser au doigt. */
  min-width: 2.15rem;
  padding: .38rem .3rem;
  border-radius: var(--rayon-sm);
  color: rgba(27, 31, 42, .5);
  text-decoration: none;
}

.langue:hover { color: var(--wpn-ancre); background: rgba(27, 31, 42, .06); }

/* La langue courante est marquée par la COULEUR ET par le fond, jamais par
   la couleur seule : une distinction qui repose sur la seule teinte
   disparaît pour une partie des visiteurs. */
.langue.est-active {
  color: var(--wpn-ancre);
  background: rgba(27, 31, 42, .08);
  cursor: default;
}

@media (max-width: 560px) {
  .langues { gap: 0; }
  .langue { min-width: 1.9rem; padding: .34rem .22rem; font-size: .74rem; }
}