/* Stage-sourcing — interface opérateur.
   Même langage visuel que la carte du projet : bleu institutionnel, gris bleutés,
   chips sémantiques. Thème clair/sombre via prefers-color-scheme. */

:root {
  --paper:#F8F9FB; --surface:#FFFFFF; --surface-2:#F1F4F9;
  --ink:#16202E; --ink-soft:#4A5769; --ink-faint:#8592A5;
  --rule:#DFE4EC; --rule-strong:#C3CCDA;
  --accent:#2B5BAB; --accent-ink:#FFFFFF; --accent-soft:#E8EFFA;
  --ok:#17795E; --ok-soft:#E2F2ED;
  --warn:#8F5A06; --warn-soft:#FAF0DD;
  --stop:#A2364A; --stop-soft:#FBE9EC;
  --shadow:0 1px 2px rgba(22,32,46,.05), 0 8px 24px -16px rgba(22,32,46,.25);
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0F141C; --surface:#161D28; --surface-2:#1B2431;
    --ink:#E6EBF3; --ink-soft:#A3AFC1; --ink-faint:#6B7A90;
    --rule:#26303E; --rule-strong:#38455A;
    --accent:#7FA8EE; --accent-ink:#0F141C; --accent-soft:#1B2637;
    --ok:#4FBB96; --ok-soft:#13291F;
    --warn:#D9A038; --warn-soft:#2A2113;
    --stop:#E0788A; --stop-soft:#2C161B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans);
       font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.85em; background:var(--surface-2);
       padding:.1em .35em; border-radius:3px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- barre du haut ---------- */
.topbar { background:var(--surface); border-bottom:1px solid var(--rule);
          position:sticky; top:0; z-index:20; }
.topbar-inner { max-width:74rem; margin:0 auto; padding:.65rem 1.25rem;
                display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.marque { font-weight:750; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
.marque span { color:var(--accent); }
.marque:hover { text-decoration:none; }
.topbar nav { display:flex; gap:.25rem; flex-wrap:wrap; }
.topbar nav a { color:var(--ink-soft); padding:.35rem .7rem; border-radius:5px;
                font-size:.92rem; }
.topbar nav a:hover { background:var(--surface-2); text-decoration:none; }
.topbar nav a.actif { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.topbar-droite { margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.live { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem;
        color:var(--ink-faint); font-family:var(--mono); }
.live .dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--ink-faint); }
.live.ok .dot { background:var(--ok); }
.live.ok { color:var(--ok); }

/* ---------- structure ---------- */
.page { max-width:74rem; margin:0 auto; padding:1.75rem 1.25rem 4rem; }
.entete-page { display:flex; align-items:flex-start; justify-content:space-between;
               gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.01em; line-height:1.2;
     text-wrap:balance; }
h2 { font-size:1.05rem; font-weight:700; margin-bottom:.8rem; }
.sous-titre { color:var(--ink-soft); margin-top:.3rem; max-width:60ch; }
.entete-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fil { margin-bottom:1rem; font-size:.9rem; }
.deux-colonnes { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
                 gap:1.25rem; align-items:start; }
.colonne-lecture { display:flex; flex-direction:column; gap:1.25rem; max-width:52rem; }
@media (max-width:860px){ .deux-colonnes { grid-template-columns:1fr; } }

.panneau { background:var(--surface); border:1px solid var(--rule); border-radius:6px;
           padding:1.25rem 1.35rem; }
.panneau-accent { border-color:var(--accent); box-shadow:var(--shadow); margin-bottom:1.5rem; }

/* ---------- boutons & formulaires ---------- */
.btn { display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-size:.9rem;
       font-weight:600; padding:.5rem .95rem; border-radius:6px; cursor:pointer;
       border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink);
       text-decoration:none; }
.btn:hover { background:var(--surface-2); text-decoration:none; }
.btn-principal { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-principal:hover { filter:brightness(1.08); background:var(--accent); }
.btn-discret { border-color:transparent; background:transparent; color:var(--accent);
               padding:.3rem .55rem; }
.btn-discret:hover { background:var(--accent-soft); }
.btn[disabled] { opacity:.55; cursor:wait; }

label { display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.9rem;
        margin-bottom:.35rem; }
.requis { font-size:.72rem; color:var(--stop); font-weight:600; text-transform:uppercase;
          letter-spacing:.05em; }
.optionnel { font-size:.75rem; color:var(--ink-faint); font-weight:500; }
input, select, textarea {
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:6px; padding:.5rem .7rem; width:100%;
}
textarea { resize:vertical; line-height:1.55; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; }
.form-empile { display:flex; flex-direction:column; gap:.35rem; }
.form-empile label { margin-top:.75rem; }
.form-empile label:first-of-type { margin-top:0; }
.form-actions { margin-top:1.1rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.form-ligne { display:flex; gap:.6rem; flex-wrap:wrap; }
.form-ligne input { flex:1 1 12rem; width:auto; }
.form-inline { display:inline-flex; gap:.35rem; align-items:center; }
.form-inline select { width:auto; padding:.3rem .4rem; font-size:.85rem; }
.form-grille { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:.9rem; }
@media (max-width:640px){ .form-grille { grid-template-columns:1fr; } }
.case { font-weight:500; margin-top:.9rem; }
.case input { width:auto; }
.note { font-size:.84rem; color:var(--ink-faint); margin-top:.4rem; max-width:62ch; }

/* ---------- filtres & stats ---------- */
.filtres { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.filtres input[type=search] { flex:2 1 16rem; width:auto; }
.filtres select { flex:1 1 11rem; width:auto; }
.stats-ligne { display:flex; gap:1.2rem; margin-bottom:.9rem; font-size:.9rem;
               color:var(--ink-soft); }
.stat b { font-family:var(--mono); }
.stat-nouveau b { color:var(--accent); }

/* ---------- cartes d'offres ---------- */
.cartes-offres { display:flex; flex-direction:column; gap:.8rem; }
.carte-offre { background:var(--surface); border:1px solid var(--rule); border-radius:6px;
               padding:1.05rem 1.2rem; }
.carte-offre.nouvelle { border-left:3px solid var(--accent); }
.carte-offre-tete { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.carte-offre h3 { font-size:1.02rem; font-weight:700; line-height:1.3; }
.carte-offre-sous { color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; }
.carte-offre-desc { color:var(--ink-soft); font-size:.88rem; margin-top:.6rem; max-width:75ch; }
.carte-offre-actions { display:flex; align-items:center; gap:.6rem; margin-top:.8rem;
                       flex-wrap:wrap; }
.carte-offre-vue { margin-left:auto; font-size:.78rem; color:var(--ink-faint);
                   font-family:var(--mono); }
.inconnu { color:var(--warn); }

/* ---------- chips ---------- */
.chips { display:flex; gap:.35rem; flex-wrap:wrap; align-items:flex-start; }
.chip { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.03em;
        padding:.2rem .55rem; border-radius:999px; background:var(--surface-2);
        color:var(--ink-soft); white-space:nowrap; }
.chip-nouveau { background:var(--accent); color:var(--accent-ink); }
.chip-ok { background:var(--ok-soft); color:var(--ok); }
.chip-attention { background:var(--warn-soft); color:var(--warn); }
.chip-erreur { background:var(--stop-soft); color:var(--stop); }
.chip-discret { background:transparent; border:1px solid var(--rule); }
.chip-statut-sent { background:var(--accent-soft); color:var(--accent); }
.chip-statut-replied, .chip-statut-interview { background:var(--ok-soft); color:var(--ok); }
.chip-statut-rejected { background:var(--stop-soft); color:var(--stop); }
.chip-statut-no_answer { background:var(--surface-2); color:var(--ink-faint); }

/* ---------- tableaux ---------- */
.tableau-scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--rule);
                  border-radius:6px; }
.tableau { border-collapse:collapse; width:100%; font-size:.9rem; }
.tableau th, .tableau td { text-align:left; padding:.65rem .85rem;
                           border-bottom:1px solid var(--rule); vertical-align:top; }
.tableau thead th { font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
                    text-transform:uppercase; color:var(--ink-faint); font-weight:500;
                    background:var(--surface-2); white-space:nowrap; }
.tableau tbody tr:last-child td { border-bottom:none; }
.ligne-inactive { opacity:.55; }
.lien-discret { color:var(--ink-faint); font-size:.8rem; }
.mono { font-family:var(--mono); font-size:.85em; }

/* ---------- interrupteur ---------- */
.interrupteur { width:2.4rem; height:1.35rem; border-radius:999px; border:1px solid
                var(--rule-strong); background:var(--surface-2); cursor:pointer;
                position:relative; padding:0; }
.interrupteur span { position:absolute; top:.12rem; left:.14rem; width:1rem; height:1rem;
                     border-radius:50%; background:var(--ink-faint); transition:transform .15s; }
.interrupteur.on { background:var(--ok-soft); border-color:var(--ok); }
.interrupteur.on span { background:var(--ok); transform:translateX(1rem); }
@media (prefers-reduced-motion: reduce) { .interrupteur span { transition:none; } }

/* ---------- alertes, vides, toasts ---------- */
.alerte { padding:.7rem 1rem; border-radius:6px; font-size:.9rem; margin-bottom:1rem;
          border:1px solid; }
.alerte-erreur { background:var(--stop-soft); color:var(--stop); border-color:var(--stop); }
.alerte-succes { background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
.alerte-info { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.vide { background:var(--surface); border:1px dashed var(--rule-strong); border-radius:6px;
        padding:2.2rem; text-align:center; color:var(--ink-soft); }
.vide p + p { margin-top:.5rem; max-width:48ch; margin-left:auto; margin-right:auto;
              font-size:.92rem; }
#toasts { position:fixed; right:1rem; bottom:1rem; display:flex; flex-direction:column;
          gap:.5rem; z-index:50; }
.toast { background:var(--ink); color:var(--paper); padding:.65rem 1rem; border-radius:6px;
         font-size:.9rem; box-shadow:var(--shadow); max-width:22rem; }

/* ---------- divers ---------- */
.pas-a-pas { padding-left:1.2rem; display:flex; flex-direction:column; gap:.55rem;
             font-size:.92rem; color:var(--ink-soft); }
.liste-regles { padding-left:1.1rem; display:flex; flex-direction:column; gap:.55rem;
                font-size:.92rem; color:var(--ink-soft); }
.liste-test { list-style:none; display:flex; flex-direction:column; gap:.6rem;
              font-size:.9rem; }
.liste-test li { padding:.55rem .7rem; background:var(--surface-2); border-radius:5px; }
.faq dt { font-weight:650; margin-top:.9rem; }
.faq dt:first-child { margin-top:0; }
.faq dd { color:var(--ink-soft); font-size:.92rem; margin-top:.25rem; }
.texte-long { white-space:pre-wrap; font-size:.9rem; color:var(--ink-soft);
              max-height:32rem; overflow-y:auto; }
.btn-copier { font-size:.78rem; margin-left:auto; }

/* ---------- login ---------- */
.page-login { display:grid; place-items:center; min-height:100vh; padding:1rem; }
.carte-login { background:var(--surface); border:1px solid var(--rule); border-radius:8px;
               padding:2.2rem; width:100%; max-width:22rem; display:flex;
               flex-direction:column; gap:.6rem; box-shadow:var(--shadow); }
.carte-login h1 { font-size:1.3rem; }
.carte-login h1 span { color:var(--accent); }
.carte-login .btn { margin-top:.6rem; justify-content:center; }