:root {
  /* Thème clair et chaleureux (crème, sable, brun-olive), volontairement unique : l'appli ne
     suit PAS le mode sombre du téléphone (demande du client, 2026-09-21). */
  color-scheme: light;
  --sol: #f8f3e9;
  --surface: #fffdf8;
  --surface-2: #f4eddf;
  --encre: #2f2b1c;
  --doux: #6d6753;
  --trait: #e6dcc7;
  /* Vert ES : couleur web de la charte graphique (Pantone 5757 EC = #686d1e) */
  --marque: #686d1e;
  --marque-fond: #eef0d6;
  --sur-marque: #ffffff;
  --grenat: #8a1c3f;
  --grenat-fond: #f8e8ea;
  --verre: #1e5a48;
  --verre-fond: #e4f0e6;
  --ambre: #9a5f08;
  --ambre-fond: #fcf0d6;
  --gris: #8b8672;
  /* Client perdu (2026-09-24) : teinte distincte des statuts existants (bordeaux, vert, ambre, gris) */
  --violet: #6b3fa0;
  --violet-fond: #f0e8f8;
  /* Cible (2026-10-07) : orange vif, distinct du bordeaux des prospects ; texte lisible sur son fond (contraste ≈ 5) */
  --cible: #c2410c;
  --cible-fond: #ffedd5;
  --rouge: #b42318;
  --rouge-fond: #fce8e4;
  --carte-mer: #dfeaea;
  --carte-dep: #fffdf7;
  --carte-autre: #ede6d6;
  --carte-bord: #cbbfa4;
  --ombre: 0 8px 28px rgba(72, 56, 20, 0.15);
  --s-appel: #2f6fc4;
  --s-visite: #c8661e;
  --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texte: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --nav-h: 62px;
}

/* Logotype ES (charte graphique), version couleur sur fond clair. On garde autour du logo
   une zone libre proche d'une fois sa hauteur ("blancs tournants"). */
.logo { display: block; flex: none; }
.logo img { display: block; height: 100%; width: auto; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--sol); color: var(--encre);
  font: 15px/1.45 var(--f-texte); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.88em; letter-spacing: -0.01em; }
[hidden] { display: none !important; }

/* ---------- Coque ---------- */
#app { height: 100%; display: flex; flex-direction: column; }
.entete {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--surface); border-bottom: 1px solid var(--trait);
}
.entete .logo { height: 28px; margin: 0 10px 0 4px; }
.entete h1 { font: 700 20px/1.1 var(--f-titre); margin: 0; letter-spacing: -0.02em; flex: 1; min-width: 0; }
.entete h1 small { display: block; font: 500 11px/1.3 var(--f-texte); color: var(--doux); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.pastille-sync {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trait); background: var(--surface-2);
  border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--doux); white-space: nowrap;
}
.pastille-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--verre); }
.bouton-icone { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface-2); display: grid; place-items: center; color: var(--doux); }
.bouton-icone svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bouton-icone[aria-pressed="true"] { background: var(--marque-fond); border-color: var(--marque); color: var(--marque); }
.pastille-sync.hors i { background: var(--ambre); }
.pastille-sync.encours i { background: var(--marque); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: 0.3; } }
.bandeau-demo { flex: none; background: var(--ambre-fond); color: var(--ambre); font-size: 12px; padding: 5px 16px; text-align: center; }
/* Bandeau « nouvelle version de l'appli » (2026-10-06) : bouton discret dans le texte */
#bandeau-maj button { margin-left: 10px; min-height: 28px; padding: 0 6px; background: none; border: 0; color: inherit; font: 700 12px var(--f-texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* téléphone en paysage : le bandeau ne doit pas faire sortir les boutons ronds de la carte */
@media (max-height: 450px) { #bandeau-maj { padding: 2px 16px; } #bandeau-maj button { min-height: 22px; } }

.vue { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vue.pleine { overflow: hidden; position: relative; }
.contenu { padding: 14px 16px calc(var(--nav-h) + 24px); max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(var(--nav-n, 5), minmax(0, 1fr));
  background: var(--surface); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav button {
  border: 0; background: none; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--doux); font-size: 10.5px; font-weight: 500; min-width: 0; padding: 0 1px; white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (max-width: 359px) { .nav button { font-size: 9.5px; letter-spacing: -0.02em; } .nav button svg { width: 21px; height: 21px; } }
@media (min-width: 600px) { .nav button { font-size: 11px; letter-spacing: 0; } }
.nav button svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: var(--marque); }
.nav button[aria-current="page"] svg { stroke-width: 2.2; }
/* Six onglets (direction : Tarifs en plus, 2026-10-01) : même barre, libellés un peu plus serrés pour que « Prospection » tienne */
.nav.six button { font-size: 10px; letter-spacing: -0.03em; padding: 0; }
.nav.six button svg { width: 22px; height: 22px; }
@media (max-width: 359px) { .nav.six button { font-size: 9px; letter-spacing: -0.04em; } .nav.six button svg { width: 20px; height: 20px; } }
@media (min-width: 600px) { .nav.six button { font-size: 11px; letter-spacing: 0; } .nav.six button svg { width: 23px; height: 23px; } }

/* ---------- Éléments ---------- */
.recherche { display: flex; gap: 8px; }
.champ, .recherche input, select.champ {
  width: 100%; min-width: 0; height: 42px; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface);
  padding: 0 12px;
}
textarea.champ { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; }
.puces { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.puces::-webkit-scrollbar { display: none; }
.puce {
  flex: none; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.puce[aria-pressed="true"] { background: var(--marque-fond); color: var(--encre); border-color: var(--marque); font-weight: 600; }
.puce .pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Pastilles des puces de la carte, même dessin que les points (2026-10-07 : classes au lieu de styles écrits dans app.js) */
.puce .pt.client { background: var(--verre); }
.puce .pt.prospect { background: var(--surface); box-shadow: inset 0 0 0 2px var(--grenat); }
.puce .pt.clientPerdu { background: var(--violet); border-radius: 2px; }
.puce .pt.cible { width: 11px; height: 11px; background: radial-gradient(circle, var(--cible) 0 22%, var(--surface) 26% 50%, var(--cible) 54%); }
.puce b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* (2026-10-13) Onglets de la liste des clients (CA / En baisse / En hausse / Nouveau) : les quatre doivent tenir sans défiler sur un téléphone de 320 à 375 px ;
   à partir de ~600 px de large l'espacement redevient celui des autres puces (12 px). */
.puces.onglets-clients .puce { padding: 6px clamp(6px, 2vw, 12px); }
@media (max-width: 340px) { .puces.onglets-clients { gap: 4px; } .puces.onglets-clients .puce { font-size: 12px; } }

.liste { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.ligne {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--trait);
}
.ligne:first-child { border-top: 0; }
button.ligne:active { background: var(--surface-2); }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .t.multi { white-space: normal; overflow-wrap: anywhere; }
.ligne .s { color: var(--doux); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .d { text-align: right; flex: none; }
.ligne .d .t { font-variant-numeric: tabular-nums; }
.vide { padding: 28px 16px; text-align: center; color: var(--doux); }

.etiq { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.etiq.bon { background: var(--verre-fond); color: var(--verre); }
.etiq.moyen { background: var(--ambre-fond); color: var(--ambre); }
.etiq.faible { background: var(--rouge-fond); color: var(--rouge); }
.etiq.neutre { background: var(--surface-2); color: var(--doux); border: 1px solid var(--trait); }
.etiq.prospect { background: var(--grenat-fond); color: var(--grenat); }
.etiq.client { background: var(--verre-fond); color: var(--verre); }
.etiq.relance { background: var(--ambre-fond); color: var(--ambre); }
.etiq.perdu { background: var(--surface-2); color: var(--gris); }
.etiq.clientPerdu { background: var(--violet-fond); color: var(--violet); }
.etiq.cible { background: var(--cible-fond); color: var(--cible); }
/* Encadré « Client perdu » de la fiche domaine (2026-09-24) */
.encart-perdu { border: 1px solid var(--violet); background: var(--violet-fond); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.encart-perdu .t { font-weight: 600; color: var(--violet); margin-bottom: 4px; }
.encart-perdu .s { color: var(--encre); font-size: 13px; line-height: 1.45; }
.encart-perdu table.tab { margin-top: 8px; background: var(--surface); border-radius: 8px; }
.encart-perdu table.tab th, .encart-perdu table.tab td { padding: 6px 6px; text-align: right; }
/* Factures échues non réglées (2026-09-29) : encadré rouge cliquable en tête de fiche client */
.encart-impaye { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 11px 14px; border: 1px solid var(--rouge); border-radius: 12px; background: var(--rouge-fond); color: var(--rouge); font: inherit; text-align: left; cursor: pointer; }
.encart-impaye:active { filter: brightness(.97); }
.encart-impaye .l { font-weight: 600; font-size: 14px; min-width: 0; }
.encart-impaye .v { font-family: var(--f-titre, inherit); font-weight: 700; font-size: 20px; white-space: nowrap; }
.encart-impaye .s { grid-column: 1 / -1; color: var(--encre); font-size: 12.5px; }
.tuile.tuile-impaye { border-color: var(--rouge); background: var(--rouge-fond); }
.tuile.tuile-impaye .l, .tuile.tuile-impaye .v { color: var(--rouge); }
.retard { color: var(--rouge); font-weight: 600; font-size: 12px; white-space: nowrap; }

.titre-section { font: 600 12px/1 var(--f-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux); margin: 6px 2px -4px; display: flex; justify-content: space-between; align-items: baseline; }
.titre-section span { letter-spacing: 0; text-transform: none; font-weight: 500; }
/* Rubriques repliables de la fiche (Factures matières sèches / Factures MEB / Autres documents, 2026-09-29) */
.rubriques { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.deroule { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); color: var(--encre); font: 600 15px/1.2 var(--f-texte); text-align: left; cursor: pointer; }
.deroule .t { flex: 1; min-width: 0; }
.deroule .n { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--doux); font: 600 12.5px/1.4 var(--f-texte); text-align: center; font-variant-numeric: tabular-nums; }
.deroule svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.deroule[aria-expanded="true"] { border-color: var(--marque); background: var(--marque-fond); }
.deroule[aria-expanded="true"] svg { transform: rotate(180deg); }
.deroule:active { filter: brightness(.97); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--trait); background: var(--surface); font-weight: 600; text-decoration: none; color: var(--encre);
}
.bouton.principal { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.bouton { white-space: nowrap; }
.bouton svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.actions .principal, .actions .large { grid-column: 1 / -1; }
/* 2 boutons côte à côte (tournée), jamais 3 colonnes trop étroites ; sur téléphone le texte passe sur 2 lignes
   plutôt que de déborder */
.actions.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actions.deux > .bouton:not(.principal):not(.large) { white-space: normal; line-height: 1.15; padding: 0 10px; text-align: center; }
.bouton.actif { background: var(--marque-fond); border-color: var(--marque); color: var(--marque); }
.bouton.danger { color: var(--rouge); }
.bouton.demarrer { background: var(--encre); border-color: var(--encre); color: var(--surface); } /* « Démarrer la tournée » */
/* Bouton à texte long (ex. « Afficher les N autres documents (devis, commandes…) ») : passe à la ligne au lieu de déborder (2026-09-28) */
.bouton.bouton-texte { white-space: normal; height: auto; min-height: 32px; padding: 6px 12px; line-height: 1.25; text-align: left; justify-content: flex-start; max-width: 100%; }
.bouton:disabled { opacity: 0.45; }
.note { margin: 0; font-size: 12px; color: var(--doux); }

/* ---------- Tournée ---------- */
.resume-tournee { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.resume-tournee .lien-doc { margin-left: auto; font-size: 13px; }
.arret { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "num corps" ". outils"; gap: 4px 10px; padding: 10px 12px; border-top: 1px solid var(--trait); }
.arret:first-child { border-top: 0; }
.arret .num { grid-area: num; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; font: 700 14px var(--f-texte); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.arret.fait .num { background: var(--gris); }
.arret .num svg, .arret .outils svg, .mini svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arret .corps { grid-area: corps; min-width: 0; }
.arret .nom { display: block; max-width: 100%; text-align: left; background: none; border: 0; padding: 0; font-weight: 600; font-size: 15px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arret.fait .nom { text-decoration: line-through; color: var(--doux); }
.arret .s { color: var(--doux); font-size: 13px; }
.arret .outils { grid-area: outils; display: flex; flex-wrap: wrap; gap: 6px; }
.arret .outils button, .arret .outils a { width: 40px; height: 36px; border-radius: 9px; border: 1px solid var(--trait); background: var(--surface); display: grid; place-items: center; color: var(--encre); }
.arret .outils :disabled { opacity: 0.35; }
#tournee-q { margin-bottom: 8px; }
.ligne-act { display: flex; align-items: stretch; border-top: 1px solid var(--trait); }
.ligne-act:first-child { border-top: 0; }
.ligne-act .ligne { flex: 1; min-width: 0; border-top: 0; }
.mini { flex: none; width: 54px; border: 0; border-left: 1px solid var(--trait); background: none; display: grid; place-items: center; color: var(--marque); }
.mini.actif { background: var(--marque-fond); }
.mini.etroit { width: 44px; } /* bouton « tournée » de la liste des clients : laisse plus de place au nom */

/* ---------- Indicateurs ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .contenu .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tuile .l { font-size: 12px; color: var(--doux); }
.tuile .v { font: 700 24px/1.1 var(--f-titre); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tuile .v small { font: 500 13px var(--f-texte); color: var(--doux); }
.jauge { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--trait); overflow: hidden; margin-top: 4px; }
.jauge i { display: block; height: 100%; background: var(--verre); border-radius: 3px; }
.jauge.retard i { background: var(--ambre); }
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 14px; }
.graph svg { width: 100%; height: auto; display: block; }
.graph text { fill: var(--doux); font: 10px var(--f-texte); font-variant-numeric: tabular-nums; }
.defile-x { overflow-x: auto; }
table.tab { border-collapse: collapse; width: 100%; font-size: 13px; }
table.tab th { text-align: left; font-weight: 600; color: var(--doux); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
table.tab td { padding: 8px; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; vertical-align: top; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab .r { text-align: right; white-space: nowrap; }
/* Lignes d'un document sur téléphone (2026-09-29) : 4-5 colonnes dans ~340 px sans défilement horizontal */
@media (max-width: 480px) { table.lignes-doc th, table.lignes-doc td { padding-left: 4px; padding-right: 4px; } table.lignes-doc td:first-child { padding-left: 8px; } }
.lien-doc { background: none; border: 0; padding: 0; font: inherit; color: var(--marque); text-decoration: underline; white-space: nowrap; }
.coche-sage, .coche-suivi { display: inline-block; vertical-align: -2px; }
.coche-sage svg, .coche-suivi svg { width: 13px; height: 13px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coche-sage svg { stroke: var(--verre); }
.coche-suivi svg { stroke: var(--marque); }
table.tab tr.annee td { background: var(--surface-2); color: var(--doux); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; }
table.tab tr.annee.perime td { color: var(--ambre); background: var(--ambre-fond); }
table.tab tr.annee:not(.perime) td { color: var(--marque); background: var(--marque-fond); }
/* Historique MEB : ligne reliée à sa facture (toucher la date ou la ligne l'ouvre) */
table.tab tr.meb-lien { cursor: pointer; }
table.tab tr.meb-lien:hover td { background: var(--surface-2); }
table.tab tr.meb-lien .lien-doc { cursor: pointer; white-space: normal; text-align: left; }
.nb-factures { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 17px; background: var(--marque-fond); color: var(--marque); white-space: nowrap; }
.note-avoir { display: block; font-size: 11px; line-height: 15px; color: var(--doux); white-space: nowrap; }
/* Onglet Stats */
.bloc.stat-bloc { padding: 4px 6px; }
table.tab.stat { font-size: 12.5px; }
table.tab.stat th, table.tab.stat td { padding: 7px 5px; }
table.tab.stat td .s { display: block; color: var(--doux); font-size: 11px; font-weight: 400; white-space: nowrap; }
table.tab.stat td:first-child { white-space: nowrap; }
table.tab.stat .lien-doc { white-space: normal; text-align: left; }
table.tab.stat tr.vide-mois td { color: var(--doux); }
table.tab.stat tr.total td { background: var(--surface-2); border-top: 1px solid var(--trait); }
.tuile .evo { font-size: 12px; color: var(--doux); font-variant-numeric: tabular-nums; }
/* (2026-10-15) « dont BBC » : ventes de bouchons de BBC comprises dans la matière sèche, en petit */
.dont-bbc { display: block; font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--doux); font-variant-numeric: tabular-nums; }
table.stat td .dont-bbc { margin-top: 1px; }
table.stat-bbc td:first-child .s { font-weight: 400; }
table.tab.stat.stat-bbc td:first-child, table.tab.stat.stat-bbc td:first-child .s { white-space: normal; }
table.tab.stat td .dont-bbc, table.tab.stat td .s.dont-bbc { white-space: normal; line-height: 1.25; }
@media (max-width: 480px) { table.tab.stat.stat-bbc th, table.tab.stat.stat-bbc td { padding-left: 4px; padding-right: 4px; } table.tab.stat.stat-bbc td:first-child .s { font-size: 10.5px; } }
.tuile .evo small { font-size: 11px; }
.tuile .evo.hausse { color: var(--verre); font-weight: 600; }
.tuile .evo.baisse { color: var(--rouge); font-weight: 600; }
/* CA moyen / jour de mise en bouteille (2026-10-09) : côte à côte avec le PMV depuis le 2026-10-15 (plus aucune tuile « pleine » sur la fiche), la note passe dessous */
.tuile.cajour { min-width: 0; }
.tuile.cajour .l { flex: 1 1 auto; } /* deux tuiles côte à côte dont un libellé passe sur 2 lignes : les valeurs restent alignées en bas */
.tuile.pleine { grid-column: 1 / -1; }
.tuiles .note-cajour { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.4; color: var(--doux); }
/* Détail du CA moyen / jour (2026-10-13) : la tuile s'ouvre sur la liste des chantiers ; incidents (pannes…) en rouge */
button.tuile.cajour { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.tuile.cajour:active { background: var(--surface-2); }
.tuile .voir { display: inline-flex; align-items: center; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--marque); }
.tuile .voir svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ligne.cj { align-items: flex-start; }
.ligne.cj .t { white-space: normal; overflow: visible; }
.ligne.cj .cj-site { margin-left: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--marque); }
.ligne.cj .s { white-space: normal; overflow: visible; }
.ligne.cj .d { padding-top: 1px; }
.ligne.cj .d .t small { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--doux); }
.ligne.cj .cj-non { font-size: 12px; font-weight: 500; color: var(--doux); white-space: nowrap; }
.ligne.cj .cj-note { display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--trait); background: var(--surface-2); color: var(--doux); font-size: 12px; font-weight: 600; }
.ligne.cj.alerte { background: var(--rouge-fond); }
button.ligne.cj.alerte:active { background: var(--rouge-fond); filter: brightness(.97); }
.ligne.cj.alerte .t, .ligne.cj.alerte .cj-site, .ligne.cj.alerte .s, .ligne.cj.alerte .d .t, .ligne.cj.alerte .d .t small, .ligne.cj.alerte .cj-non { color: var(--rouge); }
.ligne.cj.alerte .cj-note { border-color: var(--rouge); background: var(--rouge); color: var(--surface); }
.ligne.cj .cj-raison { color: var(--ambre); font-weight: 600; }
.tuile .evo.perte { color: var(--rouge); font-weight: 600; }
.tuile .evo b { color: var(--encre); font-weight: 700; }
.ligne.cj.attente { background: var(--surface-2); }
.ligne.cj.attente .t { color: var(--doux); }
/* Répartition discrète du CA sous la tuile (« dont MEB … · MS … », 2026-09-29) */
.tuile .detail { font-size: 11.5px; line-height: 1.3; color: var(--doux); font-variant-numeric: tabular-nums; }
/* (2026-10-14) PMV et CA moyen / jour des Stats : la ligne « avec MICRO et COMPACT » en petit sous le prix principal */
.tuile.pmv .detail { margin-top: 2px; }
.tuile.pmv .detail b { color: var(--encre); font-weight: 600; }
.note-rentab { margin: 0; font-size: 12px; line-height: 1.4; color: var(--doux); }
table.stat-rentab td.r { white-space: nowrap; }
/* (2026-10-15) ligne « avec EVA » sous la ligne d'un commercial (ou de l'équipe) : mêmes colonnes, en petit */
table.stat-rentab tr.sans-bas td { border-bottom: 0; }
/* sélecteur plus précis que « table.tab.stat.stat-parco td.r » (≤ 480 px) : sinon les chiffres de la sous-ligne restent en 12 px sur téléphone */
table.tab.stat.stat-parco.stat-rentab tr.avec-groupe td { padding-top: 0; color: var(--doux); font-size: 11.5px; }
table.stat-rentab tr.avec-groupe td b { font-weight: 600; color: var(--doux); }
table.stat-rentab tr.avec-groupe td:first-child .s { display: block; white-space: normal; font-style: italic; }
/* Tuiles « à date » de la fiche client (2026-10-13) : année en cours seule, puis évolution en % et en brut, « vs N-1 à date » en petit */
.tuile.adate { min-width: 0; }
.tuile.adate .l { flex: 1 1 auto; } /* deux tuiles côte à côte dont un libellé passe sur 2 lignes : les valeurs restent alignées */
.tuile.adate .evo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; }
.tuile.adate .evo b { font-weight: 700; }
.tuile.adate .evo i { font-style: normal; font-weight: 600; }
.tuile.adate .vs { font-size: 11px; line-height: 1.2; color: var(--doux); }
/* Stats matières sèches d'un client (2026-09-29) */
table.stats-ms .evo { font-size: 11.5px; font-weight: 600; }
table.stats-ms .evo.hausse { color: var(--verre); }
table.stats-ms .evo.baisse { color: var(--rouge); }
table.stats-ms th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
table.stats-ms th { white-space: normal; vertical-align: bottom; }
/* En-tête figé (2026-10-13, demande de Guillaume) : « 2026 / 2025 à date / 2025 total » reste visible quand on descend dans les articles.
   Le défilement est celui du corps de la fenêtre (.panneau-corps) : le tableau ne doit donc pas être dans un conteneur à défilement
   horizontal (.defile-x), sinon le collant s'y accrocherait et ne bougerait plus. */
table.stats-ms thead th { position: sticky; top: -14px; z-index: 3; background: var(--surface); box-shadow: 0 1px 0 var(--trait); } /* -14px = marge haute de .panneau-corps : l'en-tête se colle au bord, sans laisser voir les lignes qui défilent au-dessus */
table.stats-ms td:first-child { overflow-wrap: anywhere; }
/* (2026-10-09) Ligne « PV · PA · taux de marge sur PA » sous chaque article ; total de la famille dans son en-tête */
table.stats-ms .prix { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--doux); }
table.stats-ms .prix b { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
table.stats-ms .prix .anc { font-size: 11px; font-style: italic; }
table.stats-ms tr.annee.famille td { vertical-align: middle; }
table.stats-ms tr.annee.famille td.r { font-size: 13px; text-transform: none; letter-spacing: 0; }
table.stats-ms tr.annee.famille small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--doux); }
/* Titre de famille sur toute la largeur, puis sa ligne de total ; la ligne « PV · PA · taux » prend toute la largeur sous l'article (mesuré sur 375 px : 1 rangée au lieu de 2 à 4, panneau 20 % moins haut) */
table.stats-ms tr.annee.famille.total-ligne td { padding-top: 2px; }
table.stats-ms tr.avec-prix td { border-bottom: 0; padding-bottom: 2px; }
table.stats-ms tr.ligne-prix td { padding-top: 0; padding-bottom: 9px; }
table.stats-ms tr.ligne-prix .prix { margin-top: 0; }
@media (max-width: 480px) { table.stats-ms td:first-child { font-size: 12.5px; } table.stats-ms td .mono { font-size: 11px; } table.stats-ms th, table.stats-ms td.r { padding-left: 3px; padding-right: 3px; } table.stats-ms .prix { font-size: 11.5px; } }
/* Tableau « Équipe » de l'onglet Activité (2026-10-12) : l'en-tête « Marge MS 12 m sur PA » élargissait le tableau au-delà de l'écran (481 px pour 341 à 375 px) */
@media (max-width: 480px) { table.tab.equipe th { white-space: normal; vertical-align: bottom; padding-left: 4px; padding-right: 4px; letter-spacing: 0.02em; font-size: 10.5px; } table.tab.equipe td { padding-left: 4px; padding-right: 4px; } }
.deroule.lien-stats { margin: 0; }
.deroule.lien-stats svg:first-child { color: var(--marque); }
.deroule.lien-stats svg:last-child { transform: rotate(-90deg); }
/* « Prépa RDV » (2026-10-15) : résumé de la fiche client avant la visite (bouton de la fiche + fenêtre large) */
.deroule.lien-prepa { margin: 0; border-color: var(--marque); }
.deroule.lien-prepa svg:first-child { color: var(--marque); }
.deroule.lien-prepa svg:last-child { transform: rotate(-90deg); }
.prepa-signaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prepa-signaux li { padding: 8px 10px; border-left: 4px solid var(--trait); border-radius: 0 10px 10px 0; background: var(--surface); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.prepa-signaux li.hausse { border-left-color: var(--verre); }
.prepa-signaux li.baisse { border-left-color: var(--rouge); }
.prepa-signaux li.alerte { border-left-color: var(--ambre); background: var(--ambre-fond); }
.prepa-acts, .prepa-liste, .prepa-points { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.prepa-act, .prepa-ligne, .prepa-point { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--trait); background: none; font: inherit; color: inherit; text-align: left; }
.prepa-act:first-child, .prepa-ligne:first-child, .prepa-point:first-child { border-top: 0; }
button.prepa-ligne, button.prepa-point { cursor: pointer; }
button.prepa-ligne:active, button.prepa-point:active { background: var(--surface-2); }
.prepa-act .g, .prepa-ligne .g { flex: 1; min-width: 0; }
.prepa-act .t, .prepa-ligne .t { font-weight: 600; overflow-wrap: anywhere; }
.prepa-act .t .etiq { margin-left: 4px; vertical-align: 1px; }
.prepa-act .s, .prepa-ligne .s { margin-top: 2px; color: var(--doux); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.prepa-act .aide { display: block; margin-top: 2px; color: var(--doux); font-size: 11.5px; line-height: 1.3; }
.prepa-act .d, .prepa-ligne .d { flex: none; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.prepa-act .vs, .prepa-ligne .vs { color: var(--doux); font-size: 11.5px; line-height: 1.3; }
.prepa-act .evo, .prepa-ligne .evo { font-size: 12px; font-weight: 600; }
.prepa-act .evo.hausse, .prepa-ligne .evo.hausse, .prepa-ligne .num.hausse { color: var(--verre); }
.prepa-act .evo.baisse, .prepa-ligne .evo.baisse, .prepa-ligne .num.baisse { color: var(--rouge); }
.prepa-act.jamais .t { color: var(--doux); }
.prepa-sous { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px -6px; font: 600 13.5px/1.25 var(--f-texte); color: var(--encre); }
.prepa-sous span { margin-left: 8px; font-weight: 500; font-size: 12px; color: var(--doux); }
.prepa-reste { margin: 0; font-size: 12px; }
.prepa-point { flex-direction: column; gap: 2px; }
.prepa-point b { font-weight: 600; }
.prepa-point span { color: var(--doux); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.prepa-point.alerte { background: var(--ambre-fond); }
.prepa-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prepa-texte { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: var(--encre); font: 12.5px/1.4 var(--f-mono); resize: vertical; }
@media (max-width: 480px) { .prepa-act .d, .prepa-ligne .d { max-width: 42%; } .prepa-act, .prepa-ligne, .prepa-point { padding: 9px 10px; } }
/* 3 tuiles : le total sur toute la largeur sur téléphone, puis MEB et MS côte à côte ; 3 colonnes sur grand écran.
   Sur les tout petits écrans (≤ 349 px), un montant à 7 chiffres ne tient plus à deux par ligne : une seule colonne. */
.tuiles.trois .tuile:first-child { grid-column: 1 / -1; }
.tuiles.trois .tuile:not(:first-child) .v { font-size: 22px; }
.tuiles.trois .tuile { min-width: 0; }
@media (max-width: 349px) { .tuiles.trois { grid-template-columns: 1fr; } }
table.tab.stat tr.total td:first-child { white-space: normal; }
@media (max-width: 359px) { table.tab.stat { font-size: 12px; } table.tab.stat th, table.tab.stat td { padding: 7px 3px; } }
/* (2026-10-13) Tableau « Par commercial » : montants avec le symbole € (jusqu'à 7 chiffres) → colonnes resserrées sur téléphone pour ne jamais déborder à 375 px */
@media (max-width: 480px) { table.tab.stat.stat-parco th, table.tab.stat.stat-parco td { padding-left: 3px; padding-right: 3px; } table.tab.stat.stat-parco td.r { font-size: 12px; } table.tab.stat.stat-parco td .s { font-size: 10.5px; } }
/* Graphiques : sur grand écran, on limite la hauteur pour ne pas occuper tout l'écran */
.graph svg { max-height: 320px; }
@media (min-width: 600px) { .contenu .tuiles.trois { grid-template-columns: repeat(3, 1fr); } .tuiles.trois .tuile:first-child { grid-column: auto; } }

/* ---------- Carte ---------- */
.carte { position: absolute; inset: 0; background: var(--carte-mer); touch-action: none; }
.carte canvas { display: block; width: 100%; height: 100%; }
.carte-haut { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 5; pointer-events: none; }
.carte-haut > * { pointer-events: auto; }
.carte-haut .recherche input, .carte-haut select { box-shadow: var(--ombre); border-color: transparent; }
.carte-haut .puce { box-shadow: 0 2px 8px rgba(72, 56, 20, 0.14); border-color: transparent; }
.carte-haut .puce[aria-pressed="true"] { border-color: var(--marque); }
.carte-boutons { position: absolute; right: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.rond { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--ombre); display: grid; place-items: center; color: var(--encre); }
.rond svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rond[aria-pressed="true"] { background: var(--marque); color: var(--sur-marque); }
.pastille-n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--grenat); color: #fff; font: 700 11px/20px var(--f-texte); text-align: center; box-shadow: 0 0 0 2px var(--surface); font-variant-numeric: tabular-nums; }
.carte-credit { position: absolute; right: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1px); z-index: 4; font-size: 10px; line-height: 12px; color: var(--doux); background: rgba(255, 253, 248, 0.78); padding: 0 5px; border-radius: 4px; pointer-events: none; }
.carte-info { position: absolute; left: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px); z-index: 5; background: var(--surface); box-shadow: var(--ombre); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--doux); max-width: calc(100% - 90px); }
.carte-credit a { color: inherit; pointer-events: auto; }
/* « Démarrer la tournée » sur la carte (2026-09-28) : au-dessus du compteur de domaines, à gauche des boutons ronds */
.demarrer-carte { position: absolute; left: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 56px); z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 23px; background: var(--encre); color: var(--surface); font: 700 14px var(--f-texte); text-decoration: none; box-shadow: var(--ombre); max-width: calc(100% - 90px); }
.demarrer-carte[hidden] { display: none; }
.demarrer-carte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demarrer-carte svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carte-credit { pointer-events: auto; }
@media (min-width: 900px) {
  .carte.avec-panneau .carte-boutons { right: 472px; }
  .carte.avec-panneau .carte-credit { right: 468px; }
}
.aide-ajout { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -34px 0 0 -17px; z-index: 6; pointer-events: none; color: var(--marque); }

/* ---------- Panneau (fiche) ---------- */
.voile { position: fixed; inset: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) 0; background: rgba(60, 48, 20, 0.32); z-index: 30; animation: fondu 0.18s ease-out; }
.panneau {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); z-index: 31; max-height: calc(100% - var(--nav-h) - 40px); display: flex; flex-direction: column;
  background: var(--sol); border-radius: 18px 18px 0 0; box-shadow: var(--ombre); animation: monte 0.22s ease-out;
}
@media (min-width: 900px) {
  .panneau { left: auto; top: 0; width: 460px; max-height: none; border-radius: 0; animation: glisse 0.22s ease-out; }
  /* Documents, tarifs et factures échues (2026-09-29, demande du client : « la fenêtre doit être plus large
     pour que l'affichage soit plus clair ») : tableaux de lignes lisibles sans défilement horizontal */
  .panneau.large { width: min(900px, calc(100vw - 120px)); }
}
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
@keyframes glisse { from { transform: translateX(40px); opacity: 0; } }
@keyframes fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panneau, .voile { animation: none; } .pastille-sync.encours i, .logo-attente { animation: none; } }
.panneau-tete { flex: none; padding: 10px 16px 12px; border-bottom: 1px solid var(--trait); background: var(--surface); border-radius: inherit; display: flex; gap: 10px; align-items: flex-start; }
.panneau-tete::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; border-radius: 2px; background: var(--trait); transform: translateX(-50%); }
.panneau-tete h2 { font: 700 20px/1.15 var(--f-titre); margin: 10px 0 4px; letter-spacing: -0.02em; text-wrap: balance; }
.panneau-tete .s { color: var(--doux); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.panneau-tete .fermer { margin-top: 8px; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface-2); display: grid; place-items: center; }
.panneau-tete .fermer svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; }
.panneau-corps > *, .contenu > * { flex-shrink: 0; }
.panneau-corps { overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.infos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.infos dt { color: var(--doux); }
.infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.infos a { color: var(--marque); }

.journal { display: flex; flex-direction: column; gap: 0; }
.entree { padding: 10px 0 10px 16px; border-left: 2px solid var(--trait); position: relative; }
.entree::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--marque); }
.entree.visite::before, .entree.passage::before, .entree.rdv::before { border-color: var(--verre); background: var(--verre); }
.entree .m { font-size: 12px; color: var(--doux); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.entree p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } /* (2026-10-27) mise en page du compte-rendu telle qu'écrite : retours à la ligne, espaces, majuscules */
/* Anciens comptes-rendus : une ligne « Appel · date », ouverte d'un appui */
.entree.entree-resume { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; margin: 0; border: 0; border-left: 2px solid var(--trait); border-radius: 0; background: none; font: inherit; font-size: 14px; color: var(--encre); text-align: left; cursor: pointer; }
.entree.entree-resume i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--marque); }
.entree .modif-cr.apres { margin-left: 0; }
.attente { color: var(--ambre); font-weight: 600; }
.entree .modif-cr { margin-left: auto; height: 32px; padding: 0 12px; } /* (2026-10-21) « Modifier » un compte-rendu : à droite de la ligne, passe dessous si elle est pleine */

.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--doux); }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 10px; padding: 3px; gap: 3px; }
.segment button { border: 0; background: none; border-radius: 7px; height: 36px; font-weight: 600; color: var(--doux); font-size: 14px; }
.segment button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* (2026-10-12) Dictée vocale retirée de l'appli (décision de Guillaume) : plus de bouton micro dans le compte-rendu */

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 50; background: var(--encre); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-weight: 500; box-shadow: var(--ombre); max-width: calc(100% - 32px); }
/* Bouton dans le message (ex. « Annuler » après la suppression d'un prospect, 2026-09-28) */
.toast button, .toast a { margin-left: 14px; min-height: 32px; padding: 0 4px; background: none; border: 0; color: var(--surface); font: 700 14px var(--f-texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* « Nb de cols » (2026-10-09) : encart à part sous le commentaire du compte-rendu, première ligne des infos de la fiche */
.encart-cols { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
.encart-cols label { color: var(--encre); font-size: 14px; }
.encart-cols input { font-size: 16px; } /* 16 px : iOS ne zoome pas la page à la prise de focus */
.encart-cols p { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--doux); }
/* Chiffre déjà renseigné (2026-10-21) : une ligne + « Modifier » au lieu du champ */
.encart-cols.deja { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--encre); }
.encart-cols.deja > span { flex: 1 1 180px; min-width: 0; }
.encart-cols.deja .cols { font: 700 16px/1.2 var(--f-titre); font-variant-numeric: tabular-nums; }
.encart-cols.deja .doux { color: var(--doux); font-size: 12.5px; }
.encart-cols.deja .bouton { flex: none; height: 34px; padding: 0 14px; }
.infos dd .cols { font: 700 16px/1.2 var(--f-titre); font-variant-numeric: tabular-nums; }
.infos .doux { color: var(--doux); font-size: 12.5px; }
/* Fiche reliée à un compte Sage : suppression impossible depuis l'appli (2026-10-09) */
.note-suppr { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: var(--doux); }
/* (2026-10-12) compte-rendu rouvert avec son brouillon */
.brouillon-repris { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--ambre-fond); color: var(--ambre); font-size: 13px; font-weight: 600; line-height: 1.4; }
.brouillon-repris span { flex: 1 1 180px; min-width: 0; }
.brouillon-repris .bouton { flex: none; height: 34px; padding: 0 14px; }

/* ---------- Connexion ---------- */
.connexion { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.connexion form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.connexion .logo { height: 76px; align-self: center; margin: 0 0 32px; }
.logo-attente { margin: 0; animation: pulse 1.2s infinite alternate; }
.connexion p { color: var(--doux); margin: 0 0 8px; text-align: center; }
.erreur { color: var(--rouge); font-weight: 500; }

/* ---------- Onglet Tarifs fournisseurs (2026-10-01) : le classeur des ADV, tel quel ---------- */
.tarifs-liste { display: flex; flex-direction: column; gap: 16px; }
.tarifs-bloc { display: flex; flex-direction: column; gap: 6px; }
.tarifs-groupe { margin: 0 4px; font: 700 12px/1 var(--f-texte); letter-spacing: 0.07em; text-transform: uppercase; color: var(--marque); }
/* Catégories de la liste (Bouteilles, Bouchage, Cartons, Capsules, Autres) */
.tarifs-categorie { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 4px 4px; padding-bottom: 6px; border-bottom: 2px solid var(--marque); font: 700 18px/1.2 var(--f-titre); color: var(--encre); }
.tarifs-categorie .n { flex: none; font: 600 12px/1 var(--f-texte); color: var(--doux); }
.tarifs-liste > .tarifs-bloc:first-child .tarifs-categorie { margin-top: 0; }
.tarifs-info { margin: 0; color: var(--doux); font-size: 12.5px; line-height: 1.45; }
.tarifs-alerte { background: var(--ambre-fond); color: var(--ambre); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.tarifs-liste .ligne .s.multi { white-space: normal; }
#tarifs-q, #tarifs-feuille-q { font-size: 16px; } /* 16 px : iOS ne zoome pas la page à la prise de focus */
/* Fenêtre d'un tarif : très large sur ordinateur, le tableau défile dans son propre cadre (en-tête collant) */
@media (min-width: 900px) { .panneau.xl { width: min(1500px, calc(100vw - 96px)); } }
.panneau.xl .panneau-corps { overflow: hidden; }
.panneau.xl .panneau-corps > .tarifs-res { flex: 1 1 auto; min-height: 0; }
.tarifs-outils { flex: none; }
.tarifs-contacts { flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.tarifs-lien { color: var(--marque); text-decoration: underline; overflow-wrap: anywhere; }
.tarifs-res { display: flex; flex-direction: column; gap: 6px; }
.tarifs-res > * { flex-shrink: 0; }
.tarifs-res > .tarifs-defil { flex: 1 1 auto; min-height: 0; }
.tarifs-nb { font-size: 12.5px; color: var(--doux); }
/* téléphone en paysage ou clavier ouvert : l'en-tête de la fenêtre se compacte pour laisser de la place au tableau */
@media (max-height: 560px) {
  .panneau.xl { max-height: calc(100% - var(--nav-h) - 6px); }
  .panneau.xl .tarifs-contacts { display: none; }
  .panneau.xl .panneau-tete { padding: 4px 14px 6px; }
  .panneau.xl .panneau-tete::before { display: none; }
  .panneau.xl .panneau-tete .s { display: none; }
  .panneau.xl .panneau-tete h2 { font-size: 16px; margin: 4px 0 0; }
  .panneau.xl .panneau-tete .fermer { margin-top: 2px; width: 32px; height: 32px; }
  .panneau.xl .panneau-corps { padding: 8px 12px 8px; gap: 6px; }
}
.tarifs-defil {
  overflow: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.tarifs-defil:focus-visible { outline-offset: -2px; }
/* Le tableau prend sa largeur naturelle (jamais écrasé à la largeur de l'écran : sur téléphone il défile latéralement dans son cadre) ; un long texte se coupe aux espaces, à 340 px au plus */
table.tarifs { border-collapse: separate; border-spacing: 0; width: max-content; font-size: 12.5px; }
table.tarifs td { padding: 5px 7px; border-bottom: 1px solid var(--trait); vertical-align: top; white-space: pre-line; max-width: 340px; overflow-wrap: break-word; }
table.tarifs td:not(.n) { overflow-wrap: anywhere; } /* un long code collé (« 1412433/1520643(2200/6600) ») se coupe plutôt que d'élargir la colonne de désignation figée */
table.tarifs td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tarifs td.deb { white-space: pre; max-width: none; }
/* titres de colonnes : centrés et en gras, comme dans Excel */
table.tarifs tr.ent td { background: var(--surface-2); font-weight: 600; font-size: 12px; text-align: center; }
table.tarifs tr.ent td.n { text-align: right; white-space: pre-line; } /* un titre au-dessus de chiffres garde ses retours à la ligne (« MARGE » / « 12 % »), sinon sa colonne s'élargit pour rien */
/* volets figés d'Excel (positions mesurées par tarifsGeler) */
table.tarifs td.gc { position: sticky; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--trait); }
table.tarifs td.gl { position: sticky; z-index: 2; background: var(--surface-2); box-shadow: 0 1px 0 var(--trait); }
table.tarifs td.gc.gl { z-index: 3; }
table.tarifs tr.ent td.gc { background: var(--surface-2); }
/* (2026-10-13) les titres de colonnes collés sont posés par tarifsGeler (td.gh, un seul tableau à la fois) : plus de ligne « collante » permanente */
table.tarifs tr.sep td { padding: 0; height: 10px; border-bottom: 0; }
table.tarifs mark { background: #fbe9a6; color: inherit; border-radius: 2px; padding: 0 1px; }
/* Lisibilité (2026-10-13, demande de Guillaume) : colonne du PA en ambre, colonnes des prix de vente (marges) en bleu, mêmes couleurs que les cases PA / PV de l'onglet
   Stocks ; une ligne touchée reste en surbrillance (vert de la charte, trait en haut et en bas) pendant qu'on fait glisser le tableau */
table.tarifs td.pa { background: #fcf0d6; }
table.tarifs td.pv { background: #e8f0fb; }
table.tarifs tr.ent td.pa { background: #f6e2b2; color: #7a4a05; }
table.tarifs tr.ent td.pv { background: #d3e3f8; color: #25518c; }
table.tarifs tr[data-i] { cursor: pointer; }
table.tarifs tr.sel td { background: #eef1d4; font-weight: 600; box-shadow: inset 0 2px 0 var(--marque), inset 0 -2px 0 var(--marque); }
table.tarifs tr.sel td.pa { background: #f7dc9c; }
table.tarifs tr.sel td.pv { background: #c8dcf5; }
table.tarifs tr.sel td.gc { box-shadow: inset 0 2px 0 var(--marque), inset 0 -2px 0 var(--marque), 1px 0 0 var(--trait); }
/* colonnes bien délimitées : un trait vertical entre toutes les colonnes, plus marqué au début de chaque groupe « PA + marges » (VIALLON, ONDUPACK : une colonne par quantité) */
table.tarifs td { border-right: 1px solid #ddd3b8; }
table.tarifs tr.ent td { border-right-color: #cfc3a0; }
table.tarifs td.pa { border-left: 2px solid #c8b784; }
/* titres de colonnes de chaque tableau figés en haut pendant qu'on descend (positions posées par tarifsGeler) */
table.tarifs td.gh { position: sticky; z-index: 2; box-shadow: 0 1px 0 var(--trait); }
table.tarifs td.gh.gc { z-index: 4; box-shadow: 1px 0 0 var(--trait), 0 1px 0 var(--trait); }
/* remarque (texte seul : note, titre de section, supplément écrit tout à droite, texte tiré d'une colonne retirée) : ramenée à gauche, en bandeau lisible, qui reste visible en
   faisant glisser le tableau */
table.tarifs tr.remarque td { padding: 7px 10px; border-right: 0; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--encre); }
table.tarifs tr.remarque td > span { position: sticky; left: 10px; display: inline-block; max-width: min(640px, calc(100vw - 90px)); white-space: pre-line; }

/* Onglet Stocks (2026-10-08) : UNE grille par ligne. Le nom avec, EN FACE, la case verte EN STOCK (quantité totale, en gros) ; dessous le PA (ambre) puis PV 10 / 15 / 20 % (bleu, une seule
   couleur), un peu plus petits que la quantité. La case EN STOCK occupe la MÊME COLONNE que PV 20 % (demande de Guillaume, soir du 2026-10-08) : mobile 3 colonnes (nom sur 2, EN STOCK sur la 3e ;
   PA pleine largeur ; PV 10 / 15 / 20 %), ordinateur 4 colonnes (nom sur 3, EN STOCK sur la 4e ; PA puis PV 10 / 15 / 20 % sur la même rangée). */
.ligne.stk { flex-direction: column; align-items: stretch; }
.stk-grille { display: grid; gap: 8px 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.stk-id { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
.stk-case { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 10px; padding: 5px 10px; min-width: 0; }
.stk-case .l { display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--doux); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-case .v { display: block; font: 700 14.5px/1.3 var(--f-titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-case .v small { font: 500 11.5px var(--f-texte); color: var(--doux); }
/* EN STOCK : vert, la plus grosse des cases, dans la colonne de PV 20 % */
.stk-case.stock { grid-column: 3; grid-row: 1; padding: 6px 10px; background: var(--marque-fond); border-color: var(--marque); container-type: inline-size; }
.stk-case.stock .l { color: var(--marque); }
.stk-case.stock .v { font-size: 22px; color: var(--encre); }
/* PA : ambre ; PV 10 / 15 / 20 % : bleu, la même couleur pour les trois */
.stk-case.pa, .tuile.pa { background: #fcf0d6; border-color: #e6cf98; }
.stk-case.pa .l, .tuile.pa .l { color: #8a5407; }
.stk-case.pv, .tuile.pv { background: #e8f0fb; border-color: #bccfea; }
.stk-case.pv .l, .tuile.pv .l { color: #2a5a99; }
.stk-case.pa { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 8px; }
.stk-case.pa .l { flex: none; }
.stk-case.pa.vide { background: none; border-style: dashed; }
.stk-case.pv { grid-row: 3; container-type: inline-size; }
/* La police suit la largeur de la case (`cqw` = 1 % de la largeur de la case) : jamais de chiffre qui déborde, même sur un téléphone de 320 px ou avec une grosse quantité.
   Dans un @supports : une déclaration qui contient var() est acceptée par un navigateur qui ne connaît pas `cqw` puis invalide au calcul (la taille ci-dessus serait perdue) ; ainsi
   les navigateurs sans `cqw` (Chrome / Android avant 105, Safari avant 16) gardent les tailles fixes de repli (22 px et 14,5 px). */
@supports (width: 1cqw) {
  .stk-case.stock .v { font-size: min(22px, calc(100cqw / (var(--n, 6) * 0.58))); }
  .stk-case.pv .v { font-size: min(14.5px, calc(100cqw / (var(--n, 10) * 0.56))); }
}
/* les deux puces (Matières sèches / Stockage PF clients) se rangent sur deux lignes sur un très petit écran au lieu d'être coupées */
.puces.plie { flex-wrap: wrap; overflow: visible; }
@media (min-width: 700px) {
  .stk-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stk-id { grid-column: 1 / 4; }
  .stk-case.stock { grid-column: 4; }
  .stk-case.pa { grid-column: 1; grid-row: 2; display: block; }
  .stk-case.pv { grid-row: 2; }
}

/* Facturation du stockage PF (2026-10-12) : petites mentions sous les dates et les clients ; tableau des palettes qui défile dans sa case sur téléphone */
.fact-note { font-size: 12px; color: var(--doux); }
.fact-tableau table { width: 100%; }
.fact-tableau td, .fact-tableau th { white-space: nowrap; }
.fact-tableau td .fact-note { white-space: normal; }
.fact-tableau tfoot td { font-weight: 600; border-top: 1px solid var(--trait); }
@media (max-width: 480px) { .fact-tableau table.tab th, .fact-tableau table.tab td { padding-left: 5px; padding-right: 5px; } }

/* ---------- Planning MEB (2026-10-13) : grille jour par jour, couleurs d'Excel ---------- */
/* Sept onglets (direction, Simon, Diana : Tarifs + Planning en plus) : libellés encore un peu plus serrés pour que « Prospection » tienne */
.nav.sept button { font-size: 9.5px; letter-spacing: -0.05em; padding: 0; }
.nav.sept button svg { width: 20px; height: 20px; }
@media (max-width: 359px) { .nav.sept button { font-size: 8.5px; letter-spacing: -0.06em; } .nav.sept button svg { width: 19px; height: 19px; } }
@media (min-width: 600px) { .nav.sept button { font-size: 11px; letter-spacing: 0; } .nav.sept button svg { width: 23px; height: 23px; } }
/* (2026-10-22) Huit onglets (ADV : « Offres à réaliser » en plus, appli surtout utilisée sur PC) : le libellé long passe sur deux lignes plutôt que de déborder */
.nav.huit button { font-size: 9px; letter-spacing: -0.05em; line-height: 1.05; white-space: normal; text-align: center; }
.nav.huit button svg { width: 19px; height: 19px; }
@media (min-width: 600px) { .nav.huit button { font-size: 11px; letter-spacing: 0; white-space: nowrap; } .nav.huit button svg { width: 23px; height: 23px; } }

.contenu.pl-contenu { max-width: none; width: 100%; height: 100%; padding: 8px 10px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px); gap: 8px; }
.pl-barre { display: flex; flex-direction: column; gap: 8px; flex: none; }
.pl-ligne { display: flex; align-items: center; gap: 8px; }
.pl-annees { flex: none; padding-bottom: 0; }
.pl-rech { flex: 1; min-width: 0; }
.pl-rech input { min-width: 0; }
.pl-mois { display: flex; align-items: center; gap: 6px; }
.pl-mois select { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); padding: 0 10px; font-weight: 600; }
.pl-mois .bouton-icone[disabled] { opacity: 0.35; cursor: default; }
.pl-auj-b { min-height: 40px; padding: 0 12px; white-space: nowrap; }
.pl-alerte { flex: none; background: var(--ambre-fond); color: var(--ambre); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.pl-res { flex: none; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.pl-res-t { padding: 6px 10px; font-size: 12px; color: var(--doux); }
.pl-res-court { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--doux); }
.pl-res-voir { border: 1px solid var(--trait); background: var(--surface-2); border-radius: 8px; padding: 0 10px; min-height: 34px; font-weight: 600; white-space: nowrap; }
.pl-res-l { max-height: 26vh; overflow-y: auto; border-top: 1px solid var(--trait); }
.pl-res-b { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--trait); background: none; padding: 8px 10px; font-size: 13px; line-height: 1.3; min-height: 38px; }
.pl-res-b:active { background: var(--marque-fond); }
.pl-info { flex: none; margin: 0; font-size: 11.5px; color: var(--doux); line-height: 1.4; }
.pl-info b { color: var(--encre); font-variant-numeric: tabular-nums; }

/* La grille défile dans sa zone : les dates (à gauche) et les camions (en haut) restent en place */
.pl-zone { position: relative; flex: 1 1 auto; min-height: 180px; overflow: auto; background: #fff; border: 1px solid var(--trait); border-radius: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pl-grille { display: grid; grid-template-columns: 62px repeat(var(--pl-n, 9), minmax(112px, 1fr)); min-width: calc(62px + var(--pl-n, 9) * 112px); }
.pl-h { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-right: 1px solid var(--trait); border-bottom: 2px solid var(--trait); padding: 7px 4px; font: 700 12px/1.2 var(--f-texte); text-align: center; white-space: nowrap; }
.pl-coin { left: 0; z-index: 5; }
.pl-d { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 2px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 3px 5px; font-size: 12px; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; min-height: 46px; }
.pl-d b { font-weight: 700; }
.pl-sem { font-size: 10px; font-weight: 700; color: var(--marque); }
.pl-tot { background: var(--surface-2); font-weight: 700; }
.pl-c { min-width: 0; min-height: 46px; background: #fff; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); overflow: hidden; color: var(--encre); }
.pl-n { padding: 3px 6px; font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
.pl-v { display: flex; flex-wrap: wrap; gap: 1px 7px; padding: 2px 6px 4px; font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pl-f { overflow-wrap: anywhere; }
.pl-cliq { cursor: pointer; }
.pl-cliq:active { filter: brightness(0.93); }
/* aujourd'hui : un filet vert au-dessus et en dessous de toute la ligne */
.pl-c.pl-auj, .pl-d.pl-auj { box-shadow: inset 0 3px 0 var(--marque), inset 0 -3px 0 var(--marque); }
.pl-d.pl-auj { box-shadow: inset 5px 0 0 var(--marque), inset 0 3px 0 var(--marque), inset 0 -3px 0 var(--marque); }
.pl-trouve { box-shadow: inset 0 0 0 3px #f59e0b; }
.pl-flash { animation: pl-flash 2.4s ease-out 1; }
@keyframes pl-flash { 0%, 55% { box-shadow: inset 0 0 0 4px var(--marque); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@media (min-width: 900px) {
  .pl-grille { grid-template-columns: 74px repeat(var(--pl-n, 9), minmax(120px, 1fr)); min-width: calc(74px + var(--pl-n, 9) * 120px); }
  .pl-n { font-size: 13px; }
  .pl-v { font-size: 12px; }
}
/* Détail d'une case */
.pl-det { display: flex; flex-direction: column; }
.pl-det-n { padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.pl-det-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--trait); }
.pl-det-e { color: var(--doux); font-size: 13px; }
.pl-det-v { font-size: 16px; padding: 1px 8px; border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* ---------- Relances et notifications (2026-10-13, demande de Guillaume : « vraiment bien visible ») ---------- */
.bouton-icone.cloche { width: 42px; height: 42px; }
.bouton-icone.cloche svg { width: 22px; height: 22px; }
.bouton-icone.cloche.a-lire { background: var(--grenat); border-color: var(--grenat); color: #fff; animation: cloche-appel 2.4s ease-in-out infinite; }
.bouton-icone.cloche.a-lire .pastille-n { top: -8px; right: -8px; min-width: 24px; height: 24px; border-radius: 12px; font-size: 13px; line-height: 24px; background: #fff; color: var(--grenat); box-shadow: 0 0 0 2px var(--grenat); }
@keyframes cloche-appel { 0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(120, 30, 40, 0); } 70% { box-shadow: 0 0 0 7px rgba(120, 30, 40, 0.28); } 85% { box-shadow: 0 0 0 0 rgba(120, 30, 40, 0); } }
@media (prefers-reduced-motion: reduce) { .bouton-icone.cloche.a-lire { animation: none; } }
.notif, .relance-carte { display: flex; width: 100%; text-align: left; gap: 10px; padding: 12px 14px; border: 1px solid var(--trait); border-left: 4px solid transparent; border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.notif.non-lue { border-left-color: var(--grenat); background: #fff7f4; }
.notif.non-lue .t { font-weight: 800; }
.notif .corps { min-width: 0; flex: 1; }
.notif .retard, .panneau-tete .retard { color: var(--grenat); }
.relance-carte { flex-direction: column; align-items: flex-start; gap: 4px; border-left-color: var(--marque); }
.relance-carte.en-retard { border-left-color: var(--grenat); background: #fff7f4; }
.relance-carte .t { font-weight: 800; font-size: 16px; }
.relance-carte .s { color: var(--doux); font-size: 13px; }
/* Fenêtre plein écran des relances : couvre tout l'écran, y compris la barre d'onglets */
.panneau.plein { top: 0; bottom: 0; left: 0; right: 0; width: auto; max-height: none; border-radius: 0; z-index: 50; animation: fondu 0.18s ease-out; }
.panneau.plein .panneau-tete::before { display: none; }
.panneau.plein .panneau-corps { width: min(640px, 100%); margin: 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.panneau.plein .panneau-tete { padding-left: max(16px, calc((100% - 640px) / 2)); padding-right: max(16px, calc((100% - 640px) / 2)); }

/* ---------- Planning : Comparatif N-1 (2026-10-13) ---------- */
.cmp-barre { flex-wrap: wrap; }
.cmp-commercial { flex: 1 1 160px; min-width: 0; max-width: 220px; margin-left: auto; height: 40px; }
@media (max-width: 480px) { .cmp-commercial { flex-basis: 100%; max-width: none; margin-left: 0; } }
.cmp-zone { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cmp-zone > * { flex: none; }
.cmp-zone .titre-section { flex-wrap: wrap; gap: 2px 10px; margin-bottom: 0; }
.cmp-zone .titre-section b { font-weight: 700; }
.cmp-ligne .s { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.cmp-synthese { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.cmp-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--ambre-fond); color: var(--ambre); font-size: 12.5px; line-height: 1.35; }
.cmp-ligne .t { white-space: normal; }
.cmp-chants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cmp-chants .etiq { font-weight: 600; font-size: 11.5px; }
.cmp-ligne .d { text-align: right; flex: none; }

/* RDV de l'agenda Outlook (2026-10-16) : lignes dans l'historique des contacts, cartes de l'écran « À faire », recherche de fiche */
.rdv-bloc { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rdv-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; text-align: left; padding: 8px 12px; border: 1px solid var(--trait); border-left: 4px solid var(--trait); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; }
.rdv-ligne.afaire { border-left-color: var(--ambre); background: var(--ambre-fond); cursor: pointer; }
.rdv-ligne .t { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.rdv-ligne .s { flex: 1 0 100%; color: var(--doux); font-size: 13px; }
.rdv-ligne.afaire .s { color: var(--ambre); font-weight: 600; }
.rdv-carte { cursor: default; border-left-color: var(--ambre); }
.rdv-carte .t, .rdv-carte .s { overflow-wrap: anywhere; }
.rdv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; width: 100%; }
.rdv-actions .bouton { flex: 1 1 140px; height: auto; min-height: 42px; min-width: 0; padding: 8px 10px; white-space: normal; line-height: 1.2; font-size: 14px; }
.rdv-note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ambre-fond); color: var(--ambre); font-size: 13px; line-height: 1.4; }
.rdv-note b { font-weight: 700; }
.rdv-note span { overflow-wrap: anywhere; }
.rdv-resultats { display: flex; flex-direction: column; gap: 6px; }
.rdv-resultat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.rdv-resultat .t { font-weight: 700; overflow-wrap: anywhere; }
.rdv-resultat .s { color: var(--doux); font-size: 13px; }
/* ===== Tournées préparées (2026-10-19) : onglets de la carte, bouton « Préparer une tournée », points « vus cette année » (jaune) ===== */
:root { --jaune-vu: #facc15; --jaune-vu-fond: #fef9c3; --jaune-vu-encre: #854d0e; }
.puce .pt.vu { background: var(--jaune-vu); box-shadow: inset 0 0 0 1.5px var(--jaune-vu-encre); }
.puce.legende { background: rgba(255, 253, 248, 0.88); border-color: transparent; color: var(--doux); pointer-events: none; }
.puces.onglets-carte[hidden] { display: none; }
.puce.onglet { height: 34px; padding: 0 14px; font-weight: 600; }
.puce.onglet b { background: var(--surface-2); color: var(--doux); border-radius: 9px; padding: 0 6px; font-size: 12px; line-height: 18px; }
.puce.onglet[aria-selected="true"] { background: var(--encre); color: var(--surface); border-color: var(--encre); }
.puce.onglet[aria-selected="true"] b { background: rgba(255, 255, 255, 0.22); color: var(--surface); }
.puce.onglet.passee:not([aria-selected="true"]) { opacity: 0.65; }
.preparer-carte { position: absolute; left: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 56px); z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--surface); color: var(--encre); border: 1px solid var(--trait); font: 700 13px var(--f-texte); box-shadow: var(--ombre); max-width: calc(100% - 90px); cursor: pointer; }
.preparer-carte[hidden] { display: none; }
.preparer-carte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preparer-carte svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.demarrer-carte:not([hidden]) ~ .preparer-carte { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 108px); }
.etiq.vu { background: var(--jaune-vu-fond); color: var(--jaune-vu-encre); }
.tp-date { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.tp-date input { flex: none; width: 170px; }
.arret .s.deja-prevu { color: var(--jaune-vu-encre); font-weight: 600; }
.arret .s.retiree { color: var(--rouge); }
/* ===== Tournées préparées, 2ᵉ version (2026-10-19 soir) : puces « Tournée du 24/10 - Titre » à droite de « Prospect », liste à glisser-déposer, bloc de la fiche ===== */
.puce.tournee { max-width: 280px; }
.puce.tournee .lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce.tournee .pt.tp { background: var(--encre); }
.puce.tournee b { background: var(--surface-2); color: var(--doux); border-radius: 9px; padding: 0 6px; font-size: 12px; line-height: 18px; }
.puce.tournee[aria-pressed="true"] { background: var(--encre); color: var(--surface); border-color: var(--encre); }
.puce.tournee[aria-pressed="true"] b { background: rgba(255, 255, 255, 0.22); color: var(--surface); }
.puce.tournee[aria-pressed="true"] .pt.tp { background: var(--surface); }
.puce.tournee.passee:not([aria-pressed="true"]) { opacity: 0.65; }
.tp-champs { display: grid; gap: 8px; }
.tp-champ { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.tp-champ input { flex: 1; min-width: 0; max-width: 280px; }
.form-tp { display: grid; gap: 12px; }
.tp-ligne { display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) 40px; gap: 8px; align-items: start; padding: 10px 6px 10px 2px; border-top: 1px solid var(--trait); background: var(--surface); }
.tp-ligne:first-child { border-top: 0; }
.tp-ligne .poignee { width: 30px; height: 34px; border: 0; background: none; color: var(--doux); display: grid; place-items: center; cursor: grab; touch-action: none; }
.tp-ligne .poignee svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; }
.tp-ligne .poignee.vide { cursor: default; }
.tp-ligne .num { width: 34px; height: 34px; border-radius: 50%; background: var(--encre); color: #fff; font: 700 14px var(--f-texte); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tp-ligne .corps { min-width: 0; }
.tp-ligne .nom { display: block; max-width: 100%; text-align: left; background: none; border: 0; padding: 0; font-weight: 600; font-size: 15px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ligne .s { color: var(--doux); font-size: 13px; }
.tp-ligne .s.retiree { color: var(--rouge); }
.tp-ligne .s.deja-prevu { color: var(--jaune-vu-encre); font-weight: 600; }
.tp-ligne .tp-x { width: 40px; height: 34px; border-radius: 9px; border: 1px solid var(--trait); background: var(--surface); display: grid; place-items: center; color: var(--encre); }
.tp-ligne .tp-x svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-ligne.glisse { background: var(--marque-fond); box-shadow: 0 4px 14px rgba(72, 56, 20, 0.25); position: relative; z-index: 2; }
.tp-liste.en-glisse { user-select: none; -webkit-user-select: none; }
.tp-pied .bouton { height: auto; min-height: 42px; min-width: 0; padding: 6px 8px; white-space: normal; line-height: 1.15; text-align: center; }
.tp-pied { position: sticky; bottom: -24px; margin: 6px -16px -24px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--trait); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 3; }
.tp-fiche { display: grid; gap: 8px; margin-top: 4px; }
.tp-fiche-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--trait); }
.tp-fiche-ligne:first-child { border-top: 0; }
.tp-fiche-ligne .corps { flex: 1; min-width: 0; }
.tp-fiche-ligne .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-fiche-ligne .s { color: var(--doux); font-size: 13px; }
.tp-fiche-ligne .bouton { flex: none; }
.note.retiree { color: var(--rouge); }
/* grand écran : la fiche ou la tournée ouverte occupe la colonne de droite, la recherche et les puces (dont celles des tournées) restent sur la carte */
@media (min-width: 900px) { .carte.avec-panneau .carte-haut { right: 472px; } }
/* ===== Tournée préparée : liste réductible sur téléphone (2026-10-21, demande de Guillaume : voir la carte et l'emplacement des domaines derrière la liste) ===== */
.panneau-tete .reduire { margin-top: 8px; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface-2); display: grid; place-items: center; color: var(--encre); }
.panneau-tete .reduire svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.panneau.tp-reductible .panneau-tete { touch-action: none; }
@media (min-width: 900px) { .panneau-tete .reduire { display: none; } }
@media (max-width: 899px) {
  .panneau.reduit .panneau-corps { display: none; }
  .panneau.reduit .panneau-tete { padding-bottom: 8px; cursor: pointer; }
  .panneau.reduit .panneau-tete h2 { font-size: 17px; margin: 8px 0 2px; }
  .carte.panneau-reduit .carte-boutons { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px + var(--bas-reduit, 76px)); }
  .carte.panneau-reduit .carte-credit { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1px + var(--bas-reduit, 76px)); }
  .carte.panneau-reduit .carte-info, .carte.panneau-reduit .preparer-carte { display: none; } /* pas utiles ici et ils cachaient les points du bas à gauche */
}

/* (2026-10-22, demande de Guillaume) « Offres à faire » : formulaire de demande, historique sur la fiche, liste de l'ADV. Préfixe dof- (autre fonction : offres envoyées par mail). */
.dof-onglets { margin-bottom: 4px; }
.dof-onglets .puce { min-height: 38px; }
.dof-onglets .puce b { background: var(--marque); color: var(--sur-marque); border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 18px; }
.dof-groupe { display: flex; flex-direction: column; gap: 8px; }
.dof-bloc { border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); overflow: hidden; }
.dof-bloc.actif { border-color: var(--marque); }
.dof-choix { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; color: var(--encre); }
.dof-case { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--trait); background: var(--surface); display: grid; place-items: center; }
.dof-choix[aria-pressed="true"] .dof-case { background: var(--marque); border-color: var(--marque); }
.dof-choix[aria-pressed="true"] .dof-case::after, .dof-coche[aria-pressed="true"]::after, .dof-coche.lecture[data-fait="1"]::after {
  content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--sur-marque); border-bottom: 2.5px solid var(--sur-marque); transform: rotate(-45deg) translate(1px, -1px);
}
.dof-detail { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; }
.dof-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dof-l { font-size: 13px; font-weight: 600; color: var(--doux); min-width: 52px; }
.dof-num { width: 92px; flex: none; }
.dof-aide { font-weight: 400; }
.dof-rem { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--trait); }
.dof-retirer { flex: none; margin-left: auto; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--trait); background: var(--surface); font-size: 20px; line-height: 1; color: var(--doux); }
.dof-champ { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--doux); }
.dof-champ textarea.champ { min-height: 64px; }
/* (2026-10-22) Code couleur des offres : À traiter = rouge, En cours = ambre, Tout coché (à finaliser) = bleu, Réalisée = vert, Annulée = gris */
.dof-etat.a_faire { background: var(--rouge-fond); color: var(--rouge); }
.dof-etat.en_cours { background: var(--ambre-fond); color: var(--ambre); }
.dof-etat.faite { background: #e3edf9; color: #1d4f91; }
.dof-etat.finalisee { background: var(--verre-fond); color: var(--verre); }
.dof-etat.annulee { background: var(--surface-2); color: var(--gris); }
.ligne.dof-r { box-shadow: inset 5px 0 0 var(--trait); }
.ligne.dof-r.a_faire { box-shadow: inset 5px 0 0 var(--rouge); }
.ligne.dof-r.en_cours { box-shadow: inset 5px 0 0 var(--ambre); }
.ligne.dof-r.faite { box-shadow: inset 5px 0 0 #1d4f91; }
.ligne.dof-r.finalisee { box-shadow: inset 5px 0 0 var(--verre); }
.ligne.dof-r.annulee { box-shadow: inset 5px 0 0 var(--gris); opacity: .75; }
.dof-ts.a_faire { color: var(--rouge); }
.dof-ts.en_cours { color: var(--ambre); }
.dof-ts.finalisee { color: var(--verre); }
.dof-legende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dof-alerte.pret { background: #e3edf9; color: #1d4f91; }
.dof-tarif { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--trait); }
.dof-tarif-lien { align-self: flex-start; margin-top: 6px; }
.dof-entete { font-size: 13px; color: var(--doux); }
.dof-entete b { color: var(--encre); }
.dof-alerte { display: flex; flex-direction: column; gap: 3px; background: var(--ambre-fond); color: var(--ambre); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.dof-liste { display: flex; flex-direction: column; }
.dof-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-top: 1px solid var(--trait); }
.dof-item:first-child { border-top: 0; }
.dof-coche { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--trait); background: var(--surface); display: grid; place-items: center; padding: 0; }
.dof-coche[aria-pressed="true"], .dof-coche.lecture[data-fait="1"] { background: var(--marque); border-color: var(--marque); }
.dof-coche.lecture { width: 26px; height: 26px; border-radius: 7px; margin-top: 1px; }
.dof-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dof-t { font-weight: 600; overflow-wrap: anywhere; }
.dof-item.fait .dof-t { color: var(--doux); }
.dof-s { font-size: 13px; color: var(--doux); overflow-wrap: anywhere; }
.dof-sage { font-size: 12px; font-weight: 600; color: var(--violet); }
.dof-fait { font-size: 12px; font-weight: 600; color: var(--verre); }
/* (2026-10-27) « Offre à faire » : dernier compte-rendu à côté du formulaire (au-dessus sur téléphone, replié à 30 % de la hauteur avec défilement) */
.dof-cote { display: flex; flex-direction: column; gap: 12px; }
.dof-cote > .form { flex: 1 1 auto; min-width: 0; }
.dof-cr { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--marque); border-radius: 12px; max-height: 30vh; overflow-y: auto; }
.dof-cr .titre-section { margin: 0 0 2px; }
.dof-cr .m { font-size: 12px; color: var(--doux); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dof-cr-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.dof-cr-texte.doux { color: var(--doux); }
@media (min-width: 900px) {
  .dof-cote.avec-cr { flex-direction: row; align-items: flex-start; }
  /* (2026-10-27, demande de Guillaume) le formulaire (remises à gauche, commentaires en face) est À GAUCHE, le dernier compte-rendu À DROITE ; sur téléphone il reste au-dessus */
  .dof-cote.avec-cr > .dof-cr { order: 2; flex: 0 0 340px; position: sticky; top: 0; max-height: calc(100vh - 140px); }
}
.dof-prec { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dof-fil { display: flex; flex-direction: column; gap: 8px; }
.dof-comm { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px; }
.dof-comm.moi { background: var(--marque-fond); border-color: var(--marque); }
.dof-comm-t { font-size: 12px; color: var(--doux); }
.dof-comm-x { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
/* (2026-10-22) Bandeau « activez les notifications » des ADV (Cécile, Diana : appli utilisée sur le PC) */
.bandeau-notif { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--grenat-fond); color: var(--grenat); font-size: 13px; font-weight: 600; padding: 8px 16px; text-align: center; }
.bandeau-notif[hidden] { display: none; }
.bandeau-notif button { flex: none; min-height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--grenat); background: var(--grenat); color: #fff; font: 700 13px var(--f-texte); }
.dof-alerte.pret .bouton { align-self: flex-start; margin-top: 8px; }
/* (2026-10-27, demande de Guillaume) Compléter une demande déjà envoyée : bouton du détail, étiquette « ajouté le » d'une ligne, mention « déjà demandé » dans le formulaire */
.dof-completer { align-self: flex-start; margin-top: 10px; }
.dof-aide-bas { margin: 4px 0 0; font-size: 12px; color: var(--doux); }
.dof-ajout { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: #1d4f91; background: #e3edf9; border-radius: 999px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
.dof-deja { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--doux); }
/* (2026-10-27, demande de Guillaume) « Offre à faire », MEB : le commentaire d'une remise est EN FACE de la remise (zone de plusieurs lignes : plusieurs articles à la même remise) ;
   sous 460 px de large (téléphone) le commentaire passe dessous. Container query : suit la largeur réelle de la fenêtre, pas celle de l'écran. */
.dof-detail { container-type: inline-size; }
.dof-rem-c { min-height: 78px; resize: vertical; }
.dof-s { white-space: pre-wrap; }
@container (min-width: 460px) {
  .dof-rem { display: grid; grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .dof-rem-g { align-items: flex-start; }
  .dof-rem-c { min-height: 92px; }
}
/* (2026-10-27, demande de Guillaume) Matières sèches de « Offre à faire » : chaque ligne = article, fournisseur et marge sur PA, EN FACE sur une même ligne (sur téléphone : l'article
   dessus, fournisseur et marge dessous côte à côte). */
.dof-ms-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px auto; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--trait); }
.dof-ms-l .dof-ms-a { grid-column: 1 / -1; }
.dof-ms-l .dof-retirer { margin-left: 0; width: 34px; height: 34px; }
@container (min-width: 460px) {
  .dof-ms-l { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) 84px auto; }
  .dof-ms-l .dof-ms-a { grid-column: auto; }
}

/* (2026-10-27, demande de Guillaume) Activité → « Tournées réalisées » : tournées archivées (date passée), repliées, détail par domaine */
.tr-note { margin: 0 0 8px; }
.tr-carte { margin-bottom: 8px; }
.tr-carte .deroule .t { display: flex; flex-direction: column; gap: 3px; }
.tr-resume { font: 400 12.5px/1.35 var(--f-texte); color: var(--doux); }
.tr-detail { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); overflow: hidden; }
.tr-dom { padding: 10px 12px; border-top: 1px solid var(--trait); min-width: 0; }
.tr-dom:first-child { border-top: 0; }
.tr-nom { display: block; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; font: 600 15px/1.3 var(--f-texte); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dom .s { color: var(--doux); font-size: 13px; }
.tr-dom .tr-aucun { margin-top: 4px; }
.tr-dom .journal { margin-top: 6px; }
.tr-offres { margin-top: 8px; }

/* ---- Fiches « Visite préalable nouveau chantier » (2026-10-27) ---- */
.deroule.lien-visite { margin-top: 8px; }
.vis-contenu { padding: 4px 2px 8px; }
.vis-sep { height: 10px; }
.vis-h { margin: 14px 0 4px; font: 700 14px/1.3 var(--f-titre); color: var(--marque); }
.vis-p { margin: 4px 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vis-img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface-2); }
.vis-img.vis-attente, .vis-vignette.vis-attente { min-height: 120px; width: 100%; }
.vis-img.vis-erreur, .vis-vignette.vis-erreur { min-height: 60px; }
.vis-scan { width: 100%; }
.vis-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.vis-photo { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.vis-vignette { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.vis-video { display: block; width: 100%; max-height: 60vh; margin: 8px 0; border-radius: 10px; background: #000; }
.vis-contenu .bouton { display: block; margin: 6px 0 0; height: auto; min-height: 36px; padding: 6px 12px; white-space: normal; text-align: left; }
.vis-zoom { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(20, 16, 6, .88); cursor: zoom-out; }
.vis-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

/* ==== DEBUT tableau-bord (2026-10-30, demande de Guillaume) : onglet « Tableau de bord » de Pierre et puce « Actions commerciales » de l'onglet Activité ==== */
.puces.dof-onglets { flex-wrap: wrap; overflow: visible; } /* quatre puces (Activité, Actions commerciales, État des offres, Tournées réalisées) : à la ligne plutôt que cachées */
.tdb { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tdb > .titre-section { margin-bottom: -6px; }
.tdb-periode { display: flex; flex-direction: column; gap: 10px; }
.tdb-periode .puces { flex-wrap: wrap; overflow: visible; }
.tdb-periode .puces.tdb-pre { gap: 4px; }
.tdb-periode .puces.tdb-pre .puce { padding: 6px clamp(6px, 1.8vw, 12px); }
@media (min-width: 600px) { .tdb-periode .puces.tdb-pre { gap: 6px; } }
.tdb-fleches { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.tdb-fleches b, .tdb-titre { text-align: center; font: 700 17px/1.2 var(--f-titre); letter-spacing: -0.01em; }
.tdb-fleches .tdb-titre { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: 100%; height: auto; min-height: 42px; border: 0; background: none; color: var(--encre); }
.tdb-titre svg { width: 16px; height: 16px; stroke: var(--doux); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.tdb-titre[aria-expanded="true"] svg { transform: rotate(180deg); }
.tdb-mois-zone { display: none; flex-direction: column; gap: 6px; }
.tdb-mois-zone.ouvert { display: flex; }
@media (min-width: 700px) { .tdb-mois-zone { display: flex; } .tdb-titre svg { display: none; } }
.tdb-fleches button { height: 42px; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); display: grid; place-items: center; }
.tdb-fleches button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tdb-fleches button:disabled { opacity: .35; }
.tdb-mois { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tdb-mois button { height: 38px; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface); font-size: 13px; color: var(--encre); }
.tdb-mois button[aria-pressed="true"] { background: var(--marque-fond); border-color: var(--marque); font-weight: 600; }
.tdb-mois button:disabled { opacity: .35; }
@media (min-width: 700px) { .tdb-mois { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.tdb-aide { margin: 0; font-size: 12px; line-height: 1.4; color: var(--doux); }
.tdb-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tdb-tuiles .tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) { .tdb-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tdb-tuiles .tuile:last-child:nth-child(odd) { grid-column: auto; } }
.tdb .tuile .evo-ligne { display: block; }
.tdb .tuile .detail { overflow-wrap: anywhere; }
.tdb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tdb-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tdb-act { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tdb-act[aria-pressed="false"] { opacity: .5; background: var(--surface-2); }
.tdb-act[aria-pressed="true"] { border-color: var(--marque); background: var(--marque-fond); }
.tdb-barre { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); min-width: 0; }
.tdb-barre i { display: block; height: 100%; background: var(--marque); }
.tdb-barre i.meb, .tdb-barre i.marque { background: var(--marque); }
.tdb-barre i.pop { background: var(--violet); }
.tdb-barre i.ms { background: var(--cible); }
.tdb-barre i.bon { background: var(--verre); }
.tdb-barre i.moyen { background: var(--ambre); }
.tdb-barre i.faible { background: var(--rouge); }
.tdb-barre i.neutre { background: var(--gris); }
.tdb-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--marque); }
.tdb-pt.pop { background: var(--violet); }
.tdb-pt.ms { background: var(--cible); }
.tdb-pastilles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tdb-note { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tdb-qui { font-size: 12px; font-weight: 600; color: var(--marque); }
.tdb .ligne .d > div { margin-top: 2px; }
.tdb .ligne .s.retard { color: var(--rouge); font-weight: 600; }
.tdb-2col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tdb-2col > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 900px) { .tdb-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.tdb-tuiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tdb-tuiles3 .tuile { padding: 10px 12px; }
.tdb-dep { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.tdb-dep > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-dep > span:first-child small { display: block; font-size: 11.5px; color: var(--doux); overflow: hidden; text-overflow: ellipsis; }
.tdb-dep b { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.tdb-dep.faible b { color: var(--rouge); }
.tdb-moy { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 8px; }
.tdb-moy b { font: 700 26px/1.1 var(--f-titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-moy span { font-size: 13px; color: var(--doux); }
.tdb-sous { margin-top: 10px; font: 600 11.5px/1 var(--f-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux); }
.tdb .bloc { padding: 12px 14px; }
@media (max-width: 359px) { .tdb-tuiles3 { gap: 6px; } .tdb-tuiles3 .tuile { padding: 8px; } .tdb-mois button { font-size: 12px; } }
/* ==== FIN tableau-bord ==== */