/* ═══════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le mot-marque : Futura Std Condensed Bold, la fonte des titres de l'app,
   auto-hebergee ici comme dans talkify-web/app/fonts (meme fichier). Un seul
   poids, un seul usage : le nom en capitales dans la barre. ──────────────── */
@font-face {
  font-family: 'Futura Std';
  src: url('../assets/fonts/FuturaStdCondensedBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── La couche des jetons de cette page ─────────────────────────────── */
.wl {
  --wl-fond:        #0A0909;
  /* Le fond a 72 % : le givre de la barre quand la page defile, meme recette
     que la landing (nav--scrolled). Derive du fond, pas une couleur de plus. */
  --wl-fond-voile:  rgba(10, 9, 9, 0.72);
  --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; }
/* La toile derriere la page est NOIRE, comme sur la landing : sans elle, le
   gris du navigateur apparait derriere le pied quand l'elan depasse le bas.
   Et l'elan lui-meme est coupe : pas de rebond au-dela du pied, pas de
   glissement lateral. clip et non hidden : hidden sur html est ignore par le
   panoramique tactile d'iOS, clip est respecte. */
html { background: #000; }
html, body {
  overflow-x: clip;
  overscroll-behavior: none;
}

/* 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: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--wl-barre-h);
  padding: 0 var(--wl-marge);
  transition: background 0.45s ease, backdrop-filter 0.45s ease;
}

/* Le givre au defilement, comme la nav de la landing : fond a 72 % et flou de
   22px. Le liseret passe par une ombre et non par une bordure : une bordure
   ajouterait un pixel a la hauteur au moment ou la classe se pose, et tout ce
   qui suit sauterait d'autant. */
.wl-barre.est-scrollee {
  background: var(--wl-fond-voile);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 1px 0 var(--wl-filet);
}

.wl-marque {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Refonte 11 : le nom en Futura Condensed, 20px pour compenser la
     condensation, capitales, espacement +0.12em. Plus vertical et plus dense
     que l'ancien nom en Sora : c'est voulu, c'est la marque. */
  font-family: 'Futura Std', 'Futura Condensed', 'Futura', var(--wl-police);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  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;
}
/* La phrase finale du pitch n'est plus en gras : c'est un paragraphe a part,
   et l'espace du conteneur suffit a la faire ressortir (Kevin, 15/08). */
.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;
}

/* ── La vue de retour (JOI-250) ────────────────────────────────────── */
.wl-membre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 15px;
  border-radius: 100px;
  background: var(--wl-verre);
  box-shadow: inset 0 0 0 1px var(--wl-filet-fort);
  font-weight: 500;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-membre:empty { display: none; }
.wl-tuiles {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wl-tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
  padding: 18px 10px 15px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--wl-filet);
}
.wl-tuile__nombre {
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--wl-encre);
}
.wl-tuile__nombre--accent { color: var(--wl-corail); }
.wl-tuile__mot {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wl-tres-faible);
}
/* La ligne d'horloge de la vue de retour ne repete pas le compte des tuiles :
   elle ne porte que la date, et « Now open » le jour venu. */
.wl-horloge--revenant .wl-horloge__mot,
.wl-horloge--revenant .wl-horloge__temps { display: none; }
.wl-horloge--revenant.est-ouvert .wl-horloge__temps { display: inline; }
.wl-etapes {
  display: flex;
  align-items: flex-start;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wl-etape {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  text-align: left;
  padding: 0 26px;
}
.wl-etape + .wl-etape { border-left: 1px solid var(--wl-filet); }
.wl-etape__quand {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wl-corail);
}
.wl-etape__titre {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--wl-titre);
}
.wl-etape__texte {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wl-faible);
}

.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;
  -webkit-user-select: none;
  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;
  /* Le composant d'origine vit dans une grille a deux colonnes et prend la
     largeur qu'on lui donne. Ici c'est la scene qui commande : 250px laisse
     respirer le montant en 24px gras et la ligne de delta, sans mordre plus
     loin sur le telephone que la carte precedente. */
  width: 250px;
  /* Le retrait vit sur l'en-tete et le corps (p-6), pas sur la carte. */
  padding: 0;
  /* rounded-lg du composant, et non le 16 de nos cartes : c'est la valeur du
     composant repris. Passer a 16 si on veut l'aligner sur la carte Balance. */
  border-radius: 8px;
  display: block;
}
/* ── La carte de revenu, portee du composant stats-cards (21st.dev) ──
   Chaque valeur ci-dessous est la traduction exacte d'une classe Tailwind du
   composant d'origine, pour qu'on puisse la verifier ligne a ligne :
     en-tete   flex flex-row items-center justify-between p-6 pb-2
     titre     text-sm font-medium leading-none tracking-tight
     icone     h-4 w-4 text-muted-foreground
     corps     p-6 pt-0
     montant   text-2xl font-bold
     delta     flex items-center pt-1 text-xs + la fleche mr-1 h-3 w-3
   Seule couleur changee : text-green-600 devient notre corail. */
.wl-carte__tete {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 24px 8px;
}
.wl-carte__titre {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--wl-encre);
}
.wl-carte__ico { display: block; flex-shrink: 0; color: var(--wl-faible); }

.wl-carte__corps { padding: 0 24px 24px; }
.wl-carte__somme {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--wl-encre);
  /* Le montant change pendant sa montee : sans chasse fixe, les chiffres
     dansent d'une image a l'autre. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wl-carte__delta {
  display: flex;
  align-items: center;
  padding-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--wl-corail);
  white-space: nowrap;
}
.wl-carte__delta svg { flex-shrink: 0; margin-right: 4px; }

.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) {
  .wl-tuiles { gap: 8px; }
  .wl-tuile { width: 72px; padding: 14px 6px 12px; }
  .wl-tuile__nombre { font-size: 28px; }
  .wl-etapes { flex-direction: column; gap: 20px; align-items: stretch; }
  .wl-etape { padding: 0; }
  .wl-etape + .wl-etape { border-left: none; }
  /* 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 empile, une composition ENTIERE ──
     Le texte en haut, l'image en dessous, et la page defile : elle defile de
     toute facon jusqu'au pied. L'ancien traitement donnait a l'image « ce que
     le texte lui laissait » avec un fondu vers le noir ; sur un iPhone
     standard il ne restait qu'une bande de 250px sur une scene de 664, le
     telephone etait decapite sous la carte de gain, sans visage ni services.
     Constat du 15/08/2026 : ce compromis ne vient d'aucune maquette, la
     reference acceptee le 13/08 ne connait que la scene complete. */
  .wl-hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
  }
  /* JOI-248 (mesure du 2026-09-03) : sans borne ni marge automatique, la
     colonne restait collee a gauche entre 620 et 899px, avec 150px de vide a
     droite dans une fenetre de 800. Bornee a sa largeur de bureau et centree,
     elle se lit comme une page et non comme un bureau ampute de sa scene. */
  .wl-colonne { flex: 0 0 auto; width: 100%; max-width: 612px; margin-inline: auto; }
  /* 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. */

  /* La scene garde sa taille pleine, comme en grand : la regle de base donne
     deja height = bh x k, on ne la remplace plus par « ce qui reste ».
     Le clip, lui, est OBLIGATOIRE : les boites de mise en page du cadre
     (402px non reduits par la transformation) debordent du repere, et sans
     clip elles elargissent la page, qui se met a panner horizontalement sur
     iOS. Mesure le 15/08/2026, deux heures apres l'avoir retire. */
  .wl-plateau { flex: 0 0 auto; overflow: clip; }

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

  /* 218 comme la maquette, et non 214 : la ligne du bas (courbe + legende)
     mesure 181px de contenu pour 186px utiles, quatre pixels de moins la
     faisaient deborder. La reduction a 0,9 fait le reste. */
  .wl-carte--gain  { left: 0; top: 34px; width: 250px; transform: scale(0.82); 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;
  }
  /* 16px et pas un de moins : sous ce seuil, Safari iOS zoome dans la page
     au moment ou le doigt touche le champ, et la mise en page part de cote. */
  .wl-champ { height: 44px; padding: 0 12px; font-size: 16px; }
  .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 le premier ecran, alors les ecarts se resserrent et les corps de
   police tiennent bon. L'image, elle, reste ENTIERE : la page defile, on ne
   retire plus la composition (l'ancien display:none datait du temps ou elle
   devait tenir dans la fenetre, retire le 15/08/2026). */
@media (max-width: 899px) and (max-height: 719px) {
  .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; }
}