/* Bleu et blanc, simples : la base de départ choisie par Micka le 13 octobre.
   Toutes les couleurs passent par ces variables : changer l'identité plus
   tard, logo compris, ne touchera qu'ici. */
:root{
  --bg:#f5f7fb; --surface:#ffffff; --sunken:#eef2f8;
  --fg:#14213d; --muted:#5c6b84; --line:#d9e0ec;
  --accent:#1f4fd1; --accent-fg:#ffffff; --accent-soft:#e3ebfd;
  --ok:#21704b; --ok-soft:#e1f2e9; --warn:#8a6016; --warn-soft:#f7ecd6;
  --off:#5c6b84; --off-soft:#e8ecf3; --bad:#b42323; --bad-soft:#fbe3e3;
  --orange:#b4501a; --orange-soft:#fbe9df; --tw:#1668a3;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1525; --surface:#162036; --sunken:#111a2d;
    --fg:#e8edf7; --muted:#9aa8c2; --line:#26324d;
    --accent:#7aa2ff; --accent-fg:#0e1525; --accent-soft:#1d2c52;
    --ok:#7fd1a5; --ok-soft:#163327; --warn:#e3c07a; --warn-soft:#33290f;
    --off:#9aa8c2; --off-soft:#1d2840; --bad:#f09090; --bad-soft:#3b1a1f;
    --orange:#f0a374; --orange-soft:#3a2416; --tw:#72bbe8;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:560px;margin:0 auto;padding:16px 16px 40px}
/* sur PC, Micka supervise : la page s'élargit, les cartes passent sur deux colonnes */
@media (min-width:1000px){
  main{max-width:1080px}
  .modele .grille{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
}
header.barre{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 14px}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0}
.marque{color:var(--accent)}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
/* 16 px minimum : en dessous, l'iPhone zoome sur le champ quand on le touche */
input,select{width:100%;font:inherit;font-size:16px;padding:12px;min-height:48px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.sub{color:var(--muted);font-size:14px}
.resume{margin:16px 0 10px}
.modele{margin-top:22px}
.modele>h2{margin-bottom:8px}
.part{background:var(--sunken);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:14px}
.part ul{margin:4px 0 0;padding-left:18px}
.compte{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px}
.tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pseudo{font-weight:600;font-size:17px;overflow-wrap:anywhere}
.plateforme{font-size:13px;color:var(--orange);white-space:nowrap}
.plateforme.tw{color:var(--tw)}
.sous-tete{display:flex;gap:8px;align-items:center;margin-top:4px}
/* vert ça tourne, ambre ça chauffe, orange ça coince, rouge c'est mort, gris ça dort */
.statut{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.statut.ok{background:var(--ok-soft);color:var(--ok)}
.statut.warn{background:var(--warn-soft);color:var(--warn)}
.statut.acc{background:var(--orange-soft);color:var(--orange)}
.statut.bad{background:var(--bad-soft);color:var(--bad)}
.statut.off{background:var(--off-soft);color:var(--off)}
.ligne{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline;margin-top:6px}
.ligne .cle{color:var(--muted);font-size:14px}
.ligne .val{min-width:0;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,Menlo,monospace}
/* Les accès prennent toute la largeur, libellé au-dessus : avec une colonne de
   libellés à gauche, sur 375 px, les boutons écrasaient les points du mot de
   passe en colonne, un par ligne, et coupaient les mails en deux. */
.acces{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.acces+.acces{border-top:0;padding-top:0;margin-top:8px}
.acces .cle{display:block;color:var(--muted);font-size:14px}
.rang{display:flex;align-items:center;gap:8px}
.rang .v{flex:1;min-width:0;overflow-wrap:anywhere}
/* 44 px : la taille qu'un pouce touche sans viser */
button{font:inherit;font-size:15px;min-height:44px;min-width:44px;padding:0 14px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
button.principal{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);width:100%;font-weight:600}
button.discret{border-color:transparent;background:transparent;color:var(--muted);padding:0 6px}
button:disabled{opacity:.55;cursor:default}
button.copier.fait{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.vide{color:var(--muted);font-style:italic}
.alerte{color:var(--bad)}
.avert{margin-top:28px;font-size:13px;color:var(--muted)}
/* l'écran de connexion */
.connexion{max-width:380px;margin:12vh auto 0}
.connexion h1{font-size:24px;margin-bottom:4px}
.connexion form{margin-top:24px;display:grid;gap:12px}
.connexion .code{letter-spacing:.4em;text-align:center;font-size:22px;font-family:ui-monospace,Menlo,monospace}
.message{min-height:20px;font-size:14px}
.message.erreur{color:var(--bad)}