/* Couverture publique (racine) — chargée APRÈS app.css, dont elle réutilise les
   tokens :root. Préfixe .vt- et .rk- : aucune classe de l'app n'est touchée.

   Un seul écran : une patinoire vue de dessus qui se dessine, l'orignal peint au
   centre de la glace, le nom de l'équipe, une porte. Rien sur l'application
   elle-même : la page est ouverte au monde, le contenu ne l'est pas. */

:root{
  --vt-nuit:#07120e;        /* la glace de nuit */
  --vt-ring:#8fd0ae;        /* anneau de focus sur fond sombre */
  --vt-t:.24s cubic-bezier(.2,.7,.2,1);
  /* Largeur du panneau de connexion. Plafonnée en pixels : son contenu fait
     348 px et ne grandit jamais, un panneau proportionnel n'ajoutait donc que
     de la marge en volant la glace à la couverture. */
  --pan:min(430px,46vw);
}

html{ background:var(--vt-nuit); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.vt-body{ background:var(--vt-nuit); color:#eaf7ef; margin:0;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden; }

/* ── La scène ────────────────────────────────────────────────────────────── */
.vt-cover{ position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(74px,12vh,120px) 22px clamp(78px,12vh,110px);
  background:
    radial-gradient(78% 62% at 50% 38%, #10221a 0%, #0a1712 46%, var(--vt-nuit) 100%); }

/* Grain de glace : une trame de bruit très fine, sinon les grands aplats sombres
   font plat et bandé sur les écrans qui n'affichent pas bien les dégradés. */
.vt-cover::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Vignette : l'œil tombe au centre, là où est le nom. */
.vt-cover::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(118% 96% at 50% 48%, transparent 42%, rgba(0,0,0,.58) 100%);
  transition:background .9s cubic-bezier(.72,0,.16,1); }
/* Panneau ouvert : la glace recule d'un cran pour laisser la vedette au formulaire. */
.vt-ouvert .vt-cover::after{
  background:radial-gradient(118% 96% at 50% 48%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.74) 100%); }

/* La lampe du but, derrière le filet de gauche.

   Elle battait sur son propre cycle de 6,5 s, sans rapport avec le reste : la lampe
   s'allumait à des moments quelconques, et le regard n'y lisait rien. Elle partage
   maintenant la période ET le retard de l'onde du centre (4,2 s, départ à 2,6 s),
   qui elle-même prend la suite de la rondelle. L'enchaînement se lit alors comme ce
   que l'application raconte : la rondelle arrive, la lampe s'allume. */
.vt-lampe{ position:absolute; left:9%; top:50%; width:min(26vw,320px); aspect-ratio:1; z-index:-2;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(192,73,47,.30) 0%, transparent 62%);
  animation:vt-lampe 4.2s ease-out 2.6s infinite; }
@keyframes vt-lampe{ 0%{ opacity:1; } 26%,100%{ opacity:.35; } }

/* Patinoire : plein cadre, derrière tout le reste. */
.vt-rink{ position:absolute; inset:0; width:100%; height:100%; z-index:-3;
  transform:translate3d(calc(var(--px,0) * 14px), calc(var(--py,0) * 10px), 0); }

/* Pas de `vector-effect:non-scaling-stroke` ici, contrairement au filigrane de
   l'application (app.css) qui, lui, ne se dessine pas. Chrome ignore `pathLength`
   pour le pointillé dès que ce vector-effect est actif : la bande, normalisée à 1
   mais mesurée en pixels écran, s'arrêtait avant la fin de son parcours. Le bord
   gauche est le dernier segment du rectangle, c'était donc lui qui manquait. */
.rk-bande, .rk-but, .rk-zone, .rk-filet, .rk-bleue, .rk-rouge, .rk-cercle, .rk-trace{
  fill:none; stroke-linecap:round; }

/* Les longs traits se dessinent : c'est lisible et ça fait « on trace la glace ». */
.rk-bande, .rk-bleue, .rk-rouge, .rk-cercle, .rk-trace{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:rk-dessin 1.7s cubic-bezier(.25,.8,.3,1) both; }
@keyframes rk-dessin{ to{ stroke-dashoffset:0; } }

/* Le but, lui, apparaît en fondu. Un tracé du haut vers le bas sur des traits
   aussi courts donnait l'illusion d'un filet décentré tant que l'animation
   n'était pas finie : la ligne n'était qu'à moitié là, le filet, lui, entier. */
.rk-but, .rk-zone, .rk-filet{ opacity:0; animation:rk-parait .9s ease both; }

/* La bande est de loin le plus long tracé : son périmètre vaut cinq fois une
   ligne bleue. Avec la courbe commune, très « ease-out », le crayon sprintait
   puis rampait, et le bord droit était expédié en 71 ms quand le gauche en
   recevait 315. En linéaire, chaque portion reçoit un temps proportionnel à sa
   longueur, ce qu'on attend d'un trait qu'on regarde se tracer. */
.rk-bande{ stroke:rgba(255,255,255,.14); stroke-width:2; animation-delay:.05s;
  animation-duration:2.2s; animation-timing-function:linear; }
.rk-bleue{ stroke:rgba(42,111,174,.50); stroke-width:9; animation-delay:.45s; }
.rk-rouge{ stroke:rgba(192,73,47,.52); stroke-width:9; animation-delay:.30s; }
.rk-cercle{ stroke:rgba(192,73,47,.38); stroke-width:2.5; animation-delay:.65s; }
.rk-cercle:first-of-type{ stroke:rgba(192,73,47,.5); animation-delay:.55s; }
.rk-but{ stroke:rgba(192,73,47,.45); stroke-width:2.5; animation-delay:.75s; }
.rk-zone{ stroke:rgba(42,111,174,.45); stroke-width:2.5; animation-delay:.85s; }
.rk-filet{ stroke:rgba(255,255,255,.26); stroke-width:2; animation-delay:.9s; }
/* Deux coups de patin, tracés en dernier et volontairement discrets. */
.rk-trace{ stroke:rgba(234,247,239,.13); stroke-width:2.5; animation-duration:2.1s; animation-delay:1.1s; }

.rk-point{ fill:rgba(192,73,47,.5); opacity:0; animation:rk-parait .8s ease .95s forwards; }
@keyframes rk-parait{ to{ opacity:1; } }

/* La rondelle glisse et s'arrête au point central. */
.rk-rondelle{ fill:#04100b; stroke:rgba(234,247,239,.30); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:rk-glisse 1.5s cubic-bezier(.16,.9,.28,1) 1.25s both; }
@keyframes rk-glisse{
  from{ transform:translateX(-560px) scale(.85); opacity:0; }
  35%{ opacity:1; }
  to{ transform:none; opacity:1; } }

/* Onde qui part du point central, comme une mise au jeu. */
.rk-onde{ fill:none; stroke:rgba(127,211,166,.45); stroke-width:2; vector-effect:non-scaling-stroke;
  transform-box:fill-box; transform-origin:center; opacity:0;
  animation:rk-onde 4.2s ease-out 2.6s infinite; }
@keyframes rk-onde{
  0%{ transform:scale(.5); opacity:.5; }
  70%{ opacity:0; }
  100%{ transform:scale(7.5); opacity:0; } }

/* Reflet qui balaie lentement la glace. */
.vt-lueur{ position:absolute; inset:-30% -10%; z-index:-2; pointer-events:none;
  background:radial-gradient(34% 42% at 30% 40%, rgba(127,211,166,.13) 0%, transparent 70%),
             radial-gradient(30% 38% at 72% 62%, rgba(47,125,86,.16) 0%, transparent 72%);
  animation:vt-balaye 24s ease-in-out infinite alternate; }
@keyframes vt-balaye{
  from{ transform:translate3d(-3%,-2%,0) scale(1); }
  to{ transform:translate3d(4%,3%,0) scale(1.12); } }

/* L'orignal peint au centre de la glace. Le PNG est gris sur fond noir :
   `screen` efface le noir et ne laisse que l'animal. */
.vt-mark{ position:absolute; top:37%; left:50%; z-index:-1; pointer-events:none; user-select:none;
  width:min(60vh,52vw,500px);
  transform:translate3d(calc(-50% + var(--px,0) * 26px), calc(-50% + var(--py,0) * 18px), 0);
  mix-blend-mode:screen; opacity:.22;
  animation:vt-mark-entre 2.4s cubic-bezier(.2,.7,.2,1) .5s both; }
@keyframes vt-mark-entre{ from{ opacity:0; } to{ opacity:.22; } }

/* ── Le bloc central ─────────────────────────────────────────────────────── */
/* z-index 1 : le ::after de la couverture (vignette) est peint APRÈS les enfants,
   sans ça il assombrirait le nom de l'équipe. */
.vt-centre{ position:relative; z-index:1; text-align:center; display:grid; justify-items:center; gap:0; }
.vt-sur{ font:700 clamp(11px,1.3vw,14px) var(--sans); letter-spacing:.62em; text-transform:uppercase;
  color:#7fbb9c; margin-left:.62em;
  animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) 1.05s both; }
.vt-titre{ margin:clamp(10px,1.4vh,18px) 0 0; }
.vt-t1, .vt-t2{ display:block; }
.vt-t1{ font:700 clamp(14px,2.1vw,26px) var(--sans); letter-spacing:.42em; text-transform:uppercase;
  color:#bcd9c9; margin-left:.42em;
  animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) 1.2s both; }
.vt-t2{ font:800 clamp(62px,14.5vw,196px)/.85 var(--sans); letter-spacing:-.045em; text-transform:uppercase;
  color:#eaf7ef;
  animation:vt-monte 1.1s cubic-bezier(.2,.7,.2,1) 1.32s both; }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .vt-t2{ background:linear-gradient(176deg,#ffffff 22%,#9ed7bd 96%);
    -webkit-background-clip:text; background-clip:text; color:transparent; } }
@keyframes vt-monte{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.vt-phrase{ margin:clamp(16px,2.2vh,24px) 0 0; max-width:30em;
  font:500 clamp(14.5px,1.5vw,18px)/1.5 var(--sans); color:#b6d2c3;
  animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) 1.44s both; }

.vt-entrer{ margin-top:clamp(18px,2.6vh,32px); display:inline-flex; align-items:center; gap:var(--e4);
  padding:15px 27px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#f4fdf8,#c9e8d7); color:#08251a;
  font:800 clamp(14px,1.5vw,16.5px) var(--sans); letter-spacing:-.006em;
  box-shadow:0 14px 34px rgba(127,211,166,.22), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform var(--vt-t), box-shadow var(--vt-t);
  animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) 1.5s both; }
.vt-entrer svg{ transition:transform var(--vt-t); }
.vt-entrer:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(127,211,166,.34); }
.vt-entrer:hover svg{ transform:translateX(4px); }
.vt-entrer:active{ transform:translateY(0) scale(.985); }
.vt-acces{ margin:var(--e5) 0 0; font:var(--gr-app) var(--tx-3) var(--sans); letter-spacing:.03em; color:#7fa792;
  animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) 1.62s both; }

/* ── Coin haut et pied ───────────────────────────────────────────────────── */
.vt-haut{ position:absolute; top:calc(16px + env(safe-area-inset-top)); right:18px; z-index:2;
  animation:vt-monte .9s ease 1.7s both; }
.vt-lang{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  min-width:44px; min-height:44px; padding:0 var(--e5); border-radius:999px; cursor:pointer;
  font:var(--gr-fort) var(--tx-2) var(--mono); letter-spacing:.06em; color:#cfe6d9;
  transition:background var(--vt-t), border-color var(--vt-t); }
.vt-lang:hover{ background:rgba(255,255,255,.12); border-color:rgba(127,211,166,.45); }

/* Invite à descendre : il y a désormais un mot sous la couverture. */
.vt-cue{ position:absolute; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:2; animation:vt-monte .9s ease 2s both; }
.vt-cue span{ display:block; width:1px; height:34px;
  background:linear-gradient(rgba(143,208,174,.55), transparent);
  animation:vt-bob 2.6s ease-in-out 2.6s infinite; }
@keyframes vt-bob{ 0%,100%{ opacity:.3; transform:translateY(-4px); } 50%{ opacity:1; transform:translateY(4px); } }

/* ── Le mot sur l'outil ──────────────────────────────────────────────────── */
.vt-mot{ background:linear-gradient(var(--vt-nuit), #0a1a14 60%, var(--vt-nuit)); }
/* Une phrase par ligne, et la largeur suit. 640 px enfermaient deux phrases dans
   huit lignes, et les 230 px de rembourrage vertical ajoutaient de la hauteur pour
   rien : la bande faisait 544 px pour un texte qui en occupait le tiers.

   Les deux phrases ont été taillées à la même longueur, autour de 92 caractères, ce
   qui les met sur une seule ligne chacune dès que la place existe. En dessous elles
   se replient d'elles-mêmes, sans nowrap qui déborderait : c'est le texte qui a été
   raccourci pour tenir, pas la mise en page qui force. */
.vt-mot-in{ max-width:1080px; margin:0 auto; padding:clamp(56px,9vh,92px) 24px clamp(48px,7vh,76px);
  text-align:center; }
.vt-mot p{ margin:0 0 var(--e6); font:500 clamp(15px,1.7vw,19px)/1.62 var(--sans); color:#c2dbcd;
  text-wrap:pretty; }
/* Les deux paragraphes gardent la même encre : le second porte le fond, l'affadir
   serait enterrer la seule phrase qui parle hockey. */
.vt-mot p:last-of-type{ margin-bottom:0; }
.vt-mot.vu p{ animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) both; }
.vt-mot.vu p:nth-of-type(2){ animation-delay:.1s; }

/* La seconde porte, en bas de la bande. Volontairement discrète : le bouton plein de
   la couverture reste l'entrée principale, celle-ci ne fait qu'éviter de remonter. */
.vt-mot-entrer{ display:inline-flex; align-items:center; gap:var(--e3); margin-top:clamp(30px,5vh,46px);
  padding:var(--e4) var(--e6); border:1px solid rgba(127,211,166,.34); border-radius:999px;
  color:#a9d6bd; text-decoration:none; font:var(--gr-fort) var(--tx-3) var(--sans);
  letter-spacing:.06em; text-transform:uppercase;
  transition:border-color .22s ease, color .22s ease, background .22s ease; }
.vt-mot-entrer:hover, .vt-mot-entrer:focus-visible{ border-color:rgba(127,211,166,.7);
  color:#eaf7ef; background:rgba(127,211,166,.10); }
.vt-mot-entrer svg{ transition:transform .22s ease; }
.vt-mot-entrer:hover svg, .vt-mot-entrer:focus-visible svg{ transform:translateX(3px); }
.vt-mot.vu .vt-mot-entrer{ animation:vt-monte .9s cubic-bezier(.2,.7,.2,1) .27s both; }

.vt-pied{ display:flex; align-items:center; justify-content:space-between; gap:var(--e5); flex-wrap:wrap;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.06); background:var(--vt-nuit);
  /* #5c7f6c tombait à 4,27:1 sur la glace de nuit, sous le minimum de 4,5. */
  font:var(--gr-app) var(--tx-2) var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#719784; }

/* ── Focus clavier ───────────────────────────────────────────────────────
   L'anneau d'app.css est en --green-d : moins de 3:1 sur cette glace de nuit. */
.vt-cover a:focus-visible, .vt-cover button:focus-visible{
  outline:3px solid var(--vt-ring); outline-offset:4px; border-radius:999px; }

/* ── Le glissement vers la connexion ─────────────────────────────────────
   La scène recule de la MOITIÉ de la largeur du panneau : le contenu reste
   ainsi parfaitement centré dans la bande de glace qui reste visible. */
.vt-scene{ transition:transform .9s cubic-bezier(.72,0,.16,1); }
/* Panneau ouvert, le décor est peint dessous : il ne doit plus recevoir de clic.
   Le JS pose en plus `inert` dessus, qui le sort aussi du parcours au clavier ;
   cette règle vaut pour le rendu sans JS, où /login/ arrive déjà ouvert. */
.vt-ouvert .vt-scene{ transform:translateX(calc(var(--pan) / -2)); pointer-events:none; }
.vt-ouvert{ overflow:hidden; }

.vt-panneau{ position:fixed; top:0; right:0; z-index:50; width:var(--pan); height:100%;
  display:grid; align-items:center; overflow-y:auto;
  background:#fbfcfb; color:var(--ink);
  box-shadow:-40px 0 90px -50px rgba(0,0,0,.75);
  transform:translateX(100%); visibility:hidden;
  transition:transform .9s cubic-bezier(.72,0,.16,1), visibility 0s linear .9s; }
.vt-ouvert .vt-panneau{ transform:none; visibility:visible;
  transition:transform .9s cubic-bezier(.72,0,.16,1), visibility 0s; }
/* Le liseré vert qui marque la couture entre la glace et le panneau. */
.vt-panneau::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--green-mint), var(--green), var(--green-dd)); }

.vt-pan-in{ width:min(348px,100%); margin:0 auto; padding:52px 30px; }
.vt-pan-haut{ display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  margin-bottom:var(--e8); }
.vt-retour{ display:inline-flex; align-items:center; gap:var(--e2);
  font:var(--gr-fort) var(--tx-2) var(--sans); letter-spacing:.04em; color:var(--mut);
  padding:var(--e3) var(--e4) var(--e3) var(--e3); border-radius:999px; margin-left:-8px;
  transition:background var(--vt-t), color var(--vt-t); }
.vt-retour:hover{ background:#eef3ef; color:var(--green-d); }
/* La bascule de langue du panneau. Jetons du jour : elle est posée sur le blanc
   du panneau, pas sur la glace comme sa jumelle .vt-lang. */
.vt-pan-lang{ min-width:44px; min-height:44px; padding:0 var(--e5); border-radius:999px; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel2); color:var(--mut);
  font:var(--gr-fort) var(--tx-2) var(--mono); letter-spacing:.06em;
  transition:background var(--vt-t), border-color var(--vt-t), color var(--vt-t); }
.vt-pan-lang:hover{ background:var(--hover); border-color:var(--line3); color:var(--green-d); }
.vt-pan-lbl{ font:var(--gr-fort) var(--tx-1) var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--green-d); }
.vt-pan-t{ font:800 clamp(26px,2.4vw,33px) var(--sans); letter-spacing:-.03em; margin:var(--e3) 0 0; }
.vt-pan-s{ font:var(--gr-cour) var(--tx-4)/1.55 var(--sans); color:var(--sub); margin:var(--e3) 0 var(--e7); }
.vt-pan-btn{ width:100%; justify-content:center; padding:var(--e5) var(--e6); border-radius:11px; font-size:var(--tx-5); }
.vt-pan-btn svg{ transition:transform var(--vt-t); }
.vt-pan-btn:hover svg{ transform:translateX(3px); }
/* --mut2 est calibré sur le blanc pur ; sur le blanc cassé du panneau il tombait
   à 4,38:1, sous le minimum AA. C'est la phrase à lire quand la connexion échoue. */
.vt-pan-aide{ margin:var(--e7) 0 0; padding-top:var(--e6); border-top:1px solid var(--line);
  font:var(--gr-cour) var(--tx-3)/1.5 var(--sans); color:var(--mut); }

/* ── Écrans courts et petits ─────────────────────────────────────────────── */
/* Sous 900 px, le panneau prend tout : la bande de glace restante serait trop
   étroite pour montrer quoi que ce soit. */
@media (max-width:900px){
  :root{ --pan:100vw; }
  .vt-pan-in{ padding-block:64px; }
}
@media (max-width:560px){
  .vt-pied{ justify-content:center; gap:var(--e2) var(--e5); font-size:var(--tx-1); }
  .vt-t1{ letter-spacing:.3em; margin-left:.3em; }
  .vt-sur{ letter-spacing:.45em; margin-left:.45em; }
}
/* Téléphone en paysage : la hauteur commande, pas la largeur. */
@media (max-height:520px){
  .vt-cover{ padding-block:62px 58px; }
  .vt-t2{ font-size:clamp(38px,9vh,72px); }
  .vt-mark{ width:min(60vh,40vw,300px); }
  .vt-entrer{ margin-top:var(--e5); }
}
@media (pointer:coarse){
  .vt-entrer:hover{ transform:none; }
  .vt-entrer:active{ transform:scale(.98); }
  /* Mesuré à 41 px au doigt, sous les 44 que tient le reste de l'interface. */
  .vt-mot-entrer{ min-height:44px; }
  .vt-mot-entrer:hover{ background:none; }
}
/* Mouvement réduit : la scène s'affiche d'un coup, rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  .rk-bande, .rk-but, .rk-zone, .rk-filet, .rk-bleue, .rk-rouge, .rk-cercle, .rk-trace{
    stroke-dashoffset:0; animation:none; opacity:1; }
  .rk-point, .rk-rondelle, .rk-onde, .vt-lueur, .vt-lampe, .vt-mark,
  .vt-sur, .vt-t1, .vt-t2, .vt-phrase, .vt-entrer, .vt-acces, .vt-haut,
  .vt-cue, .vt-cue span, .vt-mot.vu p,
  .vt-mot.vu .vt-mot-entrer{ animation:none; opacity:1; }
  .vt-mot-entrer, .vt-mot-entrer svg{ transition:none; }
  .rk-onde{ opacity:0; }
  .vt-mark{ opacity:.17; }
  .vt-rink, .vt-mark{ transform:translate(0,0); }
  .vt-mark{ transform:translate(-50%,-50%); }
  .vt-entrer{ transition:none; }
  /* Le panneau apparaît sans glisser. */
  .vt-scene, .vt-panneau{ transition:none; }
}