/* MP10 Clients - feuille de style unique (telephone d'abord, ecran large pour les tableaux) */
:root{
  --bg:#f2f4f7; --carte:#ffffff; --encre:#14202e; --doux:#5b6878; --trait:#d8dee6;
  --accent:#1d4f91; --accent-doux:#e3ecf8; --n1:#9aa7b8; --bl:#56a0e8;
  --ok:#17804f; --ok-doux:#e0f2e8; --att:#9a5b00; --att-doux:#fbefd9; --err:#b42318; --err-doux:#fde8e6;
  --marine:#0f1e4d; --rayon:10px; --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f141b; --carte:#18202a; --encre:#e7ecf2; --doux:#9aa8b8; --trait:#2b3542;
  --accent:#6ea3e8; --accent-doux:#1c2c44; --n1:#5d6a7c; --bl:#3f7fc4;
  --ok:#4cc38a; --ok-doux:#16301f; --att:#f0a83a; --att-doux:#3a2b14; --err:#ff7b6e; --err-doux:#3d1a17; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--encre);font:15px/1.45 var(--police);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--accent)}
h1{font-size:1.45rem;margin:.3rem 0 .8rem;line-height:1.2}
h2{font-size:1.05rem;margin:0}
small{display:block;color:var(--doux);font-size:.8rem;font-weight:400}
small.enligne{display:inline;margin-left:8px}
.cache{position:absolute;left:-9999px}
.doux{color:var(--doux)}
.barre{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;
  background:var(--marine);color:#fff;padding:calc(8px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.marque{color:#fff;text-decoration:none;font-weight:700;display:flex;align-items:center;gap:8px}
.logo-img{height:30px;width:auto;display:block}
.marque span{padding-top:3px}
.menu{display:flex;flex-wrap:wrap;gap:4px 14px}
.menu a{color:#fff;text-decoration:none;font-size:.93rem;opacity:.85;padding:4px 0}
.menu a.actif{opacity:1;font-weight:700;border-bottom:2px solid #fff}
.menu a.discret{opacity:.6}
.sous-barre{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;background:var(--carte);border-bottom:1px solid var(--trait);
  padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));font-size:.85rem}
.sous-barre select{width:auto;min-height:32px;padding:4px 8px;font-size:.85rem}
.page{max-width:720px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.page.etroite{max-width:440px;padding-top:28px}
.page.large{max-width:1200px}
.carte{display:block;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;margin-bottom:14px;color:inherit;text-decoration:none;min-width:0}
.titre-carte{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.flash{border-radius:8px;padding:10px 12px;margin-bottom:12px}
.flash.ok{background:var(--ok-doux);color:var(--ok)}
.flash.erreur{background:var(--err-doux);color:var(--err)}
.aide{color:var(--doux);font-size:.86rem;max-width:80ch}
.vide{color:var(--doux);padding:8px 0}
.centre{text-align:center}
.logo-connexion{text-align:center;margin:8px 0 18px}
.logo-connexion img{width:220px;max-width:70%;height:auto}
label{display:block;font-size:.8rem;color:var(--doux);margin:10px 0 4px;font-weight:600}
input,select{width:100%;font:inherit;color:var(--encre);background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:8px 10px;min-height:42px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;cursor:pointer;
  border:1px solid var(--trait);background:var(--carte);color:var(--accent);border-radius:8px;padding:8px 14px;min-height:42px;text-decoration:none}
.bouton.plein{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme: dark){.bouton.plein{color:#0f141b}}
.bouton.petit{min-height:32px;padding:4px 10px;font-size:.85rem}
.bouton.danger{color:var(--err)}
.formulaire .bouton.plein{margin-top:14px}
.enligne{display:inline}
.pastille{display:inline-block;font-size:.75rem;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap;background:var(--accent-doux);color:var(--accent)}
.pastille.ok{background:var(--ok-doux);color:var(--ok)}
.pastille.att{background:var(--att-doux);color:var(--att)}
.pastille.err{background:var(--err-doux);color:var(--err)}
.pastille.long{white-space:normal;margin-top:6px}
.pastilles{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.neg{color:var(--err)} .pos{color:var(--ok)}
/* indicateurs */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .l{font-size:.72rem;color:var(--doux);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.kpi .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .s{font-size:.8rem;color:var(--doux)}
.grille2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
.grille2 > .carte{margin-bottom:14px}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grille2{grid-template-columns:minmax(0,1fr)}}
/* graphique */
.graph{width:100%;height:auto;display:block}
.graph text{font-family:var(--police)}
.jauge{width:100%;height:14px;display:block;margin:6px 0}
.legende{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--doux);margin-top:6px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.c-n1{background:var(--n1)} .c-n{background:var(--accent)} .c-bl{background:var(--bl)} .c-pr{background:var(--accent);opacity:.3}
/* alertes */
.alerte{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.alerte:last-of-type{border-bottom:0}
.alerte .trait{align-self:stretch;border-radius:2px;background:var(--accent)}
.alerte.err .trait{background:var(--err)} .alerte.att .trait{background:var(--att)} .alerte.ok .trait{background:var(--ok)}
.alerte.seule{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:10px 12px;margin-bottom:12px;grid-template-columns:4px minmax(0,1fr)}
.alerte:hover b{text-decoration:underline}
/* rfa */
a.rfa{display:block;color:inherit;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--trait)}
a.carte.rfa{padding:14px}
.rfa .ligne{display:flex;justify-content:space-between;gap:10px}
/* tableaux */
.tableau{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);text-align:left;font-weight:700;padding:6px 8px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--trait);vertical-align:top}
td.d,th.d{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.clic{cursor:pointer} tr.clic:hover td{background:var(--bg)}
tr.grise td{opacity:.55}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filtres input{flex:1 1 220px;width:auto}
.filtres select{flex:0 1 200px;width:auto}
/* fiche */
.fil{margin:0;font-size:.85rem}
.surtitre{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--doux);font-weight:700}
.entete-fiche{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.entete-fiche h1{margin:.1rem 0 .3rem}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;margin:0 0 10px;font-size:.88rem}
.meta dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--doux)}
.meta dd{margin:0}
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--trait)}
.contact.attente{opacity:.85}
.contact-form{border:1px solid var(--accent);border-radius:var(--rayon);padding:10px 12px;margin:8px 0}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.actions .bouton.plein{margin-top:0}
.onglets{display:flex;gap:14px;margin-bottom:10px;font-size:.9rem}
.onglets a.actif{font-weight:700;text-decoration:none}
fieldset.cases{border:1px solid var(--trait);border-radius:8px;margin:12px 0 0;padding:6px 12px 10px}
fieldset.cases legend{font-size:.8rem;color:var(--doux);font-weight:600}
label.case{display:inline-flex;align-items:center;gap:6px;margin:6px 14px 0 0;font-weight:400;color:var(--encre);font-size:.92rem}
label.case input{width:auto;min-height:auto}
.pied{text-align:center;color:var(--doux);font-size:.75rem;padding:10px 16px 24px}
/* onglets de la fiche, achats, vue client */
.onglets-fiche{display:flex;gap:4px;border-bottom:1px solid var(--trait);margin:0 0 14px;overflow-x:auto}
.onglets-fiche a{padding:8px 14px;text-decoration:none;color:var(--doux);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.onglets-fiche a.actif{color:var(--accent);border-bottom-color:var(--accent)}
tr.choisi td{background:var(--accent-doux)}
.vue-client{border:1px solid var(--trait);border-radius:var(--rayon);padding:16px;background:var(--bg)}
.vc-entete{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.vc-entete b{font-size:1.25rem}
.vc-logo{height:40px;width:auto}
.vc-sombre{display:none}
@media (prefers-color-scheme: dark){.vc-clair{display:none}.vc-sombre{display:block}}
.vc-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.vc-pied{margin-top:10px;text-align:center}
.vc-actions{margin-bottom:8px}
body.presentation{background:var(--bg)}
body.presentation .vue-client{border:0}
@media print{
  :root{--bg:#fff;--carte:#fff;--encre:#14202e;--doux:#5b6878;--trait:#d8dee6;--accent:#1d4f91;--n1:#9aa7b8;--bl:#56a0e8}
  body{background:#fff;color:#14202e}
  .sans-impression,.barre,.sous-barre,.pied{display:none}
  .vc-clair{display:block}.vc-sombre{display:none}
  .carte,.kpi{break-inside:avoid}
}
/* alertes : cases de preselection */
.cases-filtre{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.groupe-cases{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lib-cases{font-size:.8rem;color:var(--doux);min-width:64px;font-weight:600}
.case{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--trait);border-radius:99px;padding:4px 11px;font-size:.85rem;cursor:pointer;background:var(--carte,transparent);user-select:none}
.case input{width:auto;margin:0;accent-color:var(--accent)}
.case b{font-size:.75rem;color:var(--doux)}
.case.cochee{background:var(--accent-doux);border-color:var(--accent);color:var(--accent)}
.case.err.cochee{background:var(--err-doux);border-color:var(--err);color:var(--err)}
.case.att.cochee{background:var(--att-doux);border-color:var(--att);color:var(--att)}
.case.ok.cochee{background:var(--ok-doux);border-color:var(--ok);color:var(--ok)}
.lien-raz{font-size:.85rem}
/* achats : graphiques familles / sous-familles et envoi PDF */
.graph.barres{width:100%;max-width:560px;height:auto;display:block;margin:4px 0 10px}
.graph.barres a text{cursor:pointer}
.graph.barres a:hover text{text-decoration:underline}
.legende{display:flex;gap:14px;font-size:.78rem;color:var(--doux);align-items:center}
.legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.legende i.n1{background:var(--n1)} .legende i.n{background:var(--accent)}
.envoi-pdf{display:grid;gap:10px}
.envoi-pdf textarea{min-height:90px}
.actions-pdf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
textarea{width:100%;font:inherit;font-weight:400;color:var(--encre);background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:8px 10px}
.ligne-case{display:flex;gap:8px;align-items:center}.ligne-case input{width:auto;min-height:0}
.en-ligne{display:inline-block;margin-left:6px}
.destinataire-confirme{font-size:1.15rem}
.message-confirme{white-space:pre-wrap;border-left:3px solid var(--trait);padding-left:10px}
.pastille.info{background:var(--accent-doux);color:var(--accent)}
/* bonus marques RFA */
.bonus-marques{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
.titre-bonus{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.titre-bonus .d{margin-left:auto}
.bonus-marques table small{display:block;color:var(--doux);font-size:.75rem}
.details-bonus{margin-top:8px}
.details-bonus summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.9rem}
.filtre-marque{align-items:center}
.filtre-marque label{font-weight:600;color:var(--doux);font-size:.85rem}
.actions-pdf.carte{display:flex}
/* message de saisie comptoir WinPro (alertes compta) */
.message-compta{display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--att);background:var(--att-doux);color:var(--encre);border-radius:8px;padding:10px 14px;margin:0 0 14px}
.message-compta b{color:var(--att);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.message-compta.grave{border-left-color:var(--err);background:var(--err-doux)}
.message-compta.grave b{color:var(--err)}
/* suivi client */
.note-form{display:grid;gap:12px}
.grille3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.grille2-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.note-form label{display:grid;gap:4px;font-weight:600;font-size:.88rem}
.note-form label small,.form-ia label small{font-weight:400;color:var(--doux)}
.actions-note{display:flex;flex-wrap:wrap;gap:8px}
.bloc-resume{display:grid;gap:10px;border-left:3px solid var(--accent);padding-left:12px}
.relance input{max-width:220px}
#b-dicter.ecoute{background:var(--err);border-color:var(--err);color:#fff}
.note{border-bottom:1px solid var(--trait);padding:12px 0}
.note:last-of-type{border-bottom:0}
.note-tete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.note-tete small{color:var(--doux)}
.note p{margin:6px 0}
.note-liste small{color:var(--doux);font-weight:600}
.note-liste ul{margin:2px 0 6px;padding-left:20px}
.texte-brut{white-space:pre-wrap;color:var(--doux);font-size:.9rem}
.note details summary{cursor:pointer;color:var(--accent);font-size:.85rem}
.note-pied{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
a.dernier-contact{display:grid;gap:4px}
a.dernier-contact .ligne{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.relance-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--trait)}
.relance-ligne:last-child{border-bottom:0}
.relance-ligne a{color:inherit;text-decoration:none;display:grid}
.relance-ligne small{color:var(--doux)}
.form-ia{display:grid;gap:10px;margin-top:12px}
.form-ia label{display:grid;gap:4px;font-weight:600}
.si-dictee{display:none}
.dictee-ok .si-dictee{display:inline}