/* ════════════════════════════════════════════════════════════════════════════
   ZS BAT — interface, reprise à l'identique de la maquette HTML.
   Ce fichier remplace l'ancien app.css : même coquille, mêmes couleurs,
   mêmes onglets, même assistant. Ne pas modifier sans reporter dans la maquette.
   ════════════════════════════════════════════════════════════════════════════ */

  :root{
    --ink:#2b2b2f; --ink-soft:#4a4a52; --muted:#8a8a93;
    --line:#e6e6ec; --accent:#4f6bf0; --accent-fonce:#3a53c9;
    --accent-soft:#eef1fe; --peach:#f6d9c4; --peach-soft:#fcefe5;
    --bg:#f6f6f9; --blanc:#ffffff;
    --ok:#3f8f6b; --rouge:#c0392b;
    --sol:#cf7a44;
    --r:14px;
    --ombre:0 1px 3px rgba(43,43,47,.06), 0 8px 24px rgba(43,43,47,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{
    font-family:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  /* ---------- Bandeau signature pêche/bleu ---------- */
  .bande{height:5px;background:linear-gradient(90deg,var(--peach) 0%,var(--peach) 48%,var(--accent) 48%,var(--accent) 100%);}

  header.topbar{
    background:var(--blanc);padding:10px 18px;display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  }
  header.topbar img{height:34px;}
  header.topbar .sub{margin-left:auto;font-size:11px;color:var(--muted);text-align:right;}
  main{flex:1;padding:16px;max-width:1060px;width:100%;margin:0 auto;padding-bottom:110px;}
  @media(min-width:840px){ main{padding-bottom:40px;} }

  /* ---------- Navigation ---------- */
  nav.tabs{
    position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;z-index:60;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:4px;
  }
  nav.tabs button{
    flex:1;padding:8px 4px;border:none;background:none;font-size:10.5px;font-weight:600;
    color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
    border-radius:12px;font-family:inherit;transition:background .15s,color .15s;
  }
  nav.tabs button .ico{font-size:19px;line-height:1;}
  nav.tabs button.active{color:var(--accent);background:var(--accent-soft);}
  @media(min-width:840px){
    nav.tabs{position:sticky;top:55px;bottom:auto;border-top:none;border-bottom:1px solid var(--line);padding:6px 16px;}
    nav.tabs button{flex-direction:row;font-size:13px;padding:10px 14px;flex:0 0 auto;gap:7px;}
  }

  /* ---------- Composants ---------- */
  .card{background:var(--blanc);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--ombre);}
  .card h2{font-size:16px;margin-bottom:12px;color:var(--ink);letter-spacing:.2px;}
  .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:4px;}
  label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin:12px 0 5px;text-transform:uppercase;letter-spacing:.6px;}
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],select,textarea{
    width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
    font-size:15px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s;
  }
  textarea{min-height:110px;resize:vertical;}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:11px;
    padding:12px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .1s,opacity .15s;
  }
  .btn:active{transform:scale(.98);}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(79,107,240,.35);}
  .btn-secondary{background:var(--ink);color:#fff;}
  .btn-ghost{background:var(--blanc);color:var(--accent);border:1.5px solid var(--line);}
  .btn-danger{background:transparent;color:var(--rouge);border:1.5px solid #efd0cb;}
  .btn-sm{padding:6px 11px;font-size:12px;border-radius:8px;}
  .btn:disabled{opacity:.5;cursor:default;}
  .row{display:flex;gap:10px;flex-wrap:wrap;} .row > *{flex:1;min-width:140px;}
  .actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap;}
  .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.3px;}
  .badge-devis{background:var(--accent-soft);color:var(--accent-fonce);}
  .badge-facture{background:#e7f3ee;color:var(--ok);}
  .badge-acompte{background:var(--peach-soft);color:#b06a35;}
  .badge-planning{background:#f0eef8;color:#5b4f9e;}
  .liste-item{display:flex;align-items:center;gap:11px;padding:13px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
  .liste-item:last-child{border-bottom:none;}
  .liste-item .info{flex:1;min-width:0;}
  .liste-item .titre{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .liste-item .detail{font-size:12px;color:var(--muted);}
  .avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-fonce);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;}
  .vide{color:var(--muted);font-size:14px;padding:18px 0;text-align:center;}
  .msg-erreur{background:#fdecea;color:#8f2418;padding:11px 13px;border-radius:10px;font-size:13px;margin:10px 0;}
  .msg-info{background:var(--accent-soft);color:var(--accent-fonce);padding:11px 13px;border-radius:10px;font-size:13px;margin:10px 0;}
  .spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- Assistant vocal (bouton flottant + panneau) ---------- */
  #fabMic{
    position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:70;
    width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;font-size:25px;
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-fonce) 100%);color:#fff;
    box-shadow:0 6px 22px rgba(79,107,240,.5);transition:transform .12s;
  }
  #fabMic:active{transform:scale(.94);}

  /* Traitement en cours : l'anneau tourne autour du bouton, même panneau
     fermé. Fermer l'assistant n'interrompt rien — ce repère le montre. */
  #fabMic.travaille::after{
    content:''; position:absolute; inset:-5px; border-radius:50%;
    border:2px solid transparent; border-top-color:currentColor;
    opacity:.85; animation:fabTourne 1s linear infinite; pointer-events:none;
  }
  @keyframes fabTourne{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    #fabMic.travaille::after{ animation:none; opacity:.5; }
  }
  @media(min-width:840px){ #fabMic{bottom:26px;} }
  #assistant{
    position:fixed;inset:0;z-index:80;background:rgba(43,43,47,.45);display:none;
    align-items:flex-end;justify-content:center;
  }
  #assistant.ouvert{display:flex;}
  .panneau{
    background:var(--blanc);border-radius:20px 20px 0 0;width:100%;max-width:560px;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:82vh;overflow-y:auto;
  }
  @media(min-width:840px){ #assistant{align-items:center;} .panneau{border-radius:20px;} }
  .panneau .titre-assistant{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .panneau .titre-assistant .pastille{
    width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);font-size:20px;flex-shrink:0;
  }
  .panneau .titre-assistant .pastille.ecoute{background:var(--peach);animation:pulse 1.1s infinite;}
  @keyframes pulse{50%{opacity:.55;}}
  .panneau h3{font-size:16px;}
  .panneau .etat{font-size:12px;color:var(--muted);}
  #transcript{min-height:46px;}
  .journal{margin-top:12px;font-size:13px;}
  .journal .entree{padding:9px 12px;border-radius:10px;margin-bottom:7px;}
  .journal .entree.ia{background:var(--accent-soft);color:var(--ink);}
  .journal .entree.err{background:#fdecea;color:#8f2418;}
  .suggestions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
  .suggestions button{
    border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 12px;
    font-size:12px;color:var(--ink-soft);cursor:pointer;font-family:inherit;
  }

  /* ---------- Édition postes ---------- */
  .poste-card{border:1.5px solid var(--line);border-radius:12px;padding:13px;margin-bottom:12px;background:#fcfcfe;}
  .poste-card .entete-poste{display:flex;gap:8px;align-items:center;}
  .poste-card .entete-poste input:first-child{max-width:44%;font-weight:800;text-transform:uppercase;font-size:13px;}
  .poste-card textarea{margin-top:8px;font-size:13.5px;min-height:96px;}
  .poste-card .pied-poste{display:flex;gap:8px;align-items:center;margin-top:8px;justify-content:flex-end;}
  .poste-card .pied-poste input{max-width:130px;text-align:right;font-weight:700;}
  .totaux-edit{margin-top:14px;text-align:right;font-size:14px;background:var(--bg);border-radius:12px;padding:12px 16px;}
  .totaux-edit .ttc{font-weight:800;font-size:18px;color:var(--accent-fonce);}

  /* ================= DOCUMENTS A4 ================= */
  #docWrap{padding:6px 0 14px;}
  #docScale{transform-origin:top left;}
  .a4{
    background:#fff;width:210mm;min-height:296mm;margin:0 auto;padding:0 0 10mm;
    box-shadow:var(--ombre);color:var(--ink);font-size:9.2pt;position:relative;
    display:flex;flex-direction:column;border-radius:4px;overflow:hidden;
  }
  .a4.paysage{width:297mm;min-height:209mm;}
  .a4 .contenu{padding:0 13mm;display:flex;flex-direction:column;flex:1;}
  .doc-top{display:flex;justify-content:space-between;align-items:center;padding:9mm 13mm 5mm;}
  .doc-top img{height:15mm;}
  .doc-top .droite{text-align:right;}
  .doc-top .lib{font-size:15pt;font-weight:800;letter-spacing:2.5px;color:var(--ink);text-transform:uppercase;}
  .doc-top .numero{font-size:10pt;font-weight:700;color:var(--accent);margin-top:1mm;}
  .doc-top .dte{font-size:7.5pt;color:var(--muted);margin-top:1mm;line-height:1.5;}
  .doc-bande{height:2.6mm;background:linear-gradient(90deg,var(--peach) 0%,var(--peach) 48%,var(--accent) 48%,var(--accent) 100%);}
  .doc-adresses{display:flex;justify-content:space-between;gap:12mm;margin:6mm 0 4mm;}
  .doc-adresses .bloc{font-size:7.6pt;line-height:1.55;color:var(--ink-soft);}
  .doc-adresses .lib{font-size:6.8pt;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:1.2mm;}
  .doc-adresses .nom{font-weight:800;color:var(--ink);font-size:9pt;}
  .doc-adresses .bloc.client{text-align:right;background:var(--accent-soft);border-radius:3mm;padding:3.5mm 4.5mm;min-width:62mm;}
  .doc-objet{font-size:9pt;margin:1mm 0 3.5mm;}
  .doc-objet b{color:var(--ink);}
  .poste{border-bottom:1px solid var(--line);padding:3mm 0;}
  .poste .ligne1{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;}
  .poste .chip{
    display:inline-block;background:var(--ink);color:#fff;font-size:6.6pt;font-weight:800;
    letter-spacing:1px;padding:1mm 2.6mm;border-radius:2mm;text-transform:uppercase;white-space:nowrap;
  }
  .poste .titre-poste{font-weight:700;font-size:8.6pt;flex:1;}
  .poste .montant{font-weight:800;font-size:9.5pt;white-space:nowrap;color:var(--ink);}
  .poste ul{margin:1.6mm 0 0 4mm;font-size:7.4pt;color:var(--ink-soft);line-height:1.5;}
  .poste ul li{margin-bottom:.4mm;}
  .doc-nonfournis{font-size:7.2pt;color:var(--muted);margin-top:3mm;font-style:italic;}
  .doc-totaux{display:flex;justify-content:flex-end;margin-top:4.5mm;}
  .doc-totaux table{border-collapse:collapse;font-size:8.6pt;min-width:74mm;}
  .doc-totaux td{padding:1.7mm 4mm;}
  .doc-totaux td.r{text-align:right;white-space:nowrap;font-weight:700;}
  .doc-totaux tr.ttc td{background:var(--ink);color:#fff;font-weight:800;font-size:10pt;}
  .doc-totaux tr.acompte td{background:var(--peach-soft);font-weight:800;color:#8a4d1e;}
  .doc-2col{display:flex;gap:8mm;margin-top:5mm;}
  .doc-banque{flex:1;background:var(--bg);border-radius:3mm;padding:3.5mm 4.5mm;font-size:7.3pt;line-height:1.65;}
  .doc-banque .lib{font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:6.8pt;color:var(--accent);margin-bottom:1mm;}
  .doc-signature{flex:1;border:1.2px solid var(--line);border-radius:3mm;padding:3.5mm 4.5mm;font-size:7.3pt;min-height:24mm;}
  .doc-signature .lib{font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:6.8pt;color:var(--ink);margin-bottom:1mm;}
  .doc-clause{margin-top:auto;padding-top:4mm;font-size:6.2pt;color:var(--muted);line-height:1.55;}
  /* Planning */
  .gantt{margin-top:4mm;}
  .gantt .g-sem{display:flex;margin-left:64mm;margin-bottom:1.5mm;}
  .gantt .g-sem div{flex:1;text-align:center;font-size:6.6pt;color:var(--muted);border-left:1px solid var(--line);line-height:1.3;}
  .gantt .g-sem b{display:block;color:var(--ink);font-size:7pt;}
  .gantt .g-row{display:flex;align-items:center;margin-bottom:1.1mm;}
  .gantt .g-num{width:6mm;font-size:6.4pt;font-weight:800;color:var(--muted);}
  .gantt .g-lib{width:58mm;padding-right:2.5mm;font-size:6.9pt;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gantt .g-track{flex:1;position:relative;height:5.4mm;background:#f2f2f6;border-radius:1.4mm;}
  .gantt .g-bar{position:absolute;top:.7mm;bottom:.7mm;border-radius:1.2mm;}
  .gantt .legende{display:flex;gap:6mm;margin-top:3.5mm;flex-wrap:wrap;font-size:6.8pt;color:var(--ink-soft);}
  .gantt .legende span{display:inline-flex;align-items:center;gap:1.6mm;}
  .gantt .legende i{width:3.2mm;height:3.2mm;border-radius:.9mm;display:inline-block;}
  .fam-structure{background:#2b2b2f;} .fam-reseaux{background:#4f6bf0;}
  .fam-sol{background:#cf7a44;} .fam-finitions{background:#3f8f6b;}

  @media print{
    body{background:#fff;}
    header.topbar,nav.tabs,.no-print,#docActions,#fabMic,.bande{display:none !important;}
    main{padding:0;max-width:none;}
    #docWrap{padding:0;}
    #docScale{transform:none !important;}
    .a4{box-shadow:none;margin:0;border-radius:0;min-height:0;}
    @page{size:A4;margin:0;}
  }


/* Boîtes de dialogue internes — confirm()/alert() natifs sont bloqués en iframe sandbox */
#modalFond{
  position:fixed; inset:0; background:rgba(20,20,26,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:9999; padding:20px;
}
#modalFond.ouvert{ display:flex; }
#modalBoite{
  background:#fff; border-radius:16px; padding:24px; max-width:440px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.28); animation:modalEntre .16s ease-out;
}
@keyframes modalEntre{ from{ opacity:0; transform:translateY(-10px) scale(.97);} to{ opacity:1; transform:none;} }
#modalTitre{ font-size:17px; font-weight:800; margin-bottom:8px; color:var(--ink,#2b2b2f); }
#modalTexte{ font-size:15px; line-height:1.5; color:var(--muted,#6a6a73); margin-bottom:18px; white-space:pre-line; }
#modalActions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
#modalToast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:#2b2b2f; color:#fff; padding:12px 20px; border-radius:10px; font-size:14px;
  font-weight:600; z-index:10000; opacity:0; transition:all .22s ease; pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:90vw;
}
#modalToast.ouvert{ opacity:1; transform:translateX(-50%) translateY(0); }
#modalToast.err{ background:#c0392b; }


/* ── Tableau de bord ─────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.kpi{ background:#fff; border:1px solid var(--line,#e6e6ec); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; }
.kpi::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,#4f6bf0); }
.kpi.ok::after{ background:#2e7d5b; } .kpi.warn::after{ background:#cf7a44; } .kpi.bad::after{ background:#c0392b; }
.kpi .lib{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted,#8a8a93); }
.kpi .val{ font-size:24px; font-weight:800; margin-top:6px; letter-spacing:-.5px; }
.kpi .sous{ font-size:12px; color:var(--muted,#8a8a93); margin-top:3px; }
.kpi.ok .val{ color:#2e7d5b; } .kpi.warn .val{ color:#cf7a44; } .kpi.bad .val{ color:#c0392b; }
.grille2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:820px){ .grille2{ grid-template-columns:1fr; } }
.barre-prog{ height:8px; border-radius:6px; background:#f0f0f4; overflow:hidden; margin-top:8px; }
.barre-prog i{ display:block; height:100%; background:var(--accent,#4f6bf0); }
.mini-liste div.l{ display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--line,#e6e6ec); font-size:14px; }
.mini-liste div.l:last-child{ border-bottom:none; }
.mini-liste .nom{ font-weight:600; }
.mini-liste .val{ font-weight:800; white-space:nowrap; }

/* ── Budget prévisionnel ─────────────────────────────────────────── */
.tab-budget{ width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.tab-budget th{ background:#f6f6f9; text-align:left; padding:8px 10px; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#8a8a93); border-bottom:2px solid var(--line,#e6e6ec); }
.tab-budget td{ padding:8px 10px; border-bottom:1px solid var(--line,#e6e6ec); vertical-align:middle; }
.tab-budget td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tab-budget tr.lot td{ background:#2b2b2f; color:#fff; font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:1px; padding:6px 10px; }
.tab-budget tr.total td{ background:#eef1fe; font-weight:800; }
.tab-budget input{ border:1px solid transparent; background:transparent; padding:3px 5px;
  border-radius:5px; font-size:13px; width:100%; }
.tab-budget input:focus{ border-color:var(--accent,#4f6bf0); background:#fff; outline:none; }
.tab-budget input.num{ text-align:right; }
.pied-budget{ display:flex; justify-content:flex-end; gap:26px; margin-top:14px;
  padding:14px 18px; background:#f6f6f9; border-radius:12px; flex-wrap:wrap; }
.pied-budget .b{ text-align:right; }
.pied-budget .b .l{ font-size:11px; font-weight:800; text-transform:uppercase;
  color:var(--muted,#8a8a93); letter-spacing:.5px; }
.pied-budget .b .v{ font-size:19px; font-weight:800; }
.pied-budget .b.ttc .v{ color:var(--accent,#4f6bf0); font-size:23px; }


/* ── Fenêtre de discussion de l'assistant ─────────────────────────── */
#assistant .panneau{ display:flex; flex-direction:column; max-height:86vh; }
#assistant .titre-assistant{ display:flex; align-items:center; gap:12px; }
.chat{
  flex:1; overflow-y:auto; min-height:240px; max-height:52vh; padding:6px 2px;
  display:flex; flex-direction:column; gap:12px; margin:14px 0;
}
.chat::-webkit-scrollbar{ width:6px; }
.chat::-webkit-scrollbar-thumb{ background:#d8d8e0; border-radius:3px; }
.bulle{ max-width:88%; padding:11px 14px; border-radius:14px; font-size:14.5px; line-height:1.55; }
.bulle.moi{ align-self:flex-end; background:var(--accent,#4f6bf0); color:#fff; border-bottom-right-radius:4px; }
.bulle.ia{ align-self:flex-start; background:#f4f4f7; color:var(--ink,#2b2b2f); border-bottom-left-radius:4px; }
.bulle.sys{ align-self:center; background:transparent; color:var(--muted,#8a8a93);
  font-size:12.5px; font-style:italic; padding:2px; text-align:center; }
.bulle.err{ align-self:flex-start; background:#fdecea; color:#c0392b; border-bottom-left-radius:4px; }
.bulle a{ color:inherit; text-decoration:underline; }
.bulle.ia a{ color:var(--accent,#4f6bf0); font-weight:600; }
.bulle b{ font-weight:700; }
.bulle ul{ margin:6px 0 0 16px; }
.bulle li{ margin-bottom:3px; }
.chat .reflexion{ align-self:flex-start; display:flex; align-items:center; gap:8px;
  color:var(--muted,#8a8a93); font-size:13px; padding:4px 2px; }
.chat .reflexion .pts span{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent,#4f6bf0); margin-right:3px; animation:saute 1.1s infinite; }
.chat .reflexion .pts span:nth-child(2){ animation-delay:.18s; }
.chat .reflexion .pts span:nth-child(3){ animation-delay:.36s; }
@keyframes saute{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* Compteur de durée et jauge d'activité. La jauge est volontairement
   INDÉTERMINÉE : on ne peut pas connaître à l'avance le temps que prendra
   l'IA, et une barre qui progresserait faussement serait un mensonge. Elle
   montre seulement que le traitement est vivant. */
.chat .reflexion{ flex-wrap:wrap; }
.chat .reflexion .chrono{ font-variant-numeric:tabular-nums; opacity:.75; }
.chat .reflexion .jauge{ flex:0 0 100%; height:3px; border-radius:3px;
  background:rgba(138,138,147,.18); overflow:hidden; margin-top:6px; }
.chat .reflexion .jauge i{ display:block; height:100%; width:38%; border-radius:3px;
  background:var(--accent,#4f6bf0); animation:jaugeVaEtVient 1.5s ease-in-out infinite; }
@keyframes jaugeVaEtVient{ 0%{ margin-left:-38%; } 100%{ margin-left:100%; } }
@media (prefers-reduced-motion: reduce){
  .chat .reflexion .jauge i{ animation:none; width:100%; opacity:.5; }
  .chat .reflexion .pts span{ animation:none; }
}

/* Fiches produit renvoyées par la recherche */
.produits{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.prod{ display:flex; gap:11px; background:#fff; border:1px solid var(--line,#e6e6ec);
  border-radius:11px; padding:10px; align-items:center; }
.prod img{ width:56px; height:56px; object-fit:contain; border-radius:8px; background:#f6f6f9; flex-shrink:0; }
.prod .ph{ width:56px; height:56px; border-radius:8px; background:#f6f6f9; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.prod .d{ flex:1; min-width:0; }
.prod .n{ font-weight:700; font-size:13.5px; line-height:1.35; }
.prod .m{ font-size:12px; color:var(--muted,#8a8a93); margin-top:2px; }
.prod .p{ font-weight:800; font-size:15px; color:var(--accent,#4f6bf0); white-space:nowrap; }
.prod .a{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }

#assistant .suggestions{ margin-bottom:9px; }

/* ── Adaptation serveur : la navigation utilise des liens, pas des boutons ──
   (la maquette étant une page unique, elle utilisait des <button>) */
nav.tabs a{
  flex:1; min-width:110px; display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:11px 8px; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--muted);
  text-decoration:none; border-bottom:2.5px solid transparent; transition:all .15s;
}
nav.tabs a:hover{ color:var(--ink); background:#fafafc; }
nav.tabs a.active{ color:var(--accent); border-bottom-color:var(--accent); }
nav.tabs a .ico{ font-size:17px; }

/* Tableaux des vues serveur, au style de la maquette */
main table{ width:100%; border-collapse:collapse; font-size:14px; }
main table th{
  text-align:left; padding:9px 10px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); font-weight:800;
  border-bottom:2px solid var(--line);
}
main table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
main table tr:last-child td{ border-bottom:none; }
main table td.montant, main table th.montant{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Cellule d'actions : sur grand écran les boutons restent sur une seule ligne
   (sur téléphone, le bloc mobile les laisse au contraire se répartir). */
main table td.actions-cellule{ white-space:nowrap; }
main table a{ color:var(--ink); text-decoration:none; }
main table a:hover{ color:var(--accent); }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }

/* Puces de statut */
.puce{
  display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px;
  font-weight:800; letter-spacing:.3px; background:#f0f0f4; color:var(--ink-soft);
}
.puce.p-payee, .puce.p-acceptee{ background:#e7f3ee; color:#2e7d5b; }
.puce.p-a_payer, .puce.p-envoyee{ background:var(--peach-soft,#faf0e6); color:#b06a35; }
.puce.p-annulee, .puce.p-refuse{ background:#fdecea; color:#c0392b; }

/* Alias : les vues serveur parlent de « carte », la maquette de « card » */
.carte{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 24px; margin-bottom:16px;
}
.rangee{ display:flex; gap:12px; flex-wrap:wrap; }
.rangee > div{ flex:1; min-width:150px; }
.btn-primaire{ background:var(--accent); color:#fff; }
.btn-sombre{ background:var(--ink); color:#fff; }
.btn-clair{ background:#f0f0f4; color:var(--ink); }

/* ── Pièces jointes de l'assistant ────────────────────────────────────── */
#piecesJointes{ display:none; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
#piecesJointes .piece{
  display:flex; align-items:center; gap:7px; background:#f4f4f7;
  border:1px solid var(--line); border-radius:9px; padding:5px 8px; max-width:190px;
}
#piecesJointes .piece img{ width:30px; height:30px; object-fit:cover; border-radius:5px; }
#piecesJointes .piece .ic{ font-size:19px; }
#piecesJointes .piece .nom{
  font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1;
}
#piecesJointes .piece .x{
  border:0; background:transparent; cursor:pointer; color:var(--muted);
  font-size:13px; padding:0 2px; line-height:1;
}
#piecesJointes .piece .x:hover{ color:#c0392b; }

.chat.survol{ outline:2px dashed var(--accent); outline-offset:-6px; border-radius:12px; }

.pj-bulle{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:7px; }
.pj-bulle img{ width:70px; height:70px; object-fit:cover; border-radius:8px; }
.pj-bulle .doc{
  background:rgba(255,255,255,.22); padding:5px 9px; border-radius:7px;
  font-size:12px; font-weight:600;
}

/* ── Diagramme de Gantt ───────────────────────────────────────────────── */
.legende{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 18px; font-size:12px; font-weight:700; }
.legende span{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
.legende i{ width:13px; height:13px; border-radius:3px; display:inline-block; }

.gantt{ overflow-x:auto; }
.gantt-entete, .gantt-ligne{ display:flex; align-items:stretch; min-width:640px; }
.gantt-entete{ border-bottom:2px solid var(--line); padding-bottom:5px; margin-bottom:7px; }
.g-nom{
  width:190px; flex-shrink:0; font-size:12.5px; font-weight:700; padding:7px 10px 7px 0;
  display:flex; align-items:center; color:var(--ink);
}
.g-piste{ flex:1; position:relative; display:flex; min-height:31px; }
.g-sem{
  font-size:10px; font-weight:800; color:var(--muted); text-align:center;
  border-left:1px solid var(--line); text-transform:uppercase; letter-spacing:.5px;
}
.g-grille{ border-left:1px solid #f0f0f4; }
.g-barre{
  position:absolute; top:5px; bottom:5px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; min-width:24px;
}
.gantt-ligne:hover .g-nom{ color:var(--accent); }

@media print{
  .topbar, nav.tabs, #fabMic, #assistant, .actions{ display:none !important; }
  .carte{ border:none; padding:0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — le menu se replie, les tableaux deviennent des fiches empilées.
   ════════════════════════════════════════════════════════════════════════════ */

#btnMenu{
  display:none; border:0; background:transparent; font-size:24px; line-height:1;
  padding:6px 10px 6px 0; cursor:pointer; color:var(--ink);
}
#voileMenu{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:38;
}
#voileMenu.ouvert{ display:block; }

/* ── Boutons : respiration et alignement ──────────────────────────────── */
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.actions .btn{ margin:0; }
.btn{ text-decoration:none !important; }        /* jamais de souligné sur un bouton */
a{ text-decoration:none; }
a:hover{ text-decoration:none; }
main table a{ text-decoration:none; border-bottom:1px solid transparent; }
main table a:hover{ border-bottom-color:var(--accent); }

/* ── Champ de recherche ───────────────────────────────────────────────── */
input[type="search"]{
  appearance:none; -webkit-appearance:none;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%;
  background-size:16px; padding-left:36px;
  border:1px solid var(--line); border-radius:10px; height:42px;
  font-size:14px; width:100%; transition:border-color .15s, box-shadow .15s;
}
input[type="search"]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,107,240,.13);
}
input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }

/* ── Barre de filtres ─────────────────────────────────────────────────── */
.filtres{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  margin-bottom:14px;
}
.filtres > div{ flex:1; min-width:140px; }
.filtres > div.large{ flex:2; }
.filtres > div.serre{ flex:0 0 auto; min-width:0; }
.filtres label{ font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin-bottom:5px; display:block; }

@media (max-width: 860px){
  #btnMenu{ display:block; }

  .topbar{ padding:10px 14px; }
  #logoTop{ height:32px; }
  .topbar .sub{ font-size:11px; }

  /* Le menu glisse depuis la gauche */
  nav.tabs{
    position:fixed; top:0; left:0; bottom:0; z-index:39;
    width:255px; max-width:82vw;
    flex-direction:column; align-items:stretch;
    background:#fff; border-right:1px solid var(--line);
    box-shadow:4px 0 24px rgba(0,0,0,.10);
    transform:translateX(-102%); transition:transform .22s ease;
    overflow-y:auto; padding-top:14px;
  }
  nav.tabs.ouvert{ transform:translateX(0); }
  nav.tabs a{
    flex:none; flex-direction:row; justify-content:flex-start;
    gap:12px; padding:15px 20px; font-size:15px;
    border-bottom:1px solid var(--line); border-left:3px solid transparent;
  }
  nav.tabs a.active{
    border-bottom-color:var(--line); border-left-color:var(--accent);
    background:#f5f7ff;
  }
  nav.tabs a .ico{ font-size:19px; }

  main{ padding:14px 12px 90px; }
  .carte{ padding:16px 14px; border-radius:13px; }
  h1{ font-size:21px; }

  /* Indicateurs : deux colonnes plutôt qu'une bouillie */
  .kpis{ grid-template-columns:1fr 1fr; gap:9px; }
  .kpi{ padding:12px 13px; }
  .kpi .val{ font-size:19px; }
  .kpi .lib{ font-size:10px; }

  .grille2{ grid-template-columns:1fr; }
  .rangee{ flex-direction:column; gap:10px; }
  .rangee > div{ min-width:0; width:100%; }

  .actions{ gap:8px; }
  .actions .btn{ flex:1 1 auto; min-width:130px; justify-content:center; }

  .filtres{ padding:12px; }
  .filtres > div, .filtres > div.large{ flex:1 1 100%; }
  .filtres > div.serre{ flex:1 1 100%; }
  .filtres > div.serre .btn{ width:100%; }

  /* ── Tableaux de l'interface : chaque ligne devient une fiche ────────────
     IMPORTANT : cela ne s'applique QU'AUX tableaux de l'application.
     Le document (devis, facture) est une feuille A4 : sa mise en page est
     celle du papier, on n'y touche pas — on la met simplement à l'échelle.
     Sans cette exclusion, le devis se disloquait en fiches illisibles. */
  main > table, main > table thead, main > table tbody,
  main > table tr, main > table th, main > table td,
  .carte table, .carte table thead, .carte table tbody,
  .carte table tr, .carte table th, .carte table td{ display:block; }

  .carte table thead{ position:absolute; left:-9999px; }
  .carte table tr{
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .carte table td{
    border:none; padding:5px 0; display:flex; justify-content:space-between;
    align-items:baseline; gap:4px 12px; text-align:right;
    /* Une valeur trop longue passe À LA LIGNE au lieu d'être comprimée dans une
       colonne étroite où elle se brisait mot par mot. */
    flex-wrap:wrap;
  }
  .carte table td::before{
    content:attr(data-libelle);
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:var(--muted); text-align:left; flex:0 0 auto; line-height:1.7;
  }
  .carte table td.montant{ text-align:right; }

  /* Colonne principale (le nom) : c'est le titre de la fiche, pas une donnée
     parmi d'autres. Elle occupe toute la largeur, à gauche, sans libellé. */
  .carte table td.principal{
    display:block; text-align:left; font-size:16px; line-height:1.3;
    font-weight:700; padding:2px 0 9px; margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .carte table td.principal::before{ content:none; }
  .carte table td.principal a{ color:var(--ink); }

  /* Cellule d'actions : les boutons se répartissent la largeur et passent à la
     ligne s'il le faut, au lieu de déborder de la fiche. */
  .carte table td:last-child{
    justify-content:flex-end; padding-top:10px; gap:8px;
    white-space:normal !important;
  }
  .carte table td:last-child::before{ content:none; }
  .carte table td:last-child .btn{ flex:1 1 auto; text-align:center; }
  .carte table td:last-child form{ flex:1 1 auto; display:flex; }
  .carte table td:last-child form .btn{ width:100%; }

  /* Le document reste un document, en toutes circonstances */
  .apercu-doc table, .apercu-doc thead, .apercu-doc tbody,
  .apercu-doc tr, .apercu-doc th, .apercu-doc td{
    display:revert !important;
  }
  .apercu-doc table{ display:table !important; }
  .apercu-doc thead{ display:table-header-group !important; position:static !important; }
  .apercu-doc tbody{ display:table-row-group !important; }
  .apercu-doc tr{
    display:table-row !important; background:none !important; border:none !important;
    padding:0 !important; margin:0 !important; border-radius:0 !important;
  }
  .apercu-doc th, .apercu-doc td{
    display:table-cell !important; text-align:revert !important;
  }
  .apercu-doc td::before, .apercu-doc th::before{ content:none !important; }

  /* Assistant : plein écran sur mobile */
  #assistant .panneau{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; right:0; bottom:0;
  }
  #fabMic{ right:16px; bottom:16px; width:54px; height:54px; font-size:23px; }
}

@media (max-width: 480px){
  .kpis{ grid-template-columns:1fr; }
}

/* ── Budget sur mobile : le tableau se replie aussi ───────────────────── */
@media (max-width: 860px){
  .tab-budget, .tab-budget thead, .tab-budget tbody,
  .tab-budget tr, .tab-budget th, .tab-budget td{ display:block; }
  .tab-budget thead{ position:absolute; left:-9999px; }
  .tab-budget tr.lot td{
    display:block; text-align:left; border-radius:9px; margin:14px 0 8px;
    background:var(--ink); color:#fff;
  }
  .tab-budget tr.lot td::before{ content:''; }
  .tab-budget tbody tr:not(.lot){
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:11px 13px; margin-bottom:9px;
  }
  .tab-budget td{
    border:none; padding:4px 0; display:flex; align-items:center;
    justify-content:space-between; gap:10px; width:auto !important;
  }
  .tab-budget td::before{
    content:attr(data-libelle);
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:var(--muted); flex-shrink:0;
  }
  .tab-budget input{
    border:1px solid var(--line); background:#fff; text-align:right;
    max-width:58%; padding:6px 8px;
  }
  .tab-budget td:first-child input{ text-align:left; }
  .pied-budget{ justify-content:space-between; gap:14px; padding:13px; }
  .pied-budget .b .v{ font-size:17px; }
  .pied-budget .b.ttc .v{ font-size:20px; }
}

/* ── Onglet Nouveau : choix du type ───────────────────────────────────── */
.choix-type{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px; }
.choix{ cursor:pointer; margin:0; }
.choix input{ position:absolute; opacity:0; }
.choix span{
  display:block; border:2px solid var(--line); border-radius:13px; padding:13px 15px;
  transition:border-color .15s, background .15s;
}
.choix span b{ display:block; font-size:14.5px; }
.choix span em{ display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px; }
.choix input:checked + span{ border-color:var(--accent); background:#f5f7ff; }
.choix input:focus-visible + span{ box-shadow:0 0 0 3px rgba(79,107,240,.18); }

.dictee{ display:flex; gap:9px; align-items:flex-start; }
.dictee textarea{ flex:1; }
.dictee .btn{ height:46px; padding:0 14px; font-size:17px; flex-shrink:0; }
.dictee .btn.ecoute{ background:#c0392b; color:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse{ 50%{ opacity:.6; } }

/* ── Barre d'actions du document (boutons en haut, comme la maquette) ──── */
.barre-doc{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; margin-bottom:14px;
  position:sticky; top:0; z-index:20;
}
.bd-gauche{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.bd-droite{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bd-droite form{ margin:0; display:inline; }

/* ── Aperçu du document au format A4 ──────────────────────────────────── */
.apercu-doc{
  background:#e9e9ee; border-radius:14px; padding:22px;
  display:flex; justify-content:center; overflow-x:auto;
}
.apercu-doc .feuille{
  background:#fff; box-shadow:0 4px 28px rgba(0,0,0,.14);
  transform-origin:top center; flex-shrink:0;
}
.apercu-doc .page{ width:210mm; min-height:297mm; }

@media (max-width: 1100px){
  .apercu-doc .feuille{ transform:scale(.72); margin-bottom:-82mm; }
}
@media (max-width: 860px){
  .apercu-doc{ padding:10px; border-radius:10px; }
  .apercu-doc .feuille{ transform:scale(.44); margin-bottom:-166mm; }
  .barre-doc{ position:static; padding:11px 12px; }
  .bd-droite{ width:100%; }
  .bd-droite .btn{ flex:1 1 auto; min-width:112px; justify-content:center; }
}
@media (max-width: 480px){
  .apercu-doc .feuille{ transform:scale(.33); margin-bottom:-199mm; }
}

/* À l'impression : seule la feuille sort */
@media print{
  .barre-doc, .retouche{ display:none !important; }
  .apercu-doc{ background:none; padding:0; }
  .apercu-doc .feuille{ box-shadow:none; transform:none !important; margin:0 !important; }
}

/* ── Impression : la feuille sort seule, au format A4 exact ───────────── */
@page{ size:A4; margin:0; }
@media print{
  html, body{ background:#fff !important; margin:0 !important; padding:0 !important; }
  .topbar, nav.tabs, #fabMic, #assistant, #voileMenu,
  .msg-info, .msg-erreur, .actions, .filtres, .barre-doc, .retouche{ display:none !important; }
  main{ padding:0 !important; max-width:none !important; }
  .apercu-doc{ background:#fff !important; padding:0 !important; display:block !important; }
  .apercu-doc .feuille{
    box-shadow:none !important; transform:none !important;
    margin:0 !important; width:210mm !important;
  }
  .page{ page-break-after:always; }
}

/* ── Liste des documents : fiches colorées, comme la maquette ─────────── */
.grille-docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:13px; }

.fiche-doc{
  display:block; background:#fff; border:1px solid var(--line); border-radius:15px;
  padding:16px 18px 14px; position:relative; overflow:hidden;
  color:var(--ink); text-decoration:none;
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.fiche-doc::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--muted); }
.fiche-doc:hover{
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.09);
  border-color:#d6d6e0;
}
.fiche-doc.s-brouillon::before{ background:#b6b6c0; }
.fiche-doc.s-finalise::before{ background:var(--accent); }
.fiche-doc.s-envoye::before{ background:#cf7a44; }
.fiche-doc.s-accepte::before{ background:#2e7d5b; }
.fiche-doc.s-refuse::before,
.fiche-doc.s-annule::before{ background:#c0392b; }

.fd-haut{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.fd-type{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--muted);
}
.fd-num{ font-size:17px; font-weight:800; letter-spacing:-.3px; }
.fd-client{ font-size:14px; font-weight:600; color:var(--ink-soft); margin-top:1px; }
.fd-objet{ font-size:12.5px; color:var(--muted); margin-top:5px; min-height:32px; line-height:1.35; }

.fd-bas{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-top:1px solid var(--line); margin-top:11px; padding-top:10px;
}
.fd-bas .fd-droite{ text-align:right; }
.fd-lib{ display:block; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); }
.fd-ttc{ font-size:18px; font-weight:800; color:var(--accent); }
.fd-ac{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.fd-date{ font-size:11px; color:var(--muted); margin-top:7px; }

@media (max-width: 860px){
  .grille-docs{ grid-template-columns:1fr; }
}

/* ── Planning au gabarit officiel (feuille A4) ────────────────────────── */
.page-planning{ width:297mm; min-height:210mm; padding:14mm 13mm 16mm; position:relative;
  background:#fff; color:var(--ink); font-size:11px; }
.pl-band{ width:100%; border-collapse:collapse; }
.pl-band td{ height:8px; padding:0; }
.pl-band .tb-peach{ background:#f6d9c4; width:48%; }
.pl-band .tb-blue{ background:#4f6bf0; width:30%; }
.pl-band .tb-ink{ background:#2b2b2f; width:22%; }

.pl-tete{ display:flex; justify-content:space-between; align-items:center; margin:9mm 0 7mm; }
.pl-tete img{ height:16mm; }
.pl-titre{ font-size:29px; font-weight:800; letter-spacing:1px; }
.pl-titre .dot{ color:#4f6bf0; }

.pl-infos{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  border-top:1.5px solid var(--ink); padding-top:4mm; margin-bottom:6mm; }
.pl-lib{ font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#8a8a93; }
.pl-val{ font-size:12px; font-weight:700; margin-top:2px; }

.page-planning .legende{ margin:0 0 5mm; }
.page-planning .g-nom{ width:58mm; }
.page-planning .gantt-entete, .page-planning .gantt-ligne{ min-width:0; }

.pl-note{ font-size:9px; color:#4a4a52; line-height:1.5; margin-top:7mm;
  padding:3mm; border-left:2px solid #f6d9c4; background:#faf6f2; }
.pl-pied{ position:absolute; left:13mm; right:13mm; bottom:7mm; }
.pl-meta{ font-size:8px; color:#4f6bf0; margin-top:2mm; }

/* Le planning est en A4 paysage (297 mm de large). Sur mobile, plutôt qu'une
   mise à l'échelle fixe qui le rend illisible, on le fait tenir dans la largeur
   disponible et on autorise le défilement horizontal en dernier recours.
   (:has() n'étant pas géré partout, on cible une classe posée sur le conteneur.) */
.apercu-doc.est-planning{ padding:10px; overflow-x:auto; }
.apercu-doc.est-planning .feuille{
  transform:scale(var(--zoom-planning, 1)); transform-origin:top left;
}
@media (max-width:1100px){ .apercu-doc.est-planning{ --zoom-planning:.62; } }
@media (max-width:860px){
  .apercu-doc.est-planning{ --zoom-planning:.52; }
  .apercu-doc.est-planning .feuille{ margin-bottom:-120mm; }
}
@media (max-width:520px){ .apercu-doc.est-planning{ --zoom-planning:.42; } }
@page{ size:A4; margin:0; }

/* ════════════════════════════════════════════════════════════════════════════
   ACCUEIL — l'assistant est la porte d'entrée
   ════════════════════════════════════════════════════════════════════════════ */
.accueil{ max-width:820px; margin:0 auto; padding-top:34px; }
.acc-titre{
  font-size:31px; font-weight:800; letter-spacing:-.7px; line-height:1.25;
  margin-bottom:26px; border:none;
}
.acc-titre span{ color:var(--muted); font-weight:700; }

.acc-saisie{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:14px 16px 12px; box-shadow:0 3px 18px rgba(0,0,0,.05); margin-bottom:26px;
}
.acc-saisie .dictee{ align-items:flex-end; }
.acc-saisie textarea{
  border:none; padding:6px 2px; font-size:15.5px; resize:none;
  min-height:70px; background:transparent;
}
.acc-saisie textarea:focus{ outline:none; box-shadow:none; }
.acc-saisie .btn{ height:42px; padding:0 14px; }
.acc-aide{ font-size:12.5px; color:var(--muted); padding:8px 2px 0; border-top:1px solid var(--line); margin-top:8px; }
.acc-saisie .actions.rangee-dictee > .acc-joindre{
  flex:0 0 54px; min-width:54px; order:-2; padding:0;
  font-size:23px; font-weight:400; border-radius:12px;
}
.acc-saisie .actions.rangee-dictee > #accDicter{ order:-1; }
.acc-pieces{
  display:none; flex-wrap:wrap; gap:7px; margin:8px 0 2px;
}
.acc-piece{
  max-width:100%; display:flex; align-items:center; gap:7px;
  padding:6px 8px 6px 10px; border:1px solid var(--line);
  border-radius:10px; background:#f7f8fb; color:var(--ink-soft); font-size:11.5px;
}
.acc-piece span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-piece button{
  width:22px; height:22px; padding:0; border:0; border-radius:7px;
  background:#e9ebf2; color:var(--ink-soft); cursor:pointer; flex-shrink:0;
}

.acc-exemples{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:11px; }
.acc-ex{
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; cursor:pointer; font:inherit; color:var(--ink);
  transition:border-color .13s, transform .13s, box-shadow .13s;
}
.acc-ex:hover{
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(79,107,240,.10);
}
.acc-ex .ico{ font-size:19px; display:block; margin-bottom:6px; }
.acc-ex b{ display:block; font-size:14px; margin-bottom:3px; }
.acc-ex em{ display:block; font-style:normal; font-size:12.3px; color:var(--muted); line-height:1.4; }

.acc-recents{ margin-top:30px; }
.acc-lib{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); margin-bottom:9px;
}
.acc-liste{ display:flex; flex-direction:column; gap:7px; }
.acc-doc{
  display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid var(--line); border-radius:11px; padding:10px 14px;
  font-size:13.5px; color:var(--ink); transition:border-color .13s;
}
.acc-doc:hover{ border-color:var(--accent); }
.acc-doc .cl{ color:var(--ink-soft); flex:1; }
.acc-doc .mt{ font-weight:800; white-space:nowrap; }

@media (max-width:860px){
  .accueil{ padding-top:14px; }
  .acc-titre{ font-size:24px; margin-bottom:18px; }
  .acc-exemples{ grid-template-columns:1fr; }
  .acc-doc{ flex-wrap:wrap; gap:7px; }
  .acc-doc .cl{ flex:1 1 100%; }
}

/* ── Assistant sur mobile : vraiment plein écran ──────────────────────── */
@media (max-width:860px){
  #assistant{ align-items:stretch; justify-content:stretch; padding:0; }
  #assistant .panneau{
    width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; margin:0; display:flex; flex-direction:column;
  }
  #assistant .chat{ flex:1; min-height:0; }
  #assistant .titre-assistant{ padding:12px 14px; }
  #assistant .suggestions{ padding:0 12px 8px; overflow-x:auto; flex-wrap:nowrap; }
  #assistant .suggestions button{ white-space:nowrap; flex-shrink:0; }
  #piecesJointes{ padding:0 12px; }
}

/* ── En-tête ──────────────────────────────────────────────────────────── */
.topbar .sub{ font-size:12.5px; font-weight:700; color:var(--ink-soft); line-height:1.2; }
.topbar-pc{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.topbar-pc .qui{ font-size:13px; color:var(--muted); }

.tabs-pied{ display:none; }

@media (max-width:860px){
  /* Sur téléphone : logo + nom de l'outil, rien d'autre */
  .topbar-pc{ display:none; }
  .topbar{ gap:10px; }
  .topbar .sub{ font-size:13px; }

  .tabs-pied{
    display:block; margin-top:auto; padding:16px 20px 22px;
    border-top:1px solid var(--line);
  }
  .tabs-pied .tp-qui{
    font-size:12px; color:var(--muted); font-weight:700;
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:9px;
  }
  .tabs-pied .btn{ width:100%; justify-content:center; }
  nav.tabs{ display:flex; flex-direction:column; }
}

/* ── Titre avec actions à droite ──────────────────────────────────────── */
.titre-action{ display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.titre-action h1{ margin:0; border:none; }

/* ── Fiches de documents : le type donne la couleur ───────────────────── */
.fiche-doc{ position:relative; }
.fiche-doc .fd-lien{ display:block; color:var(--ink); text-decoration:none; }
.fiche-doc.t-facture::before{ background:#2e7d5b; }
.fiche-doc.t-planning::before{ background:#cf7a44; }
.fiche-doc.t-facture.s-brouillon::before,
.fiche-doc.t-devis.s-brouillon::before{ background:#b6b6c0; }
.fiche-doc.s-payee::before{ background:#2e7d5b; }
.fiche-doc.s-annule::before,
.fiche-doc.s-annulee::before{ background:#c0392b; }

.fd-pdf{
  position:absolute; right:12px; bottom:11px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:15px; text-decoration:none; transition:border-color .13s, background .13s;
}
.fd-pdf:hover{ border-color:var(--accent); background:#f5f7ff; }

/* ── Fiche client ─────────────────────────────────────────────────────── */
.fiche-client{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.fiche-client .fc-lib{
  display:block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); margin-bottom:2px;
}
.fiche-client .fc-val{ font-size:14px; font-weight:600; }
.fiche-client a{ color:var(--accent); }
.kpi.alerte .val{ color:#c0392b; }

.lien-fort{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
.lien-fort:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
   MENU MOBILE — le tiroir commence SOUS l'en-tête.

   Première tentative : empiler le tiroir au-dessus de l'en-tête avec un z-index
   plus élevé. Cela ne fonctionne pas de façon fiable — l'en-tête crée son propre
   contexte d'empilement, et le premier onglet (« Assistant ») restait caché
   derrière lui.

   La solution robuste ne se bat pas contre l'empilement : le tiroir DÉMARRE
   là où l'en-tête finit. Sa hauteur réelle est mesurée à l'ouverture (ui.js) et
   déposée dans --h-topbar : aucune valeur devinée, donc aucun recouvrement,
   quelle que soit la taille du logo ou la police du système.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .topbar{ position:sticky; top:0; z-index:46; background:#fff; }

  nav.tabs{
    top:var(--h-topbar, 62px);
    bottom:0;
    height:auto;
    z-index:45;
    padding-top:8px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  #voileMenu{ top:var(--h-topbar, 62px); z-index:44; }
}

/* Aperçu compact dans l'éditeur : on voit le document sans quitter l'écran */
.apercu-compact{ padding:16px; margin-bottom:14px; max-height:520px; overflow:auto; }
.apercu-compact .feuille{ transform:scale(.62); transform-origin:top center; margin-bottom:-113mm; }
@media (max-width:860px){
  .apercu-compact{ max-height:380px; padding:8px; }
  .apercu-compact .feuille{ transform:scale(.40); margin-bottom:-178mm; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE DE CONNEXION
   ════════════════════════════════════════════════════════════════════════════ */
.page-connexion{
  margin:0; min-height:100dvh; background:#f4f4f7;
  display:flex; flex-direction:column;
}
.cnx-bande{
  height:7px; flex-shrink:0;
  background:linear-gradient(90deg,#f6d9c4 0 48%,#4f6bf0 48% 78%,#2b2b2f 78% 100%);
}
.cnx-centre{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
}

.cnx-carte{
  width:100%; max-width:410px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:34px 32px 30px;
  box-shadow:0 10px 40px rgba(43,43,47,.09);
}
.cnx-logo{ height:44px; display:block; margin-bottom:22px; }

.cnx-carte h1{
  font-size:22px; font-weight:800; letter-spacing:-.4px;
  margin:0; border:none; padding:0;
}
.cnx-sous{ font-size:14px; color:var(--muted); margin:4px 0 24px; }

.cnx-champ{ margin-bottom:17px; }
.cnx-champ label{
  display:block; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); margin-bottom:7px;
}

/* Les deux champs sont dimensionnés à l'identique : sans cela, le navigateur
   applique au mot de passe sa propre police, plus étroite, et le champ paraît
   rabougri à côté de celui de l'email. */
.cnx-champ input,
.cnx-motdepasse input{
  width:100%; height:52px;
  padding:0 15px; font-size:16px;          /* 16px : évite le zoom sur iPhone */
  font-family:inherit;
  border:1.5px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
  -webkit-appearance:none; appearance:none;
}
.cnx-champ input:focus,
.cnx-motdepasse input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3.5px rgba(79,107,240,.14);
}
.cnx-champ input::placeholder{ color:#b6b6c0; }

.cnx-motdepasse{ position:relative; }
.cnx-motdepasse input{ padding-right:50px; letter-spacing:.5px; }
.cnx-motdepasse button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; background:transparent;
  font-size:17px; cursor:pointer; opacity:.5; border-radius:9px;
}
.cnx-motdepasse button:hover{ opacity:1; background:#f4f4f7; }

.cnx-valider{
  width:100%; height:52px; margin-top:8px;
  font-size:15.5px; font-weight:800; justify-content:center;
}
.cnx-oubli{
  display:block; text-align:center; margin-top:16px;
  font-size:13.5px; color:var(--muted); text-decoration:none;
}
.cnx-oubli:hover{ color:var(--accent); }

.cnx-pied{ font-size:12px; color:var(--muted); }

.page-connexion .msg-erreur,
.page-connexion .msg-info{ margin-bottom:18px; font-size:13.5px; }

@media (max-width:480px){
  .cnx-carte{ padding:28px 22px 26px; border-radius:17px; }
  .cnx-centre{ justify-content:flex-start; padding-top:40px; }
}

/* ── Bandeau de relève des factures ───────────────────────────────────── */
.carte-releve{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; background:linear-gradient(120deg,#f5f7ff,#fff);
  border:1px solid #dfe4ff;
}
.releve-texte b{ display:block; font-size:15px; margin-bottom:2px; }
.releve-texte span{ font-size:13.5px; color:var(--muted); }
.releve-texte a{ color:var(--accent); }
@media (max-width:860px){
  .carte-releve form, .carte-releve .btn{ width:100%; justify-content:center; }
}
.tag-source{ font-size:12px; margin-left:5px; opacity:.75; }

/* ── Avoirs / remboursements ──────────────────────────────────────────── */
.badge-avoir{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:20px;
  font-size:10.5px; font-weight:800; letter-spacing:.3px;
  background:#e7f3ee; color:#2e7d5b; vertical-align:middle;
}
.montant.credit{ color:#2e7d5b; font-weight:800; }

/* ── Réglage du pourcentage d'acompte ─────────────────────────────────── */
.acompte-rapide{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pct-preset{
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:11px; padding:9px 18px; font-size:15px; font-weight:800;
  cursor:pointer; transition:border-color .13s, background .13s;
}
.pct-preset:hover{ border-color:var(--accent); }
.pct-preset.actif{ border-color:var(--accent); background:#f5f7ff; color:var(--accent); }

.acompte-montant{
  font-size:19px; font-weight:800; color:var(--accent);
  padding:9px 0;
}
@media (max-width:860px){
  .acompte-rapide .pct-preset{ flex:1; text-align:center; }
}

/* ── Conversation du budget ───────────────────────────────────────────── */
.budget-chat{
  max-height:340px; overflow-y:auto; padding:16px; margin-bottom:12px;
  background:#f7f7fa; border-radius:14px; display:flex; flex-direction:column; gap:16px;
}
.budget-chat .bulle{
  max-width:85%; padding:11px 14px; border-radius:16px; font-size:14px;
  white-space:pre-wrap; line-height:1.5; margin:0; flex-shrink:0;
}
/* Un peu plus d'air entre une bulle et la suivante, quel que soit l'expéditeur */
.budget-chat > * + *{ margin-top:2px; }
.budget-chat .bulle.moi{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.budget-chat .bulle.ia{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }

/* ── Budget par lots ──────────────────────────────────────────────────── */
.lot-budget{ border:1px solid var(--line); border-radius:13px; margin-bottom:11px; overflow:hidden; }
.lb-tete{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 15px; background:var(--ink); color:#fff;
}
.lb-tete span{ font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.lb-tete b{ font-size:15px; white-space:nowrap; }
.art-b{ display:flex; align-items:center; gap:12px; padding:10px 15px; border-bottom:1px solid var(--line); }
.art-b:last-child{ border-bottom:none; }
.ab-des{ flex:1; font-size:14px; }
.ab-ref{ display:block; font-size:11.5px; color:var(--muted); }
.ab-q{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.ab-t{ font-size:14px; font-weight:800; white-space:nowrap; }

.pied-budget{
  display:flex; justify-content:flex-end; gap:22px; align-items:baseline;
  padding:14px 4px 4px; flex-wrap:wrap;
}
.pied-budget .b .l{ font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); display:block; }
.pied-budget .b .v{ font-size:17px; font-weight:800; }
.pied-budget .b.ttc .v{ font-size:21px; color:var(--accent); }

@media (max-width:860px){
  .art-b{ flex-wrap:wrap; gap:4px; }
  .ab-des{ flex:1 1 100%; }
  .budget-chat .bulle{ max-width:92%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ASSISTANT — pastille flottante et barre de saisie façon Claude
   ════════════════════════════════════════════════════════════════════════════ */

/* Pastille flottante : couleur charte (bleu ZS BAT), mascotte à l'intérieur */
#fabMic{
  background:#4f6bf0;
  border:none; box-shadow:0 6px 20px rgba(79,107,240,.42);
  display:flex; align-items:center; justify-content:center; padding:0;
}
#fabMic img{ pointer-events:none; }
#fabMic:hover{ background:#4560e0; }
#fabMic:active{ transform:scale(.94); }

/* Pastille dans l'en-tête de la fenêtre */
.titre-assistant .pastille{
  background:#eef1ff; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0; padding:0;
}
.titre-assistant .pastille.ecoute{ box-shadow:0 0 0 3px rgba(79,107,240,.4); animation:pulseMic 1.3s infinite; }
@keyframes pulseMic{ 50%{ box-shadow:0 0 0 7px rgba(79,107,240,.12); } }

/* Barre de saisie : texte pleine largeur, actions dessous à droite */

.saisie-actions{ display:flex; align-items:center; justify-content:space-between; }
.saisie-droite{ display:flex; align-items:center; gap:8px; }

/* Boutons ronds, minimalistes */
.ic-btn{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--ink); font-size:19px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:border-color .13s, background .13s, transform .1s;
}
.ic-btn:hover{ border-color:var(--accent); }
.ic-btn:active{ transform:scale(.92); }
.ic-btn.envoyer{ background:#4f6bf0; border-color:#4f6bf0; color:#fff; font-size:16px; }
.ic-btn.envoyer:hover{ background:#4560e0; }
.ic-btn.ecoute{ background:#c0392b; border-color:#c0392b; color:#fff; animation:pulseMic 1.2s infinite; }

/* Le « + » de la pièce jointe, un peu plus discret */
#btnJoindre{ font-size:26px; font-weight:400; line-height:1; color:var(--muted); }
#btnJoindre:hover{ color:var(--accent); }

@media (max-width:860px){
  .saisie-chat textarea{ font-size:16px; }   /* évite le zoom iOS */
}

/* Mascotte sur l'accueil */
.acc-avatar{
  width:96px; height:96px; margin:0 auto 18px; border-radius:50%;
  background:#eef1ff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 6px 22px rgba(79,107,240,.16);
}
.accueil{ text-align:center; }
.accueil .acc-saisie, .accueil .acc-exemples, .accueil .acc-recents{ text-align:left; }
@media (max-width:860px){ .acc-avatar{ width:76px; height:76px; } }

/* Fiche sous-traitant : liseré à la couleur de la société */
.fiche-doc[style*="--accent-fiche"]::before{ background:var(--accent-fiche); }

/* ── Encart assistant dans la fiche de suivi ──────────────────────────── */
.carte-assistant-suivi{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(120deg,#f5f7ff,#fff); border:1px solid #dfe4ff;
}
.carte-assistant-suivi .as-mascotte{
  width:54px; height:54px; border-radius:50%; background:#eef1ff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.carte-assistant-suivi .as-corps{ flex:1; }
.carte-assistant-suivi .as-corps b{ display:block; font-size:15px; margin-bottom:2px; }
.carte-assistant-suivi .as-corps span{ font-size:13.5px; color:var(--muted); }
@media (max-width:860px){
  .carte-assistant-suivi{ flex-direction:column; text-align:center; }
  .carte-assistant-suivi .actions{ justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REFONTE 2026 — design d'après la maquette : barre latérale, barre du haut
   avec recherche, cartes KPI, donut, barre d'onglets mobile.
   Ce bloc, chargé en dernier, prime sur les styles historiques.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --fond:#f6f7fb; --carte:#ffffff; --ligne:#eaecf2;
  --encre:#1c1d22; --doux:#4a4d57; --gris:#8a8f9c;
  --accent:#4f6bf0; --accent-doux:#eef2ff;
  --vert:#22a06b; --vert-doux:#e8f6ef;
  --violet:#8b5cf6; --violet-doux:#f3efff;
  --orange:#f59e0b; --orange-doux:#fef4e2;
  --rouge:#e5484d;
  --r:16px; --ombre:0 1px 3px rgba(28,29,34,.05);
}
/* C'est l'élément RACINE, et non le corps, qu'iOS échantillonne pour peindre
   la zone de la barre d'état et le rebond de fin de défilement. Posée sur
   `body` seulement, la couleur n'apparaissait qu'après avoir fait défiler la
   page jusqu'en butée — le navigateur repeignait alors la zone. */
html{ background-color:#fdf6f0; }

body.coque{
  margin:0; background:var(--fond); color:var(--encre);
  /* Même ton que la racine : le corps ne doit pas masquer la zone sûre d'une
     autre couleur. */
  background-color:#fdf6f0;
  display:flex; min-height:100dvh;
  font-family:-apple-system,'Segoe UI',Inter,Helvetica,Arial,sans-serif;
}
.coque-droite{ flex:1; min-width:0; display:flex; flex-direction:column; }
body.coque main#vue{ max-width:1180px; width:100%; margin:0 auto; padding:26px 28px 90px; }

/* ── Barre latérale ───────────────────────────────────────────────────── */
.lateral{
  width:232px; flex-shrink:0; background:#fff; border-right:1px solid var(--ligne);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh;
  padding:20px 14px 16px; overflow-y:auto; z-index:40;
}
.lat-logo{ display:block; padding:2px 10px 18px; }
.lat-logo img{ height:40px; }
.lat-nav{ flex:1; }
.lat-section{
  font-size:10.5px; font-weight:800; letter-spacing:.9px; color:var(--gris);
  padding:14px 10px 7px;
}
.lat-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9.5px 11px; border-radius:11px; font-size:14px; font-weight:600;
  color:var(--doux); text-decoration:none; border:0; background:none;
  cursor:pointer; font-family:inherit; text-align:left; margin-bottom:2px;
  transition:background .12s, color .12s;
}
.lat-item .ico{ font-size:16px; width:20px; text-align:center; }
.lat-item:hover{ background:#f4f5f9; color:var(--encre); }
.lat-item.actif{ background:var(--accent-doux); color:var(--accent); }
.lat-deco{ margin:0; }
.lat-deco .lat-item{ color:var(--gris); }

.lat-nouveau{ position:relative; padding-top:12px; }
.btn-nouveau{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--accent); color:#fff; border:0; border-radius:12px;
  padding:12px 16px; font-size:14.5px; font-weight:800; cursor:pointer;
  font-family:inherit; transition:background .12s;
}
.btn-nouveau:hover{ background:#4560e0; }
.menu-nouveau{
  display:none; background:#fff; border:1px solid var(--ligne); border-radius:13px;
  box-shadow:0 10px 34px rgba(28,29,34,.14); padding:6px; margin-bottom:8px;
}
.menu-nouveau.ouvert{ display:block; }
.menu-nouveau a{
  display:block; padding:10px 12px; border-radius:9px; font-size:14px;
  font-weight:600; color:var(--encre); text-decoration:none;
}
.menu-nouveau a:hover{ background:#f4f5f9; }

/* ── Barre du haut ────────────────────────────────────────────────────── */
.barre-haut{
  display:flex; align-items:center; gap:16px;
  background:#fff; border-bottom:1px solid var(--ligne);
  padding:12px 26px; position:sticky; top:0; z-index:35;
}
#btnMenu{ display:none; border:0; background:none; font-size:22px; cursor:pointer;
  padding:4px 8px; color:var(--encre); }
.bh-logo-mobile{ display:none; }
.bh-logo-mobile img{ height:32px; }
.bh-salut{ font-size:15px; font-weight:700; white-space:nowrap; }

.bh-recherche{
  flex:1; max-width:430px; margin-left:auto; position:relative;
}
.bh-recherche .loupe{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.55;
}
.bh-recherche input{
  width:100%; height:40px; border:1px solid var(--ligne); border-radius:11px;
  background:#f6f7fb; padding:0 14px 0 36px; font-size:13.5px; font-family:inherit;
}
.bh-recherche input:focus{ outline:none; border-color:var(--accent);
  background:#fff; box-shadow:0 0 0 3px rgba(79,107,240,.12); }

.bh-cloche{
  position:relative; font-size:18px; text-decoration:none; padding:6px;
  border-radius:10px; line-height:1;
}
.bh-cloche:hover{ background:#f4f5f9; }
.bh-cloche .badge{
  position:absolute; top:0; right:0; background:var(--rouge); color:#fff;
  font-size:9.5px; font-weight:800; border-radius:9px; padding:1px 4.5px;
}

.bh-profil{ position:relative; }
.bh-avatar{
  display:flex; align-items:center; gap:9px; border:0; background:none;
  cursor:pointer; font-family:inherit; padding:4px 6px; border-radius:11px;
}
.bh-avatar:hover{ background:#f4f5f9; }
.bh-avatar .rond{
  width:36px; height:36px; border-radius:50%; background:var(--accent-doux);
  color:var(--accent); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.bh-nom{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.bh-nom b{ font-size:13px; }
.bh-nom small{ font-size:10.5px; color:var(--gris); }
.bh-avatar .chev{ font-size:10px; color:var(--gris); }
.menu-profil{
  display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:180px;
  background:#fff; border:1px solid var(--ligne); border-radius:13px;
  box-shadow:0 10px 34px rgba(28,29,34,.14); padding:6px; z-index:60;
}
.menu-profil.ouvert{ display:block; }
.menu-profil a, .menu-profil button{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--encre); text-decoration:none;
  border:0; background:none; cursor:pointer; font-family:inherit;
}
.menu-profil a:hover, .menu-profil button:hover{ background:#f4f5f9; }
.menu-profil form{ margin:0; }

/* ── Cartes, restylées à la maquette ──────────────────────────────────── */
body.coque .carte{
  background:var(--carte); border:1px solid var(--ligne); border-radius:var(--r);
  box-shadow:var(--ombre); padding:20px 22px; margin-bottom:18px;
}
.bouton-depense-manuelle{
  width:100%; min-height:52px; margin:0 0 14px; border:1px dashed #b9c5ed;
  color:#345edc; background:#f8f9ff; font-weight:800;
}
.bouton-depense-manuelle[aria-expanded="true"]{ border-style:solid; background:#eef2ff; }
.carte-depense-manuelle{ scroll-margin-top:84px; }
body.coque h1{ font-size:23px; letter-spacing:-.4px; border:none; margin:0 0 4px; }
body.coque .sous-titre{ color:var(--gris); font-size:14px; margin:0 0 20px; }

/* ── Cartes KPI du tableau de bord ────────────────────────────────────── */
.kpi-grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px; margin-bottom:18px;
}
.kpi-carte{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r);
  box-shadow:var(--ombre); padding:18px 20px; position:relative;
}
.kpi-carte .kc-tete{ display:flex; justify-content:space-between; align-items:flex-start; }
.kpi-carte .kc-lib{ font-size:13px; font-weight:600; color:var(--gris); }
.kpi-carte .kc-ico{
  width:38px; height:38px; border-radius:11px; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.kc-ico.bleu{ background:var(--accent-doux); }
.kc-ico.vert{ background:var(--vert-doux); }
.kc-ico.violet{ background:var(--violet-doux); }
.kc-ico.orange{ background:var(--orange-doux); }
.kpi-carte .kc-val{ font-size:25px; font-weight:800; letter-spacing:-.5px; margin:8px 0 4px; }
.kpi-carte .kc-note{ font-size:12.5px; color:var(--gris); }
.kpi-carte .kc-note .haut{ color:var(--vert); font-weight:700; }
.kpi-carte .kc-note .retard{ color:var(--rouge); font-weight:700; }
.kpi-carte .kc-jauge{
  height:6px; background:#eef0f5; border-radius:4px; margin-top:9px; overflow:hidden;
}
.kpi-carte .kc-jauge i{ display:block; height:100%; background:var(--accent); border-radius:4px; }

/* ── Deux colonnes : activité + répartition ───────────────────────────── */
.tb-deux{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.tb-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.tb-tete h2{ font-size:16.5px; margin:0; }
.tb-tete a{ font-size:13px; font-weight:700; color:var(--accent); text-decoration:none;
  border:1px solid var(--ligne); border-radius:9px; padding:6px 12px; }
.tb-tete a:hover{ background:var(--accent-doux); }

.act-ligne{
  display:flex; align-items:center; gap:13px; padding:11px 0;
  border-bottom:1px solid var(--ligne);
}
.act-ligne:last-child{ border-bottom:none; }
.act-ligne .ai{
  width:38px; height:38px; border-radius:11px; font-size:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.act-ligne .ac{ flex:1; min-width:0; }
.act-ligne .ac b{ display:block; font-size:13.5px; }
.act-ligne .ac span{ font-size:12px; color:var(--gris); }
.act-ligne .ad{ text-align:right; white-space:nowrap; }
.act-ligne .ad b{ display:block; font-size:13.5px; }
.act-ligne .ad span{ font-size:11.5px; color:var(--gris); }

/* Donut de répartition (conic-gradient) */
.donut-flex{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.donut{
  width:190px; height:190px; border-radius:50%; position:relative; flex-shrink:0;
  margin:6px auto;
}
.donut::after{
  content:''; position:absolute; inset:22%; background:#fff; border-radius:50%;
}
.donut .centre{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:2;
}
.donut .centre b{ font-size:17px; }
.donut .centre span{ font-size:11.5px; color:var(--gris); }
.donut-leg{ flex:1; min-width:200px; }
.donut-leg .dl{
  display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px;
}
.donut-leg .dl i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.donut-leg .dl span{ flex:1; }
.donut-leg .dl b{ white-space:nowrap; }
.donut-leg .dl em{ font-style:normal; color:var(--gris); font-size:12px; width:40px; text-align:right; }

/* ── Tableau des chantiers ────────────────────────────────────────────── */
.tb-chantiers table{ width:100%; border-collapse:collapse; }
.tb-chantiers th{
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--gris); padding:8px 12px;
  border-bottom:1px solid var(--ligne);
}
.tb-chantiers td{ padding:13px 12px; border-bottom:1px solid var(--ligne); font-size:13.5px; }
.tb-chantiers tr:last-child td{ border-bottom:none; }
.tb-chantiers .ch-nom{ font-weight:700; }
.tb-chantiers .ch-sous{ font-size:12px; color:var(--gris); }
.jauge{
  display:inline-block; width:90px; height:6px; background:#eef0f5;
  border-radius:4px; overflow:hidden; vertical-align:middle; margin-right:8px;
}
.jauge i{ display:block; height:100%; background:var(--accent); border-radius:4px; }

/* ── Barre d'onglets mobile ───────────────────────────────────────────── */
.nav-bas{ display:none; }

/* ── Adaptation mobile ────────────────────────────────────────────────── */
@media (max-width:960px){
  .bh-salut{ display:none; }
}
@media (max-width:860px){
  /* ── Coque à hauteur d'écran : plus rien n'est en position fixe ────────
     La barre du bas se retrouvait parfois peinte au milieu de l'écran. Retirer
     le backdrop-filter, puis le contexte flex, puis surveiller sa position
     n'ont pas suffi : tant qu'elle est en position:fixed, elle dépend d'un
     décalage que WebKit peut servir périmé.

     On change donc de principe. La page ne défile plus : la coque occupe
     exactement la hauteur de l'écran, c'est la zone de contenu qui défile, et
     la barre redevient un bloc ordinaire posé en bas de la colonne. Un élément
     qui n'est pas fixe ne peut pas dériver — le défaut devient impossible.

     Contrepartie assumée : le navigateur ne restaure plus seul la position de
     défilement au retour arrière. C'est ui.js qui s'en charge, page par page. */
  html{ height:100%; }
  body.coque{
    display:flex; flex-direction:column;
    /* Repère du positionnement absolu de la barre du bas. */
    position:relative;
    /* 100dvh suit la hauteur réellement affichable, là où 100% englobe la
       bande réservée à la barre d'accueil de l'iPhone : c'est elle qui rendait
       le dernier élément inatteignable. */
    height:100dvh; min-height:0; overflow:hidden;
  }
  .coque-droite{
    flex:1 1 auto; min-height:0;
    /* Pas de -webkit-overflow-scrolling:touch : cette propriété héritée des
       anciens iOS tronque la fin d'un conteneur qui défile à l'intérieur d'une
       colonne flex — le dernier bouton d'une page devenait inatteignable. Le
       défilement à inertie est natif depuis iOS 13, elle ne sert plus. */
    overflow-y:auto;
    overscroll-behavior-y:contain;
    /* Fin de course garantie : même si iOS se trompe de quelques dizaines de
       pixels sur la hauteur du conteneur, il reste de quoi défiler pour
       amener le dernier élément dans la zone tactile. */
    scroll-padding-bottom:24px;
    /* La barre flotte au-dessus du contenu : sans cette réserve, le dernier
       élément de chaque page finissait caché dessous. */
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
  /* La page Magasins mesure elle-même la place disponible : la réserve la
     ferait compter deux fois et laisserait un vide sous la carte.
     ATTENTION : cette exception ne porte QUE sur la marge basse. Y avoir
     déplacé le reste des déclarations avait retiré `overflow-y:auto` à toutes
     les autres pages — plus rien ne défilait nulle part. */
  body.mg-sur-carte .coque-droite{ padding-bottom:0; }

  /* La barre latérale devient tiroir (mêmes ids : le JS existant fonctionne) */
  .lateral{
    position:fixed; top:0; bottom:0; left:0; height:100dvh;
    transform:translateX(-104%); transition:transform .22s ease;
    box-shadow:14px 0 40px rgba(0,0,0,.12);
  }
  .lateral.ouvert{ transform:translateX(0); }
  #btnMenu{ display:block; }
  .bh-logo-mobile{ display:block; }
  .bh-recherche{ display:none; }
  .bh-nom{ display:none; }
  .bh-avatar .chev{ display:none; }
  .barre-haut{
    padding:10px 14px; gap:10px;
    /* La page descend désormais sous la barre d'état de l'iPhone : sans cette
       réserve, le logo passerait sous l'heure. */
    padding-top:calc(10px + env(safe-area-inset-top));
    /* Même crème que la page, pour qu'aucune couture n'apparaisse entre la
       bande de l'heure et l'en-tête. */
    background:rgba(253,246,240,.94);
  }
  .bh-cloche{ margin-left:auto; }

  /* Simple respiration en fin de page. Inutile d'y ajouter la zone réservée
     de l'iPhone : la barre du bas, devenue un bloc ordinaire, la comprend déjà
     dans sa propre hauteur — l'y remettre creusait un vide inutile. */
  body.coque main#vue{ padding:18px 14px 28px; }
  .tb-deux{ grid-template-columns:1fr; }

  /* Barre d'onglets en bas, assistant au centre — la pastille flottante s'efface */
  #fabMic{ display:none; }
  /* ── Barre du bas : une pilule qui flotte au-dessus de la page ────────
     Elle est posée en ABSOLU dans la coque, jamais en `fixed` : sur iPhone,
     un élément fixed se retrouvait peint au milieu de l'écran au retour
     d'arrière-plan. En absolu dans un parent à hauteur d'écran, elle tient
     sa place sans cette couche composite fautive. */
  .nav-bas{
    display:flex; position:absolute !important;
    left:0; right:0; top:auto;
    bottom:calc(3px + env(safe-area-inset-bottom));
    /* Au-dessus de tout ce qu'une page peut poser en bas d'écran — l'encart
       des enseignes de la carte monte à 600 et l'avait recouverte, donnant
       l'impression que la barre avait disparu. En dessous du tiroir latéral
       (910), qui doit rester maître de l'écran quand il s'ouvre. */
    margin:0 14px; z-index:700;
    /* Le crème de l'application, et non le blanc : posée sur des pages
       couvertes de cartes blanches, la pilule s'y fondait. Teintée, elle se
       lit comme une surface à part. */
    background:#fdf6f0; border:0; border-radius:32px;
    padding:7px 6px;
    justify-content:space-around; align-items:center;
    /* Un relief franc : sur un fond de même teinte, c'est l'ombre seule qui
       détache la barre de la page. Trois couches — un halo large, une ombre
       portée courte, et un filet rapproché qui dessine le bord. */
    box-shadow:0 14px 40px rgba(28,31,43,.22),
               0 5px 14px rgba(28,31,43,.14),
               0 1px 2px rgba(28,31,43,.10);
    -webkit-transform:none !important; transform:none !important;
    will-change:auto; -webkit-backface-visibility:visible; backface-visibility:visible;
  }
  .nb-item{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10.5px; font-weight:700; color:var(--gris); text-decoration:none;
    border:0; background:none; font-family:inherit; cursor:pointer;
    padding:5px 6px; min-width:52px;
  }
  .nb-item .ico{ font-size:19px; }
  .nb-item.actif{ color:var(--accent); }

  /* L'assistant, seul médaillon de la barre : il déborde vers le haut, ce qui
     le désigne comme le geste principal. Cerclé de blanc, il se détache de la
     page beige au-dessus comme de la pilule blanche en dessous. */
  .nb-centre{
    width:56px; height:56px; border-radius:50%;
    /* La mascotte porte déjà son propre fond crème et son propre détourage
       rond : elle occupe donc tout le médaillon. Auparavant elle flottait au
       milieu, cernée d'un anneau crème parasite. */
    background:#f6f4ee; border:0; cursor:pointer; flex:0 0 auto;
    padding:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    margin-top:-24px;
    box-shadow:0 0 0 5px #fff, 0 5px 16px rgba(28,31,43,.16);
    transition:transform .12s;
  }
  .nb-centre img{ width:100%; height:100%; display:block; border-radius:50%; }
  .nb-centre:active{ transform:scale(.93); }

  /* Le « + » est un onglet comme les autres : même gabarit, même libellé.
     Seule son icône porte le bleu, pour dire que c'est une action et non une
     destination. */
  /* Même gabarit que les icônes voisines, sans quoi le libellé « Plus » se
     posait une paire de pixels plus bas que les autres.
     Le sélecteur est préfixé : à égalité de spécificité, la règle générique
     `.nav-svg svg { stroke: currentColor }` vient après et l'emportait — le
     « + » restait gris. */
  .nav-bas .nb-plus .nav-svg svg{
    width:21px; height:21px; fill:none; stroke:var(--accent,#4f6bf0);
    stroke-width:2.3; stroke-linecap:round;
    transition:transform .16s;
  }
  /* Ouvert, le « + » devient une croix : elle reste bleue, et le libellé
     l'accompagne — c'est le seul repère qui dit que le tiroir est déployé. */
  .nav-bas .nb-plus[aria-expanded="true"] .nav-svg svg{
    transform:rotate(45deg);
    stroke:var(--accent,#4f6bf0);
  }
  .nb-plus[aria-expanded="true"]{ color:var(--accent,#4f6bf0) !important; }

  /* ── Le tiroir du « + » ───────────────────────────────────────────────
     Empilé au-dessus du bouton, aligné à droite comme sur la maquette. */
  .nb-tiroir{
    position:absolute; right:4px; bottom:calc(100% + 12px);
    display:flex; flex-direction:column; gap:9px; z-index:60;
  }
  .nb-tiroir[hidden]{ display:none; }
  .nb-carte{
    display:flex; align-items:center; gap:11px;
    padding:11px 15px 11px 11px; min-width:186px;
    background:#fff; border-radius:15px; text-decoration:none;
    color:var(--encre,#1f2430); font-size:14px; font-weight:700;
    box-shadow:0 5px 20px rgba(28,31,43,.14);
    animation:nbMonte .19s cubic-bezier(.32,.72,0,1) backwards;
  }
  .nb-carte:nth-child(2){ animation-delay:.04s; }
  .nb-carte:nth-child(3){ animation-delay:.08s; }
  @keyframes nbMonte{ from{ opacity:0; transform:translateY(8px); } }
  .nb-carte-ico{
    width:36px; height:36px; border-radius:11px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
  }
  .nb-carte-ico svg{ width:19px; height:19px; }
  .nb-carte-ico.bleu{ background:#e8effe; color:#3b6df0; }
  .nb-carte-ico.vert{ background:#e6f6ec; color:#1f9d55; }
  .nb-carte-ico.orange{ background:#fdf0e0; color:#d98218; }
  /* Les repas : un ton pêche, celui du fond de l'app. */
  .nb-carte-ico.peche{ background:#fbeee2; color:#b0701a; }

  /* Le voile qui referme le tiroir d'un appui à côté. */
  .nb-voile{
    position:absolute; inset:0; z-index:45; background:transparent;
    border:0; padding:0;
  }
  .nb-voile[hidden]{ display:none; }
}

/* ── Accueil : actions rapides (maquette mobile) ─────────────────────── */
.acc-rapides{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  max-width:560px; margin:10px auto 0; text-align:left;
}
.acc-rapide{
  display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid var(--ligne); border-radius:14px; padding:14px 15px;
  text-decoration:none; color:var(--encre); font-size:13.5px;
  box-shadow:var(--ombre); transition:border-color .12s, transform .1s;
}
.acc-rapide:hover{ border-color:var(--accent); }
.acc-rapide:active{ transform:scale(.98); }
.ar-ico{
  width:38px; height:38px; border-radius:11px; font-size:17px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ar-ico.bleu{ background:var(--accent-doux); }
.ar-ico.vert{ background:var(--vert-doux); }
.ar-ico.violet{ background:var(--violet-doux); }
.ar-ico.orange{ background:var(--orange-doux); }
.accueil .acc-lib{ max-width:560px; margin:22px auto 0; font-size:13px;
  font-weight:800; color:var(--gris); }

/* ── Fiche chantier (écran mobile 2 de la maquette) ──────────────────── */
.ch-entete{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.ch-retour{
  width:38px; height:38px; border-radius:11px; background:#fff;
  border:1px solid var(--ligne); display:flex; align-items:center;
  justify-content:center; text-decoration:none; color:var(--encre);
  font-size:17px; flex-shrink:0;
}
.ch-retour:hover{ border-color:var(--accent); }
.ch-titres{ flex:1; min-width:0; }
.ch-titres h1{ margin:0; font-size:21px; }
.ch-titres span{ font-size:13px; color:var(--gris); }
.ch-modifier{ margin-left:auto; flex-shrink:0; }
.ch-edition{ border-color:#dfe3f5; }
.ch-edition .ch-sec-tete{ margin-bottom:16px; }
.ch-edition .ch-sec-tete h2{ margin:3px 0 0; }
.ch-edition textarea{ width:100%; resize:vertical; }
.ch-edition-note{ margin:10px 0 0; color:var(--gris); font-size:11.5px; }
.ch-synthese .ch-kpis{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; }
.ck-lib{ display:block; font-size:12px; color:var(--gris); margin-bottom:3px; }
.ck-val{ font-size:22px; font-weight:800; letter-spacing:-.4px; }
.ck-val.gris{ color:var(--gris); }
.ck-pct{ font-size:12.5px; color:var(--gris); margin-top:7px; }

/* ════════════════════════════════════════════════════════════════════════════
   CORRECTIFS REFONTE — grilles garanties, tuiles, poubelle, marges mobiles
   ════════════════════════════════════════════════════════════════════════════ */

/* Indicateurs des fiches (client, chantier…) : toujours en grille horizontale */
body.coque .kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px; margin-bottom:16px;
}
body.coque .kpi{
  background:#fff; border:1px solid var(--ligne); border-radius:14px;
  padding:15px 17px; position:relative; overflow:hidden;
}
body.coque .kpi .val{ font-size:21px; font-weight:800; letter-spacing:-.4px; }
body.coque .kpi .lib{ font-size:11px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--gris); }

/* Grille des fiches documents/chantiers : dimension garantie + poubelle en coin */
body.coque .grille-docs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:14px; margin-top:8px;
}
body.coque .fiche-doc{ position:relative; }
body.coque .fiche-doc .fd-lien{
  display:block; color:inherit; text-decoration:none; height:100%;
}
body.coque .fiche-doc > form{ position:absolute; top:10px; right:10px; margin:0; }
body.coque .fiche-doc{ position:relative; }
body.coque .fiche-doc > form .fd-pdf,
body.coque .fiche-doc > a.fd-pdf{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--ligne); background:#fff; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  text-decoration:none; color:var(--encre);
}
body.coque .fiche-doc > form .fd-pdf:hover{ border-color:var(--rouge); }

/* Budget affiché sur la tuile d'un chantier */
.fd-budget{ font-size:12px; color:var(--gris); }
.fd-budget b{ color:var(--encre); }

/* Marges mobiles : de l'air entre les entrées, des tuiles pleine largeur */
@media (max-width:860px){
  body.coque .grille-docs{ grid-template-columns:1fr; gap:12px; }
  body.coque .carte{ padding:16px 15px; margin-bottom:14px; }
  body.coque .kpis{ gap:10px; }
  .kpi-grille{ gap:12px; }
  .act-ligne{ gap:10px; }
  body.coque .rangee{ gap:10px; }
  /* Les champs des formulaires portent des LARGEURS en ligne (flex:0 0 180px).
     Quand la rangée passe en colonne sur mobile, cette base flex devient une
     HAUTEUR : chaque champ occupait 130 à 180 px de vide. On neutralise la base
     (le !important est nécessaire pour battre le style en ligne). */
  body.coque .rangee > div{ flex:0 0 auto !important; width:100%; min-width:0; }
  body.coque h1{ font-size:20px; }
}

/* ── Ordre des calques du tiroir mobile ───────────────────────────────────
   Une règle héritée de l'ancien design plaçait le voile (z-index 44) AU-DESSUS
   de la barre latérale (40), décalé sous l'en-tête : le tiroir s'affichait
   grisé et le voile avalait tous les clics. Ordre définitif : contenu et barre
   du bas (≤50) < voile (60) < tiroir (70). */
@media (max-width:860px){
  /* Le tiroir latéral couvre toute la page : il doit passer devant TOUT ce
     qu'elle contient. À 60 et 70, il restait derrière les éléments de la carte
     du module Magasins (500 à 610) — le menu s'ouvrait sous l'encart des
     enseignes et sous les boutons flottants. On le porte au-dessus de la
     carte, mais sous le panneau de l'assistant (9999). */
  /* L'assistant occupe tout l'écran : la barre d'onglets, remontée à 700 pour
     passer devant l'encart de la carte, se retrouvait devant lui et masquait
     son champ de saisie. Elle s'efface le temps de la conversation — on en
     ressort par « Fermer ». */
  body.assistant-ouvert .nav-bas{ display:none !important; }

  #voileMenu{ top:0 !important; z-index:900 !important; }
  .lateral{ z-index:910 !important; }
}

/* Crayon de modification du budget, discret à côté du libellé */
.ck-crayon{
  border:1px solid var(--ligne); background:#fff; border-radius:7px;
  width:24px; height:24px; font-size:12px; cursor:pointer; margin-left:6px;
  vertical-align:middle; color:var(--gris);
}
.ck-crayon:hover{ border-color:var(--accent); color:var(--accent); }

/* ── Correctifs ciblés ────────────────────────────────────────────────── */
/* L'imprimante des fiches sous-traitants (ancre directe, sans formulaire)
   retrouve son coin de tuile — ma règle générique l'avait remise dans le flux. */
body.coque .fiche-doc > a.fd-pdf{
  position:absolute; top:10px; right:10px;
}

/* L'avatar file tout à droite sur mobile (la cloche supprimée ne pousse plus rien) */
@media (max-width:860px){
  .bh-profil{ margin-left:auto; }
}

/* Barre de progression sur la tuile d'un chantier */
.fd-jauge{
  display:flex; align-items:center; gap:8px; margin-top:9px;
}
.fd-jauge .jauge{ flex:1; width:auto; margin:0; }
.fd-jauge em{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--accent); }

/* ── Types de document : compacts et sobres ───────────────────────────── */
.choix-type{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
.choix span{ padding:9px 12px; border-radius:10px; border-width:1.5px; text-align:center; }
.choix span b{ font-size:12.5px; font-weight:700; letter-spacing:.2px; }

/* ── Micro SVG : centré dans son bouton, hérite la couleur ────────────── */
.ico-mic{ display:block; }
.dictee .btn, .ic-btn{ display:flex; align-items:center; justify-content:center; }
.btn.ecoute .ico-mic, .ic-btn.ecoute .ico-mic{ stroke:#fff; }

/* ── Barre du bas : tous les onglets à la même hauteur ────────────────────
   (« Plus » est un bouton, son ☰ texte prenait une ligne plus basse) */
.nav-bas .nb-item{ justify-content:flex-end; height:46px; }
.nav-bas .nb-item .ico{
  height:24px; display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1;
}

/* ════════════════════════════════════════════════════════════════════════════
   UNIFORMISATION — dictée, attente, aperçus, assistant façon ChatGPT
   ════════════════════════════════════════════════════════════════════════════ */

/* iOS zoome automatiquement sur tout champ dont la police fait moins de 16 px,
   et la page reste ensuite décadrée. On garantit 16 px partout sur mobile. */
@media (max-width:860px){
  input, select, textarea{ font-size:16px !important; }
}

/* ── Dictée : zone pleine largeur, micro à gauche du bouton principal ──── */
.dictee-pleine{ display:block; }
.dictee-pleine textarea{ width:100%; }
.actions.rangee-dictee{ display:flex; gap:10px; align-items:stretch; }
.actions.rangee-dictee > button[title="Dicter"]{
  flex:0 0 54px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; margin:0;
}
.actions.rangee-dictee > .btn-sombre,
.actions.rangee-dictee > .btn-primaire{ flex:1; }

/* ── Attente : bouton animé + barre de progression en haut d'écran ─────── */
button.en-attente{
  position:relative; overflow:hidden; opacity:1 !important; color:#fff;
  background:linear-gradient(110deg,#2b2b30 30%,#4f6bf0 50%,#2b2b30 70%);
  background-size:220% 100%;
  animation:balayage 1.4s linear infinite;
}
@keyframes balayage{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
#barreProgres{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:99;
  display:none; overflow:hidden; background:rgba(79,107,240,.15);
}
#barreProgres.actif{ display:block; }
#barreProgres.actif::before{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  background:var(--accent); border-radius:3px;
  animation:navette 1.1s ease-in-out infinite;
}
@keyframes navette{ from{ left:-40%; } to{ left:105%; } }

/* ── Aperçus de documents, maîtrisés ──────────────────────────────────── */
.apercu-doc.ap-ajuste{
  position:relative; overflow:hidden; padding:0; background:#eef0f4;
  border-radius:14px;
}
.ap-ajuste .ap-enveloppe{ width:max-content; }
.ap-ajuste .feuille{ margin:0 0 10px !important; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.ap-ajuste.ap-cliquable .ap-enveloppe{ cursor:zoom-in; }
.ap-zoom{
  position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column;
  gap:6px; z-index:5;
}
.ap-zoom button{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--ligne);
  background:#fff; font-size:19px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12); color:var(--encre);
}
.ap-zoom button:active{ transform:scale(.93); }

/* ── Assistant : la pilule et le plein écran ChatGPT ──────────────────── */

@media (max-width:860px){
  /* Le panneau de l'assistant occupe tout l'écran, proprement, clavier compris */
  #assistant{ position:fixed; inset:0; }
  #assistant .panneau{
    width:100%; height:100dvh; max-height:100dvh; border-radius:0;
    display:flex; flex-direction:column;
  }
  #assistant .chat{ flex:1; min-height:0; overflow-y:auto; }
  .titre-assistant{ padding-top:calc(10px + env(safe-area-inset-top)); }
}

/* Accueil : la zone de saisie montre l'exemple en entier, sans défilement */
.acc-saisie textarea{ min-height:132px !important; }
@media (max-width:860px){ .acc-saisie textarea{ min-height:150px !important; } }

/* Réponses rapides dans la conversation budget */
.chips-reponse{ display:flex; gap:8px; align-self:flex-start; flex-wrap:wrap; }
.chips-reponse button{
  border:1.5px solid var(--accent); background:#fff; color:var(--accent);
  border-radius:18px; padding:8px 18px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.chips-reponse button:active{ background:var(--accent-doux); }

/* Les anciennes réductions d'aperçu (scale fixes + marges négatives) se
   cumulaient avec la mise à l'échelle automatique : le document sortait en
   miniature collée à gauche. Dans un aperçu ajusté, seul le calcul compte. */
.ap-ajuste .feuille{ transform:none !important; margin:0 0 12px !important; }
.ap-ajuste.est-planning{ --zoom-planning:1; }

/* Chargement : un anneau qui tourne au bout du texte — visible, sans ambiguïté */
button.en-attente::after{
  content:''; display:inline-block; width:15px; height:15px; margin-left:10px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; vertical-align:-3px;
  animation:tourner .7s linear infinite;
}
@keyframes tourner{ to{ transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   PANNEAU ASSISTANT — VERSION DÉFINITIVE (mobile)
   Le panneau historique défilait d'un bloc (overflow sur l'ensemble) : à
   l'ouverture du clavier, iOS faisait glisser tout le panneau pour montrer le
   champ — la saisie flottait au milieu d'un écran blanc. Ici la structure est
   verrouillée : en-tête fixe, chat seul défilant, saisie ancrée en bas.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  #assistant{ padding:0; }
  #assistant .panneau{
    position:fixed; left:0; right:0; top:0;
    width:100% !important; max-width:none !important;
    height:100dvh; max-height:none !important;
    margin:0 !important; padding:0 !important; border-radius:0 !important;
    display:flex; flex-direction:column; overflow:hidden !important;
    background:#fff;
  }
  /* La barre de saisie ancrée au bas du panneau, toujours visible */
  #assistant .saisie-chat{ flex-shrink:0; margin-top:auto; }
  #assistant .titre-assistant{
    flex-shrink:0; margin:0;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom:1px solid var(--ligne);
  }
  #assistant .chat{
    /* La règle historique .chat limitait encore le fil à 52vh. Dans le
       panneau plein écran, la saisie restait en bas et tout l'espace entre
       les deux devenait une grande bande blanche. Le fil occupe maintenant
       réellement tout l'espace disponible, sans masquer les messages. */
    flex:1 1 0; min-height:0; max-height:none; overflow-y:auto;
    margin:0; padding:14px; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #assistant #piecesJointes{ flex-shrink:0; padding:0 12px; }
  #assistant .saisie-chat{ flex-shrink:0; }
  /* La page derrière ne bouge plus quand l'assistant est ouvert */
  body:has(#assistant.ouvert){ overflow:hidden; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BARRE DE SAISIE DE L'ASSISTANT — VERSION UNIQUE ET DÉFINITIVE
   Repensée comme la barre de l'app Claude : une pilule arrondie qui grandit
   avec le texte, le champ parfaitement centré, les actions alignées au bas.
   Une seule définition — plus aucune règle concurrente ailleurs.
   ════════════════════════════════════════════════════════════════════════════ */
.saisie-chat{
  flex-shrink:0; background:#fff; border-top:1px solid var(--ligne);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
}
.saisie-chat .pilule{
  display:flex; align-items:flex-end; gap:4px;
  background:#f4f5f7; border:1.5px solid #e6e8ee; border-radius:24px;
  padding:5px 5px 5px 6px; transition:border-color .15s, background .15s;
}
.saisie-chat .pilule:focus-within{
  background:#fff; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,107,240,.10);
}
/* Le champ : grandit avec le texte, sans jamais déborder ni couper une ligne */
.saisie-chat .pilule textarea{
  flex:1; min-width:0; border:none; background:none; resize:none;
  font-family:inherit; font-size:16px; line-height:22px; color:var(--encre);
  padding:9px 4px; margin:0; max-height:132px; overflow-y:auto;
  box-shadow:none; -webkit-appearance:none;
}
.saisie-chat .pilule textarea::placeholder{ color:#9aa0ac; }
.saisie-chat .pilule textarea:focus{ outline:none; border:none; box-shadow:none; }

/* Les trois boutons : ronds, à la même ligne de base que le texte */
.saisie-chat .pilule .ic-btn{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none;
  background:none; cursor:pointer; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  color:#6b7280; font-size:22px; line-height:1; transition:background .12s;
}
.saisie-chat .pilule #btnJoindre{ color:#6b7280; font-size:26px; font-weight:300; }
.saisie-chat .pilule #btnJoindre:hover,
.saisie-chat .pilule #btnEcoute:hover{ background:#e6e8ee; }
.saisie-chat .pilule #btnEcoute{ color:#6b7280; }
.saisie-chat .pilule #btnEcoute.ecoute{ background:#e5484d; color:#fff; animation:pulseMic 1.2s infinite; }
.saisie-chat .pilule #btnEcoute.ecoute .ico-mic{ stroke:#fff; }
/* Envoyer : le rond bleu plein */
.saisie-chat .pilule .envoyer{
  background:var(--accent); color:#fff; font-size:17px;
}
.saisie-chat .pilule .envoyer:hover{ background:#4560e0; }
.saisie-chat .pilule .envoyer:active{ transform:scale(.94); }

/* Clavier ouvert : la barre de saisie se colle au plus près (plus de marge de
   sécurité en bas, qui n'a de sens que clavier fermé). Réduit l'écart avec la
   barre d'accessoires d'iOS. */
.saisie-chat.clavier-ouvert{ padding-bottom:8px; }

/* ════════════════════════════════════════════════════════════════════════════
   CONVERSATION BUDGET — attente animée, questions une par une, espacements
   ════════════════════════════════════════════════════════════════════════════ */

/* Bulle « en train d'écrire » : trois points qui pulsent tour à tour */
.budget-chat .bulle.attente{
  display:flex; gap:5px; align-items:center; padding:14px 16px;
}
.budget-chat .bulle.attente .pt{
  width:8px; height:8px; border-radius:50%; background:#9aa0ac;
  animation:pointPulse 1.2s infinite ease-in-out;
}
.budget-chat .bulle.attente .pt:nth-child(2){ animation-delay:.18s; }
.budget-chat .bulle.attente .pt:nth-child(3){ animation-delay:.36s; }
@keyframes pointPulse{
  0%, 60%, 100%{ transform:scale(.7); opacity:.4; }
  30%{ transform:scale(1); opacity:1; }
}

/* Carte de question dans la conversation (une par une) */
.budget-chat .qa-bulle{
  align-self:flex-start; max-width:92%; background:#f5f7ff;
  border:1.5px solid #dfe3fb; border-radius:16px; padding:14px;
}
.qa-bulle .qa-num{ font-size:12px; font-weight:800; color:#4f6bf0; margin-bottom:7px; }
.qa-bulle .qa-txt{ font-size:14.5px; font-weight:600; line-height:1.4; margin-bottom:12px; }
.qa-bulle .qa-rep{ display:flex; gap:8px; flex-wrap:wrap; }
.qa-bulle .qa-rep button{
  border:1.5px solid #4f6bf0; background:#fff; color:#4f6bf0; border-radius:18px;
  padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
}
.qa-bulle .qa-rep button:active{ background:#eef2ff; }

/* Champ « Autre… » du chat de création : n'avait aucun style, le bouton
   d'envoi ressemblait à un bouton par défaut du navigateur, minuscule. */
.qa-bulle .qa-libre{ display:flex; gap:8px; margin-top:2px; }
.qa-bulle .qa-libre input{
  flex:1; height:46px; border:1.5px solid #dfe3fb; border-radius:12px;
  padding:0 14px; font-size:16px; font-family:inherit; background:#fff;
}
.qa-bulle .qa-libre input:focus{ outline:none; border-color:#4f6bf0; }

/* Réponses rapides collées à leur bulle, pas trop d'écart */
.budget-chat .chips-reponse{ margin-top:-6px; }

/* Aperçu centré : le conteneur aligne l'enveloppe au centre horizontal.
   transform-origin:top center + ce flex = document toujours centré, jamais
   collé à gauche, quel que soit le zoom. */
.apercu-doc.ap-ajuste{ display:block; }
.ap-ajuste .ap-cadre{ position:relative; overflow:hidden; }
.ap-ajuste .ap-enveloppe{ position:absolute; top:0; left:0; }

/* Boutons Export / Enregistrer du budget : même hauteur et même assise, que ce
   soit un lien <a> ou un <button>. */
.actions-budget{ display:flex; gap:9px; align-items:stretch; }
.actions-budget .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; box-sizing:border-box; line-height:1; margin:0;
}

/* ── Sections documents dans la fiche chantier ────────────────────────── */
.ch-sec-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ch-sec-tete h2{ margin:0; font-size:16px; }
.ch-doc{ display:flex; align-items:center; gap:8px; }
.ch-doc-lien{
  flex:1; display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--ligne); text-decoration:none; color:var(--encre);
}
.ch-doc:last-of-type .ch-doc-lien{ border-bottom:none; }
.ch-doc-lien .ai{
  width:36px; height:36px; border-radius:10px; font-size:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ch-doc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ch-doc-txt b{ font-size:13.5px; }
.ch-doc-txt span{ font-size:12px; color:var(--gris); }
.ch-doc-ttc{ font-size:13.5px; white-space:nowrap; }
.ch-doc form{ margin:0; }
.ch-rattacher{ display:flex; gap:8px; margin-top:12px; }
/* Hauteur PLANCHER, pas hauteur fixe : à 40 px imposés, la marge intérieure
   (11 px) plus une ligne de 16 px dépassaient d'un pixel et rognaient le bas
   des lettres — « — Choisir un devis existant — » perdait son pied. */
.ch-rattacher select{ flex:1; min-height:40px; height:auto; line-height:1.2; }

/* Groupe de boutons dans l'en-tête d'une section chantier (Rattacher + Nouveau) */
.ch-sec-actions{ display:flex; gap:8px; align-items:center; }
.ch-sec-actions .btn{ white-space:nowrap; }

/* Catalogue : en-tête de lot cliquable (replier / déplier) */
.lot-pliable .lb-bascule{
  width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:none; font-family:inherit; text-align:left;
}
.lot-pliable .lb-bascule b{ margin-left:auto; }
.lb-chevron{ font-size:12px; opacity:.7; flex-shrink:0; }

/* Liste des documents : l'icône imprimer flotte en coin haut-droit. On réserve
   sa place dans la première ligne (badges) pour qu'aucun texte ne passe dessous. */
body.coque .fiche-doc .fd-haut{ padding-right:44px; }
body.coque .fiche-doc > a.fd-pdf,
body.coque .fiche-doc > form .fd-pdf{ top:12px; right:12px; }

/* Navigation entre les questions de l'assistant */
.qa-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }

/* ════════════════════════════════════════════════════════════════════════════
   MICRO EN ÉCOUTE — signal visuel universel
   Le micro est déplacé hors de son bloc « .dictee » lors de l'uniformisation :
   le style doit donc s'appliquer au bouton lui-même, où qu'il se trouve.
   ════════════════════════════════════════════════════════════════════════════ */
button[title="Dicter"].ecoute,
.rangee-dictee .btn.ecoute{
  background:#c0392b !important; border-color:#c0392b !important; color:#fff !important;
  animation:pulseMic 1.2s infinite;
}
button[title="Dicter"].ecoute .ico-mic{ stroke:#fff !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ASSISTANT ZS BAT — INTERFACE CONVERSATIONNELLE PREMIUM
   Cette couche finale est volontairement isolée sous #assistant : elle
   modernise la conversation sans modifier les cartes ni formulaires métier.
   ════════════════════════════════════════════════════════════════════════════ */
#assistant{
  --as-bleu:#4f6bf0;
  --as-bleu-fonce:#3854db;
  --as-bleu-doux:#edf1ff;
  --as-peche:#fff6ef;
  --as-peche-soutenu:#fbe9dc;
  --as-texte:#202127;
  --as-secondaire:#777b88;
  --as-ligne:rgba(42,45,58,.10);
  background:rgba(25,27,35,.42);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
#assistant .panneau{
  width:min(780px,calc(100vw - 36px)); max-width:780px;
  height:min(900px,90dvh); max-height:90dvh; padding:0;
  border:1px solid rgba(255,255,255,.72); border-radius:24px;
  overflow:hidden; background:#fff;
  box-shadow:0 28px 80px rgba(25,27,35,.24),0 2px 10px rgba(25,27,35,.08);
}

/* En-tête de produit : identité forte à gauche, commandes explicites à droite. */
#assistant .titre-assistant{
  flex:0 0 auto; min-height:84px; margin:0; padding:13px 16px;
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--as-ligne);
  position:relative; z-index:3;
}
#assistant .titre-assistant .pastille{
  width:48px; height:48px; flex:0 0 48px; border-radius:50%;
  border:1px solid rgba(79,107,240,.22); background:#fff;
  box-shadow:0 4px 16px rgba(79,107,240,.12); overflow:hidden;
}
#assistant .titre-assistant .pastille img{ width:100%; height:100%; object-fit:cover; }
#assistant .assistant-marque{
  width:39px; height:46px; flex:0 0 39px; overflow:hidden;
  display:flex; align-items:center; border-radius:6px;
}
#assistant .assistant-marque img{
  display:block; width:auto; max-width:none; height:46px;
}
#assistant .assistant-identite{ flex:1 1 auto; min-width:0; }
#assistant .assistant-identite h3{
  margin:0; color:var(--as-texte); font-size:17px; line-height:1.15;
  font-weight:780; letter-spacing:-.25px; white-space:nowrap;
}
#assistant .assistant-identite .etat{
  margin-top:5px; display:flex; align-items:center; gap:5px; min-width:0;
  color:var(--as-secondaire); font-size:11.5px; line-height:1.2; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
#assistant .assistant-en-ligne{
  width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#45b97c;
  box-shadow:0 0 0 3px rgba(69,185,124,.12);
}
#assistant .assistant-separateur{ color:#b2b4bd; }
#assistant .assistant-commandes{ display:flex; gap:7px; flex:0 0 auto; }
#assistant .assistant-commande{
  width:54px; min-height:54px; padding:6px 3px; border:1px solid var(--as-ligne);
  border-radius:14px; background:#fff; color:var(--as-bleu);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font:inherit; font-size:9.5px; font-weight:700; cursor:pointer;
  box-shadow:0 3px 12px rgba(35,38,49,.04);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
#assistant .assistant-commande svg{
  width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
#assistant .assistant-commande:hover{ border-color:rgba(79,107,240,.32); background:#f9faff; }
#assistant .assistant-commande:active{ transform:scale(.95); }

/* Fil chaleureux, aéré et réellement défilable. */
#assistant .panneau > .chat{
  flex:1 1 0; min-height:0; max-height:none; margin:0; padding:22px 22px 28px;
  gap:18px; overflow-y:auto; overscroll-behavior:contain;
  background:
    radial-gradient(circle at 12% 7%,rgba(246,217,196,.34),transparent 31%),
    linear-gradient(180deg,#fff9f5 0%,var(--as-peche) 58%,#fff9f5 100%);
  scroll-padding:24px; -webkit-overflow-scrolling:touch;
}
#assistant .panneau > .chat::-webkit-scrollbar{ width:5px; }
#assistant .panneau > .chat::-webkit-scrollbar-thumb{ background:rgba(80,83,96,.2); border-radius:9px; }
#assistant .assistant-bienvenue{
  margin:auto; max-width:360px; padding:28px 24px; text-align:center;
  color:var(--as-secondaire);
}
#assistant .assistant-bienvenue-icone{
  width:48px; height:48px; margin:0 auto 13px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--as-bleu); background:#fff; font-size:24px;
  box-shadow:0 8px 28px rgba(79,107,240,.13);
}
#assistant .assistant-bienvenue h4{ color:var(--as-texte); font-size:18px; margin:0 0 5px; }
#assistant .assistant-bienvenue p{ font-size:13px; line-height:1.5; }

#assistant .assistant-message{ width:100%; display:flex; }
#assistant .assistant-message.est-nouveau,
#assistant .assistant-resultat.est-nouveau{ animation:asMessageEntre .24s ease both; }
#assistant .assistant-message-moi{ justify-content:flex-end; }
#assistant .assistant-message-ia{ align-items:flex-start; gap:9px; }
#assistant .assistant-message-avatar{
  width:34px; height:34px; flex:0 0 34px; margin-top:3px; border-radius:50%;
  overflow:hidden; background:#fff; border:1px solid rgba(79,107,240,.18);
  box-shadow:0 3px 12px rgba(79,107,240,.10);
}
#assistant .assistant-message-avatar img{ width:100%; height:100%; object-fit:cover; }
#assistant .assistant-message-corps{
  width:min(100%,610px); min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:10px;
}
#assistant .bulle{
  max-width:min(88%,560px); padding:13px 15px; border-radius:19px;
  font-size:14.5px; line-height:1.52; letter-spacing:-.05px;
}
#assistant .bulle.ia{
  align-self:flex-start; color:var(--as-texte); background:rgba(255,255,255,.94);
  border:1px solid rgba(42,45,58,.07); border-bottom-left-radius:7px;
  box-shadow:0 6px 22px rgba(40,42,52,.065);
}
#assistant .bulle.moi{
  align-self:flex-end; color:#fff;
  background:linear-gradient(145deg,#5875f8 0%,#4260eb 100%);
  border-bottom-right-radius:7px;
  box-shadow:0 8px 22px rgba(79,107,240,.22);
}
#assistant .bulle time{
  display:block; margin-top:6px; font-size:10.5px; line-height:1;
  text-align:right; opacity:.65; font-variant-numeric:tabular-nums;
}
#assistant .bulle.ia time{ color:var(--as-secondaire); }
#assistant .bulle ul{ margin:8px 0 0 18px; }
#assistant .bulle li{ padding-left:2px; margin:3px 0; }

/* États et confirmations : l'IA donne l'impression d'agir, sans faux succès. */
#assistant .assistant-etape{
  align-self:center; max-width:90%; display:flex; align-items:center; gap:7px;
  padding:7px 12px; border:1px solid rgba(79,107,240,.13); border-radius:999px;
  color:#6571a6; background:rgba(255,255,255,.66); font-size:11.5px;
  font-style:italic; backdrop-filter:blur(8px);
}
#assistant .assistant-etape i{
  width:7px; height:7px; border-radius:50%; background:var(--as-bleu);
  box-shadow:0 0 0 4px rgba(79,107,240,.10); animation:asPulse 1.4s ease infinite;
}
#assistant .assistant-resultat{
  align-self:flex-start; width:min(100%,560px); margin-left:43px;
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  background:rgba(255,255,255,.94); border:1px solid rgba(69,185,124,.2);
  border-radius:16px; box-shadow:0 5px 18px rgba(40,42,52,.05);
}
#assistant .assistant-resultat > span{
  width:32px; height:32px; flex:0 0 32px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; color:var(--as-bleu);
  border:1.5px solid var(--as-bleu); font-size:17px; font-weight:750;
}
#assistant .assistant-resultat > div{ flex:1; min-width:0; }
#assistant .assistant-resultat b{ display:block; color:var(--as-texte); font-size:13.5px; }
#assistant .assistant-resultat small{ display:block; color:var(--as-secondaire); font-size:11px; margin-top:2px; }
#assistant .assistant-resultat time{ color:#9a9daa; font-size:10.5px; }
#assistant .assistant-resultat.est-erreur{ border-color:rgba(192,57,43,.18); }
#assistant .assistant-resultat.est-erreur > span{ color:#c0392b; border-color:#c0392b; }
#assistant .assistant-message-etat .bulle.err{
  display:flex; flex-direction:column; gap:3px; color:#a43429;
  background:#fff1ef; border:1px solid #f4d6d1; box-shadow:none;
}
#assistant .assistant-message-etat .bulle.err b{ font-size:12px; }
#assistant .assistant-message-etat .bulle.err span{ font-size:13px; }

/* Carte métier : informations structurées et actions à portée de pouce. */
#assistant .assistant-carte-metier{
  width:100%; overflow:hidden; color:var(--as-texte); background:rgba(255,255,255,.97);
  border:1px solid rgba(42,45,58,.09); border-radius:20px;
  box-shadow:0 12px 36px rgba(46,48,58,.09);
}
#assistant .assistant-carte-tete{
  min-height:76px; padding:14px; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid var(--as-ligne);
}
#assistant .assistant-carte-avatar{
  width:44px; height:44px; flex:0 0 44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--as-bleu); background:var(--as-bleu-doux);
  font-size:15px; font-weight:800; letter-spacing:.4px;
}
#assistant .assistant-carte-tete > div{ flex:1; min-width:0; }
#assistant .assistant-carte-tete h4{
  margin:0; overflow:hidden; text-overflow:ellipsis; color:var(--as-texte);
  font-size:15px; line-height:1.25; font-weight:800;
}
#assistant .assistant-carte-tete p{
  margin:3px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--as-bleu); font-size:11px; font-weight:700;
}
#assistant .assistant-carte-statut{
  align-self:flex-start; display:flex; align-items:center; gap:5px; flex:0 0 auto;
  padding:5px 8px; border-radius:999px; color:#318b61; background:#eaf8f1;
  font-size:9.5px; font-weight:750; white-space:nowrap;
}
#assistant .assistant-carte-statut i{ width:6px; height:6px; border-radius:50%; background:#45b97c; }
#assistant .assistant-carte-champs{ padding:0 14px; }
#assistant .assistant-carte-champ{
  min-height:65px; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid var(--as-ligne);
}
#assistant .assistant-carte-champ:last-child{ border-bottom:0; }
#assistant .assistant-champ-icone{
  width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:var(--as-bleu); background:#f3f5ff;
}
#assistant .assistant-champ-icone svg,
#assistant .assistant-carte-champ > button svg{
  width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
#assistant .assistant-carte-champ > div{ flex:1; min-width:0; }
#assistant .assistant-carte-champ > div span{
  display:block; margin-bottom:2px; color:#9295a1; font-size:9.5px;
  line-height:1.2; font-weight:750; letter-spacing:.35px; text-transform:uppercase;
}
#assistant .assistant-carte-champ > div b{
  display:block; color:var(--as-texte); font-size:13px; line-height:1.35;
  font-weight:720; overflow-wrap:anywhere;
}
#assistant .assistant-carte-champ > button{
  width:44px; height:44px; flex:0 0 44px; padding:0; border:1px solid var(--as-ligne);
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:#777d8c; background:#fff; cursor:pointer;
}
#assistant .assistant-carte-champ > button:active{ transform:scale(.94); }
#assistant .assistant-carte-actions{
  display:flex; gap:6px; padding:9px; overflow-x:auto;
  border-top:1px solid var(--as-ligne); scrollbar-width:none;
}
#assistant .assistant-carte-actions::-webkit-scrollbar{ display:none; }
#assistant .assistant-carte-actions button{
  min-height:44px; flex:1 0 auto; padding:8px 10px; border:1px solid var(--as-ligne);
  border-radius:11px; background:#fff; color:#30333b; white-space:nowrap;
  font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
}
#assistant .assistant-carte-actions button span{ margin-right:4px; color:var(--as-bleu); font-size:14px; }
#assistant .assistant-carte-actions button:hover{ background:#f8f9ff; border-color:rgba(79,107,240,.25); }

/* Produits : mêmes codes visuels que les autres cartes métier. */
#assistant .produits{ width:100%; margin:0; gap:8px; }
#assistant .prod{ border-radius:16px; border-color:var(--as-ligne); box-shadow:0 6px 20px rgba(40,42,52,.05); }

/* Raccourcis horizontaux et saisie flottante façon application native. */
#assistant .assistant-raccourcis{
  flex:0 0 auto; display:flex; gap:7px; overflow-x:auto; padding:9px 14px 8px;
  background:var(--as-peche); scrollbar-width:none;
}
#assistant .assistant-raccourcis::-webkit-scrollbar{ display:none; }
#assistant .assistant-raccourcis button{
  min-height:44px; flex:0 0 auto; padding:8px 11px; border:1px solid rgba(79,107,240,.11);
  border-radius:12px; display:flex; align-items:center; gap:7px;
  color:#333641; background:rgba(255,255,255,.88); white-space:nowrap;
  font:inherit; font-size:11px; font-weight:700; cursor:pointer;
  box-shadow:0 3px 12px rgba(45,47,57,.04);
}
#assistant .assistant-raccourcis svg{
  width:17px; height:17px; fill:none; stroke:var(--as-bleu); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
#assistant #piecesJointes{
  margin:10px 0 0; padding:4px 14px 5px;
  background:var(--as-peche);
}
#assistant #piecesJointes .piece{
  min-height:48px; max-width:min(260px,100%); padding:7px 10px;
  border-radius:12px; background:rgba(255,255,255,.72);
}
#assistant #piecesJointes .piece .nom{ line-height:1.35; }
#assistant .saisie-chat{
  flex:0 0 auto; margin:0; padding:7px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:0; background:var(--as-peche);
}
#assistant .saisie-chat .pilule{
  min-height:56px; padding:7px; gap:3px; align-items:flex-end;
  background:rgba(255,255,255,.96); border:1px solid rgba(42,45,58,.10);
  border-radius:21px; box-shadow:0 10px 30px rgba(39,41,50,.10);
}
#assistant .saisie-chat .pilule:focus-within{
  border-color:rgba(79,107,240,.5); box-shadow:0 10px 30px rgba(39,41,50,.09),0 0 0 3px rgba(79,107,240,.09);
}
#assistant .saisie-chat .pilule textarea{
  padding:9px 6px; font-size:16px; line-height:22px;
}
#assistant .saisie-chat .pilule .ic-btn{ width:44px; height:44px; }
#assistant .saisie-chat .pilule .envoyer{
  color:#fff; background:linear-gradient(145deg,#5875f8,#3f5fea);
  box-shadow:0 5px 15px rgba(79,107,240,.28);
}
#assistant .saisie-chat .pilule .envoyer svg{
  width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
#assistant .saisie-chat .pilule .envoyer:disabled{ opacity:.45; box-shadow:none; }

/* Attente premium, compacte : activité réelle et durée toujours visibles. */
#assistant .chat .reflexion{
  width:min(100%,560px); margin-left:43px; padding:12px 14px;
  border:1px solid rgba(79,107,240,.12); border-radius:16px;
  color:#6d7390; background:rgba(255,255,255,.82);
  box-shadow:0 6px 20px rgba(40,42,52,.04);
}
#assistant .chat .reflexion .jauge{ background:rgba(79,107,240,.10); }
#assistant .chat .reflexion .jauge i{ background:linear-gradient(90deg,var(--as-bleu),#8ba0ff); }

#assistant button:focus-visible,
#assistant textarea:focus-visible,
#assistant a:focus-visible{ outline:3px solid rgba(79,107,240,.28); outline-offset:2px; }

@keyframes asMessageEntre{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes asPulse{ 50%{ transform:scale(.72); opacity:.55; } }

@media(max-width:860px){
  #assistant{ background:#fff; backdrop-filter:none; }
  #assistant .panneau{
    position:fixed; inset:0; width:100% !important; max-width:none !important;
    height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none;
  }
  #assistant .titre-assistant{
    min-height:82px; padding:calc(9px + env(safe-area-inset-top)) 12px 9px;
  }
  #assistant .titre-assistant .pastille{ width:44px; height:44px; flex-basis:44px; }
  #assistant .assistant-marque{ width:34px; height:42px; flex-basis:34px; }
  #assistant .assistant-marque img{ height:42px; }
  #assistant .assistant-identite h3{ font-size:15px; }
  #assistant .assistant-identite .etat{ margin-top:4px; font-size:10px; }
  #assistant .assistant-commandes{ gap:5px; }
  #assistant .assistant-commande{ width:46px; min-height:48px; border-radius:12px; font-size:8.5px; }
  #assistant .assistant-commande svg{ width:19px; height:19px; }
  #assistant .panneau > .chat{
    flex:1 1 0; min-height:0; max-height:none; margin:0;
    padding:17px 14px 22px; gap:15px;
  }
  #assistant .assistant-message-ia{ gap:7px; }
  #assistant .assistant-message-avatar{ width:31px; height:31px; flex-basis:31px; }
  #assistant .assistant-message-corps{ width:calc(100% - 38px); }
  #assistant .bulle{ max-width:91%; padding:12px 14px; font-size:14px; }
  #assistant .assistant-carte-metier{ border-radius:18px; }
  #assistant .assistant-resultat,
  #assistant .chat .reflexion{ margin-left:38px; width:calc(100% - 38px); }
  #assistant .assistant-raccourcis{ padding-left:12px; padding-right:12px; }
  #assistant .saisie-chat{ padding-left:12px; padding-right:12px; }
  #assistant #piecesJointes{ padding-left:12px; padding-right:12px; }
  #assistant .saisie-chat .pilule{ min-height:74px; padding:8px; }
  #assistant .saisie-chat .pilule textarea{
    min-height:58px; height:58px; padding:7px 6px;
  }
  #assistant .saisie-chat.clavier-ouvert{ padding-bottom:7px; }
}

@media(max-width:370px){
  #assistant .assistant-marque{ display:none; }
  #assistant .assistant-identite .assistant-separateur,
  #assistant .assistant-identite .assistant-separateur + span{ display:none; }
  #assistant .assistant-carte-statut{ display:none; }
  #assistant .saisie-chat .pilule{ min-height:96px; }
  #assistant .saisie-chat .pilule textarea{ min-height:80px; height:80px; }
}

@media(prefers-reduced-motion:reduce){
  #assistant .assistant-message,
  #assistant .assistant-resultat{ animation:none; }
  #assistant .assistant-etape i{ animation:none; }
  #assistant .assistant-commande{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ENCART « PRÉCISIONS DE L'ASSISTANT » (budget)
   Ces styles vivaient dans une seule page ; ils sont ici pour servir partout
   où l'on répond aux questions — aujourd'hui la page « Modifier ».
   ════════════════════════════════════════════════════════════════════════════ */
.questions-asst{
  margin:14px 0 18px; border:1.5px solid #dfe3fb; background:#f5f7ff;
  border-radius:16px; padding:16px;
}
.qa-tete{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.qa-pastille{
  width:34px; height:34px; border-radius:50%; background:#4f6bf0; color:#fff;
  font-size:19px; font-weight:800; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.qa-tete b{ display:block; font-size:14px; }
.qa-compteur{ font-size:12px; color:#6b7280; font-weight:700; }
.qa-question{ font-size:15.5px; line-height:1.4; margin-bottom:14px; font-weight:600; }
.qa-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.qa-chips button{
  border:1.5px solid #4f6bf0; background:#fff; color:#4f6bf0; border-radius:18px;
  padding:8px 18px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
}
.qa-chips button:active{ background:#eef2ff; }
.qa-ligne{ display:flex; gap:8px; }
.qa-ligne input{
  flex:1; height:46px; border:1.5px solid #dfe3fb; border-radius:12px;
  padding:0 14px; font-size:16px; font-family:inherit; background:#fff;
}
.qa-ligne input:focus{ outline:none; border-color:#4f6bf0; }
/* Bouton « Répondre » : avant, une simple flèche ➤ dans un carré 46×46,
   trop discrète pour qu'on comprenne au premier coup d'œil qu'il faut
   cliquer là pour valider sa réponse. Un libellé + une couleur franche. */
.qa-ligne button,
.qa-bulle .qa-libre button{
  display:flex; align-items:center; gap:7px; justify-content:center;
  height:46px; min-width:46px; padding:0 18px; border-radius:12px; border:none;
  background:#4f6bf0; color:#fff; font-size:15px; font-weight:800;
  font-family:inherit; cursor:pointer; flex-shrink:0; white-space:nowrap;
  box-shadow:0 3px 10px rgba(79,107,240,.35);
}
.qa-ligne button:active,
.qa-bulle .qa-libre button:active{ background:#3a53c9; box-shadow:none; }
.qa-envoyer-texte{ font-size:15px; }
@media (max-width:480px){
  /* Sur très petit écran, le texte cède la place mais le bouton reste large
     et coloré : jamais réduit à la seule flèche minuscule d'avant. */
  .qa-ligne{ flex-wrap:wrap; }
  .qa-ligne button,
  .qa-bulle .qa-libre button{ flex:1 1 100%; }
}
.qa-passer{
  border:none; background:none; color:#8a8f9c; font-size:13px;
  cursor:pointer; font-family:inherit; text-decoration:underline; padding:4px 0;
}
#qaEtat{ font-size:13px; color:#8a8f9c; margin-top:8px; min-height:18px; }
#qaEtat.actif{ color:#4f6bf0; font-weight:700; }

/* Rappel sur la page de consultation : il reste des précisions à donner */
.qa-rappel{
  display:flex; align-items:center; gap:12px; margin:14px 0 18px;
  border:1.5px solid #dfe3fb; background:#f5f7ff; border-radius:16px; padding:14px 16px;
}
.qa-rappel b{ display:block; font-size:14px; }
.qa-rappel span:last-of-type{ font-size:12.5px; color:#6b7280; }
.qa-rappel > div{ flex:1; min-width:0; }

/* ── Remboursements et avoirs (suivi de dépenses) ─────────────────────────
   Distingués visuellement des achats : c'est de l'argent qui revient. */
.carte-remb{ border:1.5px solid #cfe8d8; background:#f4fbf6; }
.carte-remb .ch-sec-tete h2{ font-size:15px; }
.remb-total{ font-size:15px; color:#1a7f47; }
.remb-montant{ color:#1a7f47; font-weight:700; }

/* Nombre de lignes affiché sur un lot replié (suivi de dépenses) */
.lb-compte{
  font-size:11.5px; font-weight:700; opacity:.75;
  border:1px solid currentColor; border-radius:20px; padding:1px 8px;
  margin-left:auto; margin-right:10px;
}
.lot-pliable .lb-bascule .lb-compte + b{ margin-left:0; }

/* Mention « TTC » discrète à côté des totaux du suivi de dépenses */
.lb-ttc{ font-size:10px; font-weight:700; opacity:.65; letter-spacing:.3px; }

/* Dépense issue d'une facture : la ligne ouvre la pièce jointe d'origine.
   Le lien doit se comporter exactement comme le bloc qu'il remplace. */
a.ab-lien{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
.ab-lien:hover b{ color:var(--accent); }
.ab-piece{ font-size:11px; opacity:.55; margin-left:3px; }

/* ════════════════════════════════════════════════════════════════════════════
   ESPACE BOOK
   ════════════════════════════════════════════════════════════════════════════ */
.book-publier{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.book-publier > div:first-child{ flex:1; min-width:180px; }
.book-publier-actions{ display:flex; gap:8px; align-items:center; }

/* Une réalisation dans la liste */
.book-ligne{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--ligne);
}
.book-ligne:last-of-type{ border-bottom:none; }
.book-masque{ opacity:.55; }
.book-lien{
  flex:1; min-width:0; display:flex; flex-direction:column;
  text-decoration:none; color:var(--encre);
}
.book-lien b{ font-size:13.5px; }
.book-lien span{ font-size:12px; color:var(--gris); }
.book-lien:hover b{ color:var(--accent); }
.book-ligne form{ margin:0; }

/* Les flèches de réordonnancement */
.book-ordre{ display:flex; flex-direction:column; gap:2px; }
.book-fleche{
  width:26px; height:20px; border:1px solid var(--ligne); background:#fff;
  border-radius:6px; cursor:pointer; font-size:9px; line-height:1;
  color:var(--encre); padding:0;
}
.book-fleche:disabled{ opacity:.3; cursor:default; }
.book-fleche:not(:disabled):hover{ border-color:var(--accent); color:var(--accent); }

/* Rédaction assistée de la description */
.book-ia{ display:flex; gap:8px; margin-top:8px; }
.book-ia input{ flex:1; }
.book-etat-ia{ font-size:13px; color:var(--gris); margin-top:6px; min-height:18px; }

/* Champs de dépôt des photos */
.book-photos-champs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px; margin-top:16px;
}
.book-photos-champs small{ display:block; font-size:11.5px; color:var(--gris); margin-top:4px; }

/* Vignettes des photos déjà déposées */
.book-vignettes{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px;
}
.book-vignette{ position:relative; }
.book-vignette img{
  width:100%; height:104px; object-fit:cover;
  border-radius:10px; border:1px solid var(--ligne); display:block;
}
.book-vignette input{ margin-top:6px; font-size:12px; height:34px; }
.book-vignette-suppr{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  border-radius:8px; border:none; background:rgba(0,0,0,.62); color:#fff;
  cursor:pointer; font-size:12px; line-height:1;
}
.book-vignette-suppr:hover{ background:var(--rouge, #c0392b); }

/* Case à cocher « visible dans le book » */
.book-bascule{
  display:flex; align-items:center; gap:8px; height:46px;
  font-size:14px; font-weight:400; cursor:pointer;
}
.book-bascule input{ width:auto; height:auto; margin:0; }

/* ════════════════════════════════════════════════════════════════════════════
   MARGE DU CHANTIER
   Tout en TTC : ce qui rentre moins ce qui sort.
   ════════════════════════════════════════════════════════════════════════════ */
.carte-marge{ border:1.5px solid #cfe8d8; background:#f4fbf6; }
.carte-marge.marge-alerte{ border-color:#f0cfcf; background:#fdf5f5; }

.marge-tete{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.marge-val{ font-size:27px; font-weight:800; letter-spacing:-.5px; color:#1a7f47; }
.marge-alerte .marge-val{ color:#c0392b; }

.marge-taux{
  font-size:15px; font-weight:800; color:#1a7f47;
  background:#e3f4ea; border-radius:20px; padding:5px 13px; white-space:nowrap;
}
.marge-taux.negatif{ color:#c0392b; background:#fbe6e6; }

.marge-detail{
  display:flex; gap:24px; margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(0,0,0,.07);
}
.marge-detail > div{ display:flex; flex-direction:column; gap:2px; }
.marge-detail span{ font-size:11.5px; color:var(--gris); text-transform:uppercase; letter-spacing:.4px; }
.marge-detail b{ font-size:15px; }

.marge-note{ font-size:12.5px; color:var(--gris); margin-top:10px; line-height:1.45; }
.marge-note-alerte{ color:#c0392b; font-weight:600; }

/* Bouton d'acceptation : le vert signale l'issue favorable d'un devis */
.btn-vert{ background:#1a7f47; border-color:#1a7f47; color:#fff; }
.btn-vert:hover{ background:#166b3c; border-color:#166b3c; }

/* Case « rester connecté » sur la page de connexion */
.cnx-memo{
  display:flex; align-items:center; gap:9px; margin:2px 0 16px;
  font-size:13.5px; color:var(--gris); font-weight:400; line-height:1.4;
}

/* ── Allègement des boutons d'action sur mobile ─────────────────────────────
   Sur petit écran, les boutons de la barre d'édition d'un document n'affichent
   que leur symbole : le texte (.btn-txt) est masqué pour gagner de la place et
   éviter les retours à la ligne. Les boutons « Facture » et « Facture d'acompte »
   conservent leur libellé complet (ils ne portent pas de .btn-txt). */
@media (max-width: 640px){
  .btn .btn-txt{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  /* Quand il ne reste que le symbole, on l'agrandit pour qu'il reste lisible
     (le petit crayon « ✎ » était minuscule) et on rend le bouton bien carré. */
  .btn:has(.btn-txt){ font-size:20px; line-height:1; padding-left:14px; padding-right:14px; min-width:48px; }
}

/* Bouton « supprimer » d'une fiche document (liste) : en haut à droite, discret,
   rouge au survol. Le bouton PDF reste en bas à droite. */
.fd-suppr-form{ position:absolute; right:12px; top:12px; margin:0; }
.fd-suppr{ position:static; font-size:14px; cursor:pointer; }
.fd-suppr:hover{ border-color:var(--rouge, #dc2626); background:#fef2f2; }
/* En mode application (mobile), le bouton PDF est en haut à droite : on place
   le bouton « supprimer » juste à sa gauche pour qu'ils ne se chevauchent pas,
   et on réserve la place des deux dans la première ligne (badges). */
body.coque .fiche-doc > form.fd-suppr-form{ top:12px; right:54px; left:auto; bottom:auto; }
body.coque .fiche-doc > form.fd-suppr-form .fd-suppr{
  position:static; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--ligne); background:#fff;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
body.coque .fiche-doc .fd-haut{ padding-right:92px; }

/* ── Responsive : cartes en 1 colonne sur téléphone étroit ─────────────────
   Sous ~430 px, deux colonnes de 170 px se tassent et deviennent illisibles.
   On empile alors les cartes (KPIs, blocs d'info client) sur une seule colonne. */
@media (max-width: 430px){
  .kpis,
  body.coque .kpis,
  .kpi-grille,
  .grille2,
  .client-infos{
    grid-template-columns:1fr !important;
    display:grid;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FICHE CLIENT — synthèse compacte, inspirée des fiches chantier
   Les classes sont dédiées à cet écran pour ne modifier aucune autre page.
   ════════════════════════════════════════════════════════════════════════════ */
.client-page{ width:100%; }

.client-entete{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; margin-bottom:18px;
}
.client-identite{ display:flex; align-items:center; gap:13px; min-width:0; }
.client-identite > div{ min-width:0; }
.client-identite h1{
  margin:0; overflow-wrap:anywhere;
}
.client-sur-titre{
  color:var(--accent); font-size:10.5px; font-weight:800;
  letter-spacing:1.05px; text-transform:uppercase; margin-bottom:1px;
}
.client-identite-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--gris);
  font-size:12.5px; margin-top:2px;
}
.client-identite-meta span{ position:relative; }
.client-identite-meta span + span::before{
  content:'•'; position:absolute; left:-9px; color:#c8cad2;
}
.client-actions{ display:flex; align-items:center; gap:9px; flex-shrink:0; }

body.coque .client-edition{
  margin:0 0 16px; border-color:#dce2ff;
  box-shadow:0 12px 34px rgba(79,107,240,.08);
}
.client-edition-tete{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; padding-bottom:15px; margin-bottom:17px;
  border-bottom:1px solid var(--ligne);
}
.client-edition-tete h2{ margin:0; font-size:17px; }
.client-edition-fermer{
  width:34px; height:34px; border:1px solid var(--ligne); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--gris); cursor:pointer; font-size:14px;
}
.client-edition-fermer:hover{ color:var(--encre); border-color:#c9cbd4; }
.client-edition-grille{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.client-champ{ min-width:0; }
.client-champ-large, .client-champ-adresse{ grid-column:span 2; }
.client-edition .client-champ label{ margin:0 0 5px; }
.client-edition .client-champ input,
.client-edition .client-champ select{ height:44px; }
.client-edition-actions{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:18px;
}

.client-apercu{
  display:grid; grid-template-columns:minmax(300px,.92fr) minmax(0,1.65fr);
  gap:16px; align-items:stretch; margin-bottom:20px;
}
body.coque .client-coordonnees{
  margin:0; display:flex; flex-direction:column; min-width:0;
}
.client-profil-tete{
  display:grid; grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding-bottom:16px;
  border-bottom:1px solid var(--ligne);
}
.client-avatar{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-doux); color:var(--accent);
  font-size:18px; font-weight:850;
}
.client-profil-tete > div{ min-width:0; }
.client-profil-tete b{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:15px;
}
.client-profil-label{
  display:block; color:var(--gris); font-size:10.5px; font-weight:750;
  text-transform:uppercase; letter-spacing:.65px; margin-bottom:1px;
}
.client-type{
  padding:5px 9px; border-radius:999px; background:#f3f4f7;
  color:var(--doux); font-size:10.5px; font-weight:750; white-space:nowrap;
}

body.coque .client-page .client-infos{
  display:grid; grid-template-columns:1fr 1fr !important;
  gap:14px 16px; margin-top:16px;
}
.client-info{
  display:flex; align-items:flex-start; gap:9px; min-width:0;
}
.client-info-adresse{ grid-column:1 / -1; }
.client-info-icone{
  width:29px; height:29px; border-radius:9px; flex:0 0 29px;
  display:flex; align-items:center; justify-content:center;
  background:#f4f5f8; color:var(--accent); font-size:13px; font-weight:800;
}
.client-info > div{ min-width:0; }
.client-info div > span{
  display:block; color:var(--gris); font-size:10px; font-weight:800;
  letter-spacing:.65px; text-transform:uppercase; margin-bottom:2px;
}
.client-info b, .client-info a{
  display:block; color:var(--encre); font-size:12.5px; font-weight:650;
  line-height:1.35; overflow-wrap:anywhere; text-decoration:none;
}
.client-info a{ color:var(--accent); }
.client-info a:hover{ text-decoration:underline; }
.client-info-siret{ grid-column:1 / -1; }
.client-info-tva{ grid-column:1 / -1; }
.client-info-tva .client-info-icone{ font-size:9px; letter-spacing:-.2px; }

.client-kpis{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; min-width:0;
}
.client-kpi{
  min-width:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:18px 18px 16px;
}
.client-kpi-tete{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; color:var(--gris); font-size:12.5px; font-weight:650;
}
.client-kpi-tete i{
  width:34px; height:34px; border-radius:10px; font-style:normal;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:850; flex-shrink:0;
}
.client-kpi-tete i.bleu{ background:var(--accent-doux); color:var(--accent); }
.client-kpi-tete i.vert{ background:var(--vert-doux); color:var(--vert); }
.client-kpi-tete i.violet{ background:var(--violet-doux); color:var(--violet); }
.client-kpi-tete i.rouge{ background:#feeeee; color:var(--rouge); }
.client-kpi > b{
  display:block; margin:18px 0 4px; font-size:clamp(19px,2vw,26px);
  letter-spacing:-.65px; line-height:1.08; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.client-kpi small{ color:var(--gris); font-size:11.5px; line-height:1.35; }
.client-kpi-alerte{ border-color:#f2d4d5; }
.client-kpi-alerte > b{ color:var(--rouge); }

.client-documents-titre{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:4px 2px 13px;
}
.client-documents-titre h2{ margin:0; font-size:19px; }
.client-documents-titre p{ margin:1px 0 0; color:var(--gris); font-size:12.5px; }
.client-documents-titre > span{
  background:#fff; border:1px solid var(--ligne); border-radius:999px;
  color:var(--doux); padding:5px 10px; font-size:11.5px; font-weight:750;
  white-space:nowrap;
}
.client-documents{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; align-items:start;
}
body.coque .client-doc-section{ margin:0; min-width:0; padding:18px 20px; }
.client-doc-section:last-child:nth-child(odd){ grid-column:1 / -1; }
.client-doc-section-tete{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-bottom:13px; border-bottom:1px solid var(--ligne);
}
.client-doc-section-tete > div{ display:flex; align-items:center; gap:10px; }
.client-doc-section-tete h2{ margin:0; font-size:15.5px; }
.client-doc-section-icone, .client-doc-icone{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.client-doc-section-icone{ width:34px; height:34px; border-radius:10px; font-size:15px; }
.client-doc-section-icone.bleu, .client-doc-icone.bleu{ background:var(--accent-doux); }
.client-doc-section-icone.vert, .client-doc-icone.vert{ background:var(--vert-doux); }
.client-doc-section-icone.orange, .client-doc-icone.orange{ background:var(--orange-doux); }
.client-doc-compte{
  min-width:28px; height:28px; padding:0 8px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#f3f4f7; color:var(--doux); font-size:11.5px; font-weight:800;
}
.client-doc-liste{ display:flex; flex-direction:column; }
.client-doc-ligne{
  display:grid; grid-template-columns:minmax(0,1fr) 34px;
  align-items:center; gap:8px; border-bottom:1px solid var(--ligne);
}
.client-doc-ligne-sans-action{ grid-template-columns:minmax(0,1fr); }
.client-doc-ligne:last-child{ border-bottom:0; }
.client-doc-principal{
  display:grid; grid-template-columns:40px minmax(0,1fr) auto 14px;
  align-items:center; gap:11px; min-width:0; padding:13px 0;
  color:var(--encre); text-decoration:none;
}
.client-doc-principal:hover .client-doc-texte > b{ color:var(--accent); }
.client-doc-icone{ width:40px; height:40px; border-radius:11px; font-size:16px; }
.client-doc-texte{ display:block; min-width:0; }
.client-doc-texte > b{
  display:block; font-size:13.5px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.client-doc-texte > span:not(.client-doc-meta){
  display:block; color:var(--gris); font-size:11.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.client-doc-meta{ display:flex; align-items:center; gap:7px; margin-top:5px; }
.client-doc-meta .puce{
  display:inline-flex; font-size:8.5px; line-height:1; padding:4px 7px;
  font-style:normal; text-transform:uppercase; letter-spacing:.35px;
}
.client-doc-meta time{ color:var(--gris); font-size:10.5px; }
.client-doc-montant{
  font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.client-doc-fleche{ color:#b6b9c3; font-size:21px; line-height:1; }
.client-doc-pdf{
  width:32px; height:32px; border:1px solid var(--ligne); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--doux); text-decoration:none; background:#fff; font-weight:800;
}
.client-doc-pdf:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-doux); }
.client-doc-vide{
  padding:24px 4px 8px; color:var(--gris); font-size:12.5px; text-align:center;
}
.client-chantiers-titre{ margin-top:22px; }
.client-chantiers-carte{ margin-bottom:22px; }

@media (max-width:1080px){
  .client-apercu{ grid-template-columns:1fr; }
  .client-kpi{ min-height:140px; }
}

@media (max-width:860px){
  .client-entete{ align-items:flex-start; }
  .client-actions .btn{ padding:10px 13px; }
  .client-edition-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-champ-large, .client-champ-adresse{ grid-column:1 / -1; }
  .client-documents{ grid-template-columns:1fr; }
  .client-doc-section:last-child:nth-child(odd){ grid-column:auto; }
}

@media (max-width:640px){
  .client-entete{ flex-direction:column; gap:13px; }
  .client-identite{ width:100%; }
  .client-actions{ width:100%; display:grid; grid-template-columns:1fr 1.35fr; }
  .client-actions .btn{ width:100%; padding:10px 8px; font-size:12px; }

  body.coque .client-edition{ padding:16px 15px; }
  .client-edition-grille{ grid-template-columns:1fr; gap:12px; }
  .client-champ-large, .client-champ-adresse{ grid-column:auto; }
  .client-edition-actions{ display:grid; grid-template-columns:1fr; }
  .client-edition-actions .btn{ width:100%; }

  .client-apercu{ gap:12px; margin-bottom:18px; }
  body.coque .client-coordonnees{ padding:16px 15px; }
  .client-profil-tete{ grid-template-columns:42px minmax(0,1fr) auto; gap:10px; }
  .client-avatar{ width:42px; height:42px; border-radius:12px; }
  .client-type{ padding:4px 7px; font-size:9.5px; }

  body.coque .client-page .client-infos{
    grid-template-columns:1fr 1fr !important; gap:13px 10px;
  }
  .client-info{ gap:7px; }
  .client-info-icone{ width:27px; height:27px; flex-basis:27px; }
  .client-info b, .client-info a{ font-size:11.5px; }

  .client-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .client-kpi{ min-height:118px; padding:11px 9px 10px; }
  .client-kpi-tete{ font-size:9.5px; gap:3px; }
  .client-kpi-tete i{ width:25px; height:25px; border-radius:8px; font-size:11px; }
  .client-kpi > b{
    font-size:clamp(14px,4vw,18px); margin:15px 0 3px; letter-spacing:-.4px;
  }
  .client-kpi small{ font-size:9.5px; line-height:1.25; }

  .client-documents-titre{ align-items:center; }
  .client-documents-titre h2{ font-size:17px; }
  .client-documents-titre p{ display:none; }
  body.coque .client-doc-section{ padding:15px 14px; }
  .client-doc-principal{
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:9px; padding:11px 0;
  }
  .client-doc-icone{ width:38px; height:38px; }
  .client-doc-fleche{ display:none; }
  .client-doc-montant{ font-size:11.5px; }
}

@media (max-width:380px){
  .client-info-icone{ display:none; }
  .client-kpi small{ display:none; }
  .client-kpi{ min-height:88px; }
  .client-kpi > b{ margin-top:14px; }
  .client-doc-montant{ font-size:10.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Répertoire clients premium — mobile first, août 2026
   ══════════════════════════════════════════════════════════════════════════ */
.bh-page-contexte{ display:none; }

body.page-clients-liste{ background:#fff8f3; }
body.page-clients-liste main#vue{ max-width:1140px; }
.clients-page{
  --clients-bleu:#4f6ff5;
  --clients-bleu-fonce:#3655dc;
  --clients-texte:#232329;
  --clients-gris:#7e8291;
  max-width:1080px; margin:0 auto; padding:6px 0 36px;
}
.clients-page-entete{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin:0 0 20px;
}
body.coque .clients-page-entete h1{
  margin:0; color:var(--clients-texte); font-size:30px; line-height:1.05;
  letter-spacing:-1px;
}
.clients-page-entete p{
  margin:5px 0 0; color:var(--clients-gris); font-size:14px;
}

.clients-recherche-ligne{
  display:grid; grid-template-columns:minmax(0,1fr) 58px; gap:12px;
  margin-bottom:14px;
}
.clients-recherche{
  min-width:0; height:58px; margin:0; padding:0 18px;
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.96); border:1px solid #e1e4ed;
  border-radius:16px; box-shadow:0 4px 18px rgba(42,48,66,.045);
  text-transform:none; letter-spacing:0;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.clients-recherche:focus-within{
  background:#fff; border-color:rgba(79,111,245,.65);
  box-shadow:0 0 0 4px rgba(79,111,245,.1),0 8px 24px rgba(42,48,66,.07);
}
.clients-recherche svg{
  width:21px; height:21px; flex:0 0 21px; fill:none; stroke:#8b90a0;
  stroke-width:1.8; stroke-linecap:round;
}
.clients-recherche input{
  width:100%; min-width:0; height:100%; margin:0; padding:0; border:0;
  outline:0; background:transparent; color:var(--clients-texte);
  font:500 15px/1.2 inherit; appearance:none;
}
.clients-recherche input::-webkit-search-cancel-button{ opacity:.55; }
.clients-recherche input::placeholder{ color:#a0a3ad; opacity:1; }
.clients-filtre-bouton{
  width:58px; height:58px; padding:0; border:1px solid #e1e4ed;
  border-radius:16px; background:#fff; color:var(--clients-texte); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(42,48,66,.045);
  transition:transform .14s ease,border-color .14s ease,color .14s ease,background .14s ease;
}
.clients-filtre-bouton:hover,.clients-filtre-bouton.actif{
  color:var(--clients-bleu); border-color:#bfcafb; background:#f7f8ff;
}
.clients-filtre-bouton:active{ transform:scale(.96); }
.clients-filtre-bouton svg{
  width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.clients-filtres{
  margin:-3px 0 14px; padding:14px 16px;
  background:rgba(255,255,255,.92); border:1px solid #e4e5ec; border-radius:15px;
  box-shadow:0 8px 24px rgba(42,48,66,.05);
  animation:clients-apparition .18s ease both;
}
.clients-filtres[hidden]{ display:none !important; }
.clients-filtres > div{ max-width:300px; }
.clients-filtres label{ margin:0 0 6px; }
.clients-filtres select{ min-height:44px; }

.clients-creation-cta{
  width:100%; min-height:88px; margin:0 0 28px; padding:14px 18px;
  display:grid; grid-template-columns:54px minmax(0,1fr) 44px; align-items:center; gap:16px;
  border:0; border-radius:20px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(118deg,var(--clients-bleu-fonce),#4e72f8 58%,#5d83ff);
  box-shadow:0 15px 34px rgba(61,88,220,.25);
  font-family:inherit; overflow:hidden; position:relative;
  transition:transform .16s ease,box-shadow .16s ease;
}
.clients-creation-cta::after{
  content:''; position:absolute; width:170px; height:170px; right:-70px; top:-100px;
  border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none;
}
.clients-creation-cta:hover{
  transform:translateY(-1px); box-shadow:0 18px 38px rgba(61,88,220,.3);
}
.clients-creation-cta:active{ transform:scale(.992); }
.clients-creation-plus,.clients-creation-fleche{
  display:flex; align-items:center; justify-content:center; z-index:1;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.clients-creation-plus{ width:54px; height:54px; border-radius:15px; font-size:30px; font-weight:300; }
.clients-creation-fleche{ width:44px; height:44px; border-radius:14px; font-size:31px; line-height:1; }
.clients-creation-texte{ min-width:0; display:flex; flex-direction:column; gap:2px; z-index:1; }
.clients-creation-texte b{ font-size:16px; line-height:1.25; letter-spacing:-.15px; }
.clients-creation-texte small{ color:rgba(255,255,255,.76); font-size:12.5px; font-weight:500; }

body.coque .clients-formulaire{
  margin:-11px 0 28px; padding:22px; border-radius:20px;
  border-color:#dfe3f1; box-shadow:0 14px 34px rgba(42,48,66,.08);
  animation:clients-apparition .2s ease both;
}
.clients-formulaire-tete{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-bottom:12px; border-bottom:1px solid #ececf1;
}
.clients-formulaire-tete span{
  display:block; color:var(--clients-bleu); font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:1.6px;
}
.clients-formulaire-tete h2{ margin:3px 0 0; font-size:20px; letter-spacing:-.4px; }
.clients-formulaire-tete button{
  width:38px; height:38px; border:1px solid #e4e5eb; border-radius:11px;
  background:#fff; color:#737784; cursor:pointer; font-family:inherit;
}

.clients-liste-entete{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 15px;
}
.clients-liste-entete h2{
  display:flex; align-items:center; gap:10px; margin:0;
  color:var(--clients-texte); font-size:20px; letter-spacing:-.45px;
}
.clients-liste-entete h2 svg{
  width:23px; height:23px; fill:none; stroke:#9297a7; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.clients-tri{
  display:flex; align-items:center; gap:4px; width:auto; min-height:44px;
  margin:0; padding:0 8px 0 14px; border:1px solid #e1e4ed; border-radius:13px;
  background:#fff; box-shadow:0 4px 15px rgba(42,48,66,.035);
  text-transform:none; letter-spacing:0;
}
.clients-tri span{ color:#565a68; font-size:12.5px; font-weight:700; white-space:nowrap; }
.clients-tri select{
  width:auto; min-width:70px; height:42px; padding:0 27px 0 2px; border:0;
  background-color:transparent; color:var(--clients-texte); font-size:12.5px; font-weight:800;
}

.clients-grille{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.client-liste-carte{
  min-width:0; min-height:180px; padding:18px;
  display:grid; grid-template-columns:54px minmax(0,1fr) 136px;
  grid-template-rows:auto 1fr; gap:11px 15px; position:relative;
  background:rgba(255,255,255,.97); border:1px solid #e4e5eb; border-radius:20px;
  box-shadow:0 8px 24px rgba(49,51,63,.06);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.client-liste-carte:hover{
  transform:translateY(-2px); border-color:#d7dbea;
  box-shadow:0 14px 30px rgba(49,51,63,.09);
}
.client-liste-carte[hidden]{ display:none !important; }
.client-liste-avatar{
  grid-column:1; grid-row:1 / span 2; width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:850; letter-spacing:-.5px;
}
.client-liste-avatar.bleu{ background:#eef0ff; color:#5967df; }
.client-liste-avatar.peche{ background:#fff0e8; color:#dc7542; }
.client-liste-avatar.vert{ background:#e8f6f0; color:#419172; }
.client-liste-avatar.violet{ background:#f1edff; color:#755bdb; }
.client-liste-contenu{ grid-column:2; grid-row:1 / span 2; min-width:0; }
.client-liste-identite{
  min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:2px 0 14px;
}
.client-liste-identite > a{
  min-width:0; max-width:100%; color:var(--clients-texte); text-decoration:none;
  font-size:16px; line-height:1.22; font-weight:850; letter-spacing:-.25px;
  overflow-wrap:anywhere;
}
.client-liste-identite > a:hover{ color:var(--clients-bleu); }
.client-liste-type{
  display:inline-flex; align-items:center; min-height:23px; padding:3px 9px;
  border-radius:999px; font-size:9.5px; font-weight:800; white-space:nowrap;
}
.client-liste-type.particulier{ background:#edf1ff; color:#5570e4; }
.client-liste-type.pro{ background:#e8f7ef; color:#3f966e; }
.client-liste-info{
  min-width:0; display:flex; align-items:flex-start; gap:8px; margin-top:8px;
  color:#686d7c; font-size:12px; line-height:1.35;
}
.client-liste-info svg{
  width:16px; height:16px; flex:0 0 16px; margin-top:1px;
  fill:none; stroke:#858b9f; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.client-liste-info span{ min-width:0; overflow-wrap:anywhere; }
.client-liste-plus{
  grid-column:3; grid-row:1; justify-self:end; width:34px; height:30px;
  display:flex; align-items:center; justify-content:center; color:#969bab;
  border-radius:10px; text-decoration:none; font-size:15px; font-weight:900; letter-spacing:1px;
}
.client-liste-plus:hover{ color:var(--clients-bleu); background:#f2f4ff; }
.client-liste-actions{
  grid-column:3; grid-row:2; display:flex; align-self:end; justify-content:flex-end; gap:8px;
}
.client-liste-actions form{ margin:0; }
.client-action{
  width:64px; min-height:66px; margin:0; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid #e4e5eb; border-radius:14px; background:#fff; cursor:pointer;
  color:#5c6170; text-decoration:none; font-family:inherit; font-size:9.5px;
  font-weight:750; line-height:1.1;
  transition:transform .13s ease,border-color .13s ease,background .13s ease;
}
.client-action svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.client-action.modifier{ color:#536ff0; }
.client-action.supprimer{ color:#e2575d; }
.client-action:hover{ transform:translateY(-1px); border-color:#cfd5e8; background:#fafbff; }
.client-action.supprimer:hover{ border-color:#f0c8cb; background:#fffafb; }
.clients-vide{
  padding:34px 20px; border:1px dashed #dcdfe9; border-radius:18px;
  background:rgba(255,255,255,.7); color:#858997; text-align:center; font-size:13.5px;
}
.clients-vide[hidden]{ display:none !important; }

.clients-recherche input:focus-visible,.clients-filtre-bouton:focus-visible,
.clients-creation-cta:focus-visible,.clients-tri select:focus-visible,
.client-liste-plus:focus-visible,.client-action:focus-visible,
.client-liste-identite > a:focus-visible{
  outline:3px solid rgba(79,111,245,.3); outline-offset:2px;
}

@keyframes clients-apparition{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:960px){
  .clients-grille{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  body.page-clients-liste .barre-haut{
    gap:9px; min-height:72px; padding:9px 13px;
    background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(16px);
    -webkit-backdrop-filter:saturate(140%) blur(16px);
  }
  body.page-clients-liste .bh-page-contexte{
    min-width:0; display:flex; flex-direction:column; justify-content:center;
    margin-left:2px; line-height:1.15;
  }
  .bh-page-contexte b{
    color:#232329; font-size:16px; font-weight:850; letter-spacing:-.2px;
  }
  .bh-page-contexte span{
    max-width:160px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:#858995; font-size:9.5px; font-weight:500;
  }
  body.page-clients-liste .bh-profil{ margin-left:auto; }
  body.page-clients-liste main#vue{ padding-top:17px; }
  .clients-page{ padding-top:0; }
  .clients-page-entete{ display:none; }
}

@media (max-width:640px){
  body.page-clients-liste{ background:linear-gradient(180deg,#fffaf6 0%,#fff7f1 100%); }
  body.page-clients-liste main#vue{ padding-left:16px; padding-right:16px; }
  body.page-clients-liste .bh-logo-mobile img{ max-width:82px; height:30px; object-fit:contain; }
  .clients-recherche-ligne{ grid-template-columns:minmax(0,1fr) 54px; gap:10px; margin-bottom:13px; }
  .clients-recherche,.clients-filtre-bouton{ height:54px; border-radius:15px; }
  .clients-filtre-bouton{ width:54px; }
  .clients-recherche{ padding:0 15px; gap:10px; }
  .clients-recherche input{ font-size:14px; }
  .clients-recherche input::placeholder{ font-size:12.5px; }
  .clients-filtres > div{ max-width:none; }

  .clients-creation-cta{
    min-height:84px; margin-bottom:27px; padding:13px 14px;
    grid-template-columns:51px minmax(0,1fr) 40px; gap:12px; border-radius:18px;
  }
  .clients-creation-plus{ width:51px; height:51px; border-radius:14px; }
  .clients-creation-fleche{ width:40px; height:40px; border-radius:13px; }
  .clients-creation-texte b{ font-size:15px; }
  .clients-creation-texte small{ font-size:11px; }
  body.coque .clients-formulaire{ padding:17px 15px; margin-top:-10px; }

  .clients-liste-entete{ margin-bottom:13px; }
  .clients-liste-entete h2{ gap:8px; font-size:18px; }
  .clients-liste-entete h2 svg{ width:21px; height:21px; }
  .clients-tri{ min-height:42px; padding-left:11px; }
  .clients-tri span{ font-size:11px; }
  .clients-tri select{ min-width:62px; height:40px; padding-right:24px; font-size:11.5px; }

  .clients-grille{ gap:13px; }
  .client-liste-carte{
    min-height:188px; padding:16px;
    grid-template-columns:50px minmax(0,1fr) 34px;
    grid-template-rows:auto auto; gap:10px 12px; border-radius:19px;
  }
  .client-liste-avatar{
    grid-row:1; width:50px; height:50px; border-radius:15px; font-size:16px;
  }
  .client-liste-contenu{ grid-column:2 / 4; grid-row:1; padding-right:26px; }
  .client-liste-identite{ margin:1px 0 12px; gap:6px; }
  .client-liste-identite > a{ font-size:15px; }
  .client-liste-info{ margin-top:7px; font-size:11.5px; }
  .client-liste-plus{ grid-column:3; grid-row:1; z-index:1; }
  .client-liste-actions{
    grid-column:2 / 4; grid-row:2; align-self:auto; justify-content:flex-end;
  }
  .client-action{ width:72px; min-height:56px; border-radius:13px; }
  .client-action svg{ width:19px; height:19px; }
}

@media (max-width:410px){
  body.page-clients-liste .barre-haut{ gap:6px; padding-left:9px; padding-right:10px; }
  body.page-clients-liste #btnMenu{ padding-left:6px; padding-right:6px; }
  body.page-clients-liste .bh-logo-mobile img{ max-width:72px; height:28px; }
  .bh-page-contexte span{ max-width:120px; font-size:9px; }
  .clients-creation-texte small{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce){
  .clients-page *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM ZS BAT — harmonisation de tous les modules, août 2026
   ══════════════════════════════════════════════════════════════════════════ */
.nav-svg{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.nav-svg svg{
  width:21px; height:21px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.lateral .lat-item .nav-svg{ width:22px; height:22px; }
.lateral .lat-item .nav-svg svg{ width:20px; height:20px; }
.nav-bas .nb-item .nav-svg{ width:24px; height:24px; }
.nav-bas .nb-item .nav-svg svg{ width:21px; height:21px; }

body.page-module{
  --module-blue:#4f70f5;
  --module-blue-dark:#3857dc;
  --module-ink:#222329;
  --module-muted:#7f8492;
  --module-line:#e2e5ed;
  background:linear-gradient(145deg,#fffaf6 0%,#fff7f1 52%,#fffaf7 100%);
}
body.page-module main#vue{ max-width:1180px; padding-top:28px; }
.module-page{ width:100%; max-width:1080px; margin:0 auto; padding-bottom:30px; }

/* En-tête métier commun */
.module-entete{
  min-height:88px; margin:0 0 22px; padding:4px 0;
  display:grid; grid-template-columns:62px minmax(0,1fr) auto;
  align-items:center; gap:16px;
}
.module-entete-icone{
  width:62px; height:62px; border-radius:19px;
  display:flex; align-items:center; justify-content:center;
  color:#506df0; background:#edf1ff;
  box-shadow:inset 0 0 0 1px rgba(79,107,240,.05);
}
.module-entete-icone svg{
  width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.module-entete-icone.vert{ color:#338c69; background:#e8f6ef; }
.module-entete-icone.orange{ color:#c77832; background:#fff0e4; }
.module-entete-icone.violet{ color:#7158d9; background:#f0edff; }
.module-entete-icone.peche{ color:#d77543; background:#ffede3; }
.module-entete-texte{ min-width:0; }
.module-sur-titre{
  display:block; margin-bottom:3px; color:var(--module-blue); font-size:10px;
  line-height:1.2; font-weight:850; text-transform:uppercase; letter-spacing:1.65px;
}
body.coque .module-entete h1{
  margin:0; color:var(--module-ink); font-size:29px; line-height:1.08;
  font-weight:850; letter-spacing:-.9px;
}
.module-entete p{
  margin:6px 0 0; color:var(--module-muted); font-size:13.5px; line-height:1.45;
}
.module-entete-actions{ display:flex; justify-content:flex-end; margin:0; }
.module-action-creation::before{
  content:'＋'; font-size:18px; line-height:1; font-weight:400;
}
.module-action-principale,
body.page-module .module-page .btn-sombre,
body.page-module .module-page .btn-primaire{
  min-height:48px; padding:0 20px; border:0; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(120deg,var(--module-blue-dark),#5478fa);
  color:#fff; font-weight:800; font-size:13.5px; font-family:inherit;
  box-shadow:0 10px 24px rgba(60,87,220,.22); cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.module-action-principale:hover,
body.page-module .module-page .btn-sombre:hover,
body.page-module .module-page .btn-primaire:hover{
  color:#fff; filter:saturate(1.08); transform:translateY(-1px);
  box-shadow:0 13px 28px rgba(60,87,220,.27);
}
.module-action-principale:active,
body.page-module .module-page .btn-sombre:active,
body.page-module .module-page .btn-primaire:active{ transform:scale(.985); }

/* Surfaces et formulaires */
body.page-module .carte,
body.page-module .barre-doc{
  border:1px solid rgba(221,224,234,.96); border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 28px rgba(48,51,65,.06);
}
body.page-module .module-page > .carte{ padding:23px 24px; margin-bottom:18px; }
body.page-module .module-page .carte h2{
  color:var(--module-ink); font-size:18px; line-height:1.25; letter-spacing:-.35px;
}
body.page-module .module-page .eyebrow{
  margin-bottom:5px; color:var(--module-blue); font-size:9.5px; font-weight:850;
  letter-spacing:1.55px;
}
body.page-module .module-page label{
  color:#7d8290; font-size:10.5px; font-weight:800; letter-spacing:.75px;
}
body.page-module .module-page input[type=text],
body.page-module .module-page input[type=email],
body.page-module .module-page input[type=tel],
body.page-module .module-page input[type=number],
body.page-module .module-page input[type=password],
body.page-module .module-page select,
body.page-module .module-page textarea{
  min-height:48px; padding:11px 14px; border:1px solid #dfe2ea; border-radius:13px;
  background:#fff; color:var(--module-ink); font-family:inherit;
  box-shadow:inset 0 1px 1px rgba(25,28,36,.015);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
body.page-module .module-page textarea{ min-height:108px; }
body.page-module .module-page input:focus,
body.page-module .module-page select:focus,
body.page-module .module-page textarea:focus{
  outline:none; border-color:rgba(79,112,245,.7);
  box-shadow:0 0 0 4px rgba(79,112,245,.1); background:#fff;
}
body.page-module .module-page .btn-clair,
body.page-module .module-page .btn-ghost{
  min-height:43px; border:1px solid #e0e3eb; border-radius:12px;
  background:#f8f9fc; color:#525765; font-weight:750;
}
body.page-module .module-page .btn-danger{
  min-height:43px; border:1px solid #f0cfd1; border-radius:12px;
  background:#fffafa; color:#db4d55;
}
.module-creation-card{
  position:relative; overflow:hidden; border-color:#dce2f5 !important;
}
.module-creation-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#4f70f5,#7d92fa);
}
.module-creation-card.module-accent-orange::before{ background:linear-gradient(180deg,#e69750,#f3bd8c); }
.module-creation-majeure{ background:linear-gradient(140deg,#fff,#fbfcff) !important; }

/* Filtres cohérents */
body.page-module .module-filtres{
  display:grid; grid-template-columns:repeat(4,minmax(125px,1fr)); gap:11px;
  align-items:end; margin:0 0 18px; padding:15px;
  border:1px solid var(--module-line); border-radius:18px;
  background:rgba(255,255,255,.94); box-shadow:0 7px 24px rgba(48,51,65,.045);
}
body.page-module .module-filtres > div{ min-width:0; }
body.page-module .module-filtres > .large{ grid-column:span 2; }
body.page-module .module-filtres label{ margin:0 0 6px; }
body.page-module .module-filtres select,
body.page-module .module-filtres input[type=search]{
  width:100%; height:47px; border:1px solid #dfe2ea; border-radius:13px; background-color:#fff;
}

/* Indicateurs */
body.page-module .kpi-grille{ gap:14px; margin-bottom:18px; }
body.page-module .kpi-carte,
body.page-module .kpi{
  border:1px solid #e1e4ec; border-radius:19px; background:rgba(255,255,255,.97);
  box-shadow:0 8px 24px rgba(48,51,65,.055);
}
body.page-module .kpi-carte{ min-height:138px; padding:18px 19px; }
body.page-module .kpi-carte .kc-ico{
  width:42px; height:42px; border-radius:14px; font-size:17px;
}
body.page-module .kpi-carte .kc-val{ margin-top:11px; font-size:25px; }
body.page-module .kpi{
  min-height:108px; padding:17px 18px;
}
body.page-module .kpi::after{ display:none; }
body.page-module .kpi .val{ margin-top:9px; font-size:23px; }

/* Tuiles métier partagées */
body.page-module .grille-docs{ gap:15px; margin-top:10px; }
body.page-module .fiche-doc{
  min-height:188px; padding:19px 19px 16px 22px; border:1px solid #e1e4ec;
  border-radius:20px; background:rgba(255,255,255,.98); overflow:hidden;
  box-shadow:0 8px 25px rgba(48,51,65,.06);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
body.page-module .fiche-doc::before{
  top:15px; bottom:15px; left:0; width:4px; border-radius:0 4px 4px 0;
  background:#7e8aa8;
}
body.page-module .fiche-doc.t-devis::before{ background:#5975ef; }
body.page-module .fiche-doc.t-facture::before{ background:#45a47b; }
body.page-module .fiche-doc.t-planning::before{ background:#dd8e49; }
body.page-module .fiche-doc.t-budget::before{ background:#7b62dc; }
body.page-module .fiche-doc:hover{
  transform:translateY(-2px); border-color:#d4d9e8;
  box-shadow:0 14px 32px rgba(48,51,65,.095);
}
body.page-module .fiche-doc .fd-type{
  display:inline-flex; min-height:23px; padding:4px 9px; border-radius:999px;
  align-items:center; color:#5570e5; background:#edf1ff;
  font-size:9px; letter-spacing:.8px;
}
body.page-module .fiche-doc .fd-num{
  margin-top:11px; color:var(--module-ink); font-size:17px; line-height:1.25;
}
body.page-module .fiche-doc .fd-client{ color:#555b69; font-size:12.5px; }
body.page-module .fiche-doc .fd-objet{ color:#858a98; }
body.page-module .fiche-doc .fd-bas{ border-top-color:#eceef3; }
body.page-module .fiche-doc .fd-ttc{ color:var(--module-blue); }
body.page-module .fiche-doc > a.fd-pdf,
body.page-module .fiche-doc > form .fd-pdf{
  width:44px; height:44px; border-radius:13px; border-color:#e1e4ec;
  box-shadow:0 3px 10px rgba(42,46,60,.04);
}
body.page-module .fiche-doc > form .fd-pdf:hover{ background:#fff6f6; }
body.page-module .fiche-doc .puce{
  border-radius:999px; font-size:8.5px; padding:4px 8px;
}

/* Cartes de service et sections secondaires */
.module-service-card{
  background:linear-gradient(125deg,#f8faff,#fff) !important;
  border-color:#dce3fa !important;
}
.module-service-card > div:first-child > b,
.module-service-card .releve-texte > b{ font-size:15px; }
.module-liste-card > .eyebrow{ margin-bottom:12px !important; }
.module-settings-card{ position:relative; }
.module-settings-card > h2{ padding-right:42px; }
.module-settings-card > h2::after{
  content:''; position:absolute; right:22px; top:22px; width:10px; height:10px;
  border:2px solid #cfd6eb; border-radius:50%; box-shadow:0 0 0 5px #f2f5ff;
}

/* Tableaux : sobre sur ordinateur, véritables cartes sur mobile */
body.page-module .module-table-card{ overflow:hidden; }
body.page-module .module-table-card > h2{ margin-bottom:14px; }
body.page-module .module-table-card table,
body.page-module .tb-chantiers table{ width:100%; border-collapse:separate; border-spacing:0; }
body.page-module .module-table-card th,
body.page-module .tb-chantiers th{
  padding:10px 12px; border-bottom:1px solid #e7e9ef; color:#858a98;
  font-size:9.5px; font-weight:850; letter-spacing:.8px;
}
body.page-module .module-table-card td,
body.page-module .tb-chantiers td{
  padding:14px 12px; border-bottom:1px solid #eef0f4; color:#414550;
}
body.page-module .module-table-card tbody tr:last-child td,
body.page-module .tb-chantiers tbody tr:last-child td{ border-bottom:0; }
body.page-module .module-table-card tbody tr:hover td,
body.page-module .tb-chantiers tbody tr:hover td{ background:#fbfcff; }

/* Tableau de bord et listes compactes */
body.page-module .tb-deux{ gap:17px; margin-bottom:18px; }
body.page-module .tb-deux > .carte,
body.page-module .tb-chantiers{ padding:22px; }
body.page-module .tb-tete{ margin-bottom:15px; }
body.page-module .tb-tete h2{ font-size:17px; }
body.page-module .tb-tete a{
  min-height:37px; display:inline-flex; align-items:center; border-radius:11px;
  background:#f8f9fd; border-color:#e1e4ec;
}
body.page-module .act-ligne{ min-height:66px; border-bottom-color:#edf0f4; }
body.page-module .act-ligne .ai{ border-radius:13px; }

/* Catalogue et book */
body.page-module .lot-budget{ border-color:#e1e4ec; border-radius:16px; }
body.page-module .lb-tete{
  min-height:52px; padding:12px 16px; background:#292b34; border-radius:0;
}
body.page-module .art-b{ min-height:66px; border-bottom-color:#eceef3; }
body.page-module .book-ligne{
  min-height:76px; margin-top:9px; padding:11px 12px; border:1px solid #e5e7ee;
  border-radius:15px; background:#fff; transition:border-color .14s ease,transform .14s ease;
}
body.page-module .book-ligne:hover{ border-color:#d3d9eb; transform:translateY(-1px); }

/* Fiches et écrans secondaires du même onglet */
body.page-module main#vue > h1,
body.page-module main#vue > .titre-action h1{
  margin-bottom:5px; color:var(--module-ink); font-size:27px; font-weight:850;
  letter-spacing:-.75px;
}
body.page-module main#vue > .sous-titre{
  margin-bottom:20px; color:var(--module-muted); font-size:13.5px;
}
body.page-module .barre-doc{ padding:13px 16px; top:10px; }
body.page-module .apercu-doc{ border-radius:20px; background:#edeef3; }
body.page-module .ch-retour{ border-radius:13px; box-shadow:0 4px 14px rgba(48,51,65,.04); }
body.page-module .msg-info,
body.page-module .msg-erreur{ border-radius:14px; }

/* Modal et toast alignés sur la nouvelle DA */
#modalFond{ background:rgba(29,31,39,.48); backdrop-filter:blur(10px); }
#modalBoite{ border:1px solid #e1e4ec; border-radius:22px; box-shadow:0 24px 70px rgba(30,32,40,.22); }
#modalToast{ border-radius:14px; box-shadow:0 14px 36px rgba(30,32,40,.22); }

/* Navigation ordinateur */
.lateral{
  width:244px; padding:19px 15px 16px; border-right:1px solid #e8eaf0;
  box-shadow:5px 0 22px rgba(43,46,58,.025);
}
.lat-logo{ padding-left:12px; }
.lat-section{ padding-top:17px; color:#9a9eaa; font-size:9.5px; letter-spacing:1.25px; }
.lat-item{
  min-height:43px; gap:10px; padding:9px 11px; border-radius:13px;
  color:#606572; font-size:13.5px; transition:background .14s ease,color .14s ease,transform .14s ease;
}
.lat-item:hover{ background:#f7f8fc; transform:translateX(1px); }
.lat-item.actif{ background:#edf1ff; color:#4967e7; box-shadow:inset 3px 0 0 #5372f3; }
.btn-nouveau{
  min-height:48px; border-radius:14px; background:linear-gradient(120deg,#3857dc,#5578f8);
  box-shadow:0 10px 24px rgba(60,87,220,.2);
}
.barre-haut{
  min-height:69px; border-bottom:1px solid rgba(229,231,237,.95);
  box-shadow:0 3px 18px rgba(43,46,58,.025);
}

@media (max-width:960px){
  body.page-module .module-filtres{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.page-module .module-filtres > .large,
  body.page-module .module-filtres > .serre{ grid-column:span 1; }
}

@media (max-width:860px){
  body.page-module #btnMenu{
    width:44px; height:44px; padding:0; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
  }
  body.page-module .barre-haut{
    min-height:72px; gap:8px; padding:9px 12px;
    /* Teintée du même crème que la page et que la barre d'état : au blanc, une
       couture nette apparaissait juste sous l'heure de l'iPhone. */
    background:rgba(253,246,240,.94); backdrop-filter:saturate(140%) blur(16px);
    -webkit-backdrop-filter:saturate(140%) blur(16px);
    /* La barre descend sous l'encoche : son contenu doit rester dessous. */
    padding-top:calc(9px + env(safe-area-inset-top));
  }
  body.page-module .bh-page-contexte{
    min-width:0; display:flex; flex-direction:column; justify-content:center;
    margin-left:2px; line-height:1.15;
  }
  body.page-module .bh-page-contexte b{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:#232329; font-size:16px; font-weight:850; letter-spacing:-.25px;
  }
  body.page-module .bh-page-contexte span{
    max-width:160px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:#858995; font-size:9.5px; font-weight:500;
  }
  body.page-module .bh-profil{ margin-left:auto; }
  body.page-module main#vue{ padding:17px 15px 28px; }
  .module-page{ padding-bottom:12px; }
  .module-entete{
    min-height:0; margin:0 0 15px; padding:0; display:flex; background:transparent;
  }
  .module-entete-icone,.module-entete-texte{ display:none; }
  .module-entete:not(:has(.module-entete-actions)){ display:none; }
  .module-entete-actions{ width:100%; }
  .module-entete-actions .module-action-principale{
    width:100%; min-height:70px; padding:14px 18px; border-radius:18px;
    justify-content:flex-start; font-size:15px;
    background:linear-gradient(118deg,#3859e4,#5479fa 68%,#6487ff);
    box-shadow:0 14px 30px rgba(61,88,220,.24);
  }
  .module-entete-actions .module-action-creation::before{
    content:'＋'; width:42px; height:42px; margin-right:4px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); font-size:24px; font-weight:300;
  }
  body.page-module .module-page > .carte{ padding:18px 16px; border-radius:19px; }
  body.page-module .module-creation-card{ margin-top:0; }
  body.page-module .module-page .actions .btn{ min-height:48px; border-radius:13px; }

  body.page-module .module-filtres{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; border-radius:17px;
  }
  body.page-module .module-filtres > div,
  body.page-module .module-filtres > .large,
  body.page-module .module-filtres > .serre{ grid-column:auto; }
  body.page-module .module-filtres > .large:last-of-type,
  body.page-module .module-filtres > .serre{ grid-column:1 / -1; }

  body.page-module .grille-docs{ gap:13px; }
  body.page-module .fiche-doc{ min-height:178px; border-radius:19px; }
  body.page-module .fiche-doc .fd-num{ font-size:16px; }
  body.page-module .tb-deux > .carte,
  body.page-module .tb-chantiers{ padding:17px 15px; }

  body.page-module .module-table-card table tr,
  body.page-module .tb-chantiers table tr{
    margin-bottom:12px; padding:15px; border:1px solid #e2e5ed; border-radius:17px;
    background:#fff; box-shadow:0 6px 18px rgba(48,51,65,.045);
  }
  body.page-module .module-table-card table td,
  body.page-module .tb-chantiers table td{
    padding:6px 0; border:0; color:#4d5260;
  }
  body.page-module .module-table-card table td.principal,
  body.page-module .tb-chantiers table td.principal{
    padding:1px 0 11px; margin-bottom:5px; border-bottom:1px solid #eceef3;
    color:var(--module-ink); font-size:15px;
  }
  body.page-module .module-table-card table td::before,
  body.page-module .tb-chantiers table td::before{ color:#969aa6; font-size:9.5px; }

  .nav-bas{
    /* Fond OPAQUE, sans backdrop-filter. Sur iPhone, un élément position:fixed
       doté d'un backdrop-filter est peint dans une couche composite à part ;
       au retour d'arrière-plan ou après un défilement inertiel, WebKit la
       repose à un décalage périmé et la barre se retrouve au milieu de
       l'écran. Le flou n'apportait presque rien sur un fond déjà blanc : on le
       retire, la barre redevient une simple surface peinte avec la page. */
    /* La barre est devenue une pilule flottante : plus de filet supérieur ni
       d'ombre portée vers le haut, son relief vient de son propre halo. */
    background:#fdf6f0; border-top:0;
  }
  .nav-bas .nb-item{ color:#858a98; }
  .nav-bas .nb-item.actif{ color:#4d6bf0; }
  /* L'assistant garde son médaillon bleu : c'est le repère de l'application,
     et le « + » blanc juste à côté suffit à les distinguer. */
  .nav-bas .nb-centre{
    width:56px; height:56px; background:#f6f4ee;
    box-shadow:0 0 0 5px #fff, 0 5px 16px rgba(28,31,43,.16);
  }
}

@media (max-width:640px){
  body.page-module .bh-logo-mobile img{ max-width:78px; height:29px; object-fit:contain; }
  body.page-module .kpi-grille{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  body.page-module .kpi-carte{ min-height:127px; padding:14px; }
  body.page-module .kpi-carte .kc-val{ font-size:19px; }
  body.page-module .kpi-carte .kc-lib{ font-size:10px; }
  body.page-module .kpi-carte .kc-ico{ width:35px; height:35px; border-radius:11px; }
  body.page-module .module-fournisseurs .kpis{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px;
  }
  body.page-module .module-fournisseurs .kpi{ min-height:92px; padding:12px 9px; }
  body.page-module .module-fournisseurs .kpi .lib{ font-size:8.5px; }
  body.page-module .module-fournisseurs .kpi .val{ font-size:14px; letter-spacing:-.3px; }
  body.page-module .module-page .book-publier{ align-items:flex-start; }
  body.page-module .book-publier-actions{ width:100%; }
  body.page-module .book-publier-actions > *{ flex:1; }
  body.page-module .book-publier-actions .btn{ width:100%; }
  body.page-module .art-b{ align-items:flex-start; flex-wrap:wrap; padding:13px; }
  body.page-module .art-b .ab-des{ flex:1 1 calc(100% - 105px); }
  body.page-module .art-b .ab-t{ margin-left:auto; }
}

@media (max-width:410px){
  body.page-module .barre-haut{ gap:6px; padding-left:9px; padding-right:10px; }
  body.page-module #btnMenu{ padding-left:6px; padding-right:6px; }
  body.page-module .bh-logo-mobile img{ max-width:69px; height:27px; }
  body.page-module .bh-page-contexte span{ max-width:118px; font-size:9px; }
  body.page-module .module-filtres{ grid-template-columns:1fr; }
  body.page-module .module-filtres > div,
  body.page-module .module-filtres > .large,
  body.page-module .module-filtres > .serre{ grid-column:1; }
}

@media (prefers-reduced-motion:reduce){
  .module-page *,.lat-item,.nav-bas *{ transition:none !important; animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE MOBILE — la pastille du compte cède sa place au titre.

   Sur téléphone, la lettre du prénom n'ouvrait qu'un menu déjà présent dans le
   tiroir ☰ (Réglages, Déconnexion) : elle ne servait qu'à rogner le titre, dont
   le sous-titre finissait coupé (« Planning & présences cha… »). On la retire,
   et le bloc titre prend toute la largeur restante.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .barre-haut .bh-profil { display: none; }

  /* Le titre et sa description se rangent contre le bord droit : le logo
     tient la gauche, le texte tient la droite, et l'espace libre reste au
     milieu plutôt que d'être coincé au bout. */
  .bh-page-contexte,
  body.page-module .bh-page-contexte,
  body.page-clients-liste .bh-page-contexte {
    flex: 1 1 auto; min-width: 0; margin-left: auto; margin-right: 2px;
    align-items: flex-end; text-align: right;
  }
  /* Le sous-titre n'a plus de laisse : il s'étend jusqu'au bord et ne se
     coupe que s'il dépasse vraiment. */
  body.page-module .bh-page-contexte span,
  body.page-clients-liste .bh-page-contexte span { max-width: none; }
}
@media (max-width: 410px) {
  body.page-module .bh-page-contexte span { max-width: none; font-size: 9.5px; }
}

/* ── Réglages : l'état de la file de traitement ───────────────────────────── */
.pa-taches {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
  border: 1px solid #eceef4; border-radius: 14px; background: #fafbfd;
}
.pa-taches-etat b { font-size: 19px; font-weight: 800; color: #232329; margin-right: 6px; }
.pa-taches-etat span { font-size: 13px; color: #858995; }
.pa-taches form { margin: 0; }
.pa-taches-vide { font-size: 13px; color: #858995; }

/* ── Réglages : le dépôt depuis le téléphone ──────────────────────────────── */
.pa-depot { display: grid; gap: 10px; margin-bottom: 14px; }
.pa-depot-lib {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: #858995; margin-bottom: 4px;
}
.pa-depot-val {
  display: block; padding: 10px 12px; border: 1px solid #eceef4; border-radius: 11px;
  background: #fafbfd; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; color: #232329; word-break: break-all; -webkit-user-select: all;
  user-select: all;   /* un appui long sélectionne tout d'un coup */
}
.pa-depot-jeton { letter-spacing: .5px; }
.pa-depot-aide { margin-bottom: 14px; }
.pa-depot-aide summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: #4f6bf0; padding: 6px 0;
}
.pa-depot-aide ol { margin: 8px 0 0; padding-left: 20px; }
.pa-depot-aide li { font-size: 13.5px; color: #5c616e; line-height: 1.6; margin-bottom: 6px; }
.pa-depot-aide p { font-size: 13px; color: #858995; line-height: 1.6; margin: 10px 0 0; }


/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE TRANSPARENT EN HAUT DE PAGE

   L'en-tête ne pose sa bande qu'une fois la page défilée. Tout en haut, il
   laisse voir le fond : la page respire et le logo semble posé dessus.

   C'est la PRÉSENCE de la classe qui rend transparent, pas son absence qui
   rend opaque — ainsi chaque page garde exactement son en-tête habituel dès
   qu'on défile, sans que le code ait à connaître sa couleur de fond. La classe
   est posée et retirée par ui.js.
   ══════════════════════════════════════════════════════════════════════════ */
.barre-haut{
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.barre-haut.entete-repos{
  background-color:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* Fond chaud de l'accueil et du tableau de bord (ils partagent la même classe
   de page). Les cartes blanches s'y détachent mieux qu'sur le gris d'origine. */
body.page-module-accueil{
  background:linear-gradient(178deg,#fdf7f1 0%,#fbf3ec 46%,#f9f4f0 100%);
  background-attachment:fixed;
}


/* ══════════════════════════════════════════════════════════════════════════
   CADRE « LISTES ENREGISTRÉES » — transparent

   Ce conteneur n'a pas à être une carte : il contient déjà des cartes. Un
   blanc dans du blanc annule le relief au lieu de le créer. On le rend donc
   invisible et on laisse les fiches, elles, ressortir sur le fond de page.
   Le libellé est conservé : c'est lui qui structure la lecture.
   ══════════════════════════════════════════════════════════════════════════ */
/* Trois règles posent le blanc et les marges de ce conteneur, dont
   « body.coque .carte » et « body.page-module .module-page > .carte ». Il faut
   les dépasser toutes, d'où ces sélecteurs volontairement appuyés. */
body.coque .module-page > .carte.module-liste-card,
body.page-module .module-page > .carte.module-liste-card,
body.coque .carte.module-liste-card,
body.page-module .carte.module-liste-card,
.carte.module-liste-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:4px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTES DE SUIVI DES DÉPENSES — cartes d'après la maquette 2026

   Chaque liste tient sur une carte : identité à gauche, anneau de budget à
   droite, et une barre de trois repères en pied. L'anneau passe à l'orange dès
   que le budget est dépassé, et le troisième repère devient l'alerte de
   dépassement — c'est l'information qui prime à ce moment-là.
   ══════════════════════════════════════════════════════════════════════════ */
.sv-tete{
  display:flex; align-items:center; gap:8px; margin:2px 2px 12px;
  font-size:15px; font-weight:800; color:var(--encre,#1f2430); letter-spacing:-.2px;
}
.sv-tete svg{ width:17px; height:17px; fill:#4d6bf0; stroke:none; }

.sv-listes{ display:flex; flex-direction:column; gap:13px; }

.sv-carte{
  position:relative; background:#fff; border:1px solid rgba(31,36,48,.07);
  border-radius:20px; box-shadow:0 6px 20px rgba(38,42,56,.05);
  overflow:hidden;
}
.sv-carte .sv-lien{
  display:block; padding:15px 15px 0; color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.sv-carte .sv-lien:active{ background:rgba(31,36,48,.02); }

.sv-haut{
  display:flex; align-items:flex-start; gap:12px;
  /* Place réservée au bouton supprimer, qui flotte au-dessus : sans cette
     réserve il venait rogner le pourcentage de l'anneau. */
  padding-right:46px;
}
.sv-info{ flex:1; min-width:0; }

.sv-type{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:#4d6bf0; background:#eef2ff;
  padding:4px 10px; border-radius:9px; margin-bottom:9px;
}
.sv-info h3{
  margin:0 0 5px; font-size:16.5px; font-weight:800; letter-spacing:-.3px;
  color:var(--encre,#1f2430); line-height:1.25;
}
.sv-meta{
  display:flex; align-items:center; gap:6px; margin-bottom:3px;
  font-size:12.5px; color:#7b8090; min-width:0;
}
.sv-meta svg{ width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sv-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sv-etat{
  display:inline-flex; align-items:center; gap:6px; margin-top:7px;
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:9px;
}
.sv-etat i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sv-etat.en-cours{ color:#3b6ef0; background:#eef2ff; }
.sv-etat.a-preparer{ color:#d97706; background:#fef3e2; }

/* L'anneau : un dégradé conique, sans image ni script. */
.sv-anneau{
  flex:0 0 auto; width:74px; height:74px; border-radius:50%; position:relative;
  background:conic-gradient(#3b6ef0 calc(var(--part) * 1%), #e9ecf4 0);
}
.sv-carte.depasse .sv-anneau{ background:conic-gradient(#f59e0b 100%, #f59e0b 0); }
.sv-anneau-trou{
  position:absolute; inset:8px; border-radius:50%; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.sv-anneau-trou b{ font-size:14px; font-weight:800; color:var(--encre,#1f2430); letter-spacing:-.3px; }
.sv-anneau-trou small{ font-size:9px; color:#7b8090; margin-top:1px; }

.sv-pied{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:13px; border-top:1px solid rgba(31,36,48,.07);
}
.sv-bloc{
  display:flex; align-items:center; gap:8px; padding:11px 9px;
  border-left:1px solid rgba(31,36,48,.07); min-width:0;
}
.sv-bloc:first-child{ border-left:0; padding-left:0; }
.sv-bloc svg{ width:19px; height:19px; flex:0 0 auto; fill:none; stroke:#9aa0ae;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sv-bloc-txt{ display:flex; flex-direction:column; min-width:0; }
.sv-bloc-txt small{ font-size:10.5px; color:#7b8090; line-height:1.3; }
.sv-bloc-txt b{ font-size:14px; font-weight:800; color:var(--encre,#1f2430);
  letter-spacing:-.3px; line-height:1.3; white-space:nowrap; }
.sv-bloc-txt em{ font-size:11px; font-style:normal; color:#9aa0ae; white-space:nowrap; }
.sv-bloc.alerte svg{ stroke:#f59e0b; }
.sv-bloc.alerte .sv-bloc-txt b{ color:#d97706; }
.sv-bloc.alerte .sv-bloc-txt small{ color:#d97706; }

/* Le bouton supprimer flotte au-dessus du lien, hors de son flux. */
.sv-suppr{ position:absolute; top:13px; right:13px; margin:0; }
.sv-suppr button{
  width:38px; height:38px; border-radius:12px; border:1px solid rgba(31,36,48,.09);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.sv-suppr button svg{ width:17px; height:17px; fill:none; stroke:#8b93a3;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sv-suppr button:active{ background:#fdecec; }
.sv-suppr button:active svg{ stroke:#dc2626; }

@media (max-width:400px){
  .sv-pied{ grid-template-columns:1fr 1fr; }
  .sv-bloc:nth-child(3){ grid-column:1 / -1; border-left:0; padding-left:0;
    border-top:1px solid rgba(31,36,48,.07); }
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTES DE BUDGET — cartes d'après la maquette 2026

   Un budget se lit d'abord par ce qu'il contient : combien d'articles, chez
   combien d'enseignes, pour quel chantier. D'où la rangée de puces sous le
   titre, et le total mis en avant en pied. Le liseré violet à gauche distingue
   ces cartes de celles du suivi des dépenses, qui ont la même silhouette.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-tete{
  display:flex; align-items:center; gap:8px; margin:2px 2px 12px;
  font-size:15px; font-weight:800; color:var(--encre,#1f2430); letter-spacing:-.2px;
}
.bg-tete svg{ width:17px; height:17px; fill:#7c5cf0; stroke:none; }

.bg-listes{ display:flex; flex-direction:column; gap:13px; }

.bg-carte{
  position:relative; display:flex; align-items:stretch;
  background:#fff; border:1px solid rgba(31,36,48,.07); border-radius:20px;
  box-shadow:0 6px 20px rgba(38,42,56,.05); overflow:hidden;
}
.bg-carte::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#8b5cf6,#6d4bea);
}
.bg-lien{
  flex:1; min-width:0; display:block; padding:15px 8px 14px 17px;
  color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.bg-lien:active{ background:rgba(31,36,48,.02); }

.bg-type{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:#4d6bf0; background:#eef2ff;
  padding:4px 10px; border-radius:9px; margin-bottom:9px;
}
/* Les titres viennent souvent d'un devis et tiennent une phrase entière ; on
   les borne à deux lignes pour que toutes les cartes gardent la même allure. */
.bg-carte h3{
  margin:0 0 5px; font-size:16px; font-weight:800; letter-spacing:-.3px;
  color:var(--encre,#1f2430); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.bg-fournisseurs{
  margin:0 0 10px; font-size:12.5px; color:#7b8090; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.bg-puces{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.bg-puce{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bg-puce svg{ width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bg-puce.bleu{ color:#3b6ef0; background:#eef2ff; }
.bg-puce.violet{ color:#7c3aed; background:#f3efff; }
.bg-puce.orange{ color:#d97706; background:#fef3e2; }
.bg-puce.vert{ color:#16a34a; background:#e9f8ee; }
.bg-puce.gris{ color:#6b7280; background:#f1f2f5; }

.bg-pied{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:11px; border-top:1px solid rgba(31,36,48,.07);
}
.bg-total{ display:flex; flex-direction:column; min-width:0; }
.bg-total small{
  font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:#9aa0ae;
}
.bg-total b{ font-size:19px; font-weight:800; color:#3b6ef0; letter-spacing:-.5px; }
.bg-date{ font-size:12.5px; color:#9aa0ae; white-space:nowrap; }

/* La colonne d'actions, séparée du lien pour rester cliquable. */
.bg-cote{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; gap:10px; padding:14px 13px;
  border-left:1px solid rgba(31,36,48,.06);
}
.bg-cote form{ margin:0; }
.bg-cote button{
  width:38px; height:38px; border-radius:12px; border:1px solid rgba(31,36,48,.09);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.bg-cote button svg{ width:17px; height:17px; fill:none; stroke:#e26a5a;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bg-cote button:active{ background:#fdecec; }
.bg-chevron svg{ width:19px; height:19px; fill:none; stroke:#b6bcc8;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ══════════════════════════════════════════════════════════════════════════
   PAS DE ZOOM AU FOCUS SUR IPHONE

   Safari agrandit la page dès qu'un champ de saisie dont le texte fait MOINS
   de 16 px prend le focus. La page devient alors défilable de gauche à droite
   et toute la mise en page paraît cassée — sans que rien ne soit cassé.

   On impose donc 16 px à tous les champs, mais UNIQUEMENT sur écran tactile :
   sur ordinateur les tailles voulues par chaque écran sont conservées.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{ font-size:16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HAUT DE PAGE COMMUN — recherche, filtres repliés, appel à l'action

   Le modèle vient de la page Clients, que l'artisan trouve juste : un champ
   de recherche pleine largeur, un bouton carré qui déplie les filtres, et
   en dessous le grand bouton de création. Les classes sont génériques (hp-)
   pour que Documents, Chantiers et Fournisseurs partagent EXACTEMENT la même
   mise en page — les recopier page par page les aurait fait diverger au
   premier ajustement.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-ligne{
  display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:10px;
  margin-bottom:11px;
}
.hp-ligne.deux-boutons{ grid-template-columns:minmax(0,1fr) 52px 52px; }

.hp-recherche{
  min-width:0; height:52px; margin:0; padding:0 15px;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.96); border:1px solid #e1e4ed;
  border-radius:15px; box-shadow:0 4px 18px rgba(42,48,66,.045);
  text-transform:none; letter-spacing:0;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.hp-recherche:focus-within{
  background:#fff; border-color:rgba(79,111,245,.65);
  box-shadow:0 0 0 4px rgba(79,111,245,.1), 0 8px 24px rgba(42,48,66,.07);
}
.hp-recherche > svg{
  width:19px; height:19px; flex:0 0 19px; fill:none; stroke:#8b90a0;
  stroke-width:1.8; stroke-linecap:round;
}
.hp-recherche input{
  width:100%; min-width:0; height:100%; margin:0; padding:0; border:0;
  outline:0; background:transparent; color:var(--encre,#1f2430);
  font:500 15px/1.2 inherit; appearance:none;
}
.hp-recherche input::placeholder{ color:#a0a3ad; opacity:1; }

.hp-bouton{
  width:52px; height:52px; padding:0; border:1px solid #e1e4ed;
  border-radius:15px; background:#fff; color:var(--encre,#1f2430); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(42,48,66,.045);
  transition:transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.hp-bouton:hover, .hp-bouton.actif{ color:#4f6ff5; border-color:#bfcafb; background:#f7f8ff; }
.hp-bouton:active{ transform:scale(.96); }
.hp-bouton svg{
  width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.hp-bouton.occupe{ opacity:.6; pointer-events:none; }

.hp-filtres{
  margin:-2px 0 12px; padding:13px 14px;
  background:rgba(255,255,255,.94); border:1px solid #e4e5ec; border-radius:15px;
  box-shadow:0 8px 24px rgba(42,48,66,.05);
}
.hp-filtres[hidden]{ display:none !important; }
.hp-filtres-grille{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.hp-filtres-grille .large{ grid-column:1 / -1; }
.hp-filtres label{
  display:block; margin:0 0 5px;
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:.3px !important; text-transform:none !important; color:#8b909d !important;
}
.hp-filtres select, .hp-filtres input{
  width:100%; box-sizing:border-box; min-height:44px !important;
  border-radius:12px !important;
}
.hp-filtres-pied{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:11px; padding-top:10px; border-top:1px solid rgba(31,36,48,.08);
}
.hp-actifs{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#8b909d; }
.hp-actifs b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background:#3a5fe8; color:#fff; font-size:12px; font-weight:800;
}
.hp-actifs b.vide{ background:#e4e7ef; color:#8b909d; }
.hp-reset{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 13px; border:1px solid #d7dcf0; border-radius:11px;
  background:#fff; color:#4968e5; font-size:13px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}

/* ── L'appel à l'action, sous la recherche ──────────────────────────────── */
.hp-creation{
  width:100%; min-height:74px; margin:0 0 16px; padding:12px 15px;
  display:grid; grid-template-columns:46px minmax(0,1fr) 38px; align-items:center; gap:13px;
  border:0; border-radius:18px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(118deg,#3d58dc,#4e72f8 58%,#5d83ff);
  box-shadow:0 13px 30px rgba(61,88,220,.24);
  font-family:inherit; overflow:hidden; position:relative; text-decoration:none;
}
.hp-creation::after{
  content:''; position:absolute; width:150px; height:150px; right:-60px; top:-88px;
  border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none;
}
.hp-creation:active{ transform:scale(.992); }
.hp-creation-plus, .hp-creation-fleche{
  display:flex; align-items:center; justify-content:center; z-index:1;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hp-creation-plus{ width:46px; height:46px; border-radius:13px; font-size:26px; font-weight:300; }
.hp-creation-fleche{ width:38px; height:38px; border-radius:12px; font-size:27px; line-height:1; }
.hp-creation-texte{ min-width:0; display:flex; flex-direction:column; gap:2px; z-index:1; }
.hp-creation-texte b{ font-size:15.5px; line-height:1.25; letter-spacing:-.15px; }
.hp-creation-texte small{ color:rgba(255,255,255,.76); font-size:12px; font-weight:500; }

@media (max-width:430px){
  .hp-filtres-grille{ grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Une barre de recherche porte son focus SUR LA BARRE, jamais sur le champ
   ─────────────────────────────────────────────────────────────────────────
   Le champ est posé à l'intérieur d'un libellé qui dessine déjà le cadre et
   le halo bleus au focus. Mais trois règles globales — `input:focus`,
   `input[type="search"]:focus` et `body.page-module .module-page input:focus`
   — sont plus spécifiques que `.hp-recherche input` et le rhabillaient d'un
   liseré bleu, d'un fond blanc et d'un halo de 3 à 4 px. Le tout étant
   dessiné DANS la barre, on voyait apparaître une seconde case bleue dès
   qu'on cliquait pour taper.

   On neutralise donc ces trois-là sur les champs de recherche. Le repère
   visuel de focus n'est pas perdu pour autant : `:focus-within` sur la barre
   reste bien visible, y compris au clavier.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-recherche input,
.hp-recherche input:focus,
.hp-recherche input:focus-visible,
.clients-recherche input,
.clients-recherche input:focus,
.clients-recherche input:focus-visible{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'attribut `hidden` doit vraiment masquer
   ─────────────────────────────────────────────────────────────────────────
   `[hidden] { display:none }` vient de la feuille du navigateur, et perd
   contre la moindre règle d'auteur qui pose un `display` — ce que font toutes
   les cartes de liste (`.fiche-doc{display:block}`, `.fo-facture`, `.cl-carte`,
   `.en-carte`…). Résultat : une carte écartée par la recherche instantanée
   restait affichée, pleine hauteur, alors que le DOM la disait masquée.
   On tranche ici, pour les seuls éléments que la recherche pilote.
   ══════════════════════════════════════════════════════════════════════════ */
[data-recherche][hidden],
[data-recherche-vide][hidden]{ display:none !important; }

/* ── La croix qui vide la barre de recherche ─────────────────────────────── */
.hp-vider{
  flex:0 0 auto; width:27px; height:27px; margin:0 -3px 0 4px; padding:0;
  border:0; border-radius:50%; background:#e8eaf1; color:#666c7c; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease, transform .12s ease;
}
.hp-vider.visible{ display:flex; }
.hp-vider:active{ transform:scale(.9); background:#dadde7; }
.hp-vider svg{
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round;
}
/* Une seule croix à l'écran : celle du navigateur laisse la place à la nôtre,
   qui, elle, s'affiche aussi sur iPhone. */
.hp-recherche input::-webkit-search-cancel-button,
.clients-recherche input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
}

/* ── Question suivante proposee apres une reponse chiffree ─────────────────
   Elle se distingue d'une action : un contour, pas un aplat, pour qu'on voie
   qu'il s'agit d'une suggestion et non d'un bouton qui engage quelque chose. */
.assistant-suite{ margin-top:8px; }
.assistant-suite button{
  display:inline-flex; align-items:flex-start; gap:7px; max-width:100%;
  padding:9px 13px; border:1px solid var(--ligne,#e6e8ef); border-radius:14px;
  background:#fff; color:var(--bleu,#4f5ee8);
  font:600 13px/1.35 inherit; text-align:left; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.assistant-suite button span{ opacity:.65; flex:0 0 auto; }
.assistant-suite button:hover,
.assistant-suite button:focus-visible{
  background:#f4f6ff; border-color:var(--bleu,#4f5ee8);
}

/* ── Achats retrouvés par l'assistant ─────────────────────────────────────
   Une pastille par facture. Toute la ligne est le lien : sur un chantier, on
   vise mal, et un petit « ouvrir » se raterait une fois sur deux. */
.as-achats{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.as-achat{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border:1px solid var(--ligne,#e6e8ef); border-radius:14px;
  background:#fff; color:inherit; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.as-achat:hover, .as-achat:focus-visible{ border-color:#c3cbe8; background:#fbfcff; }
.as-achat.sans-piece{ opacity:.72; cursor:default; }
.as-a-marque{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:#f4f6fa; border:1px solid var(--ligne,#e6e8ef);
}
.as-a-marque img{ max-width:30px; max-height:26px; object-fit:contain; }
.as-a-marque b{ font-size:12px; font-weight:800; color:#8b909d; }
.as-a-corps{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.as-a-corps b{ font-size:13.5px; font-weight:700; color:var(--encre,#1f2430); }
.as-a-art{
  font-size:12px; color:var(--gris,#6b7280);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.as-a-meta{ font-size:11.5px; color:#9aa0ad; }
.as-a-montant{
  flex:0 0 auto; font-size:13.5px; font-weight:800;
  color:var(--encre,#1f2430); font-variant-numeric:tabular-nums;
}
/* Un avoir répond aux mêmes recherches que l'achat qu'il annule : il doit se
   reconnaître d'un coup d'œil, sinon on croit tenir la facture d'achat. */
.as-a-avoir{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:7px;
  background:#fdeaea; color:#c0392b; font-size:10.5px; font-weight:800;
  letter-spacing:.2px; vertical-align:1px;
}