/* Styles des pages publiques : connexion et demande d'accès.
   Elles vivent hors de l'application — servies avant toute authentification —
   donc elles ne peuvent pas dépendre de app.js. Elles reprennent en revanche
   les jetons de interface.css pour rester la même maison. */

@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(fonts/newsreader.woff2) format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(fonts/publicsans.woff2) format('woff2');
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.5; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  -webkit-font-smoothing:antialiased;
}
.boite{width:100%; max-width:380px}
.marque{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.marque .verre{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--accent-wash); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.marque h1{
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:27px;
  margin:0; letter-spacing:-.2px; line-height:1.05;
}
.sous{color:var(--muted); font-size:13px; margin:0 0 22px 48px}
.carte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:0 8px 28px rgb(var(--ombre) / .07);
}
.carte h2{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:21px; margin:0 0 4px}
.carte .intro{color:var(--muted); font-size:13px; margin:0 0 18px}
.champ{margin-bottom:14px}
.champ label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; font-weight:600}
.champ input,.champ textarea{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink); padding:11px 12px; font-size:15px;
  font-family:inherit; outline:none;
}
.champ input:focus,.champ textarea:focus{border-color:var(--accent)}
.principal{
  width:100%; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:var(--r); padding:12px 16px; font-weight:600; font-size:14.5px;
  font-family:inherit; cursor:pointer; transition:.12s;
}
.principal:hover{filter:brightness(1.08)}
.alerte{
  background:var(--past-wash); border:1px solid color-mix(in srgb,var(--past) 35%,var(--line)); color:var(--past);
  border-radius:var(--r); padding:10px 12px; font-size:13px; margin-bottom:16px;
}
.pied{margin-top:18px; font-size:12.5px; color:var(--muted); text-align:center}
.pied a{color:var(--accent); font-weight:600}
.note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--faint); line-height:1.5;
}

/* Champ piège à robots : hors de l'écran plutôt que display:none, que
   certains automates savent reconnaître et ignorer. */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Retour proposé après l'envoi, à la place du formulaire. */
.retour{
  display:inline-block; margin-top:8px; color:var(--accent);
  font-weight:600; font-size:13.5px; text-decoration:none;
}
.retour:hover{text-decoration:underline}
/* Le même bouton en lien : recours si la messagerie ne s'ouvre pas seule. */
a.principal{
  display:block; box-sizing:border-box; text-align:center;
  text-decoration:none; margin-top:4px;
}
/* Après envoi, la carte ne porte plus qu'un message : on le centre. */
.carte.fini{text-align:center}
.carte.fini .intro{margin-bottom:18px}
.carte.fini:focus{outline:none}

/* ---- Page « Mon compte » ---------------------------------------------------- */
[hidden]{display:none !important}
.boite.large{max-width:560px}
.carte + .carte{margin-top:16px}
.aide{margin:6px 0 0; font-size:12px; color:var(--muted); line-height:1.45}
.secondaire{
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:8px 12px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; min-height:40px;
}
.secondaire:hover{border-color:var(--accent); color:var(--accent)}
.secondaire.danger{color:var(--past)}
/* Premier appui : le bouton s'arme et le dit, le second agit. */
.secondaire.arme{background:var(--past-wash); border-color:var(--past); color:var(--past)}
.secondaire:disabled{opacity:.55; cursor:default}
.liste-comptes{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--line)}
.liste-comptes li{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line)}
.compte-info{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0}
.compte-info strong{font-size:15px; overflow-wrap:anywhere}
.compte-info small{flex-basis:100%; color:var(--muted); font-size:12px}
.etiquette-compte{font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-wash);
  border-radius:20px; padding:2px 8px}
.compte-actions{display:flex; gap:6px; flex-wrap:wrap}
.creer{padding-top:4px}
.provisoire{margin-top:18px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:var(--accent-wash); border-radius:var(--r)}
.provisoire:focus{outline:none}
.provisoire h3{margin:0 0 6px; font-size:15px}
.provisoire p{margin:0 0 10px; font-size:13px}
.provisoire pre{margin:0 0 12px; padding:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all}
.carte[tabindex="-1"]:focus{outline:none}
.compte-info small.echecs{color:var(--past); font-weight:600}
.compte-info small + small{margin-top:-4px}