/* ============================================================================
   Application Commerce — DA « Forêt & sable, version sobre » (3.42)
   Chargé APRÈS style.css et commerce.css : remplace les couleurs, la police et
   les formes de l'habillage intranet, sans toucher aux écrans eux-mêmes.
   ========================================================================== */
:root {
  --marine: #2E6B4F; --marine-fonce: #1F4F39; --marine-clair: #4C8A6C;
  --jaune: #2E6B4F; --jaune-fonce: #1F4F39; --jaune-pale: #EEF4F0;
  --noir: #1B2420; --texte: #1B2420; --gris: #5E6762; --trait: #E5E1D8;
  --fond: #F5F3EE; --surface: #FFFFFF; --surface-2: #EFECE5;
  --ok: #2E6B4F; --ok-pale: #E3EDE7; --attention: #9A6A12; --attention-pale: #F6EDD8;
  --critique: #B3402A; --critique-pale: #F7E1DC; --info: #2E6B4F; --info-pale: #E3EDE7;
  --marine-txt: #2E6B4F; --critique-txt: #B3402A; --ok-txt: #2E6B4F; --attention-txt: #9A6A12;
  --nav-txt: #1B2420; --nav-ico: #5E6762; --nav-titre: #5E6762; --fin-trait: #EFECE5; --avatar: #E3EDE7;
  --fond-verre: rgba(245, 243, 238, .94); --ombre: rgba(27, 36, 32, .08); --survol: rgba(46, 107, 79, .06);
  --f-titre: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-texte: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 8px;
  --sable: #DCD3BE; --trait-fort: #D6D1C5; --n1: #CFD8D2;
}
:root[data-theme="sombre"] {
  --marine: #7DBB9B; --marine-fonce: #5FA382; --marine-clair: #9CCDB3; --jaune: #7DBB9B; --jaune-fonce: #5FA382;
  --marine-txt: #8FC7AA; --ok: #7DBB9B; --ok-txt: #8FC7AA; --info: #7DBB9B;
  --f-titre: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-texte: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 8px;
  --trait-fort: #3A4440; --n1: #4A5751;
  --fond: #121614; --surface: #1A201D; --surface-2: #232A26; --trait: #2E3632; --fin-trait: #252C28;
  --texte: #E4E8E5; --noir: #E4E8E5; --gris: #9AA39E; --nav-txt: #E4E8E5; --nav-ico: #9AA39E; --avatar: #23332B; --ok-pale: #1F3329; --info-pale: #1F3329; --jaune-pale: #1F3329;
  --fond-verre: rgba(18, 22, 20, .94);
}
body { font-size: 14.5px; line-height: 1.45; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

/* ---------- boutons : rectangles légèrement arrondis ---------- */
.btn { border-radius: 6px; border-width: 1px; border-color: var(--trait-fort); font-weight: 600; padding: 7px 14px; color: var(--texte); }
.btn:hover { border-color: var(--gris); }
.btn.bleu, .btn.jaune { background: var(--marine); border-color: var(--marine); color: #fff; }
.btn.bleu:hover:not(:disabled), .btn.jaune:hover:not(:disabled) { background: var(--marine-fonce); border-color: var(--marine-fonce); }
.btn.petit { padding: 4px 10px; }
.lien { color: var(--marine-txt); text-decoration-color: currentColor; }
.pastille { border-radius: 4px; font-weight: 600; }
input, select, textarea { border-radius: 6px !important; }

/* ---------- en-tête blanc, logo à gauche ---------- */
.lv-entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
.lv-entete-in { max-width: 1280px; padding: 6px 24px; min-height: 58px; }
.lv-marque img { width: auto; height: 32px; background: none; padding: 0; border-radius: 0; }
.lv-marque span { color: var(--gris); font-weight: 500; font-size: 15px; padding-left: 12px; border-left: 1px solid var(--trait); }
.lv-profil b, .lv-profil .profil-texte b { color: var(--texte); font-weight: 500; }
.lv-profil .moi-btn { color: var(--texte); }
.lv-profil .moi-btn:hover, .lv-profil .moi-btn[aria-expanded="true"] { background: var(--surface-2); border-color: transparent; }
.lv-profil .moi-initiales { background: var(--ok-pale); color: var(--marine); font-weight: 600; }
.lv-profil .moi-fleche { color: var(--gris); }
:root[data-theme="sombre"] .lv-entete { background: var(--surface); }

/* ---------- rubriques : onglets soulignés (ordinateur), barre en bas (téléphone) ---------- */
.lv-main { max-width: 1280px; padding: 0 24px 110px; }
.lv-onglets { gap: 24px; border-bottom: 1px solid var(--trait); padding: 0; margin: 0 -24px; padding-inline: 24px; background: var(--surface); }
.lv-onglets button { border: 0; border-radius: 0; background: none; color: var(--gris); font-weight: 500; font-size: 14.5px; padding: 14px 0 12px; min-height: 0; box-shadow: none; }
.lv-onglets button:hover { color: var(--texte); }
.lv-onglets button[aria-current="page"] { background: none; color: var(--marine-txt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--marine); }
.lv-onglets .ong-ico { display: none; }
:root[data-theme="sombre"] .lv-onglets button:not([aria-current]) { color: var(--gris); }
.cm-rubrique { padding-top: 20px; }
@media (max-width: 700px) {
  .lv-entete-in { padding: 6px 14px; min-height: 52px; }
  .lv-marque img { height: 26px; }
  .lv-marque span { display: none; }
  .lv-main { padding: 0 14px 96px; }
  .cm-rubrique { padding-top: 14px; }
  .lv-onglets { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; margin: 0; padding: 4px 4px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait); border-bottom: 0; gap: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .lv-onglets button { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 2px; min-height: 50px; justify-content: center; }
  .lv-onglets button[aria-current="page"] { box-shadow: none; }
  .lv-onglets .ong-ico { display: block; width: 22px; height: 22px; }
}

/* ---------- cartes : panneaux sobres ---------- */
.cm-carte { border-radius: var(--rayon); border-color: var(--trait); box-shadow: none; }
.cm-carte > header { border-bottom: 1px solid var(--fin-trait); padding: 11px 16px; }
.cm-carte > header h2 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--texte); }
.cm-carte.reduite > header { border-bottom-color: transparent; }
.panneau, .vide, .liste, .ag-tournee, .tr-sem, .dir-details { border-radius: var(--rayon) !important; }
.panneau-titre { text-transform: none !important; letter-spacing: 0 !important; }
.vue-tete h1 { font-size: 24px; font-weight: 600; }
.vue-tete p { color: var(--gris); }
.cm-kpi b { font-weight: 600; }
.cm-jauge { background: var(--surface-2); }
.cm-jauge i { background: var(--marine); }
.cm-jauge i.proche { background: #B88A2C; }
.cm-jauge i.depasse { background: var(--critique); }

/* ---------- À visiter : compteurs plats, lignes aérées ---------- */
.cm-compteur { border-radius: var(--rayon); border-width: 1px; border-left-width: 1px; }
.cm-compteur b { font-weight: 600; }
.cm-compteur.actif { background: var(--marine); border-color: var(--marine); }
.element { grid-template-columns: 58px minmax(0, 1fr) auto; }
.cm-visite .bande { background: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding-left: 8px; }
.cm-retard b { font-size: 20px; font-weight: 600; }
.cm-retard span { font-size: 11px; color: var(--gris); }
.cm-retard.critique b { color: var(--critique); } .cm-retard.attention b { color: var(--attention); }
.cm-actions-rondes { display: flex; gap: 6px; }
.cm-rond { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--trait); background: var(--surface); color: var(--marine); display: inline-grid; place-items: center; text-decoration: none; }
.cm-rond:hover { border-color: var(--marine); }
.cm-rond[aria-disabled="true"] { opacity: .35; pointer-events: none; }
@media (max-width: 640px) { .element { grid-template-columns: 52px minmax(0, 1fr); } .cm-visite .cote { grid-column: 2; } }

/* ---------- Aujourd'hui (3.42) ---------- */
.auj-tete h1 { font-size: 24px; }
.auj-tete p { margin: 2px 0 0; color: var(--gris); }
.auj-prochaine { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.auj-prochaine .auj-haut { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--gris); }
.auj-prochaine .auj-haut b { color: var(--marine-txt); font-weight: 600; }
.auj-prochaine .auj-nom { font-size: 19px; font-weight: 600; }
.auj-prochaine .auj-adr { color: var(--gris); font-size: 14px; }
.auj-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.auj-boutons > * { min-height: 44px; border-radius: 8px; }
.auj-fil-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.auj-fil-tete h2 { font-size: 14px; color: var(--gris); font-weight: 600; }
.auj-fil { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.auj-etape { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr) auto; gap: 8px; align-items: stretch; padding: 0 14px; }
.auj-etape .h { padding: 12px 0; font-variant-numeric: tabular-nums; }
.auj-etape .rail { display: flex; flex-direction: column; align-items: center; }
.auj-etape .rail i { width: 2px; background: var(--trait); }
.auj-etape .rail i:first-child { flex: 0 0 17px; } .auj-etape .rail i:last-child { flex: 1; }
.auj-etape:first-child .rail i:first-child, .auj-etape:last-child .rail i:last-child { background: transparent; }
.auj-etape .rail b { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #C9CDC9; background: var(--surface); flex: none; }
.auj-etape .txt { padding: 10px 0; border-bottom: 1px solid var(--fin-trait); display: flex; flex-direction: column; min-width: 0; }
.auj-etape:last-child .txt { border-bottom: 0; }
.auj-etape .txt span { color: var(--gris); font-size: 13px; }
.auj-etape .txt button { all: unset; cursor: pointer; font-weight: 500; }
.auj-etape .txt button:hover { text-decoration: underline; }
.auj-etape .act { display: flex; align-items: center; border-bottom: 1px solid var(--fin-trait); }
.auj-etape:last-child .act { border-bottom: 0; }
.auj-etape.fait .h, .auj-etape.fait .txt button { color: var(--gris); }
.auj-etape.fait .rail b { background: var(--marine); border-color: var(--marine); }
.auj-etape.fait .rail i { background: var(--marine); }
.auj-etape.prochain .rail b { border-color: var(--marine); }
.auj-etape.prochain .h, .auj-etape.prochain .txt button { font-weight: 600; }
.auj-etape.t-pause .txt, .auj-etape.t-bloc .txt { color: var(--gris); }

/* Tournées : réglages seulement, donc caché de la barre du bas sur téléphone (accessible depuis l'Agenda) */
@media (max-width: 700px) { .lv-onglets .ong-bureau { display: none; } }

/* Libellés de champs en minuscules, compteurs compacts */
.champ > label, .champ > span { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; }
.cm-compteur, .cm-compteur.critique, .cm-compteur.attention, .cm-compteur.jaune, .cm-compteur.info, .cm-compteur.ok, .cm-compteur.neutre { border-left-color: var(--trait); }
.cm-compteur.actif { border-color: var(--marine) !important; }
.cm-visite .ligne-titre .pastille { display: none; }
@media (max-width: 700px) {
  .vue-tete > div > p { display: none; }
  .cm-resume { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .cm-compteur { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 999px; }
  .cm-compteur b { font-size: 16px; }
  .cm-compteur span { font-size: 13px; white-space: nowrap; }
}

/* ---------- 3.42.1 : fiche client mise en page « H » ---------- */
.fh-tete{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:14px 20px 0;margin-bottom:16px}
.fh-retour{font-size:13px;padding:0}
.fh-tete-ligne{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:6px}
.fh-titre{display:flex;flex-direction:column;gap:4px;min-width:0}
.fh-nom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fh-nom h1{margin:0;font-size:24px;font-weight:600;color:var(--texte)}
.fh-meta{color:var(--gris);font-size:14px}
.fh-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fh-actions .btn{min-height:36px}
.fh-vue{display:inline-grid;grid-auto-flow:column;background:var(--surface-2);border-radius:8px;padding:2px}
.fh-vue button{border:0;background:transparent;border-radius:6px;padding:6px 10px;font:inherit;font-size:13px;color:var(--gris);cursor:pointer}
.fh-vue button[aria-pressed="true"]{background:var(--surface);color:var(--texte);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fh-onglets{display:flex;gap:22px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.fh-onglets button{border:0;background:none;padding:10px 0 11px;font:inherit;font-size:14px;color:var(--gris);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.fh-onglets button[aria-current="page"]{color:var(--texte);font-weight:600;border-bottom-color:var(--marine)}
.fh-deux{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.fh-principal,.fh-cote{display:flex;flex-direction:column;gap:16px;min-width:0}
.fh-principal>.cm-carte,.fh-cote>.cm-carte,.fh-rfa>.cm-carte{margin:0}
.fh-rfa{max-width:820px}
.fh-panneau{background:var(--surface);border:1px solid var(--trait);border-radius:10px;overflow:hidden}
.fh-p-tete{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px 10px;border-bottom:1px solid var(--fin-trait)}
.fh-p-tete h2{margin:0;font-size:15px;font-weight:600;color:var(--texte);text-transform:none;letter-spacing:0}
.fh-p-tete .lien{font-size:13px;font-weight:600}
.fh-pad{padding:14px 18px}
.fh-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:18px}
.fh-chiffres>div{display:flex;flex-direction:column;gap:2px}
.fh-chiffres span{font-size:13px;color:var(--gris)}
.fh-chiffres b{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--texte)}
.fh-chiffres em{font-style:normal;font-size:13px;color:var(--gris)}
.fh-graph{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:150px;align-items:end}
.fh-mois{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.fh-barres{flex:1;width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
.fh-barres i{display:block;width:40%;max-width:12px;background:var(--marine);border-radius:3px 3px 0 0;min-height:1px}
.fh-barres i.n1{background:var(--n1)}
.fh-mois span{font-size:11px;color:var(--gris)}
.fh-legende{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--gris)}
.fh-legende i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--marine);vertical-align:-1px}
.fh-legende i.n1{background:var(--n1)}
.fh-boutons{display:flex;gap:8px;border-bottom:1px solid var(--fin-trait)}
.fh-visite{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 18px;border-bottom:1px solid var(--fin-trait)}
.fh-visite:last-child{border-bottom:0}
.fh-date{color:var(--gris);font-size:13px;font-variant-numeric:tabular-nums}
.fh-visite>div{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:pre-line}
.fh-visite em{font-style:normal;font-size:12px;color:var(--gris)}
.fh-dl{margin:0;padding:4px 18px}
.fh-dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--fin-trait);font-size:14px}
.fh-dl>div:last-child{border-bottom:0}
.fh-dl dt{color:var(--gris);text-transform:none;letter-spacing:0;font-size:14px;font-weight:400}
.fh-dl dd{margin:0;text-align:right;font-weight:600;color:var(--texte)}
.fh-rouge{color:#B3402A!important}
.fh-mini{font-size:12px;font-weight:400;margin-left:6px}
.fh-table{width:100%;border-collapse:collapse;font-size:14px}
.fh-table td{padding:8px 18px;border-bottom:1px solid var(--fin-trait)}
.fh-table tr:last-child td{border-bottom:0}
.fh-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.fh-table td.aide{text-align:right;width:60px}
.en-fiche .cm-fiche-tete{display:none}
@media (max-width:1000px){.fh-deux{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .fh-tete{padding:12px 14px 0;border-radius:0;border-left:0;border-right:0;margin:-12px -12px 12px}
  .fh-nom h1{font-size:20px}
  .fh-actions{width:100%}
  .fh-actions .btn{flex:1}
  .fh-vue{order:5}
  .fh-graph{height:110px;gap:3px}
  .fh-mois span{font-size:9px}
  .fh-visite{grid-template-columns:72px 1fr;padding:10px 14px}
}
.fh-actions{margin-left:auto}
.fh-table td.aide{white-space:nowrap;width:auto}
.fh-dl a{color:var(--marine);text-decoration:none}
.fh-p-tete .lien,.fh-retour{text-decoration:none}

/* ---------- 3.42.3 : choix du thème dans le menu du compte ---------- */
.menu-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px}
.menu-theme>span{font-size:13px;color:var(--gris)}
.mt-choix{display:inline-grid;grid-auto-flow:column;background:var(--surface-2);border-radius:8px;padding:2px}
.mt-choix button{border:0;background:transparent;border-radius:6px;padding:5px 9px;font:inherit;font-size:13px;color:var(--gris);cursor:pointer;min-height:32px}
.mt-choix button[aria-checked="true"]{background:var(--surface);color:var(--texte);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
:root[data-theme="sombre"] .btn.bleu,:root[data-theme="sombre"] .btn.jaune{color:#0F1714}

:root[data-theme="sombre"] .menu-jaune{color:#0F1714!important}

/* ---------- 3.42.4 : tableaux triables, recherche dans les tableaux, recherche directe d'un client ---------- */
th.triable{cursor:pointer;user-select:none;white-space:nowrap}
th.triable:hover{color:var(--marine-txt)}
th.triable[aria-sort="ascending"],th.triable[aria-sort="descending"]{color:var(--marine-txt)}
.tri-fleche{font-size:11px}
.tri-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.tri-recherche{flex:1 1 260px;max-width:420px;min-height:36px;padding:6px 10px;border:1px solid var(--trait-fort);background:var(--surface);color:var(--texte);font:inherit}
.rc{position:relative;margin-left:auto}
.rc-champ{width:260px;min-height:34px;padding:6px 10px;border:1px solid var(--trait-fort);background:var(--surface);color:var(--texte);font:inherit}
.rc-liste{position:absolute;right:0;top:calc(100% + 4px);z-index:50;width:340px;max-height:360px;overflow:auto;background:var(--surface);border:1px solid var(--trait);border-radius:8px;box-shadow:0 8px 24px var(--ombre)}
.rc-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 12px;border:0;border-bottom:1px solid var(--fin-trait);background:none;color:var(--texte);font:inherit;text-align:left;cursor:pointer}
.rc-item:hover,.rc-item:focus{background:var(--survol)}
.rc-vide{padding:10px 12px;margin:0}
@media (max-width:700px){.rc{margin-left:0;width:100%}.rc-champ{width:100%}.rc-liste{width:100%}}

/* ---------- 3.42.5 : périodes écrites en clair dans la vue Direction ---------- */
.dir-periode{margin-top:10px;padding:10px 14px;background:var(--surface-2);border-radius:8px;font-size:13px;color:var(--gris)}
.dir-periode p{margin:2px 0}
.dir-periode b{color:var(--texte);font-weight:600}
/* 3.42.8 : graphique du CA — mois en cours et mois à venir */
.fh-mois.futur span{color:var(--trait-fort)}
.fh-mois.cours span{color:var(--texte);font-weight:600}
.fh-leg-note{margin-left:auto}
.menu-version{display:block;padding:2px 12px 6px;font-size:12px;color:var(--gris)}
.menu-moi .menu-jaune{color:#fff!important}
:root[data-theme="sombre"] .menu-moi .menu-jaune{color:#0F1714!important}

/* ---------- 3.45.5 : vue Direction intégrée dans l'intranet ---------- */
.cm-integre .lv-entete, .cm-integre #cm-onglets, .cm-integre .bandeau-test { display: none !important; }
.cm-integre body { background: transparent; }
.cm-integre .lv-main { padding-top: 0; max-width: none; margin: 0; }
.cm-integre #v-direction .vue-tete h1 { font-size: 22px; }
@media (min-width:1200px){.dir-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.cm-integre .lv-main, .cm-integre .cm-rubrique { padding: 0 !important; margin: 0 !important; }
.cm-integre body { padding: 0 !important; }