/* ===========================================================================
   Le socle d'ecran : jetons, composants, mise en page.

   Porte depuis le design system d'un projet anterieur du meme auteur
   (gabarits Jinja + CSS, sans dependance a son back-office). Ce qui a
   change :

     - accent VIOLET au lieu du vert ;
     - densite AEREE : les espacements sont relaches d'environ un quart ;
     - polices HEBERGEES : plus rien ne part chez un tiers a l'affichage
       d'une page. Sur un produit dont l'argument est la souverainete, faire
       partir l'adresse IP de chaque utilisateur chez un fournisseur de
       polices a chaque page etait une contradiction -- et l'application ne
       s'affichait pas hors ligne ;
     - Font Awesome retire : la planche d'icones SVG est locale et suffit.

   Les classes non utilisees par nos ecrans sont CONSERVEES telles quelles.
   Elaguer au jugé casserait des cascades qu'on ne verrait qu'a l'usage, et
   quarante-huit kilo-octets mis en cache une fois coutent moins qu'un ecran
   casse un vendredi soir.
   =========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/polices/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/polices/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ====================================================================
   SAVIRO — Feuille de style commune (sidebar+main, pattern 02_import)
   ==================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #243447; --primary-700: #1a2733; --primary-500: #3a4d63;
  --accent: #7c3aed; --accent-700: #6425d0; --accent-100: #ede9fe;
  --bg-base: #f5f6f8;
  --glass-1: rgba(255,255,255,0.50); --glass-2: rgba(255,255,255,0.68); --glass-3: rgba(255,255,255,0.84);
  --glass-solid: #ffffff;
  --glass-border: rgba(36,52,71,0.06); --glass-border-md: rgba(36,52,71,0.12); --glass-border-hi: rgba(36,52,71,0.20);
  --text-0: #0f1a26; --text-1: #243447; --text-2: #5a6878; --text-3: #8a96a5; --text-4: #b4bdc8;
  --succes: #16a34a; --succes-bg: rgba(22,163,74,0.10); --succes-border: rgba(22,163,74,0.24);
  --warning: #d97706; --warning-bg: rgba(217,119,6,0.10); --warning-border: rgba(217,119,6,0.24);
  --danger: #dc2626; --danger-bg: rgba(220,38,38,0.08); --danger-border: rgba(220,38,38,0.22);
  --info: #2563eb; --info-bg: rgba(37,99,235,0.08); --info-border: rgba(37,99,235,0.22);
  --mistral: #7c3aed; --mistral-bg: rgba(124,58,237,0.08);
  --shadow-sm: 0 1px 2px rgba(36,52,71,.04), 0 1px 3px rgba(36,52,71,.05);
  --shadow-md: 0 4px 12px rgba(36,52,71,.05), 0 2px 4px rgba(36,52,71,.03);
  --shadow-lg: 0 12px 32px rgba(36,52,71,.08), 0 4px 8px rgba(36,52,71,.05);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', monospace;
  --sidebar-w: 260px;
  /* Densite AEREE : les composants lisent ces trois valeurs. */
  --pas: 1.25rem; --pas-sm: 0.8rem; --pas-lg: 2rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s; --dur: 0.28s;
}
html, body { height: 100vh; overflow: hidden; font-family: var(--font-body); font-size: 14px; color: var(--text-1); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; }
::selection { background: var(--accent-100); color: var(--primary); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(36,52,71,.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(36,52,71,.25); }
*::-webkit-scrollbar-track { background: transparent; }
a { color: var(--accent-700); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--primary); }
body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(140px); z-index: 0; pointer-events: none; }
body::before { width: 720px; height: 720px; background: radial-gradient(circle, rgba(124,58,237,0.20) 0%, rgba(124,58,237,0) 70%); top: -240px; right: -180px; animation: drift1 32s ease-in-out infinite; }
body::after { width: 800px; height: 800px; background: radial-gradient(circle, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0) 70%); bottom: -300px; left: -200px; animation: drift2 38s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,30px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,-20px); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }

/* SHELL */
.shell { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; height: 100vh; }

/* SIDEBAR */
.sidebar { background: rgba(255,255,255,0.66); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-right: 1px solid var(--glass-border-md); display: flex; flex-direction: column; overflow: hidden; position: relative; width: var(--sidebar-w); transition: width 0.32s var(--ease-out); }
.sidebar::before { content: ''; position: absolute; top: 30%; left: -100px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, rgba(124,58,237,0) 70%); border-radius: 50%; pointer-events: none; filter: blur(24px); opacity: 0.7; }
.sidebar > * { position: relative; z-index: 1; }
.sidebar.is-collapsed { width: 64px; }
.sidebar.is-collapsed .sidebar-brand-text, .sidebar.is-collapsed .sidebar-link span:not(.badge), .sidebar.is-collapsed .sidebar-link .badge, .sidebar.is-collapsed .sidebar-user-info, .sidebar.is-collapsed .sidebar-section { display: none; }
.sidebar.is-collapsed .sidebar-link { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.is-collapsed .sidebar-link.active::before { left: -10px; }
.sidebar.is-collapsed .sidebar-brand { flex-direction: column; gap: 8px; justify-content: center; padding: 18px 0; }
.sidebar.is-collapsed .sidebar-toggle { margin-left: 0; }
.sidebar.is-collapsed .sidebar-foot { padding: 10px 0; }
.sidebar.is-collapsed .sidebar-user { justify-content: center; padding: 8px 0; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; position: relative; }
.sidebar-brand-mark { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; box-shadow: 0 2px 8px rgba(36,52,71,0.16), inset 0 1px 0 rgba(255,255,255,0.12); flex-shrink: 0; }
.sidebar-brand-text { line-height: 1.15; white-space: nowrap; }
.sidebar-brand-name { font-size: 14.5px; font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
.sidebar-brand-sub { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.13em; font-weight: 600; margin-top: 1px; }
.sidebar-toggle { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 11px; transition: all var(--dur-fast); padding: 0; flex-shrink: 0; }
.sidebar-toggle:hover { background: rgba(36,52,71,0.06); border-color: var(--glass-border-md); color: var(--primary); }
.sidebar-toggle .ico { transition: transform 0.32s var(--ease-out); }
.sidebar.is-collapsed .sidebar-toggle .ico { transform: rotate(180deg); }
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; overflow-x: hidden; }
.sidebar-section { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); font-weight: 600; padding: 14px 10px 6px; white-space: nowrap; }
.sidebar-link { display: flex; align-items: center; gap: 11px; padding: 8px 11px; margin-bottom: 1px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-1); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); position: relative; overflow: hidden; }
.sidebar-link .ico { font-size: 14px; width: 16px; text-align: center; color: var(--text-3); transition: color var(--dur-fast); flex-shrink: 0; }
.sidebar-link span:not(.badge) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: rgba(36,52,71,0.05); color: var(--text-0); }
.sidebar-link:hover .ico { color: var(--primary); }
.sidebar-link.active { background: var(--primary); color: white; font-weight: 500; box-shadow: 0 2px 6px rgba(36,52,71,0.14), inset 0 1px 0 rgba(255,255,255,0.08); }
.sidebar-link.active::before { content: ''; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; transition: left 0.32s var(--ease-out); }
.sidebar-link.active .ico { color: var(--accent); }
.sidebar-link .badge { margin-left: auto; background: var(--accent); color: var(--primary); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); min-width: 18px; text-align: center; letter-spacing: 0.02em; line-height: 1.4; }
.sidebar-foot { padding: 10px; border-top: 1px solid var(--glass-border); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background var(--dur-fast); text-decoration: none; color: var(--text-1); }
.sidebar-user:hover { background: rgba(36,52,71,0.05); color: var(--text-1); }
.sidebar-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-700) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 11.5px; font-weight: 700; position: relative; flex-shrink: 0; box-shadow: 0 2px 6px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.16); }
.sidebar-user-avatar::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--succes); border: 2px solid var(--bg-base); bottom: -1px; right: -1px; }
.sidebar-user-info { flex: 1; min-width: 0; line-height: 1.2; }
.sidebar-user-name { font-size: 12.5px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 10.5px; color: var(--text-3); }

/* MAIN */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.context-bar { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 32px; background: var(--glass-1); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--glass-border); flex-shrink: 0; font-size: 12px; color: var(--text-3); }
.context-crumb { display: inline-flex; align-items: center; gap: 8px; }
.context-crumb a { color: var(--text-2); text-decoration: none; padding: 3px 6px; border-radius: 4px; transition: all var(--dur-fast); }
.context-crumb a:hover { color: var(--primary); background: var(--glass-3); }
.context-crumb-sep { color: var(--text-4); font-size: 9px; }
.context-crumb-current { color: var(--text-0); font-weight: 600; padding: 3px 6px; }
.context-spacer { flex: 1; }
.context-actions { display: flex; align-items: center; gap: 4px; }
.context-icon-btn { width: 30px; height: 30px; border: none; background: transparent; border-radius: 6px; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all var(--dur-fast); position: relative; text-decoration: none; }
.context-icon-btn:hover { background: var(--glass-3); color: var(--primary); }
.context-icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg-base); }
.context-divider { width: 1px; height: 18px; background: var(--glass-border-md); margin: 0 4px; }
.content { flex: 1; overflow-y: auto; padding: 36px 32px 60px; position: relative; }
.content-inner { max-width: 1180px; margin: 0 auto; }

/* Stagger reveal */
.reveal { opacity: 0; transform: translateY(12px); animation: revealUp 0.7s var(--ease-out) forwards; }
.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.15s; }
.reveal:nth-child(3) { animation-delay: 0.25s; }
.reveal:nth-child(4) { animation-delay: 0.35s; }
.reveal:nth-child(5) { animation-delay: 0.45s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* PAGE HEADER */
.page-head { margin-bottom: 32px; }
.page-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-700); font-weight: 600; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
.page-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent-700); }
.page-title { font-size: 36px; font-weight: 600; color: var(--text-0); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 12px; }
.page-title em { font-style: normal; font-weight: 300; color: var(--text-2); }
.page-lead { font-size: 15px; color: var(--text-2); line-height: 1.55; max-width: 640px; }

/* ALERTS */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; margin-bottom: 16px; border: 1px solid; animation: slideIn .25s var(--ease-out); }
@keyframes slideIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }
.alert i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.alert.success { background: var(--succes-bg); border-color: var(--succes-border); color: var(--succes); }
.alert.danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.alert.info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }

/* Mode banner */
.mode-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid; margin-bottom: 24px; font-size: 13px; }
.mode-banner i { font-size: 16px; }
.mode-banner.mock { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.mode-banner.real { background: var(--succes-bg); border-color: var(--succes-border); color: var(--succes); }
.mode-banner strong { font-weight: 600; }
.mode-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

/* CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.card { background: var(--glass-2); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 20px 22px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%); pointer-events: none; }
.card > * { position: relative; z-index: 1; }
.card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card-label i { color: var(--accent-700); font-size: 11px; }
.card-value { font-size: 30px; font-weight: 600; color: var(--text-0); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.card-value .unit { font-size: 14px; color: var(--text-3); font-weight: 500; }
.card-value.is-up { color: var(--accent-700); }
.card-value.is-warn { color: var(--warning); }
.card-value.is-mistral { color: var(--mistral); }
.card-value.is-danger { color: var(--danger); }
.card-foot { margin-top: 10px; font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.02em; }

/* FORMS */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 11.5px; font-weight: 600; color: var(--text-1); letter-spacing: -0.005em; display: flex; align-items: center; gap: 6px; }
.field-label .hint { color: var(--text-3); font-weight: 500; }
.field-hint { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.input { padding: 10px 14px; font-family: var(--font-body); font-size: 13px; color: var(--text-0); background: var(--glass-solid); border: 1px solid var(--glass-border-md); border-radius: var(--radius-sm); transition: all var(--dur-fast); letter-spacing: -0.005em; }
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent-700); box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
.input.lg { min-width: 320px; flex: 1; }
.input.full { width: 100%; }

/* BUTTONS */
.btn { padding: 10px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; letter-spacing: -0.005em; }
.btn i { font-size: 12px; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); box-shadow: var(--shadow-sm), var(--shadow-inset); }
.btn-primary:hover { background: var(--primary-700); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md), var(--shadow-inset); }
.btn-accent { background: var(--accent-700); color: white; border-color: var(--accent-700); box-shadow: 0 2px 6px rgba(124,58,237,0.25), var(--shadow-inset); }
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.35), var(--shadow-inset); }
.btn-ghost { background: var(--glass-solid); color: var(--text-1); border-color: var(--glass-border-hi); }
.btn-ghost:hover { background: var(--glass-3); border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; color: white; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 13px 22px; font-size: 14px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* FILTER BAR */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 18px; background: var(--glass-3); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); margin-bottom: 18px; box-shadow: var(--shadow-sm); }

/* TABLES */
.table-wrap { background: var(--glass-solid); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--glass-border); }
.table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 600; background: var(--glass-1); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover td { background: rgba(36,52,71,0.025); }
.table td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.table td.right { text-align: right; }
.table td .secondary { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-700); cursor: pointer; }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; }
.badge.new     { background: var(--accent-100); color: var(--accent-700); }
.badge.update  { background: var(--mistral-bg); color: var(--mistral); }
.badge.error   { background: var(--danger-bg); color: var(--danger); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.neutral { background: rgba(36,52,71,0.08); color: var(--text-2); }

/* PAGER */
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 12.5px; color: var(--text-2); }
.pager .links { display: flex; gap: 8px; }
.pager .links a { padding: 7px 14px; background: var(--glass-solid); border: 1px solid var(--glass-border-hi); border-radius: var(--radius-sm); color: var(--text-1); font-weight: 500; }
.pager .links a:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* STICKY ACTIONS */
.sticky-actions { position: sticky; bottom: 20px; background: var(--glass-3); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--glass-border-md); border-radius: var(--radius-lg); padding: 14px 22px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-lg); gap: 16px; }
.sticky-actions .selection-count { font-size: 13px; color: var(--text-1); }
.sticky-actions .selection-count strong { color: var(--text-0); font-weight: 700; }
.sticky-actions .actions-group { display: flex; gap: 10px; align-items: center; }

/* SETTINGS BLOCK */
.settings-block { background: var(--glass-2); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); margin-bottom: 24px; padding: 24px 28px; position: relative; overflow: hidden; }
.settings-block::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%); pointer-events: none; }
.settings-block > * { position: relative; z-index: 1; }
.settings-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-border); }
.settings-block-title { font-size: 16px; font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.settings-block-title .ico-bubble { width: 32px; height: 32px; border-radius: 8px; background: var(--glass-solid); border: 1px solid var(--glass-border-md); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-700); font-size: 13px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.settings-grid .field.full { grid-column: 1 / -1; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; border: 1px solid; }
.status-pill.ok { background: var(--succes-bg); color: var(--succes); border-color: var(--succes-border); }
.status-pill.ko { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.status-pill.warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* UTILS */
.muted { color: var(--text-3); }
.mono  { font-family: var(--font-mono); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }

/* ════════════════════════════════════════════════════════════════════════
   PÉRIMÈTRE & AUDIT ENTREPRISE  (composants partagés — socle d'ecran)
   Rapatrié depuis le <style> inline de la page audit : un seul point de vérité,
   réutilisable par toutes les pages de ciblage entreprise.
   ════════════════════════════════════════════════════════════════════════ */

/* Étapes numérotées (1. Territoire · 2. Secteurs · 3. Filtres …) */

/* Sélecteur de départements groupés par région */
#regionsBox { background: rgba(36,52,71,0.02); }
.reg-all { font-size: 10.5px !important; color: var(--accent-700) !important; background: none !important; border: none !important; cursor: pointer; padding: 2px 6px !important; }
.reg-all:hover { text-decoration: underline; }

/* Chips département */

/* Chips secteur NAF (case cachée + label togglable) */
.naf-chip { cursor: pointer; font-weight: 500; text-transform: none; border: 1px solid var(--bord-cible); background: #fff; transition: all .12s; }
.naf-chip:hover { border-color: var(--accent); }
.naf-chip.is-on { background: var(--accent-100); color: var(--accent-700); border-color: var(--accent); }
.naf-chip input { display: none; }

/* Pastilles de filtres d'enrichissement */

/* ── « LE SIGNE » : jauge de volume vivante (composant partagé, socle d'ecran) ── */
.signe { position: sticky; top: 8px; z-index: 5; margin: 0 0 16px; padding: 16px 22px;
  background: var(--glass-solid); border: 1px solid var(--glass-border-hi); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); transition: box-shadow .3s var(--ease-out); }
@media (max-width: 1100px) { .signe { padding: 14px 16px; } }
.signe.is-stuck { box-shadow: var(--shadow-lg); }
.signe-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; }
@media (max-width: 840px) { .signe-inner { grid-template-columns: 1fr; gap: 14px; } }
.signe-left { min-width: 0; }
.signe-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 9px; }
.signe-count { font-size: 24px; font-weight: 600; color: var(--text-0); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.signe-count .lbl { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.signe-arrow { color: var(--text-4); font-size: 13px; }
.signe-crm { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; transition: color .4s var(--ease-out); }
.signe-crm .lbl { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.signe-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid; transition: all .4s var(--ease-out); }
.signe-status .ico { font-size: 12px; }
.gauge { position: relative; height: 10px; border-radius: var(--radius-pill); overflow: hidden;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, #a3d977 22%, #d9c54a 45%, var(--warning) 45%, var(--warning) 72%, var(--danger) 72%, var(--mistral) 100%); opacity: .22; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, #a3d977 22%, #d9c54a 45%, var(--warning) 45%, var(--warning) 72%, var(--danger) 72%, var(--mistral) 100%);
  background-size: 460px 100%; transition: width .55s var(--ease-out); width: 0%; }
.gauge-wrap { position: relative; margin-top: 4px; }
.gauge-ticks { display: flex; justify-content: space-between; margin-top: 7px; }
.gauge-tick { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-4); letter-spacing: .04em; text-transform: uppercase; position: relative; }
.gauge-tick::before { content: ''; position: absolute; top: -9px; left: 0; width: 1px; height: 5px; background: var(--glass-border-hi); }
.gauge-tick.is-on { color: var(--text-2); font-weight: 500; }
.gauge-marker { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--text-0); border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(245,246,248,.9); transition: left .55s var(--ease-out); transform: translateX(-50%); }
.signe-right { display: flex; align-items: center; gap: 18px; }
.signe-est { text-align: right; }
.signe-est-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.signe-est-value { font-size: 15px; font-weight: 600; color: var(--text-1); margin-top: 3px; font-variant-numeric: tabular-nums; }
.signe-est-value.is-warn { color: var(--warning); }
.signe-est-value.is-danger { color: var(--mistral); }
@media (max-width: 640px) { .signe-right { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   CARTE DE FRANCE CLIQUABLE  (composant partagé — repris de la page import)
   Partial : templates/_carte_france.html. Une seule source de vérité ; toute
   page peut afficher la carte (régions métropole + cartes DROM) et câbler le
   clic. Aucun CSS isolé dans les templates.
   ════════════════════════════════════════════════════════════════════════ */
.map-card {
  background: var(--glass-2);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 12px;
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex; flex-direction: column;
}
.map-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%);
  pointer-events: none;
}
.map-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; position: relative; z-index: 1; gap: 14px;
}
.map-head-text { line-height: 1.2; min-width: 0; }
.map-title { font-size: 16px; font-weight: 600; color: var(--text-0); letter-spacing: -0.015em; }
.map-title em { font-style: normal; font-weight: 300; color: var(--text-2); }
.map-reset-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  background: var(--glass-solid); border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-sm); font-family: var(--font-body);
  font-size: 12px; font-weight: 500; color: var(--text-1); cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.map-reset-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Scène : deux vues empilées (France ↔ région zoomée) */
.map-stage { flex: 1; position: relative; z-index: 1; min-height: 380px; }
.map-view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.map-view[data-active="false"] { opacity: 0; transform: scale(.94); pointer-events: none; }
.map-view[data-active="true"]  { opacity: 1; transform: scale(1); }

/* SVG cartes */
.svg-france, .svg-region { width: 100%; max-width: 470px; height: auto; }

/* Vue région : départements cliquables (polygones) */
.dept {
  cursor: pointer;
  fill: rgba(36, 52, 71, 0.06);
  stroke: rgba(36, 52, 71, 0.24);
  stroke-width: 1; stroke-linejoin: round;
  transition: all .22s var(--ease-out);
}
.dept:hover { fill: rgba(124,58,237, 0.18); stroke: var(--accent-700); stroke-width: 1.5; }
.dept.is-selected {
  fill: rgba(124,58,237, 0.42); stroke: var(--accent-700); stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(124,58,237,.5));
}
.dept-num  { font-family: var(--font-mono); font-size: 10px; font-weight: 600; fill: var(--text-2); text-anchor: middle; pointer-events: none; letter-spacing: .04em; }
.dept-name { font-family: var(--font-body); font-size: 9px; font-weight: 500; fill: var(--text-3); text-anchor: middle; pointer-events: none; }

/* Régions cliquables */
.region {
  cursor: pointer;
  fill: rgba(36, 52, 71, 0.05);
  stroke: rgba(36, 52, 71, 0.22);
  stroke-width: 1.2; stroke-linejoin: round;
  transition: fill .25s var(--ease-out), stroke .25s var(--ease-out), filter .25s;
}
.region:hover { fill: rgba(124,58,237, 0.18); stroke: var(--accent-700); stroke-width: 1.5; }
.region.is-selected {
  fill: rgba(124,58,237, 0.35); stroke: var(--accent-700); stroke-width: 2;
  filter: drop-shadow(0 0 12px rgba(124,58,237,.55));
}

/* Cartes DROM (encart) */
.drom-card {
  cursor: pointer; fill: rgba(36, 52, 71, 0.05);
  stroke: rgba(36, 52, 71, 0.18); stroke-width: 1;
  transition: all .25s var(--ease-out);
}
.drom-card:hover { fill: rgba(124,58,237, 0.15); stroke: var(--accent-700); }
.drom-card.is-selected { fill: rgba(124,58,237, 0.35); stroke: var(--accent-700); stroke-width: 1.6; }
.drom-label { font-family: var(--font-body); font-size: 8.5px; font-weight: 600; fill: var(--text-2); text-anchor: middle; pointer-events: none; letter-spacing: .01em; }
.drom-meta  { font-family: var(--font-mono); font-size: 7px; fill: var(--text-3); text-anchor: middle; pointer-events: none; }

/* Labels régions */
.region-label { font-family: var(--font-body); font-size: 9px; font-weight: 600; fill: var(--text-2); text-anchor: middle; pointer-events: none; letter-spacing: .02em; }
.region-label.is-selected { fill: var(--accent-700); font-weight: 700; }

/* Tooltip carte */
.region-tip {
  position: absolute; pointer-events: none; background: var(--primary); color: #fff;
  padding: 6px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
  white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0;
  transform: translate(-50%, -100%) translateY(-8px);
  transition: opacity var(--dur-fast); z-index: 5;
}
.region-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--primary); }
.region-tip.visible { opacity: 1; }
.drom-container { position: relative; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════
   OBJECTIF COMMERCIAL & VILLES  (étape 4 de l'audit — composant partagé)
   Grille d'objectifs (tri), double curseur (fourchette), liste de villes
   sélectionnables — toutes les villes, aucun plafond.
   ════════════════════════════════════════════════════════════════════════ */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; margin: 10px 0 14px; }
.obj { text-align: left; padding: 12px 13px; border: 1px solid var(--glass-border-md); background: var(--glass-solid); border-radius: var(--radius); cursor: pointer; transition: all .18s var(--ease-out); }
.obj:hover { border-color: var(--glass-border-hi); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.obj.is-on { border-color: var(--accent-700); background: var(--accent-100); }
.obj-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(36,52,71,.06); display: grid; place-items: center; font-size: 14px; color: var(--text-2); margin-bottom: 9px; transition: all .18s; }
.obj.is-on .obj-ic { background: var(--accent-700); color: #fff; }
.obj-name { font-size: 13px; font-weight: 600; color: var(--text-0); }
.obj-desc { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }

/* indicateur secteurs/filtres */
.applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12px; color: var(--text-3); }
.applied-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(36,52,71,.06); border: 1px solid var(--glass-border-md); color: var(--text-2); font-size: 11.5px; font-weight: 500; }
.applied-chip i { font-size: 11px; color: var(--accent-700); }
.applied-chip.is-off { opacity: .6; }

/* barre d'outils villes */
.city-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.city-meta { margin-left: auto; font-size: 12px; color: var(--text-3); }
.city-meta b { color: var(--text-0); font-variant-numeric: tabular-nums; }

/* double curseur (fourchette d'entreprises) */
.range-wrap { min-width: 240px; }
.range-label { font-size: 12px; color: var(--text-2); margin-bottom: 9px; }
.range-label b { color: var(--text-0); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.dual { position: relative; height: 22px; }
.dual-track { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 3px; background: rgba(36,52,71,.10); }
.dual-fill { position: absolute; top: 9px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-700), var(--accent)); }
.dual input[type=range] { position: absolute; top: 0; left: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; height: 22px; }
.dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-700); box-shadow: var(--shadow-sm); cursor: grab; }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-700); box-shadow: var(--shadow-sm); cursor: grab; }
.dual input[type=range]:disabled::-webkit-slider-thumb { border-color: var(--text-4); cursor: not-allowed; }

/* liste de villes (lignes sélectionnables) */
.city-list { border: 1px solid var(--glass-border-md); border-radius: var(--radius); overflow: hidden; max-height: 360px; overflow-y: auto; background: var(--glass-solid); }
.crow-head { display: grid; grid-template-columns: 24px 1fr 120px 120px 70px; gap: 12px; padding: 9px 14px; background: rgba(36,52,71,.05); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); position: sticky; top: 0; z-index: 1; }
.crow { display: grid; grid-template-columns: 24px 1fr 120px 120px 70px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); cursor: pointer; transition: background .12s; }
.crow:last-child { border-bottom: 0; }
.crow:hover { background: var(--bg-base); }
.crow.is-on { background: var(--accent-100); }
.crow-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--glass-border-hi); display: grid; place-items: center; transition: all .15s; }
.crow-check i { font-size: 10px; color: #fff; opacity: 0; transform: scale(.5); transition: all .15s; }
.crow.is-on .crow-check { background: var(--accent-700); border-color: var(--accent-700); }
.crow.is-on .crow-check i { opacity: 1; transform: scale(1); }
.crow-name b { font-size: 13px; font-weight: 600; color: var(--text-0); }
.crow-name small { display: block; font-size: 11px; color: var(--text-3); }
.crow-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-1); font-variant-numeric: tabular-nums; text-align: right; }
.crow-num small { color: var(--text-3); font-size: 10px; display: block; font-family: var(--font-body); }
.crow-score { display: flex; align-items: center; justify-content: flex-end; }
.crow-rank { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.city-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 760px) { .crow, .crow-head { grid-template-columns: 22px 1fr 90px; } .crow > .crow-num:last-of-type, .crow-score, .crow-head > span:nth-child(4), .crow-head > span:nth-child(5) { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   WAALAXY — Injection contacts LinkedIn CSV (design 03_waalaxy)
   Composants partagés : upload-block, drop-zone, csv-list, csv-item,
   tableau de matching, progression. Tout dans le socle d'ecran.
   ════════════════════════════════════════════════════════════════════════ */
.upload-block { background: var(--glass-solid); border: 1px solid var(--glass-border-md); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); margin-top: 18px; }
.block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.block-head-left { display: flex; align-items: flex-start; gap: 14px; }
.block-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.block-title { font-size: 16px; font-weight: 600; color: var(--text-0); margin: 0; letter-spacing: -.01em; }
.block-sub { font-size: 12px; color: var(--text-3); margin: 3px 0 0; }
.badge.badge-info { background: rgba(37,99,235,.08); color: var(--info); border-color: var(--info-border); }
.badge.badge-neutral { background: rgba(36,52,71,.05); color: var(--text-2); border: 1px solid var(--glass-border-md); }
.badge.badge-succes { background: var(--succes-bg); color: var(--succes); border: 1px solid var(--succes-border); }
.badge.badge-warn { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* Drop zone (upload CSV par glisser-déposer) */
.drop-zone { position: relative; border: 2px dashed var(--glass-border-hi); border-radius: var(--radius); padding: 36px 22px; text-align: center; transition: all .2s var(--ease-out); overflow: hidden; cursor: pointer; }
.drop-zone:hover, .drop-zone.is-drag { border-color: var(--accent-700); background: var(--accent-100); }
.drop-zone-content { position: relative; z-index: 1; pointer-events: none; }
.drop-zone-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-100); display: grid; place-items: center; margin: 0 auto 12px; color: var(--accent-700); font-size: 22px; }
.drop-zone-title { font-size: 15px; font-weight: 600; color: var(--text-0); }
.drop-zone-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.drop-zone-link { color: var(--accent-700); font-weight: 600; cursor: pointer; }
.drop-zone-hint { font-size: 11px; color: var(--text-3); margin-top: 10px; font-family: var(--font-mono); }

/* Liste des fichiers CSV (groupés Nouveaux / En ligne) */
.csv-list { margin-top: 18px; }
.csv-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.csv-list-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.csv-list-actions { display: flex; gap: 6px; font-size: 12px; }
.btn-link { background: none; border: none; color: var(--accent-700); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.btn-link:hover { text-decoration: underline; }
.btn-link-sep { color: var(--text-4); }
.csv-section { margin-bottom: 10px; }
.csv-section-title, .csv-section-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; padding: 6px 0; background: none; border: none; cursor: pointer; width: 100%; text-align: left; }
.csv-section-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); margin-left: auto; }
.csv-section-content[hidden] { display: none; }
.csv-section-chevron { transition: transform .2s; }
.csv-section.is-open .csv-section-chevron { transform: rotate(90deg); }

.csv-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--glass-solid); border: 1px solid var(--glass-border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: all .14s; }
.csv-item:hover { border-color: var(--glass-border-md); box-shadow: var(--shadow-sm); }
.csv-item.is-checked { background: var(--accent-100); border-color: var(--accent); }
.csv-item.is-online { background: rgba(22,163,74,.04); cursor: default; }
.csv-item input[type="checkbox"] { accent-color: var(--accent-700); }
.csv-item-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(36,52,71,.05); display: grid; place-items: center; color: var(--accent-700); font-size: 14px; flex: none; }
.csv-item-info { flex: 1; min-width: 0; }
.csv-item-name { font-size: 13px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csv-item-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.csv-item-meta strong { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* Phase analyse : tableau de matching contacts → tiers */
.match-row { display: grid; grid-template-columns: 24px 1fr 1fr 60px 110px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--glass-border); }
.match-row:hover { background: var(--bg-base); }
.match-row.is-auto { background: rgba(124,58,237,.06); }
.match-row.is-verifier { background: rgba(217,119,6,.05); }
.match-row.is-non_trouve { opacity: .55; }
.match-head { display: grid; grid-template-columns: 24px 1fr 1fr 60px 110px; gap: 10px; padding: 9px 12px; background: rgba(36,52,71,.05); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); position: sticky; top: 0; }
.match-list { border: 1px solid var(--glass-border-md); border-radius: var(--radius); max-height: 440px; overflow-y: auto; background: var(--glass-solid); }
.match-pers strong { color: var(--text-0); }
.match-pers small { display: block; color: var(--text-3); font-size: 11px; }
.match-tier { font-size: 12.5px; color: var(--text-1); }
.match-tier small { display: block; color: var(--text-3); font-size: 11px; }
.match-score { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--text-1); }
.match-phase { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 4px 8px; border-radius: var(--radius-pill); border: 1px solid; }
.match-phase.is-auto { color: var(--accent-700); border-color: var(--accent); background: var(--accent-100); }
.match-phase.is-verifier { color: var(--warning); border-color: var(--warning-border); background: var(--warning-bg); }
.match-phase.is-non_trouve { color: var(--text-3); border-color: var(--glass-border-md); background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   LES JETONS DU DESIGN DE REFERENCE

   Poses APRES le socle d'origine, donc ils l'emportent. Ecrits ici plutot que
   modifies au-dessus pour qu'on lise d'un coup ce qui a ete decide, et
   pourquoi.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs ─────────────────────────────────────────────────────────── */
  --rail: #141f1d;              /* le rail sombre */
  --rail-creux: #16201e;
  --rail-relief: #20302d;
  --bg-base: #f1f5f2;

  --accent: #7c3aed;
  --accent-700: #6425d0;
  --accent-100: #ede9fe;

  /* SUR LE RAIL, l'accent violet donne 2,96:1 -- sous le seuil de lisibilite.
     Il ne doit JAMAIS y porter de texte. Ces deux-la le remplacent : 11,78
     et 13,45. */
  --accent-sur-sombre: #d7d3ff;
  --vif-sur-sombre: #b8f2d8;

  --text-0: #16201e;
  --text-1: #2b3a36;

  /* Le gris secondaire du design, #6f7d79, ne donne que 3,91:1 sur le fond
     clair : insuffisant pour du texte courant, et c'est la couleur la plus
     employee de la maquette. Fonce a teinte constante jusqu'a 4,99:1. */
  --text-2: #5f6c67;
  --text-3: #7b8883;          /* decoratif seulement : 3,3:1 */

  /* Sur le rail, --text-2 tomberait a 3,08:1. Le gris secondaire y est donc
     un AUTRE jeton, plus clair : 6,42:1. Deux fonds, deux gris. */
  --text-2-sur-sombre: #93a39f;

  /* ── Surfaces et traits ──────────────────────────────────────────────
     DEUX traits, parce qu'ils ne font pas le meme travail :

     `--trait` separe (filets, lignes de tableau). Un separateur a 3:1
     zebre la page et rend la lecture penible.

     `--bord-cible` DELIMITE un controle cliquable. Une puce blanche sur
     un fond presque blanc n'est visible que par son bord : WCAG 1.4.11
     demande 3:1 pour ce qui porte l'information, et notre trait de
     separation n'atteint que 1,2 -- la puce disparaissait pour qui voit
     mal les contrastes faibles. */
  --carte: #ffffff;
  --trait: #dde5e0;          /* 1,17 sur la page : un filet, pas un contour */
  --bord-cible: #788781;     /* 3,42 sur la page · 3,76 sur la carte */

  /* ── Le vif : ce qui est retenu, choisi, actif ───────────────────────
     Le vert du design. L'encre y atteint 7,34 -- large, et c'est voulu :
     ces puces portent des libelles courts en petit corps. */
  --vif-fond: #d9f2e4;
  --vif-bord: #a9d9c2;
  --vif-encre: #14563a;

  /* ── Densite ──────────────────────────────────────────────────────────── */
  /* Le design travaille a 12-13 px. C'est dense, et c'est assume : un ecran
     de travail montre plus qu'il ne respire. Douze est le PLANCHER -- en
     dessous, la lecture prolongee fatigue. */
  --taille-base: 13px;
  --taille-petite: 12px;
  --taille-grande: 15px;
  /* Le script d'appel se lit A VOIX HAUTE en regardant ailleurs : il lui faut
     davantage. */
  --taille-script: 15px;

  --pas-xs: 4px;
  --pas-sm: 6px;
  --pas: 10px;
  --pas-md: 14px;
  --pas-lg: 22px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --sidebar-w: 76px;            /* le rail : des icones, pas des libelles */
  --largeur-minimum: 1280px;

  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* La page est FLUIDE : elle occupe l'ecran. La maquette est en 1440x900 avec
   des coins arrondis parce que c'est une vue de presentation ; reprendre ce
   cadre donnerait une application dans une boite, avec des marges perdues sur
   un grand ecran et un debordement sur un petit. */
/* La densite se pose sur les DEUX : une regle plus haut donne au corps sa
   propre taille, et regler la racine seule laisse le corps a l'ancienne. */
html, body { font-size: var(--taille-base); }
body { min-width: var(--largeur-minimum); background: var(--bg-base);
       color: var(--text-0); font-family: var(--font-body); }
.shell { width: 100%; max-width: none; height: 100vh; border-radius: 0; }

/* ── LE RAIL : 76 px, des icones, un libelle au survol ────────────────────
   Le libelle n'est PAS supprime, il est deplace : un rail d'icones muettes
   demande d'apprendre des pictogrammes avant de savoir ou l'on va. Il reste
   donc lisible au survol pour l'oeil, et en aria-label pour un lecteur
   d'ecran -- qui, lui, ne survole rien. */

.sidebar {
  width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--pas-md) 0 var(--pas) 0;
  background: var(--rail); color: var(--text-2-sur-sombre);
  border-right: none;
}
.sidebar-brand { flex-direction: column; gap: 0; padding: 0 0 var(--pas) 0; border: none; }
.sidebar-brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--vif-sur-sombre); color: var(--rail);
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
}
.sidebar-brand-text { display: none; }

/* Dans un rail de soixante-seize pixels, << PROSPECTION >> ne tient pas : il
   debordait, tasse et illisible. Un SEPARATEUR fait le meme travail -- il
   groupe -- sans pretendre nommer. Le nom du groupe reste accessible : il est
   porte par le titre de section pour les lecteurs d'ecran. */
.sidebar-section {
  font-size: 0; line-height: 0;
  /* La regle d'origine posait 14px de marge interne en haut : sans cette
     remise a zero, le trait de un pixel occupait vingt pixels. */
  padding: 0;
  width: 28px; height: 1px; margin: var(--pas-md) 0 var(--pas-sm) 0;
  background: var(--text-2-sur-sombre); opacity: .22;
  overflow: hidden;
}

.sidebar-link {
  position: relative;
  width: 52px; height: 44px; margin: 2px 0; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2-sur-sombre); text-decoration: none;
}
.sidebar-link span:not(.ico) { display: none; }
.sidebar-link:hover { background: var(--rail-relief); color: var(--vif-sur-sombre); }

/* L'ecran courant se voit sans lire : une pastille claire et un trait a
   gauche. Deux marques plutot qu'une, parce qu'une seule couleur ne suffit
   pas a qui distingue mal les teintes. */
.sidebar-link.active {
  background: var(--rail-relief);
  color: var(--accent-sur-sombre);
}
.sidebar-link.active::before {
  content: ""; position: absolute; left: -12px; top: 10px;
  width: 3px; height: 24px; border-radius: 0 3px 3px 0;
  background: var(--accent-sur-sombre);
}

/* Le libelle au survol, en CSS seul. */
.sidebar-link::after {
  content: attr(data-libelle);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--rail); color: #fff;
  font-size: var(--taille-petite); white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  z-index: 40;
}
.sidebar-link:hover::after,
.sidebar-link:focus-visible::after { opacity: 1; }

/* Un ecran a venir se voit ET ne se clique pas. */
.sidebar-link.a-venir { opacity: .38; cursor: default; }
.sidebar-link.a-venir:hover { background: transparent; color: var(--text-2-sur-sombre); }

/* LE FOCUS EST VISIBLE PARTOUT. Un contour retire << pour faire propre >>
   rend l'application inutilisable au clavier, et personne ne s'en apercoit
   tant qu'on se sert de la souris. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sidebar :focus-visible { outline-color: var(--accent-sur-sombre); }

.sidebar-foot { margin-top: auto; padding: 0; border: none; }
.sidebar-user { flex-direction: column; gap: 0; padding: 0; }
.sidebar-user-info { display: none; }
.sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rail-relief); color: var(--accent-sur-sombre);
  display: grid; place-items: center; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   LE STEPPER DE RECHERCHE

   Sept etapes. L'ancien ecran posait tous les criteres a plat dans un seul
   formulaire, et chaque geste rechargeait la page : la selection en cours
   etait perdue, la position dans la liste aussi.

   Le stepper ne resout pas ca a lui seul -- c'est le JSON qui le resout.
   Il resout autre chose : un formulaire de vingt champs ne dit pas dans
   quel ORDRE reflechir, et l'utilisateur cochait des filtres avant d'avoir
   choisi un territoire.
   ════════════════════════════════════════════════════════════════════════ */

.chemin {
  display: flex; align-items: stretch; gap: 2px;
  padding: 0; margin: 0 0 var(--pas-lg) 0; list-style: none;
  border-bottom: 1px solid var(--trait);
}

.chemin-etape {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 12px; border: 0; background: transparent;
  font: inherit; font-size: var(--taille-petite); text-align: left;
  color: var(--text-2); cursor: pointer; position: relative;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.chemin-etape:hover { color: var(--text-1); background: rgba(36,52,71,0.035); }
.chemin-etape:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* L'etape courante porte DEUX marques -- le trait et le poids -- parce
   qu'une seule couleur ne suffit pas a qui distingue mal les teintes. */
.chemin-etape[aria-current="step"] {
  color: var(--text-0); font-weight: 600;
  border-bottom-color: var(--accent);
}

.chemin-pastille {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: var(--bg-base); color: var(--text-2);
  border: 1px solid var(--trait);
}
.chemin-etape[aria-current="step"] .chemin-pastille {
  background: var(--rail); color: #fff; border-color: var(--rail);
}
.chemin-etape[data-faite="1"] .chemin-pastille {
  background: var(--vif-fond); color: var(--vif-encre); border-color: var(--vif-fond);
}

.chemin-texte { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chemin-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ce qui a ete choisi a cette etape. Sans ce rappel, revenir en arriere est
   le seul moyen de savoir ce qu'on a coche trois ecrans plus tot. */
.chemin-choix {
  font-size: 10px; color: var(--text-2); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Le corps d'une etape ────────────────────────────────────────────── */

.etape-titre { font-size: 17px; font-weight: 600; color: var(--text-0); margin: 0 0 4px; }
.etape-intro { font-size: var(--taille-base); color: var(--text-2); margin: 0 0 var(--pas-md); max-width: 62ch; }
.etape-aide {
  font-size: var(--taille-petite); color: var(--text-2);
  border-left: 2px solid var(--trait); padding: 2px 0 2px 10px;
  margin: var(--pas-md) 0 0; max-width: 68ch;
}

.options { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.option {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--bord-cible); background: var(--carte);
  font: inherit; font-size: var(--taille-base); color: var(--text-1);
  cursor: pointer; text-align: left;
}
.option:hover { border-color: var(--rail); color: var(--text-0); }
.option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.option[aria-pressed="true"] {
  background: var(--vif-fond); border-color: var(--vif-bord); color: var(--vif-encre);
  font-weight: 600;
}
.option-marque { font-size: 11px; width: 11px; text-align: center; flex-shrink: 0; }
.option-compte { font-size: 10px; color: var(--text-2); font-weight: 400; }

/* Une option qu'on ne sait pas encore faire. Elle reste VISIBLE et dit
   pourquoi : la masquer laisserait croire que la machine ne connait pas le
   critere, et l'utilisateur le chercherait ailleurs. */
.option[aria-disabled="true"] {
  cursor: not-allowed; opacity: .62;
  background: repeating-linear-gradient(
    -45deg, transparent 0 5px, rgba(36,52,71,0.045) 5px 10px);
}
.option[aria-disabled="true"]:hover { border-color: var(--bord-cible); color: var(--text-1); }
.option-bientot {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--text-2);
  border: 1px solid var(--trait); border-radius: 3px; padding: 0 4px;
}

.raisons { margin: var(--pas-sm) 0 0; padding: 0; list-style: none;
  font-size: var(--taille-petite); color: var(--text-2); }
.raisons li { padding: 2px 0 2px 14px; position: relative; }
.raisons li::before { content: "·"; position: absolute; left: 5px; font-weight: 700; }

/* ── Le pied : ce qu'on a, et par ou on continue ─────────────────────── */

.pied-etape {
  display: flex; align-items: center; gap: var(--pas-md);
  margin-top: var(--pas-lg); padding-top: var(--pas-md);
  border-top: 1px solid var(--trait);
}
.pied-compte { margin-right: auto; font-size: var(--taille-base); color: var(--text-1); }
.pied-compte strong { font-size: 15px; }
/* Le compteur du pied est APPROCHE. Il le dit, parce qu'un nombre pose sans
   qualificatif se lit comme un total exact -- et l'exact coute vingt
   secondes, c'est l'audit. */
.pied-compte .approche { font-size: 10px; color: var(--text-2); display: block; }

.zone-liste { max-height: 46vh; overflow-y: auto; border: 1px solid var(--trait);
  border-radius: var(--radius-sm); }

.ligne-choix { display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--trait); font-size: var(--taille-petite); }
.ligne-choix:last-child { border-bottom: 0; }
.ligne-choix:hover { background: rgba(36,52,71,0.025); }
.ligne-choix .nom { font-weight: 600; color: var(--text-0); font-size: var(--taille-base); }
.ligne-choix .lieu, .ligne-choix .quoi { color: var(--text-2); }
.ligne-choix .signal { margin-left: auto; color: var(--vif-encre); font-weight: 600; white-space: nowrap; }
.ligne-choix.deja { opacity: .55; }

.saisie-mot {
  width: 100%; max-width: 460px; padding: 8px 11px;
  border: 1px solid var(--bord-cible); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--taille-base); background: var(--carte); color: var(--text-0);
}
.saisie-mot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.attente { font-size: var(--taille-petite); color: var(--text-2); }

/* Le nom d'une ligne ouvre la fiche. C'est un lien vers une vraie page : le
   panneau intercepte le clic ordinaire, l'adresse sert au clic du milieu et
   a l'ouverture dans un onglet. Il doit RESSEMBLER a ce qu'il fait, sans quoi
   personne ne devine qu'on peut cliquer. */
a.nom {
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-weight: 600; font-size: var(--taille-base);
  color: var(--text-0); cursor: pointer; text-align: left;
  border-bottom: 1px solid transparent;
}
a.nom:hover { border-bottom-color: var(--accent); color: var(--accent-700); }
a.nom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.titre-ecran { font-size: 19px; font-weight: 600; color: var(--text-0); margin: 0 0 2px; }

/* ════════════════════════════════════════════════════════════════════════
   LES COMPOSANTS DU PROTOTYPE

   Tires des styles EN LIGNE de `Saviro CRM.html`, ecrits UNE fois ici.
   Le prototype n'a pas de feuille : chaque element y porte son style. Les
   recopier ecran par ecran ferait diverger le troisieme du premier, et
   personne ne verrait lequel a raison.

   Les valeurs sont celles du prototype, au pixel. Deux exceptions, toutes
   deux de CONTRASTE, et signalees a leur ligne.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* La palette du prototype, mesuree sur son DOM. */
  --encre: #16201e;              /* rgb(22,32,30) */
  --encre-2: #55635f;            /* 5,72 sur le fond -- sous-titres */
  --encre-3: #5f6d69;            /* 4,92 sur le fond -- mentions */
  --vert-profond: #1f6b4f;       /* fond du score, blanc dessus : 6,41 */
  --ambre-fond: #fff3e0;
  --ambre-encre: #8a5a00;        /* 5,40 */
  --bleu-fond: #e3f0ff;
  --bleu-encre: #2b66c2;         /* le prototype dit #2f6fd1 = 4,21, sous le
                                    seuil. Fonce au minimum : 4,81. */
  --violet-encre: #6d2fd6;

  /* Les deux rouges du prototype, mesures et gardes tels quels :
     blanc sur #c93a3a donne 5,06 ; #b83232 sur blanc donne 5,93. */
  --rouge: #c93a3a;
  --rouge-encre: #b83232;       /* le prototype dit #7c3aed = 3,98 sur
                                    #d7d3ff. Fonce au minimum : 4,84. */
  --r-panneau: 28px;
  --r-carte: 22px;
  --r-bloc: 18px;
  --r-pastille: 999px;
}

/* ── Le panneau lateral ─────────────────────────────────────────────── */

.panneau-fiche {
  position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 92vw;
  background: var(--bg-base);
  border-radius: var(--r-panneau) 0 0 var(--r-panneau);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .28);
  padding: 24px 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: auto; z-index: 60;
}

.panneau-tete { display: flex; justify-content: space-between; align-items: center; }
.panneau-tete-gauche { display: flex; gap: 8px; align-items: center; }
.panneau-tete-actions { display: flex; gap: 6px; }
.panneau-mention { font-size: 12px; color: var(--encre-3); }

.rond-fermer {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--carte); cursor: pointer; font-size: 14px; color: var(--encre);
}
.rond-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Les boutons en gelule ──────────────────────────────────────────── */

.gelule {
  border: 0; background: var(--carte); color: var(--encre);
  border-radius: var(--r-pastille); padding: 9px 16px;
  font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.gelule:hover { background: #f6f8f7; }
.gelule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gelule-forte { background: var(--accent); color: #fff; }
.gelule-forte:hover { background: #6d2fd6; }

/* ── L'identite : pastille, nom, sous-titre, etiquettes ─────────────── */

.identite { display: flex; gap: 16px; align-items: flex-start; }
.identite-marque {
  width: 72px; height: 72px; border-radius: 24px;
  background: var(--encre); color: var(--vif-sur-sombre);
  display: grid; place-items: center;
  font-size: 24px; font-weight: 600; flex: 0 0 auto;
}
.identite-corps { flex: 1; min-width: 0; }
.identite-nom { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.identite-quoi { font-size: 12.5px; color: var(--encre-2); margin-top: 4px; }
.identite-etiquettes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.etiquette {
  border-radius: var(--r-pastille); padding: 5px 12px; font-size: 12px;
  background: var(--carte); color: var(--encre); white-space: nowrap;
}
.etiquette-score { background: var(--vert-profond); color: #fff; }
.etiquette-vive { background: var(--vif-sur-sombre); color: var(--encre); }

/* ── La carte blanche, et les lignes de coordonnees ─────────────────── */

.carte-blanche {
  background: var(--carte); border-radius: var(--r-carte);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  font-size: 12.5px;
}

.ligne-fait { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ligne-fait-valeur { min-width: 0; }
/* Les chiffres alignes en colonne : un numero de telephone se lit en un coup
   d'oeil quand ses chiffres ont tous la meme largeur. */
.numero { font-variant-numeric: tabular-nums; font-size: 14px; }
.ligne-fait-quoi { color: var(--encre-3); }
/* D'ou vient le fait. Plus discret que la cle : le commercial lit d'abord la
   valeur, et ne cherche la source qu'au moment de decider s'il peut la citer
   au telephone. L'infobulle porte la licence, que personne n'a besoin de lire
   deux fois par jour mais que le produit doit afficher. */
.ligne-fait-source { color: var(--encre-3); font-size: 11px; }

/* Le pied d'attribution. La contrepartie de la Licence Ouverte se lit en bas
   de fiche, une fois, et non a chaque ligne. */
.pied-sources {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--trait);
  font-size: 11px; color: var(--encre-3); line-height: 1.6;
}
.pied-sources a { color: var(--encre-2); }

.jeton-fiabilite {
  font-size: 10.5px; border-radius: var(--r-pastille); padding: 2px 8px;
  white-space: nowrap; flex: 0 0 auto;
  background: var(--vif-sur-sombre); color: var(--encre);
}
.jeton-fiabilite.approche { background: var(--ambre-fond); color: var(--ambre-encre); }

/* ── Les deux cartes de couleur ─────────────────────────────────────── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }

.carte-couleur { border-radius: var(--r-carte); padding: 18px; color: var(--encre); }
.carte-couleur.action { background: var(--accent-sur-sombre); }
.carte-couleur.signaux { background: var(--vif-sur-sombre); }
.carte-titre { font-size: 12px; opacity: .7; }
.carte-principal { font-size: 17px; margin-top: 4px; }
.carte-second { font-size: 12px; opacity: .75; margin-top: 2px; }
.carte-etiquettes { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.carte-etiquettes .etiquette { padding: 5px 10px; font-size: 11px; }
.etiquette-pale { background: rgba(255, 255, 255, .5); }
.liste-signaux { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 12.5px; }

/* ── Le titre de section, avec son filet ────────────────────────────── */

.section-filet { display: flex; align-items: center; gap: 10px; color: var(--encre-2); }
.section-filet-nom { font-size: 14px; color: var(--encre); }
.section-filet-trait { flex: 1; height: 1px; background: rgba(0, 0, 0, .08); }
.section-filet-compte { font-size: 12px; }

/* ── La chronologie ─────────────────────────────────────────────────── */

.chronologie { display: flex; flex-direction: column; gap: 8px; }
.chrono-entree {
  display: flex; gap: 12px; background: var(--carte);
  border-radius: var(--r-bloc); padding: 12px 14px;
}
.chrono-pastille {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; flex: 0 0 auto;
  background: var(--bleu-fond); color: var(--bleu-encre);
}
.chrono-pastille.mail { background: var(--accent-sur-sombre); color: var(--violet-encre); }
.chrono-pastille.signal { background: var(--vif-sur-sombre); color: var(--vert-profond); }
.chrono-corps { flex: 1; min-width: 0; }
.chrono-ligne { display: flex; justify-content: space-between; gap: 8px; }
.chrono-quoi { font-size: 13px; }
.chrono-quand { font-size: 11px; color: var(--encre-3); flex: 0 0 auto; }
.chrono-detail { font-size: 11.5px; color: var(--encre-2); margin-top: 3px; line-height: 1.5; }

/* ── Le vide, qui doit dire pourquoi ────────────────────────────────── */

.rien-a-dire {
  font-size: 12.5px; color: var(--encre-2);
  background: var(--carte); border-radius: var(--r-bloc); padding: 14px 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   LA PAGE FICHE — relevee sur l'ecran Ambitherm du prototype

   L'en-tete y est DENSE : tout ce qui sert a decrocher tient en trois
   lignes, coordonnees et fiabilites comprises. C'est ce qui evite de
   parcourir la page avant de composer.
   ════════════════════════════════════════════════════════════════════════ */

.fiche-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.fiche-tete-gauche { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }

.fiche-marque {
  width: 96px; height: 96px; border-radius: 30px;
  background: var(--encre); color: var(--vif-sur-sombre);
  display: grid; place-items: center; font-size: 30px; font-weight: 600; flex: 0 0 auto;
}
.fiche-nom { margin: 2px 0 0; font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }

/* Les deux lignes de meta. Elles portent les coordonnees ET leur fiabilite :
   savoir ce que vaut un numero au moment de le lire, pas trois blocs plus
   bas. */
.fiche-meta {
  display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; align-items: center;
  color: var(--encre-2); font-size: 12.5px;
}
.fiche-meta + .fiche-meta { margin-top: 6px; }
.fiche-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.fiche-meta b { font-weight: 500; color: var(--encre); }

.fiche-tete-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.assigne {
  display: flex; align-items: center; gap: 10px;
  background: var(--carte); border-radius: var(--r-pastille); padding: 6px 16px 6px 6px;
}
.assigne-rond { width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #cfd6d1, #8a958f); flex: 0 0 auto; }
.assigne-quoi { font-size: 10px; color: var(--encre-3); }
.assigne-qui { font-size: 12px; font-weight: 500; }

/* Le score et l'etat se CHEVAUCHENT de dix pixels : ils se lisent comme une
   seule information -- combien, et ce que ca vaut aujourd'hui. */
.duo-score { display: flex; }
.duo-score .etiquette { padding: 9px 18px; font-size: 14px; }
.duo-score .etiquette-score { position: relative; z-index: 1; }
.duo-score .etiquette-vive { padding-left: 22px; margin-left: -10px; }

/* ── La barre d'actions : quatre gestes, puis les onglets ────────────── */

.barre-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rond-action {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.rond-action:hover { background: var(--violet-encre); }
.rond-action:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.rond-action[aria-disabled="true"] { background: var(--bord-cible); cursor: not-allowed; }

.onglets {
  display: flex; background: var(--carte); border-radius: var(--r-pastille);
  padding: 4px; margin-left: 8px; gap: 2px;
}
.onglet {
  border: 0; border-radius: var(--r-pastille); padding: 9px 18px;
  font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--encre-2); text-decoration: none;
}
.onglet:hover { color: var(--encre); }
.onglet[aria-current="page"] { background: var(--encre); color: #fff; }
.onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Le corps : ce qui s'est passe a gauche, ce qu'on fait a droite ──── */

.fiche-corps { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .fiche-corps { grid-template-columns: 1fr; } }
.fiche-colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.carte-large { border-radius: 26px; padding: 20px 20px 18px; }
.carte-large.action { background: var(--accent-sur-sombre); }
.carte-large.signaux { background: var(--vif-sur-sombre); }
.carte-large-titre { font-size: 18px; line-height: 1.2; }
.carte-large-sous { font-size: 12px; opacity: .7; margin-top: 2px; }
.carte-large-objectif { font-size: 12px; opacity: .75; margin-top: 16px; }
.carte-large-quoi { font-size: 22px; margin-top: 2px; line-height: 1.15; }
.carte-large-quand { font-size: 12px; opacity: .75; margin-top: 2px; }

/* Deux canaux dans une meme gelule : celui qui est prevu est en relief. */
.bascule-canal {
  display: flex; gap: 6px; margin-top: 14px;
  background: rgba(255, 255, 255, .35); border-radius: var(--r-pastille); padding: 4px;
}
.bascule-canal > * {
  flex: 1; border-radius: var(--r-pastille); padding: 7px 12px;
  font: inherit; font-size: 12px; text-align: center; border: 0;
  background: transparent; opacity: .7; cursor: pointer; color: inherit;
}
.bascule-canal > [aria-pressed="true"] { background: var(--carte); opacity: 1; }

/* ── Les listes cochees : portes franchies, signaux ──────────────────── */

.coches { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 12.5px; }
.coche { display: flex; gap: 10px; align-items: flex-start; }
.coche-rond {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .6); display: grid; place-items: center; font-size: 11px;
}
.signaux .coche-rond { background: rgba(0, 0, 0, .08); }
.coche-non { opacity: .7; }
.coche-mention { opacity: .6; }

.pied-carte { display: flex; gap: 8px; margin-top: 16px; }
.pied-carte .btn-plein {
  flex: 1; border: 0; background: var(--accent); color: #fff;
  border-radius: var(--r-pastille); padding: 13px; cursor: pointer;
  font: inherit; font-size: 13px; text-align: center; text-decoration: none;
}
.pied-carte .btn-plein:hover { background: var(--violet-encre); }

.mention-contact { font-size: 12px; color: var(--encre-2); margin: 0 0 10px; }

/* ── Ce qu'ils valent : une ligne, le detail sur demande ─────────────── */

details.repli { background: var(--carte); border-radius: var(--r-bloc); padding: 0; }
details.repli > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
}
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: "▾"; margin-left: auto; color: var(--encre-3); }
details.repli[open] > summary::after { content: "▴"; }
details.repli > summary:hover { color: var(--accent-700); }
details.repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.repli-corps { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.repli-ligne { font-size: 12px; color: var(--encre-2); padding-left: 10px;
  border-left: 2px solid var(--trait); }

/* ════════════════════════════════════════════════════════════════════════
   LA LISTE D'ENTREPRISES — relevee sur l'ecran Entreprises du prototype

   Huit colonnes, dont deux qui portent le travail : la fiabilite du numero
   et l'etat de la cible. Une liste qui n'affiche que des noms oblige a
   ouvrir chaque fiche pour savoir laquelle vaut un appel.
   ════════════════════════════════════════════════════════════════════════ */

.liste-tete,
.liste-ligne {
  display: grid;
  grid-template-columns: 28px 1.6fr 70px 1fr 90px 1.2fr 130px 1fr;
  gap: 12px;
  align-items: center;
}
/* La premiere colonne est la case a cocher : elle n'existe pas dans le
   prototype, qui liste sans selectionner. Vingt-huit pixels, pas davantage --
   une case surdimensionnee prend la place du nom qu'on lit. */

.liste-tete {
  padding: 0 16px 6px;
  font-size: 11px; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.liste-ligne {
  border-radius: var(--r-bloc); padding: 12px 16px; font-size: 13px;
  background: var(--carte); cursor: pointer;
}
.liste-ligne:hover { background: #f6f8f7; }
.liste-ligne:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.liste-corps { display: flex; flex-direction: column; gap: 6px; }

.liste-nom { font-weight: 500; color: var(--encre); }
.liste-sous { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.liste-siren { font-size: 11.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.liste-terne { color: var(--encre-2); }
.liste-vide { color: var(--bord-cible); }

/* Un lien de nom qui ne DIT pas qu'il ouvre quelque chose ne se clique pas. */
a.liste-nom { text-decoration: none; border-bottom: 1px solid transparent; }
a.liste-nom:hover { border-bottom-color: var(--accent); color: var(--accent-700); }
a.liste-nom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Trois couleurs de fiabilite, et non deux : le prototype distingue
   « confirmé » (vert) de « exact » (bleu). Ce n'est pas decoratif -- deux
   sources qui concordent ne valent pas la meme chose qu'une seule source
   officielle, et c'est ce qui decide de citer ou non le numero au telephone. */
.jeton-fiabilite.exacte { background: var(--bleu-fond); color: var(--bleu-encre); }

.case-ligne { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.case-ligne:disabled { cursor: not-allowed; }

@media (max-width: 1100px) {
  /* En dessous, huit colonnes se marchent dessus. On garde ce qui sert a
     decider : la case, le nom, le telephone et l'etat. */
  .liste-tete { display: none; }
  .liste-ligne { grid-template-columns: 28px 1fr 130px; }
  .liste-ligne > .repli-masquable { display: none; }
}

/* ── La fiche DANS le panneau ─────────────────────────────────────────────
   Le meme gabarit sert aux deux, et c'est voulu. Mais six cents pixels ne
   sont pas mille : les deux colonnes s'y ecrasent, et un nom de trente-quatre
   pixels passe sur trois lignes.

   Le prototype empile, dans le panneau. On empile aussi. */

.panneau-fiche .fiche-corps { grid-template-columns: 1fr; }
.panneau-fiche .fiche-nom { font-size: 24px; }
.panneau-fiche .fiche-marque { width: 72px; height: 72px; border-radius: 24px; font-size: 24px; }
.panneau-fiche .fiche-tete { flex-direction: column; gap: 12px; }
.panneau-fiche .fiche-tete-droite { align-items: flex-start; flex-direction: row; gap: 8px; }
.panneau-fiche .carte-large { border-radius: var(--r-carte); padding: 16px 18px; }
.panneau-fiche .carte-large-quoi { font-size: 18px; }
/* La barre d'actions garde ses quatre ronds : ce sont les gestes, ils ne
   dependent pas de la largeur. */
.panneau-fiche .barre-actions { flex-wrap: wrap; }

/* Empile, l'ordre du prototype s'inverse : la timeline arrive avant l'action.
   Or c'est l'action qu'on regarde en premier -- « qu'est-ce que j'avais dit
   que je ferais ? ». On la remonte. */
.panneau-fiche .fiche-corps > .fiche-colonne:last-child { order: -1; }

/* ════════════════════════════════════════════════════════════════════════
   `hidden` GAGNE, toujours

   Le panneau porte `display: flex` par sa classe. La regle par defaut du
   navigateur -- `[hidden] { display: none }` -- vient de la feuille de
   l'agent utilisateur : n'importe quelle classe la bat.

   Resultat mesure : le panneau s'ouvrait VIDE a chaque chargement, et il
   fallait le fermer a la main. Echap ne le fermait pas non plus, pour la
   meme raison : le gestionnaire posait bien `hidden = true`, qui l'etait
   deja -- et rien ne bougeait a l'ecran.

   Un seul defaut, deux symptomes.

   `!important` se justifie ici : `hidden` est une declaration d'intention du
   HTML, pas une preference de presentation. Aucune regle de style n'a a la
   contredire, et la prochaine classe qui posera un `display` ne recreera pas
   le defaut.
   ════════════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   AUJOURD'HUI — releve sur l'ecran d'accueil du prototype

   Deux colonnes : ce qu'on fait a gauche, ce qui a bouge sans nous a droite.
   ════════════════════════════════════════════════════════════════════════ */

.jour { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .jour { grid-template-columns: 1fr; } }
.jour-colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.jour-cote { display: flex; flex-direction: column; gap: 14px; }

.jour-date { font-size: 12px; color: var(--encre-3); }
.jour-salut { font-size: 34px; font-weight: 300; letter-spacing: -0.02em; margin: 2px 0 0; }
.jour-quoi { font-size: 12.5px; color: var(--encre-2); margin-top: 6px; }

/* Le bandeau de session : ce qu'on fait MAINTENANT, en vert, avec le geste
   a droite. C'est la seule chose que l'ecran demande de decider. */
.bandeau-session {
  background: var(--vif-sur-sombre); border-radius: var(--r-panneau);
  padding: 26px 28px; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; flex-wrap: wrap;
}
.bandeau-titre { font-size: 12px; opacity: .7; }
.bandeau-principal { font-size: 24px; margin-top: 4px; letter-spacing: -0.01em; }
.bandeau-etiquettes { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.bandeau-etiquettes > span {
  background: rgba(0, 0, 0, .08); border-radius: var(--r-pastille);
  padding: 5px 11px; font-size: 11px;
}
.bouton-session {
  border: 0; background: var(--accent); color: #fff; border-radius: var(--r-pastille);
  padding: 16px 26px; font: inherit; font-size: 14px; cursor: pointer;
  flex: 0 0 auto; text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
}
.bouton-session:hover { background: var(--violet-encre); }
.bouton-session:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.bouton-session[aria-disabled="true"] { background: var(--bord-cible); cursor: not-allowed; }

/* Les trois compteurs de la semaine. La barre ne se dessine QUE s'il y a une
   cible : une barre vide se lit comme un retard, alors qu'elle ne dit que
   l'absence d'objectif. */
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .trois { grid-template-columns: 1fr; } }
.compteur { background: var(--carte); border-radius: var(--r-carte); padding: 18px; }
.compteur-nom { font-size: 12px; color: var(--encre-3); }
.compteur-valeur { font-size: 28px; font-weight: 300; margin: 6px 0 10px; }
.compteur-valeur small { font-size: 13px; color: var(--encre-3); }
.jauge { height: 6px; border-radius: 99px; background: #e6ebe7; overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 99px; background: var(--encre); }
.jauge-violette > span { background: var(--accent); }
.jauge-bleue > span { background: var(--bleu-encre); }
.compteur-sans-cible { font-size: 11px; color: var(--encre-3); }

/* L'agenda : l'heure a gauche, ce qui est prevu a droite. */
.agenda { display: flex; flex-direction: column; gap: 8px; }
.agenda-ligne { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; }
.agenda-heure { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.agenda-quoi {
  background: var(--carte); border-radius: 16px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.agenda-genre {
  font-size: 11px; border-radius: var(--r-pastille); padding: 4px 10px;
  background: #e6ebe7; white-space: nowrap;
}
.agenda-genre.maintenant { background: var(--vif-sur-sombre); }
.agenda-genre.rappel { background: var(--accent-sur-sombre); }

/* Les alertes, dans la carte violette. Une alerte GRAVE porte un rond rouge ;
   ce qui n'existe pas encore porte un rond neutre et le dit. */
.alerte { display: flex; gap: 10px; align-items: flex-start; }
.alerte-rond {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px;
  background: rgba(255, 255, 255, .6); color: var(--encre);
}
.alerte-rond.grave { background: var(--rouge); color: #fff; }
.alerte-absente { opacity: .75; }

/* Le bilan de la nuit : un libelle, un nombre. */
.bilan { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; font-size: 12.5px; }
.bilan-ligne { display: flex; justify-content: space-between; gap: 10px; }
.bilan-ligne b { font-weight: 500; }
.bilan-ligne b.attention { color: var(--rouge-encre); }

/* ════════════════════════════════════════════════════════════════════════
   MA JOURNEE — releve sur l'ecran du meme nom

   Une liste qu'on COMPOSE : la machine propose, on coche, le reste part au
   report. Six colonnes, dont deux qui portent la decision -- pourquoi cette
   ligne est la, et ce qu'elle va couter.
   ════════════════════════════════════════════════════════════════════════ */

.journee-ligne {
  display: grid; grid-template-columns: 22px 34px 1fr 1.3fr 70px 80px;
  gap: 14px; align-items: center;
  border-radius: var(--r-bloc); padding: 12px 16px; font-size: 13px;
  background: var(--carte);
}
.journee-ligne:hover { background: #f6f8f7; }
.journee-ligne.retiree { opacity: .55; }
@media (max-width: 900px) {
  .journee-ligne { grid-template-columns: 22px 34px 1fr 80px; }
  .journee-ligne > .repli-masquable { display: none; }
}

/* La coche est un vrai controle, dessine comme le prototype : un carre
   arrondi qui se remplit. `appearance: none` retire le style natif ; le
   `:checked` remet ce qu'il faut voir. */
.coche-journee {
  width: 20px; height: 20px; border-radius: 7px; margin: 0;
  border: 1.5px solid var(--encre); background: transparent;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: grid; place-items: center;
}
.coche-journee:checked { background: var(--accent); border-color: var(--accent); }
.coche-journee:checked::after { content: "✓"; color: #fff; font-size: 12px; }
.coche-journee:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pastille-canal {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--vif-sur-sombre);
}
.pastille-canal.mail { background: var(--accent-sur-sombre); }
.pastille-canal.reseau { background: var(--bleu-fond); }

.journee-nom { font-weight: 500; }
.journee-qui { font-size: 11.5px; color: var(--encre-3); }
.journee-pourquoi { color: var(--encre-2); }
.journee-duree { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.journee-canal {
  font-size: 11px; border-radius: var(--r-pastille); padding: 4px 9px;
  text-align: center; background: var(--bg-base); color: var(--encre-2);
}

/* Les filtres par canal, en gelule comme les onglets de la fiche. */
.filtres-canal { display: flex; background: var(--carte); border-radius: var(--r-pastille);
  padding: 4px; gap: 2px; width: fit-content; }
.filtre-canal {
  border: 0; border-radius: var(--r-pastille); padding: 8px 16px;
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: transparent; color: var(--encre-2);
}
.filtre-canal[aria-pressed="true"] { background: var(--encre); color: #fff; }
.filtre-canal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   L'ECRAN CIBLES -- releve sur << 3 · CIBLES >> du prototype

   Sept colonnes, la meme grille pour les en-tetes et pour les lignes. Ecrite
   DEUX fois -- une pour l'en-tete, une pour la ligne -- elle divergerait au
   premier reglage, et les titres cesseraient d'etre au-dessus de ce qu'ils
   nomment. Elle est donc posee une fois dans une variable.
   ════════════════════════════════════════════════════════════════════════ */

:root { --grille-cibles: 28px 1.5fr 90px 1.8fr 1fr 1.2fr 110px; }

.ecran {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-base); border-radius: 28px 0 0 28px;
  padding: 26px 34px 28px; gap: 18px; overflow: auto;
}

.ecran-tete { display: flex; justify-content: space-between; align-items: flex-end; }
.ecran-sur-titre { font-size: 12px; color: var(--encre-3); }
.ecran-titre { margin: 4px 0 0; font-size: 28px; font-weight: 300; letter-spacing: -0.02em; }
.ecran-titre-compte { color: var(--encre-3); }
.ecran-actions { display: flex; gap: 8px; }

/* Les deux boutons de l'en-tete. `.btn-plein` existait deja, mais SEULEMENT
   sous `.pied-carte` : hors de cette carte, il tombait sur le style par
   defaut du navigateur et ne ressemblait plus a rien. */
.btn-clair, .btn-plein, .btn-sombre {
  border: 0; border-radius: var(--r-pastille); padding: 10px 18px;
  font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-clair { background: var(--carte); color: var(--encre); }
.btn-plein { background: var(--accent); color: #fff; }
.btn-plein:hover { background: var(--violet-encre); }
.btn-sombre { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-clair:focus-visible, .btn-plein:focus-visible, .btn-sombre:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Ce que le produit ne porte pas encore. Gris et non cliquable, mais PRESENT :
   une commande absente se remarque moins qu'une commande qui dit pourquoi
   elle ne peut rien faire. */
.btn-absent {
  border-radius: var(--r-pastille); padding: 9px 14px; font-size: 12px;
  background: transparent; color: var(--encre-3); cursor: default;
  border: 1px dashed var(--bord-cible);
}

/* ── Les onglets et les filtres affiches ────────────────────────────── */

.barre-onglets { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.onglets-pilule {
  display: flex; background: var(--carte); border-radius: var(--r-pastille);
  padding: 4px; gap: 2px;
}
.onglet-pilule {
  border: 0; border-radius: var(--r-pastille); padding: 9px 16px;
  font-size: 13px; cursor: pointer; text-decoration: none;
  display: flex; gap: 8px; align-items: center;
  background: transparent; color: var(--encre-2);
}
.onglet-pilule.actif { background: var(--encre); color: #fff; }
.onglet-pilule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onglet-compte { font-size: 11px; opacity: .6; }

.filtres-affiches { display: flex; gap: 6px; }
.filtre-fige {
  background: var(--carte); border-radius: var(--r-pastille);
  padding: 9px 14px; font-size: 12px; color: var(--encre-2);
}

.bandeau-info {
  background: var(--carte); border-radius: var(--r-bloc);
  padding: 12px 16px; font-size: 13px; color: var(--encre);
  border-left: 3px solid var(--accent);
}

/* ── La liste ───────────────────────────────────────────────────────── */

.cibles-entetes, .cible-ligne {
  display: grid; grid-template-columns: var(--grille-cibles); gap: 12px;
}
.cibles-entetes {
  padding: 0 16px; font-size: 11px; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.cibles-corps { display: flex; flex-direction: column; gap: 6px; }

.cible-ligne {
  align-items: center; border-radius: var(--r-bloc); padding: 13px 16px;
  font-size: 13px; background: var(--carte);
}
.cible-ligne.choisie { background: var(--vif-sur-sombre); }
.cible-ligne.verrouillee { opacity: .68; }

.coche-cible {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--encre);
  appearance: none; background: #fff; cursor: pointer;
  display: grid; place-items: center; margin: 0;
}
.coche-cible:checked { background: var(--encre); }
.coche-cible:checked::after { content: "✓"; color: #fff; font-size: 11px; }
.coche-cible:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coche-vide { color: var(--bord-cible); text-align: center; }

.cible-nom { min-width: 0; }
/* Un nom trop long ne doit pas pousser les colonnes suivantes : la grille
   est fixe, mais une cellule sans `min-width: 0` refuse de retrecir et
   fait deborder toute la ligne. */
.cible-sous { font-size: 11.5px; color: var(--encre-3); margin-top: 2px; }

/* Le score. Trois paliers, ceux du prototype : 75 et 60. */
.pastille-score {
  border-radius: var(--r-pastille); padding: 5px 10px; font-size: 11.5px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.pastille-score.haut { background: var(--vert-profond); color: #fff; }
.pastille-score.moyen { background: var(--vif-sur-sombre); color: var(--encre); }
.pastille-score.bas { background: #e6ebe7; color: var(--encre-2); }
/* Pas de score : un tiret, jamais un zero. Zero est un jugement, l'absence
   d'evaluation n'en est pas un. */
.pastille-score.vide { background: transparent; color: var(--bord-cible); }

.cible-raisons { display: flex; gap: 4px; flex-wrap: wrap; }
.etiquette-raison {
  background: var(--bg-base); border-radius: var(--r-pastille);
  padding: 4px 9px; font-size: 11px; color: var(--encre-2);
}

.cible-etat { color: var(--encre-2); }
.cible-verrou { font-size: 11px; color: var(--accent); margin-top: 2px; }
.cible-suite { color: var(--encre-2); }

/* La fiabilite du numero, aux couleurs de la fiche : les memes trois mots,
   les memes trois fonds. Deux codages differents pour la meme notion
   feraient lire un numero sur comme un numero douteux d'un ecran a l'autre. */
.pastille-fiabilite {
  font-size: 11px; border-radius: var(--r-pastille); padding: 4px 9px;
  text-align: center; background: var(--vif-sur-sombre); color: var(--encre);
}
.pastille-fiabilite.exacte { background: var(--bleu-fond); color: var(--bleu-encre); }
.pastille-fiabilite.approchee { background: var(--ambre-fond); color: var(--ambre-encre); }
.pastille-fiabilite.vide { background: transparent; color: var(--bord-cible); }

/* ── La barre de selection ──────────────────────────────────────────── */

.barre-selection {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--encre); color: #fff;
  border-radius: var(--r-pastille); padding: 8px 8px 8px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24); z-index: 40;
}
.barre-selection-compte { font-size: 13px; margin-right: 8px; }
.choix-sombre {
  border: 0; border-radius: var(--r-pastille); padding: 9px 14px;
  font: inherit; font-size: 12.5px;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.choix-sombre option { color: var(--encre); }
.btn-fermer-selection {
  border: 0; background: transparent; color: var(--encre-3);
  border-radius: var(--r-pastille); padding: 9px 12px;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.btn-fermer-selection:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   LE PANNEAU SOMBRE — relevé sur l'aside de l'écran d'accueil du prototype

   Il tient entre le rail de navigation et le contenu clair. Quatre vignettes
   chiffrées, puis « Prochaines actions ».

   La coquille passe de deux à TROIS colonnes quand il est là : la classe
   `a-panneau` est posée par l'écran qui le remplit. Sans elle, la grille
   garderait `auto 1fr` et le panneau se serrerait dans la colonne du rail.
   ════════════════════════════════════════════════════════════════════════ */

.shell.a-panneau { grid-template-columns: auto var(--panneau-sombre-l) 1fr; }

/* `--rail` et `--rail-relief` existent deja plus haut : les redefinir ici
   donnait DEUX noirs pour le meme rail, et le panneau se detachait du
   rail d'un ton -- ce qui se lit comme un defaut de rendu, pas comme une
   intention. */
:root { --panneau-sombre-l: 268px; }

.panneau-sombre {
  background: var(--rail); color: #f2f5f3;
  padding: 22px 16px 22px 8px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: auto;
}

.vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vignette {
  background: var(--rail-relief); border-radius: var(--r-carte);
  padding: 16px 16px 14px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.vignette-nom { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c3cfca; }
.vignette-valeur {
  font-size: 30px; font-weight: 300; text-align: right; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* La pastille n'est qu'un CERCLE VIDE bordé : c'est un repère de couleur, pas
   un état. Le remplir en ferait une puce d'alerte, et le rouge se lirait
   comme un problème alors qu'il ne marque que « RDV pris ». */
.vignette-pastille {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor;
}
.vignette-pastille.menthe { color: var(--vif-sur-sombre); }
.vignette-pastille.rouge { color: #ff8f8f; }
.vignette-pastille.bleu { color: #7fb7ff; }
.vignette-pastille.lavande { color: var(--accent-sur-sombre); }

.panneau-sombre-titre {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; padding: 8px 6px 0;
}
.panneau-sombre-compte { margin-left: auto; font-size: 12px; color: #8fa09b; }

.prochaines { display: flex; flex-direction: column; gap: 8px; }
.prochaine {
  border-radius: var(--r-carte); padding: 14px 14px 12px;
  background: var(--rail-relief); color: #f2f5f3;
  text-decoration: none; display: block;
}
/* La PREMIERE en clair : c'est « la » suivante, pas une de plus dans la
   liste. Quatre cartes identiques laisseraient choisir, et choisir est
   exactement le travail que cet écran doit épargner. */
.prochaine.en-avant { background: var(--vif-sur-sombre); color: var(--encre); }
.prochaine:focus-visible { outline: 2px solid var(--accent-sur-sombre); outline-offset: 2px; }

.prochaine-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.prochaine-nom { font-size: 14px; font-weight: 500; }
.prochaine-qui { font-size: 11px; opacity: .7; margin-top: 2px; }
.prochaine-fleche { font-size: 12px; opacity: .7; flex: none; }

.prochaine-geste {
  margin-top: 10px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: rgba(255, 255, 255, .08);
  border-radius: var(--r-pastille); padding: 6px 6px 6px 12px; font-size: 12px;
}
.prochaine.en-avant .prochaine-geste { background: rgba(255, 255, 255, .6); }

.prochaine-rang {
  border-radius: var(--r-pastille); padding: 4px 10px; font-size: 11px; flex: none;
}
.prochaine-rang.haut { background: var(--vert-profond); color: #fff; }
.prochaine-rang.moyen { background: var(--accent-sur-sombre); color: var(--encre); }
.prochaine-rang.bas { background: #7fb7ff; color: var(--encre); }

/* Sous 1100 px, le panneau passe SOUS le contenu plutôt que de l'écraser :
   à trois colonnes, la liste de Ma journée perdrait ses colonnes de droite. */
@media (max-width: 1100px) {
  .shell.a-panneau { grid-template-columns: auto 1fr; }
  .panneau-sombre { display: none; }
}

/* ── La page d'erreur ──────────────────────────────────────────────────── */

.carte-erreur {
  background: var(--carte); border-radius: var(--r-panneau);
  padding: 32px 34px 28px; text-align: center;
}
/* Le code en gros et en gris : il sert au dépannage, pas à la lecture. Le
   mettre en évidence en couleur ferait passer « 404 » pour l'information
   principale, alors que la phrase en dessous est la seule utile. */
.erreur-code {
  font-size: 42px; font-weight: 300; color: var(--bord-cible);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.erreur-titre { font-size: 22px; font-weight: 400; margin: 10px 0 0; }
.erreur-quoi { font-size: 13px; color: var(--encre-2); margin: 10px 0 22px; }
.erreur-suite { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   LA FILE D'APPELS — relevé sur « 5 · FILE D'APPELS » du prototype

   Deux colonnes : la file à gauche (400 px, fixe), la préparation à droite.
   La file est fixe parce qu'elle se parcourt à l'œil : une largeur qui varie
   déplacerait les noms d'un écran à l'autre.
   ════════════════════════════════════════════════════════════════════════ */

/* `height: 0` avec `flex: 1` : c'est ce qui BORNE la grille a la hauteur de
   l'ecran. Sans, la rangee se dimensionne sur son contenu -- une file de
   trente lignes faisait 2094 px, et << Demarrer l'appel >>, colle en bas de
   la carte de preparation, tombait a 2155 px : hors de vue.
   Le bouton principal de l'ecran etait invisible, et rien ne le signalait. */
.file-deux {
  display: grid; grid-template-columns: 400px 1fr; gap: 16px;
  flex: 1; height: 0; min-height: 0;
}
@media (max-width: 1200px) { .file-deux { grid-template-columns: 1fr; } }

.file-liste { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.file-ligne {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-bloc); padding: 12px 14px;
  background: var(--carte); color: var(--encre); text-decoration: none;
}
/* Celle qu'on prépare, en sombre : elle doit se retrouver d'un coup d'œil
   après avoir fait défiler la liste. */
.file-ligne.servie { background: var(--encre); color: #fff; }
.file-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.file-numero {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px;
  background: var(--bg-base); color: var(--encre-2);
}
.file-ligne.servie .file-numero { background: var(--vif-sur-sombre); color: var(--encre); }
.file-qui { flex: 1; min-width: 0; }
.file-nom { font-size: 13.5px; font-weight: 500; }
.file-sous { font-size: 11.5px; opacity: .7; }
.file-motif {
  font-size: 11px; border-radius: var(--r-pastille); padding: 4px 9px; flex: none;
  background: var(--bg-base); color: var(--encre-2);
}
.file-ligne.servie .file-motif { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── La préparation ─────────────────────────────────────────────────────── */

.file-preparation {
  background: var(--carte); border-radius: 26px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto;
}
.preparation-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.preparation-identite { display: flex; gap: 14px; align-items: center; }
.preparation-initiales {
  width: 60px; height: 60px; border-radius: 20px; flex: none;
  background: var(--encre); color: var(--vif-sur-sombre);
  display: grid; place-items: center; font-size: 20px; font-weight: 600;
}
.preparation-nom { font-size: 22px; }
.preparation-sous { font-size: 12.5px; color: var(--encre-2); margin-top: 2px; }

/* Deux pastilles qui se chevauchent, comme le prototype : elles se lisent
   comme UNE information en deux temps — ce qu'elle vaut, où elle en est. */
.paire-pastilles { display: flex; flex: none; }
.pastille-jumelle {
  border-radius: var(--r-pastille); padding: 8px 16px; font-size: 13px; white-space: nowrap;
}
.pastille-jumelle.sombre { background: var(--vert-profond); color: #fff; position: relative; z-index: 1; }
.pastille-jumelle.claire {
  background: var(--vif-sur-sombre); color: var(--encre);
  padding-left: 22px; margin-left: -10px;
}

.preparation-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .preparation-deux { grid-template-columns: 1fr; } }

.bloc-clair { background: var(--bg-base); border-radius: 20px; padding: 16px; }
.bloc-titre { font-size: 12px; color: var(--encre-3); }
.preparation-contact { font-size: 15px; margin-top: 4px; }
.preparation-numero {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.preparation-dernier { font-size: 13px; margin-top: 6px; line-height: 1.55; color: var(--encre-2); }

/* L'avertissement sur un numéro déduit. En ambre et non en rouge : ce n'est
   pas une erreur, c'est une précaution — et le rouge ferait renoncer à
   appeler un numéro qui est souvent le bon. */
.avertissement {
  margin-top: 10px; background: var(--ambre-fond); color: var(--ambre-encre);
  border-radius: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.5;
}

.bloc-signaux {
  background: var(--vif-sur-sombre); border-radius: 20px; padding: 16px 18px;
  color: var(--encre);
}
.signaux-jetons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.jeton-signal {
  background: rgba(255, 255, 255, .6); border-radius: var(--r-pastille);
  padding: 6px 12px; font-size: 12px;
}
.signaux-vides { font-size: 12.5px; margin-top: 8px; line-height: 1.5; opacity: .8; }

.preparation-pied { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 8px; }
.btn-appeler { flex: 1; justify-content: center; padding: 16px; font-size: 14px; }

/* ── La marque ─────────────────────────────────────────────────────────────
   L'icône DANS le carré menthe, à la place de la lettre « S ». Le favicon et
   le rail portaient deux dessins différents : dans un onglet à côté de
   l'application ouverte, ça ne se lisait pas comme la même marque. */

.sidebar-brand-mark img { display: block; width: 22px; height: auto; }

/* Le logo complet sur la connexion. `height:auto` et non une hauteur figée :
   la marque n'est pas carrée, et l'imposer l'écraserait. */
.logo-nu { display: block; width: 196px; height: auto; }

/* ════════════════════════════════════════════════════════════════════════
   L'ASSISTANT D'APPEL — relevé sur « 6 · ASSISTANT D'APPEL »

   Trois colonnes : qui on appelle, les portes et le script, ce qu'on apprend.
   Tout tient sans défiler : chercher pendant qu'on parle s'entend au bout du
   fil.
   ════════════════════════════════════════════════════════════════════════ */

.assistant { padding-bottom: 20px; }

/* Ces deux ecrans ne defilent PAS : leurs colonnes defilent, chacune de son
   cote. Un ecran d'appel qui defile fait perdre l'issue de vue au moment ou
   l'on raccroche. */
/* ── Les écrans qui ne défilent PAS ─────────────────────────────────────
   La File et l'Assistant tiennent en un écran : ce sont leurs COLONNES qui
   défilent, chacune de son côté.

   Pour qu'une grille se borne à la hauteur de l'écran, il faut une hauteur
   DÉFINIE tout le long de la chaîne. `.content-inner` est un bloc à hauteur
   automatique : sans cette classe, `flex: 1` se calculait sur le contenu, la
   file de trente lignes faisait 2094 px, et « Démarrer l'appel » tombait à
   2163 px — hors de vue. Le bouton principal de l'écran était invisible, et
   rien ne le signalait. */
.shell.sans-defilement .content { overflow: hidden; }
.shell.sans-defilement .content-inner { height: 100%; }
.ecran.assistant, .ecran.plein { overflow: hidden; height: 100%; }
.assistant-colonne { overflow: auto; }
.assistant-titre { display: flex; align-items: center; gap: 14px; }
.assistant-nom { margin: 2px 0 0; font-size: 20px; font-weight: 400; }
.assistant-qui { color: var(--encre-3); font-weight: 300; }

.assistant-trois {
  display: grid; grid-template-columns: 320px 1fr 340px; gap: 16px;
  flex: 1; height: 0; min-height: 0;
}
@media (max-width: 1400px) { .assistant-trois { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .assistant-trois { grid-template-columns: 1fr; } }

.assistant-colonne { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.carte-blanche { background: var(--carte); border-radius: 24px; padding: 18px; }
.carte-menthe {
  background: var(--vif-sur-sombre); color: var(--encre);
  border-radius: 24px; padding: 18px;
}
.bloc-titre-fort { font-size: 15px; }

.preparation-initiales.petit { width: 48px; height: 48px; border-radius: 16px; font-size: 16px; }
.assistant-societe { font-size: 15px; }
.assistant-pastilles { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.assistant-dernier { margin-top: 14px; font-size: 12px; color: var(--encre-2); line-height: 1.6; }
.assistant-note {
  margin-top: 10px; font-size: 12.5px; background: var(--bg-base);
  border-radius: 14px; padding: 10px 12px;
}

.signaux-numerotes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.signal-numerote { display: flex; gap: 10px; align-items: flex-start; }
.signal-rond {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(0, 0, 0, .08); display: grid; place-items: center; font-size: 10px;
}

.assistant-contacts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 12.5px; }
.assistant-contact { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.assistant-fonction { font-size: 11px; color: var(--encre-3); }
.btn-marquer {
  border: 1px solid var(--bord-cible); background: transparent; color: var(--encre-2);
  border-radius: var(--r-pastille); padding: 5px 11px; font: inherit; font-size: 11px;
  cursor: pointer; flex: none;
}
.btn-marquer:hover { background: var(--ambre-fond); color: var(--ambre-encre); border-color: var(--ambre-encre); }

.ajout-contact { margin-top: 12px; font-size: 12.5px; }
.ajout-contact summary { cursor: pointer; color: var(--accent); }
.form-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.form-contact input {
  border: 1px solid var(--bord-cible); border-radius: 12px; padding: 9px 12px;
  font: inherit; font-size: 12.5px; background: var(--bg-base);
}
.assistant-retour { font-size: 12px; color: var(--vert-profond); margin: 10px 0 0; }
.assistant-retour.mauvais { color: var(--rouge-encre); }

/* ── Les portes et le script ────────────────────────────────────────────── */

.assistant-centre { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.portes-tete { display: flex; justify-content: space-between; align-items: center; }
.portes-compte { font-size: 12px; color: var(--encre-3); }
.portes-barre { display: flex; gap: 4px; }
.portes-segment { flex: 1; height: 6px; border-radius: 99px; background: #e6ebe7; }
.portes-segment.faite { background: var(--encre); }

.portes-liste { display: flex; flex-direction: column; gap: 8px; }
.porte {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; border-radius: var(--r-bloc); padding: 12px 14px;
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  background: var(--bg-base); color: var(--encre);
}
.porte.faite { background: var(--encre); color: #fff; }
/* Celle qu'on travaille, en menthe : elle dit où on en est sans qu'on
   compte les coches. */
.porte.en-cours { background: var(--vif-sur-sombre); }
.porte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.porte-rond {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px;
  background: var(--carte); color: var(--encre-3);
}
.porte.faite .porte-rond { background: var(--vif-sur-sombre); color: var(--encre); }
.porte.en-cours .porte-rond { background: var(--encre); color: #fff; }
.porte-libelle { flex: 1; }

.script {
  background: var(--bg-base); border-radius: 20px; padding: 18px 20px;
  font-size: 14px; line-height: 1.65; flex: 1; overflow: auto;
  white-space: pre-wrap;
}

/* ── Ce qu'on apprend, et l'issue ───────────────────────────────────────── */

.assistant-notes { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.assistant-mention { font-size: 11.5px; color: var(--encre-2); margin: 8px 0 10px; line-height: 1.5; }
.assistant-notes textarea {
  flex: 1; min-height: 80px; border: 0; background: var(--bg-base);
  border-radius: 16px; padding: 12px 14px; resize: none; font: inherit; font-size: 12.5px;
}

.carte-issue {
  background: var(--accent-sur-sombre); color: var(--encre);
  border-radius: 26px; padding: 18px 20px 16px;
}
.issue-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.issue-titre { font-size: 18px; }
.issue-mention { font-size: 11px; opacity: .7; }
/* « À qui avez-vous parlé ? » : UNE ligne, dans la carte de l'issue, parce que
   c'est le moment où l'on sait. Ailleurs sur l'écran, on la remplirait avant
   d'avoir décroché. */
.interlocuteur {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12px;
}
.interlocuteur select {
  flex: 1; min-width: 160px; font: inherit; font-size: 12px; padding: 6px 10px;
  border: 0; border-radius: var(--r-pastille);
  background: rgba(255, 255, 255, .55); color: var(--encre);
}

.issue-groupe {
  font-size: 11px; opacity: .65; margin-top: 12px;
  text-transform: uppercase; letter-spacing: .05em;
}
.issues { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.issue {
  border: 0; border-radius: var(--r-pastille); padding: 7px 11px 7px 7px;
  font: inherit; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .55); color: var(--encre);
}
.issue:hover { background: var(--encre); color: #fff; }
.issue:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.issue kbd {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-family: inherit;
  background: rgba(0, 0, 0, .1);
}
.issue:hover kbd { background: rgba(255, 255, 255, .2); }

/* Les deux détails, au centre de l'écran : ils demandent une réponse avant de
   pouvoir continuer, et une carte perdue dans une colonne se rate. */
.detail-flottant {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 420px; max-width: 92vw; z-index: 70;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.detail-flottant h2 { font-size: 17px; font-weight: 400; margin: 0 0 12px; }
.detail-flottant input[type="datetime-local"] {
  width: 100%; border: 1px solid var(--bord-cible); border-radius: 12px;
  padding: 10px 12px; font: inherit; background: var(--bg-base);
}
.detail-pied { display: flex; gap: 8px; margin-top: 14px; }
.motifs { display: flex; flex-wrap: wrap; gap: 6px; }
.motif {
  border: 0; border-radius: var(--r-pastille); padding: 7px 12px;
  font: inherit; font-size: 12px; cursor: pointer;
  background: var(--bg-base); color: var(--encre);
}
.motif:hover { background: var(--encre); color: #fff; }

.jeton-session {
  background: var(--carte); border-radius: var(--r-pastille);
  padding: 9px 16px; font-size: 13px; white-space: nowrap;
}
.jeton-numero {
  background: var(--encre); color: #fff; border-radius: var(--r-pastille);
  padding: 7px 8px 7px 16px; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
/* Ce qui n'existe pas encore, dit et non caché. En pointillé : la forme dit
   « pas branché » avant même qu'on lise le texte. */
.jeton-absent {
  border: 1px dashed var(--bord-cible); border-radius: var(--r-pastille);
  padding: 8px 15px; font-size: 12px; color: var(--encre-3); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   APRÈS L'APPEL — relevé sur « 7 · APRÈS L'APPEL »

   Ce qui a été retenu, ce qui va se passer, ce qui a été fait ailleurs.
   ════════════════════════════════════════════════════════════════════════ */

.apres-trois { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
@media (max-width: 1200px) { .apres-trois { grid-template-columns: 1fr; } }

.apres-etiquettes { display: flex; gap: 8px; flex-wrap: wrap; }
.apres-retenu { font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.apres-issue {
  background: var(--vif-sur-sombre); color: var(--encre);
  border-radius: 24px; padding: 18px 20px;
}
.apres-issue-nom { font-size: 24px; font-weight: 300; margin-top: 4px; }
.apres-suite { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 12.5px; }
.apres-fait { display: flex; gap: 10px; align-items: flex-start; }
.apres-coche {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(0, 0, 0, .1); display: grid; place-items: center; font-size: 10px;
}
.apres-pied { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.apres-pied-droite { display: flex; gap: 8px; }

/* ── La marche a suivre chez un fournisseur ──────────────────────────────
   Numerotee, et ouverte tant que rien n'est pose. Une matinee s'est perdue
   le 15 septembre 2026 non pas sur OVH mais sur << qu'est-ce que l'ecran
   attend de moi ? >>. */
.demarche { margin: 14px 0; font-size: 12.5px; }
.demarche > summary { cursor: pointer; color: var(--encre-2); }
.demarche-etapes { margin: 10px 0 0; padding-left: 22px; color: var(--encre-2); }
.demarche-etapes li { margin-bottom: 8px; line-height: 1.55; }

/* ── Un formulaire, un bouton ────────────────────────────────────────────
   Il y en avait un par valeur : sept boutons sur la carte de sauvegarde. */
.form-valeurs { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.champ-valeur { display: flex; flex-direction: column; gap: 3px; }
.champ-valeur label { font-size: 12.5px; color: var(--encre); }
.champ-aide { font-size: 11.5px; color: var(--encre-3); line-height: 1.5; }
.champ-valeur input {
  padding: 9px 11px; border: 1px solid var(--trait); border-radius: var(--r-pastille);
  background: var(--carte); color: var(--encre); font-size: 13px;
}
.form-valeurs .btn-plein { align-self: flex-start; }