/* ===========================================================
   Revicard, back-office : les ecrans hors coque
   Connexion, mot de passe oublie, erreur.

   Ces trois ecrans n'ont ni barre laterale ni barre haute :
   quand on y arrive, on n'est pas encore entre, ou bien on
   s'est trompe d'adresse. Ils reprennent le meme fond vif et le
   meme verre que le reste du back-office, pour qu'on sache tout
   de suite ou l'on est.

   Aucun jeton nouveau : tout vient de admin-tokens.css.
   =========================================================== */

.entree{min-height:100vh;display:grid;place-items:center;padding:32px 20px}
.entree-boite{width:min(430px,100%)}

/* la marque, posee au-dessus de la carte plutot que dedans */
.entree-marque{display:flex;justify-content:center;margin-bottom:22px}
.entree-marque img{height:34px}

.carte-entree{
  padding:30px 32px 28px;border-radius:var(--radius);
  background:var(--glass-dense);
  -webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec),var(--glass-inner);
}
.carte-entree h1{font-family:var(--fd);font-size:22px;font-weight:600;letter-spacing:-.02em;
  line-height:1.25}
.carte-entree .chapeau{font-size:13px;color:var(--ink-2);margin-top:9px;line-height:1.6}

.champs{display:flex;flex-direction:column;gap:15px;margin-top:24px}
.champ-bloc label{display:block;font-size:12.5px;font-weight:550;color:var(--ink-2);margin-bottom:7px}
.champ-bloc .boite{
  display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--glass-spec),0 3px 10px -6px rgba(12,30,60,.25);
  transition:.16s var(--ease);
}
.champ-bloc .boite:focus-within{border-color:var(--royal);box-shadow:0 0 0 3px rgba(43,80,226,.16)}
.champ-bloc .boite svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.champ-bloc input{flex:1;min-width:0;padding:12px 0;border:0;background:none;
  font-family:inherit;font-size:14px;color:var(--ink)}
.champ-bloc input:focus{outline:none}
.champ-bloc .voir{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  border:0;background:none;color:var(--ink-3)}
.champ-bloc .voir:hover{color:var(--royal)}

/* un message d'erreur de saisie se place sous son champ, jamais ailleurs */
.champ-erreur{display:flex;align-items:center;gap:7px;margin-top:7px;
  font-size:12px;color:var(--danger);font-weight:500}
.champ-erreur svg{width:14px;height:14px;flex:none}

/* L'acceptation des conditions.
   Une case a cocher, pas une phrase resignee sous le bouton : c'est ce geste
   qui fait la preuve. La zone cliquable couvre tout le texte, parce qu'une
   case de 14 pixels au pouce sur un telephone est une case qu'on rate. */
.entree-accord{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer}
.entree-accord input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--royal);cursor:pointer}
.entree-accord span{font-size:12.5px;line-height:1.58;color:var(--ink-3)}
.entree-accord a{color:var(--royal);font-weight:550}
.entree-accord a:hover{text-decoration:underline}
.entree-accord input:focus-visible{outline:2px solid var(--royal);outline-offset:2px}

.entree-actions{margin-top:22px}
.entree-actions .btn{width:100%;justify-content:center;padding:13px 18px;font-size:14px}

.entree-liens{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:18px;flex-wrap:wrap}
.entree-liens a{font-size:12.5px;font-weight:550;color:var(--royal)}
.entree-liens a:hover{text-decoration:underline}
.entree-liens .info{font-size:12px;color:var(--ink-3)}

/* rappel de securite, sous la carte : il informe sans encombrer le formulaire */
.entree-pied{display:flex;gap:10px;margin-top:20px;padding:0 6px}
.entree-pied svg{width:15px;height:15px;color:var(--ink-3);flex:none;margin-top:1px}
.entree-pied p{font-size:11.5px;color:var(--ink-3);line-height:1.6}

/* ------------------------------------------------- etat envoye
   Le formulaire cede la place a une confirmation, dans la meme
   carte : on ne change pas de page pour une phrase. */
.envoye{display:none;text-align:center;padding:6px 0}
.envoye.actif{display:block}
.formulaire.masque{display:none}
.envoye .sceau{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  margin:0 auto 16px;color:var(--ok);background:var(--ok-tint);border:1px solid rgba(18,158,106,.25)}
.envoye .sceau svg{width:23px;height:23px}
.envoye h2{font-family:var(--fd);font-size:18px;font-weight:600;letter-spacing:-.015em}
.envoye p{font-size:13px;color:var(--ink-2);margin-top:9px;line-height:1.6}
.envoye .adresse{font-family:var(--fm);font-size:12.5px;color:var(--ink);
  background:rgba(12,30,60,.06);padding:3px 9px;border-radius:7px;display:inline-block;margin-top:4px}

/* ------------------------------------------------- ecran d'erreur */
.erreur-boite{width:min(560px,100%);text-align:center}
.erreur-code{font-family:var(--fd);font-size:76px;font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--royal)}
.erreur-boite h1{font-family:var(--fd);font-size:22px;font-weight:600;letter-spacing:-.02em;
  margin-top:14px}
.erreur-boite p{font-size:13.5px;color:var(--ink-2);margin-top:11px;line-height:1.65;
  max-width:52ch;margin-left:auto;margin-right:auto}
.erreur-boite code{font-family:var(--fm);font-size:12px;background:rgba(12,30,60,.06);
  padding:2px 8px;border-radius:6px;color:var(--ink-2)}
.erreur-actions{display:flex;gap:11px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.erreur-choix{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-sm);margin-top:30px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75)}
.erreur-choix button{padding:7px 13px;border-radius:9px;border:0;background:none;
  font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ink-3)}
.erreur-choix button.on{background:linear-gradient(180deg,#16305e,#0C1E3C);color:#fff}

@media (max-width:640px){
  .entree-liens{flex-direction:column;align-items:flex-start}
}