/* BROONCO CRM — feuille de style (v1.8)
   Épuré : fond clair, cartes blanches, noir pour les actions, or BROONCO par touches.
   Mode sombre par utilisateur (html[data-mode="sombre"], ou "auto" selon le système). */

:root {
  --fond: #F7F7F5;
  --carte: #FFFFFF;
  --encre: #17171A;
  --encre-2: #3B3D48;
  --gris: #55555C;
  --gris-2: #6B6B72;
  --gris-clair: #E7E6E1;
  --bord-champ: #DAD9D3;
  --ligne: #F0EFEA;
  --creme: #F4F3EF;
  --survol: #F1F0EB;
  --or: #C9995C;
  --or-clair: #D9AF74;
  --or-texte: #8B5E2B;
  --or-fonce: #6E4A21;
  --or-pale: #F5EBDD;
  --vert: #1C6B43; --vert-vif: #1F7A4D; --vert-pale: #E8F3EC;
  --rouge: #9B1C1C; --rouge-vif: #C2410C; --rouge-pale: #FCE4E4;
  --orange: #9A3A0A; --orange-pale: #FCEBDD;
  --violet: #5B2391; --violet-pale: #EFE4FA;
  --bouton: #17171A; --bouton-texte: #FFFFFF;
  --fort: #17171A; --fort-texte: #FFFFFF; --fort-accent: #D9AF74; --fort-muted: #C9C8C2;
  --ombre: 0 12px 32px rgba(23, 23, 26, .10);
  --r: 14px;
  --police: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

html[data-mode="sombre"] {
  --fond: #111113; --carte: #1A1A1E; --encre: #EDEDEA; --encre-2: #C9C8C2; --gris: #A3A29C; --gris-2: #8E8D88;
  --gris-clair: #2A2A30; --bord-champ: #3A3A42; --ligne: #232328; --creme: #222227; --survol: #26262C;
  --or-texte: #D9AF74; --or-fonce: #EAC898; --or-pale: #3A2F22;
  --vert: #7FD1A3; --vert-vif: #4FB883; --vert-pale: #183225;
  --rouge: #F19999; --rouge-vif: #F08A5D; --rouge-pale: #3A1C1C;
  --orange: #F4A26B; --orange-pale: #3A2618;
  --violet: #C7A3F0; --violet-pale: #2C2240;
  --bouton: #EDEDEA; --bouton-texte: #17171A;
  --fort: #EDEDEA; --fort-texte: #17171A; --fort-accent: #8B5E2B; --fort-muted: #55555C;
  --ombre: 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --fond: #111113; --carte: #1A1A1E; --encre: #EDEDEA; --encre-2: #C9C8C2; --gris: #A3A29C; --gris-2: #8E8D88;
    --gris-clair: #2A2A30; --bord-champ: #3A3A42; --ligne: #232328; --creme: #222227; --survol: #26262C;
    --or-texte: #D9AF74; --or-fonce: #EAC898; --or-pale: #3A2F22;
    --vert: #7FD1A3; --vert-vif: #4FB883; --vert-pale: #183225;
    --rouge: #F19999; --rouge-vif: #F08A5D; --rouge-pale: #3A1C1C;
    --orange: #F4A26B; --orange-pale: #3A2618;
    --violet: #C7A3F0; --violet-pale: #2C2240;
    --bouton: #EDEDEA; --bouton-texte: #17171A;
    --fort: #EDEDEA; --fort-texte: #17171A; --fort-accent: #8B5E2B; --fort-muted: #55555C;
    --ombre: 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

html.taille-petite { font-size: 13px; }
html.taille-normale { font-size: 14px; }
html.taille-grande { font-size: 15.5px; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); }
body { color: var(--encre); font: 1rem/1.5 var(--police); -webkit-font-smoothing: antialiased; }
a { color: var(--or-texte); }
a:hover { color: var(--or-fonce); }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 8px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.sr, .evitement:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--carte); border-radius: 10px; }
kbd { font: 500 11px var(--mono); padding: 2px 6px; border: 1px solid var(--bord-champ); border-radius: 6px; color: var(--gris); background: var(--carte); }

/* ---------- Structure ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 248px; flex-shrink: 0; background: var(--carte); border-right: 1px solid var(--gris-clair); padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.side-tete { display: flex; align-items: center; justify-content: space-between; }
.side .side-fermer { display: none; }
.marque { display: flex; align-items: center; gap: 10px; padding: 2px 8px; color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.marque-carre { border-radius: 9px; background: #17171A; display: inline-grid; place-items: center; flex-shrink: 0; }
.marque strong { display: block; font-weight: 700; font-size: 15px; letter-spacing: .08em; line-height: 1.15; }
.marque small { display: block; font-size: 12px; color: var(--gris-2); }
.side nav { display: flex; flex-direction: column; gap: 10px; }
.nav-groupe { display: flex; flex-direction: column; gap: 2px; }
.nav-titre { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--gris-2); text-transform: uppercase; letter-spacing: .06em; }
.nav { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 38px; border-radius: 9px; color: var(--encre-2); text-decoration: none; font-weight: 450; white-space: nowrap; }
.nav:hover { background: var(--survol); color: var(--encre); }
.nav.on { background: var(--bouton); color: var(--bouton-texte); font-weight: 500; }
.nav svg { flex-shrink: 0; }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--creme); color: var(--encre-2); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.who { margin-top: auto; border-top: 1px solid var(--ligne); padding-top: 10px; }
.who summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.who summary::-webkit-details-marker { display: none; }
.who summary:hover { background: var(--survol); }
.who-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who-txt strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-txt small { font-size: 12px; color: var(--gris-2); }
.who-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px; }
.who-menu a, .who-mode { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--encre-2); text-decoration: none; font-size: 13.5px; }
.who-menu a:hover { background: var(--survol); color: var(--encre); }
.who-mode label { flex: 1; }
.who-mode select { width: auto; min-height: 32px; padding: 0 6px; }
.colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entete-app { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 32px; background: var(--carte); border-bottom: 1px solid var(--gris-clair); }
.entete-app .barre-menu { display: none; }
.barre-recherche { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--gris-clair); border-radius: 10px; background: var(--fond); color: var(--gris-2); }
.barre-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--encre); }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.annee { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 10px; border: 1px solid var(--gris-clair); border-radius: 10px; color: var(--gris); margin: 0; }
.annee select { border: 0; background: transparent; font: 500 13.5px var(--police); color: var(--encre); height: 36px; cursor: pointer; }
.annee.passee { border-color: var(--or); background: var(--or-pale); }
.btn-icone { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--gris-clair); border-radius: 10px; background: var(--carte); color: var(--encre); cursor: pointer; text-decoration: none; flex-shrink: 0; }
.btn-icone:hover { border-color: var(--encre); color: var(--encre); }
.notif .point { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--rouge-vif); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--carte); }
.main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 20px; }
.bandeau-annee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--or-pale); color: var(--encre); }
.bandeau-annee span { flex: 1 1 260px; }
.onglets { display: none; }
.voile { display: none; }

/* ---------- Typo ---------- */
.h1 { font-weight: 600; font-size: 1.95rem; letter-spacing: -.02em; line-height: 1.15; }
.h2 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.005em; }
.surtitre { color: var(--gris-2); font-size: .93rem; margin-bottom: 4px; }
.muted { color: var(--gris); }
.petit { font-size: .86rem; }
.mono { font-family: var(--mono); }
.lbl { font-size: .86rem; color: var(--gris); font-weight: 450; }
.chiffre { font-family: var(--mono); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em; }
.chiffre small { font-size: 1rem; }
.barre { text-decoration: line-through; color: var(--gris); }
.rouge { color: var(--rouge); } .vert { color: var(--vert); } .or { color: var(--or-texte); }

/* ---------- Blocs ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card { background: var(--carte); border: 1px solid var(--gris-clair); border-radius: var(--r); }
.pad { padding: 20px; }
.pad-l { padding: 24px; }
.card-noire { background: var(--fort); border-color: var(--fort); color: var(--fort-texte); }
.card-noire .lbl, .card-noire .muted { color: var(--fort-muted); }
.card-noire .chiffre { color: var(--fort-accent); }
.bloc-fort { background: var(--fort) !important; color: var(--fort-texte); border-color: var(--fort) !important; }
.bloc-fort .lbl, .bloc-fort .muted { color: var(--fort-muted); } .bloc-fort .chiffre, .bloc-fort .accent { color: var(--fort-accent); }
.card-alerte { border-color: var(--rouge-vif); }
.card-or { border-color: var(--or); box-shadow: 0 0 0 3px var(--or-pale); }
.card-orange { background: var(--orange-pale); border-color: transparent; }
.card-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pile { display: flex; flex-direction: column; gap: 20px; }
.pile-s { display: flex; flex-direction: column; gap: 10px; }
.ligne-flex { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cols-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cols-dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kv { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.kv:last-child { border-bottom: 0; }
.somme { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.somme.total { border-top: 1px solid var(--encre); padding-top: 10px; margin-top: 6px; font-weight: 600; }
.vide { padding: 24px; text-align: center; color: var(--gris); }
.sep { height: 1px; background: var(--ligne); margin: 8px 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bord-champ); background: var(--carte); color: var(--encre); font: 500 .93rem var(--police); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--encre); color: var(--encre); }
.btn.pri, .btn.noir { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); font-weight: 600; }
.btn.pri:hover, .btn.noir:hover { opacity: .9; color: var(--bouton-texte); }
.btn.ok { background: var(--vert-vif); border-color: var(--vert-vif); color: #fff; }
.btn.danger { color: var(--rouge); border-color: var(--rouge-pale); }
.btn.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.btn.fantome { border-style: dashed; color: var(--encre-2); background: transparent; }
.btn.s { min-height: 34px; padding: 0 12px; font-size: .9rem; border-radius: 9px; }
.btn.xs { min-height: 30px; padding: 0 10px; font-size: .84rem; border-radius: 8px; }
.btn.lien { border: 0; background: none; color: var(--or-texte); padding: 0 4px; min-height: 30px; text-decoration: underline; }
.btn.bloc { width: 100%; }
.btn[disabled] { background: var(--gris-clair); border-color: var(--gris-clair); color: var(--gris); cursor: not-allowed; }
form.inline { display: inline; margin: 0; }

/* ---------- Pastilles & avatars ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: .84rem; font-weight: 500; white-space: nowrap; }
.p-or { background: var(--or-pale); color: var(--or-texte); }
.p-vert { background: var(--vert-pale); color: var(--vert); }
.p-orange { background: var(--orange-pale); color: var(--orange); }
.p-rouge { background: var(--rouge-pale); color: var(--rouge); }
.p-gris { background: var(--creme); color: var(--encre-2); }
.p-violet { background: var(--violet-pale); color: var(--violet); }
.p-noir { background: var(--bouton); color: var(--bouton-texte); }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
.av-vide { background: var(--creme); color: var(--gris); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ > span, .champ > label { font-size: .9rem; color: var(--encre-2); font-weight: 500; }
.in, select.in, textarea.in { width: 100%; min-height: 42px; border: 1px solid var(--bord-champ); border-radius: 10px; padding: 0 12px; font: 1rem var(--police); background: var(--carte); color: var(--encre); }
textarea.in { padding: 10px 12px; min-height: 90px; resize: vertical; }
.in:focus { outline: 2px solid var(--encre); outline-offset: 1px; }
.in.s { min-height: 34px; font-size: .9rem; }
.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grille .plein { grid-column: 1 / -1; }
.case { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.case input { width: 18px; height: 18px; accent-color: var(--encre); margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--encre); }
fieldset { border: 1px solid var(--gris-clair); border-radius: 12px; padding: 16px; margin: 0; }
legend { padding: 0 6px; font-weight: 600; }
details.repli > summary { cursor: pointer; list-style: none; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli[open] > summary { margin-bottom: 12px; }
.recherche { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--carte); border: 1px solid var(--gris-clair); min-width: 260px; color: var(--gris-2); }
.recherche input { border: 0; outline: 0; font: 1rem var(--police); width: 100%; background: transparent; color: var(--encre); }
.mdp { position: relative; }
.mdp .in { padding-right: 52px; }
.mdp-oeil { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--gris); display: grid; place-items: center; cursor: pointer; }
.mdp-oeil svg + svg, .mdp-oeil[aria-pressed="true"] svg:first-child { display: none; }
.mdp-oeil[aria-pressed="true"] svg + svg { display: block; }
.regles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--gris); }
.regles li { display: flex; align-items: center; gap: 8px; }
.regles li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--bord-champ); flex-shrink: 0; }
.regles li.ok { color: var(--vert); }
.regles li.ok::before { background: var(--vert-vif) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.jauge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.jauge i { height: 4px; border-radius: 99px; background: var(--ligne); }
.jauge[data-n="1"] i:nth-child(-n+1), .jauge[data-n="2"] i:nth-child(-n+2) { background: var(--rouge-vif); }
.jauge[data-n="3"] i:nth-child(-n+3) { background: var(--or); }
.jauge[data-n="4"] i { background: var(--vert-vif); }

/* ---------- Tableaux ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { border-collapse: collapse; width: 100%; }
.tbl th { text-align: left; font-size: .86rem; font-weight: 500; color: var(--gris); padding: 11px 16px; border-bottom: 1px solid var(--gris-clair); white-space: nowrap; background: var(--fond); }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.retard td { background: var(--rouge-pale); }
.tbl tr.choisi td { background: var(--or-pale); }
.tbl tr.lot td { background: var(--creme); font-size: .84rem; font-weight: 600; color: var(--gris); padding: 8px 16px; }
.tbl .num, .num { text-align: right; font-family: var(--mono); font-size: .95em; white-space: nowrap; }
.tbl th.num { font-family: var(--police); font-size: .86rem; }
.tbl a.rang { color: var(--encre); text-decoration: none; font-weight: 500; }
.tbl a.rang:hover { color: var(--or-texte); }
.card > .tbl-wrap:first-child, .card > table.tbl:first-child { border-radius: var(--r) var(--r) 0 0; }

/* ---------- Segments / filtres ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--carte); border: 1px solid var(--gris-clair); gap: 2px; flex-wrap: wrap; }
.seg a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; color: var(--gris); text-decoration: none; font-weight: 500; font-size: .9rem; }
.seg a:hover { color: var(--encre); }
.seg a.on { background: var(--bouton); color: var(--bouton-texte); }

/* ---------- Kanban ---------- */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { width: 270px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; background: var(--creme); border-radius: 14px; padding: 12px; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.col.gagne { background: var(--vert-pale); }
.col.cible { border: 1px dashed var(--or); background: var(--or-pale); }
.colh { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.kc { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--carte); border: 1px solid var(--gris-clair); border-radius: 12px; color: var(--encre); }
.kc:hover { border-color: var(--encre-2); }
.kc[draggable="true"] { cursor: grab; }
.kc.glisse { opacity: .45; }
.kc.stagne { box-shadow: inset 3px 0 0 var(--rouge-vif); }
.kc .t { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kc .t a { color: var(--encre); text-decoration: none; font-weight: 600; }
.kc .b { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kc .move { display: flex; justify-content: space-between; gap: 6px; border-top: 1px dashed var(--gris-clair); padding-top: 8px; }

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.etapes div { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 500; color: var(--gris); }
.etapes i { display: block; height: 6px; border-radius: 99px; background: var(--gris-clair); }
.etapes .fait i { background: var(--or); }
.etapes .courant { color: var(--or-texte); }
.phases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ph { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--creme); }
.ph .n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--gris-clair); color: var(--encre-2); }
.ph.fait .n { background: var(--vert-vif); color: #fff; }
.ph.courant { background: var(--or-pale); outline: 2px solid var(--or); outline-offset: -2px; }
.ph.courant .n { background: var(--bouton); color: var(--bouton-texte); }
.parcours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.parcours.c5, .etapes.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.parcours.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.parcours a { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--creme); text-decoration: none; color: var(--encre); border: 1px solid transparent; }
.parcours a:hover { border-color: var(--encre-2); color: var(--encre); }

/* ---------- Barres ---------- */
.bar { height: 6px; border-radius: 99px; background: var(--ligne); overflow: hidden; min-width: 80px; }
.bar > div { height: 100%; background: var(--or); border-radius: 99px; }
.bar.ok > div { background: var(--vert-vif); }
.bar.alerte > div { background: var(--orange); }
.bar.danger > div { background: var(--rouge-vif); }

/* ---------- Fil d'activité ---------- */
.fil { display: flex; flex-direction: column; gap: 18px; }
.ev { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--creme); color: var(--encre-2); }
.ic.or { background: var(--or-pale); color: var(--or-texte); } .ic.vert { background: var(--vert-pale); color: var(--vert); }
.ic.rouge { background: var(--rouge-pale); color: var(--rouge); } .ic.orange { background: var(--orange-pale); color: var(--orange); }
.ic.noir { background: var(--bouton); color: var(--bouton-texte); } .ic.violet { background: var(--violet-pale); color: var(--violet); }
.ic.futur { background: var(--carte); border: 2px dashed var(--bord-champ); color: var(--gris); }
.ev .tete { display: flex; justify-content: space-between; gap: 8px; }
.bulle { margin-top: 6px; padding: 12px; border-radius: 10px; background: var(--creme); white-space: pre-line; }

/* ---------- Notifications ---------- */
.nt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--ligne); align-items: start; }
.nt.nonlu { background: var(--or-pale); }
.nt .ic { width: 40px; height: 40px; border-radius: 12px; }

/* ---------- Interrupteur ---------- */
.sw { position: relative; width: 42px; height: 24px; flex-shrink: 0; display: inline-block; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw span { position: absolute; inset: 0; border-radius: 99px; background: var(--bord-champ); transition: .15s; }
.sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
.sw input:checked + span { background: var(--bouton); }
.sw input:checked + span::after { left: 21px; background: var(--carte); }
.sw input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

/* ---------- Messages ---------- */
.flash { padding: 13px 16px; border-radius: 12px; font-weight: 500; }
.flash-ok { background: var(--vert-pale); color: var(--vert); }
.flash-erreur { background: var(--rouge-pale); color: var(--rouge); }
.flash-info { background: var(--or-pale); color: var(--or-texte); }
.encart { padding: 14px; border-radius: 12px; background: var(--creme); }

/* ---------- Document (aperçus génériques) ---------- */
.doc { background: var(--carte); border: 1px solid var(--gris-clair); border-radius: var(--r); padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.doc-tete { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.doc-bloc { padding: 16px; border-radius: 12px; background: var(--creme); }
.doc-totaux { display: flex; justify-content: flex-end; }
.doc-totaux > div { width: min(360px, 100%); }
.doc-total { font-weight: 700; font-size: 24px; }

/* ---------- Connexion / installation ---------- */
.ecran-centre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fond); }
.boite { width: min(440px, 100%); background: var(--carte); border: 1px solid var(--gris-clair); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.boite-large { width: min(720px, 100%); }
.boite .marque-centre { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth { display: flex; min-height: 100vh; background: var(--carte); }
.auth-panneau { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px; background: #17171A; color: #fff; }
.auth-marque { display: flex; align-items: center; gap: 12px; }
.auth-marque strong { font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.slogan { margin: 0; font-size: clamp(44px, 5.4vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -.01em; }
.slogan span { display: block; }
.slogan span:last-child { color: #D9AF74; }
.auth-sous { margin: 16px 0 0; font-size: 15px; color: #C9C8C2; max-width: 440px; }
.auth-pied { font-size: 12.5px; color: #A3A29C; }
.auth-form { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-form > * { width: 100%; max-width: 380px; }
.auth-form form, .auth-bloc { display: flex; flex-direction: column; gap: 18px; }
.auth-form .h1 { font-size: 28px; }
.auth-form .in { min-height: 48px; }
.auth-form .btn.pri { min-height: 50px; font-size: 15px; }
.auth-icone { width: 52px; height: 52px; border-radius: 14px; background: var(--vert-pale); color: var(--vert); display: grid; place-items: center; }
.auth-retour { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--gris); text-decoration: none; }

/* ---------- Guide ---------- */
.etape-guide { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.etape-guide:last-child { border-bottom: 0; }
.etape-guide .num { width: 44px; height: 44px; border-radius: 12px; background: var(--bouton); color: var(--bouton-texte); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; }

/* ---------- Indicateurs (tableau de bord) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi { background: var(--carte); border: 1px solid var(--gris-clair); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--encre); }
a.kpi:hover { border-color: var(--encre-2); color: var(--encre); }
.kpi .lbl { font-size: .93rem; }
.kpi .val { font-family: var(--mono); font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.kpi .note { font-size: .9rem; color: var(--gris); }
.salut { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.salut .date { color: var(--gris-2); font-size: .93rem; margin: 0 0 2px; }

/* ---------- Mobile : barre d'onglets en bas, menu en tiroir ---------- */
@media (max-width: 1180px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr) 300px; }
  .cols-3 > :first-child { grid-column: 1 / -1; }
  .g6, .parcours, .parcours.c5, .parcours.c6, .phases, .etapes, .etapes.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--ombre); width: 280px; }
  body.menu-ouvert .side { transform: none; }
  body.menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .side .side-fermer { display: inline-grid; }
  .entete-app { padding: 10px 16px; gap: 8px; }
  .entete-app .barre-menu { display: inline-grid; }
  .barre-recherche kbd { display: none; }
  .barre-nouveau span { display: none; }
  .barre-nouveau { width: 40px; padding: 0; }
  .main { padding: 20px 16px 104px; }
  .onglets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: var(--carte); border-top: 1px solid var(--gris-clair); }
  .onglets a, .onglets button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--gris); text-decoration: none; font: 500 11px var(--police); background: none; border: 0; cursor: pointer; }
  .onglets a[aria-current="page"] { color: var(--encre); font-weight: 600; }
  .onglets .onglet-plus { justify-self: center; width: 52px; height: 52px; min-height: 0; border-radius: 16px; background: var(--bouton); color: var(--bouton-texte); }
}
@media (max-width: 760px) {
  .barre-recherche { display: none; }
  .annee { padding-left: 8px; }
  .annee svg { display: none; }
  .g4, .g3, .g2, .cols-side, .cols-3, .cols-dash, .form-grille { grid-template-columns: 1fr; }
  .g6, .parcours, .parcours.c5, .parcours.c6, .phases, .etapes, .etapes.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recherche { min-width: 0; width: 100%; }
  .doc { padding: 20px; }
  .h1 { font-size: 1.6rem; }
  .auth { flex-direction: column; }
  .auth-panneau { flex: 0 0 auto; padding: 48px 24px 28px; gap: 20px; }
  .slogan { font-size: 40px; }
  .auth-sous, .auth-pied { display: none; }
  .auth-form { align-items: flex-start; padding: 28px 24px; }
  /* Tableaux transformés en cartes */
  .tbl.cartes thead { display: none; }
  .tbl.cartes, .tbl.cartes tbody, .tbl.cartes tr, .tbl.cartes td { display: block; width: 100%; }
  .tbl.cartes tr { padding: 12px 14px; border-bottom: 1px solid var(--ligne); }
  .tbl.cartes td { padding: 2px 0; border: 0; text-align: left; }
  .tbl.cartes td.num { text-align: left; }
  .tbl.cartes td[data-l]::before { content: attr(data-l) " · "; color: var(--gris); font-family: var(--police); font-size: .86rem; }
  .tbl.cartes td.cache-mobile { display: none; }
}

/* ---------- Documents BROONCO (devis, bons de livraison, factures) ---------- */
.doc.fac { background: #fff; color: #111; font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #111; font-size: 13.5px; line-height: 1.35; gap: 14px; padding: 36px 40px; border-radius: 4px; }
.fac b { font-weight: 700; }
.fac-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.fac-societe { display: flex; flex-direction: column; gap: 1px; }
.fac-rs { font-size: 21px; font-weight: 700; }
.fac-act { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.fac-logo img { width: 290px; max-width: 45vw; height: auto; display: block; }
.apercu-a4 { max-width: 794px; padding: 28px 32px; border: 1px solid var(--gris-clair); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.fac-mention { margin-top: 6px; font-size: 11.5px; color: #444; }
.fac-logo-texte { font-family: Geist, sans-serif; font-weight: 800; font-size: 40px; letter-spacing: .04em; }
.fac-ligne2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; }
.fac-titre { font-size: 32px; font-weight: 700; color: #595959; margin: 0; letter-spacing: .01em; }
.fac-client { border: 1.5px solid #111; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.fac-client-nom { font-weight: 700; }
.fac-client-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.fac table { width: 100%; border-collapse: collapse; }
.fac-info th, .fac-info td { border: 1px solid #555; text-align: center; padding: 4px 8px; width: 33.33%; }
.fac-info th { background: #DCDCDC; font-weight: 700; }
.fac-ref { font-size: 12.5px; margin-top: -6px; }
.fac-lignes { margin-top: 10px; }
.fac-lignes th { background: #DCDCDC; font-weight: 700; padding: 6px 8px; border: 1px solid #555; text-align: left; }
.fac-lignes td { border-left: 1px solid #555; border-right: 1px solid #555; padding: 5px 8px; vertical-align: top; }
.fac-lignes tbody tr:last-child td { border-bottom: 1px solid #555; }
.fac-lignes .c { text-align: center; width: 9%; white-space: nowrap; }
.fac-lignes .n { text-align: right; width: 14%; white-space: nowrap; }
.fac-lignes th.n:nth-child(4), .fac-lignes td.n:nth-child(4) { width: 7%; }
.fac-desc { white-space: pre-line; font-size: 12.5px; color: #333; }
.fac-lot td { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; padding-top: 10px; }
.fac-bas, .fac-signatures, .fac-totaux, .fac-lignes tr, .fac-ligne2 { break-inside: avoid; page-break-inside: avoid; }
.fac-case { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; }
.fac-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 10px; }
.fac-gauche { display: flex; flex-direction: column; gap: 6px; }
.fac-tva th, .fac-tva td { border: 1px solid #555; padding: 2px 8px; text-align: right; }
.fac-tva th { text-align: center; font-weight: 700; }
.fac-totaux { border: 1.5px solid #111; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.fac-totaux > div { display: flex; justify-content: space-between; gap: 12px; }
.fac-totaux > div > span:last-child { text-align: right; white-space: nowrap; }
.fac-totaux .fort { font-weight: 700; border-top: 1.5px solid #111; margin: 4px -12px 0; padding: 6px 12px 0; }
.fac-lettres { font-size: 12.5px; margin: 4px 0 0; }
.fac-conditions { font-size: 12.5px; white-space: pre-line; }
.fac-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fac-signatures > div { min-height: 100px; border: 1px solid #999; border-radius: 6px; padding: 8px 10px; font-size: 12.5px; color: #333; text-align: center; }
.fac-pied { margin-top: auto; padding-top: 28px; font-size: 13px; }
@media screen and (max-width: 900px) {
  .fac-tete, .fac-ligne2, .fac-bas, .fac-signatures { display: flex; flex-direction: column; gap: 12px; }
  .doc.fac { padding: 18px; overflow-x: auto; }
  .fac-lignes { min-width: 560px; }
}

/* ---------- Impression ---------- */
@media print {
  .side, .entete-app, .onglets, .bandeau-annee, .no-print, .flash { display: none !important; }
  .colonne { display: block; }
  .main { max-width: none; }
  .main { padding: 0; }
  body, html { background: #fff; }
  .doc { border: 0; padding: 0; }
  .cols-side { display: block; }
  .main:has(.doc) > :not(.doc):not(:has(.doc)) { display: none !important; }
  .doc.fac { padding: 0; min-height: 250mm; font-size: 12px; border-radius: 0; gap: 10px; }
  .fac-pied { padding-top: 12px; }
  .fac-logo img { max-width: 100mm; }
  .shell { min-height: 0; display: block; }
  .main { gap: 0; }
  .fac-remplissage td { max-height: 160px; }
  .fac, .fac * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 12mm 12mm 14mm; }
}

/* ---------- Prospection ---------- */
.appel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; padding: 16px 20px; border-top: 1px solid var(--gris-clair); align-items: start; }
.appel.retard { box-shadow: inset 3px 0 0 var(--rouge); }
.appel .ent { font-weight: 600; color: var(--encre); text-decoration: none; }
.form-rapide { display: flex; gap: 6px; flex-wrap: wrap; }
.form-rapide .in { width: auto; flex: 1 1 120px; }
.form-rapide button { flex: 0 0 auto; }
.modele { white-space: pre-line; background: var(--creme); border-radius: 10px; padding: 12px; font-size: 13px; }
.entonnoir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.entonnoir > div { background: var(--creme); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) { .appel { grid-template-columns: 1fr; } .entonnoir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Calendrier des salons ---------- */
.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.fr-bar, .cal-ev { --c: var(--or); --p: var(--or-pale); --t: var(--or-texte); }
.legende i { background: var(--c, var(--or)); width: 14px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.c-or { --c: var(--or); --p: var(--or-pale); --t: var(--or-texte); }
.c-orange { --c: #D27A2C; --p: var(--orange-pale); --t: var(--orange); }
.c-vert { --c: var(--vert); --p: var(--vert-pale); --t: var(--vert); }
.c-violet { --c: #8452C2; --p: var(--violet-pale); --t: var(--violet); }
.c-noir { --c: var(--encre); --p: var(--creme); --t: var(--encre); }
.frise { display: flex; flex-direction: column; }
.fr-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); border-top: 1px solid var(--gris-clair); min-height: 52px; }
.fr-row.tete { border-top: 0; min-height: 30px; }
.fr-lbl { padding: 8px 16px 8px 20px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.fr-lbl a { font-weight: 600; color: var(--encre); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-track { position: relative; background-image: linear-gradient(to right, var(--gris-clair) 1px, transparent 1px); background-size: var(--mois, 16.66%) 100%; }
.fr-mois { position: absolute; top: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding-left: 6px; white-space: nowrap; }
.fr-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 22px; border-radius: 6px; background: var(--p); border: 1px solid var(--c); color: var(--t); font-size: 11px; font-weight: 600; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-decoration: none; }
.fr-bar.plein { background: var(--c); color: #fff; height: 28px; z-index: 1; }
.fr-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rouge); z-index: 2; pointer-events: none; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--gris-clair); }
.cal .jn { padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border-bottom: 1px solid var(--gris-clair); }
.cal .j { min-height: 112px; padding: 6px; border-right: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal .j:nth-child(7n) { border-right: 0; }
.cal .j.hors { background: var(--creme); color: var(--gris-2); }
.cal .j.auj .num { background: var(--encre); color: var(--carte); border-radius: 99px; }
.cal .num { font-size: 12px; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.cal-ev { display: block; font-size: 11px; line-height: 1.3; padding: 3px 6px; border-radius: 5px; background: var(--p); color: var(--t); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--c); }
.cal-ev.plein { background: var(--c); color: #fff; }
.agenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.agenda .item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--gris-clair); border-left: 4px solid var(--c); text-decoration: none; color: var(--encre); }
.phases-salon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.phases-salon > div { padding: 14px; border-radius: 12px; background: var(--p); border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; }
.phases-salon > div.on { border-color: var(--c); box-shadow: 0 0 0 3px var(--p); background: var(--carte); }
.phases-salon > div.fini { opacity: .55; }
@media (max-width: 900px) {
  .fr-row { grid-template-columns: 130px minmax(0, 1fr); }
  .fr-lbl { padding-left: 12px; }
  .cal .j { min-height: 72px; }
  .cal-ev { font-size: 10px; padding: 2px 4px; }
  .phases-salon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Objectifs ---------- */
.objectifs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.obj { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--creme); border: 1px solid transparent; color: var(--encre); text-decoration: none; }
.obj:hover { border-color: var(--or); }
.obj.atteint { background: var(--carte); border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }


/* ---------- Droits & traçabilité ---------- */
.tbl .c, .tbl th.c { text-align: center; }
.matrice input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--encre); }
.matrice td { vertical-align: middle; }
.audit-ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.audit-ligne:last-of-type { border-bottom: 0; }
.audit-details { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12.5px; }
.audit-details s { opacity: .7; }
.trace { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; white-space: nowrap; }
.trace-qui { display: inline-flex; align-items: center; gap: 6px; }
.trace-qui .av { width: 22px; height: 22px; font-size: 9px; }
.trace-quand { color: var(--gris); font-size: 11px; padding-left: 28px; }

/* =================================================================
 *  Nouveautés 1.8
 * ================================================================= */

/* ---------- Fiche client 360° ---------- */
.fiche-tete { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 22px; }
.fiche-init { width: 60px; height: 60px; border-radius: 16px; background: var(--creme); color: var(--encre-2); display: grid; place-items: center; font-size: 20px; font-weight: 600; flex-shrink: 0; }
.fiche-tete .infos { flex: 1 1 260px; min-width: 0; }
.chrono { list-style: none; margin: 0; padding: 4px 20px 16px; }
.chrono li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.chrono li + li { border-top: 1px solid var(--ligne); }
.chrono .tete { display: flex; justify-content: space-between; gap: 12px; }
.chrono .quand { font-size: .86rem; color: var(--gris-2); white-space: nowrap; }
.note-rapide { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--ligne); }
.note-rapide .in { flex: 1 1 220px; }
.note-rapide select.in { flex: 0 0 auto; width: auto; }
.onglets-carte { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--ligne); overflow-x: auto; }
.onglets-carte a { padding: 10px 12px; border-bottom: 2px solid transparent; color: var(--gris); text-decoration: none; font-weight: 500; white-space: nowrap; }
.onglets-carte a.on { color: var(--encre); border-bottom-color: var(--encre); }
.prochaine { background: var(--fort); color: var(--fort-texte); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.prochaine .lbl { color: var(--fort-muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.prochaine .btn { border-color: transparent; }
.prochaine .btn.or { background: var(--or-clair); color: #17171A; }
.dl { margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); row-gap: 6px; font-size: .93rem; }
.dl dt { color: var(--gris); }
.dl dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

/* ---------- Pipeline : prévision ---------- */
.prevision { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 20px 24px; }
.prevision-barre { position: relative; height: 12px; border-radius: 99px; background: var(--ligne); }
.prevision-barre i { position: absolute; top: 0; bottom: 0; }
.prevision-barre .v { left: 0; background: var(--encre); border-radius: 99px 0 0 99px; }
.prevision-barre .p { background: var(--or); }
.prevision-barre .o { top: -5px; bottom: -5px; width: 2px; background: var(--encre); }
.legende-carre { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* ---------- Import CSV ---------- */
.etapes-import { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.etapes-import li { flex: 1 1 140px; display: flex; align-items: center; gap: 8px; color: var(--gris); }
.etapes-import li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono); border: 1px solid var(--bord-champ); }
.etapes-import li.fait b { background: var(--vert-pale); color: var(--vert); border-color: transparent; }
.etapes-import li.on { color: var(--encre); font-weight: 600; }
.etapes-import li.on b { background: var(--bouton); color: var(--bouton-texte); border-color: transparent; }
.resume-import { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.resume-import > div { padding: 14px; border-radius: 12px; }
.resume-import .n { font: 500 22px var(--mono); }
.choix-carte { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--gris-clair); border-radius: 12px; cursor: pointer; }
.choix-carte:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.choix-carte input { margin-top: 3px; }
.menu-export { position: relative; }
.menu-export > summary { list-style: none; }
.menu-export > summary::-webkit-details-marker { display: none; }
.menu-export .panneau { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: 290px; padding: 6px; background: var(--carte); border: 1px solid var(--gris-clair); border-radius: 12px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 2px; }
.menu-export .panneau a, .menu-export .panneau button { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; text-align: left; border: 0; background: none; font: inherit; cursor: pointer; }
.menu-export .panneau a:hover, .menu-export .panneau button:hover { background: var(--survol); }
.menu-export .panneau small { color: var(--gris); font-size: .86rem; }
.barre-selection { display: none; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--bouton); color: var(--bouton-texte); }
.barre-selection.visible { display: flex; }
.barre-selection .btn { background: transparent; color: var(--bouton-texte); border-color: var(--gris-2); }

/* ---------- Mode salon (mobile) ---------- */
.salon-app { max-width: 520px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.salon-capture { position: relative; border-radius: 18px; background: #17171A; color: #fff; padding: 16px; min-height: 200px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.salon-capture img { max-height: 220px; border-radius: 10px; }
.salon-capture .compteur { position: absolute; top: 12px; right: 12px; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 99px; background: #D9AF74; color: #17171A; font-weight: 700; display: grid; place-items: center; }
.salon-capture .btn { background: #D9AF74; border-color: #D9AF74; color: #17171A; min-height: 48px; font-weight: 600; }
.salon-etat { font-size: .93rem; color: var(--gris); display: flex; align-items: center; gap: 8px; min-height: 22px; }
.salon-etat.ok { color: var(--vert); }
.pastilles-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles-choix label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--gris-clair); border-radius: 99px; cursor: pointer; font-size: .93rem; }
.pastilles-choix input { position: absolute; opacity: 0; pointer-events: none; }
.pastilles-choix label:has(input:checked) { background: var(--bouton); color: var(--bouton-texte); border-color: var(--bouton); }
.pastilles-choix.chaleur label:has(input[value="chaud"]:checked) { background: var(--orange-pale); color: var(--orange); border-color: var(--rouge-vif); }
.vocal { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border: 1px dashed var(--bord-champ); border-radius: 12px; background: var(--creme); cursor: pointer; font: inherit; color: var(--encre); text-align: left; width: 100%; }
.vocal .rond { width: 34px; height: 34px; border-radius: 50%; background: var(--rouge-vif); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.vocal.enregistre .rond { animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .75; } }
.salon-actions { position: sticky; bottom: 72px; display: flex; gap: 8px; padding: 10px 0; background: var(--fond); }
.salon-actions .btn { min-height: 50px; }

/* ---------- Configuration ---------- */
.reglages { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.reglages-onglets { flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.reglages-onglets a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; color: var(--encre-2); text-decoration: none; }
.reglages-onglets a:hover { background: var(--survol); }
.reglages-onglets a.on { background: var(--bouton); color: var(--bouton-texte); font-weight: 500; }
.reglages-corps { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.option { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--ligne); cursor: pointer; }
.option .txt { flex: 1; min-width: 0; }
.option .txt small { display: block; color: var(--gris); font-size: .88rem; }
.barre-enregistrer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; background: var(--fond); }
@media (max-width: 960px) { .reglages-onglets { position: static; flex: 1 1 100%; flex-direction: row; overflow-x: auto; } .reglages-onglets a { white-space: nowrap; } .barre-enregistrer { bottom: 64px; } }

/* ---------- Avoirs ---------- */
.type-avoir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type-avoir label { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--gris-clair); border-radius: 12px; cursor: pointer; }
.type-avoir label:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.type-avoir input { position: absolute; opacity: 0; pointer-events: none; }
.recap-avoir { position: sticky; top: 84px; }

/* ---------- Exercices ---------- */
.exercice { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--ligne); }
.exercice .ic { width: 40px; height: 40px; }
.blocage { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--orange-pale); color: var(--orange); }

/* ---------- Rôles ---------- */
.matrice .groupe td { padding: 14px 16px 6px; font-size: .8rem; font-weight: 600; color: var(--gris-2); text-transform: uppercase; letter-spacing: .06em; background: var(--carte); }
.matrice .special { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; margin: 2px; border: 1px solid var(--gris-clair); border-radius: 99px; font-size: .86rem; white-space: nowrap; cursor: pointer; }
.matrice .nouveau { font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: var(--bouton); color: var(--bouton-texte); margin-left: 6px; vertical-align: 1px; }

/* ---------- v1.8.1 · Éditeur de devis ---------- */
.devis-tete { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .8fr); gap: 16px; align-items: end; }
.devis-titre-in { font-size: 1.15rem; font-weight: 500; min-height: 48px; }
.devis-numero { display: inline-flex; align-items: center; gap: 8px; font: 500 .95rem var(--mono); padding: 4px 10px; border-radius: 8px; background: var(--or-pale); color: var(--or-texte); }
.nouveau-client { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px; border: 1px dashed var(--bord-champ); border-radius: 12px; background: var(--fond); }
.editeur { overflow: visible; }
.ed-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 24px 14px; }
.ed-table th, .ed-table td { padding: 8px 8px; vertical-align: top; }
.ed-table th:first-child, .ed-table td:first-child { padding-left: 20px; }
.ed-table th:last-child, .ed-table td:last-child { padding-right: 20px; }
.ed-n { width: 44px; color: var(--gris); padding-top: 16px !important; }
.ed-des { min-width: 260px; }
.ed-des .in + .in { margin-top: 4px; }
.ed-desc { min-height: 34px; padding-top: 7px; resize: vertical; color: var(--gris); font-size: .86rem; line-height: 1.35; }
.ed-u { width: 92px; } .ed-q { width: 80px; } .ed-p { width: 130px; } .ed-r { width: 78px; } .ed-t { width: 120px; text-align: right; padding-top: 16px !important; }
.ed-actions { width: 112px; white-space: nowrap; text-align: right; }
.ed-actions .btn { margin-left: 2px; min-width: 30px; padding: 0 8px; }
.ed-lib { display: none; }
.ed-cat { min-height: 28px; margin-top: 2px; }
.ed-section td { background: var(--fond); }
.ed-section .ed-n { font-weight: 600; color: var(--or-texte); }
.ed-titre-section { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; background: transparent; }
.ed-ajout { padding: 12px 20px 18px; }
.ed-ajout .btn { width: 100%; }
.ed-catalogue { position: relative; }
.ed-catalogue > summary { list-style: none; }
.ed-catalogue > summary::-webkit-details-marker { display: none; }
.ed-catalogue-panneau { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(420px, 86vw); padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.ed-catalogue-liste { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ed-catalogue-liste .lbl { margin: 8px 4px 2px; }
.ed-produit { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--encre); font: inherit; font-size: .9rem; cursor: pointer; }
.ed-produit:hover, .ed-produit:focus-visible { background: var(--survol); }
.ed-produit .mono { white-space: nowrap; }
.ed-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px; align-items: start; }
.ed-totaux .g3 { gap: 10px; }
.barre-actions { position: sticky; bottom: 0; z-index: 12; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--carte); border: 1px solid var(--gris-clair); border-radius: var(--r); box-shadow: 0 -8px 24px rgba(0,0,0,.05); }
.flash-ligne { animation: flashLigne .8s ease-out; }
@keyframes flashLigne { from { background: var(--or-pale); } to { background: transparent; } }
@media (max-width: 1100px) { .devis-tete { grid-template-columns: repeat(2, minmax(0, 1fr)); } .devis-tete > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ed-bas { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .devis-tete { grid-template-columns: 1fr; }
  .ed-table thead { display: none; }
  .ed-table, .ed-table tbody { display: block; }
  .ed-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--ligne); }
  .ed-table td { display: block; padding: 0 !important; border: 0; width: auto; }
  .ed-table .ed-n { display: none; }
  .ed-table .ed-des { grid-column: 1 / -1; min-width: 0; }
  .ed-table .ed-t { grid-column: 1 / 3; text-align: left; }
  .ed-table .ed-actions { grid-column: 3 / 5; align-self: end; }
  .ed-table .ed-section td[colspan] { grid-column: 1 / 4; }
  .ed-table .ed-section .ed-actions { grid-column: 4 / 5; }
  .ed-lib { display: block; font-size: .78rem; color: var(--gris); margin-bottom: 2px; }
  .ed-u, .ed-q, .ed-p, .ed-r { grid-column: span 1; }
  .ed-p { grid-column: span 2; } .ed-u { grid-column: span 1; } .ed-q { grid-column: span 1; } .ed-r { grid-column: span 2; }
  .barre-actions { bottom: 64px; }
}

/* ---------- Aperçu avant création ---------- */
.apercu-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bascule { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fond); border: 1px solid var(--gris-clair); }
.bascule a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; color: var(--encre-2); text-decoration: none; font-size: .9rem; }
.bascule a.on { background: var(--carte); color: var(--encre); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.apercu-cadre { background: #E9E8E4; border-radius: var(--r); padding: 28px; overflow-x: auto; }
html[data-mode="sombre"] .apercu-cadre { background: #26262C; }
.apercu-cadre .doc.fac { max-width: 210mm; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
@media (max-width: 760px) { .apercu-cadre { padding: 10px; } }

/* ---------- Cachet et signature sur les documents ---------- */
.fac-cachet { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 2px; }
.fac-cachet img { mix-blend-mode: multiply; }
.fac-cachet .cachet { transform: rotate(-6deg); opacity: .95; }
.fac-cachet .signature { position: absolute; left: 50%; top: 18%; transform: translateX(-18%); }
.fac-cachet .cachet + .signature { opacity: .95; }
.fac-signatures .vide-sig { border: 0 !important; }
.menu-imprimer { position: relative; }
.menu-imprimer > summary { list-style: none; }
.menu-imprimer > summary::-webkit-details-marker { display: none; }
.menu-imprimer-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 260px; display: flex; flex-direction: column; padding: 6px; background: var(--carte); border: 1px solid var(--gris-clair); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.menu-imprimer-liste a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.menu-imprimer-liste a:hover { background: var(--survol); }
.menu-imprimer-liste span { font-size: .84rem; color: var(--gris); }
.zone-image { display: grid; place-items: center; min-height: 150px; padding: 14px; border: 1px dashed var(--bord-champ); border-radius: 12px; background: #fff; color: #111; }
.zone-image img { max-width: 100%; max-height: 150px; }
.choix-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--gris-clair); border-radius: 10px; cursor: pointer; }
.choix-radio:has(input:checked) { border-color: var(--encre); background: var(--or-pale); }
.choix-radio input { margin-top: 3px; accent-color: var(--encre); width: 16px; height: 16px; }
@media print {
  .apercu-cadre { background: none; padding: 0; }
  .apercu-cadre .doc.fac { box-shadow: none; max-width: none; }
  .barre-actions, .apercu-barre { display: none !important; }
}
.card .menu-imprimer, .card .menu-imprimer > summary, .card > [data-imprimer] { width: 100%; }
.card .menu-imprimer-liste { left: 0; right: auto; }
[hidden] { display: none !important; }
.devis-tete .in { min-height: 48px; }
.ed-totaux .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 760px) {
  .ed-table .ed-u { grid-column: 1 / 2; } .ed-table .ed-q { grid-column: 2 / 3; } .ed-table .ed-p { grid-column: 3 / 5; }
  .ed-table .ed-r { grid-column: 1 / 2; } .ed-table .ed-t { grid-column: 2 / 3; align-self: end; } .ed-table .ed-actions { grid-column: 3 / 5; align-self: end; }
  .barre-actions { padding: 10px 12px; }
  .barre-actions .masque-mobile { display: none; }
  .barre-actions .actions { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .barre-actions .actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: .85rem; white-space: normal; text-align: center; line-height: 1.15; }
}