/* ===================================================================
   HOROPS — pages en carte (connexion, mot de passe, invitation).
   Extrait tel quel de auth/login.html: memes couleurs, memes tailles.
   =================================================================== */
/* Meme langage visuel que la page d'accueil: le jade est la route qu'on
   prend, l'ambre ce qu'on ne traverse pas. Ici le motif se reduit a un
   filet au-dessus du formulaire — une signature, pas un decor. */
:root{
  --void:#0B0D10; --panel:#12161B; --panel-2:#171C22;
  --line:#1F252D; --line-2:#2A323C;
  --ink:#E9EEF3; --ink-2:#8D99A6; --ink-3:#5F6B78;
  --jade:#16C79A; --jade-deep:#0E8A6C; --ember:#E4694E;
}
body{
  background:var(--void); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.fx{min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px 20px 48px;}
.fx *{box-sizing:border-box;}
.fx a{color:inherit; text-decoration:none;}

.fx-back{position:absolute; top:24px; left:24px; color:var(--ink-3); font-size:14px;
  display:inline-flex; align-items:center; gap:7px;}
.fx-back:hover{color:var(--ink-2);}

.fx-mark{font-family:Archivo,sans-serif; font-weight:800; font-size:21px;
  display:flex; align-items:center; gap:9px; justify-content:center; margin-bottom:8px;}
.fx-tag{color:var(--ink-3); font-size:14px; text-align:center; margin:0 0 30px;}

.fx-card{width:100%; max-width:404px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:30px 28px 28px;
  position:relative; overflow:hidden;}
/* Le filet: l'ambre traverse, le jade contourne. */
.fx-card::before{content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,var(--ember) 0 34%,var(--jade) 34% 100%);}

.fx-card h1{font-family:Archivo,sans-serif; font-size:22px; font-weight:700;
  letter-spacing:-.02em; margin:0 0 4px;}
.fx-card p.fx-sub{color:var(--ink-2); font-size:14.5px; margin:0 0 24px;}

.fx-field{margin-bottom:16px;}
.fx-field label{display:block; font-size:13.5px; font-weight:500;
  color:var(--ink-2); margin-bottom:7px;}
.fx-input{width:100%; background:var(--void); color:var(--ink);
  border:1px solid var(--line-2); border-radius:9px; padding:12px 14px;
  font-family:inherit; font-size:15px; transition:border-color .15s, background .15s;}
.fx-input::placeholder{color:var(--ink-3);}
.fx-input:hover{border-color:#39424E;}
.fx-input:focus{outline:none; border-color:var(--jade); background:#0D1216;}
.fx-pass{position:relative;}
.fx-pass .fx-input{padding-right:46px;}
.fx-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--ink-3); cursor:pointer; padding:8px;
  border-radius:7px; display:grid; place-content:center;}
.fx-eye:hover{color:var(--ink-2);}
.fx-eye:focus-visible{outline:2px solid var(--jade); outline-offset:-2px;}

.fx-row{display:flex; justify-content:flex-end; margin:-4px 0 20px;}
.fx-row a{color:var(--ink-2); font-size:13.5px;}
.fx-row a:hover{color:var(--jade);}

.fx-btn{width:100%; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-family:inherit; font-weight:600; font-size:15px; padding:13px 20px;
  border-radius:10px; border:1px solid transparent; background:var(--jade);
  color:#04140F; cursor:pointer; transition:background .15s;}
.fx-btn:hover:not(:disabled){background:#1AD9A9;}
.fx-btn:disabled{opacity:.55; cursor:default;}
.fx-btn:focus-visible{outline:2px solid var(--jade); outline-offset:2px;}

/* Le message d'erreur explique ce qui s'est passe, a la place du navigateur. */
.fx-alert{display:none; gap:10px; align-items:flex-start; margin-bottom:18px;
  padding:12px 14px; border-radius:9px; font-size:14px; line-height:1.5;
  background:rgba(228,105,78,.09); border:1px solid rgba(228,105,78,.32);
  color:#F0A08D;}
.fx-alert.on{display:flex;}
.fx-alert svg{flex:none; margin-top:2px; color:var(--ember);}

.fx-foot{color:var(--ink-2); font-size:14.5px; text-align:center; margin-top:22px;}
.fx-foot a{color:var(--jade); font-weight:500;}
.fx-foot a:hover{text-decoration:underline; text-underline-offset:3px;}

.fx-legal{color:var(--ink-3); font-size:12.5px; text-align:center; margin-top:26px;}
.fx-legal a{color:var(--ink-3); text-decoration:underline; text-underline-offset:2px;}
.fx-legal a:hover{color:var(--ink-2);}

@media (max-width:520px){
  .fx-back{position:static; margin-bottom:22px; align-self:flex-start;}
  .fx{justify-content:flex-start; padding-top:24px;}
}
@media (prefers-reduced-motion: reduce){.fx *{transition:none !important;}}

/* main.css (gabarit commun) impose son propre fond: on le couvre. */
html, body{ background:var(--void) !important; }

/* Etat de reussite (email envoye, mot de passe change) */
.fx-ok{text-align:center;}
.fx-ok-ico{width:56px; height:56px; border-radius:14px; margin:4px auto 18px;
  display:grid; place-content:center; color:var(--jade);
  background:rgba(22,199,154,.08); border:1px solid rgba(22,199,154,.28);}
.fx-ok h1{margin-bottom:8px;}
.fx-ok p{color:var(--ink-2); font-size:14.5px; margin:0 0 22px;}
.fx-btn-line{background:transparent; color:var(--ink); border-color:var(--line-2);}
.fx-btn-line:hover:not(:disabled){background:var(--panel-2); border-color:var(--ink-3);}
[hidden]{display:none !important;}

/* Regles du mot de passe, cochees au fil de la frappe */
.fx-regles{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap;
  gap:6px 14px; font-size:12.5px; color:var(--ink-3);}
.fx-regles li{display:inline-flex; align-items:center; gap:6px;}
.fx-regles li::before{content:""; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--ink-3);}
.fx-regles li.ok{color:var(--jade);}
.fx-regles li.ok::before{background:var(--jade); border-color:var(--jade);}

/* Un bouton peut etre un lien (<a class="fx-btn">): « .fx a » (couleur
   heritee) l'emportait et ecrivait en blanc sur le jade. */
.fx a.fx-btn{ color:#04140F; }
.fx a.fx-btn.fx-btn-line{ color:var(--ink); }