:root{
  --navy:#0A4678; --bleu:#005A8C; --cyan:#3CC8F0; --encre:#14283A; --encre-douce:#4C6376;
  --blanc:#FFFFFF; --fond:#F2F5F7; --filet:#DCE4EA; --jaune:#FFF4D6; --rouge:#B23A2E;
  --bg:var(--fond); --card:var(--blanc); --txt:var(--encre); --txt2:var(--encre-douce); --line:var(--filet);
  --f-marque:"Montserrat",system-ui,sans-serif; --f-texte:"Archivo",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0f1b26; --card:#16242f; --txt:#E6EEF4; --txt2:#9FB3C4; --line:#2A3B4A; }
}
:root[data-theme="dark"]{ --bg:#0f1b26; --card:#16242f; --txt:#E6EEF4; --txt2:#9FB3C4; --line:#2A3B4A; }

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f-texte);font-size:15px;line-height:1.5;color:var(--txt);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2}

/* ---------- Chrome de l'application ---------- */
.topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.25rem;background:var(--navy);color:#fff;border-bottom:4px solid var(--cyan)}
.topbar .marque{font-family:var(--f-marque);font-weight:800;letter-spacing:.08em;font-size:1.05rem}
.topbar .titre{opacity:.85;font-size:.9rem}
.topbar .actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.btn{border:1px solid transparent;background:var(--bleu);color:#fff;padding:.5rem .9rem;cursor:pointer;border-radius:0}
.btn:hover{background:var(--navy)}
.btn.sec{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn.sec:hover{background:rgba(255,255,255,.12)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--txt)}
.btn.ghost:hover{background:var(--line)}
.btn.cyan{background:var(--cyan);color:var(--navy);font-weight:600}
.btn.cyan:hover{background:#2bb6de}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn:disabled{opacity:.6;cursor:wait}
.topbar{flex-wrap:wrap}
.topbar .session{display:flex;align-items:center;gap:.6rem;font-size:.8rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.3)}
.topbar .session span{opacity:.85}
@media (max-width:700px){.topbar .session{padding-left:0;border-left:0;margin-left:auto}.topbar .session span{display:none}}
.bandeau{background:var(--jaune);color:#5A4300;padding:.5rem 1.25rem;font-size:.85rem;border-bottom:1px solid #E0B84C}

/* ---------- État de la page : chargement, écran de connexion, application ---------- */
body[data-etat="chargement"] > *{visibility:hidden}
body:not([data-etat="connexion"]) #connexion{display:none}
body[data-etat="connexion"] .topbar,body[data-etat="connexion"] .bandeau,body[data-etat="connexion"] .app{display:none}

.connexion{min-height:100vh;display:grid;place-items:center;padding:1rem}
.cx-boite{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line)}
.cx-tete{display:flex;align-items:center;gap:.6rem;padding:1rem 1.25rem;background:var(--navy);color:#fff;border-bottom:4px solid var(--cyan)}
.cx-tete img{background:#fff;padding:3px}
.cx-tete .marque{font-family:var(--f-marque);font-weight:800;letter-spacing:.08em;font-size:1.1rem}
.cx-corps{padding:1.25rem}
.cx-corps h1{font-size:1.15rem;margin-bottom:1rem}
.btn.plein{width:100%;padding:.65rem;margin-top:.3rem}
.lien{background:none;border:0;padding:.3rem 0;margin-top:.8rem;color:var(--bleu);text-decoration:underline;cursor:pointer;font-size:.85rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lien{color:var(--cyan)}}
.lien:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#cx-message{margin:0 0 1rem;padding:.6rem .8rem;font-size:.85rem}
#cx-message.erreur{background:#FBE9E7;color:var(--rouge);border-left:3px solid var(--rouge)}
#cx-message.info{background:var(--jaune);color:#5A4300;border-left:3px solid #E0B84C}

.app{display:grid;grid-template-columns:minmax(360px,520px) 1fr;gap:1.25rem;padding:1.25rem;max-width:1600px;margin:0 auto}
@media (max-width:980px){.app{grid-template-columns:1fr}}

.panneau{background:var(--card);border:1px solid var(--line);min-width:0}
.panneau > header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.panneau > header h2{font-size:1rem}
.panneau > header .sous{color:var(--txt2);font-size:.85rem}
.corps{padding:1.1rem}

.onglets{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.onglets button{flex:1 0 auto;padding:.7rem .6rem;white-space:nowrap;border:0;background:transparent;border-bottom:3px solid transparent;color:var(--txt2);cursor:pointer}
.onglets button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--cyan);font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .onglets button[aria-selected="true"]{color:var(--cyan)}}

.champ{display:grid;gap:.3rem;margin-bottom:.9rem}
.champ label{font-size:.85rem;color:var(--txt2)}
.champ .aide{font-size:.78rem;color:var(--txt2);margin-top:-.1rem}
.champ input:not([type=checkbox]):not([type=radio]),.champ select,.champ textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);background:var(--card);border-radius:0}
.champ textarea{min-height:64px;resize:vertical}
.champ textarea.modele{min-height:15rem;font-size:.85rem;line-height:1.45}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.trois{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
@media (max-width:480px){.deux,.trois{grid-template-columns:1fr}}
.choix{display:grid;gap:.4rem}
.choix.h{display:flex;flex-wrap:wrap;gap:.4rem}
.choix label{display:block;padding:.45rem .6rem;line-height:1.35;border:1px solid var(--line);cursor:pointer;font-size:.9rem;color:var(--txt)}
.choix.h label{flex:1 1 auto}
.choix label:has(input:checked){border-color:var(--bleu);background:rgba(60,200,240,.12)}
.choix input{accent-color:var(--bleu);margin:0 .45rem 0 0;vertical-align:-1px}
fieldset{border:0;padding:0;margin:0 0 1rem}
fieldset > legend{font-weight:600;color:var(--navy);margin-bottom:.6rem;padding-top:.6rem;border-top:1px solid var(--line);width:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) fieldset > legend{color:var(--cyan)}}
.note{background:var(--jaune);color:#5A4300;padding:.6rem .8rem;font-size:.85rem;border-left:3px solid #E0B84C;margin-bottom:1rem}
.alerte{background:#FBE9E7;color:var(--rouge);padding:.6rem .8rem;font-size:.85rem;border-left:3px solid var(--rouge);margin-bottom:1rem}
.cache{display:none !important}

.tarifs table{width:100%;border-collapse:collapse;font-size:.85rem}
.tarifs th{text-align:left;color:var(--navy);padding:.6rem 0 .3rem;font-size:.8rem}
.tarifs td{padding:.25rem 0;border-bottom:1px solid var(--line)}
.tarifs td:last-child{text-align:right;width:110px}
.tarifs input{width:100px;text-align:right;padding:.25rem .4rem;border:1px solid var(--line);background:var(--card)}
.tarifs .grille{display:grid;grid-template-columns:auto repeat(4,1fr);gap:.25rem .4rem;align-items:center;font-size:.8rem;margin:.4rem 0 .8rem}
.tarifs .grille input{width:100%}
.tarifs .grille .th{color:var(--txt2);text-align:center}

.historique li{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.9rem;align-items:center}
.historique li button{padding:.25rem .5rem;font-size:.8rem}
.historique .actions{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Affaires ---------- */
.affaires h3{font-size:.95rem;color:var(--navy);margin:1.1rem 0 .4rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .affaires h3{color:var(--cyan)}}
.affaires h3 .compte{font-weight:400;font-size:.8rem;color:var(--txt2);font-variant-numeric:tabular-nums}
.affaires .vide{color:var(--txt2);font-size:.9rem}
.aff-barre input[type=search]{width:100%;padding:.55rem .7rem;border:1px solid var(--line);background:var(--card);border-radius:0}
.aff-filtres{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem;margin-top:.4rem}
.aff-filtres select{padding:.35rem .4rem;border:1px solid var(--line);background:var(--card);font-size:.82rem;min-width:0;border-radius:0}
.aff-liste{list-style:none;padding:0;margin:0}
.aff-liste li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.aff-liste .l1{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.aff-liste .num,.aff-liste .mt,.fiche-chiffres td,.chrono .dt{font-variant-numeric:tabular-nums}
.aff-liste .mt{margin-left:auto;font-weight:600}
.aff-liste .l2{margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aff-liste .l3{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;color:var(--txt2);font-size:.8rem}
.btn.mini{padding:.2rem .5rem;font-size:.78rem}
.affaires .actions{display:flex;gap:.3rem;flex-wrap:wrap}
.fiche-titre{font-size:1.1rem!important;color:var(--txt)!important;margin-top:0!important}
.fiche-objet{margin:.2rem 0 .8rem;color:var(--txt2);font-size:.88rem}
.fiche-chiffres{width:100%;border-collapse:collapse;font-size:.9rem}
.fiche-chiffres th{text-align:left;font-weight:400;color:var(--txt2);padding:.3rem 0;border-bottom:1px solid var(--line)}
.fiche-chiffres td{text-align:right;padding:.3rem 0;border-bottom:1px solid var(--line)}
.fiche-chiffres tr.fort th,.fiche-chiffres tr.fort td{font-weight:600;color:var(--txt)}
.chrono{list-style:none;padding:0;margin:0;border-left:2px solid var(--cyan);font-size:.85rem}
.chrono li{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;padding:.3rem 0 .3rem .7rem}
.chrono .dt{color:var(--txt2);min-width:5.5rem}
#gauche:not([data-onglet="questionnaire"]):not([data-onglet="factures"]) .total-flottant{display:none}

/* ---------- Accueil ---------- */
.afaire{list-style:none;padding:0;margin:0}
.afaire li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .6rem;margin-bottom:.35rem;border:1px solid var(--line);border-left:3px solid var(--line);font-size:.86rem}
.afaire li.ret{border-left-color:var(--rouge)}
.afaire li.att{border-left-color:#E0B84C}
.fact-stats.quatre{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.fact-stats.quatre{grid-template-columns:repeat(2,1fr)}}
.fact-stats strong{font-variant-numeric:tabular-nums}
.jauge{margin-bottom:.7rem;font-size:.85rem}
.jauge.vide{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;color:var(--txt2)}
.jauge .jl{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.jauge .barre{height:8px;background:var(--line);margin-top:.25rem}
.jauge .barre div{height:100%;background:var(--bleu)}
.jauge .barre div.att{background:#C99A1E}
.jauge .barre div.ret{background:var(--rouge)}
.affaires .aide{font-size:.78rem;color:var(--txt2);margin:.4rem 0 .6rem}
.cli-barre{display:flex;gap:.5rem}
.cli-barre input{flex:1}
.cli-docs{list-style:none;padding:0;margin:0;font-size:.85rem}
.cli-docs li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.historique .vide{color:var(--txt2);font-size:.9rem}

.total-flottant{position:sticky;bottom:0;background:var(--navy);color:#fff;padding:.8rem 1.1rem;display:flex;justify-content:space-between;align-items:center;border-top:3px solid var(--cyan)}
.total-flottant strong{font-family:var(--f-marque);font-size:1.3rem}

/* ---------- La feuille de devis ---------- */
.apercu{overflow:auto;background:#E3E9ED;padding:1.25rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .apercu{background:#0b141c}}
.feuille{width:210mm;min-height:297mm;margin:0 auto;background:#fff;color:#14283A;padding:11mm 14mm 7mm;font-size:10pt;line-height:1.38;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.feuille *{color:inherit}
.feuille.pdf{box-shadow:none;margin:0;min-height:296mm;width:210mm}
#pdf-zone .feuille{margin:0}
.f-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm;padding-bottom:3.5mm;border-bottom:2.5pt solid #3CC8F0}
.f-entete .logo{display:flex;align-items:center;gap:3mm}
.f-entete .logo .icone,.f-entete .logo img{width:16mm;height:13mm;display:block}
.f-entete .logo .mot{font-family:var(--f-marque);font-weight:800;font-size:19pt;letter-spacing:.06em;color:#0A4678;line-height:1}
.f-entete .coord{font-size:8.5pt;line-height:1.35;text-align:right;color:#4C6376}
.f-entete .coord .nom{font-weight:600;color:#14283A;font-size:10pt}
.f-titre{display:flex;justify-content:space-between;gap:8mm;margin-top:4.5mm}
.f-titre h1{font-family:var(--f-marque);font-weight:800;font-size:22pt;color:#0A4678;letter-spacing:.06em}
.f-meta{font-size:9.5pt;border-left:2pt solid #0A4678;padding-left:3mm;margin-top:2mm;color:#14283A}
.f-meta div{display:flex;gap:2mm}
.f-meta span:first-child{color:#4C6376;width:28mm;flex:none}
.f-client{text-align:left;min-width:60mm;font-size:10pt}
.f-client .nom{font-weight:600;font-size:11pt}
.f-client .type{color:#4C6376;font-size:9pt}
.f-objet{margin-top:4.5mm;padding:2.5mm 4mm;background:#F2F5F7;font-size:10pt}
.f-objet b{color:#0A4678}
.f-table{width:100%;border-collapse:collapse;margin-top:4mm;font-size:9.5pt}
.f-table th{background:#0A4678;color:#fff;font-weight:600;padding:2.2mm 2.5mm;text-align:left;font-size:9pt}
.f-table th.n,.f-table td.n{text-align:right;white-space:nowrap}
.f-table td{padding:1.8mm 2.5mm;border-bottom:1px solid #DCE4EA;vertical-align:top}
.f-table tr.poste td{page-break-inside:avoid}
.f-table .lib{font-weight:600;color:#14283A}
.f-table .desc{color:#4C6376;font-size:8.3pt;line-height:1.35;white-space:pre-line;margin-top:1mm}
.f-table tr.ajust td{color:#4C6376;font-style:italic}
.f-totaux{margin-top:3mm;margin-left:auto;width:82mm;font-size:10pt}
.f-totaux div{display:flex;justify-content:space-between;padding:1.6mm 2.5mm;border-bottom:1px solid #DCE4EA}
.f-totaux .total{background:#0A4678;color:#fff;font-weight:600;font-size:12pt;border:0;margin-top:1mm}
.f-totaux .tva{font-size:8.5pt;color:#4C6376;border:0;justify-content:flex-end}
.f-cond{margin-top:4mm;display:grid;grid-template-columns:1fr 1fr;gap:6mm;font-size:9pt}
.f-cond h3{font-size:9.5pt;color:#0A4678;margin-bottom:1.5mm;font-weight:600}
.f-cond ul{margin:0;padding-left:4mm}
.f-cond li{margin-bottom:.5mm}
.f-signature{margin-top:4mm;margin-bottom:4mm;display:grid;grid-template-columns:1fr 1fr;gap:6mm;font-size:9pt;page-break-inside:avoid}
.f-signature .case{border:1px solid #DCE4EA;height:20mm;padding:2mm 3mm;color:#4C6376}
.f-fin{margin-top:auto;page-break-inside:avoid;break-inside:avoid}
.f-pied{padding-top:2mm;font-size:7pt;color:#4C6376;border-top:1px solid #DCE4EA;padding-top:2mm;line-height:1.4}
.f-pied b{color:#0A4678}
.feuille .nota{margin-top:3mm;font-size:8.6pt;color:#4C6376;border-left:2pt solid #3CC8F0;padding-left:3mm}

/* ---------- Factures ---------- */
.fact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.fact-stats div{border:1px solid var(--line);padding:.5rem .6rem;font-size:.78rem;color:var(--txt2)}
.fact-stats strong{display:block;font-size:1.05rem;color:var(--txt);font-weight:600}
.badge{display:inline-block;font-size:.72rem;padding:.05rem .4rem;border:1px solid var(--line);margin-left:.3rem;color:var(--txt2)}
.badge.ok{background:#E3F4E8;color:#1F6B3A;border-color:#BFE3CB}
.badge.att{background:var(--jaune);color:#5A4300;border-color:#E0B84C}
.badge.ret{background:#FBE9E7;color:var(--rouge);border-color:var(--rouge)}
.fl{border:1px solid var(--line);padding:.6rem .6rem 0;margin-bottom:.6rem}
.fl .g{display:grid;grid-template-columns:72px 1fr 110px;gap:.5rem}
.fl .champ{margin-bottom:.6rem}
.fl .champ textarea{min-height:44px}
.fl .bas{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--txt2);padding-bottom:.6rem}
.fl .bas button,.factures .mini{padding:.2rem .5rem;font-size:.8rem}
.factures .actions{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.factures .payer{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;padding:.5rem 0;font-size:.85rem}
.factures .payer input,.factures .payer select{padding:.3rem .4rem;border:1px solid var(--line);background:var(--card)}
.factures li.bloc{display:block}
.factures li.bloc .tete{display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.factures ul{list-style:none;padding:0;margin:0}
.factures h3{font-size:.95rem;color:var(--navy);margin:.2rem 0 .6rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .factures h3{color:var(--cyan)}}
.factures input:disabled,.factures textarea:disabled,.factures select:disabled{opacity:.65}
.f-titre h1.long{font-size:17pt}
.f-acquit{margin-top:4mm;display:inline-block;border:1.5pt solid #1F6B3A;color:#1F6B3A !important;padding:1.5mm 4mm;font-weight:600;font-size:10pt;letter-spacing:.04em;align-self:flex-start}
.f-regl{margin-top:5mm;font-size:9pt;display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.f-regl h3{font-size:9.5pt;color:#0A4678;margin-bottom:1.5mm;font-weight:600}
.f-regl p{margin:0 0 1mm}

@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .topbar,#gauche,.apercu-barre{display:none !important}
  #droite{border:0}
  .app{display:block;padding:0;max-width:none}
  .apercu{padding:0;background:#fff;overflow:visible}
  .feuille{box-shadow:none;margin:0;width:210mm;min-height:296mm}
  }
.apercu-barre{display:flex;gap:.5rem;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.apercu-barre .info{color:var(--txt2);font-size:.85rem}

/* ---------- Écran étroit : deux vues (formulaire / document), barre compacte ---------- */
.mobile-seul{display:none}
@media (max-width:980px){
  .mobile-seul{display:inline-block}
  body[data-vue="document"] #gauche{display:none}
  body:not([data-vue="document"]) #droite{display:none}
  .app{padding:.5rem;gap:.5rem}
  .apercu{padding:.5rem}
  .apercu-barre{padding:.5rem .75rem}
  .total-flottant{gap:.6rem;flex-wrap:wrap}
  .total-flottant #btn-voir{margin-left:auto}
}
@media (max-width:700px){
  .topbar{padding:.5rem .75rem;gap:.5rem}
  .topbar .titre,#btn-imprimer{display:none}
  .topbar .session{order:1}
  .topbar .session .btn{padding:.3rem .55rem;font-size:.8rem}
  .topbar .actions{order:2;margin-left:0;width:100%}
  .apercu-barre .info{font-size:.78rem}
  .topbar .actions .btn{padding:.4rem .55rem;font-size:.82rem;flex:1 1 auto}
  .corps{padding:.8rem}
  .fact-stats{grid-template-columns:1fr 1fr}
}
@media print{#cadre{zoom:1 !important}}