/* Portail : connexion, inscription, mot de passe oublié.
   Les jetons de couleur viennent de site.css. */

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--police);
  font-size:15px;line-height:1.45;
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:28px 16px;
  /* Une lueur verte diffuse derrière la carte : le seul effet de la
     page, et il suffit à la sortir du formulaire administratif. */
  background-image:
    radial-gradient(circle at 12% 15%, rgba(166,255,0,.035), transparent 28%),
    radial-gradient(circle at 88% 85%, rgba(255,42,26,.05), transparent 32%);
  background-repeat:no-repeat;
}

.portail{width:100%;max-width:390px}

.marque{text-align:center;margin-bottom:22px}
.balles{
  display:inline-flex;gap:2px;font-size:26px;line-height:1;margin-bottom:12px;
}
.balles i{font-style:normal;opacity:.45}
.marque h1{
  font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.05;
}
.pitch{color:var(--muted);font-size:14px;margin-top:8px}
.pitch b{color:var(--ink);font-weight:600}

/* Le portail suit la charte des panneaux HUD, décroché angulaire
   compris : c'est la première page qu'on voit du site. */
.carte{
  position:relative;
  border:1px solid rgba(255,255,255,.065);padding:22px;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg, rgba(16,19,16,.92), rgba(8,10,9,.90));
  backdrop-filter:blur(12px);
  box-shadow:var(--carte-ombre);
  clip-path:polygon(
    0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.aide{font-weight:400;font-size:12px;color:var(--muted)}
input{
  font:400 16px/1.2 var(--police);color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:12px;
}
input::placeholder{color:var(--muted);opacity:.6}
input{background:var(--bg-void);border:1px solid var(--border-soft);color:var(--text-primary)}
input:focus{outline:1px solid var(--chili-green);outline-offset:0;box-shadow:var(--glow-green)}

/* Même charte que le reste du site : fond sombre, contour de chaleur. */
button{
  margin-top:2px;border-radius:8px;cursor:pointer;
  font:600 15px/1 var(--police);padding:14px;
  background:linear-gradient(180deg, rgba(255,42,26,.18), rgba(255,42,26,.08));
  color:#fff;
  border:1px solid rgba(255,42,26,.65);
  transition:border-color var(--transition), color var(--transition),
             box-shadow var(--transition);
}
button:hover{border-color:var(--heat-red);box-shadow:var(--glow-red)}

.oubli{
  text-align:center;font-size:13px;color:var(--muted);text-decoration:none;
}
.oubli:hover{color:var(--chili-green)}

.erreur{
  background:color-mix(in srgb,var(--stamp) 12%,var(--bg));
  border:1px solid var(--stamp);border-radius:11px;
  color:var(--stamp);font-size:13px;padding:10px 12px;
}
.avis{
  background:var(--line-soft);border-radius:11px;padding:12px;
  font-size:13.5px;color:var(--ink);
}
.bascule{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}
.bascule a{color:var(--chili-green);font-weight:600}

/* ---------- deux champs côte à côte ---------- */
/* 16 px minimum sur les champs : en dessous, iOS zoome à chaque mise au
   point et le formulaire part de travers. */
select{
  font:400 16px/1.2 var(--police);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:12px;cursor:pointer;
  width:100%;
  /* Sans cette remise à zéro, Android impose son propre fond gris. */
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
select:focus{outline:2px solid var(--chili-green);outline-offset:1px;border-color:transparent}

/* ---------- date de naissance en trois menus ---------- */
.naissance{border:0;padding:0;margin:0}
.naissance legend{font-size:13px;font-weight:600;padding:0;margin-bottom:6px}
.trio{display:flex;gap:8px}
.trio select{flex:1 1 0;min-width:0;padding-left:10px;padding-right:26px;
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%}

/* La marque du portail : le même piment que le bandeau, et le mot coupé
   en deux comme partout ailleurs. */
.portail-piment{
  display:block;font-size:38px;line-height:1;margin-bottom:10px;
  filter:drop-shadow(0 0 14px rgba(255,42,26,.45));
}
.portail .marque h1{
  font:900 clamp(22px, 7vw, 32px)/1.05 var(--police-titre);letter-spacing:.02em;
  text-transform:uppercase;color:var(--text-primary);
}
.portail .marque h1 span{color:var(--heat-red)}
.portail .pitch{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin-top:6px;
}
.portail .pitch b{font-weight:600;color:var(--text-secondary)}
label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}