/* Tableau de bord ZTi : charte du site (bleus ZTi, Montserrat / Inter), fonds blanc cassé. */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(polices/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(polices/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(polices/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url(polices/montserrat-latin-800-normal.woff2) format('woff2'); }
:root {
  --logo: #02008A; --nuit: #010038; --vif: #1565FF; --ciel: #9FD0FF;
  --fond: #F3F5FA; --carte: #FCFCFE; --trait: #E1E6F3; --texte: #3F4A5E; --gris: #7C86A8; --encre: #0A0D3A;
  --vert: #12A15E; --orange: #E08A00; --rouge: #D23A3A;
  --degrade: linear-gradient(135deg, #02008A 0%, #1565FF 100%);
  --ombre: 0 1px 2px rgba(10,13,58,.04), 0 10px 28px rgba(10,13,58,.06);
  --titres: Montserrat, Arial, sans-serif; --corps: Inter, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.55 var(--corps); color: var(--texte); background: var(--fond); }
h1, h2, h3 { font-family: var(--titres); color: var(--encre); letter-spacing: -.02em; margin: 0; }
h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 18px; font-weight: 700; } h3 { font-size: 15px; font-weight: 700; }
a { color: var(--vif); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }
.chargement { display: grid; place-items: center; min-height: 100vh; color: var(--gris); }

/* ——— structure ——— */
.cadre { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.menu { background: var(--nuit); color: #C9D0EE; padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.menu .marque { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; color: #fff; font: 700 13px var(--titres); }
.menu .marque img { height: 32px; }
.menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; color: #C9D0EE; text-decoration: none; font-weight: 600; font-size: 14px; }
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a[aria-current="page"] { background: rgba(21,101,255,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(159,208,255,.25); }
.menu .pastille { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--vif); color: #fff; font-size: 12px; display: grid; place-items: center; }
.menu .bas { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.menu .bas b { color: #fff; display: block; }
.menu .bas button { margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,.2); color: #C9D0EE; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.page { padding: 28px clamp(16px, 3vw, 40px) 60px; max-width: 1400px; width: 100%; }
.entete-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.entete-page p { margin: 4px 0 0; color: var(--gris); }
@media (max-width: 900px) {
  .cadre { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; gap: 2px; }
  .menu .marque { padding: 4px 10px; width: 100%; }
  .menu a { padding: 8px 10px; font-size: 13px; }
  .menu .bas { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
  .menu .bas button { margin: 0; }
}

/* ——— éléments ——— */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); padding: 20px; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.chiffre { display: grid; gap: 4px; }
.chiffre small { color: var(--gris); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.chiffre b { font: 800 30px/1.1 var(--titres); color: var(--encre); letter-spacing: -.02em; }
.chiffre span { font-size: 13px; color: var(--gris); }
.chiffre.alerte b { color: var(--orange); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--degrade); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px rgba(21,101,255,.25); }
.btn:hover { filter: brightness(1.08); }
.btn.second { background: var(--carte); color: var(--logo); box-shadow: inset 0 0 0 1px var(--trait); }
.btn.danger { background: #fff; color: var(--rouge); box-shadow: inset 0 0 0 1px #F0C7C7; }
.btn.petit { padding: 6px 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: wait; }
.onglets { display: inline-flex; padding: 4px; background: #E7EBF5; border-radius: 999px; gap: 2px; }
.onglets button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--texte); cursor: pointer; }
.onglets button[aria-pressed="true"] { background: var(--carte); color: var(--logo); box-shadow: var(--ombre); }
label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--encre); }
input, select, textarea { width: 100%; border: 1px solid var(--trait); background: #F7F8FC; border-radius: 12px; padding: 10px 12px; font-weight: 400; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vif); box-shadow: 0 0 0 3px rgba(21,101,255,.15); background: #fff; }
.case { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.case input { width: 18px; height: 18px; }
.formulaire { display: grid; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muet { color: var(--gris); font-size: 13px; }
.vide { padding: 30px; text-align: center; color: var(--gris); }
.etiquette { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #E7EBF5; color: var(--logo); white-space: nowrap; }
.e-nouvelle { background: #E3EDFF; color: var(--vif); } .e-rappelee { background: #EEE6FF; color: #6B3FD6; }
.e-rendez_vous { background: #FFF1DB; color: #A35F00; } .e-devis { background: #FFE9E0; color: #B4461B; }
.e-client { background: #DDF5E8; color: #0D7A46; } .e-sans_suite { background: #ECEEF3; color: #6B7280; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: #F0F3FA; }
.defile-x { overflow-x: auto; }
.barre { height: 8px; border-radius: 99px; background: #E7EBF5; overflow: hidden; } .barre i { display: block; height: 100%; background: var(--degrade); border-radius: 99px; }
.liste-barres { display: grid; gap: 10px; } .liste-barres div { display: grid; gap: 4px; }
.liste-barres .l { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .liste-barres .l span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etoiles { color: #F5B301; letter-spacing: 2px; }

/* ——— graphique ——— */
.graphique svg { width: 100%; height: 220px; display: block; }
.graphique .legende { display: flex; gap: 16px; font-size: 13px; color: var(--gris); margin-top: 8px; }
.graphique .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.entonnoir { display: grid; gap: 10px; }
.entonnoir div { display: grid; grid-template-columns: 130px 1fr 70px; gap: 12px; align-items: center; font-size: 14px; }
.entonnoir b { text-align: right; font-family: var(--titres); color: var(--encre); }

/* ——— suivi des clients (colonnes) ——— */
.colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.colonne { background: #E9EDF6; border-radius: 16px; padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.colonne.survol { box-shadow: inset 0 0 0 2px var(--vif); }
.colonne h3 { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 13px; }
.fiche-mini { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; cursor: grab; display: grid; gap: 4px; font-size: 13px; }
.fiche-mini:hover { border-color: rgba(21,101,255,.4); }
.fiche-mini b { color: var(--encre); font-size: 14px; }
.fiche-mini .relance { color: var(--orange); font-weight: 600; }

/* ——— fiche ——— */
.fiche { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .fiche { grid-template-columns: 1fr; } }
dl { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; margin: 12px 0 0; }
dt { color: var(--gris); font-size: 13px; } dd { margin: 0; color: var(--encre); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { dl { grid-template-columns: 1fr; } dt { margin-top: 6px; } }
.historique { display: grid; gap: 10px; margin-top: 12px; }
.historique div { border-left: 3px solid var(--trait); padding: 4px 0 4px 12px; }
.historique .g-etat { border-color: var(--vif); } .historique .g-email { border-color: var(--vert); } .historique .g-appel, .historique .g-whatsapp { border-color: var(--orange); }
.historique small { color: var(--gris); display: block; } .historique p { margin: 2px 0 0; white-space: pre-wrap; }
.secret { font: 600 18px ui-monospace, monospace; background: #F0F3FA; border: 1px dashed var(--vif); border-radius: 12px; padding: 12px 16px; color: var(--logo); user-select: all; }

/* ——— connexion ——— */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(60% 60% at 80% 0%, rgba(21,101,255,.35), transparent 70%), var(--nuit); }
.connexion .carte { width: min(420px, 100%); padding: 32px; display: grid; gap: 16px; }
.connexion img { height: 44px; justify-self: start; background: var(--logo); padding: 8px 12px; border-radius: 12px; }
.erreur { background: #FDECEC; color: #A12A2A; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
#toast { position: fixed; right: 20px; bottom: 20px; background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.25); z-index: 50; max-width: 380px; }
#toast.mauvais { background: var(--rouge); }

/* ——— composants maison (aucun contrôle natif) ——— */
.champ-groupe { display: grid; gap: 6px; }
.champ-titre { font-weight: 600; font-size: 13px; color: var(--encre); }
.menu-maison { position: relative; }
.menu-maison-bouton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--trait); background: #F7F8FC; border-radius: 12px; padding: 10px 12px; color: var(--encre); font-weight: 500; min-height: 42px; }
.menu-maison-bouton:hover { border-color: #C7CFE6; }
.menu-maison-bouton[aria-expanded="true"] { border-color: var(--vif); box-shadow: 0 0 0 3px rgba(21,101,255,.15); background: #fff; }
.menu-maison-bouton[disabled] { opacity: .6; cursor: not-allowed; }
.menu-maison-bouton .muet { color: var(--gris); }
.chevron { width: 9px; height: 9px; border-right: 2px solid var(--logo); border-bottom: 2px solid var(--logo); transform: translateY(-2px) rotate(45deg); transition: transform .15s; flex: none; }
[aria-expanded="true"] > .chevron { transform: translateY(2px) rotate(-135deg); }
.icone-cal { width: 16px; height: 16px; flex: none; border: 2px solid var(--logo); border-radius: 4px; border-top-width: 5px; }
.menu-maison-liste { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px; box-shadow: 0 24px 48px rgba(10,13,58,.16); outline: none; }
.menu-maison-liste li { padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--encre); font-size: 14px; }
.menu-maison-liste li.actif { background: #EEF2FF; }
.menu-maison-liste li[aria-selected="true"] { color: var(--logo); font-weight: 600; }
.menu-maison-liste li[aria-selected="true"]::after { content: ''; float: right; width: 6px; height: 11px; margin-top: 3px; border-right: 2px solid var(--vif); border-bottom: 2px solid var(--vif); transform: rotate(45deg); }
.calendrier { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 300px; padding: 14px; background: #fff; border: 1px solid var(--trait); border-radius: 16px; box-shadow: 0 24px 48px rgba(10,13,58,.16); }
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-tete b { font-family: var(--titres); color: var(--encre); text-transform: capitalize; }
.cal-nav { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--trait); background: #F7F8FC; color: var(--logo); font-size: 18px; cursor: pointer; }
.cal-nav:hover { border-color: var(--vif); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-jour-nom { font-size: 11px; font-weight: 600; color: var(--gris); text-transform: uppercase; padding: 4px 0; }
.cal-jour { aspect-ratio: 1; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--encre); font-size: 13px; }
.cal-jour:hover { background: #EEF2FF; }
.cal-jour.aujourdhui { box-shadow: inset 0 0 0 1px var(--vif); color: var(--vif); font-weight: 600; }
.cal-jour.choisi { background: var(--degrade); color: #fff; font-weight: 600; }
.cal-pied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--trait); }
.interrupteur { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; padding: 4px 0; cursor: pointer; font-weight: 600; color: var(--encre); text-align: left; }
.interrupteur .piste { width: 42px; height: 24px; border-radius: 999px; background: #D7DCEC; position: relative; flex: none; transition: background .2s; }
.interrupteur .piste span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.interrupteur[aria-checked="true"] .piste { background: var(--degrade); }
.interrupteur[aria-checked="true"] .piste span { transform: translateX(18px); }
.interrupteur[disabled] { opacity: .6; cursor: not-allowed; }
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 46px; }
.oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.oeil::before { content: ''; position: absolute; inset: 10px 7px; border: 2px solid var(--gris); border-radius: 50% / 60%; }
.oeil::after { content: ''; position: absolute; left: 14px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--gris); }
.oeil[aria-pressed="true"]::before { border-color: var(--vif); } .oeil[aria-pressed="true"]::after { background: var(--vif); }
.oeil:hover { background: #EEF2FF; }
.voile { position: fixed; inset: 0; z-index: 60; background: rgba(1,0,56,.45); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.fenetre { width: min(440px, 100%); background: var(--carte); border-radius: 20px; padding: 24px; box-shadow: 0 40px 80px rgba(0,0,0,.3); display: grid; gap: 10px; }
.fenetre p { margin: 0; color: var(--texte); }
.actions.fin { justify-content: flex-end; margin-top: 8px; }
.btn.rouge { background: var(--rouge); box-shadow: 0 8px 20px rgba(210,58,58,.25); }
/* barres de défilement aux couleurs du site */
* { scrollbar-width: thin; scrollbar-color: #C7CFE6 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #C7CFE6; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }
.menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }
.cache { display: none; }
.alerte-texte { color: var(--rouge); font-weight: 600; }
.ligne-recompense { display: grid; grid-template-columns: 1fr 140px auto; gap: 10px; align-items: center; }
@media (max-width: 600px) { .ligne-recompense { grid-template-columns: 1fr 100px; } }