/* invoice — feuille de style unique, sans dépendance. */

:root {
  --encre:#151a20; --gris:#5f6b78; --gris-clair:#8b97a4;
  --trait:#dfe4e9; --fond:#f2f4f7; --blanc:#fff;
  --accent:#1f4f73; --accent-clair:#e8f0f7; --accent-vif:#2b6ea3;
  --vert:#1a7f4b; --vert-clair:#e6f4ec; --rouge:#b3261e; --rouge-clair:#fdecea;
  --ambre:#8a5a00; --ambre-clair:#fff3d6;
  --rayon:7px; --ombre:0 1px 2px rgba(20,30,40,.08), 0 4px 14px rgba(20,30,40,.06);
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font:14px/1.55 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--encre); background:var(--fond); }
a { color:var(--accent-vif); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0 0 .5em; line-height:1.25; }
h1 { font-size:21px; } h2 { font-size:16px; } h3 { font-size:14px; }
code,kbd { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:12.5px; }

/* ----------------------------------------------------------- ossature --- */
#app { display:flex; flex-direction:column; min-height:100%; }
header.barre { display:flex; align-items:center; gap:18px; padding:0 18px; height:52px;
  background:var(--accent); color:#fff; position:sticky; top:0; z-index:20; }
header.barre .marque { font-weight:700; letter-spacing:.5px; font-size:16px; }
header.barre nav { display:flex; gap:4px; margin-left:8px; flex:1; overflow:auto; }
header.barre nav a { color:#cfe0ee; padding:6px 12px; border-radius:var(--rayon); white-space:nowrap; }
header.barre nav a:hover { background:rgba(255,255,255,.12); text-decoration:none; color:#fff; }
header.barre nav a.actif { background:#fff; color:var(--accent); font-weight:600; }
header.barre .qui { font-size:12.5px; color:#cfe0ee; white-space:nowrap; }
main { flex:1; padding:18px; max-width:1500px; width:100%; margin:0 auto; }

/* -------------------------------------------------------------- blocs --- */
.carte { background:var(--blanc); border:1px solid var(--trait); border-radius:var(--rayon);
  box-shadow:var(--ombre); padding:16px; margin-bottom:16px; }
.carte > h2:first-child, .carte > h1:first-child { margin-top:0; }
.rang { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.rang.entre { justify-content:space-between; }
.grille { display:grid; gap:14px; }
.grille.deux { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grille.trois { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pousse { margin-left:auto; }
.muet { color:var(--gris); }
.petit { font-size:12.5px; }
.nombre { font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------ contrôles - */
button, .bouton { font:inherit; font-weight:600; padding:8px 14px; border-radius:var(--rayon);
  border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button:hover:not(:disabled), .bouton:hover { background:var(--accent-vif); text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.doux { background:var(--blanc); color:var(--accent); }
button.doux:hover:not(:disabled) { background:var(--accent-clair); }
button.fantome { background:transparent; border-color:var(--trait); color:var(--encre); font-weight:500; }
button.fantome:hover:not(:disabled) { background:var(--fond); }
button.danger { background:var(--blanc); border-color:var(--rouge); color:var(--rouge); }
button.danger:hover:not(:disabled) { background:var(--rouge-clair); }
button.mini { padding:4px 9px; font-size:12.5px; font-weight:500; }
input, select, textarea { font:inherit; padding:8px 10px; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--blanc); color:var(--encre); width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent-clair); border-color:var(--accent); }
textarea { resize:vertical; min-height:70px; line-height:1.5; }
label { display:block; font-size:12.5px; font-weight:600; color:var(--gris); margin-bottom:4px; }
label.ligne { display:flex; align-items:center; gap:8px; font-weight:500; color:var(--encre); }
label.ligne input[type=checkbox] { width:auto; }
fieldset { border:1px solid var(--trait); border-radius:var(--rayon); padding:12px; margin:0 0 14px; }
legend { font-weight:600; font-size:13px; padding:0 6px; color:var(--accent); }

/* ------------------------------------------------------------ tableaux -- */
table.liste { width:100%; border-collapse:collapse; }
table.liste th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gris); border-bottom:2px solid var(--trait); padding:8px 10px; white-space:nowrap; }
table.liste td { padding:9px 10px; border-bottom:1px solid var(--trait); vertical-align:middle; }
table.liste tr:hover td { background:#fafbfc; }
table.liste td.num, table.liste th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.liste tr.cliquable { cursor:pointer; }

/* --------------------------------------------------------------- pastilles */
.etat { display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:99px;
  border:1px solid transparent; white-space:nowrap; }
.etat.brouillon { background:var(--fond); color:var(--gris); border-color:var(--trait); }
.etat.envoye, .etat.emise, .etat.envoyee { background:var(--accent-clair); color:var(--accent); }
.etat.accepte, .etat.payee { background:var(--vert-clair); color:var(--vert); }
.etat.refuse, .etat.annulee, .etat.erreur { background:var(--rouge-clair); color:var(--rouge); }
.etat.expire, .etat.recu, .etat.lu { background:var(--ambre-clair); color:var(--ambre); }
.etat.acompte, .etat.situation, .etat.solde, .etat.unique, .etat.avoir, .etat.extrait
  { background:var(--accent-clair); color:var(--accent); }

/* ------------------------------------------------------------- messages -- */
.avis { padding:10px 14px; border-radius:var(--rayon); margin-bottom:14px; border:1px solid; }
.avis.info { background:var(--accent-clair); border-color:#c7dcec; color:#14405f; }
.avis.bien { background:var(--vert-clair); border-color:#bfe3cd; color:#0f5c36; }
.avis.mal { background:var(--rouge-clair); border-color:#f3c9c5; color:#8c1d16; }
.avis.attention { background:var(--ambre-clair); border-color:#f0dcae; color:#6b4600; }

/* ------------------------------------------------------------- dictée ---- */
.dictee { display:flex; gap:10px; align-items:flex-start; }
.dictee textarea { flex:1; min-height:110px; }
button.micro { width:52px; height:52px; border-radius:50%; padding:0; font-size:20px; flex:none; }
button.micro.enregistre { background:var(--rouge); border-color:var(--rouge); animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(179,38,30,.5); } 50% { box-shadow:0 0 0 10px rgba(179,38,30,0); } }

/* ----------------------------------------------------------- travail ----- */
.travail { display:flex; align-items:center; gap:10px; color:var(--accent); font-weight:600; }
.roue { width:16px; height:16px; border:2px solid var(--accent-clair); border-top-color:var(--accent);
  border-radius:50%; animation:tourne .8s linear infinite; }
@keyframes tourne { to { transform:rotate(360deg); } }

/* --------------------------------------------------------------- devis --- */
.devis-vue { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.85fr); gap:16px; align-items:start; }
@media (max-width:1100px) { .devis-vue { grid-template-columns:1fr; } }
.apercu { width:100%; height:min(78vh,1000px); border:1px solid var(--trait); border-radius:var(--rayon); background:#fff; }
.fil { display:flex; flex-direction:column; gap:12px; max-height:62vh; overflow:auto; padding-right:4px; }
.bulle { padding:10px 13px; border-radius:12px; font-size:13.5px; }
.bulle.utilisateur { background:var(--accent); color:#fff; margin-left:auto; max-width:86%; border-bottom-right-radius:3px; }
.bulle.assistant { background:var(--fond); border:1px solid var(--trait); max-width:96%; border-bottom-left-radius:3px; }
.bulle .meta { font-size:11px; opacity:.75; margin-top:5px; }
.bulle ul { margin:6px 0 0; padding-left:18px; }
.bulle li { margin:2px 0; }
.suggestion { border:1px solid var(--trait); border-left:3px solid var(--accent); border-radius:var(--rayon);
  padding:9px 11px; margin-top:8px; background:var(--blanc); }
.suggestion .t { font-weight:600; }
.suggestion .p { color:var(--gris); font-size:12.5px; margin:3px 0 7px; }
.question { border-left:3px solid var(--ambre); background:var(--ambre-clair); padding:7px 11px;
  border-radius:var(--rayon); margin-top:8px; font-size:13px; color:#5d3d00; }
.totaux-mini { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; }
.totaux-mini b { font-size:16px; display:block; }

/* --------------------------------------------------------------- édition - */
table.edition { width:100%; border-collapse:collapse; font-size:13px; }
table.edition th { font-size:11px; text-transform:uppercase; color:var(--gris); text-align:left; padding:5px 4px; }
table.edition td { padding:2px 3px; border-bottom:1px solid var(--fond); }
table.edition input { padding:5px 7px; font-size:13px; }
table.edition input.n { text-align:right; }
table.edition tr.lot td { background:var(--fond); font-weight:600; padding-top:10px; }
.col-lab { width:42%; } .col-n { width:11%; } .col-u { width:9%; }

/* ---------------------------------------------------------------- divers - */
.vide { text-align:center; padding:40px 20px; color:var(--gris); }
.vide .gros { font-size:34px; margin-bottom:10px; opacity:.4; }
dialog { border:0; border-radius:10px; padding:0; box-shadow:0 18px 60px rgba(0,0,0,.3); max-width:min(760px,94vw); width:100%; }
dialog::backdrop { background:rgba(15,25,35,.45); }
dialog .tete { padding:14px 18px; border-bottom:1px solid var(--trait); font-weight:700; }
dialog .corps { padding:18px; max-height:72vh; overflow:auto; }
dialog .pied { padding:12px 18px; border-top:1px solid var(--trait); display:flex; gap:10px; justify-content:flex-end; background:var(--fond); }
.jauge { height:6px; background:var(--fond); border-radius:99px; overflow:hidden; }
.jauge > div { height:100%; background:var(--accent); transition:width .3s; }
.connexion { max-width:420px; margin:8vh auto; }
.connexion .marque { font-size:26px; font-weight:800; color:var(--accent); text-align:center; margin-bottom:6px; }
.connexion .sous { text-align:center; color:var(--gris); margin-bottom:22px; }
.onglets { display:flex; gap:4px; border-bottom:1px solid var(--trait); margin-bottom:14px; }
.onglets button { background:none; border:0; border-bottom:2px solid transparent; color:var(--gris);
  border-radius:0; padding:8px 14px; font-weight:600; }
.onglets button.actif { color:var(--accent); border-bottom-color:var(--accent); }