/* Identite visuelle alignee sur le desktop (ui/theme.py) : creme + terracotta,
   sidebar claire, Segoe UI, cartes radius 12, boutons radius 8. */
:root{
  --bg:#FAF6F0; --surface:#FFFFFF; --surface-alt:#F3ECE2;
  --ink:#26201B; --ink2:#7A6E63; --line:#E7DDD1;
  --accent:#C67B4E; --accent-hover:#B0673C;
  --ok:#3E8E5A; --ok-bg:#E7F1EA; --ok-line:#CDE6D6;
  --warn:#B07B18; --warn-bg:#FBF1DD; --warn-line:#EEDDB4;
  --off:#C0392B; --off-bg:#FBE7E5; --off-line:#F0CDC8;
  --neg:#C0392B;
  --brand:var(--accent);           /* alias : les gabarits utilisent --brand */
  --brand-ink:var(--accent-hover);
  --shadow:0 1px 2px rgba(38,32,27,.05),0 4px 16px rgba(38,32,27,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E1B18; --surface:#2A2622; --surface-alt:#332E29;
    --ink:#F0E9E0; --ink2:#B7A99B; --line:#3B342E;
    --accent:#C67B4E; --accent-hover:#B0673C;
    --ok:#5FB57C; --ok-bg:#1D3326; --ok-line:#2C4A36;
    --warn:#E4B45A; --warn-bg:#3A2E12; --warn-line:#54421C;
    --off:#E06B5E; --off-bg:#3A1E1A; --off-line:#5A2C26;
    --neg:#E06B5E;
    --shadow:0 1px 2px rgba(0,0,0,.28),0 6px 22px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --bg:#1E1B18; --surface:#2A2622; --surface-alt:#332E29;
  --ink:#F0E9E0; --ink2:#B7A99B; --line:#3B342E;
  --accent:#C67B4E; --accent-hover:#B0673C;
  --ok:#5FB57C; --ok-bg:#1D3326; --ok-line:#2C4A36;
  --warn:#E4B45A; --warn-bg:#3A2E12; --warn-line:#54421C;
  --off:#E06B5E; --off-bg:#3A1E1A; --off-line:#5A2C26;
  --neg:#E06B5E;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 6px 22px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","Inter",system-ui,sans-serif;font-size:14px;
  line-height:1.5;color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}
.app{display:flex;min-height:100vh}

/* Sidebar CLAIRE (desktop : surface + border-right) */
.sidebar{width:220px;flex:0 0 220px;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 10px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:600;
  color:var(--ink);padding:4px 4px 12px}
.brand-logo{width:62px;height:62px;object-fit:contain}
.brand-name{font-size:15px;letter-spacing:.4px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.side-version{margin-top:8px;font-size:11px;color:var(--ink2);opacity:.75}
.gtip{position:fixed;z-index:9999;pointer-events:none;background:var(--ink);color:#fff;
  padding:6px 9px;border-radius:6px;font-size:12px;line-height:1.45;white-space:pre-line;
  box-shadow:0 6px 20px rgba(0,0,0,.28);opacity:0;transition:opacity .08s;max-width:280px}
nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:8px;
  color:var(--ink2);text-decoration:none;font-weight:500;margin:2px 0;transition:background .12s,color .12s}
.nav-item:hover{background:var(--bg);color:var(--ink)}
.nav-item.is-active{background:var(--accent);color:#fff}
.nav-ic{font-size:15px;width:20px;text-align:center}
.sidebar-foot{margin-top:auto;font-size:12px;color:var(--ink2);padding:12px 8px 0;border-top:1px solid var(--line)}

/* Contenu */
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 28px}
.topbar h1{margin:0;font-size:20px;font-weight:600;color:var(--ink)}
.topbar-sub{color:var(--ink2);font-size:12px;margin-top:2px}
.tabbar{display:flex;flex-wrap:wrap;gap:2px;margin-top:12px;margin-bottom:-16px}
.tab{white-space:nowrap;flex:0 0 auto;padding:8px 16px;border-radius:8px 8px 0 0;color:var(--ink2);text-decoration:none;
  font-weight:500;font-size:13.5px;border:1px solid transparent;border-bottom:none}
.tab:hover{color:var(--ink);background:var(--surface-alt)}
.tab.is-active{color:var(--accent);background:var(--bg);border-color:var(--line);
  border-bottom:2px solid var(--accent);border-radius:8px 8px 0 0}
.page{padding:30px 28px 44px}
.section-title{font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 12px}
.section-title:first-child{margin-top:0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi-accent{background:var(--accent);border:none;color:#fff}
.kpi-accent .kpi-label,.kpi-accent .kpi-hint{color:rgba(255,255,255,.9)}
.kpi-label{font-size:12px;color:var(--ink2)}
.kpi-value{font-size:24px;font-weight:600;color:var(--ink);margin:6px 0 3px}
.kpi-accent .kpi-value{color:#fff}
.kpi-hint{font-size:12px;color:var(--ink2)}

/* Cartes + tableaux */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-head{padding:14px 20px;border-bottom:1px solid var(--line)}
.card-head h2{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
/* Carte "Ajouter" repliable : le formulaire n'apparait qu'au clic (gain de place) */
details.add-card>summary{list-style:none;cursor:pointer;user-select:none;display:flex;
  align-items:center;gap:8px;padding:13px 20px;font-size:14px;font-weight:600;color:var(--brand)}
details.add-card>summary::-webkit-details-marker{display:none}
details.add-card>summary::before{content:"＋";font-size:15px;line-height:1}
details.add-card>summary:hover{background:var(--surface-alt)}
details.add-card[open]>summary{border-bottom:1px solid var(--line)}
details.add-card[open]>summary::before{content:"–"}
/* "Plus de details" : champs secondaires d'un formulaire, replies sur mobile
   (ouverts par defaut sur desktop ; base.html les referme si l'ecran est petit). */
details.more-fields{margin:2px 0 4px}
details.more-fields>summary{list-style:none;cursor:pointer;user-select:none;color:var(--brand);
  font-weight:600;font-size:13.5px;padding:8px 0}
details.more-fields>summary::-webkit-details-marker{display:none}
details.more-fields>summary::before{content:"＋ ";font-size:14px}
details.more-fields[open]>summary::before{content:"– "}
/* Bouton de dictee vocale en cours d'enregistrement */
.btn.rec{background:var(--off);color:#fff;border-color:var(--off);animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.55}}
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th{font-size:12px;color:var(--ink2);font-weight:500;background:var(--surface)}
table.data tbody tr:hover{background:var(--surface-alt)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
td.strong{font-weight:600}
.row-total td{font-weight:600;background:var(--surface-alt);border-top:2px solid var(--line)}
.num.neg,.neg{color:var(--neg)}
.pos{color:var(--ok)}
/* Valeur KPI (Benefice...) : rouge si negatif, vert si positif (specificite explicite). */
.kpi-value.neg{color:var(--neg)}
.kpi-value.pos{color:var(--ok)}
.guide{color:var(--ink2);font-size:12.5px;line-height:1.5;margin:4px 0 0}
.chart-scroll{overflow-x:auto;padding-bottom:6px}
.tableau-bord td,.tableau-bord th{font-variant-numeric:tabular-nums}
.tableau-bord tbody td.num strong{font-weight:700}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--ink)}
table.data th[data-dir]{color:var(--accent)}
table.data th[data-dir="asc"]::after{content:" \25B2";font-size:9px}
table.data th[data-dir="desc"]::after{content:" \25BC";font-size:9px}
.table-search{padding:12px 16px;border-bottom:1px solid var(--line)}
.table-search input{width:100%;max-width:300px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13.5px;background:var(--bg);color:var(--ink)}
.table-search input:focus{outline:none;border-color:var(--accent)}

/* Badges de statut (couleurs desktop success/warning/danger) */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--surface-alt);color:var(--ink2)}
.badge-actif{background:var(--ok-bg);color:var(--ok)}
.badge-en_pause{background:var(--warn-bg);color:var(--warn)}
.badge-resilie{background:var(--off-bg);color:var(--off)}

/* Boutons (desktop : accent radius 8 / ghost) */
.toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:8px 16px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink2);font:inherit;font-weight:500;font-size:13.5px;
  text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--surface-alt);color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-icon{padding:5px 8px;font-size:15px;line-height:1}
.btn-danger{color:var(--off);border-color:var(--off-line)}
.btn-danger:hover{background:var(--off-bg);color:var(--off)}
td.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
td.actions form{margin:0}
/* Colonnes redimensionnables facon Excel : chaque colonne independante, la
   largeur du tableau = somme des colonnes (du blanc peut rester a droite). */
.col-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:2}
table.data.resizable{table-layout:fixed;width:auto;max-width:none}
table.data.resizable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.data.resizable td .badge-select{max-width:100%}
/* La colonne Actions garde ses icones visibles meme en largeur fixe */
table.data.resizable td.actions{overflow:visible;white-space:normal}
/* Pagination (transactions) */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:14px;flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink2);font-size:13px}
.pager a:hover{background:var(--surface-alt);color:var(--ink)}
.pager .cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .disabled{opacity:.4;pointer-events:none}
/* Zone de glisser-deposer (import) */
.dropzone{position:relative;border:2px dashed var(--line);border-radius:12px;padding:28px 16px;
  text-align:center;color:var(--ink2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--accent)}
.dropzone.drag{border-color:var(--accent);background:var(--surface-alt)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz-file{margin-top:10px;font-weight:600;color:var(--ok)}
/* Carte plein ecran + panneau flottant d'itineraire + modale carnet */
.carte-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#map{height:78vh;min-height:480px;border-radius:12px}
.carte-overlay{position:absolute;top:12px;left:12px;z-index:500;width:320px;max-width:calc(100% - 24px);
  max-height:calc(78vh - 24px);overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.18);padding:14px}
.carte-overlay h2{margin:0 0 4px;font-size:15px}
.carte-overlay label{display:block;font-size:12px;color:var(--ink2);margin-top:6px}
.carte-overlay input,.carte-overlay select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg);color:var(--ink)}
.carte-overlay input[type=checkbox]{width:auto}
#it-stops{list-style:decimal;padding-left:22px;margin:6px 0}
#it-stops li{margin:6px 0;font-size:13px}
#it-stops li .st-row{display:flex;gap:6px;align-items:center}
#it-stops li .st-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#it-stops li button{border:none;background:none;cursor:pointer;color:var(--ink2);font-size:14px;padding:0 2px}
.st-motif{width:100%;margin-top:3px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:12px;background:var(--bg);color:var(--ink)}
/* Autocompletion d'adresse (dropdown sous le champ) */
.addr-suggest{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:2px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:210px;overflow-y:auto}
.addr-item{padding:8px 10px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.addr-item:last-child{border-bottom:none}
.addr-item:hover{background:var(--surface-alt)}
.mappop-actions a{display:block;margin-bottom:4px}
.leaflet-tooltip.step-num{background:none;border:none;box-shadow:none;color:#fff;font-weight:700;font-size:12px;margin:0;padding:0}
/* Points de passage (vias) et poignees de deviation : icones sans fond Leaflet. */
.via-icon,.via-handle{background:transparent!important;border:none!important;box-shadow:none!important;cursor:grab}
.leaflet-tooltip.step-num::before{display:none}
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.modal-box{background:var(--surface);border-radius:12px;width:min(960px,94vw);height:min(82vh,780px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);font-weight:600}
.modal-box iframe{flex:1;border:0;width:100%}

/* Modale de confirmation (feedback.js) : petite boite centree, remplace confirm() */
.cfm-box{width:min(420px,92vw);max-width:420px;height:auto}
.cfm-body{padding:22px 22px 4px}
.cfm-text{margin:0;font-size:15px;color:var(--ink);line-height:1.5}
.cfm-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px}
/* Spinner d'action en cours (data-busy) : anneau dans la couleur du texte du bouton */
.spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;opacity:.85;vertical-align:-2px;
  animation:cfm-spin .6s linear infinite}
@keyframes cfm-spin{to{transform:rotate(360deg)}}

/* Toast "Annuler" (feedback.js) : bandeau bas centre, ephemere */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);z-index:1100;display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;padding:11px 12px 11px 16px;border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);font-size:13.5px;max-width:calc(100% - 32px);
  opacity:0;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-undo{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;
  cursor:pointer;padding:2px 4px}
.toast-undo:hover{text-decoration:underline}
.toast-undo:disabled{opacity:.6;cursor:default;text-decoration:none}
.toast-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:14px;
  cursor:pointer;padding:2px 4px;line-height:1}
@media(max-width:720px){.toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* Statut modifiable en ligne */
.inline-status{margin:0}
.badge-select{border:1px solid var(--line);border-radius:999px;padding:4px 26px 4px 10px;font-size:12px;
  font-weight:600;cursor:pointer;background-color:var(--surface-alt);color:var(--ink2);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A6E63'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.badge-select.cat-todo{background-color:var(--warn-bg);color:var(--warn)}
.badge-select.badge-actif{background-color:var(--ok-bg);color:var(--ok)}
.badge-select.badge-en_pause{background-color:var(--warn-bg);color:var(--warn)}
.badge-select.badge-resilie{background-color:var(--off-bg);color:var(--off)}
/* Pastilles d'etape CRM (progression du tunnel : neutre -> chaud -> vert/rouge) */
.badge-st-Prospect,.badge-select.badge-st-Prospect{background-color:#ECE6DE;color:#6B5E50}
.badge-st-Contacte,.badge-select.badge-st-Contacte{background-color:#E1EBF4;color:#37648F}
.badge-st-Reponse,.badge-select.badge-st-Reponse{background-color:#DEEEEA;color:#2C7A68}
.badge-st-RDV,.badge-select.badge-st-RDV{background-color:#E9E2F1;color:#67499B}
.badge-st-Proposition,.badge-select.badge-st-Proposition{background-color:#F6EAD5;color:#A5741C}
.badge-st-Signe,.badge-select.badge-st-Signe{background-color:var(--ok-bg);color:var(--ok)}
.badge-st-Perdu,.badge-select.badge-st-Perdu{background-color:var(--off-bg);color:var(--off)}
/* Pastilles de statut de contrat (statuts stockes en minuscules) */
.badge-ct-genere,.badge-select.badge-ct-genere{background-color:#F6EAD5;color:#A5741C}
.badge-ct-envoye,.badge-select.badge-ct-envoye{background-color:#E1EBF4;color:#37648F}
.badge-ct-signe,.badge-select.badge-ct-signe{background-color:var(--ok-bg);color:var(--ok)}
.badge-ct-archive,.badge-select.badge-ct-archive{background-color:#ECE6DE;color:#6B5E50}
/* Pastilles de statut de frais (a valider -> valide ; refuse en rouge) */
.badge-frais-a_valider,.badge-select.badge-frais-a_valider{background-color:#F6EAD5;color:#A5741C}
.badge-frais-valide,.badge-select.badge-frais-valide{background-color:var(--ok-bg);color:var(--ok)}
.badge-frais-refuse,.badge-select.badge-frais-refuse{background-color:var(--off-bg);color:var(--off)}
/* Pastilles de statut de facture (genere -> envoye -> paye ; annule en rouge) */
.badge-fac-Generee,.badge-select.badge-fac-Generee{background-color:#F6EAD5;color:#A5741C}
.badge-fac-Envoyee,.badge-select.badge-fac-Envoyee{background-color:#E1EBF4;color:#37648F}
.badge-fac-Payee,.badge-select.badge-fac-Payee{background-color:var(--ok-bg);color:var(--ok)}
.badge-fac-Annulee,.badge-select.badge-fac-Annulee{background-color:var(--off-bg);color:var(--off)}

/* Couleurs par categorie bancaire (lisibilite du classement). */
.badge-select.badge-cat-commission{background-color:#E2F0E6;color:#2C7A68}
.badge-select.badge-cat-extras{background-color:#DDF0EC;color:#1F6E5C}
.badge-select.badge-cat-autre_revenu{background-color:#E1EBF4;color:#37648F}
.badge-select.badge-cat-debours{background-color:#E9E2F1;color:#67499B}
.badge-select.badge-cat-prestataire{background-color:#F6EAD5;color:#A5741C}
.badge-select.badge-cat-assurance{background-color:#DDEBF5;color:#2E6F9E}
.badge-select.badge-cat-comptable{background-color:#ECE6DE;color:#6B5E50}
.badge-select.badge-cat-fournitures{background-color:#F3E1F0;color:#8E3C82}
.badge-select.badge-cat-telephonie{background-color:#E0EEF0;color:#2C7080}
.badge-select.badge-cat-deplacement{background-color:#E6E9F5;color:#4A54A0}
.badge-select.badge-cat-impots{background-color:#FBE7E5;color:#C0392B}
.badge-select.badge-cat-frais_bancaires{background-color:#F0E6D8;color:#8A6A2C}
.badge-select.badge-cat-courses{background-color:#EDF3DC;color:#5E7A1C}
.badge-select.badge-cat-logiciel{background-color:#E3E0F5;color:#5A48A8}
.badge-select.badge-cat-autres_depenses{background-color:#EDEDED;color:#5A5A5A}

/* Ligne selectionnee (clic) : surbrillance. */
table.data tbody tr.row-selected>td{background:rgba(55,100,143,.16)}
table.data tbody tr.row-selected>td:first-child{box-shadow:inset 3px 0 0 #37648F}

/* Formulaires */
.form{padding:20px 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field{display:flex;flex-direction:column;gap:5px}
.field-wide{grid-column:1 / -1}
.field-check{flex-direction:row;align-items:center;gap:9px;align-self:end;padding-bottom:8px}
.field-check input{width:16px;height:16px}
.field-check span{color:var(--ink)}
.field span{font-size:12px;color:var(--ink2)}
.field input,.field select,.field textarea{padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form-section{font-size:12px;font-weight:600;color:var(--ink2);text-transform:uppercase;
  letter-spacing:.04em;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Utilisateur / bandeaux / flash */
.side-user{color:var(--ink);font-weight:600;font-size:13px}
.side-logout{display:inline-block;margin-top:6px;color:var(--accent);font-size:12.5px;text-decoration:none}
.side-logout:hover{text-decoration:underline}
.env-banner{background:#B42318;color:#fff;font-size:13px;font-weight:700;padding:8px 16px;text-align:center;letter-spacing:.2px}
.env-banner-fixe{position:fixed;top:0;left:0;right:0;z-index:50}
.dev-banner{background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600;
  text-align:center;padding:7px 12px;border-bottom:1px solid var(--warn-line)}
/* Notif de reconnexion bancaire (consentement DSP2 expirant/expire). */
.reconnect-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);
  border-radius:10px;padding:10px 16px;margin:0 0 12px;font-size:13.5px}
.reconnect-banner.is-expired{background:var(--off-bg);color:var(--off);border-color:var(--off-line)}
.reconnect-banner .btn{white-space:nowrap}
.flash-ok{background:var(--ok-bg);color:var(--ok);font-weight:600;padding:10px 16px;
  border-radius:8px;margin-bottom:16px;font-size:13.5px;border:1px solid var(--ok-line)}

/* Page de connexion */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);margin:0}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:32px;width:100%;max-width:360px}
.login-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px}
.login-sub{color:var(--ink2);margin:6px 0 20px;font-size:13.5px}
.login-card .form{padding:0}
.login-card .field{margin-bottom:14px}
.login-error{background:var(--off-bg);color:var(--off);padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;margin-bottom:16px;border:1px solid var(--off-line)}

/* --- Elements mobiles : caches par defaut (desktop), actives en <=720px --- */
.mobile-appbar{display:none}
.botnav{display:none}
.drawer-overlay{display:none}
.burger{background:none;border:none;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;padding:2px 4px}
.appbar-logo{width:26px;height:26px;object-fit:contain}
.appbar-title{font-weight:600;font-size:15px;color:var(--ink);flex:1}
.appbar-gear{font-size:22px;text-decoration:none;padding:2px 4px;line-height:1}
#lock-screen{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.lock-box{text-align:center;max-width:320px}
.botnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px;text-decoration:none;color:var(--ink2);font-size:11px;font-weight:500}
.botnav-item span{font-size:20px;line-height:1}
.botnav-item.is-active{color:var(--accent)}

@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
@media(max-width:820px) and (min-width:721px){
  .sidebar{width:60px;flex-basis:60px;padding:12px 6px}
  .brand span:not(.brand-mark){display:none}
  .nav-item span:not(.nav-ic){display:none}
  .sidebar-foot{display:none}
  .topbar,.page{padding-left:16px;padding-right:16px}
}

/* --- Telephone : app bar + tiroir + barre du bas (PWA) --- */
@media(max-width:720px){
  .mobile-appbar{display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:50;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .app{display:block}
  .content{min-width:0}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:264px;flex-basis:264px;z-index:70;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 32px rgba(0,0,0,.20)}
  body.drawer-open .sidebar{transform:translateX(0)}
  body.drawer-open .drawer-overlay{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.42)}
  .sidebar .brand span:not(.brand-mark){display:inline}
  .sidebar .nav-item span:not(.nav-ic){display:inline}
  .sidebar-foot{display:block}
  .topbar{padding:14px 16px}
  .topbar h1{font-size:18px}
  .page{padding:18px 14px calc(78px + env(safe-area-inset-bottom))}
  .tabbar{flex-wrap:nowrap;overflow-x:auto;margin-bottom:-14px}
  /* Elements reserves au desktop, masques sur telephone */
  .desktop-only{display:none!important}
  /* Onglets reserves au desktop : Frais garde "Notes de frais" ; CRM garde
     Prospects + Proprietaires (Contrats reste sur ordinateur). */
  .tab[data-tab="/deplacements"],.tab[data-tab="/vehicules"],.tab[data-tab="/contrats"]{display:none}
  .botnav{display:flex;flex-direction:row;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}

  /* Carte : map plein-cadre + panneau de construction en feuille du bas */
  #map{height:60vh;min-height:300px}
  .carte-overlay{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    max-height:74vh;overflow-y:auto;border-radius:16px 16px 0 0;z-index:80;
    box-shadow:0 -8px 26px rgba(0,0,0,.22);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .carte-overlay::before{content:"";display:block;width:38px;height:4px;border-radius:3px;
    background:var(--line);margin:2px auto 8px}
  .modal-box{width:100vw;height:100dvh;border-radius:0}
}

/* Editeur email enrichi (richmail.js) */
.rm-wrap{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card,#fff)}
.rm-toolbar{display:flex;flex-wrap:wrap;gap:2px;align-items:center;padding:5px 6px;background:var(--surface-alt,#f6f4ef);border-bottom:1px solid var(--line)}
.rm-btn{min-width:28px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink,#26201B);cursor:pointer;font-size:13px;line-height:1}
.rm-btn:hover{background:var(--card,#fff);border-color:var(--line)}
.rm-btn.rm-color{font-weight:700;padding:0 6px}
.rm-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.rm-editor{min-height:180px;padding:10px 12px;outline:none;font-size:14px;line-height:1.5;color:var(--ink,#26201B);overflow-y:auto}
.rm-editor:focus{box-shadow:inset 0 0 0 2px rgba(46,111,158,.25)}
.rm-editor ul,.rm-editor ol{margin:6px 0;padding-left:22px}