/* ═══════════════════════════════════════════════════════════════════════
   LISTE D'ATTENTE - join.html
   Page autonome : elle ne partage aucune regle avec style.css, et ne peut
   donc rien casser du site. Un seul registre, le sombre : c'est un ecran
   d'attente, pas une page du site, et il n'a ni bascule ni suivi de l'OS.

   Le bouton emprunte au site son degrade : meme angle, memes deux couleurs.
   Le libelle reste blanc, comme la maquette : Kevin l'a tranche le 12 aout
   apres que la mesure lui a ete donnee (le blanc tombe a 2,02 de contraste sur
   l'ambre de gauche, l'encre sombre y monterait a 9,17). C'est une decision de
   marque, notee ici pour qu'on ne la « corrige » pas par erreur dans six mois.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La couche des jetons de cette page ─────────────────────────────── */
.wl {
  --wl-fond:        #0A0909;
  --wl-encre:       #FFFFFF;
  --wl-titre:       #EAEDF0;
  --wl-doux:        rgba(234, 237, 240, 0.56);
  --wl-faible:      rgba(255, 255, 255, 0.42);
  --wl-tres-faible: rgba(255, 255, 255, 0.34);
  --wl-corail:      #FF8569;
  --wl-corail-voile: rgba(255, 133, 105, 0.12);

  /* L'encre des defauts. Elle n'est PAS le corail, et c'est un choix : le
     corail veut dire Talkify sur cette page, la marque, le titre qui defile,
     le moment de l'ouverture. Si un envoi rate parlait corail aussi, l'accent
     cesserait de vouloir dire quoi que ce soit. Cette teinte est celle deja
     utilisee pour l'occupe dans le systeme, donc elle n'ajoute pas une
     couleur, et elle est assez loin en teinte pour se lire autrement. */
  --wl-faute:       #FF6B6B;
  --wl-faute-anneau: rgba(255, 107, 107, 0.55);

  --wl-verre:       rgba(255, 255, 255, 0.05);
  --wl-verre-fort:  rgba(255, 255, 255, 0.11);
  --wl-filet:       rgba(255, 255, 255, 0.07);
  --wl-filet-fort:  rgba(255, 255, 255, 0.12);

  --wl-carte:       #27272A;
  --wl-carte-filet: rgba(82, 82, 91, 0.7);

  --wl-cta-fond:    linear-gradient(135deg, #FEA062, #F45E7C);
  --wl-cta-encre:   #FFFFFF;
  --wl-cta-ombre:   0 6px 16px rgba(244, 94, 124, 0.28);

  --wl-marge:       clamp(22px, 6vw, 105px);
  --wl-barre-h:     72px;   /* la hauteur de la barre du site, au pixel */
  --wl-k:           1;      /* echelle du plateau, posee par le script */

  --wl-police: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Les deux vues de la page portent display:flex ; sans ce rappel, l'attribut
   hidden du HTML perd contre la classe et l'ecran de confirmation reste
   empile sous le formulaire. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }

/* La page se lit en deux temps : un ecran plein, puis le pied. Le document
   defile donc, et body ne masque plus son debordement : c'est ce masquage qui
   coupait le monogramme en deux au lieu de laisser descendre. Le debordement
   horizontal, lui, reste masque sur html, pour le plateau. */
body.wl {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--wl-fond);
  color: var(--wl-encre);
  font-family: var(--wl-police);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Le libelle que seuls les lecteurs d'ecran recoivent. */
.wl-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--wl-corail);
  outline-offset: 3px;
  border-radius: 6px;
}

/* La lueur du coin haut droit : elle donne sa profondeur au noir, qui sans
   elle est une surface morte. */
/* La lueur est accrochee a la fenetre, pas au document : depuis que la page
   fait un ecran plus un pied, un pourcentage de la hauteur totale la ferait
   grandir ou retrecir selon la longueur du pied, ce qui n'a aucun sens. */
.wl__halo {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 70vh;
  height: 70svh;
  background: radial-gradient(58% 46% at 74% 2%, rgba(255, 133, 105, 0.13) 0%, rgba(255, 133, 105, 0) 68%);
  pointer-events: none;
}

/* ══════════════════ LA BARRE ══════════════════ */

/* Meme hauteur que la barre du site (72px) et meme marque. Le retrait
   horizontal, lui, reste celui de la page : c'est ce qui met la marque pile
   au-dessus du titre. Aligner sur le retrait du site (jusqu'a 128px) aurait
   decale la barre de vingt-trois pixels par rapport a tout ce qui la suit. */
.wl-barre {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--wl-barre-h);
  padding: 0 var(--wl-marge);
}

.wl-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', var(--wl-police);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--wl-encre);
}
.wl-marque img { display: block; width: 22px; height: 22px; }

/* ── Le selecteur de langue, repris de la barre du site ──
   Une pastille et un menu, pas deux boutons cote a cote : la forme doit tenir
   a cinq langues le jour ou l'allemand et le portugais arrivent, et deux
   pastilles alignees ne tiennent pas a cinq. */
.wl-choix { position: relative; flex: none; }

.wl-choix__btn {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 12px;
  border-radius: 50px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--wl-encre);
  font-family: 'Sora', var(--wl-police);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: border-color 0.25s ease;
}
.wl-choix__btn:hover { border-color: rgba(255, 255, 255, 0.3); }

.wl-choix__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.wl-choix.est-ouvert .wl-choix__chevron { transform: rotate(180deg); }

.wl-choix__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 10;
}
.wl-choix.est-ouvert .wl-choix__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wl-choix__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--wl-faible);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.wl-choix__opt:hover { background: rgba(255, 255, 255, 0.06); color: var(--wl-encre); }
.wl-choix__opt.on { color: var(--wl-encre); }
/* Le point n'apparait que sur la langue courante : un seul accent, discret. */
.wl-choix__opt.on::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wl-cta-fond);
}

/* ══════════════════ LE CORPS ══════════════════ */

/* ── La regle de la page : un ecran, puis le pied ──
   La barre et le corps remplissent exactement une hauteur de fenetre. Le pied
   commence donc au pixel ou la fenetre s'arrete : il faut descendre pour le
   voir, et il n'est jamais coupe par le bord de l'ecran.

   C'est une hauteur MINIMALE, pas une hauteur fixe : sur un tres petit
   telephone, ou en paysage, le formulaire seul depasse une fenetre, et la
   section grandit plutot que d'ecraser ce qu'on doit lire. Mieux vaut faire
   defiler un peu que rendre le champ inatteignable.

   svh et non vh : sur telephone, vh vaut la fenetre BARRE D'ADRESSE CACHEE,
   c'est-a-dire une hauteur qu'on n'a pas au chargement. La page depasserait
   d'une centaine de pixels a l'arrivee, ce qui est exactement le defaut qu'on
   repare ici. La ligne vh au-dessus reste pour les navigateurs d'avant 2022. */
.wl-corps {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wl-barre-h));
  min-height: calc(100svh - var(--wl-barre-h));
}

/* nowrap et non wrap : le repli du flex etait un piege silencieux. Entre 900 et
   1300px, la colonne et le plateau ne tenaient plus cote a cote, le navigateur
   les empilait tout seul, et cette pile-la n'avait AUCUNE des regles de la pile
   d'en dessous : ni mise a l'echelle, ni fondu. D'ou un haut de page de 1300px
   dans une fenetre de 800, et le pied projete tres loin sous le bord.
   Desormais l'empilement est une decision, prise a 1240px, pas un accident. */
.wl-hero {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(16px, 2vw, 28px) var(--wl-marge) clamp(20px, 2vw, 32px);
}

.wl-colonne {
  flex: 1 1 540px;
  min-width: 0;
  max-width: 612px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ── Le surtitre ── */
.wl-surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wl-faible);
  animation: wlParait 0.5s both;
}
.wl-surtitre--nu { justify-content: center; }

.wl-point {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wl-corail);
  flex: none;
}

/* ── Le titre et son defile ── */
.wl-dire { display: flex; flex-direction: column; gap: 24px; }
.wl-dire--centre { align-items: center; gap: 18px; text-align: center; }

.wl-titre {
  margin: 0;
  font-weight: 600;
  font-size: clamp(31px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--wl-titre);
}
.wl-titre--fini { font-size: clamp(30px, 3.4vw, 48px); }

/* Le corps du defile n'est pas fixe : la plus longue des six phrases doit tenir
   dans la colonne, sinon le rouleau la coupe au milieu d'un mot. Le script
   mesure et pose --wl-defile-echelle ; elle vaut 1 tant que tout rentre, donc
   la maquette est respectee partout ou elle tenait deja. */
.wl-defile {
  display: block;
  height: 1.1em;
  overflow: hidden;
  color: var(--wl-corail);
  font-size: calc(var(--wl-defile-base, 1) * var(--wl-defile-echelle, 1) * 1em);
}
.wl-defile__piste {
  display: block;
  animation: wlDefile var(--wl-defile-duree, 18s) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.wl-defile__piste > span {
  display: block;
  line-height: 1.1;
  white-space: nowrap;
}

.wl-pitch {
  margin: 0;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--wl-doux);
  max-width: 56ch;
}
.wl-pitch b { color: var(--wl-titre); font-weight: 500; }
.wl-dire--centre .wl-pitch { max-width: 48ch; }

/* ── Le bloc d'inscription ── */
.wl-bloc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  animation: wlMonte 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.wl-roles {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 100px;
  background: var(--wl-verre);
  box-shadow: inset 0 0 0 1px var(--wl-filet);
}
.wl-role {
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 15px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}
.wl-role.est-active {
  background: var(--wl-verre-fort);
  color: var(--wl-encre);
  box-shadow: inset 0 0 0 1px var(--wl-filet-fort);
}
.wl-role:not(.est-active):hover { color: rgba(255, 255, 255, 0.75); }

.wl-forme {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 599px;
  height: 60px;
  padding: 8px 8px 8px 20px;
  border-radius: 40px;
  background: #FFFFFF;
}

.wl-champ {
  flex-grow: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  color: #14140F;
}
.wl-champ::placeholder {
  color: rgba(89, 89, 89, 0.75);
  transition: color 140ms ease-out;
}

/* L'etat de saisie. Trois manques a la fois, tous corriges ici.
   1. `outline: none` sur le champ annulait aussi l'anneau de focus au clavier :
      la page n'avait donc AUCUN etat de saisie, ni a la souris ni au clavier.
   2. Le champ est transparent dans une pastille blanche. Le reflexe serait de
      cerner le champ, mais on ne verrait rien : c'est la PASTILLE qui doit
      reagir, elle seule a une frontiere visible sur le noir.
   3. L'invite restait affichee derriere le curseur, donc le champ avait l'air
      deja rempli. Elle s'efface des qu'on prend la main et revient si on
      repart sans rien ecrire. */
.wl-forme {
  transition: box-shadow 180ms ease-out;
}
.wl-forme:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(255, 133, 105, 0.55),
    0 0 0 3px var(--wl-corail-voile);
}
.wl-champ:focus::placeholder { color: transparent; }

/* Le curseur reprend l'accent de la page : sur une pastille blanche, un trait
   noir clignotant ne se remarque pas, un trait corail si. */
.wl-champ { caret-color: #F45E7C; }

@media (prefers-reduced-motion: reduce) {
  .wl-forme, .wl-champ::placeholder { transition: none; }
  /* Le point d'attente cesse de battre mais reste visible : c'est lui qui
     dit qu'il se passe quelque chose, le retirer priverait du signal les
     personnes qui ont justement demande moins de mouvement. */
  .wl-cta.est-en-vol::before { animation: none; }
}

/* Le conteneur de la garde Turnstile. En mode invisible elle ne dessine rien,
   mais on la sort quand meme de la mise en page : un cadre de zero pixel qui
   apparaitrait un jour dans une mise a jour de Cloudflare ne doit pas pouvoir
   decaler le formulaire. */
/* La garde est invisible TANT QUE Cloudflare se contente de regarder. Mais un
   widget invisible peut decider qu'il a besoin d'une interaction, et il faut
   alors qu'il ait un endroit REEL ou dessiner : avec width:0, overflow:hidden
   et surtout pointer-events:none, le defi etait invisible ET incliquable, donc
   la personne restait bloquee sur "on n'a pas pu confirmer que tu es humain"
   sans jamais voir quoi que ce soit a faire. Hauteur nulle et debordement
   visible : rien ne s'affiche dans le cas normal, et un defi eventuel apparait
   au milieu de l'ecran, cliquable. */
#wl-garde {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  overflow: hidden;
  z-index: 60;
}

/* Cloudflare previent AVANT de poser une question, et previent quand c'est
   fini : ce sont ses deux rappels before-interactive et after-interactive qui
   posent et retirent cette classe. Le reste du temps le conteneur reste a zero
   pixel, donc la page ne montre rien. Sans ce declencheur, laisser de la place
   au defi affichait une boite grise en permanence au milieu de l'ecran. */
#wl-garde.est-sollicitee {
  width: min(320px, calc(100vw - 40px));
  height: auto;
  overflow: visible;
  padding: 16px;
  border-radius: 18px;
  background: var(--wl-carte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62), inset 0 0 0 1px var(--wl-carte-filet);
}

/* Le piege a robots : hors ecran plutot que display:none, parce qu'un champ
   masque par display n'est pas rempli par les remplisseurs automatiques. */
.wl-piege {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.wl-cta {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--wl-cta-fond);
  color: var(--wl-cta-encre);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: var(--wl-cta-ombre);
  transition: opacity 0.18s, transform 0.18s;
}
.wl-cta:hover { opacity: 0.92; }
.wl-cta:active { transform: scale(0.97); }
.wl-cta[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* ── L'attente ──
   Le libelle passe de "Notify me" a "One moment...", et ces deux mots n'ont
   pas la meme largeur : sans largeur minimale, le bouton retrecissait sous le
   doigt au moment precis ou la personne venait d'appuyer. La largeur est donc
   posee une fois par le plus long des deux, et plus rien ne bouge.
   Le clic est neutralise pendant ce temps : deux appuis rapides envoyaient
   deux inscriptions. */
.wl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
}
.wl-cta.est-en-vol {
  opacity: 0.9;
  pointer-events: none;
  gap: 8px;
}
/* Un point qui bat, pas un anneau qui tourne : la page n'a aucune forme
   circulaire en mouvement, et elle a deja ce point de 5 a 7 px dans le
   surtitre et sur la pastille de presence. Un simple changement de mot se
   rate sur une connexion lente, qui est le seul moment ou cet etat existe. */
.wl-cta.est-en-vol::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: wl-bat 1s ease-in-out infinite;
}
@keyframes wl-bat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* ── L'ouverture ──
   Le seul endroit ou le corail s'allume pour dire un fait et non la marque :
   ce n'est pas une alerte, c'est l'accent qui s'allume. La rangee garde sa
   place et son rythme, elle cesse simplement de compter. */
.wl-horloge.est-ouvert .wl-horloge__mot { display: none; }
.wl-horloge.est-ouvert .wl-horloge__temps {
  color: var(--wl-corail);
  font-variant-numeric: normal;
}
.wl-horloge.est-ouvert .wl-horloge__temps::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 9px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--wl-corail);
  box-shadow: 0 0 0 4px rgba(255, 133, 105, 0.16);
}

/* ── La fente des defauts ──
   Elle est TOUJOURS dans la mise en page, vide ou pleine. C'est tout l'objet
   de cette regle : avec un attribut hidden, l'apparition du message poussait
   la preuve sociale, le compte a rebours et le pied de page vers le bas, et
   la page sautait sous les yeux de quelqu'un a qui on vient de dire non.
   Mesure : rangee et hauteur de page identiques au pixel a 320, 360, 390
   et 1440 px, avec et sans message. */
.wl-erreur {
  margin: -4px 0 0;
  padding-left: 22px;          /* aligne avec le texte saisi dans la pilule */
  min-height: 20px;            /* une ligne, la place est prise d'avance */
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--wl-faute);
}

/* L'anneau du champ. Il change une fois et a peine : pas de fond teinte, pas
   de deplacement, rien qui bouge sur le bouton. La surface blanche est deja
   la chose la plus lumineuse de la page, un simple filet y suffit ; un lavis
   rouge se lirait comme un champ casse et non comme un message a lire. */
.wl-forme.est-en-faute {
  box-shadow: inset 0 0 0 1.5px var(--wl-faute-anneau);
}

/* ── La preuve sociale ──
   nowrap partout, et pas seulement sur telephone : le repli faisait tomber la
   phrase SOUS les visages des que la colonne se resserrait, et des visages
   seuls sur une ligne ne prouvent plus rien - c'est le lien entre les gens et
   ce qu'on dit d'eux qui porte la phrase. */
.wl-preuve {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.wl-preuve > span { min-width: 0; }
.wl-visages { display: flex; align-items: center; flex: none; }
.wl-visages img {
  display: block;
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--wl-fond);
}
.wl-visages img + img { margin-left: -9px; }

/* ── Le compte a rebours ── */
.wl-horloge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 6px;
}
.wl-horloge--centre { justify-content: center; padding-top: 0; }

.wl-horloge__mot {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wl-tres-faible);
}
.wl-horloge__temps {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--wl-titre);
}
.wl-horloge__quand { font-weight: 400; font-size: 13px; color: var(--wl-tres-faible); }
.wl-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

/* Le point de separation appartient a la date, pas a la ligne : pose en
   element autonome, il restait accroche au compte a rebours quand la date
   passait a la ligne suivante, et laissait une puce orpheline en bout de
   ligne. Colle a la date, il la suit ou qu'elle aille. */
.wl-horloge .wl-sep { display: none; }
.wl-horloge__quand::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  vertical-align: middle;
}

/* ══════════════════ L'ETAT « place prise » ══════════════════ */

.wl-fini {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  padding: 40px var(--wl-marge) 60px;
}

.wl-coche {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wl-corail-voile);
  box-shadow: inset 0 0 0 1px rgba(255, 133, 105, 0.4);
  color: var(--wl-corail);
  animation: wlMonte 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wl-tenue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--wl-verre);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 100%;
}
.wl-tenue span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L'adresse est la PREUVE qu'on a la bonne : coupee, elle ne prouve plus rien.
   Elle etait rognee en trois points de suspension des qu'elle ne tenait pas sur
   une ligne. Mesure a 320px, adresse courante : « Held for » 192px,
   « Reserve pour » 224px, « Reservado para » 238px pour 230px disponibles.
   L'espagnol coupait donc, mais le defaut n'est pas espagnol : une adresse
   longue coupait aussi en anglais, jusqu'a 414px.

   Le seuil de largeur serait un mauvais remede : la bonne question n'est pas
   « quel ecran » mais « est-ce que ca tient ». La pastille passe donc a la
   ligne quand il le faut, et seulement quand il le faut. Sur une seule ligne,
   elle est au pixel pres celle d'avant : 38px de haut. */
.wl-tenue {
  height: auto;
  min-height: 38px;
  padding: 8px 16px;
  align-items: flex-start;
}
.wl-tenue .wl-point { margin-top: 7px; }
.wl-tenue span:last-child {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.wl-retour {
  font-weight: 500;
  font-size: 13px;
  color: var(--wl-faible);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 3px;
  transition: color 0.18s, border-color 0.18s;
}
.wl-retour:hover { color: var(--wl-encre); border-bottom-color: var(--wl-faible); }

/* ══════════════════ LE LIEN DE PARRAINAGE ══════════════════
   La contrepartie de la promesse faite dans l'email : la personne repart avec
   son lien, sur la page, sans avoir a retrouver un courrier.

   Une seule regle de forme commande tout le bloc : le lien ne doit JAMAIS etre
   coupe en trois points. Un lien tronque n'est pas approximatif, il est
   inutilisable, et l'oeil ne voit pas la difference. Il passe donc a la ligne
   plutot que de rentrer de force, et la boite grandit avec lui. */

.wl-partage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.wl-partage__titre {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wl-faible);
}

.wl-partage__boite {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  min-height: 54px;
  padding: 8px 8px 8px 22px;
  border-radius: 28px;
  background: var(--wl-verre);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  max-width: 100%;
}

.wl-partage__lien {
  flex-grow: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--wl-encre);
  text-align: left;
  /* Un clic selectionne le lien entier : c'est la sortie de secours quand le
     navigateur refuse la copie automatique. Le prefixe n'est pas decoratif,
     Safari et iOS ignorent la propriete sans lui, et c'est exactement la ou la
     copie automatique echoue le plus souvent. */
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
  overflow-wrap: anywhere;
}

.wl-partage__copier {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-weight: 600;
  font-size: 13px;
  color: var(--wl-encre);
  transition: background 0.18s, transform 0.12s;
}
.wl-partage__copier:hover { background: rgba(255, 255, 255, 0.16); }
.wl-partage__copier:active { transform: scale(0.97); }
.wl-partage__copier[data-fait] {
  background: var(--wl-corail-voile);
  box-shadow: inset 0 0 0 1px rgba(255, 133, 105, 0.4);
  color: var(--wl-corail);
}

.wl-partage__note {
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  max-width: 44ch;
}

.wl-partage__fine {
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.24);
  max-width: 52ch;
  margin-top: -6px;
}

@media (max-width: 520px) {
  .wl-partage__boite {
    width: 100%;
    max-width: 360px;
    gap: 8px;
    padding: 8px 8px 8px 16px;
  }
  .wl-partage__lien { font-size: 13px; }
}

/* ══════════════════ LE PIED ══════════════════
   Repris du pied du site : panneau noir, coins hauts arrondis, ombre portee
   vers le haut, et le monogramme geant qui touche les deux bords. Ce qui n'est
   PAS repris : la hauteur d'un ecran entier et son mouvement de reveal. Le
   pied d'une page d'attente ne merite pas la place d'une page, et le corps du
   monogramme descend de 21vw a 13vw pour la meme raison. */

.wl-pied {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Aucune marge : le corps s'arrete pile au bas de la fenetre, et le panneau
     noir commence au pixel suivant. Une marge ici creuserait une bande de fond
     que personne ne verrait jamais, sauf pendant le defilement. */
  padding-top: 22px;
  background: #000000;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}

.wl-pied__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 var(--wl-marge) 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 400;
  font-size: 12.5px;
}

.wl-reseaux { display: flex; gap: 1.1rem; }
.wl-reseau {
  display: flex;
  color: rgba(240, 237, 232, 0.5);
  transition: color 0.2s;
}
.wl-reseau:hover { color: var(--wl-encre); }

.wl-pied__liens { display: flex; align-items: center; gap: 20px; }
.wl-pied__liens a { color: var(--wl-faible); transition: color 0.18s; }
.wl-pied__liens a:hover { color: var(--wl-encre); }

/* Le monogramme deborde des deux bords de la fenetre, comme sur le site : il
   est pose en pleine largeur de fenetre et recentre par une marge negative,
   parce que son conteneur, lui, a des retraits. */
.wl-monogramme {
  margin: 18px 0 0;
  margin-left: calc(-50vw + 50%);
  width: 100vw;
  font-family: 'Sora', var(--wl-police);
  font-size: 13vw;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #1A1A1A;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.wl-pied__bas {
  padding: 6px var(--wl-marge) 14px;
  text-align: center;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--wl-tres-faible);
}
.wl-pied__bas b { font-weight: 400; color: rgba(255, 255, 255, 0.5); }

/* ═══════════════════════════════════════════════════════════════════════
   LE PLATEAU
   Un repere fixe de 610 x 716 (344 x 664 sur telephone) dans lequel chaque
   piece a une position au pixel. Le bloc entier est ensuite mis a l'echelle
   d'un seul facteur : la composition ne se deforme jamais, elle retrecit.
   ═══════════════════════════════════════════════════════════════════════ */

.wl-plateau {
  --bw: 610px;
  --bh: 716px;
  flex: 0 0 auto;
  position: relative;
  width: calc(var(--bw) * var(--wl-k));
  height: calc(var(--bh) * var(--wl-k));
  margin-inline: auto;
}
.wl-plateau__scene {
  position: absolute;
  left: 0; top: 0;
  width: var(--bw);
  height: var(--bh);
  transform: scale(var(--wl-k));
  transform-origin: left top;
}
.wl-plateau__scene > * { position: absolute; }

/* ── Le telephone ──
   La hauteur n'est pas decorative. Le cadre est reduit par une transformation,
   et une transformation ne change PAS la boite de mise en page : sans elle, ce
   conteneur garde la hauteur du telephone a taille reelle (1020px) et etend la
   zone defilable du document d'une vingtaine de pixels APRES le pied. On voyait
   donc une bande de fond sous le pied, sans rien dedans. 1020 a 0,7 fait 714.

   La LARGEUR, elle, reste libre, et ce n'est pas un oubli : la borner rognait
   le cadre blanc lui-meme. Le cadre est un bloc en largeur auto, donc il
   remplit son parent ; a 296px il tombait a 207px de large a l'ecran autour
   d'un ecran de 281px, et le telephone se retrouvait plus etroit que son
   propre affichage. Le debordement horizontal, lui, n'a jamais pose de
   probleme : html le masque deja. */
.wl-tel { left: 240px; top: 0; height: 714px; }
.wl-tel__coque {
  transform: scale(0.7);
  transform-origin: left top;
  padding: 10px;
  border-radius: 60px;
  background: #FFFFFF;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.wl-tel__ecran {
  position: relative;
  width: 402px;
  height: 1000px;
  border-radius: 50px;
  overflow: hidden;
  background: var(--wl-fond);
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.35);
}
.wl-tel__ecran > * { position: absolute; }

.wl-tel__barre {
  left: 0; top: 0;
  width: 100%; height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 34px 0 46px;
  z-index: 30;
}
.wl-tel__heure { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.wl-tel__etat { display: flex; align-items: center; gap: 7px; }

.wl-pile { position: relative; width: 26px; height: 12px; display: inline-block; }
.wl-pile__boite { position: absolute; inset: 0; border-radius: 4px; border: 1px solid; opacity: 0.4; }
.wl-pile__jus { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 18px; border-radius: 2px; background: currentColor; }
.wl-pile__bec { position: absolute; right: -3px; top: 4px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; opacity: 0.4; }
.wl-pile > span { position: absolute; }

.wl-tel__ile {
  left: 143px; top: 12px;
  width: 116px; height: 34px;
  border-radius: 100px;
  background: #000000;
  z-index: 40;
}

.wl-tel__photo {
  left: 0; top: 0;
  width: 402px; height: 344px;
  background: url('../assets/waitlist/creatrice.webp') center 34% / cover no-repeat;
}
.wl-tel__voile {
  left: 0; top: 170px;
  width: 402px; height: 174px;
  background: linear-gradient(rgba(10, 9, 9, 0) 0%, rgba(10, 9, 9, 0.55) 58%, rgb(10, 9, 9) 100%);
}
.wl-tel__pages {
  left: 0; top: 312px;
  width: 402px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.wl-tel__pages span {
  width: 26px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.wl-tel__pages span.est-active { background: #FFFFFF; }

.wl-tel__nom {
  left: 0; top: 346px;
  width: 402px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
}
.wl-tel__meta {
  left: 0; top: 384px;
  width: 402px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.wl-tel__dispo { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.82); }
.wl-pastille { width: 7px; height: 7px; border-radius: 50%; background: #1AC877; }

.wl-tel__bio {
  left: 32px; top: 416px;
  width: 338px;
  margin: 0;
  text-align: center;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.55;
  color: #BFBAC4;
}

.wl-tel__reseaux {
  left: 0; top: 482px;
  width: 402px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.wl-tel__reseaux span {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-tel__onglets {
  left: 20px; top: 540px;
  width: 362px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 13px;
  color: var(--wl-faible);
}
.wl-tel__onglets .est-active { position: relative; color: var(--wl-encre); }
.wl-tel__onglets .est-active b { color: var(--wl-faible); font-weight: 500; }
.wl-tel__onglets .est-active i {
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 2px;
  border-radius: 2px;
  background: var(--wl-corail);
}

.wl-tel__filtres {
  left: 20px; top: 580px;
  width: 362px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wl-tel__filtres span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}
.wl-tel__filtres span:last-child { color: rgba(255, 255, 255, 0.32); }
.wl-tel__filtres span.est-active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--wl-filet-fort);
  color: var(--wl-encre);
}

.wl-tel__services {
  left: 20px; top: 622px;
  width: 362px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wl-service {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 80px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.043);
  box-shadow: inset 0 0 0 1px var(--wl-filet);
}
.wl-service__ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-service__ico img { display: block; width: 40px; height: 40px; object-fit: contain; }
.wl-service__dire { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 0; }
.wl-service__dire b { font-weight: 700; font-size: 14px; }
.wl-service__dire i { font-style: normal; font-weight: 400; font-size: 11.5px; line-height: 1.35; color: #BFBAC4; }
.wl-service__dire em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--wl-corail); }
.wl-service__dire em span { font-weight: 400; color: rgba(255, 255, 255, 0.4); }

/* ── Les trois cartes flottantes ── */
.wl-carte {
  border-radius: 16px;
  background: var(--wl-carte);
  box-shadow: inset 0 0 0 1px var(--wl-carte-filet), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}
.wl-carte__mot { font-weight: 400; font-size: 13px; letter-spacing: -0.01em; color: rgba(175, 175, 175, 0.69); }

.wl-carte--gain {
  left: 80px; top: 104px;
  width: 218px;
  padding: 14px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--wl-corail);
}
.wl-carte__somme {
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wl-encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wl-carte__pied { display: flex; align-items: flex-end; gap: 10px; }
.wl-carte__pied svg { display: block; overflow: visible; flex-shrink: 0; }

.wl-carte--solde {
  left: 0; top: 258px;
  width: 279px; height: 294px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: inset 0 0 0 1px var(--wl-carte-filet), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  color: var(--wl-corail);
}
.wl-solde__tete { display: flex; flex-direction: column; gap: 8px; padding: 7px 0; }
.wl-solde__somme { font-weight: 500; font-size: 36px; line-height: 1; letter-spacing: -0.01em; color: var(--wl-encre); }
.wl-solde__delta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.6);
}
.wl-solde__delta svg { display: block; flex: none; }

.wl-barres {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(70, 70, 70, 0.23);
}
.wl-barres span {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
}
.wl-barres i { width: 40px; border-radius: 5px; background: rgba(255, 255, 255, 0.13); }
.wl-barres .est-active { color: var(--wl-titre); }
.wl-barres .est-active i { background: var(--wl-corail); }

.wl-carte--verse {
  left: 368px; top: 566px;
  width: 196px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.wl-verse__coche {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 133, 105, 0.14);
  color: var(--wl-corail);
}
.wl-verse__dire { display: flex; flex-direction: column; gap: 4px; }
.wl-verse__dire span { font-weight: 400; font-size: 11px; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.62); }
.wl-verse__dire b { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; }

/* ── Les trois traits dessines a la main ── */
.wl-trait img {
  display: block;
  animation: wlTrace 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wl-trait--sourire  { left: 36px;  top: 44px;  transform: rotate(16deg);  animation: wlFlotte 7s ease-in-out infinite; }
.wl-trait--fleche   { left: 552px; top: 214px; transform: rotate(24deg);  animation: wlFlotte 7.6s ease-in-out 0.3s infinite; }
.wl-trait--vague    { left: 176px; top: 632px; transform: rotate(-20deg); animation: wlFlotte 8s ease-in-out 0.6s infinite; }
.wl-trait--fleche img  { animation-delay: 0.7s; }
.wl-trait--vague img   { animation-delay: 0.9s; }

/* Sur l'ecran de confirmation, les deux traits encadrent le vide plutot que
   de le laisser nu. Ils sont poses en absolu par rapport a la section. */
.wl-trait--sourire-ok,
.wl-trait--vague-ok { position: absolute; }
.wl-trait--sourire-ok { left: calc(50% - 386px); top: 15%; transform: rotate(16deg); animation: wlFlotte 7s ease-in-out infinite; }
.wl-trait--vague-ok   { left: calc(50% + 312px); bottom: 17%; transform: rotate(-20deg); animation: wlFlotte 8s ease-in-out 0.6s infinite; }
.wl-trait--vague-ok img { animation-delay: 0.5s; }

/* ══════════════════ LE TELEPHONE ══════════════════ */

/* ── La preuve sociale sur telephone ──
   Sous 620px, la phrase ne tient plus a cote des visages a taille pleine, et
   le repli du flex la faisait tomber DESSOUS : les visages se retrouvaient
   seuls sur une ligne, ce qui casse le lien entre les gens et ce qu'on dit
   d'eux. On enleve le repli, on descend les visages de 20 %, et la phrase se
   replie sur elle-meme A COTE d'eux. Une ligne unique n'est pas atteignable a
   cette largeur : il faudrait 9px de corps, c'est-a-dire illisible. */
@media (max-width: 620px) {
  /* Sous cette largeur, la date passe toujours a la ligne, dans les deux
     langues : le point de separation n'y separe plus rien, le retour a la
     ligne s'en charge. Au-dessus, il fait son travail sur une seule ligne. */
  .wl-horloge__quand::before { display: none; }

  .wl-preuve { gap: 12px; }
  .wl-visages img { width: 27px; height: 27px; }
  .wl-visages img + img { margin-left: -7px; }
}

/* ══════════════════ ECRANS COURTS, DEUX COLONNES ══════════════════
   Un portable de 768px de haut n'a pas la meme place qu'un ecran de bureau, et
   c'est la colonne de texte qui deborde en premier. On resserre les ecarts,
   jamais les corps de police : ce qui se lit reste de la meme taille, c'est le
   vide entre les blocs qui se reduit. Reserve aux deux colonnes : sur
   telephone, la pile a deja ses propres regles. */
@media (min-width: 900px) and (max-height: 830px) {
  .wl-hero { padding-top: 12px; padding-bottom: 14px; }
  .wl-colonne { gap: 20px; }
  .wl-dire { gap: 18px; }
  .wl-bloc { gap: 13px; }
  .wl-pitch { line-height: 1.5; }
  .wl-horloge { padding-top: 0; }
}

@media (max-width: 899px) {

  /* ── Un ecran, une composition ──
     Le texte en haut, l'image en dessous. Comme l'ensemble doit tenir dans une
     fenetre, l'image prend EXACTEMENT ce que le texte lui laisse, et ce qui
     depasse se fond dans le noir.
     Un fondu, pas une coupe : une image qui se dissout dans le fond est un
     parti pris, une image sectionnee est une panne. Et ce qui reste visible
     est le haut de la composition, c'est-a-dire le meilleur : le visage et la
     carte de gain. Le bas, les quatre services, est ce qu'on perd le mieux. */
  .wl-hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    padding-bottom: 0;
  }
  .wl-colonne { flex: 0 0 auto; max-width: none; }
  /* Le bloc d'inscription garde sa largeur de 600px : le formulaire y est deja
     borne a 599, et sans cette borne le segment « je cree / je discute »
     s'etirait tout seul sur 720px au-dessus d'un champ de 599. */

  .wl-plateau {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }

  /* Le repere compact : 344 x 664 au lieu de 610 x 716. */
  .wl-plateau { --bw: 344px; --bh: 664px; }

  /* 1020 a 0,56 fait 572. Meme raison qu'en grand, largeur libre comprise. */
  .wl-tel { left: 52px; height: 572px; }
  .wl-tel__coque { transform: scale(0.56); }

  .wl-carte--gain  { left: 0; top: 34px; width: 214px; transform: scale(0.9); transform-origin: top left; }
  .wl-carte--solde { left: 36px; top: 404px; transform: scale(0.8); transform-origin: top left; }
  .wl-carte--verse { visibility: hidden; }

  .wl-trait--sourire { left: -10px; top: 250px; }
  .wl-trait--sourire img { width: 52px; }
  .wl-trait--fleche,
  .wl-trait--vague { display: none; }

  /* Memes retraits que la barre du site sous 900px. Rien d'autre ne change :
     il n'y a ni menu a ouvrir, ni lien a replier. */
  .wl-choix__btn { height: 30px; padding: 0 8px 0 10px; font-size: 0.6875rem; }
  .wl-choix__menu { min-width: 138px; }

  /* Le texte se resserre pour laisser respirer l'image. Aucun corps de police
     ne descend sous 15px : ce qui est gagne en place ne doit jamais etre pris
     sur la lisibilite. */
  .wl-colonne { gap: 18px; }
  .wl-bloc { gap: 12px; }
  .wl-dire { gap: 16px; }
  .wl-pitch { font-size: 15.5px; line-height: 1.55; }
  .wl-horloge { padding-top: 0; }

  /* La maquette rapetissait le defile d'office a 0,72em sur telephone. La
     mesure dit que ce n'est pas necessaire : la plus longue des six phrases
     tient a 0,90 dans la colonne. On laisse donc la mesure decider, et la
     phrase gagne un quart de sa taille sur telephone. */

  /* Le segment et le formulaire prennent toute la largeur : sous 900px, un
     bouton de 44px colle a droite d'un champ est une cible qu'on rate. */
  .wl-roles { align-self: stretch; }
  .wl-role { flex: 1; text-align: center; padding: 12px 10px; }

  .wl-forme {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    height: auto;
    padding: 9px;
    border-radius: 26px;
  }
  .wl-champ { height: 44px; padding: 0 12px; }
  .wl-cta { width: 100%; height: 48px; }

  /* Deux lignes reservees : le message du controle anti-robot est le plus
     long des quatre et c'est lui qui fixe cette hauteur. Mesure : il passe a
     deux lignes des 320 px et remplit exactement la place prevue, donc rien
     en dessous ne bouge. */
  .wl-erreur { padding-left: 4px; padding-right: 4px; min-height: 38px; }

  .wl-trait--sourire-ok { left: 16px; top: 24px; }
  .wl-trait--sourire-ok img { width: 60px; }
  .wl-trait--vague-ok { left: auto; right: 16px; bottom: 20px; }
  .wl-trait--vague-ok img { width: 52px; }

  /* Sur telephone les deux rangs du pied s'empilent et se centrent, et le
     monogramme grossit un peu en proportion : a 13vw il ne mesurerait plus
     que 50px, c'est-a-dire un mot perdu au milieu du noir plutot qu'une
     signature. */
  .wl-pied__haut {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  .wl-pied__sep { display: block; height: 4px; }
  .wl-pied__liens { align-self: center; gap: 22px; }
  .wl-monogramme { font-size: 19vw; }
}

/* ══════════════════ TELEPHONES COURTS ══════════════════
   Sous 720px de haut - un iPhone SE, un vieil Android - le formulaire seul
   remplit l'ecran. Il ne resterait a l'image qu'un bandeau de trois
   centimetres, c'est-a-dire rien de reconnaissable : on la retire plutot que
   d'en montrer une lichette, et le texte prend l'ecran entier.
   Les ecarts se resserrent encore, les corps de police tiennent bon. */
@media (max-width: 899px) and (max-height: 719px) {
  .wl-plateau { display: none; }
  .wl-hero { gap: 0; padding-top: 10px; }
  .wl-colonne { gap: 14px; }
  .wl-dire { gap: 12px; }
  .wl-bloc { gap: 10px; }
  .wl-forme { gap: 8px; padding: 8px; }
  .wl-champ { height: 42px; }
  .wl-cta { height: 46px; }
  .wl-role { padding: 10px; }

  /* Le titre et le champ ne bougent pas d'un dixieme : ce sont eux qu'on lit
     et qu'on touche. Les trois textes d'accompagnement descendent d'un demi
     point. Le francais pese soixante-seize pixels de plus que l'anglais sur
     cette page - phrase plus longue, preuve sur trois lignes, date plus
     bavarde - et c'est donc lui qui commande la mesure. */
  .wl-pitch { font-size: 14.5px; line-height: 1.5; }
  .wl-preuve { font-size: 13px; }
  .wl-horloge__quand { font-size: 12px; }
}

/* Les tres petits telephones (iPhone SE de premiere generation, 320px de
   large) : le titre passe a 27px, sinon il occupe cinq lignes a lui seul. */
@media (max-width: 359px) {
  .wl-titre { font-size: 27px; }
  .wl-preuve { font-size: 13px; }
}

/* Sous 600px de haut, la date en clair passe a la trappe : le compte a rebours
   dit deja tout ce qu'il faut savoir, et c'est la seule ligne qu'on peut
   retirer sans rien enlever au sens. */
@media (max-width: 899px) and (max-height: 599px) {
  .wl-horloge__quand,
  .wl-horloge .wl-sep { display: none; }
}

/* Le paysage sur telephone : 390px de haut, dont 72 pour la barre. Aucune
   mise en page ne fait tenir un titre, un texte et un formulaire dans 318px
   sans les rendre illisibles. On rend donc la barre plus basse, on resserre
   une derniere fois, et on assume que cette orientation-la se fait defiler :
   mieux vaut un ecran et demi lisible qu'un ecran illisible. */
@media (max-width: 899px) and (max-height: 480px) {
  .wl { --wl-barre-h: 56px; }
  .wl-titre { font-size: 27px; }
  .wl-pitch { font-size: 14.5px; }
  .wl-surtitre { display: none; }
}

/* ══════════════════ LES MOUVEMENTS ══════════════════ */

@keyframes wlDefile {
  0%,     11%   { transform: translateY(0); }
  16.6%,  27.6% { transform: translateY(-1.1em); }
  33.3%,  44.3% { transform: translateY(-2.2em); }
  50%,    61%   { transform: translateY(-3.3em); }
  66.6%,  77.6% { transform: translateY(-4.4em); }
  83.3%,  94.3% { transform: translateY(-5.5em); }
  100%          { transform: translateY(-6.6em); }
}
@keyframes wlTrace  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
@keyframes wlFlotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes wlMonte  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wlParait { from { opacity: 0; } to { opacity: 1; } }

/* Le defile s'arrete sur sa premiere phrase, les traits ne flottent plus et
   rien n'apparait en glissant : la page reste entiere, elle cesse de bouger. */
@media (prefers-reduced-motion: reduce) {
  .wl-defile__piste,
  .wl-trait, .wl-trait img,
  .wl-surtitre, .wl-bloc, .wl-coche {
    animation: none !important;
  }
  .wl-choix__chevron, .wl-choix__menu { transition: none; }
}