/* Style commun des pages rendues côté serveur : connexion, installation,
   second facteur, réglages. Séparé du HTML depuis le 24/08/2026 — voir
   vocal.css : une empreinte CSP périmée rend la page muette sans message.
   La palette reprend celle de la page vocale : même produit, même écran. */
:root { color-scheme: dark; --fond:#14161a; --carte:#1e2128; --trait:#2e323c;
        --texte:#e8eaed; --doux:#9aa0aa; --accent:#c96442; --vert:#3f8f5f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font-size:17px;
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       display:flex; justify-content:center; padding:1.5rem 1rem 3rem; }
main { width:min(30rem,100%); }
h1 { font-size:1.1rem; margin:0 0 .3rem; }
p.sous { color:var(--doux); font-size:.85rem; margin:0 0 1.4rem; line-height:1.5; }
form { display:flex; flex-direction:column; gap:.9rem; }
label { display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; color:var(--doux); }
input { font:inherit; background:var(--carte); color:var(--texte); padding:.6rem .7rem;
        border:1px solid var(--trait); border-radius:.6rem; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { font:inherit; font-weight:600; background:var(--accent); color:#fff; border:none;
         border-radius:.6rem; padding:.7rem; cursor:pointer; }
button[disabled] { opacity:.5; cursor:default; }
.alerte { background:#2a1c19; border:1px solid var(--accent); color:#f0c4b6;
          padding:.6rem .75rem; border-radius:.6rem; font-size:.85rem; line-height:1.45; }
.bien { background:#1a2a1f; border:1px solid var(--vert); color:#bfe3cb;
        padding:.6rem .75rem; border-radius:.6rem; font-size:.85rem; line-height:1.45; }
a { color:var(--doux); font-size:.85rem; }
.cadre { background:var(--carte); border:1px solid var(--trait); border-radius:.7rem;
         padding:1rem; margin:1.1rem 0; }
.cadre h2 { font-size:.9rem; margin:0 0 .6rem; }
.qr { background:#fff; padding:.7rem; border-radius:.5rem; width:min(15rem,70%); margin:0 auto .8rem; }
.qr svg { display:block; width:100%; height:auto; }
.codes { display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.4rem;
         font-family:ui-monospace,monospace; font-size:.9rem; }
.codes span { background:var(--fond); border:1px solid var(--trait); border-radius:.4rem;
              padding:.35rem .5rem; text-align:center; }
.secret { font-family:ui-monospace,monospace; font-size:.78rem; color:var(--doux);
          overflow-wrap:anywhere; margin:.5rem 0 0; }

/* Le lien vers l'aide, posé en haut à droite de toutes les pages sauf l'aide
   elle-même. Encadré comme le lien « Réglages » de la page vocale : discret,
   mais assez visible pour qu'on le trouve sans le chercher. */
.lien-aide { text-align:right; margin:0 0 1rem; }
.lien-aide a { color:var(--doux); text-decoration:none; font-size:.78rem;
               border:1px solid var(--trait); border-radius:.5rem;
               padding:.25rem .5rem; white-space:nowrap; }
.lien-aide a:hover { color:var(--texte); border-color:var(--accent); }

/* --- Le pied de page commun, rendu par version.py ----------------------- */
/* Mentions légales et version, discrètes : on les consulte, on ne les lit pas.
   ⚠️ La page vocale a déjà un <footer>, celui des boutons — d'où la classe,
   qui ne vise que celui-ci. */
.pied { color:var(--doux); font-size:.72rem; line-height:1.5; text-align:center;
        margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--trait);
        display:block; }
.pied p { margin:.35rem 0; }

/* --- Le logo, à gauche du titre ---------------------------------------- */
/* ⚠️ `flex: 0 0 auto` n'est pas décoratif : sans lui, une image en flex-item
   se laisse écraser par le texte et le logo devient un ovale. */
h1 { display: flex; align-items: center; gap: .55rem; }
h1 .logo { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: .42rem; }