/* ══════════════════════════════════════════════════════════════════════
   L'écran de choix, servi à la racine du site.

   Il ne fait pas partie de la maquette : c'est l'outil du commercial.
   Il compose son adresse, la voit s'écrire, et entre dans la
   présentation. Rien d'autre.

   Il vit hors de la scène, donc hors de la mise à l'échelle : ses
   dimensions suivent la fenêtre, pas les 1440 x 810 de la maquette.
   Un formulaire qui rétrécit avec la présentation serait illisible.
   ══════════════════════════════════════════════════════════════════════ */

.choix{ display:none; }

html[data-mode="choix"] .vue{ display:none; }
html[data-mode="choix"] .choix{
  display:grid; place-items:center;
  position:fixed; inset:0; overflow:auto; padding:32px 20px;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(210,0,116,.22), transparent 62%),
    radial-gradient(900px 520px at 12% 88%, rgba(0,91,156,.26), transparent 60%),
    #0d1526;
  color:#fff;
  font-family:'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

.choix__boite{ width:min(980px, 100%); }

.choix__logo{ display:block; height:72px; width:auto; margin:0 auto 26px; }

.choix__t{
  margin:0; text-align:center;
  font-family:'Finger Paint', 'Montserrat', cursive;
  font-size:clamp(26px, 4.2vw, 40px); line-height:1.2; color:#fff;
}
.choix__t{ margin-bottom:36px; }
.choix__t em{ font-style:normal; color:#ff2d92; }

/* ─────────────────────────── Les sections ─────────────────────────── */
.choix__sec{ margin:0 0 30px; }
.choix__lab{
  display:block; margin:0 0 14px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ───────────────────────── Les interlocuteurs ─────────────────────── */
.choix__gens{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin:0; padding:0; list-style:none;
}
.gens{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:14px; cursor:pointer; text-align:left;
  border:1.5px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff;
  font:inherit; transition:border-color .16s, background .16s, transform .12s;
}
.gens:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.09); }
.gens[aria-pressed="true"]{
  border-color:#ff2d92; background:rgba(210,0,116,.18);
}
.gens__p{
  width:52px; height:52px; flex:none; border-radius:50%; object-fit:cover;
  background:rgba(255,255,255,.12);
}
.gens__n{ display:block; font-size:14.5px; font-weight:700; line-height:1.25; }
.gens__r{ display:block; margin-top:3px; font-size:11.5px; color:rgba(255,255,255,.6); }

/* ───────────────────────── La participation ───────────────────────── */
.choix__parts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  margin:0; padding:0; list-style:none;
}
.part{
  width:100%; padding:20px 12px; border-radius:14px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; font:inherit; text-align:center;
  transition:border-color .16s, background .16s;
}
.part:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.09); }
.part[aria-pressed="true"]{ border-color:#4da3ff; background:rgba(0,91,156,.3); }
.part__n{ display:block; font-size:25px; font-weight:800; letter-spacing:-.02em; }
.part__def{
  display:inline-block; margin-top:7px; padding:2px 7px; border-radius:9px;
  background:rgba(255,255,255,.14); font-size:9.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
}

/* ─────────────────────────── Le lien produit ───────────────────────── */
.choix__lien{
  display:flex; align-items:center; gap:12px; margin:0 0 22px;
  padding:13px 16px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12);
}
.choix__lien code{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'Inter', ui-monospace, monospace; font-size:13.5px; color:#9fd0ff;
}
.choix__copier{
  flex:none; padding:7px 13px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:none; color:#fff;
  font:inherit; font-size:12px; font-weight:700;
}
.choix__copier:hover{ border-color:#fff; }
.choix__copier.est-fait{ border-color:#49d49d; color:#49d49d; }

/* ──────────────────────────── Commencer ───────────────────────────── */
.choix__go{
  width:100%; height:58px; border:0; border-radius:29px; cursor:pointer;
  background:linear-gradient(95deg, #d20074 0%, #a0127f 55%, #005b9c 100%);
  color:#fff; font:inherit; font-size:16.5px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(210,0,116,.32);
  transition:filter .16s, transform .12s;
}
.choix__go:hover{ filter:brightness(1.08); }
.choix__go:active{ transform:translateY(1px); }
.choix__go[disabled]{
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.4);
  box-shadow:none; cursor:not-allowed;
}


/* ─────────────────────────── Le mouvement ───────────────────────────
   L'écran se compose de haut en bas, dans l'ordre où on le remplit : le
   logo, le titre, qui présente, le paramètre, l'adresse, le départ. */
html[data-mode="choix"] .choix__boite > *{
  animation:choix-entree 820ms cubic-bezier(.16,1,.3,1) both;
}
html[data-mode="choix"] .choix__boite > :nth-child(1){ animation-name:choix-logo; animation-duration:1000ms; }
html[data-mode="choix"] .choix__boite > :nth-child(2){ animation-delay:120ms; }
html[data-mode="choix"] .choix__boite > :nth-child(3){ animation-delay:260ms; }
html[data-mode="choix"] .choix__boite > :nth-child(4){ animation-delay:360ms; }
html[data-mode="choix"] .choix__boite > :nth-child(5){ animation-delay:460ms; }
html[data-mode="choix"] .choix__boite > :nth-child(6){ animation-delay:540ms; }
@keyframes choix-entree{
  from{ opacity:0; translate:0 18px; }
  to  { opacity:1; translate:0 0; }
}
@keyframes choix-logo{
  from{ opacity:0; scale:.88; filter:blur(8px); }
  to  { opacity:1; scale:1; filter:blur(0); }
}

/* Les cartes se soulèvent au survol et s'enfoncent à l'appui. */
.gens, .part{ transition:border-color .2s, background .2s, translate .25s cubic-bezier(.16,1,.3,1), scale .12s; }
.gens:hover, .part:hover{ translate:0 -2px; }
.gens:active, .part:active{ scale:.98; }
.gens:focus-visible, .part:focus-visible, .choix__copier:focus-visible, .choix__go:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
}
/* Choisir se voit : la carte retenue fait un petit bond. */
.gens[aria-pressed="true"], .part[aria-pressed="true"]{
  animation:choix-retenu 420ms cubic-bezier(.34,1.45,.64,1);
}
@keyframes choix-retenu{ from{ scale:.96; } to{ scale:1; } }
.gens[aria-pressed="true"] .gens__p{ box-shadow:0 0 0 2px #ff2d92; }
.gens__p{ transition:box-shadow .25s; }

.choix__copier{ transition:border-color .2s, color .2s, scale .12s; }
.choix__copier:active{ scale:.95; }
.choix__copier.est-fait{ animation:choix-retenu 420ms cubic-bezier(.34,1.45,.64,1); }

/* Le bouton de départ : un reflet le traverse de temps en temps, il se
   soulève au survol. Désactivé, il ne bouge pas. */
.choix__go{ position:relative; overflow:hidden; transition:filter .2s, translate .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, scale .1s; }
.choix__go:not([disabled]):hover{
  filter:brightness(1.08); translate:0 -2px;
  box-shadow:0 16px 38px rgba(210,0,116,.42);
}
.choix__go:not([disabled]):active{ translate:0 0; scale:.985; }
.choix__go:not([disabled])::after{
  content:""; position:absolute; inset:0 auto 0 -40%; width:30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  translate:0 0; pointer-events:none;
  animation:choix-reflet 3.6s cubic-bezier(.45,0,.2,1) 1.2s infinite;
}
@keyframes choix-reflet{
  0%      { translate:0 0; }
  45%, 100%{ translate:520% 0; }
}

@media (max-width:760px){
  .choix__gens{ grid-template-columns:1fr; }
  .choix__parts{ grid-template-columns:repeat(2, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  .gens, .part, .choix__go, .choix__copier{ transition:none; }
  html[data-mode="choix"] .choix__boite > *,
  .gens[aria-pressed="true"], .part[aria-pressed="true"], .choix__copier.est-fait{ animation:none; }
  .choix__go::after{ display:none; }
}
@media print{ .choix{ display:none !important; } }