/* ==========================================================================
   Espace SFE — feuille de styles de l'application
   Même identité que le site vitrine, densité d'un outil de travail.
   Aucune ressource externe.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --sunk:      #eef0f7;
  --border:    #e5e6f0;
  --rule:      #d5d7e6;

  --ink:       #14162b;
  --ink-soft:  #3a3d5c;
  --muted:     #676a87;

  --brand:     #312e81;
  --accent:    #4f46e5;
  --accent-dk: #4338ca;
  --accent-bg: #eef0fe;
  --ring:      rgba(79, 70, 229, .28);

  --ok:        #0f766e;
  --ok-bg:     #e4f5f4;
  --alerte:    #b45309;
  --alerte-bg: #fdf3e3;
  --erreur:    #b91c1c;
  --erreur-bg: #fdeaea;

  --logo-badge: #312e81;
  --logo-accent:#22d3ee;

  --r:  8px;
  --r-s: 5px;
  --ombre: 0 1px 2px rgba(20,22,43,.05), 0 1px 3px rgba(20,22,43,.04);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0f18;
    --surface:   #171a2c;
    --sunk:      #1c2036;
    --border:    #262a44;
    --rule:      #343a5c;
    --ink:       #eceef8;
    --ink-soft:  #c6cae0;
    --muted:     #949ab8;
    --brand:     #c7cbf8;
    --accent:    #818cf8;
    --accent-dk: #a5b4fc;
    --accent-bg: #1e1b4b;
    --ring:      rgba(129,140,248,.35);
    --ok:        #45c4bb;
    --ok-bg:     #0f2b2a;
    --alerte:    #f0c274;
    --alerte-bg: #2a2214;
    --erreur:    #f8a3a3;
    --erreur-bg: #2c1618;
    --logo-badge:#4f46e5;
    --logo-accent:#67e8f9;
    --ombre: 0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dk); }

h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0; color: var(--brand); }
h2 { font-size: 1.05rem; margin: 0 0 14px; color: var(--ink); }

code { font-family: var(--mono); font-size: .88em; background: var(--sunk); padding: 1px 6px; border-radius: 4px; }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-s); }

.skip { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: 10px 18px; z-index: 100; }
.skip:focus { left: 0; top: 0; }

/* ------------------------------------------------------------- Structure --- */

.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }

.barre {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
@media (max-width: 860px) { .barre { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } }

.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marque svg { width: 36px; height: 36px; flex-shrink: 0; }
.marque span { display: flex; flex-direction: column; line-height: 1.2; }
.marque b { color: var(--brand); font-size: 1.02rem; letter-spacing: -.01em; }
.marque em { color: var(--muted); font-size: .72rem; font-style: normal; }

.barre nav { display: flex; flex-direction: column; gap: 2px; }
.barre nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: 9px 12px; border-radius: var(--r-s);
  font-size: .93rem; font-weight: 500;
}
.barre nav a:hover { background: var(--sunk); color: var(--brand); }
.barre nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.barre nav a.futur { color: var(--muted); pointer-events: none; opacity: .5; }
.barre nav a.futur::after { content: " · à venir"; font-size: .75rem; }

.barre-pied { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; font-size: .85rem; }
.barre-pied .qui { display: block; color: var(--ink-soft); font-weight: 600; margin-bottom: 3px; }
.barre-pied a { color: var(--muted); text-decoration: none; }
.barre-pied a:hover { color: var(--accent); text-decoration: underline; }

main { padding: 30px 34px 60px; max-width: 1180px; }
@media (max-width: 700px) { main { padding: 22px 18px 44px; } }

/* ---------------------------------------------------------------- Entête --- */

.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.entete-actions { display: flex; gap: 8px; align-items: center; }
.chapo { margin: 5px 0 0; color: var(--muted); font-size: .92rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* --------------------------------------------------------------- Boutons --- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 17px; border: 1px solid var(--rule); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-primaire:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.bouton-discret { background: transparent; border-color: transparent; color: var(--muted); }
.bouton-discret:hover { background: var(--sunk); color: var(--erreur); border-color: transparent; }
.bouton-large { width: 100%; padding: 12px; }

.lien-discret { color: var(--muted); font-size: .88rem; text-decoration: none; }
.lien-discret:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------------------------------------------- Alertes --- */

.alerte { padding: 11px 16px; border-radius: var(--r-s); font-size: .9rem; margin: 0 0 22px; border: 1px solid transparent; }
.alerte-succes { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.alerte-erreur { background: var(--erreur-bg); color: var(--erreur); border-color: currentColor; }
.alerte-info   { background: var(--accent-bg); color: var(--accent); border-color: currentColor; }

/* ---------------------------------------------------------------- Tuiles --- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 30px; }
.tuile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--ombre);
}
.tuile-libelle { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tuile-valeur { display: block; font-size: 1.55rem; font-weight: 700; color: var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tuile-alerte .tuile-valeur { color: var(--alerte); }
.tuile-ok .tuile-valeur { color: var(--ok); }

/* ---------------------------------------------------------------- Blocs --- */

.bloc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--ombre); }
.note-etape { background: var(--accent-bg); border-color: transparent; box-shadow: none; }
.note-etape p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .deux-colonnes { grid-template-columns: 1fr; } }

.carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--ombre); }
.carte-notes p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.carte dl { margin: 0; display: grid; gap: 10px; }
.carte dt { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.carte dd { margin: 2px 0 0; font-size: .93rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- Tableaux --- */

.tableau { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-s); }
table { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 480px; }
thead th {
  text-align: left; padding: 10px 14px; background: var(--sunk); color: var(--ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunk); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td a.fort { font-weight: 600; text-decoration: none; }
td a.fort:hover { text-decoration: underline; }
.terne { color: var(--muted); }
.retard { color: var(--alerte); font-weight: 600; }

/* -------------------------------------------------------------- Pastilles --- */

.pastille {
  display: inline-block; padding: 2px 9px; border-radius: 100px;
  font-size: .74rem; font-weight: 600; background: var(--sunk); color: var(--muted);
  text-transform: capitalize;
}
.pastille-societe { background: var(--accent-bg); color: var(--accent); }
.pastille-particulier { background: var(--ok-bg); color: var(--ok); }
.pastille-archive { background: var(--alerte-bg); color: var(--alerte); }

/* --------------------------------------------------------------- Filtres --- */

.filtres { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.filtres input[type="search"] { flex: 1 1 260px; }
.pousse { flex: 1 1 auto; }

/* ----------------------------------------------------------- Formulaires --- */

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; padding: 9px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-s);
  font: inherit; font-size: .93rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
textarea { resize: vertical; }

.formulaire { max-width: 780px; }
fieldset { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 18px 22px 22px; margin: 0 0 18px; box-shadow: var(--ombre); }
legend { padding: 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.champ { margin-bottom: 15px; }
.champ:last-child { margin-bottom: 0; }
.champ label { display: block; margin-bottom: 5px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.obl { color: var(--accent); }
.aide-inline { font-weight: 400; color: var(--muted); font-size: .8rem; }
.aide { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }
.erreur { color: var(--erreur); font-size: .82rem; margin: 5px 0 0; }
.en-erreur input, .en-erreur textarea { border-color: var(--erreur); }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grille-3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; }
@media (max-width: 620px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .choix { grid-template-columns: 1fr; } }
.option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-s); cursor: pointer; }
.option:hover { border-color: var(--accent); }
.option.actif { border-color: var(--accent); background: var(--accent-bg); }
.option input { margin-top: 4px; accent-color: var(--accent); }
.option span { display: flex; flex-direction: column; line-height: 1.35; }
.option b { font-size: .92rem; color: var(--ink); }
.option em { font-style: normal; font-size: .8rem; color: var(--muted); }

.actions { display: flex; align-items: center; gap: 14px; }

/* ------------------------------------------------------------ État vide --- */

.vide { text-align: center; padding: 46px 20px; background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r); }
.vide p { color: var(--muted); margin: 0 0 16px; }
.vide-grand { padding: 80px 20px; }
.code-erreur { font-size: 3rem; font-weight: 700; color: var(--brand); margin: 0 0 6px; }

/* -------------------------------------------------------------- Connexion --- */

.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.carte-connexion {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 34px 32px 30px;
  box-shadow: 0 4px 24px rgba(20,22,43,.08);
}
.carte-connexion .logo { width: 48px; height: 48px; display: block; margin-bottom: 20px; }
.carte-connexion h1 { font-size: 1.4rem; margin-bottom: 2px; }
.carte-connexion .sous-titre { margin: 0 0 24px; color: var(--muted); font-size: .9rem; }
.carte-connexion form { margin-top: 4px; }
.carte-connexion .bouton { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --------------------------------------------------------------- Onglets --- */

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.onglets a {
  padding: 8px 14px; border-radius: var(--r-s) var(--r-s) 0 0;
  color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.onglets a:hover { background: var(--sunk); }
.onglets a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.onglets .compte {
  background: var(--sunk); color: var(--muted); border-radius: 100px;
  padding: 0 7px; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.onglets a[aria-current="page"] .compte { background: var(--accent-bg); color: var(--accent); }

/* ---------------------------------------------------------- États documents --- */

.etat-brouillon { background: var(--sunk); color: var(--muted); }
.etat-envoye    { background: var(--accent-bg); color: var(--accent); }
.etat-accepte,
.etat-payee     { background: var(--ok-bg); color: var(--ok); }
.etat-refuse,
.etat-annulee   { background: var(--erreur-bg); color: var(--erreur); }
.etat-expire    { background: var(--alerte-bg); color: var(--alerte); }
.etat-emise     { background: var(--alerte-bg); color: var(--alerte); }

/* -------------------------------------------------------- Saisie de lignes --- */

.formulaire-large { max-width: 1000px; }

.tableau-lignes table { min-width: 720px; }
.tableau-lignes td { padding: 8px 10px; vertical-align: top; }
.tableau-lignes input, .tableau-lignes select { padding: 7px 10px; font-size: .89rem; }
.tableau-lignes .detail { margin-top: 5px; font-size: .84rem; }
.tableau-lignes .num-champ { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-lignes .montant { padding-top: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tableau-lignes tbody tr:hover { background: transparent; }
.retirer-cellule { width: 40px; text-align: center; }
.retirer {
  background: transparent; border: 0; color: var(--muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: var(--r-s);
}
.retirer:hover { background: var(--erreur-bg); color: var(--erreur); }

.sous-actions { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; flex-wrap: wrap; }
.sous-actions .aide { margin: 0; }

/* ------------------------------------------------------------ Récapitulatif --- */

.recap { margin: 22px 0 0 auto; max-width: 340px; border-top: 1px solid var(--border); padding-top: 14px; }
.recap-ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: .93rem; color: var(--ink-soft); }
.recap-ligne label { margin: 0; font-size: .93rem; font-weight: 500; color: var(--ink-soft); }
.recap-ligne input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.recap-ligne strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.recap-total { border-top: 2px solid var(--brand); margin-top: 8px; padding-top: 12px; font-size: 1.15rem; }
.recap-total strong { color: var(--brand); font-size: 1.3rem; font-weight: 700; }
.recap-note { font-size: .8rem; color: var(--muted); margin: 6px 0 0; text-align: right; }

/* ------------------------------------------------------------------ Totaux --- */

.totaux { margin: 18px 0 0 auto; max-width: 320px; }
.totaux div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: .93rem; color: var(--ink-soft); }
.totaux strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.totaux .grand { border-top: 2px solid var(--brand); margin-top: 6px; padding-top: 11px; }
.totaux .grand span { font-weight: 600; color: var(--ink); }
.totaux .grand strong { color: var(--brand); font-size: 1.25rem; font-weight: 700; }
.totaux p { text-align: right; font-size: .8rem; margin: 6px 0 0; }

/* ----------------------------------------------------------------- Actions --- */

.en-ligne { display: inline; }
.pile-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pile-actions form { display: block; }
.pile-actions .bouton { width: 100%; }
.carte-action { background: var(--ok-bg); border-color: transparent; }
.carte-action h2 { color: var(--ok); }
.carte-action p { font-size: .89rem; color: var(--ink-soft); margin: 0; }

/* Divers — factures */
.liste-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste-simple li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.objet-doc { font-size: .95rem; color: var(--ink-soft); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.recap-net { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 10px; }
.recap-net strong { color: var(--brand); font-size: 1.1rem; }
.carte .champ label { font-size: .8rem; }

/* Lien public d'un document : il doit rester copiable d'un coup d'œil, donc
   il se coupe n'importe où plutôt que de déborder de la colonne. */
.lien-public code {
  display: block;
  font-size: .78rem;
  line-height: 1.5;
  word-break: break-all;
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}

/* ------------------------------------------------------------- Tickets --- */

/* États : « nouveau » doit sauter aux yeux, « clos » doit s'effacer. */
.etat-nouveau        { background: var(--erreur-bg); color: var(--erreur); }
.etat-en_cours       { background: var(--accent-bg); color: var(--accent); }
.etat-attente_client { background: var(--alerte-bg); color: var(--alerte); }
.etat-resolu         { background: var(--ok-bg);     color: var(--ok); }
.etat-clos           { background: var(--sunk);      color: var(--muted); }

.prio-basse   { background: var(--sunk);      color: var(--muted); }
.prio-normale { background: var(--sunk);      color: var(--ink-soft); }
.prio-haute   { background: var(--alerte-bg); color: var(--alerte); }
.prio-urgente { background: var(--erreur-bg); color: var(--erreur); }

/* Le fil : un simple empilement chronologique. Ce qui vient du client et ce
   qui vient de moi doivent se distinguer sans avoir à lire l'étiquette. */
.fil { display: grid; gap: 14px; margin: 0 0 22px; }

.fil-message {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px;
}
.fil-message.de-client { background: var(--sunk); border-color: var(--rule); }
.fil-message.de-sfe    { border-left: 3px solid var(--accent); }
.fil-message.est-interne {
  background: var(--alerte-bg);
  border-color: color-mix(in srgb, var(--alerte) 30%, transparent);
  border-left: 3px solid var(--alerte);
}

.fil-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: 8px; font-size: .8rem; color: var(--muted);
}
.fil-tete strong { color: var(--ink); font-size: .88rem; }
.fil-tete .duree { margin-left: auto; font-variant-numeric: tabular-nums; }

.fil-corps { margin: 0; white-space: pre-wrap; font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }

/* Le compteur de coût : c'est le chiffre que le client regardera en premier,
   il ne doit jamais être noyé dans le reste. */
.compteur-cout { text-align: center; padding: 6px 0 2px; }
.compteur-cout .valeur {
  display: block; font-size: 1.9rem; font-weight: 700;
  color: var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.compteur-cout .detail { font-size: .84rem; color: var(--muted); }

/* Barre d'actions rapides sous le fil. */
.reponse-options {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 10px 0 14px; font-size: .88rem; color: var(--ink-soft);
}
.reponse-options label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 400; }
.reponse-options input[type="number"] { width: 84px; }

/* Le sujet du ticket : c'est le vrai titre de la page, la référence n'étant
   qu'un numéro. Il vient juste sous l'en-tête, avant le fil. */
.titre-ticket {
  font-size: 1.3rem; color: var(--brand);
  margin: -6px 0 20px; line-height: 1.3;
}

/* -------------------------------------------- Actions au fil des listes --- */

/* Colonne d'actions en bout de ligne : étroite, alignée à droite, et discrète
   tant que la souris n'est pas sur la ligne — supprimer ne doit jamais être
   le geste le plus facile de la page. */
.col-actions { width: 1%; text-align: right; white-space: nowrap; }

.bouton-mini { padding: 4px 10px; font-size: .8rem; }

tbody .col-actions .bouton { opacity: .45; transition: opacity .12s ease; }
tbody tr:hover .col-actions .bouton,
tbody .col-actions .bouton:focus-visible { opacity: 1; }

/* Visible des seuls lecteurs d'écran : un en-tête de colonne vide n'est pas
   annoncé, la ligne du tableau devient incompréhensible sans les yeux. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}