/* VigieSpace : socle visuel commun (refonte du 11/09/2026).
   Chargé AVANT le <style> de chaque page : une page peut encore affiner ses propres règles.
   Contenu : palette, logo, fenêtres de dialogue (vigie-ui.js), avertissements, décor de fond.
   Logo : variante B validée par Alex le 11/09 (Unbounded, « Vigie » or + « Space » blanc, sans pastille). */

/* Unbounded, sous-ensemble latin de Google Fonts, auto-hébergé (police variable 200 à 900) */
@font-face { font-family:"Unbounded"; font-style:normal; font-weight:200 900; font-display:swap;
             src:url("/static/fonts/unbounded-latin.woff2") format("woff2");
             unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg:#0b0e14; --panel:#12161f; --panel2:#171c27; --line:#232a38; --txt:#e2e8f2;
  --dim:#93a0b4; --grey:#5b6675;
  --c-or:#e3b341; --c-sent:#58a6ff; --c-herm:#b48cff; --c-mail:#4dd0a7;
  --green:#3fb950; --red:#f85149;
  --or-encre:#231c07; --rouge-doux:#ff9d97;
  --vs-verre:rgba(15,19,28,.76); --vs-verre-fort:rgba(13,17,25,.86); --vs-bord-verre:rgba(255,255,255,.075);
  --vs-police:-apple-system,"Segoe UI",Roboto,sans-serif;
  --vs-police-logo:"Unbounded",-apple-system,"Segoe UI",Roboto,sans-serif;
  --vs-ombre:0 30px 80px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
  --vs-decor:url("/static/decor-vigiespace.avif");
  --vs-decor-mobile:url("/static/decor-vigiespace-mobile.avif");
}

/* ------------------------------------------------------------------ logo */
.vs-logo { display:inline-flex; align-items:baseline; font-family:var(--vs-police-logo); font-weight:600;
           letter-spacing:-.03em; line-height:1; text-decoration:none; white-space:nowrap; color:var(--txt); }
.vs-logo .vs-vigie { color:var(--c-or); }
.vs-logo .vs-space { color:var(--txt); font-weight:500; }
a.vs-logo:hover .vs-space { color:#fff; }
a.vs-logo:focus-visible { outline:2px solid var(--c-or); outline-offset:3px; border-radius:4px; }
.barre .vs-logo { font-size:16px; margin-right:4px; }
/* téléphone : logo et « Se déconnecter » sur la première ligne, les pages sur la seconde */
@media (max-width:700px) {
  .barre .vs-logo { order:0; margin-right:auto; font-size:17px; }
  .barre a[href="/deconnexion"] { order:1; }
  .barre .moi { display:none; }
  .barre a:not(.vs-logo):not([href="/deconnexion"]) { order:2; }
  .barre a:not(.vs-logo):not([href="/deconnexion"]):first-of-type { margin-left:0; }
}

/* ------------------------------------------------------------------ fenêtres de dialogue */
html.vs-bloque { overflow:hidden; }
.vs-voile { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
            padding:16px; background:rgba(4,6,10,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
            animation:vs-fondu .16s ease-out; }
.vs-boite { position:relative; width:min(440px,100%); max-height:calc(100vh - 32px); overflow:auto; box-sizing:border-box;
            background:linear-gradient(180deg,#171c28 0%,#10141c 100%); color:var(--txt);
            border:1px solid var(--vs-bord-verre); border-radius:18px; padding:22px 22px 18px;
            box-shadow:var(--vs-ombre),inset 0 1px 0 rgba(255,255,255,.04);
            font:14px/1.55 var(--vs-police); text-align:left; outline:none;
            animation:vs-entree .2s cubic-bezier(.2,.8,.2,1); }
.vs-boite::before { content:""; position:absolute; left:24px; right:24px; top:0; height:1px;
                    background:linear-gradient(90deg,transparent,rgba(227,179,65,.6),transparent); }
.vs-boite.vs-danger::before { background:linear-gradient(90deg,transparent,rgba(248,81,73,.65),transparent); }
.vs-boite *, .vs-toast * { box-sizing:border-box; }
.vs-tete { display:flex; gap:14px; align-items:flex-start; margin-bottom:4px; }
.vs-textes { min-width:0; flex:1; }
.vs-ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.vs-ico svg { width:21px; height:21px; }
.vs-ico-or { color:var(--c-or); background:rgba(227,179,65,.11); box-shadow:inset 0 0 0 1px rgba(227,179,65,.26); }
.vs-ico-rouge { color:var(--rouge-doux); background:rgba(248,81,73,.11); box-shadow:inset 0 0 0 1px rgba(248,81,73,.32); }
.vs-titre { text-transform:none; font-size:16.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:1px 0 5px; text-wrap:balance; color:var(--txt); }
.vs-texte { color:var(--dim); font-size:13.5px; margin:0 0 5px; overflow-wrap:anywhere; }
.vs-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:20px; }

.vs-btn { margin:0; width:auto; font:inherit; font-size:13.5px; font-weight:650; line-height:1.2; border-radius:10px; padding:9px 16px; min-height:40px;
          cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:7px;
          transition:filter .15s,background-color .15s,border-color .15s,color .15s,transform .08s; }
.vs-btn:active { transform:scale(.98); }
.vs-btn:focus-visible { outline:2px solid var(--c-or); outline-offset:2px; }
.vs-btn svg { width:15px; height:15px; }
.vs-btn-neutre { background:rgba(255,255,255,.04); border-color:var(--line); color:var(--txt); }
.vs-btn-neutre:hover { background:rgba(255,255,255,.08); border-color:var(--grey); }
.vs-btn-or { background:var(--c-or); color:var(--or-encre); box-shadow:0 6px 18px rgba(227,179,65,.2); }
.vs-btn-or:hover { filter:brightness(1.08); border-color:transparent; }
.vs-btn-rouge { background:#d0372e; color:#fff; box-shadow:0 6px 18px rgba(248,81,73,.22); }
.vs-btn-rouge:hover { background:#e2443a; border-color:transparent; }
.vs-btn-rouge:focus-visible { outline-color:var(--rouge-doux); }

.vs-form { margin-top:14px; }
.vs-libelle { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); font-weight:600; margin:0 0 6px; }
.vs-boite .vs-champ { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
            color:var(--txt); font:inherit; font-size:14.5px; outline:none; transition:border-color .15s,box-shadow .15s; }
.vs-boite .vs-champ:focus { border-color:var(--c-or); box-shadow:0 0 0 3px rgba(227,179,65,.14); }
.vs-erreur { color:var(--rouge-doux); font-size:12.5px; margin-top:7px; }

/* fenêtre du mot de passe généré */
.vs-boite.vs-secret { width:min(500px,100%); }
.vs-acces { display:grid; gap:8px; margin-top:14px; }
.vs-ligne { display:grid; grid-template-columns:104px minmax(0,1fr) auto; align-items:center; gap:10px;
            background:rgba(11,14,20,.8); border:1px solid var(--line); border-radius:12px; padding:7px 7px 7px 12px; }
.vs-lib { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey); font-weight:650; }
.vs-val { font:500 13.5px/1.4 ui-monospace,Menlo,Consolas,monospace; color:var(--txt); overflow-wrap:anywhere;
          user-select:all; -webkit-user-select:all; background:none; padding:0; }
.vs-val.vs-fort { font-size:17px; font-weight:650; color:var(--c-or); letter-spacing:.05em; }
.vs-btn-copier { background:transparent; border-color:var(--line); color:var(--dim); padding:6px 10px; min-height:34px; font-size:12.5px; }
.vs-btn-copier:hover { color:var(--txt); border-color:var(--grey); }
.vs-btn.vs-copie { color:var(--green); border-color:rgba(63,185,80,.5); }

/* avertissements brefs (remplacent alert) */
.vs-pile { position:fixed; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:10001;
           display:flex; flex-direction:column; gap:8px; width:min(460px,calc(100vw - 32px)); pointer-events:none; }
.vs-toast { pointer-events:auto; display:flex; align-items:center; gap:10px; color:var(--txt);
            background:rgba(20,25,35,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
            border:1px solid var(--vs-bord-verre); border-radius:14px; padding:9px 8px 9px 10px;
            box-shadow:0 16px 40px rgba(0,0,0,.5); font:13.5px/1.45 var(--vs-police);
            animation:vs-monte .22s cubic-bezier(.2,.8,.2,1); }
.vs-toast .vs-ico { width:30px; height:30px; border-radius:9px; }
.vs-toast .vs-ico svg { width:17px; height:17px; }
.vs-toast-texte { flex:1; min-width:0; overflow-wrap:anywhere; }
.vs-toast-erreur .vs-ico { color:var(--rouge-doux); background:rgba(248,81,73,.13); }
.vs-toast-ok .vs-ico { color:var(--green); background:rgba(63,185,80,.13); }
.vs-toast-info .vs-ico { color:var(--c-or); background:rgba(227,179,65,.12); }
.vs-btn-fermer { background:transparent; border:none; color:var(--grey); min-height:30px; padding:0 9px; font-size:19px; font-weight:400; }
.vs-btn-fermer:hover { color:var(--txt); }

.vs-voile.vs-sortie { animation:vs-fondu-sortie .14s ease-in forwards; }
.vs-toast.vs-sortie { animation:vs-fondu-sortie .16s ease-in forwards; }
@keyframes vs-fondu { from { opacity:0; } to { opacity:1; } }
@keyframes vs-fondu-sortie { to { opacity:0; } }
@keyframes vs-entree { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes vs-feuille { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes vs-monte { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (max-width:560px) {
  .vs-voile { align-items:flex-end; padding:0; }
  .vs-boite, .vs-boite.vs-secret { width:100%; max-height:92vh; border-radius:20px 20px 0 0;
              padding:22px 18px calc(18px + env(safe-area-inset-bottom)); animation-name:vs-feuille; }
  .vs-actions { flex-direction:column-reverse; }
  .vs-actions .vs-btn { width:100%; min-height:46px; font-size:14.5px; }
  .vs-ligne { grid-template-columns:minmax(0,1fr) auto; }
  .vs-lib { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  .vs-voile, .vs-boite, .vs-toast, .vs-sortie { animation:none !important; }
}

/* ------------------------------------------------------------------ décor de fond (pages d'arrivée) */
/* <body class="vs-decor"> : image fixe + voile encre ; les panneaux passent en verre dépoli.
   Fond N3 (voie lactée nette) en AVIF et voile « haut du ciel plus sombre », validés par Alex le 11/09 à 22h41. */
body.vs-decor::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
                        background:var(--bg) var(--vs-decor) center 62% / cover no-repeat; }
body.vs-decor::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
                       background:linear-gradient(180deg,rgba(4,6,11,.82) 0%,rgba(6,8,14,.5) 32%,rgba(11,14,20,.14) 70%,rgba(11,14,20,.06) 100%); }
@media (max-width:700px) { body.vs-decor::before { background-image:var(--vs-decor-mobile); background-position:center 70%; } }
body.vs-decor nav, body.vs-decor .barre { background:var(--vs-verre-fort); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
                                          border-color:var(--vs-bord-verre); }
body.vs-decor .bloc, body.vs-decor .carte, body.vs-decor form.nouveau {
  background:var(--vs-verre); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--vs-bord-verre); }
body.vs-decor .bloc > .pied { background:rgba(23,28,39,.55); }
body.vs-decor .bloc-plus { background:rgba(11,14,20,.3); }
body.vs-decor header.top h1, body.vs-decor h2.rang, body.vs-decor main > h1 { text-shadow:0 1px 14px rgba(0,0,0,.7); }
body.vs-decor main > .sous, body.vs-decor header.top .sub { color:var(--dim); text-shadow:0 1px 10px rgba(0,0,0,.7); }

/* ------------------------------------------------------------------ anciens <b onclick> devenus des boutons */
button.act, .tabs button, .sources button, .pages button, .filtres button, button.vider { font-family:inherit; line-height:1.5; }
button.act:focus-visible, .tabs button:focus-visible, .sources button:focus-visible, .pages button:focus-visible,
.filtres button:focus-visible, button.vider:focus-visible, [role="button"]:focus-visible { outline:2px solid var(--c-or); outline-offset:2px; }