/* ════════════════════════════════════════════════════════════════════════════
   Dashboard Patientèle V4 : système de design (jetons « --v-* » de brand/tokens.css, chargée avant) + coque + composants.
   Aucune valeur de couleur ici : tout passe par les jetons. Préfixe « v- » partout : cohabite avec app.css (V3) sans collision.

   Trois surfaces : barre latérale aubergine, fond gris clair, cartes blanches. Une couleur d'accent par section (data-s="home|pros|rdv|clients|acq|biblio|reg"
   pose --acc, --acc-t, --acc-c). Six états sémantiques (todo, sent, relance, signed, lost, alert) : toujours une pastille avec un mot.
   Le bordeaux (--v-act) est l'action principale : UN seul bouton plein par vue.
   Points d'arrêt : ≥ 1100 px barre latérale complète · 768 à 1099 px barre réduite aux icônes · < 768 px barre d'onglets en bas.
   Accessibilité : focus visible (double anneau), contrastes AA, cibles de 44 px sur écran tactile, mouvements réduits respectés.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("?a=plus-jakarta-sans-latin-400-normal.woff2&v=221a4135d06a4b33") format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("?a=plus-jakarta-sans-latin-500-normal.woff2&v=bad081c8dbc15aed") format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("?a=plus-jakarta-sans-latin-600-normal.woff2&v=8872bb5c9111df9b") format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("?a=plus-jakarta-sans-latin-700-normal.woff2&v=2050755bf475817c") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("?a=ibm-plex-mono-latin-400-normal.woff2&v=08949f728dc52d52") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("?a=ibm-plex-mono-latin-500-normal.woff2&v=01d285447409c8a5") format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("?a=caveat-latin-600-normal.woff2&v=d51e2283010e661d") format('woff2'); }

/* ─── Couleur de section ────────────────────────────────────────────────────────────────────────────────────────── */
[data-s="home"] { --acc: var(--v-home); --acc-t: var(--v-home-t); --acc-c: var(--v-home-c); }
[data-s="pros"] { --acc: var(--v-pros); --acc-t: var(--v-pros-t); --acc-c: var(--v-pros-c); }
[data-s="rdv"] { --acc: var(--v-rdv); --acc-t: var(--v-rdv-t); --acc-c: var(--v-rdv-c); }
[data-s="clients"] { --acc: var(--v-clients); --acc-t: var(--v-clients-t); --acc-c: var(--v-clients-c); }
[data-s="acq"] { --acc: var(--v-acq); --acc-t: var(--v-acq-t); --acc-c: var(--v-acq-c); }
[data-s="biblio"] { --acc: var(--v-biblio); --acc-t: var(--v-biblio-t); --acc-c: var(--v-biblio-c); }
[data-s="reg"] { --acc: var(--v-reg); --acc-t: var(--v-reg-t); --acc-c: var(--v-reg-c); }
body.v4 { --acc: var(--v-act); --acc-t: var(--v-creux); --acc-c: var(--v-hl); }   /* sans section : bordeaux */

/* ─── Base ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
body.v4 { margin: 0; background: var(--v-bg); color: var(--v-ink); font: 400 14px/1.5 var(--p-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.v4 *, .v4 *::before, .v4 *::after { box-sizing: border-box; }
.v4 h1, .v4 h2, .v4 h3, .v4 p, .v4 ul, .v4 ol, .v4 figure { margin: 0; }
.v4 ul, .v4 ol { padding: 0; list-style: none; }
.v4 a { color: inherit; text-decoration-color: var(--v-line-2); text-underline-offset: 3px; }
.v4 button { font: inherit; color: inherit; }
.v4 .v-ic { flex: 0 0 auto; }
.v-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-mono, .v4 .num { font-family: var(--p-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.v-muted { color: var(--v-muted); }
.v-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--v-card); padding: 10px 14px; border-radius: var(--v-r-s); box-shadow: var(--v-shadow-pop); }
.v-skip:focus { left: 8px; }
.v4 [hidden] { display: none !important; }
.v4 input[type=checkbox], .v4 input[type=radio] { accent-color: var(--acc); width: 16px; height: 16px; }
.v4 kbd { font: 500 11px/1.4 var(--p-mono); background: var(--v-card); border: 1px solid var(--v-line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; color: var(--v-muted); white-space: nowrap; }

/* Focus : un double anneau (clair puis foncé) visible sur toutes les surfaces, y compris la barre aubergine */
.v4 :focus { outline: none; }
.v4 :focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--v-card); border-radius: var(--v-r-xs); }
.v-side :focus-visible, .v-tabbar :focus-visible { outline-color: var(--v-hl); box-shadow: none; }
.v4 .v-btn:focus-visible { border-radius: var(--v-r-s); }

@media (prefers-reduced-motion: reduce) { .v4 *, .v4 *::before, .v4 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ─── Coque : barre latérale aubergine + colonne principale ───────────────────────────────────────────────────────── */
.v-app { display: grid; grid-template-columns: var(--v-side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.v-side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--v-side); color: var(--v-side-text); padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.v-logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; text-decoration: none !important; color: var(--v-side-text) !important; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.logo-mark rect { fill: var(--v-card); }
.v-side .logo-mark rect { fill: var(--v-card); }
.v-side .logo-mark path { stroke: var(--v-side); }
.v-nav { display: flex; flex-direction: column; gap: 2px; }
.v-nav-i { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: var(--v-r-s); text-decoration: none !important; color: var(--v-side-text) !important; font-weight: 500; position: relative; }
.v-nav-i:hover { background: var(--v-side-2); }
.v-nav-i.is-on { background: var(--v-side-2); font-weight: 700; }
.v-nav-i .v-ic:last-child:not(:first-child) { margin-left: auto; color: var(--v-side-muted); }
.v-chip { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-t); color: var(--acc); flex: 0 0 auto; }
.v-chip--side { background: transparent; color: var(--acc-c); }
.v-nav-i.is-on .v-chip--side { background: color-mix(in srgb, var(--acc-c) 22%, transparent); }
.v-chip--live .v-dot { background: var(--v-clients-c); }
.v-nav-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-badge { margin-left: auto; font: 600 11px/1.5 var(--p-mono); background: var(--v-hl); color: var(--v-ink); border-radius: var(--v-r-pill); padding: 0 7px; font-style: normal; min-width: 20px; text-align: center; }
.v-nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px 18px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--v-side-muted) 35%, transparent); }
.v-nav-sub { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 5px 10px; border-radius: var(--v-r-s); text-decoration: none !important; color: var(--v-side-muted) !important; font-weight: 500; font-size: 13.5px; }
.v-nav-sub:hover { background: var(--v-side-2); color: var(--v-side-text) !important; }
.v-nav-sub.is-on { color: var(--v-side-text) !important; background: var(--v-side-2); font-weight: 700; }
.v-nav-n { font-size: 11.5px; color: var(--v-side-muted); }
.v-side-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.v-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--v-line-2); flex: 0 0 auto; }
.v-dot--ok { background: var(--v-clients-c); } .v-dot--warn { background: var(--v-biblio-c); } .v-dot--bad { background: var(--v-home-c); }
.v-me { border-top: 1px solid color-mix(in srgb, var(--v-side-muted) 30%, transparent); margin-top: 8px; position: relative; }
.v-me summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 8px; cursor: pointer; border-radius: var(--v-r-s); min-height: var(--v-tap); }
.v-me summary::-webkit-details-marker { display: none; }
.v-me summary:hover { background: var(--v-side-2); }
.v-me-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.v-me-t b { font-size: 13px; }
.v-me-s { font-size: 12px; color: var(--v-side-muted); display: flex; align-items: center; gap: 5px; }
.v-me-s .v-dot { width: 7px; height: 7px; }
.v-me-menu { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--v-card); color: var(--v-ink); border-radius: var(--v-r); padding: 6px; display: flex; flex-direction: column; box-shadow: var(--v-shadow-pop); z-index: 60; }
.v-me-menu a, .v-me-menu button { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: var(--v-r-xs); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; color: var(--v-ink); }
.v-me-menu a:hover, .v-me-menu button:hover { background: var(--v-bg); }
.v-me-menu form { margin: 0; }
.v-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; background: var(--acc-t); color: var(--acc); }
.v-avatar--lg { width: 44px; height: 44px; font-size: 17px; }
.v-avatar--me { background: var(--v-hl); color: var(--v-ink); }
.v-avatar--home { --acc: var(--v-home); --acc-t: var(--v-home-t); } .v-avatar--pros { --acc: var(--v-pros); --acc-t: var(--v-pros-t); }
.v-avatar--rdv { --acc: var(--v-rdv); --acc-t: var(--v-rdv-t); } .v-avatar--clients { --acc: var(--v-clients); --acc-t: var(--v-clients-t); }
.v-avatar--acq { --acc: var(--v-acq); --acc-t: var(--v-acq-t); } .v-avatar--biblio { --acc: var(--v-biblio); --acc-t: var(--v-biblio-t); }

.v-main { min-width: 0; display: flex; flex-direction: column; }
.v-top { position: sticky; top: 0; z-index: 30; height: var(--v-top-h); display: flex; align-items: center; gap: 16px; padding: 0 32px; background: color-mix(in srgb, var(--v-bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--v-line); }
.v-top-logo { display: none; }
.v-top-t { min-width: 0; flex: 0 1 auto; }
.v-top-title { display: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.v-crumb ol { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; white-space: nowrap; }
.v-crumb li { display: inline-flex; align-items: center; color: var(--v-muted); font-size: 13.5px; }
.v-crumb li + li::before { content: "/"; margin: 0 8px; color: var(--v-line-2); }
.v-crumb li[aria-current] { color: var(--v-ink); font-weight: 600; }
.v-crumb a { text-decoration: none; } .v-crumb a:hover { text-decoration: underline; }
.v-crumb-lead { color: var(--v-ink) !important; font-weight: 600; }
.v-search { flex: 1 1 320px; max-width: 480px; margin: 0 auto; }
.v-search-open { width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: var(--v-r-s); color: var(--v-muted); cursor: pointer; text-align: left; }
.v-search-open span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-search-open:hover { border-color: var(--v-line-2); }
.v-top-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.v-top-search { display: none; align-items: center; justify-content: center; width: var(--v-tap); height: var(--v-tap); border-radius: var(--v-r-s); text-decoration: none !important; }
.v-fresh { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--v-muted); white-space: nowrap; }
.v-fresh .v-dot--ok { background: var(--v-clients); } .v-fresh .v-dot--warn { background: var(--v-biblio); } .v-fresh .v-dot--bad { background: var(--v-alert); }
.v-fresh.is-stale { color: var(--v-todo); }
.v-top .period { display: flex; align-items: center; gap: 8px; }
.v-top .period-sel { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: var(--v-r-s); }
.v-top .period select { border: 0; background: none; font: 600 13px var(--p-sans); cursor: pointer; }
.v-top .period-cmp { display: none; }
.v-content { padding: 24px 32px 72px; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 1480px; width: 100%; }
.v-content > .alert, .v-content .alert { border-radius: var(--v-r-s); }

/* ─── En-tête de page ──────────────────────────────────────────────────────────────────────────────────────────── */
.v-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v-page-h h1 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
.v-hello { font: 600 30px/1.05 var(--v-caveat); color: var(--v-act); }
.v-lead { color: var(--v-muted); margin-top: 4px; font-size: 14px; max-width: 70ch; }
.v-page-a { display: flex; gap: 8px; flex-wrap: wrap; }
.v-kicker { font: 500 12px/1.4 var(--p-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--v-muted); }
.v-hand { font: 600 24px/1.1 var(--v-caveat); color: var(--v-act); }

/* ─── Boutons ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--v-r-s); border: 1px solid var(--v-line-2); background: var(--v-card); color: var(--v-ink) !important; font: 600 13.5px/1 var(--p-sans); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.v-btn:hover { background: var(--v-bg); border-color: var(--v-muted); }
.v-btn--primary { background: var(--v-act); border-color: var(--v-act); color: var(--v-card) !important; }
.v-btn--primary:hover { background: var(--v-act-2); border-color: var(--v-act-2); }
.v-btn--section { background: var(--acc); border-color: var(--acc); color: var(--v-card) !important; }
.v-btn--section:hover { background: var(--acc); filter: brightness(.9); }
.v-btn--ghost { background: transparent; border-color: transparent; }
.v-btn--ghost:hover { background: color-mix(in srgb, var(--v-ink) 6%, transparent); border-color: transparent; }
.v-btn--sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.v-btn--icon { width: 36px; padding: 0; }
.v-btn--sm.v-btn--icon { width: 30px; }
.v-btn[disabled], .v-btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.v-btn.is-done { background: var(--v-signed-t); border-color: var(--v-signed); color: var(--v-signed) !important; }
.v-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.v-btn.is-busy::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--v-line-2); border-top-color: var(--v-ink); border-radius: 50%; animation: v-spin .7s linear infinite; }
.v-btn--primary.is-busy::after { border-color: color-mix(in srgb, var(--v-card) 40%, transparent); border-top-color: var(--v-card); }
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ─── Pastilles d'état (point + mot), chaleur, comptes ───────────────────────────────────────────────────────────── */
.v-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--v-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--p-bg); color: var(--v-ink); }
.v-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.v-pill--todo { background: var(--v-todo-t); color: var(--v-todo); } .v-pill--sent { background: var(--v-sent-t); color: var(--v-sent); }
.v-pill--relance { background: var(--v-relance-t); color: var(--v-relance); } .v-pill--signed { background: var(--v-signed-t); color: var(--v-signed); }
.v-pill--lost { background: var(--v-lost-t); color: var(--v-lost); } .v-pill--alert { background: var(--v-alert-t); color: var(--v-alert); }
.v-pill--proposition, .v-pill--acq { background: var(--v-acq-t); color: var(--v-acq); } .v-pill--rdv { background: var(--v-rdv-t); color: var(--v-rdv); }
.v-pill--pros { background: var(--v-pros-t); color: var(--v-pros); } .v-pill--clients { background: var(--v-clients-t); color: var(--v-clients); } .v-pill--home { background: var(--v-home-t); color: var(--v-home); }
.v-pill-n { font-weight: 500; opacity: .85; }
.v-count { font: 500 11.5px/1.4 var(--p-mono); color: var(--v-muted); background: var(--v-bg); border-radius: var(--v-r-pill); padding: 0 7px; font-style: normal; }
.v-heat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.v-heat-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.v-heat-bars i { width: 3px; border-radius: 1px; background: var(--v-line-2); display: block; }
.v-heat-bars i:nth-child(1) { height: 5px; } .v-heat-bars i:nth-child(2) { height: 8px; } .v-heat-bars i:nth-child(3) { height: 11px; }
.v-heat--chaud { color: var(--v-chaud); } .v-heat--chaud i { background: var(--v-chaud); }
.v-heat--tiede { color: var(--v-tiede); } .v-heat--tiede i:nth-child(-n+2) { background: var(--v-tiede); }
.v-heat--froid { color: var(--v-froid); } .v-heat--froid i:nth-child(1) { background: var(--v-froid); }

/* ─── Cartes, chiffres ───────────────────────────────────────────────────────────────────────────────────────── */
.v-card { background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line); min-width: 0; }
.v-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 52px; }
.v-card-h h2 { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.v-card-h a { font-size: 13px; font-weight: 600; color: var(--acc); text-decoration: none; }
.v-card-h a:hover { text-decoration: underline; }
.v-card-b { padding: 0 18px 18px; }
.v-card-h + .v-card-b--flush, .v-card-b--flush { padding: 0; border-top: 1px solid var(--v-line); border-radius: 0 0 var(--v-r) var(--v-r); overflow: clip; }
.v-card:not(:has(.v-card-h)) > .v-card-b { padding-top: 18px; }
.v-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.v-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line); text-decoration: none !important; color: inherit !important; min-width: 0; }
a.v-kpi:hover { box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line-2); }
.v-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.v-kpi-v { font-size: 28px; font-weight: 500; line-height: 1; }
.v-kpi-l { font-weight: 700; font-size: 14px; }
.v-kpi-p { font-size: 12.5px; color: var(--v-muted); }
.v-delta { font: 500 12px var(--p-mono); font-variant-numeric: tabular-nums; }
.v-delta.up { color: var(--v-signed); } .v-delta.down { color: var(--v-alert); } .v-delta.muted { color: var(--v-muted); }
.v-spark { display: block; overflow: visible; }
.v-spark path { fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.v-spark .area { fill: var(--acc-t); stroke: none; }
.v-spark circle { fill: var(--acc); }

/* ─── Onglets, fil de filtres, vues enregistrées ───────────────────────────────────────────────────────────────── */
.v-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--v-line); overflow-x: auto; scrollbar-width: none; }
.v-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--v-muted); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.v-tab:hover { color: var(--v-ink); }
.v-tab.is-on, .v-tab[aria-selected=true] { color: var(--v-ink); border-bottom-color: var(--acc); }
.v-tab.is-on .v-count, .v-tab[aria-selected=true] .v-count { background: var(--acc-t); color: var(--acc); }
.v-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-fpill { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: var(--v-r-pill); background: var(--v-card); border: 1px solid var(--v-line); color: var(--v-ink); font-weight: 600; font-size: 13.5px; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.v-fpill:hover { border-color: var(--v-line-2); }
.v-fpill.is-on { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-card); }
.v-fpill.is-on .v-count { background: color-mix(in srgb, var(--v-card) 18%, transparent); color: var(--v-card); }
.v-fpill--add { border-style: dashed; color: var(--v-muted); font-weight: 500; }
.v-fpill--view { padding-right: 6px; }
.v-fpill-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .7; }
.v-fpill-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.v-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Tableau dense : colonnes configurables, en-tête collant, 3 densités ──────────────────────────────────────────── */
.v-table-wrap { background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line); overflow: auto; max-height: calc(100vh - var(--v-top-h) - 150px); max-height: calc(100dvh - var(--v-top-h) - 150px); position: relative; }
.v-card > .v-card-b--flush .v-table-wrap, .v-card-b--flush > .v-table-wrap { box-shadow: none; border-radius: 0; }
.v-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-weight: 500; }
.v-table thead th { position: sticky; top: 0; z-index: 2; background: var(--v-creux); text-align: left; font-size: 12px; font-weight: 600; color: var(--v-muted); padding: 0 14px; height: 38px; border-bottom: 1px solid var(--v-line); white-space: nowrap; }
.v-table th[data-sort] { cursor: pointer; user-select: none; }
.v-table th[data-sort]:hover { color: var(--v-ink); }
.v-table th[aria-sort=ascending]::after { content: " ↑"; } .v-table th[aria-sort=descending]::after { content: " ↓"; }
.v-table td { padding: 0 14px; height: var(--v-row); border-bottom: 1px solid var(--v-line); vertical-align: middle; }
.v-table[data-density=compact] td { height: var(--v-row-compact); } .v-table[data-density=confort] td { height: var(--v-row-confort); }
.v-table tbody tr:last-child td { border-bottom: 0; }
.v-table .is-num { text-align: right; font-family: var(--p-mono); font-variant-numeric: tabular-nums; }
.v-table th.is-num { font-family: var(--p-sans); }
.v-table [data-off], .v-table .col-off { display: none; }
.v-table tbody tr[data-lead] { cursor: pointer; }
.v-table tbody tr[data-lead]:hover td { background: var(--v-creux); }
.v-table tbody tr.is-selected td, .v-table tbody tr.is-active td { background: var(--acc-t); }
.v-table tbody tr.is-focus td { box-shadow: inset 0 2px 0 var(--acc), inset 0 -2px 0 var(--acc); }
.v-table tbody tr:focus-visible { outline-offset: -2px; }
.v-th-sel, .v-td-sel { width: 40px; padding-right: 0 !important; }
.v-table td .v-sub { display: block; font-size: 12px; color: var(--v-muted); font-weight: 400; }
.v-leadlink { text-decoration: none !important; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.v-leadlink:hover b { text-decoration: underline; }
.v-pop { position: absolute; z-index: 70; background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow-pop); padding: 8px; min-width: 220px; max-width: 320px; }
.v-pop h4 { margin: 4px 8px 6px; font-size: 12px; color: var(--v-muted); font-weight: 600; }
.v-pop label { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--v-r-xs); cursor: pointer; font-weight: 500; }
.v-pop label:hover { background: var(--v-bg); }
.v-pop input[type=text] { width: 100%; height: 38px; border: 1px solid var(--v-line-2); border-radius: var(--v-r-s); padding: 0 10px; font: inherit; }
.v-pop .v-pop-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.v-selbar { position: fixed; z-index: 40; left: calc(var(--v-side-w) + 32px); right: 32px; bottom: 20px; margin: 0 auto; max-width: 760px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--v-ink); color: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow-pop); }
.v-selbar-n { font-size: 13.5px; } .v-selbar-a { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.v-selbar .v-btn { background: transparent; color: var(--v-card) !important; border-color: color-mix(in srgb, var(--v-card) 35%, transparent); }
.v-selbar .v-btn:hover { background: color-mix(in srgb, var(--v-card) 12%, transparent); }
.v-selbar .v-btn--primary { background: var(--v-hl); border-color: var(--v-hl); color: var(--v-ink) !important; }
.v-selbar [data-selbar-clear] { border-color: transparent; }

/* ─── États : vide, erreur, hors ligne, périmé, chargement ─────────────────────────────────────────────────────── */
.v-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 24px; background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line); }
.v-table-wrap .v-state, .v-card-b .v-state, .v-pal .v-state, .v-pop .v-state { box-shadow: none; }
.v-state-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-t); color: var(--acc); margin-bottom: 8px; }
.v-state--empty .v-state-ic { background: var(--acc-t); color: var(--acc); }
.v-state--done .v-state-ic { background: var(--v-signed-t); color: var(--v-signed); }
.v-state--error .v-state-ic { background: var(--v-alert-t); color: var(--v-alert); }
.v-state--offline .v-state-ic, .v-state--stale .v-state-ic { background: var(--v-todo-t); color: var(--v-todo); }
.v-state--forbidden .v-state-ic { background: var(--v-reg-t); color: var(--v-reg); }
.v-state h3 { font-size: 15px; font-weight: 700; }
.v-state p { color: var(--v-muted); max-width: 46ch; }
.v-state-a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.v-stale { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--v-todo-t); color: var(--v-todo); border-radius: var(--v-r-s); font-size: 13px; font-weight: 500; }
.v-stale .v-btn { margin-left: auto; }
.v-offline-bar { position: sticky; top: var(--v-top-h); z-index: 29; padding: 8px 32px; background: var(--v-todo-t); color: var(--v-todo); font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.v-skel { display: block; border-radius: 6px; height: 11px; background: linear-gradient(90deg, var(--v-lost-t) 25%, var(--v-bg) 50%, var(--v-lost-t) 75%); background-size: 300% 100%; animation: v-shimmer 1.3s linear infinite; }
@keyframes v-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.v-skel-wrap { background: var(--v-card); border-radius: var(--v-r); box-shadow: var(--v-shadow), 0 0 0 1px var(--v-line); overflow: hidden; }
.v-skel-row { display: flex; align-items: center; gap: 12px; height: var(--v-row); padding: 0 16px; border-bottom: 1px solid var(--v-line); } .v-skel-row:last-child { border-bottom: 0; }
.v-skel-row > span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.v-skel--dot { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; } .v-skel--pill { width: 64px; height: 22px; border-radius: 999px; }
.v-skel--w30 { width: 30%; } .v-skel--w40 { width: 40%; } .v-skel--w55 { width: 55%; } .v-skel--w70 { width: 70%; } .v-skel--line { margin: 12px 16px; }
.v-skel-card, .v-skel-kpi { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-bottom: 1px solid var(--v-line); }
.v-skel-kpi { gap: 14px; }

/* ─── Toasts, info-bulles ──────────────────────────────────────────────────────────────────────────────────────── */
.v-toasts { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.v-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--v-ink); color: var(--v-card); border-radius: var(--v-r-s); box-shadow: var(--v-shadow-pop); font-weight: 500; animation: v-up .18s ease-out; }
.v-toast--err { background: var(--v-alert); }
.v-toast .v-ic { flex: 0 0 auto; }
.v-toast-t { flex: 1; min-width: 0; }
.v-toast-a { background: none; border: 0; padding: 4px 6px; color: var(--v-hl); font-weight: 700; cursor: pointer; border-radius: 4px; min-height: 32px; }
.v-toast--err .v-toast-a { color: var(--v-card); text-decoration: underline; }
@keyframes v-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v-tip { position: fixed; z-index: 130; pointer-events: none; background: var(--v-ink); color: var(--v-card); font-size: 12.5px; font-weight: 500; line-height: 1.3; padding: 6px 9px; border-radius: 6px; max-width: 260px; display: flex; gap: 8px; align-items: center; }
.v-tip kbd { background: transparent; color: var(--v-card); border-color: color-mix(in srgb, var(--v-card) 40%, transparent); }

/* ─── Palette de commandes ⌘K ──────────────────────────────────────────────────────────────────────────────────── */
.v-scrim { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--v-side) 38%, transparent); animation: v-fade .15s ease-out; }
@keyframes v-fade { from { opacity: 0; } }
.v-pal { position: fixed; z-index: 90; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--v-card); border-radius: 14px; box-shadow: var(--v-shadow-pop); overflow: hidden; }
.v-pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--v-line); color: var(--v-muted); }
.v-pal-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 500 16px var(--p-sans); color: var(--v-ink); outline: none !important; box-shadow: none !important; }
.v-pal-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.v-pal-g { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--v-muted); letter-spacing: .04em; text-transform: uppercase; }
.v-pal-i { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--v-r-s); cursor: pointer; text-decoration: none; }
.v-pal-i[aria-selected=true] { background: var(--v-bg); box-shadow: inset 3px 0 0 var(--acc); }
.v-pal-i .v-pal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v-pal-i b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-pal-i small { color: var(--v-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-pal-k { display: inline-flex; gap: 4px; }
.v-pal-foot { display: flex; gap: 14px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--v-line); background: var(--v-creux); font-size: 12.5px; color: var(--v-muted); flex-wrap: wrap; }
.v-pal-empty { padding: 28px 16px; text-align: center; color: var(--v-muted); }

/* ─── Tiroir lead (520 px) ─────────────────────────────────────────────────────────────────────────────────────── */
.v-drawer { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(var(--v-drawer-w), 100vw); display: flex; flex-direction: column; background: var(--v-card); box-shadow: var(--v-shadow-pop); animation: v-slide .2s ease-out; }
@keyframes v-slide { from { transform: translateX(24px); opacity: 0; } }
body.has-drawer .v-scrim--drawer { background: color-mix(in srgb, var(--v-side) 22%, transparent); }
.v-dr-h { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--v-line); }
.v-dr-id { display: flex; align-items: flex-start; gap: 12px; }
.v-dr-id .v-dr-t { flex: 1; min-width: 0; }
.v-dr-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.v-dr-sub { color: var(--v-muted); font-size: 13px; margin-top: 2px; }
.v-dr-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.v-dr-acts { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 2px; }
.v-dr-tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; }
.v-dr-tabs .v-tab { min-height: 40px; font-size: 13px; gap: 5px; }
.v-dr-tabs .v-count { padding: 0 5px; }
.v-dr-b { flex: 1; overflow-y: auto; padding: 18px 20px 24px; background: var(--v-card); overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.v-dr-f { display: flex; align-items: center; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v-line); background: var(--v-creux); }
.v-dr-f .v-dr-next { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--v-muted); }
.v-dr-f .v-dr-next b { font-size: 14px; color: var(--v-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-angle { background: var(--v-hl); background: color-mix(in srgb, var(--v-hl) 30%, var(--v-card)); border: 1px solid color-mix(in srgb, var(--v-hl) 70%, var(--v-card)); border-radius: var(--v-r-s); padding: 12px 14px; }
.v-angle .v-hand { float: right; }
.v-angle small { font-weight: 700; font-size: 12px; }
.v-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-stat { background: var(--v-bg); border-radius: var(--v-r-s); padding: 10px 12px; min-width: 0; }
.v-stat small { display: block; color: var(--v-muted); font-size: 12px; }
.v-stat b { display: block; font: 500 20px/1.3 var(--p-mono); font-variant-numeric: tabular-nums; }
.v-stat span { color: var(--v-muted); font-size: 12px; }
.v-dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 0 14px; }
.v-dl dt { color: var(--v-muted); padding: 7px 0; } .v-dl dd { margin: 0; padding: 7px 0; font-weight: 600; overflow-wrap: anywhere; }
.v-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--v-line); border-radius: var(--v-r-s); padding: 0 6px 0 12px; min-height: 40px; font: 500 13px var(--p-mono); min-width: 0; }
.v-field span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v-h3 { font-size: 12.5px; font-weight: 700; color: var(--v-muted); }
.v-tl { display: flex; flex-direction: column; }
.v-tl-i { display: flex; gap: 12px; padding: 9px 0; align-items: flex-start; }
.v-tl-i .v-chip { width: 26px; height: 26px; border-radius: 50%; background: var(--v-bg); color: var(--v-muted); }
.v-tl-t { flex: 1; min-width: 0; } .v-tl-d { font: 400 12px var(--p-mono); color: var(--v-muted); white-space: nowrap; }
.v-bubbles { display: flex; flex-direction: column; gap: 8px; }
.v-bub { max-width: 82%; padding: 9px 12px; border-radius: 14px; background: var(--v-bg); align-self: flex-start; overflow-wrap: anywhere; }
.v-bub--out { align-self: flex-end; background: var(--v-home-t); }
.v-bub small { display: block; font: 400 11px var(--p-mono); color: var(--v-muted); margin-top: 4px; }
.v-mailcard { border: 1px solid var(--v-line); border-radius: var(--v-r-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.v-composer { border: 1px solid var(--v-line-2); border-radius: var(--v-r-s); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.v-composer textarea { border: 0; resize: vertical; min-height: 64px; font: inherit; width: 100%; background: transparent; }
.v-composer textarea:focus-visible { outline: none; box-shadow: none; }

/* ─── Barre d'onglets du téléphone ─────────────────────────────────────────────────────────────────────────────── */
.v-tabbar { display: none; }
.v-tabbar-i, .v-tab-rafale { text-decoration: none !important; color: var(--v-side-muted) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; min-height: var(--v-tap); position: relative; }
.v-tabbar-i.is-on { color: var(--v-card) !important; }
.v-tabbar-i.is-on .v-ic { color: var(--acc-c); }
.v-tabbar-i .v-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; font-size: 10.5px; padding: 0 5px; min-width: 16px; }
.v-tab-rafale-b { width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; background: var(--v-hl); color: var(--v-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--v-side), var(--v-shadow-pop); }
.v-tab-rafale span:last-child { color: var(--v-side-text); }

/* ─── Tablette : barre latérale réduite aux icônes (768 à 1099 px) ───────────────────────────────────────────────── */
@media (max-width: 1099px) and (min-width: 768px) {
  .v-app { grid-template-columns: 68px minmax(0, 1fr); }
  .v-side { padding: 14px 8px; align-items: center; }
  .v-logo { padding: 2px 0 14px; } .v-logo span, .v-nav-t, .v-nav-subs, .v-me-t, .v-nav-i .v-ic:last-child:not(:first-child) { display: none; }
  .v-nav, .v-side-foot { align-items: center; width: 100%; }
  .v-nav-i { width: 48px; justify-content: center; padding: 6px; }
  .v-nav-i .v-badge { position: absolute; top: 0; right: 0; margin: 0; font-size: 10px; padding: 0 5px; min-width: 16px; }
  .v-me summary { justify-content: center; padding: 8px 0; }
  .v-me-menu { left: 0; right: auto; min-width: 220px; }
  .v-top { padding: 0 20px; } .v-content { padding: 20px 20px 72px; }
  .v-search { max-width: 360px; } .v-fresh [data-fresh-t] { display: none; }
  .v-selbar { left: 88px; right: 20px; }
}

/* ─── Téléphone (< 768 px) : autre composition, barre d'onglets en bas ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .v-app { display: block; }
  .v-side, .v-search, .v-crumb, .v-fresh [data-fresh-t] { display: none; }
  .v-top { padding: 0 16px; gap: 8px; }
  .v-top-title { display: block; } .v-top-search { display: inline-flex; }
  .v-top-t { flex: 1; }
  .v-top .period-sel { height: 40px; }
  .v-content { padding: 16px 16px calc(var(--v-tab-h) + 28px + env(safe-area-inset-bottom)); gap: 16px; }
  .v-page-h h1 { font-size: 22px; }
  .v-page-h { align-items: stretch; flex-direction: column; } .v-page-a { width: 100%; } .v-page-a .v-btn { flex: 1; }
  .v-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .v-kpi { padding: 12px; } .v-kpi-v { font-size: 26px; }
  .v-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-height: var(--v-tab-h); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--v-side); }
  .v-tab-rafale { align-self: end; }
  .v-selbar { left: 12px; right: 12px; bottom: calc(var(--v-tab-h) + 12px + env(safe-area-inset-bottom)); flex-wrap: wrap; padding: 10px 12px; }
  .v-toasts { bottom: calc(var(--v-tab-h) + 16px + env(safe-area-inset-bottom)); }
  .v-drawer { width: 100vw; }
  .v-pal { top: 0; left: 0; transform: none; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .v-table-wrap { max-height: none; }
  .v-offline-bar { padding: 8px 16px; }
}

/* Écran tactile : toutes les cibles à 44 px au moins */
@media (pointer: coarse) {
  .v-btn { min-height: var(--v-tap); } .v-btn--icon { width: var(--v-tap); } .v-btn--sm { min-height: var(--v-tap); }
  .v-fpill { min-height: var(--v-tap); } .v-tab { min-height: var(--v-tap); } .v-nav-i { min-height: var(--v-tap); } .v-nav-sub { min-height: var(--v-tap); }
  .v-fpill-x { width: 36px; height: 36px; } .v-table td { height: max(var(--v-row), var(--v-tap)); }
  .v4 input[type=checkbox] { width: 22px; height: 22px; } .v-th-sel, .v-td-sel { width: 52px; }
}

/* Champs courants */
.v-select { height: 34px; border: 1px solid var(--v-line-2); border-radius: var(--v-r-s); background: var(--v-card); padding: 0 8px; font: 500 13px var(--p-sans); color: var(--v-ink); }
.v-toolbar--table { justify-content: flex-end; margin-bottom: 8px; }

.v-bell { position: relative; width: 38px; height: 38px; border: 0; border-radius: var(--v-r-s); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--v-ink); }
.v-bell:hover { background: color-mix(in srgb, var(--v-ink) 7%, transparent); }
.v-bell-n { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--v-r-pill); background: var(--v-hl); color: var(--v-ink); font: 600 10.5px/17px var(--p-mono); text-align: center; }
.v-pop .v-pal-i { text-decoration: none; color: inherit; }

/* Messages de la coque (ptd_flash : ok, warn, bad) : les pages V4 n'ont pas app.css */
.v-content > .alert { padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; background: var(--v-line); color: var(--v-ink); }
.v-content > .alert.ok { background: var(--v-signed-t); color: var(--v-signed); }
.v-content > .alert.warn { background: var(--v-todo-t); color: var(--v-todo); }
.v-content > .alert.bad { background: var(--v-alert-t); color: var(--v-alert); }

/* Champ de saisie simple et ligne secondaire (ajouts des pages Clients, Bibliothèque, Acquisition, Réglages) */
.v-input { border: 1px solid var(--v-line-2); border-radius: var(--v-r-s); background: var(--v-card); color: var(--v-ink); padding: 0 12px; font: inherit; min-height: 44px; }
.v-input:focus-visible { outline: 2px solid var(--v-act); outline-offset: 1px; }
.v-sub { display: block; color: var(--v-muted); font-size: 12px; font-weight: 400; }