/* ════════════════════════════════════════════════════════════════════════
   KIT — l'apparence de TOUS les outils de l'espace recruteur (2026-10-20).
   « Comme si c'était Apple qui avait fait la refonte » : fond gris clair des
   Réglages, listes blanches arrondies à lignes fines, un grand titre qui se
   replie dans la barre, la police du système, une seule couleur d'accent.
   Chargé EN DERNIER (après style.css, visual.css et agent.css) : il remplace
   leur apparence sans toucher aux identifiants que les modules utilisent.
   ⛔ Ni violet ni rose (décision de Javi du 2026-10-20), ni bouton flottant.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --k-green: #34c759; --k-green-ink: #1f8a46;
  --k-orange: #ff9500; --k-orange-ink: #b86a00;
  --k-red: #ff3b30; --k-red-ink: #d42d22;
  --k-teal: #30b0c7; --k-teal-ink: #137f93;
  --k-blue: var(--ag-brand); --k-blue-ink: var(--ag-brand);
  --k-gray: #8e8e93; --k-gray-ink: #636366;
  --k-yellow: #ffcc00; --k-yellow-ink: #9a7b00;
  --k-pad: clamp(16px, 3.2vw, 44px);
  --k-radius: 14px;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --k-av-1: #a9aeb9; --k-av-2: #868b97;
}
:root[data-theme="dark"] {
  --k-green: #30d158; --k-green-ink: #30d158; --k-orange: #ff9f0a; --k-orange-ink: #ff9f0a; --k-red: #ff453a; --k-red-ink: #ff6961;
  --k-teal: #40c8e0; --k-teal-ink: #40c8e0; --k-gray: #98989d; --k-gray-ink: #aeaeb2; --k-yellow: #ffd60a; --k-yellow-ink: #ffd60a;
  --k-shadow: none; --k-av-1: #6e727c; --k-av-2: #4d5057;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-green: #30d158; --k-green-ink: #30d158; --k-orange: #ff9f0a; --k-orange-ink: #ff9f0a; --k-red: #ff453a; --k-red-ink: #ff6961;
    --k-teal: #40c8e0; --k-teal-ink: #40c8e0; --k-gray: #98989d; --k-gray-ink: #aeaeb2; --k-yellow: #ffd60a; --k-yellow-ink: #ffd60a;
    --k-shadow: none; --k-av-1: #6e727c; --k-av-2: #4d5057;
  }
}
[hidden] { display: none !important; }

/* ── La fenêtre : la barre latérale masquée ne laisse plus de colonne vide ──
   Bug du 2026-10-20 : `.sidebar { display:none }` sortait la barre de la
   grille, et le contenu tombait dans la colonne de 0 px (page écrasée). */
.app-view.sb-collapsed { grid-template-columns: minmax(0, 1fr); }
.app-view:not([data-section="agent"]) { background: var(--ag-group); }
.app-view .content { min-width: 0; }

/* Le titre de la barre : caché tant que le grand titre est visible. */
.app-view.k-big #section-title { opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.app-view.k-big.k-scrolled #section-title { opacity: 1; transform: none; }
.app-view .topbar { transition: box-shadow .2s ease; }
.app-view.k-big.k-scrolled .topbar { box-shadow: 0 1px 0 var(--ag-sep); }

/* Les pages d'outils : pleine largeur, des marges qui suivent la fenêtre. */
.app-view .section:not([data-section="agent"]) { padding: 0 var(--k-pad) 80px; max-width: none; margin: 0; animation: k-in .22s ease both; }
@keyframes k-in { from { opacity: 0; } to { opacity: 1; } }

/* ── En-tête : grand titre + outils ───────────────────────────────────────── */
.k-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 14px 0 20px; }
.k-head-t { min-width: 0; flex: 1 1 260px; }
.k-title { margin: 0; font: 700 30px/1.12 var(--font); letter-spacing: -.028em; color: var(--ag-label); }
.k-sub { margin: 5px 0 0; color: var(--ag-sec); font-size: 14px; line-height: 1.45; }
.k-sub button { border: 0; background: none; padding: 0; color: var(--ag-brand); font: inherit; cursor: pointer; }
.k-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.k-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.k-bar .k-sp { flex: 1; }
.k-hold { display: none !important; }

/* ── Contrôles ─────────────────────────────────────────────────────────────── */
.k-search { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 10px; background: var(--ag-fill2); color: var(--ag-sec); width: 250px; flex: 0 1 auto; min-width: 150px; transition: background .15s, box-shadow .15s; }
.k-bar .k-search { width: 300px; }
.k-search svg { flex: none; }
.k-search input { all: unset; flex: 1; min-width: 0; height: 100%; font: 400 14px/1 var(--font); color: var(--ag-label); }
.k-search input::placeholder { color: var(--ag-ter); }
.k-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.k-search:focus-within { background: var(--ag-card); box-shadow: 0 0 0 1px var(--ag-sep), 0 0 0 4px color-mix(in srgb, var(--ag-brand) 22%, transparent); }

.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 15px;
  border: 0; border-radius: 999px; background: var(--ag-fill2); color: var(--ag-label); font: 600 13.5px/1 var(--font);
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, opacity .15s, transform .1s; flex: none;
}
.k-btn:hover { background: var(--ag-fill); }
.k-btn:active { transform: scale(.97); }
.k-btn.pri { background: var(--ag-brand); color: #fff; }
.k-btn.pri:hover { opacity: .9; background: var(--ag-brand); }
.k-btn.tint { background: color-mix(in srgb, var(--ag-brand) 12%, transparent); color: var(--ag-brand); }
.k-btn.tint:hover { background: color-mix(in srgb, var(--ag-brand) 18%, transparent); }
.k-btn.go { background: color-mix(in srgb, var(--k-green) 15%, transparent); color: var(--k-green-ink); }
.k-btn.danger { background: color-mix(in srgb, var(--k-red) 12%, transparent); color: var(--k-red-ink); }
.k-btn.plain { background: transparent; color: var(--ag-brand); padding: 0 8px; }
.k-btn.plain:hover { background: var(--ag-fill2); }
.k-btn.sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.k-btn:disabled { opacity: .45; cursor: default; transform: none; }
.k-btn .spinner, .k-icbtn .spinner { width: 13px; height: 13px; border-width: 2px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.k-icbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ag-sec);
  display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background .15s, color .15s; text-decoration: none;
}
.k-icbtn:hover, .k-icbtn.on, .k-icbtn[aria-expanded="true"] { background: var(--ag-fill2); color: var(--ag-label); }
.k-icbtn.fill { background: var(--ag-fill2); color: var(--ag-label); }
.k-icbtn.add { background: var(--ag-brand); color: #fff; }
.k-icbtn.add:hover { background: var(--ag-brand); opacity: .9; }
.k-icbtn.sm { width: 28px; height: 28px; }

.k-seg { display: inline-flex; align-items: stretch; gap: 0; padding: 2px; height: 32px; border-radius: 9px; background: var(--ag-fill2); flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.k-seg::-webkit-scrollbar { display: none; }
.k-seg > button {
  border: 0; background: transparent; color: var(--ag-label); font: 500 13px/1 var(--font); padding: 0 13px; border-radius: 7px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s;
}
.k-seg > button:hover { background: color-mix(in srgb, var(--ag-card) 50%, transparent); }
.k-seg > button.active, .k-seg > button.on { background: var(--ag-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; }
:root[data-theme="dark"] .k-seg > button.active, :root[data-theme="dark"] .k-seg > button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-seg > button.active, :root:not([data-theme="light"]) .k-seg > button.on { background: #636366; } }
.k-seg .k-n { font-size: 11.5px; font-weight: 600; color: var(--ag-sec); }
.k-seg svg { width: 15px; height: 15px; }
.k-seg .badge { background: var(--k-red); color: #fff; min-width: 17px; height: 17px; border-radius: 999px; font-size: 10.5px; padding: 0 5px; display: inline-grid; place-items: center; }

.k-popup {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 12px; border-radius: 10px; border: 0;
  background: var(--ag-fill2); color: var(--ag-label); font: 500 13.5px/1 var(--font); cursor: pointer; max-width: 300px; flex: none;
}
.k-popup > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-popup svg { color: var(--ag-sec); flex: none; }
.k-popup:hover, .k-popup.on { background: var(--ag-fill); }
select.k-select, .app-view select.src-select {
  -webkit-appearance: none; appearance: none; height: 34px; padding: 0 30px 0 12px; border: 0; border-radius: 10px; box-shadow: none;
  background: var(--ag-fill2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
  color: var(--ag-label); font: 500 13.5px/1 var(--font); cursor: pointer; max-width: 100%; min-width: 0;
}
.k-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; border: 0;
  background: var(--ag-fill2); color: var(--ag-label); font: 500 13px/1 var(--font); cursor: pointer; user-select: none; white-space: nowrap;
}
.k-chip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.k-chip.on, .k-chip:has(input:checked) { background: var(--ag-label); color: var(--ag-win); }
.k-chip .k-n { opacity: .6; font-weight: 600; }

/* ── Listes (iOS « inset grouped ») ─────────────────────────────────────────── */
.k-list { background: var(--ag-card); border-radius: var(--k-radius); box-shadow: var(--k-shadow), 0 0 0 .5px var(--ag-sep); overflow: hidden; }
.k-list + .k-list { margin-top: 18px; }
.k-list:empty { display: none; }
.k-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 12px 9px 14px;
  color: var(--ag-label); text-decoration: none; transition: background .12s; --k-sep-l: 64px;
}
.k-row + .k-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--k-sep-l); height: 1px; background: var(--ag-sep); }
.k-row.nolead { --k-sep-l: 14px; }
button.k-row { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: left; box-shadow: none; }
.k-row.click { cursor: pointer; }
.k-row.click:hover { background: color-mix(in srgb, var(--ag-fill2) 70%, transparent); }
.k-row.click:active { background: var(--ag-fill2); }
.k-row:focus-visible { outline: 2px solid var(--ag-brand); outline-offset: -2px; border-radius: 10px; }
.k-row-l { flex: none; display: inline-flex; align-items: center; }
.k-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-row-m > b { font-weight: 600; font-size: 14.5px; line-height: 1.3; display: flex; align-items: center; gap: 6px; min-width: 0; }
.k-row-m > b > .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.k-row-m > small { font-size: 13px; color: var(--ag-sec); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-row-m .k-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ag-sec); margin-top: 3px; }
.k-row-m .k-line span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.k-row-r { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ag-sec); font-size: 13px; white-space: nowrap; }
.k-row-a { flex: none; display: flex; align-items: center; gap: 2px; }
.k-row .k-more { color: var(--ag-ter); }
.k-row:hover .k-more, .k-row .k-more[aria-expanded="true"] { color: var(--ag-sec); }
.k-chev { color: var(--ag-ter); display: inline-flex; flex: none; margin-left: -2px; }
.k-group-h { display: flex; align-items: baseline; gap: 8px; margin: 26px 6px 8px; font: 600 13px/1.3 var(--font); color: var(--ag-sec); }
.k-group-h:first-child { margin-top: 0; }
.k-group-h span { font-weight: 500; color: var(--ag-ter); }
.k-more-row { display: flex; justify-content: center; padding: 14px 0 0; }

/* Vignettes d'app (une couleur par outil, jamais de violet). */
.k-tile {
  --s: 36px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .27); display: inline-grid; place-items: center; flex: none;
  color: #fff; background: linear-gradient(160deg, var(--t1), var(--t2)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .1);
}
.k-tile[data-tone="blue"] { --t1: #5b95ff; --t2: #2459e0; }
.k-tile[data-tone="green"] { --t1: #5fd38a; --t2: #1e9e4f; }
.k-tile[data-tone="orange"] { --t1: #ffb547; --t2: #f08a00; }
.k-tile[data-tone="red"] { --t1: #ff7a70; --t2: #e0352b; }
.k-tile[data-tone="teal"] { --t1: #5fd4e0; --t2: #1597a8; }
.k-tile[data-tone="yellow"] { --t1: #ffd65c; --t2: #eba900; }
.k-tile[data-tone="gray"] { --t1: #a3a9b5; --t2: #6d7380; }
.k-tile[data-tone="graphite"] { --t1: #7b8494; --t2: #3c4350; }
.k-tile[data-tone="brown"] { --t1: #c9a27c; --t2: #8a6a4a; }

/* Pastilles d'état. */
.k-pill { --c: var(--k-gray); --ci: var(--k-gray-ink); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--font); white-space: nowrap; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ci); }
.k-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.k-pill[data-tone="green"] { --c: var(--k-green); --ci: var(--k-green-ink); }
.k-pill[data-tone="blue"] { --c: var(--ag-brand); --ci: var(--ag-brand); }
.k-pill[data-tone="orange"] { --c: var(--k-orange); --ci: var(--k-orange-ink); }
.k-pill[data-tone="red"] { --c: var(--k-red); --ci: var(--k-red-ink); }
.k-pill[data-tone="teal"] { --c: var(--k-teal); --ci: var(--k-teal-ink); }
.k-pill[data-tone="yellow"] { --c: var(--k-yellow); --ci: var(--k-yellow-ink); }
.k-count { font-variant-numeric: tabular-nums; color: var(--ag-sec); }
.k-score { display: inline-flex; align-items: baseline; gap: 2px; font: 650 13px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ag-label); }
.k-score small { font-size: 10.5px; color: var(--ag-sec); font-weight: 600; }
.k-glyphs { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-sec); }
.k-glyphs span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }

/* État vide (« ContentUnavailableView »). */
.k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 72px 20px 64px; max-width: 540px; margin: 0 auto; color: var(--ag-sec); }
.k-empty-ic { width: 68px; height: 68px; border-radius: 50%; background: var(--ag-fill2); display: grid; place-items: center; color: var(--ag-sec); margin-bottom: 8px; }
.k-empty h3 { margin: 0; font: 700 19px/1.25 var(--font); color: var(--ag-label); letter-spacing: -.015em; }
.k-empty p { margin: 0; font-size: 14px; line-height: 1.55; }
.k-empty-a { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.empty.k-empty-host { background: none; border: 0; box-shadow: none; padding: 0; }

/* Lignes fantômes. */
.k-skel { pointer-events: none; }
.k-sk { display: block; height: 11px; border-radius: 6px; background: var(--ag-fill2); animation: k-pulse 1.4s ease-in-out infinite; }
.k-sk.sm { height: 9px; margin-top: 7px; }
.k-sk-av { width: 38px; height: 38px; border-radius: 50%; }
@keyframes k-pulse { 50% { opacity: .45; } }

/* ── Menus et alertes ─────────────────────────────────────────────────────── */
.k-menu {
  position: fixed; z-index: 140; min-width: 230px; max-width: 320px; max-height: min(70vh, 520px); overflow-y: auto; padding: 5px; border-radius: 12px;
  background: var(--ag-card); background: var(--ag-glass); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 14px 44px rgba(0, 0, 0, .2); color: var(--ag-label); font-family: var(--font);
  opacity: 0; transform: scale(.97); transform-origin: top right; transition: opacity .12s ease, transform .12s ease;
}
.k-menu.in { opacity: 1; transform: none; }
.k-menu-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px 6px 7px; border: 0; background: transparent; border-radius: 7px; font: 400 13.5px/1.3 var(--font); color: inherit; text-align: left; cursor: pointer; }
.k-menu-it:hover, .k-menu-it:focus-visible { background: var(--ag-brand); color: #fff; outline: none; }
.k-menu-it:disabled { opacity: .4; cursor: default; background: transparent; color: inherit; }
.k-menu-it.danger { color: var(--k-red-ink); }
.k-menu-it.danger:hover, .k-menu-it.danger:focus-visible { background: var(--k-red); color: #fff; }
.k-menu-ic { width: 18px; display: inline-grid; place-items: center; flex: none; }
.k-menu-it .t { flex: 1; min-width: 0; }
.k-menu-it .t small { display: block; font-size: 12px; opacity: .7; margin-top: 1px; }
.k-menu-k { margin-left: auto; font-size: 12px; opacity: .6; padding-left: 12px; }
.k-menu-sep { height: 1px; margin: 5px 8px; background: var(--ag-sep); }
.k-menu-h { padding: 7px 9px 3px; font: 600 11.5px/1.3 var(--font); color: var(--ag-sec); }
.k-alert { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .2); opacity: 0; transition: opacity .15s ease; }
.k-alert.in { opacity: 1; }
.k-alert-card {
  width: min(300px, 100%); background: var(--ag-card); background: var(--ag-glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border-radius: 14px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .28); padding: 20px 16px 14px; text-align: center; color: var(--ag-label);
  transform: scale(1.05); transition: transform .2s cubic-bezier(.2, .8, .2, 1); font-family: var(--font);
}
.k-alert.in .k-alert-card { transform: none; }
.k-alert-card h3 { margin: 0 0 6px; font: 700 15px/1.3 var(--font); }
.k-alert-card p { margin: 0 0 16px; font-size: 13px; color: var(--ag-sec); line-height: 1.45; }
.k-alert-a { display: flex; gap: 8px; }
.k-alert-a .k-btn { flex: 1; }

/* ── Visages : monogrammes gris, comme Contacts ───────────────────────────── */
.av { box-shadow: none; background: var(--ag-fill); }
.av-ini, :root[data-theme="dark"] .av-ini { background: linear-gradient(180deg, var(--k-av-1), var(--k-av-2)); color: #fff; font-weight: 600; letter-spacing: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-ini { background: linear-gradient(180deg, var(--k-av-1), var(--k-av-2)); color: #fff; } }
.avs .av { box-shadow: 0 0 0 2px var(--ag-card); }
.avs .av + .av { margin-left: -7px; }
.jt, :root[data-theme="dark"] .jt { box-shadow: none; border-radius: calc(var(--s) * .27); }
.k-verified { color: var(--ag-brand); display: inline-flex; flex: none; }

/* Pastilles et puces héritées, ramenées au gris d'Apple. */
.app-view .chip, .drawer-root .chip, .modal-root .chip { background: var(--ag-fill2); color: var(--ag-label); border: 0; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; }
.chip-ic, a.chip-ic { border: 0; background: var(--ag-fill2); color: var(--ag-label); font-weight: 500; font-size: 12px; }
.chip-ic.vid, :root[data-theme="dark"] .chip-ic.vid { background: var(--ag-fill2); color: var(--ag-label); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-ic.vid { color: var(--ag-label); } }
.chip-ic.ok { background: color-mix(in srgb, var(--k-green) 14%, transparent); color: var(--k-green-ink); }
.chip-ic.brand { background: color-mix(in srgb, var(--ag-brand) 12%, transparent); color: var(--ag-brand); }
.pro-tag { background: var(--ag-fill2) !important; color: var(--ag-sec) !important; border: 0 !important; box-shadow: none !important; }

/* ── Feuilles (fenêtres modales) ──────────────────────────────────────────── */
.modal-root { padding: 24px; }
.modal-backdrop { background: rgba(0, 0, 0, .26); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal {
  max-width: 620px; max-height: min(88vh, 940px); border: 0; border-radius: 16px; background: var(--ag-group); color: var(--ag-label);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 30px 90px rgba(0, 0, 0, .3); animation: k-sheet .26s cubic-bezier(.2, .8, .2, 1); font-family: var(--font);
}
@keyframes k-sheet { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; padding: 11px 12px;
  border-bottom: 1px solid var(--ag-sep); background: var(--ag-group); background: color-mix(in srgb, var(--ag-group) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); z-index: 3;
}
.modal-head h3 { grid-column: 2; margin: 0; text-align: center; font: 700 15px/1.3 var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-head .ghost-btn.icon { grid-column: 3; justify-self: end; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ag-fill2); color: var(--ag-sec); }
.modal-head .ghost-btn.icon svg { width: 15px; height: 15px; }
.modal-head .ghost-btn.icon:hover { background: var(--ag-fill); color: var(--ag-label); }
.modal-body { padding: 18px 20px 20px; font-size: 14px; line-height: 1.5; }
.modal-body > p:first-child, .modal-body form > p:first-child { color: var(--ag-sec); }
.modal-body h4 { margin: 18px 0 8px; font: 650 13px/1.3 var(--font); color: var(--ag-sec); }
.modal-body label, .cand-form label { display: block; margin: 0 0 12px; font: 500 12.5px/1.3 var(--font); color: var(--ag-sec); }
.modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.modal-body textarea, .modal-body select, .cand-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .cand-form textarea, .cand-form select {
  width: 100%; margin-top: 6px; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--ag-card); box-shadow: 0 0 0 .5px var(--ag-sep), 0 1px 1px rgba(0, 0, 0, .03);
  color: var(--ag-label); font: 400 14px/1.4 var(--font); transition: box-shadow .15s;
}
.modal-body select, .cand-form select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--ag-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center / 12px;
}
.modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus, .cand-form input:focus, .cand-form textarea:focus, .cand-form select:focus {
  outline: none; box-shadow: 0 0 0 1px var(--ag-brand), 0 0 0 4px color-mix(in srgb, var(--ag-brand) 20%, transparent);
}
.modal-body input.invalid { box-shadow: 0 0 0 1px var(--k-red), 0 0 0 4px color-mix(in srgb, var(--k-red) 18%, transparent); }
.modal-body input[type="file"], .file-input { width: 100%; margin-top: 6px; padding: 18px 14px; border: 1.5px dashed var(--ag-sep); border-radius: 12px; background: var(--ag-card); color: var(--ag-sec); font: 400 13px var(--font); cursor: pointer; }
.modal-body input[type="file"]::file-selector-button { margin-right: 12px; border: 0; border-radius: 999px; padding: 7px 13px; background: var(--ag-fill2); color: var(--ag-label); font: 600 12.5px var(--font); cursor: pointer; }
.modal-body fieldset, .modal-body .ai-box, .modal-body details.share-embed, .modal-body .dos-sec, .modal-body .checklist-block {
  border: 0; margin: 0 0 14px; padding: 14px 14px 4px; background: var(--ag-card); border-radius: 12px; box-shadow: 0 0 0 .5px var(--ag-sep);
}
.modal-body fieldset legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font: 650 13.5px/1.3 var(--font); color: var(--ag-label); }
.modal-body fieldset > legend + * { clear: both; }
.modal-body fieldset input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .modal-body fieldset textarea, .modal-body fieldset select,
.modal-body .dos-sec textarea, .modal-body .dos-sec select, .modal-body .ai-box input:not([type="file"]) { background-color: var(--ag-group); box-shadow: none; }
.modal-body .repeat-row { position: relative; margin: 0 0 12px; padding: 12px 40px 2px 12px; border: 0; border-radius: 10px; background: var(--ag-group); }
.modal-body .repeat-row .row-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--ag-fill2); color: var(--ag-sec); font-size: 12px; }
.modal-body .ai-box > summary, .modal-body details > summary { cursor: pointer; font: 600 13.5px var(--font); color: var(--ag-label); list-style: none; padding-bottom: 10px; }
.modal-body .ai-box > summary::before { content: none; }
.modal-body details > summary::-webkit-details-marker { display: none; }
.modal-body .dos-h { font: 650 13.5px/1.3 var(--font); color: var(--ag-label); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.grid2 { gap: 0 12px; }

/* Boutons des feuilles : pilules, comme les apps Apple. */
.modal-root .primary-btn, .drawer-root .primary-btn, .app-view .primary-btn {
  width: auto; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ag-brand); color: #fff; box-shadow: none; font: 600 13.5px/1 var(--font); gap: 6px;
}
.modal-root .primary-btn.block, .drawer-root .primary-btn.block { width: 100%; }
.modal-root .primary-btn:hover, .drawer-root .primary-btn:hover, .app-view .primary-btn:hover { filter: none; opacity: .9; box-shadow: none; }
.modal-root .ghost-btn, .drawer-root .ghost-btn, .app-view .ghost-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ag-fill2); color: var(--ag-label); font: 600 13.5px/1 var(--font); gap: 6px;
}
.modal-root .ghost-btn:hover, .drawer-root .ghost-btn:hover, .app-view .ghost-btn:hover { background: var(--ag-fill); color: var(--ag-label); }
.modal-root .ghost-btn.small, .drawer-root .ghost-btn.small, .app-view .ghost-btn.small, .modal-root .primary-btn.small, .app-view .primary-btn.small { height: 28px; padding: 0 12px; font-size: 12.5px; }
.modal-root .ghost-btn.icon, .drawer-root .ghost-btn.icon, .app-view .ghost-btn.icon { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.modal-root .ghost-btn.danger, .modal-root .danger-text, .drawer-root .ghost-btn.danger { color: var(--k-red-ink); }
.modal-root .ghost-btn.block { width: 100%; }
.modal-body > .form-actions, .modal-body > form > .form-actions {
  position: sticky; bottom: -20px; z-index: 2; margin: 18px -20px -20px; padding: 12px 20px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  background: var(--ag-group); background: color-mix(in srgb, var(--ag-group) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--ag-sep);
}
.modal-body .form-actions .danger-text { margin-right: auto; }
.form-actions { gap: 8px; }

/* Interrupteurs (cases à cocher des réglages). */
.modal-body label.check, .modal-body .remember, .modal-body .toggle-row, .cand-form label.check {
  display: flex !important; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--ag-label); font: 400 14px/1.4 var(--font); cursor: pointer;
}
.modal-body .toggle-row { align-items: flex-start; padding: 2px 0 8px; }
.modal-body .toggle-row span { color: var(--ag-label); }
.modal-body label.check input[type="checkbox"], .modal-body .remember input[type="checkbox"], .modal-body .toggle-row input[type="checkbox"],
.modal-body input[type="checkbox"][data-dayon], .modal-body .sched-day-head input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--ag-fill); cursor: pointer; transition: background .2s;
}
.modal-body label.check input[type="checkbox"]::before, .modal-body .remember input[type="checkbox"]::before, .modal-body .toggle-row input[type="checkbox"]::before,
.modal-body input[type="checkbox"][data-dayon]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, .7, .3, 1);
}
.modal-body label.check input[type="checkbox"]:checked, .modal-body .remember input[type="checkbox"]:checked, .modal-body .toggle-row input[type="checkbox"]:checked,
.modal-body input[type="checkbox"][data-dayon]:checked { background: var(--k-green); }
.modal-body label.check input[type="checkbox"]:checked::before, .modal-body .remember input[type="checkbox"]:checked::before, .modal-body .toggle-row input[type="checkbox"]:checked::before,
.modal-body input[type="checkbox"][data-dayon]:checked::before { transform: translateX(16px); }
.modal-body label.check input[type="checkbox"]:disabled, .modal-body .toggle-row input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.modal-body input[type="radio"], .modal-body input[type="checkbox"] { accent-color: var(--ag-brand); }

/* Choix exclusifs (note / tâche, rôle) : un contrôle segmenté. */
.note-kind { display: inline-flex; gap: 0; padding: 2px; border-radius: 9px; background: var(--ag-fill2); margin: 0 0 14px; }
.kchip { display: inline-flex !important; align-items: center; gap: 6px; height: 28px; margin: 0 !important; padding: 0 12px; border: 0 !important; border-radius: 7px; background: transparent !important; color: var(--ag-label) !important; font: 500 13px/1 var(--font) !important; cursor: pointer; }
.kchip.on { background: var(--ag-card) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600 !important; }
.kchip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.kchip svg { width: 15px; height: 15px; }

/* Partage : lien, copie, QR. */
.share-box { display: flex; flex-direction: column; gap: 12px; }
.copy-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.copy-row input, .copy-row textarea { margin-top: 0 !important; flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 12.5px !important; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--ag-card); border-radius: 12px; box-shadow: 0 0 0 .5px var(--ag-sep); }
.qr-wrap img { border-radius: 8px; background: #fff; padding: 6px; }
.preview-card { display: flex; flex-direction: column; gap: 10px; }
.pv-field { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; background: var(--ag-card); border-radius: 0; box-shadow: 0 .5px 0 var(--ag-sep); }
.pv-label { color: var(--ag-sec); font-size: 13px; }
.pv-value { text-align: right; font-size: 14px; }
.pv-name { margin: 0; font: 700 20px/1.25 var(--font); letter-spacing: -.02em; }

/* ── Fiches (tiroir) : un panneau d'inspecteur flottant ───────────────────── */
.drawer-scrim { background: rgba(0, 0, 0, .16); }
.drawer {
  top: 10px; right: 10px; height: calc(100% - 20px); width: min(560px, calc(100vw - 20px)); border-radius: 18px; overflow: hidden;
  background: var(--ag-group); color: var(--ag-label); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 30px 80px rgba(0, 0, 0, .26); font-family: var(--font);
  transform: translateX(calc(100% + 24px));
}
.drawer-x { top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--ag-fill2); color: var(--ag-sec); }
.drawer-x:hover { background: var(--ag-fill); color: var(--ag-label); }
@media (max-width: 640px) { .drawer { top: 0; right: 0; height: 100%; width: 100%; border-radius: 0; } }

/* L'inspecteur : visage, nom, actions rondes, puis des groupes. */
.ix { padding: 26px 18px 30px; display: flex; flex-direction: column; gap: 18px; }
.ix-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 6px; }
.ix-head .av { margin-bottom: 6px; }
.ix-name { margin: 0; font: 700 23px/1.2 var(--font); letter-spacing: -.022em; }
.ix-sub { color: var(--ag-sec); font-size: 14px; }
.ix-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.ix-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ix-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 76px; height: 62px; border: 0; border-radius: 12px;
  background: var(--ag-card); box-shadow: 0 0 0 .5px var(--ag-sep); color: var(--ag-brand); font: 500 11.5px/1.2 var(--font); cursor: pointer; text-decoration: none; transition: background .15s;
}
.ix-act:hover { background: color-mix(in srgb, var(--ag-card) 70%, var(--ag-fill2)); }
.ix-act:disabled { opacity: .45; cursor: default; }
.ix-act.pri { background: var(--ag-brand); color: #fff; box-shadow: none; }
.ix-act .spinner { width: 14px; height: 14px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.ix-sec { display: flex; flex-direction: column; gap: 8px; }
.ix-sec > h4 { margin: 0 6px; font: 600 13px/1.3 var(--font); color: var(--ag-sec); }
.ix-box { background: var(--ag-card); border-radius: 12px; box-shadow: 0 0 0 .5px var(--ag-sep); padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.ix-box p { margin: 0; white-space: pre-wrap; }
.ix-box .chips { margin-top: 0; }
.ix-kv { background: var(--ag-card); border-radius: 12px; box-shadow: 0 0 0 .5px var(--ag-sep); overflow: hidden; }
.ix-kv > div { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.ix-kv > div + div::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--ag-sep); }
.ix-kv span { color: var(--ag-sec); flex: none; }
.ix-kv a, .ix-kv b { color: var(--ag-brand); text-decoration: none; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; min-width: 0; }
.ix-kv b { color: var(--ag-label); }
.ix-stage { width: 100%; height: auto; flex-wrap: wrap; overflow: visible; }
.ix-stage > button { flex: 1 1 auto; height: 30px; justify-content: center; font-size: 12.5px; padding: 0 10px; }
.ix-stage > button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.ix-video { border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.ix-video video { width: 100%; height: 100%; display: block; object-fit: contain; }
.ix-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ix-gallery a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ag-fill2); }
.ix-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-measure { display: flex; align-items: center; gap: 12px; }
.ix-measure + .ix-measure { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ag-sep); }
.ix-measure p { margin: 4px 0 0; font-size: 13px; color: var(--ag-sec); white-space: normal; }
.ix-note { font-size: 12px; color: var(--ag-ter); margin: 2px 6px 0; }
.ix-tl { list-style: none; margin: 0; padding: 0; }
.ix-tl li { position: relative; padding: 0 0 12px 16px; font-size: 14px; }
.ix-tl li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-ter); }
.ix-tl li:last-child { padding-bottom: 0; }
.ix-tl small { color: var(--ag-sec); }
.ix-tl .muted { color: var(--ag-sec); font-size: 13px; margin-top: 2px; }
.ix-foot { display: flex; justify-content: center; padding-top: 4px; }
.ring { background: radial-gradient(closest-side, var(--ag-card) 78%, transparent 80% 100%), conic-gradient(var(--ag-brand) calc(var(--p) * 1%), var(--ag-fill2) 0); width: 52px; height: 52px; flex: 0 0 52px; }
.ring b { font-size: 15px; }

/* ── Toast : une capsule sombre en bas, comme une notification système ──── */
.toast {
  bottom: 24px; padding: 10px 18px; border: 0 !important; border-radius: 999px; background: rgba(30, 30, 32, .92); color: #fff;
  font: 500 13.5px/1.3 var(--font); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 160;
}
.toast.error::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k-red); margin-right: 8px; vertical-align: middle; }
.toast.success::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k-green); margin-right: 8px; vertical-align: middle; }

/* ── Téléphone ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .app-view .section:not([data-section="agent"]) { padding: 0 16px 64px; }
  .k-head { padding: 10px 0 16px; align-items: stretch; flex-direction: column; }
  .k-head-t { flex: none; }
  .k-title { font-size: 28px; }
  .k-tools { justify-content: flex-start; flex-wrap: wrap; }
  .k-search, .k-bar .k-search { flex: 1 1 100%; width: auto; min-width: 0; order: 9; }
  .k-row { padding-right: 8px; }
  .k-row-r .k-hide-m { display: none; }
  .modal-root { padding: 0; align-items: flex-end; }
  .modal { max-width: none; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .k-menu, .k-alert, .k-alert-card, .modal, .app-view .section:not([data-section="agent"]) { transition: none; animation: none; }
  .k-sk { animation: none; }
}