/* La fenêtre de la liste d'attente (site-v2/liste-attente.js, 29 oct. 2026). D'après les trois cartes sombres que Tanguy a
   montrées (« Beyond the Horizon », « Join the waitlist », « Please check your email ») et dans notre identité : l'Encre, Inter,
   des filets fins, le symbole en icône d'app (celle de l'écran de chargement), le bouton gris plein de la carte du modèle. */

html.la-ouvert { overflow: hidden; scrollbar-gutter: stable; }

/* des marges latérales larges (Tanguy, 29 oct. : « rajouter du padding sur les côtés pour épurer encore l'UI ») : 4rem de chaque
   côté sur ordinateur, soit un contenu de 328 px ; 2rem au téléphone, 1.25rem sous 360 px pour garder les cases du code lisibles */
/* la fenêtre reste carrée : arrondie, elle rognait le bord de la carte dans les angles (mesuré le 29 oct. à 1920 px : l'angle
   à 0,4 fois l'épaisseur du côté) ; seule la carte porte l'arrondi */
.la { width: min(28.5rem, 100% - 2rem); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0;
  background: transparent; color: #F7F6F3; overflow: auto; overscroll-behavior: contain; }
.la::backdrop { background: rgba(10, 9, 13, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* bordure de 1,5 px (Tanguy, 29 oct. : « 0.5px plus épais ») ; pas d'ombre portée : la fenêtre la coupe, et dans ses angles
   carrés elle dessinerait un carré sombre */
.la-carte { position: relative; padding: 3rem 4rem 2.25rem; border-radius: 1.25rem; text-align: center;
  background: linear-gradient(180deg, #1B1A20, #141319 60%);
  box-shadow: inset 0 0 0 1.5px rgba(247, 246, 243, .1); }
/* le bord s'éclaire du côté de la souris (Tanguy, 29 oct. : « comme le contour du badge du logo ») : le liseré conique de
   l'icône d'app (lab.css, .icone-app::after), son angle --a posé par liste-attente.js ; 315° (en haut à gauche) au repos.
   Blanc plus discret depuis le 29 oct. au soir : .28 face à la souris, .08 à l'opposé */
.la-carte::after { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from calc(var(--a, 315deg) - 70deg), transparent 0deg, rgba(255, 255, 255, .28) 70deg, transparent 140deg,
    transparent 180deg, rgba(255, 255, 255, .08) 250deg, transparent 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.la[open], .la[open]::backdrop { animation: la-entre .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes la-entre { from { opacity: 0; transform: translateY(.5rem) scale(.985); } }
.la[open]::backdrop { animation-name: la-fond; }
@keyframes la-fond { from { opacity: 0; } }

.la-fermer { position: absolute; top: .875rem; right: .875rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  padding: 0; border: 0; border-radius: .625rem; background: none; color: rgba(247, 246, 243, .55); cursor: pointer;
  transition: color .2s ease, background-color .2s ease; }
.la-fermer:hover { color: #F7F6F3; background: rgba(247, 246, 243, .06); }

/* le symbole seul, sans sa tuile (Tanguy, 29 oct. : « enlève le cadre de notre logo », « et grossis un peu le logo du coup » :
   26 → 36 px) ; la boîte garde 3,5 rem pour l'air au-dessus du titre. Avant : la tuile de l'icône d'app (v2.css, .chargeur-icone). */
.la-icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; color: #F7F6F3; }
.la-icone svg { width: 2.25rem; height: auto; }

.la-titre { margin: 1.5rem 0 .625rem; font-size: 1.625rem; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
/* plus petit et plus fin que le titre (Tanguy, 29 oct. : « plus petit et fin ») : 13 px, graisse 300 d'Inter */
.la-texte { max-width: 22rem; margin: 0 auto 1.75rem; font-size: .8125rem; font-weight: 300; line-height: 1.6; letter-spacing: .005em;
  color: rgba(247, 246, 243, .62); text-wrap: balance; }
.la-texte b { font-weight: 500; color: #F7F6F3; overflow-wrap: anywhere; }
.la-note { color: #F7F6F3; }

.la-champ { box-sizing: border-box; width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid rgba(247, 246, 243, .14);
  border-radius: .75rem; background: rgba(247, 246, 243, .04); color: #F7F6F3; font-family: inherit; font-size: 1rem; font-weight: 400;
  transition: border-color .2s ease, box-shadow .2s ease; }
.la-champ::placeholder { color: rgba(247, 246, 243, .36); }
.la-champ:focus { outline: none; border-color: rgba(247, 246, 243, .5); box-shadow: 0 0 0 3px rgba(247, 246, 243, .08); }
.la-champ[aria-invalid="true"] { border-color: rgba(255, 140, 130, .7); }

.la-erreur { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.4; color: #FF9C93; text-align: left; }
.la-erreur:empty { display: none; }
.la-suggestion { margin: .5rem 0 0; font-size: .8125rem; color: rgba(247, 246, 243, .72); text-align: left; }
.la-suggestion .la-lien { color: #F7F6F3; font-weight: 500; }

.la-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 3rem;
  margin-top: 1rem; border: 0; border-radius: .75rem; background: #242329; color: #F7F6F3; font-family: inherit;
  font-size: .9375rem; font-weight: 500; line-height: 1; letter-spacing: .01em; cursor: pointer;   /* 15 px (Tanguy : « vraiment petit ») */ box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .06);
  transition: background-color .2s ease; }
.la-btn:hover { background: #2E2D33; }
.la-btn:disabled { cursor: progress; }
.la-btn[aria-busy="true"] { color: rgba(247, 246, 243, .55); }
.la-btn[aria-busy="true"]::before { content: ""; width: .875rem; height: .875rem; border: 1.5px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: la-tour .7s linear infinite; }
@keyframes la-tour { to { transform: rotate(360deg); } }

.la-mention, .la-renvoi { margin: 1.125rem 0 0; font-size: .75rem; line-height: 1.5; color: rgba(247, 246, 243, .45); text-wrap: balance; }
.la-renvoi { font-size: .8125rem; color: rgba(247, 246, 243, .55); }
.la-mention a { color: rgba(247, 246, 243, .72); text-decoration: underline; text-underline-offset: 2px; }
.la-lien { padding: 0; border: 0; background: none; color: #F7F6F3; font: inherit; font-weight: 500; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.la-renvoi-n { font-variant-numeric: tabular-nums; }

/* le code : un seul champ (lecteurs d'écran, remplissage automatique, collage) posé sur six cases qui ne font que l'afficher */
.la-code { position: relative; }
.la-code input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 1rem; letter-spacing: 0; outline: none; }
.la-code input::selection { background: transparent; }
.la-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.la-cases span { display: grid; place-items: center; height: 3.5rem; border: 1px solid rgba(247, 246, 243, .14); border-radius: .75rem;
  background: rgba(247, 246, 243, .04); font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease; }
.la-cases span.plein { border-color: rgba(247, 246, 243, .26); }
.la-cases span.actif { border-color: rgba(247, 246, 243, .75); box-shadow: 0 0 0 3px rgba(247, 246, 243, .08); }
.la-cases span.actif:empty::after { content: ""; width: 1.5px; height: 1.375rem; background: #F7F6F3; animation: la-curseur 1s steps(1) infinite; }
@keyframes la-curseur { 50% { opacity: 0; } }
.la-code:has(input[aria-invalid="true"]) .la-cases span { border-color: rgba(255, 140, 130, .7); }

.la-robot { display: flex; justify-content: center; }
.la-robot:has(iframe) { margin-top: 1rem; }

.la-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.la :focus-visible { outline: 2px solid rgba(247, 246, 243, .85); outline-offset: 2px; }
.la .la-champ:focus-visible, .la .la-code input:focus-visible { outline: none; }

@media (max-width: 30rem) {
  .la-carte { padding: 2.25rem 2rem 1.75rem; }
  .la-titre { font-size: 1.5rem; }
  .la-cases { gap: .375rem; }
  .la-cases span { height: 3.25rem; }
}
@media (max-width: 22.5rem) {
  .la-carte { padding-inline: 1.25rem; }
  .la-cases { gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .la[open], .la[open]::backdrop, .la-btn[aria-busy="true"]::before, .la-cases span.actif:empty::after { animation: none; }
}