/* Pages d'accès : connexion et choix du mot de passe. Panneau de marque bleu nuit
   à gauche, formulaire à droite — le squelette de la connexion du Manager. */
:root{
  --blue:#0C9AF2; --blue-600:#0171b0;
  --nuit-0:#050d20; --nuit-1:#0a1a3d; --nuit-2:#0f2a5c;
  --ink:#0f1c2e; --slate-500:#647388; --slate-400:#8695a9; --slate-300:#c4d0de; --slate-200:#dde5ef;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink);font-family:var(--sys)}
.page{min-height:100vh;display:flex}

/* ---------- Panneau de marque ---------- */
.marque{
  position:relative;flex:1.05 1 0;padding:46px 48px;color:#e6efff;overflow:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(620px 340px at 18% 12%, rgba(12,154,242,.30), transparent 60%),
    radial-gradient(520px 420px at 95% 105%, rgba(12,154,242,.14), transparent 60%),
    linear-gradient(155deg, var(--nuit-2) 0%, var(--nuit-1) 48%, var(--nuit-0) 100%);
}
.cercle{position:absolute;border-radius:50%;border:1px solid rgba(160,205,255,.13);pointer-events:none}
.c1{width:300px;height:300px;right:-100px;bottom:-100px}
.c2{width:470px;height:470px;right:-175px;bottom:-175px;opacity:.7}
.c3{width:660px;height:660px;right:-260px;bottom:-260px;opacity:.4}
.logo{position:relative;width:150px;height:auto;display:block}
.produit{position:relative;margin-top:auto;padding-top:48px}
.produit .nom{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9ccfff;margin-bottom:18px}
.produit .nom::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--blue)}
.produit h1{font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;max-width:19ch;font-weight:700;color:#fff;text-wrap:balance}
.produit p{color:rgba(230,239,255,.78);font-size:15px;line-height:1.6;max-width:36ch;margin:0}
.pied{position:relative;margin-top:48px;font-size:12.5px;color:rgba(230,239,255,.55)}

/* ---------- Panneau du formulaire ---------- */
.acces{flex:1 1 0;padding:44px clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;background:#fff}
.boite{width:100%;max-width:360px;margin:0 auto}
h2{margin:0 0 5px;font-size:22px;letter-spacing:-.02em}
.sous{margin:0 0 22px;font-size:13px;color:var(--slate-500);line-height:1.5}
.google{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;
  background:#fff;color:#2c3442;border:1px solid var(--slate-300);border-radius:11px;padding:12px 16px;
  font:600 14.5px var(--sys);box-shadow:0 2px 6px rgba(16,35,59,.07),0 12px 28px -18px rgba(16,35,59,.25)
}
.google:hover{border-color:var(--slate-400)}
.sep{display:flex;align-items:center;gap:12px;color:var(--slate-400);font-size:12px;margin:16px 0 14px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--slate-200)}
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.champ label{font-size:12px;font-weight:600;color:var(--slate-500)}
.champ input{width:100%;border:1px solid var(--slate-200);border-radius:10px;padding:11px 12px;font:13.5px var(--sys);color:var(--ink);background:#fff;outline:none}
.champ input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(12,154,242,.15)}
.champ input::placeholder{color:var(--slate-400)}
.mdp{position:relative}.mdp input{padding-right:40px}
.oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:var(--slate-400);display:grid;place-items:center;padding:4px}
.aide{font-size:12px;color:var(--slate-400);margin:-4px 0 14px}
.ligne{display:flex;justify-content:flex-end;margin:-2px 0 14px}
.lien{font-size:12.5px;color:var(--blue-600);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sys)}
.lien:hover{text-decoration:underline}
.valider{width:100%;border:0;cursor:pointer;font:600 14.5px var(--sys);padding:12px 16px;border-radius:11px;color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-600));box-shadow:0 10px 22px -10px rgba(12,154,242,.7)}
.valider:disabled{opacity:.7;cursor:default}
.avis{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45}
.avis.info{background:#eef6fe;border:1px solid #cfe6fb;color:#0c4a78}
.avis.erreur{background:#fceceb;border:1px solid #f3c9c6;color:#b8302a}
.bas{margin-top:22px;font-size:12px;color:var(--slate-400);text-align:center;line-height:1.5}

/* ---------- Téléphone : la marque devient un bandeau ---------- */
@media (max-width:860px){
  .page{flex-direction:column}
  .marque{flex:none;padding:22px 20px 26px}
  .cercle{display:none}
  .logo{width:96px}
  .produit{margin-top:0;padding-top:20px}
  .produit .nom{margin-bottom:8px;font-size:11.5px}
  .produit h1{font-size:22px;margin-bottom:6px;max-width:none}
  .produit p{font-size:13.5px}
  .pied{display:none}
  .acces{padding:28px 20px 40px;justify-content:flex-start}
}